...

Questions:

•  N/D

Technical Refinement

Description

• rbiintl-whitelabel-cms

  • Task 1—Create Feature Account Updated Agreements page

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

      • Example:

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

        Image Modified

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

• rbi

  intl-whitelabel-cms

  Task 2—Duplicate all changes on

  -

  whitelabel-cms repository

  intl-whitelabel-app

  • Task 3—Create 2—Create a feature flag

    • Example:

      Code Block
      enable-acceptance-agreements-description-from-sanity

  • Task 4—Create 3—Create query on graphql

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

      • Example:

        Code Block
        language graphql
        query featureAccountUpdatedAgreements($featureAccountUpdatedAgreementsId: ID!) { FeatureAccountUpdatedAgreements(id: $featureAccountUpdatedAgreementsId) { updateAgreementText { locale: enRaw }

      confirmButtonText

      • 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 and end file:

      • Example:

        Code Block
        language graphql
        allFeatureAccountUpdatedAgreements(limit: 1) { _id }

    • After that, we will run:

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

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

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

      • Example:

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

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

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

        Code Block
        language typescript
        const { featureAccountUpdatedAgreementsLoading, featureAccountUpdatedAgreements, } = useFeatureAccountUpdatedAgreements();

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

      • Example for agreements:

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

      • Example for marketing email:

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