Page Comparison

...

rbi-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)

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)

Code Block

language	typescript

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

intl-whitelabel-app:
- We will create an item (showComplementaryCta) created on sanity (rbi-whitelabel-cms)
  - path: intl-whitelabel-app/workspaces/frontend/src/queries/sanity/fragments/hero.graphql
    Image Removed
  - 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
      Image Removed
    - On IHero
      Image Removed
    - On HeroFragmentFragmentDoc
      Image Removed
On intl-whitelabel-app/workspaces/frontend/src/components/features/components/hero/hero-container.tsx, we will:
- Add the created flag (showComplementaryCta) in this file:
  Image Removed
  Code Block
  language typescript
  const showComplementaryCta = hero?.showComplementaryCta ?? true;
- Set the flag on Hero component:
  Image Removed
  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)

Component:

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 && complementaryCtaHref && (
  <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 (rbi-whitelabel-cms)
  - path: intl-whitelabel-app/workspaces/frontend/src/queries/sanity/fragments/hero.graphql
    Image Added
  - On HeroFragmentFragmentDoc
    Image Added
  - 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
      Image Added
    - On IHero
      Image Added
- On intl-whitelabel-app/workspaces/frontend/src/components/features/components/hero/hero-container.tsx, we will:
- Add the created flag (showComplementaryCta) in this file:
  Image Added
  Code Block
  language typescript
  const showComplementaryCta = hero?.showComplementaryCta ?? true;
- Set the flag on Hero component:
  Image Added
  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)

Screenshots

Sanity:

Sanity PLK ES DEV: https://dev-plk-menu.es.rbi.tools/desk/marketingContent;components;homepageComponents;hero;e8fd6bc2-af46-48be-9f16-eebae59f6c7f

...

Versions Compared

Old Version 2

New Version 3

Key

Screenshots