Order Review Step Accordions Options

How can we expand/collapse accordions on Order Review step?

You can set the value of accordionsOpen array in orderReviewStepData from Order Journey module.

By default, all the accordions are expanded. The content inside the accordions are:

To selectively decide whether they should be expanded, you need to add the corresponding keys to the array:

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 accordionsThatShouldBeOpen = [
            window.hapi.orderJourney.utils.stepKeys.targetGroup,
            window.hapi.orderJourney.utils.stepKeys.recruiterInfo,
            window.hapi.orderJourney.utils.stepKeys.postingDetails,
        ];
        /*
        // alternatively you can copy the original value
        const accordionsThatShouldBeOpen = window
            .hapi
            .orderJourney
            .state
            .orderReviewStepData
            .value
            .accordionsThatShouldBeOpen
            .filter(
                accordionKey => accordionKey !== window
                    .hapi
                    .orderJourney
                    .utils
                    .stepKeys
                    .basketSummary
            )
        */

        window.hapi.orderJourney.state.orderReviewStepData = window.hapiUtils.mergeDeepOverwriteArrays(
            window.hapi.orderJourney.state.orderReviewStepData.value,
            {
                accordionsOpen: accordionsThatShouldBeOpen
            }
        )

    }
})

info

Contract Channel Posting Requirements accordions will always be open and there is no practical way to collapse them as of yet.

How can we control what accordions are shown on Order Review step?

This is particularly useful when you are prefilling the steps, hiding the step itself from the journey however you still want the user to review the values you prefilled in the order review step. You can set the value of accordionsEnabled array in orderReviewStepData from Order Journey module.

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 originalStepsEnabled = window.hapi.orderJourney.state.stepsEnabled.value

        // your code that hides the step by modifying stepsEnabled will be here
        // so that the step itself is hidden, however the accordion is still visible on order review for user to review

        const accordionsThatShouldBeEnabled = originalStepsEnabled;
        /*
        // or alternatively control manually what is shown
        const accordionsThatShouldBeEnabled = [
            window.hapi.orderJourney.utils.stepKeys.targetGroup,
            window.hapi.orderJourney.utils.stepKeys.recruiterInfo,
            window.hapi.orderJourney.utils.stepKeys.postingDetails,
        ];
        */

        window.hapi.orderJourney.state.orderReviewStepData = window.hapiUtils.mergeDeepOverwriteArrays(
            window.hapi.orderJourney.state.orderReviewStepData.value,
            {
                accordionsEnabled: accordionsThatShouldBeEnabled
            }
        )
    }
})

info

Please note that, whenever stepsEnabled from Order Journey module variable changes, accordionsEnabled value will be overwritten to keep both in sync; thus the code that modifies accordionsEnabled should come after the code that modifies stepsEnabled