Page Comparison

...

• Task 1—Create a feature flag

  Code Block
  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

      Code Block
      language typescript
      interface IModalAgreement { ... showMarketing: boolean; }

      Code Block
      language typescript
      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:

      Code Block
      language typescript
      <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

    Code Block
    language typescript
    const showMarketingEmail = () => { return <FEATURE_FLAG> && showMarketing; }; {showMarketingEmail() && ( <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:

    Code Block
    language typescript
    const [isCheckedMarketing, setcheckMarting] = useState(false);

  • New handler change:

    Code Block
    language typescript
    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

      Code Block
      language typescript
      export type UpdateAgreementAcceptance = { acceptanceFromSanity: Array<IStaticPageRoute>; promotionalEmails: Boolean; };

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

      • before:

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

      • after:

        Code Block
        language typescript
        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:

        Code Block
        language typescript
        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:

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

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

      • before:

        Code Block
        language typescript
        const onClickContinue = async () => { ... const result = await continueUpdate(); ... };

      • after:

        Code Block
        language typescript
        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:

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

          • after:

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

        • On input:

          • before:

            Code Block
            language typescript
            const input = { requiredAcceptanceAgreementInfo: newUpdateAcceptanceAgreement, }

          • after:

            Code Block
            language typescript
            const input = { requiredAcceptanceAgreementInfo: newUpdateAcceptanceAgreement, promotionalEmails: promotionalEmails ? promotionalEmails : user.details?.promotionalEmails, };

      • Task 4—Add the mparticle to promotionalEmails acceptance

        • We will create constants named:

          • path: intl-whitelabel-app/workspaces/frontend/src/state/mParticle/constants.ts

            Code Block
            language typescript
            BUTTON_CLICK_ACCEPTANCE_AGREEMENTS_CONTINUE = 'Accepted updated agreement', BUTTON_CLICK_ACCEPTANCE_AGREEMENTS_DISAGREE = 'Disagree updated agreement',

        • We will create an interface:

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

          • We will add on mparticle event a new attribute

            Code Block
            language typescript
            interface IModalAgreementEvent { Message?: string; ModalHeader?: string; ModalMessage?: string; ModalShowMarketingEmail?: boolean; ModalMarketingEmailValue?: boolean; }

          • On the same file, we will create a constant with attributes for event:

            Code Block
            language typescript
            useEffectconst eventObj = useMemo(() => { return { logEvent(CustomEventNames.MODAL_APPEARANCE, EventTypes.Other, {Message: modalAppearanceEventMessage, ModalHeader: modalHeader, ...ModalMessage: modalMessage, ModalShowMarketingEmail: <FEATURE_FLAG> && showMarketing, })showMarketingFn(), } as IModalAgreementEvent; }, [logEvent, modalAppearanceEventMessage, modalHeader, modalMessage, showMarketing]);

          • On onClickContinue methodthe same file, we will update the existing event logRBIEvent on onClickDisagree to:

            Code Block
            language typescript
            if (<FEATURE_FLAG> && showMarketing) { logRBIEvent({ name: CustomEventNames.CLICK_EVENT, type: (showMarketingEmail()) { eventObj.ModalMarketingEmailValue = isCheckedMarketing; } logEvent( CustomEventNames.BUTTON_CLICK_ACCEPTANCE_AGREEMENTS_DISAGREE, EventTypes.Navigation, eventObj attributes: { component: ClickEventComponentNames.BUTTON, headerText: 'Accepted receive special offers', text: `${isCheckedMarketing}`, }, }); });

          • Now, we will update the existing event logRBIEvent on onClickContinue to:

            Code Block
            language typescript
            if (showMarketingEmail()) { eventObj.ModalMarketingEmailValue = isCheckedMarketing; } logEvent( CustomEventNames.BUTTON_CLICK_ACCEPTANCE_AGREEMENTS_CONTINUE, EventTypes.Navigation, eventObj );

          • We will update the existing event logEvent on useEffect to:

            Code Block
            language typescript
            useEffect(() => { logEvent(CustomEventNames.MODAL_APPEARANCE, EventTypes.Other, eventObj); }, [eventObj, logEvent]);

Screenshots

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

...