Questions:

•  N/D

Technical Refinement

Description

Our application contains the Hero Component, this component could be configured to use by sanity customization.

When the user insert this component on the page, the component has two buttons.

1. Primary

2. Complementary

On this epic, we should create a sanity configuration to show/hide complementary button.

The Complementary CTA is here and currently, it is mandatory. we need to remove that restriction.

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

Sanity:

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

      Image Added

      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 AddedImage Added

      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 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 HeroFragmentFragmentDoc

        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)

Component:

We have a component button named Hero:

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

Inside it, there is a component named HeroComplementaryCta, this component should be optional now, so for it, we will:

• 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;

    Image Added

• 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;

    Image Added

• 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

Screenshots

Sanity:

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

before:

...

After:

Component:

before:

...

After:

...

POC

TODO - POC used to concept proof

Impact Analysis

• Hero component;

• All markets homepage;

• Hero component on sanity;

• We won’t have problems from attributes of the HeroComplementaryCta 'cause :

  • aria-describedby: The same value used on HeroPrimaryCta component, so always there will have value;

  • fullWidth: The same value used on HeroPrimaryCta component, so always there will have value;

  • reversed: The same value used on HeroPrimaryCta component, so always there will have value;

  • children: Already is optional;

  • onClick: Already is optional;;

  • href: Already is optional;

  • as: Already is optional;

    Image Added

Dependencies

N/A

Unit Test

TODO - Which flows or test cases should be tested

Useful Links

• Hero component: https://ctg-components-library.rbictg.com/?path=/docs/hero-hero--hero-story

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