Questions:

•  N/D

Technical Refinement

Description

• intl-whitelabel-cms

  • Task 1—Create Feature Account Updated Agreements page

    • path: rbi-whitelabel-cms/schemas/features/documents/accountUpdateAgreement.tsx

      • Example:

        export default {
          title: 'Feature Account Updated Agreements',
          name: 'featureAccountUpdatedAgreements',
          type: 'document',
        
          /**
           * Prevent creation or deletion of featureAccountUpdatedAgreements documents.
           * See deskStructure.js to find singleton instance.
           * https://www.sanity.io/docs/structure-builder-typical-use-cases#singletons-and-one-of-documents-c22ce054acba
           */
          __experimental_actions: ['update', 'publish', 'create'],
          __experimental_search: [],
          fields: [
            {
              title: 'Update Agreement Text',
              name: 'updateAgreementText',
              type: 'localeBlockContent',
              validation: (Rule: any) => Rule.required(),
            },
            {
              title: 'Marketing Communication Text',
              name: 'marketingCommunicationText',
              type: 'localeBlockContent',
              validation: (Rule: any) => Rule.required(),
            },
          ],
          preview: {
            prepare: () => ({ title: 'Feature Account Updated Agreements' }),
          },
        };

      • On file: rbi-whitelabel-cms/desk-structure/marketing-content.ts, we will add the page created previously:

        

        S.listItem()
        .title('Feature Account Updated Agreements')
        .child(
          S.document()
            .schemaType('featureAccountUpdatedAgreements')
            .documentId('feature-account-updated-agreements'),
        ),

• intl-whitelabel-app

  • Task 2—Create a feature flag

    • Example:

      enable-acceptance-agreements-description-from-sanity

  • Task 3—Create query on graphql

    • path: intl-whitelabel-app/workspaces/frontend/src/queries/sanity/feature-account-updated-agreements.graphql

      • Example:

        query featureAccountUpdatedAgreements($featureAccountUpdatedAgreementsId: ID!) {
          FeatureAccountUpdatedAgreements(id: $featureAccountUpdatedAgreementsId) {
            updateAgreementText {
              locale: enRaw
            }
            marketingCommunicationText {
              locale: enRaw
            }
          }
        }

    • On file: intl-whitelabel-app/workspaces/frontend/src/queries/sanity/all-feature-ids.graphql, we will add the query created on the end file:

      • Example:

        allFeatureAccountUpdatedAgreements(limit: 1) {
          _id
        }

    • After that, we will run:

      yarn run apollo:generate

      • On file: intl-whitelabel-app/workspaces/frontend/src/generated/sanity-graphql.tsx and intl-whitelabel-app/workspaces/frontend/src/state/graphql/sanity-fragments.json will be many changes, but we can to discard all, except of change locally in the interface FeatureAccountUpdatedAgreements:

    • On file: intl-whitelabel-app/workspaces/frontend/src/state/features/index.tsx, we will add the attribute on interface IFeatureIds

      • Example:

        interface IFeatureIds {
          ...
          featureAccountUpdatedAgreementsId?: string;
          // add new feature ids here
        }

    • On the same file, we will add the attribute on return

      • Example:

        return {
          ...
          featureAccountUpdatedAgreementsId: getSingletonId('allFeatureAccountUpdatedAgreements'),
        };

  • Task 4—Create hook to get information from sanity

    • We will create the hook file and a type file

      • path: intl-whitelabel-app/workspaces/frontend/src/hooks/use-feature-account-updated-agreements/use-feature-account-updated-agreements.ts

        • Example:

          export const useFeatureAccountUpdatedAgreements = (): IUseFeatureAccountUpdatedAgreements => {
            const { data: dataAllFeatureIds, loading: featureIdsLoading } = useAllFeatureIdsQuery();
            
            const featureAccountUpdatedAgreementsId =
              dataAllFeatureIds?.allFeatureAccountUpdatedAgreements[0]?._id || '';
            
            const { data, loading } = useFeatureAccountUpdatedAgreementsQuery({
              variables: { featureAccountUpdatedAgreementsId },
              skip: !featureAccountUpdatedAgreementsId,
            });
          
            const featureAccountUpdatedAgreements = data?.FeatureAccountUpdatedAgreements ?? null;
            const featureAccountUpdatedAgreementsLoading = featureIdsLoading || loading;
          
            return { featureAccountUpdatedAgreementsLoading, featureAccountUpdatedAgreements };
          };
          

      • path: intl-whitelabel-app/workspaces/frontend/src/hooks/use-feature-account-updated-agreements/type.ts

        • Example:

          import { IFeatureAccountUpdatedAgreementsQuery } from 'generated/sanity-graphql';
          
          export interface IUseFeatureAccountUpdatedAgreements {
            featureAccountUpdatedAgreementsLoading: boolean;
            featureAccountUpdatedAgreements: IFeatureAccountUpdatedAgreementsQuery['FeatureAccountUpdatedAgreements'];
          }

  • Task 5—Change the labels from lokalise to sanity labels

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

      • Example:

        const {
            featureAccountUpdatedAgreementsLoading,
            featureAccountUpdatedAgreements,
          } = useFeatureAccountUpdatedAgreements();

    • Using the featureAccountUpdatedAgreements constant, we will change the checkbox label

      • Example for agreements:

         <ContentCheckbox>
          <Checkbox
            aria-label={featureAccountRequestInfoPage.updateAgreementText}
            label={featureAccountRequestInfoPage.updateAgreementText}
            name="checkAgree"
            checked={isChecked}
            onChange={handleChange}
          />
        </ContentCheckbox>

      • Example for marketing email:

         <ContentCheckbox>
          <Checkbox
            aria-label={featureAccountRequestInfoPage.marketingCommunicationText}
            label={featureAccountRequestInfoPage.marketingCommunicationText}
            name="checkAgreeMarketing"
            checked={isCheckedMarketing}
            onChange={handleChangeMarketing}
          />
        </ContentCheckbox>

Screenshots

• N/D

 POC

• N/D

Impact Analysis

• Modal Acceptance Agreements

Dependencies

• N/D

Unit Test

• N/D

Useful Links

• N/D