Disabling User (Order) Journey Steps
How can we disable some user (order) journey steps?
Each user (order) journey widget has different steps enabled and you need to get which steps those are. To do that, go to Playground -> Order Journey Product tab.
The widgets that are User Journey widgets have their names ending with "Journey" or "Journey (Shorter)". These widgets have Initial State sub tab on the right sidebar below the Remarks section. In the Initial State you will find an object that looks like this **for widgets that don't have "(Shorter)" in their name or Web Component name ending with "-shorter":
{
"orderJourneyStore": {
"stepsEnabled": [
"search-recommend-products",
"select-products",
"add-contracts",
"select-contracts",
"basket-summary",
"target-group",
"recruiter-info",
"posting-details",
"posting-organization",
"posting-contact-info",
"posting-working-location",
"posting-urls",
"contract-channel-posting-requirements",
"posting-utm-codes",
"order-review",
"payment-method",
"order-confirmation"
]
}
}
For widgets that have "(Shorter)" in their name or Web Component name ending with "-shorter", you will find an array of arrays that contains strings instead:
{
"orderJourneyStore": {
"stepsEnabled": [
[
"search-recommend-products"
],
[
"select-products"
],
[
"add-contracts"
],
[
"select-contracts"
],
[
"basket-summary"
],
[
"target-group"
],
[ // these steps are now grouped together as a single step
"recruiter-info",
"posting-contact-info"
],
[ // these steps are now grouped together as a single step
"posting-details",
"posting-organization",
"posting-working-location",
],
[
"posting-urls"
],
[
"contract-channel-posting-requirements"
],
[
"posting-utm-codes"
],
[
"order-review"
],
[
"payment-method"
],
[
"order-confirmation"
]
]
}
}
The stepsEnabled array contains the steps enabled for that particular widget (the above example has all the steps available). Let's say you don't want your recruiters to be able to Add Contracts and that feature is only available to your admin users, and you want to hide Add Contracts step. To do that you would need overwrite the array as such:
const nameOfJourneyWidgetYouAreUsing = "he-orderjourney-contract"
window.hapi.ui.service.onIframeLoaded((iframeName) => {
// if you include the same widget more than once in the same page
// iframeName will have suffixes such as "widget-name-0", "widget-name-1"
// so better to do ".includes"
if (iframeName.includes(nameOfJourneyWidgetYouAreUsing)) {
// please note that onIframeLoaded fires each time the widget loads
// like when user navigates away, then comes back to the page
// in those cases, if you are pushing items to arrays, then the array will have duplicate items
// when pushing, make sure that the array does not already include the item you are pushing
const theStepsWeWantEnabled = window
.hapi
.orderJourney
.state
.stepsEnabled
.value
.map(
(keyOrStepGroup) => {
if (Array.isArray(keyOrStepGroup)) { // for widgets that have "(Shorter)" or Web Component name ending with "-shorter"
return keyOrStepGroup.filter(key => {
// you should use the `stepKeys` object from `orderJourney` module's `utils` submodule
// we suggest using it because we may change the step names later and your code will not break
// and it will be backwards compatible
// we suggest that you DO NOT use hardcoded strings of the value as `add-contracts`
return key !== window
.hapi
.orderJourney
.utils
.stepKeys
.addContracts
})
} else { // for widgets that does NOT have "(Shorter)" or Web Component name NOT ending with "-shorter"
if (keyOrStepGroup === window
.hapi
.orderJourney
.utils
.stepKeys
.addContracts
) {
return null
} else {
return keyOrStepGroup
}
}
}
)
// normally, for the longer ones where the stepsEnabled is just an array of strings
// we could have done "stepsEnabled.value.filter"
// however the code works for both longer and shorter versions
// thus we map then filter out empty arrays and null values to keep the child arrays intact
.filter(keyOrStepGroupOrNull =>
keyOrStepGroupOrNull !== null &&
(!Array.isArray(keyOrStepGroupOrNull) || keyOrStepGroupOrNull.length > 0)
)
window
.hapi
.orderJourney
.state
.stepsEnabled = theStepsWeWantEnabled
}
})
When the widget loads, it overrides the state with the object shown in Initial State sub tab on the right sidebar of the Playground, below the Remarks section. This means that if you set state such as stepsEnabled in orderJourney state inside hapi:load:script event, when the widget loads, the state you set will be overridden. Therefore, you need to use window.hapi.ui.service.onIframeLoaded event listener to know when widget has loaded; then set the state for variables like stepsEnabled.
By hiding steps, essentially you are creating your own custom user journey. Under the hood we use the same pattern while creating new user journey widgets. By default, we already provide user journey widgets that fulfill the general use-case. We don't want to add more user journey widgets with custom steps per use-case of the partner as it will lead to ugly naming conventions and tons of user journey widgets such as:
- he-orderjourney-without-add-contracts
- he-orderjourney-product-without-search-and-recommend
So it is up to you to define the steps using the HAPI Elements Javascript API when creating such custom user journeys.
Before doing any step changes, we suggest that you take a look at the diagrams on the Elements page as we may already be providing a user journey widget that will fulfill your requirements. We also suggest that you read some example user stories that will help you decide whether default user journey widgets we provide will meet your needs.