Setting Channel Requirements Defaults

As per client feedback, we have improved the UX while filling in channel specific contract fields so that:

1. When user first creates a contract, they can specify some defaults
2. If user adds the contract with defaults to their basket, during order journey, on the step for contract channel's posting requirements, the defaults user entered while creating the contract will be applied to the form so that it is less time-consuming to order contracts

Prefilling the defaults via SDK

The end user is responsible for setting the defaults, however if you want to set some defaults of your own via the SDK, you can do the following:

const contractIdWeWantToPrefill = "some-id"
const nameOfFacetWeWantToPrefill = "some-facet"
window.hapi.contract.state.contractSelected.onChange(contractSelected => {
    if (contractSelected?.contract_id === contractIdWeWantToPrefill) {
        const contractForm = window.hapi.contract.state.contractForm
        window.hapi.contract.state.contractForm = window.hapiQA.mergeDeepOverwriteArrays(contractForm, {
            posting_requirements_defaults: {
                [nameOfFacetWeWantToPrefill]: "some-value"
            }
        })
    }
})

Determining which facets to prefill

We are currently only showing posting requirements fields that are not lazy-loaded select fields as some of the channels require valid credentials to be able to lazily load the set of options required.

We use the following code to filter out lazy-loaded select fields while user creates/edits a contract:

const filteredRequirements = (
    window.hapi.contract.state.contractSelected.value?.posting_requirements || []
)
    ?.filter((r) =>
        (
            [
                "input",
                "input-html",
                "textarea",
                "select",
                "select-multi",
                "select-tree",
                "input-tag",
                "date",
                "heading",
                "file-upload",
                "unknown",
                // cannot make these work for now
                // "select-tree-async",
                // "select-tree-autocomplete",
                // "select-autocomplete",
                // "select-multi-autocomplete",
            ] as FormFacetsFieldType[]
        ).includes(window.hapi.campaign.utils.getPostingRequirementFormFieldType(r)),
    )

Then you could do:

const ourPrefills: Record<string, string | string[]> = {}
filteredRequirements.forEach(requirement => {
    const formFieldType = window.hapi.campaign.utils.getPostingRequirementFormFieldType(requirement)
    if (
        formFieldType === "input" ||
        formFieldType === "input-html" ||
        formFieldType === "textarea" ||
        formFieldType === "date"
    ) {
        if (requirement.name === "SomeJobBoardSalaryMinFacetName") {
            ourPrefills["SomeJobBoardSalaryMinFacetName"] = "some min salary value"
        }
    } else if (
        formFieldType === "select"
    ) {
        if (requirement.name === "SomeJobBoardIndustriesFacetName") {

            ourPrefills["SomeJobBoardIndustriesFacetName"] = requirement.options[0].key
        }
    } else if (
        formFieldType === "select-multi" ||
        formFieldType === "select-tree"
    ) {
        if (requirement.name === "SomeJobBoardIndustriesFacetName") {

            ourPrefills["SomeJobBoardIndustriesFacetName"] = [
                // for selects, the value should adhere to requirement.options[*].key
                requirement.options[0].key,
                requirement.options[1].key,
            ]
        }
    } else if (formFieldType === "input-tag") {
        if (requirement.name === "SomeJobBoardSocialTagsFacetName") {

            ourPrefills["SomeJobBoardSocialTagsFacetName"] = [
                "some tag",
                "some other tag"
            ]
        }
    }
})

info

Due to the nature of the validations running after prefilling or user entering details in the form fields, it is not possible to validate at the time you prefill the values thus if your prefilled values do not pass validation, the end user will have to correct them.