Questions:

•  N/D

Technical Refinement

Description

• intl-whitelabel-app

  • Task 1—Create feature flag

    • enable-resize-hero-component

  • Task 2—Create a method to resize hero component image

    • path: intl-whitelabel-app/workspaces/frontend/src/components/features/components/hero/hero-container.tsx

    • We will change the attribute objectFitContain on Picture component

    • before:

      const image = sanityImage && (
        <Picture image={sanityImage} alt={imageAlt} objectFitContain />
      );

    • after:

      const image = sanityImage && (
        <Picture image={sanityImage} alt={imageAlt} objectFitContain={false} />
      );

    • On file: intl-whitelabel-app/workspaces/frontend/src/components/picture/index.tsx, we will create a method to resize from hero image

      const resizeByHeight = useCallback(
        (img: ISanityImage | IImageFragment, sizeImage: { width: number; height: number }) => {
          const { dimensions } = parseAssetID(img?.asset?._id);
      
          const renderWidth = sizeImage.width;
          const renderHeight = Math.ceil(sizeImage.width * (dimensions.height / dimensions.width));
          setSize({ width: renderWidth, height: renderHeight });
        },
        []
      );

    • And on component return

    • before:

      return (
          <Measure
            innerRef={visibilityRef as any}
            onResize={contentRect => {
              if (isLoaded) {
                return;
              }
      
              const newSize = {
                width: Math.ceil(delve(contentRect, 'entry.width', 0)),
                height: Math.ceil(delve(contentRect, 'entry.height', 0)),
              };
      
              if (newSize.width !== size.width || newSize.height !== size.height) {
                setSize(newSize);
              }
            }}
          >
            {renderContent}
          </Measure>
        );

    • after:

      return (
        <Measure
          innerRef={visibilityRef as any}
          onResize={contentRect => {
            if (isLoaded) {
              return;
            }
      
            const newSize = {
              width: Math.ceil(delve(contentRect, 'entry.width', 0)),
              height: Math.ceil(delve(contentRect, 'entry.height', 0)),
            };
      
            if (!<FEATURE_FLAG> && (newSize.width !== size.width || newSize.height !== size.height)) {
              setSize(newSize);
            }
      
            if (<FEATURE_FLAG>) {
              resizeByHeight(image, newSize);
            }
          }}
        >
          {renderContent}
        </Measure>
      );

• ctg-components-library

  • Task 3—Remove CSS attributes

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

      • Remove the value height on attribute ImageWrapper;

      • Remove the value height on @media ${mediaQuery.tablet};

      • Remove the value height on @media ${mediaQuery.desktopLarge};

POC

• N/A

Impact Analysis

• Hero component

Dependencies

• N/A

Unit Test

• N/A

Useful Links

• Hero component: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782-69468&t=EFtqIHfC3467c0mU-0