Detecting Contract Channel Posting Requirements Form Load State

With the addition of State Cache submodule via Optimization Changes introduced with version 2.8, there is now a way to detect when the form inside the widget <he-orderjourney-contractchannelpostingrequirements-contract-id></he-orderjourney-contractchannelpostingrequirements-contract-id> loads.

The form renders the UI when the data for the contract channel has been loaded. Previous to version 2.8, the data was loaded inside the widget thus there was no way to access it via window.hapi but now there is a way to detect if the initial data required by the form has loaded.

Usage

const productChannelId = 1234

// version 4.1 added ability to dispose of events
const id = (
    window
        .hapi
        .product
        .state
        .cache
        .productsSupportingContractsMap as HapiStateValueWithListener<ProductProductsSupportingContractsMap>
).onChange((map) => {
    // the key of the Map is stringified json of an array consisting of the arguments passed to
    // type ProductServiceGetProductSupportingContractsFromCacheOrAPIHandler in product service.types.ts
    // the actual type can be found in product types.ts as ProductProductsSupportingContractsPayload
    const mapKey = JSON.stringify([productChannelId])

    const valueForProductChannel = map.get(mapKey)

    if (valueForProductChannel) {
        /*
            valueForProductChannel will output the following object
            {
                isLoading: boolean
                data: ProductSupportingContractsComplete | null
            }
         */

        if (!valueForProductChannel.isLoading && valueForProductChannel.data !== null) {
            // this means the data was loaded and form is rendered
            // you can run business logic that requires this
        }
    }
})

// later dispose of the listener to prevent memory leaks
window.hapi.removeEventById(id)