Setup and Implementation of Campaign

The logic for the step-by-step screens, stepper functionality, storing data in localStorage, creating/updating campaigns, and restructuring API data back into localStorage is all managed within SetupCampaign.js.

All screens are present in the given configuration. Link:

In the configuration:

stepCount represents the step number. Multiple configuration objects can share the same stepCount.
skipAPICall: If this is set to true, the API call for the screen is skipped.
sessionData: Local storage data is passed in custom props, allowing for custom logic to be added to the screens as needed.

export const CampaignConfig = (totalFormData, dataParams) => {
  return [
    {
      form: [
        {
          stepCount: "1",
          key: "1",
          name: "HCM_CAMPAIGN_TYPE",
          body: [
            {
              isMandatory: false,
              key: "projectType",
              type: "component",
              skipAPICall: true,
              component: "CampaignSelection",
              withoutLabel: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
              },
              populators: {
                name: "projectType",
              },
            },
          ],
        },
        ``````

In setup campaign, we have functions to perform specific logic.

loopAndReturn: This function takes the delivery rule conditions coming from API response and restructure the data in local storage format.
cycleDataRemap: This function takes the delivery rules data coming from API response and return array of object of start date and end date based on cycles.
reverseDeliveryRemap: This function take the deliveryConditions from API response and return the structure of delivery data.
groupByTypeRemap: This function create the local structure of boundaries.
updateUrlParams: This function is using to update the url.

New Campaign & Implementing Local Storage

In a new campaign, we update the total form when a user clicks on next after entering the data.
After updating the total form data, we store the data in localStorage.
We also call the API to draft the data in case a user wants to come back and resume the campaign.
Refer to the following link:

Draft Campaign & Data Fetching

When a user clicks on the draft campaign, he/she can fetch campaign data from the response.
After getting a response, one can restructure the data in screen format and store in the local storage.
After updating, the user is redirected to the last screen where additional details are stored in response.
Refer to the following link:

Stepper

Based on screens, a user can filter the configuration and show the the stepper based on the configuration.
Refer to the following link:

PreviousResource Upload Details NextSummary Screen

Was this helpful?

export const CampaignConfig = (totalFormData, dataParams) => { return [ { form: [ { stepCount: "1", key: "1", name: "HCM_CAMPAIGN_TYPE", body: [ { isMandatory: false, key: "projectType", type: "component", skipAPICall: true, component: "CampaignSelection", withoutLabel: true, disable: false, customProps: { module: "HCM", sessionData: totalFormData, }, populators: { name: "projectType", }, }, ], }, ``````

Draft Campaign & Data Fetching

When a user clicks on the draft campaign, he/she can fetch campaign data from the response.

After getting a response, one can restructure the data in screen format and store in the local storage.

After updating, the user is redirected to the last screen where additional details are stored in response.

Refer to the following link: