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.
Except 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 KnowledgeContent, 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.
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
Create Order wizard component has to be designed to be integrated into any place of application as user action.
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
Each of these tasks will be described below in steps.
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.
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
1awaitgetQuery<NetworkIdsResult>(networkIdsQuery,{2 ref:`VC:BASE:${activeRetailer}`,// TODO virtual catalogue ref (for example, BASE or VC:BASE)3}).then((resp)=>{
Hardcoded Product Catalogue Reference
1awaitgetQuery<VariantProductsResult>(variantProductsQuery,{2 productsRef: newProducts.map((product)=> product.ref),3 catalogueRef:`MASTER:${activeRetailer}`,// TODO product catalogue ref (for example, DEFAULT or MASTER)4}).then((resp)=>{
1return{2 ref: item.ref,3 productRef: item.ref,4 productCatalogueRef:`MASTER:${activeRetailer}`,// TODO product catalogue ref (for example, DEFAULT or MASTER)5 quantity: item.quantity,6 paidPrice: item.price,
1return{2 ref: product.ref,3 productRef: product.ref,4 productCatalogueRef:`MASTER:${activeRetailer}`,// TODO product catalogue ref (for example, DEFAULT or MASTER)5 quantity: product.quantity,6 paidPrice: product.price,
Hardcoded Fulfilment Option type
1returngetQuery<FulfilmentOptionResult>(createFulfilmentPlansMutation,{2 uuid:`App-${uuid()}`,3 type: orderType,// TODO type of FulfilmentOption entity (for example, DEFAULT or HD/CC (orderType))4 orderType: orderType,5 retailerId: activeRetailer,
After order creation, the user will be navigated to the new order details page (by default: `#/orders/{orderId}/{activeRetailerId}/{orderRef}`). This behavior can be modified in the file `CreateOrder.tsx`.
Mystique mutation action doesn't allow to group few input fields and uses one component for them. So hack was used here. Mutation `createComment` was used instead of `createOrder `mutation to create a custom action and group all input fields to one custom component.At the end of the creation process`createOrderWizard` component will replace `createComment` mutation to `createOrder`.As a result, only a new order will be created, and the user will be navigated to the new order details page.
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.
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:
1{2"translation":{3"fc.se.field.create.order.user.action.label":"Create Order",4"fc.se.wizard.subtitle":"Step {{activeStep}} of {{count}}",5"fc.se.wizard.button.previous":"Previous",6"fc.se.wizard.button.next":"Next",7"fc.se.wizard.button.skip":"Skip",8"fc.se.field.create.order.title":"Create Order",9"fc.se.field.create.order.first.step.title":"Choose product items",10"fc.se.field.create.order.second.step.title":"Choose customer and order type",11"fc.se.field.create.order.second.step.customer.label":"Customer",12"fc.se.field.create.order.second.step.order.type.label":"Order Type",13"fc.se.field.create.order.home.delivery":"Home Delivery",14"fc.se.field.create.order.click.and.collect":"Click and Collect",15"fc.se.field.create.order.second.step.customer.address.label":"Customer Address",16"fc.se.field.create.order.second.step.street.label":"Street",17"fc.se.field.create.order.second.step.city.label":"City",18"fc.se.field.create.order.second.step.postcode.label":"Zip",19"fc.se.field.create.order.second.step.state.label":"State",20"fc.se.field.create.order.second.step.country.label":"Country",21"fc.se.field.create.order.second.step.location":"Location",22"fc.se.field.create.order.third.step.title":"Choose delivery option",23"fc.se.field.create.order.fulfilment.plans.hour":"Hour",24"fc.se.field.create.order.fulfilment.plans.hours":"Hours",25"fc.se.field.create.order.fulfilment.plans.delivery.type":"Delivery Service Level",26"fc.se.field.create.order.fulfilment.plans.location":"Location",27"fc.se.field.create.order.multi.collection.items.product":"Product",28"fc.se.field.create.order.multi.collection.items.ref.no":"Ref no",29"fc.se.field.create.order.multi.collection.quantity":"Quantity",30"fc.se.field.create.order.multi.collection.split.btn":"Split",31"fc.se.field.create.order.multi.collection.address.title":"Address",32"fc.se.field.create.order.multi.collection.address.modal":"Address",33"fc.se.field.create.order.multi.collection.change.address":"Change Address",34"fc.se.field.create.order.multi.collection.add.address":"Add Address",35"fc.se.field.create.order.multi.collection.order.type.label":"Order Type",36"fc.se.field.create.order.multi.collection.location":"Location",37"fc.se.field.create.order.multi.collection.split.item.label":"Split Item",38"fc.se.field.create.order.multi.collection.split.done.btn":"Done",39"fc.se.field.create.order.multi.collection.address.form.street.label":"Street",40"fc.se.field.create.order.multi.collection.address.form.city.label":"City",41"fc.se.field.create.order.multi.collection.address.form.postcode.label":"Zip",42"fc.se.field.create.order.multi.collection.address.form.state.label":"State",43"fc.se.field.create.order.multi.collection.address.form.country.label":"Country",44"fc.se.field.create.order.multi.collection.address.save.btn":"Save",45"fc.se.field.create.order.multi.collection.address.close.btn":"Close",46"fc.se.field.create.order.multi.collection.default.delivery.address":"Default Delivery Address",47"fc.se.field.create.order.multi.collection.default.customer.address":"Default Customer Address",48"fc.se.field.create.order.third.step.basket":"Basket",49"fc.se.field.create.order.third.step.item.collection":"Item pickup",50"fc.se.field.create.order.fifth.step.financial.transaction.title":"Financial Transactions",51"fc.se.field.create.order.fifth.step.financial.transaction.add.button":"Add Financial Transaction",52"fc.se.field.create.order.fifth.step.financial.transaction.remove.button":"Remove Financial Transaction",53"fc.se.field.create.order.fifth.step.financial.transaction.amount":"Amount",54"fc.se.field.create.order.fifth.step.financial.transaction.currency":"Currency",55"fc.se.field.create.order.fifth.step.financial.transaction.payment.method":"Payment Method",56"fc.se.field.create.order.fifth.step.financial.transaction.payment.provider":"Payment Provider",57"fc.se.field.create.order.fifth.step.financial.transaction.ref":"Transaction Ref",58"fc.se.field.create.order.fifth.step.financial.transaction.card.type":"Card Type",59"fc.se.field.create.order.summary.title":"Summary",60"fc.se.field.create.order.summary.product.list.head.image":"Image",61"fc.se.field.create.order.summary.product.list.head.product":"Product",62"fc.se.field.create.order.summary.product.list.head.price":"Price",63"fc.se.field.create.order.summary.product.list.head.quantity":"Quantity",64"fc.se.field.create.order.summary.order.type":"Order Type",65"fc.se.field.create.order.summary.delivery.type":"Delivery Service Level",66"fc.se.field.create.order.summary.country":"Country",67"fc.se.field.create.order.summary.city":"City",68"fc.se.field.create.order.summary.state":"State",69"fc.se.field.create.order.summary.street":"Street",70"fc.se.field.create.order.summary.postcode":"Zip",71"fc.se.field.create.order.summary.pickup.location":"Pickup Location",72"fc.se.field.create.order.summary.taxes":"Tax",73"fc.se.field.create.order.summary.subtotal":"Subtotal",74"fc.se.field.create.order.summary.total.price":"Order Total",75"fc.se.field.create.order.summary.delivery.details":"Delivery Details",76"fc.se.field.create.order.summary.order.items":"Order Items",77"fc.se.field.create.order.summary.item.image":"Item Image",78"fc.se.field.create.order.summary.item.name":"Item Name",79"fc.se.field.create.order.summary.quantity":"Quantity",80"fc.se.field.create.order.summary.price":"Price",81"fc.se.field.create.order.summary.total.item.price":"Total Item Price",82"fc.se.field.create.order.summary.order.item.type":"Order Item Type",83"fc.se.field.create.order.summary.address.label":"Address",84"fc.se.field.create.order.bottom.required.label":"Required",85"fc.se.field.create.order.not.complete.steps":"Please complete all steps",86"fc.se.field.create.order.success.created.order":"You successfully created order",87"fc.se.field.create.order.successfully.created.order.message":"Order {{ref}} for customer {{name}} was successfully created",88"fc.se.add.product.items.item.added":"Item added",89"fc.se.add.product.items.item.added.to.order":"has been added to order",90"fc.se.add.product.items.error.label":"Error",91"fc.se.add.product.items.error.empty.setting":"There is no setting {{settingName}}",92"fc.se.add.product.items.error.not.aggregate.setting":"Catalog in {{settingForDefaultCatalogue}} setting should be aggregate",93"fc.se.add.product.items.product":"Product",94"fc.se.add.product.items.ref.no":"Ref no",95"fc.se.add.product.items.quantity":"Quantity",96"fc.se.add.product.items.unit.price":"Unit price",97"fc.se.add.product.items.was":"was",98"fc.se.add.product.items.taxes":"Tax",99"fc.se.add.product.items.subtotal":"Subtotal",100"fc.se.add.product.items.total.price":"Order Total",101"fc.se.add.product.items.add.modal.search.product.ref":"Product Ref",102"fc.se.add.product.items.add.modal.title":"Select Products",103"fc.se.add.product.items.add.modal.button.done":"Done",104"fc.se.add.product.items.add.modal.table.head.image":"Image",105"fc.se.add.product.items.add.modal.table.head.product":"Product",106"fc.se.add.product.items.add.modal.table.head.attributes":"Attributes",107"fc.se.add.product.items.add.modal.table.show.attributes.title":"Attributes",108"fc.se.add.product.items.add.modal.table.head.quantity":"Quantity",109"fc.se.add.product.items.add.modal.table.head.add":"Add",110"fc.se.add.product.items.add.modal.showing.rows":"Showing {{start}} of {{end}}",111"fc.se.add.product.items.add.modal.table.no.available":"No available Products",112"fc.se.add.product.items.add.item.button":"Add item",113"fc.se.add.product.items.product.list.head.image":"Image",114"fc.se.add.product.items.product.list.head.product":"Product",115"fc.se.add.product.items.product.list.head.price":"Net Price",116"fc.se.add.product.items.product.list.head.description":"Description",117"fc.se.add.product.items.product.list.head.remove":"Remove",118"fc.se.add.product.items.product.list.head.quantity":"Quantity",119"fc.se.add.product.items.product.list.attributes.modal.title":"Product Attributes",120"fc.se.add.product.items.product.list.count.ofMax":"of {{max}}"121}122}123
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.
Solutions Approach