Order Journey Changes
We have received feedback from ATSs that they want to show steps as accordions.
Enabling Accordion Steps
To enable the accordion functionality, we have added a new state variable called stepsAccordionsShouldBeEnabled to our Order Journey module. Setting this variable to true activates the accordion view for Order Journey steps.
How to Activate
Simply set the variable as shown below:
window.hapi.orderJourney.state.stepsAccordionsShouldBeEnabled = true
When enabled, each Order Journey step is displayed as an accordion. Users can click on a step's header to expand or collapse the form.
Handling Data Changes
When accordion steps are enabled, the interface automatically responds to form data changes. When data within a step is updated, the corresponding accordion expands to highlight the modification. This behavior is driven by a new variable named stepActiveData, which stores the form data for the active step (stepActive) or, if it's a step group (stepActiveGroup), it holds the data for each individual step.
Handling Errors
The same happens with errors: when accordion steps are enabled and a validation error occurs, the corresponding accordion step automatically expands and its header is highlighted in red to draw the user's attention immediately.
This behavior is facilitated by the new variable stepActiveErrors, which stores the validation results for the active step (stepActive) or for each step within a step group (stepActiveGroup).
Additional Introductions
Below is a list of functions and utilities that provide essential operations within the Order Journey module:
State
Service
Utils