Add new / edit order status

Description

This page allows adding or editing the Order statuses which are managed in the Orders listing page.

QA

Link to the tests

Common components

Tab selection

Selection is defined with the Navigation navigation tabs UI Kit. Statuses tab is selected by default in this page.

Order status section

The section contains a clock icon, a title Order status in the header and the whole content down the header.

Status name field

DescriptionValueError message

Mandatory

YES

The field name is required at least in English (English).

Allowed/Forbidden values

Invalid characters: numbers and !<>,;?=+()@#"{}_$%:

-

Default value

Empty field

-

Help text

-

-

Tool tips

Order status (e.g. 'Pending'). Invalid characters: numbers and !<>,;?=+()@#"{}_$%:

-

Lower limit

1

-

Upper limit

64

Your entry in field name (language English (English)) exceeds max length 64 chars (incl. HTML tags).

Behavior

-

Language switcher

(common component todo link).

Icon

DescriptionValueError message

Mandatory

NO

-

Allowed/Forbidden values

All graphical extensions: GIF, JPG, JPEG, JPE, PNG, WEBP.

Image format not recognized, allowed formats are: .gif, .jpg, .jpeg, .jpe, .png, .webp

Default value

Empty field

-

Help text

-

-

Tool tips

Upload an icon from your computer (File type: .gif, suggested size: 16x16).

-

Lower limit

-

-

Upper limit

-

Your entry in field name (language English (English)) exceeds max length 64 chars (incl. HTML tags).

Behavior

-

Color title

DescriptionValueError message

Mandatory

NO

-

Allowed/Forbidden values

-

-

Default value

#ffffff

-

Help text

-

-

Tool tips

Status will be highlighted in this color. HTML colors only. "lightblue", "#CC6600")

-

Lower limit

-

-

Upper limit

-

-

Behavior

-

Checkboxes with the particular settings

There are particular statements from Forms Checkboxes UI Kit. Those statements can apply to the particular Order status. Once the checkbox or the sentence is clicked, the statement will be enabled after clicking Save CTA button. Once the checkbox or the sentence is clicked once again, the statement will be disabled after clicking Save CTA button. The statements are with the explanations:

  • Consider the associated order as validated.

  • Allow a customer to download and view PDF versions of his/her invoices.

  • Hide this status in all customer orders.

  • Send an email to the customer when his/her order status has changed.

  • Attach invoice PDF to email.

  • Attach delivery slip PDF to email.

  • Set the order as shipped.

  • Set the order as paid.

  • Show delivery PDF.

Cancel button

Cancel button CTA (common component link todo)

Save button

Save button CTA (common component link todo)

Behaviors descriptions

Add figma link here ( Tristan Lehot)

Behavior of the Status name field

The field belongs to the Forms normal UI Kit. This field defines the name of the old or the new Order status. Once the field is filled, clicking Save will store the name.

Behavior of the Icon

This component is from Forms files UI Kit. The icon of the can be updated or added to the particular Order status. Once the graphical element is selected from the native machines' Browse popup, clicking OK and then Save in Prestashop will store the icon.

Color picker component behavior

Color picker (todo common component link when merge)

Multistores functionality

Multistores dependent page.

Last updated