Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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

  • N/D

  • No labels