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)

      

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

  • Change the complementaryCta:

    • from:

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

    • to:

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

      

      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

      

    • Test in another market if it will occur errors.

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

    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 HeroFragmentFragmentDoc

        

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

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

    

    const showComplementaryCta = hero?.showComplementaryCta ?? true;

  • Set the flag on Hero component:

    

    showComplementaryCta={showComplementaryCta}

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

    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

    showComplementaryCta?: boolean;

    

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

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

    complementaryCtaText?: string;

    

• On Hero component, we will:

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

    showComplementaryCta = true,

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

  • before:

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

  • after:

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

    

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