Page Comparison

...

This will not be hidden behind a LD flag, all markets will have the option in Sanity.

Sanity:

• rbiintl-whitelabel-cms:

  • Create a new item boolean to enable or disable the complementaryCta:

    • Where: upside complementaryCta;

      What markets: All markets excluding US and CA (hidden: () => !isIntl)

      Image Removed

      Code Block
      language typescript
      { title: 'Show Complementary CTA', description: 'By checking this, it show the complementary CTA', name: 'showComplementaryCTA', type: 'boolean', hidden: () => !isIntl, },

  • Change the complementaryCta:

    • from:

      Code Block
      language typescript
      { title: 'Complementary CTA', name: 'complementaryCta', type: 'linkAction', validation: (Rule: RuleType) => Rule.required(), },

    • to:

      Code Block
      language typescript
      { title: 'Complementary CTA', name: 'complementaryCta', type: 'linkAction', validation: (Rule: RuleType) => { if (isIntl) { return Rule.required().custom((showComplementaryCTA, context) => { const showComplementaryText = !!(context.document.complementaryCta?.actionText || {})[ defaultLanguage ]; const showComplementaryAction = !!(context.document.complementaryCta?.actionUrl || {})[ defaultLanguage ]; if (showComplementaryCTA && !(showComplementaryText || showComplementaryAction)) { return 'If you want to enable the complementary CTA button, you must either provide "Action Text" and add a "Action url"'; } return true; }); } return Rule.required(); }, hidden: hideIfNoShowComplementatyCta, },

    • The hidden flag will validate the markets (All markets excluding US and CA)

      Image RemovedImage Removed

      Code Block
      language typescript
      const hideIfNoShowComplementatyCta = ({ document }: any) => document.showComplementaryCTA === false && isIntl;

Componentctg-components-library :

We have a component button named Hero:

...

• Create a new attribute named: showComplementaryCta as optional, typed as boolean on HeroProps interface:

  • path: ctg-components-library/src/components/hero/types.ts

    Code Block
    language typescript
    showComplementaryCta?: boolean;

    

• We will change the complementaryCtaText attribute from required to optional:

  • path: ctg-components-library/src/components/hero/types.ts

    Code Block
    language typescript
    complementaryCtaText?: string;

    

• On Hero component, we will:

  • add a new attribute on the destructuring of Hero attributes from default value true

    Code Block
    language typescript
    showComplementaryCta = true,

• Now, we will do a validation of HeroComplementaryCta button:

  • before:

    Code Block
    language typescript
    <HeroComplementaryCta aria-describedby={ctaDescribedByIds} fullWidth={isMobile} reversed={isButtonReversed} children={complementaryCtaText} onClick={onClickComplementaryCta} href={complementaryCtaHref} as={complementaryCtaAs} />

  • after:

  Code Block
  language typescript
  {showComplementaryCta && complementaryCtaText && ( <HeroComplementaryCta aria-describedby={ctaDescribedByIds} fullWidth={isMobile} reversed={isButtonReversed} children={complementaryCtaText} onClick={onClickComplementaryCta} href={complementaryCtaHref} as={complementaryCtaAs} /> )}

• We will need to do a change on hero.stories.tsx (storybook)

  • path: ctg-components-library/src/components/hero/hero.stories.tsx

• intl-whitelabel-app:

  • We will create an item (showComplementaryCta) created on sanity (rbiintl-whitelabel-cms)

    • path: intl-whitelabel-app/workspaces/frontend/src/queries/sanity/fragments/hero.graphql

      

    • On HeroFragmentFragmentDoc

      

    • Test in another market if it will occur errors.

  • After that, we need to run the command on terminal

    Code Block
    yarn run apollo:generate

  • The command should be success ran and create automatic new items on

    • path: intl-whitelabel-app/workspaces/frontend/src/generated/sanity-graphql.tsx

      • On IHeroFragment

        

      • On IHero

        

  • On intl-whitelabel-app/workspaces/frontend/src/components/features/components/hero/hero-container.tsx, we will:

  • Add the created flag (showComplementaryCta) in this file:

    

    Code Block
    language typescript
    const showComplementaryCta = hero?.showComplementaryCta ?? true;

  • Set the flag on Hero component:

    

    Code Block
    language typescript
    showComplementaryCta={showComplementaryCta}

  • If still, there isn’t the attribute showComplementaryCta on HeroProps interface from Hero component, we should create.

    Code Block
    language typescript
    showComplementaryCta?: boolean;

    • There is a step to create this attribute on other task (Component: Create a new attribute named: showComplementaryCta as optional, typed as boolean on HeroProps interface)

...