Invoices
Description
This UI displays the Invoices configuration page and allows generating the appropriate PDF invoices.
QA
Common components
Breadcrumbs navigation - Breadcrumb UI Kit.
Heading of the page - Headings UI Kit.
Help Button - Buttons Outline UI Kit.
Bell icon (todo link)
Trophy icon (todo link)
Top UI elements block
Invoices - H1 class title for the page.
By date block
This UI block provides the ability to download the PDF invoices of the selected range of time. After the download, the invoices are displayed page by page in a single document, if there are multiple PDF invoices.
Calendar icon and title By date - title of the UI block.
Generate PDF file by date CTA - once clicked, the PDF download will be executed.
From and tooltip i icon
To and tooltip i icon
Date picking widget inputs with the calendar icons
By order status block
This UI block provides the ability to download the PDF invoices of the selected order statuses. After the download, the invoices are displayed page by page in a single document, if there are multiple PDF invoices. Also, there are following components:
Clock icon and title By date - title of the UI block.
Generate PDF file by status CTA - once clicked, the PDF download will be executed.
Order statuses and tooltip i icon
Gear icon and Invoice options
No length limits for characters and no limits for special symbols are set on all configure input fields.
Enable invoices and tooltip i icon
Enable tax breakdown and tooltip i icon
Enable product image and i icon
Invoice prefix and tooltip i icon
Add current year to invoice number
Reset sequential invoice number at the beginning of the year
Position of the year date
Invoice number and tooltip i icon
Legal free text and tooltip i icon
Footer text and tooltip i icon
Invoice model and tooltip i icon
Use the disk as cache for PDF invoices and i icon
Behavior descriptions
From and tooltip i icon behavior
Once hovered, the tooltip is with the white-colored text in the dark box Format: 2011-12-31 (inclusive). Component is from Forms Input Gtoup UI Kit.
To and tooltip i icon behavior
Once hovered, the tooltip is with the white-colored text in the dark box Format: 2011-12-31 (inclusive). Component is from Forms Input Gtoup UI Kit.
Date picking widget inputs with the calendar icons behavior
Once clicked on the date numbers, there will be a date picking widget pop-up.
Order statuses and tooltip i icon behavior
Once hovered, the tooltip is with the white-colored text in the dark box, You can also export orders which have not been charged yet. Checkboxes, square icons with red or green backgrounds, and numeric values in the squares, Order status names - the square background color indicates if there are some invoices in total counted for the certain Order status - square with green background. Or there are no invoices in total for the certain Order status - red square. The total number of the invoices are displayed in the squares. Checkboxes are from the Forms Checkboxes UI Kit.
Enable invoices and tooltip i icon behavior
Enables or disables Invoices, once the tooltip is hovered, there is a text in the dark box If enabled, your customers will receive an invoice for the purchase. Component is from the Forms Switch Story UI Kit.
Enable tax breakdown and tooltip i icon behavior
Enables or disables showing the Tax details in the Invoice, once the tooltip is hovered, there is a text in the dark box If required, show the total amount per rate of the corresponding tax. Component is from the Forms Switch Story UI Kit.
Enable product image and i icon behavior
Enables or disables showing the product image in the Invoice, once the tooltip is hovered, there is a text in the dark box Adds an image in front of the product name on the invoice. Component is from the Forms Switch Story UI Kit.
Invoice prefix and tooltip i icon behavior
Input field where specific prefix, for Invoice can be set. The prefix will be displayed in the first characters of the Invoice file name and in the beginning of the Invoice number displayed. Once the tooltip is hovered, there is a text in the dark box Freely definable prefix for invoice number (e.g. #IN00001). There is a dropdown with the arrow-down icon, where the prefix can be set for different languages. Component is from Forms Normal UI Kit.
Add current year to invoice number behavior
Adds a year to the Invoice number. Component is from the Forms Switch Story UI Kit.
Reset sequential invoice number at the beginning of the year behavior
Adds sequential invoice number after year changes to the new. Component is from the Forms Switch Story UI Kit.
Position of the year date behavior
And two radio button positions After the sequential number and Before the sequential number triggers the year date position display in Invoices. Component is from the Forms Radio Buttons UI Kit.
Invoice number and tooltip i icon behavior
Input field, where the numeric value can be typed. The typed number will indicate the beginning number of the Invoices numbers arrangement. Once the tooltip is hovered, there is a text in the dark box If the value is 0, then the arrangement will remain the default. The next invoice will begin with this number, and then increase with each additional invoice. Set to 0 if you want to keep the current number (which is #25). Component is from Forms Normal UI Kit.
Legal free text and tooltip i icon behavior
Input field where additional fee explanation text can be added. Once the tooltip is hovered, there is a text in the dark box Use this field to show additional information on the invoice, below the payment methods summary (like specific legal information). Also, different texts for different languages can be saved, by using the language dropdown. Component is from Forms Normal UI Kit.
Footer text and tooltip i icon behavior
Input field, where footer text can be displayed. Once the tooltip is hovered, there is a text in the dark box Use this field to show additional information on the invoice, below the payment methods summary (like specific legal information). Also, different texts for different languages can be saved, by using the language dropdown. Component is from Forms Normal UI Kit.
Invoice model and tooltip i icon behavior
Dropdown field, where 2 types of Invoices can be selected - invoice or invoice-b2b. Once the tooltip is hovered, there is a text in the dark box, Choose an Invoice model. Component is from the Forms Selects UI Kit.
Use the disk as cache for PDF invoices and i icon behavior
Enable or Disable the function, to use the host capacity to cache the PDF invoices. Once the tooltip is hovered, there is a text in the dark box Once the tooltip is hovered_Saves memory but slows down the PDF generation. Component is from the Forms Switch Story UI Kit.
Multistores functionality
Multistores dependent page.
Each Multistore has its separate webshop databases. It means, one configuration on one Multistore or Shop group will not affect the other Multistore or Shop group.
Last updated
