Questions:

•  N/D

Technical Refinement

Description

To add the checkbox market email, we will need to change the ModalAgreement component.

• Task 1—Add the checkbox market email on ModalAgreement component:

  • Create a feature flag

  • We will add the checkbox after the agreements links protected by feature flag:

    • path: intl-whitelabel-app/workspaces/frontend/src/components/modal-agreement/index.tsx

      

      <ContentCheckbox>
        <Checkbox
          aria-label={formatMessage({ id: `acceptEmailsAndSpecialOffers.${brand()}` })}
          label={formatMessage({ id: `acceptEmailsAndSpecialOffers.${brand()}` })}
          name="checkMarketing"
          checked={isCheckedMarting}
          onChange={handleChangeMarketing}
        />
      </ContentCheckbox>

    • We will add new status to checked:

      const [isCheckedMarting, setcheckMarting] = useState(false);

    • New handler change:

      const handleChangeMarketing = () => {
        return isCheckedMarting ? setcheckMarting(false) : setcheckMarting(true);
      };

    • And on method onClickContinue, we will add the mparticle event:

      

      if (isCheckedMarting) {
        logRBIEvent({
          name: CustomEventNames.CLICK_EVENT,
          type: EventTypes.Navigation,
          attributes: {
            component: ClickEventComponentNames.BUTTON,
            text: 'Accepted receive special offers',
          },
        });
      }

Screenshots

https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=758-67566&t=5MEetCF5Hg6m1tlY-0

 POC

• N/D

Impact Analysis

• N/D

Dependencies

• N/D

Unit Test

• N/D

Useful Links

• N/D