feat(flags): add feature flag (#1507)

Co-authored-by: seaerchin <[email protected]>
isomerpages · Sep 20, 2023 · 90ae047 · 90ae047
1 parent 3221187
commit 90ae047
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/src/constants/featureFlags.ts b/src/constants/featureFlags.ts
@@ -1,3 +1,4 @@
 export const FEATURE_FLAGS = {
   STYLING_REVAMP: "styles",
+  HOMEPAGE_TEMPLATES: "homepage_new_templates",
 } as const
diff --git a/src/layouts/EditHomepage/HomepagePreview.tsx b/src/layouts/EditHomepage/HomepagePreview.tsx
@@ -105,7 +105,7 @@ export const HomepagePreview = ({
                 dropdownIsActive={dropdownIsActive}
                 toggleDropdown={toggleDropdown}
                 ref={scrollRefs[sectionIndex] as Ref<HTMLDivElement>}
-                variant={section.hero.variant ?? "center"}
+                variant={section.hero.variant}
               />
             </>
           )}

diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
@@ -9,6 +9,7 @@ import {
   HStack,
   Spacer,
 } from "@chakra-ui/react"
+import { useFeatureIsOn } from "@growthbook/growthbook-react"
 import {
   FormErrorMessage,
   FormLabel,
@@ -25,6 +26,7 @@ import { BiInfoCircle } from "react-icons/bi"
 import { FormContext, FormError, FormTitle } from "components/Form"
 import FormFieldMedia from "components/FormFieldMedia"
 
+import { FEATURE_FLAGS } from "constants/featureFlags"
 import { HERO_LAYOUTS } from "constants/homepage"
 
 import { useEditableContext } from "contexts/EditableContext"
@@ -290,29 +292,34 @@ const HeroLayoutForm = ({
   children,
 }: HeroLayoutFormProps): JSX.Element => {
   const { onChange } = useEditableContext()
+  const showNewLayouts = useFeatureIsOn(FEATURE_FLAGS.HOMEPAGE_TEMPLATES)
 
   return (
     <VStack spacing="1rem" align="flex-start" w="100%">
-      <Text textStyle="h5">Customise layout</Text>
-      <FormControl isRequired>
-        <FormLabel textStyle="subhead-1">Layout</FormLabel>
-        <SingleSelect
-          isClearable={false}
-          name="hero layout options"
-          value={variant}
-          items={_.values(HERO_LAYOUTS)}
-          // NOTE: Safe cast - the possible values are given by `HERO_LAYOUTS`
-          onChange={(val) => {
-            onChange({
-              target: {
-                // NOTE: Format is field type, index, section type, field
-                id: "section-0-hero-variant",
-                value: val as HeroBannerLayouts,
-              },
-            })
-          }}
-        />
-      </FormControl>
+      <Text textStyle="h5">{`Customise ${
+        showNewLayouts ? "Layout" : "Hero"
+      }`}</Text>
+      {showNewLayouts && (
+        <FormControl isRequired>
+          <FormLabel textStyle="subhead-1">Layout</FormLabel>
+          <SingleSelect
+            isClearable={false}
+            name="hero layout options"
+            value={variant}
+            items={_.values(HERO_LAYOUTS)}
+            // NOTE: Safe cast - the possible values are given by `HERO_LAYOUTS`
+            onChange={(val) => {
+              onChange({
+                target: {
+                  // NOTE: Format is field type, index, section type, field
+                  id: "section-0-hero-variant",
+                  value: val as HeroBannerLayouts,
+                },
+              })
+            }}
+          />
+        </FormControl>
+      )}
       <VStack spacing="1rem" w="100%">
         {children({ currentSelectedOption: variant })}
       </VStack>
@@ -352,6 +359,7 @@ export const HeroBody = ({
     initialSectionType
   )
   const { onChange } = useEditableContext()
+  const showNewLayouts = useFeatureIsOn(FEATURE_FLAGS.HOMEPAGE_TEMPLATES)
 
   return (
     <>
@@ -381,6 +389,12 @@ export const HeroBody = ({
         <Divider my="0.25rem" />
         <HeroLayoutForm variant={variant}>
           {({ currentSelectedOption }) => {
+            // NOTE: If the flag is turned off, we always show the centered layout
+            // as it is the current existing layout.
+            if (!showNewLayouts) {
+              return <HeroCenteredLayout {...rest} />
+            }
+
             if (currentSelectedOption === HERO_LAYOUTS.CENTERED.value) {
               return <HeroCenteredLayout {...rest} />
             }

diff --git a/src/templates/homepage/HeroSection/HeroSection.tsx b/src/templates/homepage/HeroSection/HeroSection.tsx
@@ -127,7 +127,7 @@ export const TemplateHeroSection = forwardRef<
       hero,
       dropdownIsActive,
       toggleDropdown,
-      variant,
+      variant = "center",
     }: TemplateHeroSectionProps,
     ref
   ) => {