Create Order Wizard
How-to Guide
Extend
Author:
Siarhei Vaitsiakhovich
Changed on:
5 Sept 2025
Key Points
- The 'Create Order' wizard streamlines the order creation process by guiding users through each step, reducing the chances of errors, and ensuring all necessary information is captured.
- It provides a user-friendly interface that simplifies complex order configurations, making it accessible for users with varying levels of technical expertise.
- The wizard includes validation checks at each step, ensuring that all entered data is accurate and complete before proceeding to the next step.
Prerequisites
Steps
Solutions Approach
The Create Order wizard how allows to collect all order-related information before starting order processing. List of collectible information:- List of Order Items
- Customer Information
- Order Type
- Delivery Information (Customer, Delivery address, or Pickup Location information)
- Information about fulfillment choices (for Mixed Order)
- List of Financial Transactions related to order
Technical Design Overview
To support the business solution design, the following technical areas need to be enhanced:- A new customer UI component (by using Component SDK) -
`createOrderWizard` - Modify application manifest to display new action as user action
- Add a list of settings that are needed for the correct working of the Create Order wizard
- Update of the Language Setting
UI Component: createOrderWizard
Create Order Wizard component was designed and registered as FieldComponent to be used in mutation user action. Additionally, `currency` and `currencySymbol` templates was added to improve displaying of price fields.UI Component: Known Issues
Part of additional data that is needed for correct work of Create Order Component was hardcoded, so code have to be modified according to specific environment.Known places:- Hardcoded Virtual Catalogue Reference
- Hardcoded Product Catalogue Reference
- Hardcoded Fulfilment Option type
`#/orders/{orderId}/{activeRetailerId}/{orderRef}`). This behavior can be modified in the file `CreateOrder.tsx`.The full source code is presented in the section 'Related Sources'.Manifest changes: Create Order user action definition
The button for triggering the Create Order wizard drawer can be added as a mutation user action by updating the application manifest.Setting Updates
List of settings that must be present in the system for correct work of the Create Order wizard:`AGGREGATE_CATALOGUE_FOR_ADD_PRODUCT_ITEMS`- name of catalog to provide product availability information for 'Add Item' modal.
| Property | Value |
| Name | AGGREGATE_CATALOGUE_FOR_ADD_PRODUCT_ITEMS |
| Context | ACCOUNT |
| Context Id | 0 |
| Value Type | STRING |
| Value | Name of catalogue (for example: VC:AGGREGATE) |
`ORDER_TYPES`- list of Order Types with localization labels to be used on Create Order Wizard.
| Property | Value |
| Name | ORDER_TYPES |
| Context | ACCOUNT |
| Context Id | 0 |
| Value Type | JSON |
| Value | List of Order Types with labels (see example) |
`PAYMENT.CARDTYPE`- list of Card Types that are available to select for Financial Transactions.
| Property | Value |
| Name | PAYMENT.CARDTYPE |
| Context | RETAILER |
| Context Id | <retailer_id> |
| Value Type | JSON |
| Value | List of Card Types (see example) |
`DEFAULT_TAX_TYPE`- tax information to be used by default (see`src/hooks/useDefaultTariffValue.tsx`).
| Property | Value |
| Name | DEFAULT_TAX_TYPE |
| Context | RETAILER |
| Context Id | <retailer_id> |
| Value Type | JSON |
| Value | Default tax tariff name |
| Property | Value |
| Name | tariff name (for example: VAT) |
| Context | RETAILER |
| Context Id | <retailer_id> |
| Value Type | STRING |
| Value | Tax amount (for example, 0.2) |
`PAYMENT.CURRENCY`- list of currencies that are available to select for Financial Transactions.
| Property | Value |
| Name | PAYMENT.CURRENCY |
| Context | RETAILER |
| Context Id | <retailer_id> |
| Value Type | JSON |
| Value | List of available currencies |
`PAYMENT.METHOD`- list of payment methods that are available to select for Financial Transactions.
| Property | Value |
| Name | PAYMENT.METHOD |
| Context | RETAILER |
| Context Id | <retailer_id> |
| Value Type | JSON |
| Value | List of available payment methods |
`PAYMENT.PROVIDER`- list of payment providers that are available to select for Financial Transactions.
| Property | Value |
| Name | PAYMENT.PROVIDER |
| Context | RETAILER |
| Context Id | <retailer_id> |
| Value Type | JSON |
| Value | List of available payment providers |
The list of constants for related settings is described in the file
`src/constants/SettingNames.ts`.Localization Updates
List of localization entries which was used in 'Create Order Wizard' component and related settings:Result
'Create Order' action is placed on 'Orders' page.
Create Order Wizard, Step 1 - select Order Items.Create Order Wizard, Step 1 - modal dialog to select Order Items.Create Order Wizard, Step 2 - select Order Type and Customer/Delivery information.Create Order Wizard, Step 3 - select Delivery Type/Carrier.Create Order Wizard, Step 3 - configure Delivery for Mixed Order.Create Order Wizard, Step 4 - add information about Financial Transactions.Create Order Wizard, Final Step - Summary.Related Sources
ComponentExcept as otherwise stated in the Extend Knowledge Content site policy, the content on this page is licensed under the Creative Commons Attribution 4.0 Licence, and any code samples that appear on this page are licensed under the Apache 2.0 Licence, unless any code sample forms part of the Fluent Order Management Platform code. Neither of these licences apply to any content on any other page that can be reached via a link on this page unless otherwise specified on that other page. If you wish to use any of the Extend Knowledge Content, you must do so in compliance with the licenses referred to above and the Extend Knowledge Content site policy, including attribution in the manner set out on this page.
