Questions:

•  N/D

Technical Refinement

Description

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

• Task 1—Create a feature flag

  enable-acceptance-agreements-marketing-email

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

  • We will create a new attribute on component ModalAgreement

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

      interface IModalAgreement {
        ...
        showMarketing: boolean;
      }

      const ModalAgreement: React.FC<IModalAgreement> = ({
        ...
        showMarketing,
      })

    • On file intl-whitelabel-app/workspaces/frontend/src/components/modal-agreement/index.tsx, we will send the attribute value:

      <ModalAgreement
        showMarketing={!user?.details?.promotionalEmails}
        ...
      />

• 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

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

  • We will add new status to checked:

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

  • New handler change:

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

• Task 3—Change the update acceptance agreement flow

  • We will create a new type:

    • path: intl-whitelabel-app/workspaces/frontend/src/state/auth/index.tsx

      export type UpdateAgreementAcceptance = {
        acceptanceFromSanity: Array<IStaticPageRoute>;
        promotionalEmails: Boolean;
      };

    • On the same file, we will change the clickContinue method:

      • before:

        const clickContinue = useCallback(async () => {
          const result = await updateRequiredAcceptanceAgreementInfo(acceptanceAgreementFromSanity);
        
          if (result) {
            setShowModal(false);
          }
        }, [acceptanceAgreementFromSanity, updateRequiredAcceptanceAgreementInfo]);

      • after:

        const clickContinue = useCallback(
          async (updateAgreementAcceptance: UpdateAgreementAcceptance) => {
            const result = await updateRequiredAcceptanceAgreementInfo(updateAgreementAcceptance);
        
            if (result) {
              setShowModal(false);
            }
          },
          [updateRequiredAcceptanceAgreementInfo]
        );

      • We will need to remove the State acceptanceAgreementFromSanity because it won’t use anymore:

        const [acceptanceAgreementFromSanity, setAcceptanceAgreementFromSanity] = useState(
          [] as IStaticPageRoute[]
        );

    • On file: intl-whitelabel-app/workspaces/frontend/src/components/modal-agreement/index.tsx, we will change the continueUpdate attribute to receive a parameter:

      interface IModalAgreement {
        continueUpdate: (updateAgreementAcceptance: UpdateAgreementAcceptance) => Promise<any>;
        ...
      }

    • On onClickContinue method, we will send the parameters about continueUpdate method:

      • before:

        const onClickContinue = async () => {
          ...
          const result = await continueUpdate();
          ...
        };

      • after:

        const onClickContinue = async () => {
          ...
          const result = await continueUpdate({
            acceptanceFromSanity: requiredTerms,
            promotionalEmails: isCheckedMarketing,
          });
          ...
        };

    • Now, we will need to add on promotionalEmails attribute to update information:

      • path: intl-whitelabel-app/workspaces/frontend/src/state/auth/hooks/use-current-user.ts

        • We will change the updateRequiredAcceptanceAgreementInfo method:

          • before:

            const updateRequiredAcceptanceAgreementInfo = useCallback(
              async (acceptanceFromSanity: Array<IStaticPageRoute>): Promise<any> => {
                ...
              },
              [formatMessage, logger, updateMeMutation, user]
            );

          • after:

            const updateRequiredAcceptanceAgreementInfo = useCallback(
              async (updateAgreementAcceptance: UpdateAgreementAcceptance): Promise<any> => {
                ...
                const { acceptanceFromSanity, promotionalEmails } = updateAgreementAcceptance;
              },
              [formatMessage, logger, updateMeMutation, user]
            );

        • On input:

          • before:

            const input = {
              requiredAcceptanceAgreementInfo: newUpdateAcceptanceAgreement,
            }

          • after:

            const input = {
              requiredAcceptanceAgreementInfo: newUpdateAcceptanceAgreement,
              promotionalEmails: promotionalEmails
                ? promotionalEmails
                : user.details?.promotionalEmails,
            };

      • Task 4—Add the mparticle to promotionalEmails acceptance

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

          • We will add on mparticle event a new attribute:

            useEffect(() => {
              logEvent(CustomEventNames.MODAL_APPEARANCE, EventTypes.Other, {
                ...
                ModalShowMarketingEmail: <FEATURE_FLAG> && showMarketing,
              });
            }, [logEvent, modalAppearanceEventMessage, modalHeader, modalMessage, showMarketing]);

          • On onClickContinue method:

            if (<FEATURE_FLAG> && showMarketing) {
              logRBIEvent({
                name: CustomEventNames.CLICK_EVENT,
                type: EventTypes.Navigation,
                attributes: {
                  component: ClickEventComponentNames.BUTTON,
                  headerText: 'Accepted receive special offers',
                  text: `${isCheckedMarketing}`,
                },
              });
            }

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