From a72825894f2b729faa2267d6d43d3bd8330b2c6d Mon Sep 17 00:00:00 2001
From: seaerchin <44049504+seaerchin@users.noreply.github.com>
Date: Wed, 6 Sep 2023 16:47:44 +0800
Subject: [PATCH 01/12] fix(homepage): placeholder inputs (#1451)

* fix(homepage): fix typing

* refactor(homepagepreview): merge with default values

* refactor(edithomepage): empty sections on create

* refactor(preview): give default values

* fix(validators): fix wrong condition

* refactor(validators): add simple validators that dun do extra work

* refactor(hoomepage): clarify types

* feat(utils): add method to compute error from state

* refactor(homepage): add onblur

* refactor(edithomepage): use new func to disable button

* refactor(utils): rename

* fix(validators): add =

* refactor(edithomepaeg): remove extra prop

* refactor(templates/hompage): updated props

* refactor(utils): remove extra valueof

* refactor(utils): refactor to return error messages

---------

Co-authored-by: seaerchin <chin@ers-macbook-pro.lan>
Co-authored-by: seaerchin <chin@Ers-MacBook-Pro.local>
---
 src/layouts/EditHomepage/EditHomepage.jsx     |  76 ++--
 src/layouts/EditHomepage/HomepagePreview.tsx  |  34 +-
 src/layouts/EditHomepage/constants.ts         |   1 +
 src/layouts/EditHomepage/utils.ts             |  73 +++-
 .../Homepage/HeroDropdownSection.tsx          |   3 +
 .../Homepage/HeroHighlightSection.tsx         |   5 +
 .../components/Homepage/InfobarBody.tsx       |   5 +
 .../components/Homepage/InfopicBody.tsx       |   8 +-
 .../components/Homepage/ResourcesBody.tsx     |   3 +
 src/templates/homepage/HeroSection.jsx        |  79 ++--
 src/templates/homepage/InfobarSection.jsx     |   6 -
 src/templates/homepage/InfopicLeftSection.jsx |  20 +-
 .../homepage/InfopicRightSection.jsx          |  20 +-
 src/types/homepage.ts                         |  32 +-
 src/utils/validators.js                       | 338 ++++++++----------
 15 files changed, 374 insertions(+), 329 deletions(-)

diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
index 27abc341e..e45ace788 100644
--- a/src/layouts/EditHomepage/EditHomepage.jsx
+++ b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -56,7 +56,7 @@ import {
   RESOURCES_SECTION,
 } from "./constants"
 import { HomepagePreview } from "./HomepagePreview"
-import { getErrorValues } from "./utils"
+import { getDefaultValues, getErrorsFromHomepageState } from "./utils"
 
 /* eslint-disable react/no-array-index-key */
 
@@ -78,51 +78,23 @@ const getHasError = (errorArray) =>
     _.some(err, (errorMessage) => errorMessage.length > 0)
   )
 
-const getHasErrors = (errors) => {
-  const hasSectionErrors = _.some(errors.sections, (section) => {
-    // Section is an object, e.g. { hero: {} }
-    // _.keys(section) produces an array with length 1
-    // The 0th element of the array contains the sectionType
-    const sectionType = _.keys(section)[0]
-    return (
-      _.some(
-        section[sectionType],
-        (errorMessage) => errorMessage.length > 0
-      ) === true
-    )
-  })
-
-  const hasHighlightErrors = getHasError(errors.highlights)
-  const hasDropdownElemErrors = getHasError(errors.dropdownElems)
-
-  return hasSectionErrors || hasHighlightErrors || hasDropdownElemErrors
-}
-
 // Constants
 // Section constructors
 // TODO: Export all these as const and write wrapper for error...
 
-const enumSection = (type, isError) => {
+const enumSection = (type) => {
   switch (type) {
     case "resources":
-      return isError
-        ? { resources: getErrorValues(RESOURCES_SECTION) }
-        : { resources: RESOURCES_SECTION }
+      return { resources: getDefaultValues(RESOURCES_SECTION) }
 
     case "infobar":
-      return isError
-        ? { infobar: getErrorValues(INFOBAR_SECTION) }
-        : { infobar: INFOBAR_SECTION }
+      return { infobar: getDefaultValues(INFOBAR_SECTION) }
 
     case "infopic":
-      return isError
-        ? { infopic: getErrorValues(INFOPIC_SECTION) }
-        : { infopic: INFOPIC_SECTION }
+      return { infopic: getDefaultValues(INFOPIC_SECTION) }
 
     default:
-      return isError
-        ? { infobar: getErrorValues(INFOBAR_SECTION) }
-        : { infobar: INFOBAR_SECTION }
+      return { infobar: getDefaultValues(INFOBAR_SECTION) }
   }
 }
 
@@ -188,6 +160,7 @@ const EditHomepage = ({ match }) => {
     setDisplayHighlights(displayHighlights)
   }
   const heroSection = frontMatter.sections.filter((section) => !!section.hero)
+  const errorMessages = getErrorsFromHomepageState(homepageState)
 
   const errorToast = useErrorToast()
 
@@ -238,14 +211,14 @@ const EditHomepage = ({ match }) => {
               )
               // Fill in dropdown elem errors array
               dropdownElemsErrors = _.map(dropdown.options, () =>
-                getErrorValues(DROPDOWN_ELEMENT_SECTION)
+                getDefaultValues(DROPDOWN_ELEMENT_SECTION)
               )
             }
             if (keyHighlights) {
               displayHighlights = _.fill(Array(keyHighlights.length), false)
               // Fill in highlights errors array
               highlightsErrors = _.map(keyHighlights, () =>
-                getErrorValues(KEY_HIGHLIGHT_SECTION)
+                getDefaultValues(KEY_HIGHLIGHT_SECTION)
               )
             }
             // Fill in sectionErrors for hero
@@ -255,16 +228,16 @@ const EditHomepage = ({ match }) => {
           // Check if there is already a resources section
           if (section.resources) {
             sectionsErrors.push({
-              resources: getErrorValues(RESOURCES_SECTION),
+              resources: getDefaultValues(RESOURCES_SECTION),
             })
           }
 
           if (section.infobar) {
-            sectionsErrors.push({ infobar: getErrorValues(INFOBAR_SECTION) })
+            sectionsErrors.push({ infobar: getDefaultValues(INFOBAR_SECTION) })
           }
 
           if (section.infopic) {
-            sectionsErrors.push({ infopic: getErrorValues(INFOPIC_SECTION) })
+            sectionsErrors.push({ infopic: getDefaultValues(INFOPIC_SECTION) })
           }
 
           // Minimize all sections by default
@@ -536,8 +509,8 @@ const EditHomepage = ({ match }) => {
 
       switch (elemType) {
         case "section": {
-          const val = enumSection(value, false)
-          const err = enumSection(value, true)
+          const val = enumSection(value)
+          const err = enumSection(value)
 
           const newScrollRefs = update(scrollRefs, { $push: [createRef()] })
 
@@ -553,8 +526,8 @@ const EditHomepage = ({ match }) => {
           break
         }
         case "dropdownelem": {
-          const val = DROPDOWN_ELEMENT_SECTION
-          const err = getErrorValues(DROPDOWN_ELEMENT_SECTION)
+          const val = getDefaultValues(DROPDOWN_ELEMENT_SECTION)
+          const err = getDefaultValues(DROPDOWN_ELEMENT_SECTION)
 
           const updatedHomepageState = onCreate(
             homepageState,
@@ -569,8 +542,9 @@ const EditHomepage = ({ match }) => {
         case "highlight": {
           // depends on index to generate
           // If key highlights section exists
-          const val = KEY_HIGHLIGHT_SECTION
-          const err = getErrorValues(KEY_HIGHLIGHT_SECTION)
+          const val = getDefaultValues(KEY_HIGHLIGHT_SECTION)
+          const err = getDefaultValues(KEY_HIGHLIGHT_SECTION)
+
           const updatedHomepageState = onCreate(
             homepageState,
             elemType,
@@ -1119,8 +1093,18 @@ const EditHomepage = ({ match }) => {
               />
             </HStack>
             <Footer>
+              {errorMessages.some((message) => message.includes("longer")) && (
+                <Text
+                  mr="0.25rem"
+                  textStyle="body-2"
+                  textColor="base.content.medium"
+                >
+                  You have blocks without content. Please add content to your
+                  empty blocks before saving.
+                </Text>
+              )}
               <LoadingButton
-                isDisabled={getHasErrors(errors)}
+                isDisabled={errorMessages.length > 0}
                 onClick={savePage}
               >
                 Save
diff --git a/src/layouts/EditHomepage/HomepagePreview.tsx b/src/layouts/EditHomepage/HomepagePreview.tsx
index aaf401745..012418a0d 100644
--- a/src/layouts/EditHomepage/HomepagePreview.tsx
+++ b/src/layouts/EditHomepage/HomepagePreview.tsx
@@ -1,5 +1,6 @@
 // NOTE: Below eslint disable is inherited from our legacy code :(
 /* eslint-disable react/no-array-index-key */
+import _ from "lodash"
 import { Ref, useState } from "react"
 import { useParams } from "react-router-dom"
 
@@ -18,6 +19,12 @@ import {
   InfopicFrontmatterSection,
 } from "types/homepage"
 
+import {
+  INFOBAR_SECTION,
+  INFOPIC_SECTION,
+  RESOURCES_SECTION,
+} from "./constants"
+
 const isLeftInfoPic = (
   sectionIndex: number,
   frontMatter: EditorHomepageState["frontMatter"]
@@ -114,9 +121,8 @@ export const HomepagePreview = ({
             <>
               <TemplateResourcesSection
                 key={`section-${sectionIndex}`}
-                title={section.resources.title}
-                subtitle={section.resources.subtitle}
-                button={section.resources.button}
+                {...RESOURCES_SECTION}
+                {..._.pickBy(section.resources)}
                 sectionIndex={sectionIndex}
                 ref={scrollRefs[sectionIndex]}
               />
@@ -127,10 +133,8 @@ export const HomepagePreview = ({
             <>
               <TemplateInfobarSection
                 key={`section-${sectionIndex}`}
-                title={section.infobar.title}
-                subtitle={section.infobar.subtitle}
-                description={section.infobar.description}
-                button={section.infobar.button}
+                {...INFOBAR_SECTION}
+                {..._.pickBy(section.infobar)}
                 sectionIndex={sectionIndex}
                 ref={scrollRefs[sectionIndex]}
               />
@@ -142,24 +146,16 @@ export const HomepagePreview = ({
               {isLeftInfoPic(sectionIndex, frontMatter) ? (
                 <TemplateInfopicLeftSection
                   key={`section-${sectionIndex}`}
-                  title={section.infopic.title}
-                  subtitle={section.infopic.subtitle}
-                  description={section.infopic.description}
-                  imageUrl={section.infopic.image}
-                  imageAlt={section.infopic.alt}
-                  button={section.infopic.button}
+                  {...INFOPIC_SECTION}
+                  {..._.pickBy(section.infopic)}
                   sectionIndex={sectionIndex}
                   ref={scrollRefs[sectionIndex]}
                 />
               ) : (
                 <TemplateInfopicRightSection
                   key={`section-${sectionIndex}`}
-                  title={section.infopic.title}
-                  subtitle={section.infopic.subtitle}
-                  description={section.infopic.description}
-                  imageUrl={section.infopic.image}
-                  imageAlt={section.infopic.alt}
-                  button={section.infopic.button}
+                  {...INFOPIC_SECTION}
+                  {..._.pickBy(section.infopic)}
                   sectionIndex={sectionIndex}
                   ref={scrollRefs[sectionIndex]}
                 />
diff --git a/src/layouts/EditHomepage/constants.ts b/src/layouts/EditHomepage/constants.ts
index 59a7c1e34..dc57e26e4 100644
--- a/src/layouts/EditHomepage/constants.ts
+++ b/src/layouts/EditHomepage/constants.ts
@@ -1,6 +1,7 @@
 export const RESOURCES_SECTION = {
   title: "Resources",
   subtitle: "Add a preview and link to your Resource Room",
+  button: "",
   id: "resources",
 } as const
 
diff --git a/src/layouts/EditHomepage/utils.ts b/src/layouts/EditHomepage/utils.ts
index c033bd462..5e2f43703 100644
--- a/src/layouts/EditHomepage/utils.ts
+++ b/src/layouts/EditHomepage/utils.ts
@@ -1,7 +1,78 @@
 import _ from "lodash"
 
-export const getErrorValues = (
+import {
+  EditorHomepageState,
+  HeroFrontmatterSection,
+  isDropdownSection,
+  isHighlightSection,
+} from "types/homepage"
+import { validateDropdownElem, validateHighlight, validateSection } from "utils"
+
+export const getDefaultValues = (
   obj: Record<string, string>
 ): Record<string, string> => {
   return _.mapValues(obj, () => "")
 }
+
+const validate = <T>(
+  obj: Record<string, T>,
+  predicate: (key: string, val: T) => string
+): string[] => {
+  return _(obj)
+    .entries()
+    .map(([key, value]) => predicate(key, value))
+    .filter()
+    .value()
+}
+
+// NOTE: We might wish to extend this so that we map the values to
+// error msg etc then extract an overall boolean based on that
+// but for now will return a bool
+export const getErrorsFromHomepageState = ({
+  frontMatter,
+}: EditorHomepageState): string[] => {
+  // we validate the frontmatter to check that all the fields are valid
+  const { sections } = frontMatter
+  const [initialSection, ...rest] = sections
+  const heroSection = (initialSection as HeroFrontmatterSection).hero
+
+  let errorMessages: string[] = []
+  if (isHighlightSection(heroSection)) {
+    const highlightErrors = heroSection.key_highlights.reduce((acc, cur) => {
+      const curError = validate(cur, validateHighlight)
+      return [...acc, ...curError]
+    }, errorMessages)
+    errorMessages = [...errorMessages, ...highlightErrors]
+  }
+
+  // NOTE: This is mutually exclusive with the above check
+  // as our hero section only has these 2 options.
+  if (isDropdownSection(heroSection)) {
+    const dropdownErrors = heroSection.dropdown.options.reduce((acc, cur) => {
+      const curError = validate(cur, validateDropdownElem)
+      return [...acc, ...curError]
+    }, errorMessages)
+    errorMessages = [...errorMessages, ...dropdownErrors]
+  }
+
+  // NOTE: Section is an object keyed by the section type
+  // this is, for example, `{ infobar: someValue }`
+  const sectionErrors = _(rest)
+    .map((section) =>
+      // NOTE: Section obj contains the actual values to validate
+      // this is, for example, `title`/`subtitle`/`button` etc
+      _(section)
+        .entries()
+        .map(([sectionType, sectionObj]) =>
+          validate(sectionObj, (key, val) =>
+            validateSection(sectionType, key, val)
+          )
+        )
+        .flatten()
+        .value()
+    )
+    .flatten()
+    .value()
+
+  return [...errorMessages, ...sectionErrors]
+}
diff --git a/src/layouts/components/Homepage/HeroDropdownSection.tsx b/src/layouts/components/Homepage/HeroDropdownSection.tsx
index bbd5a1e2d..96b8058b4 100644
--- a/src/layouts/components/Homepage/HeroDropdownSection.tsx
+++ b/src/layouts/components/Homepage/HeroDropdownSection.tsx
@@ -52,6 +52,7 @@ export const HeroDropdownSection = ({
             <Input
               placeholder="This is a button"
               value={title}
+              onBlur={onChange}
               onChange={onChange}
             />
             <FormErrorMessage>{errors.dropdown}</FormErrorMessage>
@@ -96,6 +97,7 @@ export const HeroDropdownSection = ({
                               placeholder="Dropdown option title"
                               id={`dropdownelem-${dropdownOptionIndex}-title`}
                               value={optionTitle}
+                              onBlur={onChange}
                               onChange={onChange}
                             />
                             <FormErrorMessage>
@@ -113,6 +115,7 @@ export const HeroDropdownSection = ({
                               placeholder="Insert /page-url or https://"
                               id={`dropdownelem-${dropdownOptionIndex}-url`}
                               value={optionUrl}
+                              onBlur={onChange}
                               onChange={onChange}
                             />
                             <FormErrorMessage>
diff --git a/src/layouts/components/Homepage/HeroHighlightSection.tsx b/src/layouts/components/Homepage/HeroHighlightSection.tsx
index a9764b958..aaf027401 100644
--- a/src/layouts/components/Homepage/HeroHighlightSection.tsx
+++ b/src/layouts/components/Homepage/HeroHighlightSection.tsx
@@ -53,6 +53,7 @@ export const HeroHighlightSection = ({
                 id="section-0-hero-button"
                 placeholder="This is a button"
                 value={button}
+                onBlur={onChange}
                 onChange={onChange}
               />
               {/* TODO: Validate button.  
@@ -65,6 +66,7 @@ export const HeroHighlightSection = ({
               <Input
                 placeholder="Insert /page-url or https://"
                 value={url}
+                onBlur={onChange}
                 onChange={onChange}
                 id="section-0-hero-url"
               />
@@ -114,6 +116,7 @@ export const HeroHighlightSection = ({
                               placeholder="Highlight title"
                               id={`highlight-${highlightIndex}-title`}
                               value={highlightTitle}
+                              onBlur={onChange}
                               onChange={onChange}
                             />
                             <FormErrorMessage>
@@ -131,6 +134,7 @@ export const HeroHighlightSection = ({
                               placeholder="Highlight description"
                               id={`highlight-${highlightIndex}-description`}
                               value={highlightDescription}
+                              onBlur={onChange}
                               onChange={onChange}
                             />
                             <FormErrorMessage>
@@ -146,6 +150,7 @@ export const HeroHighlightSection = ({
                               placeholder="Insert /page-url or https://"
                               id={`highlight-${highlightIndex}-url`}
                               value={highlightUrl}
+                              onBlur={onChange}
                               onChange={onChange}
                             />
                             <FormErrorMessage>
diff --git a/src/layouts/components/Homepage/InfobarBody.tsx b/src/layouts/components/Homepage/InfobarBody.tsx
index 9542067e8..1a864daab 100644
--- a/src/layouts/components/Homepage/InfobarBody.tsx
+++ b/src/layouts/components/Homepage/InfobarBody.tsx
@@ -43,6 +43,7 @@ export const InfobarBody = ({
           placeholder="This subtitle appears above the title"
           id={`section-${index}-infobar-subtitle`}
           value={subtitle}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.subtitle}</FormErrorMessage>
@@ -53,6 +54,7 @@ export const InfobarBody = ({
           placeholder="Your infobar title goes here"
           id={`section-${index}-infobar-title`}
           value={title}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.title}</FormErrorMessage>
@@ -63,6 +65,7 @@ export const InfobarBody = ({
           placeholder="This paragraph appears below the title and conveys information"
           id={`section-${index}-infobar-description`}
           value={description}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.description}</FormErrorMessage>
@@ -73,6 +76,7 @@ export const InfobarBody = ({
           placeholder="This is a button"
           id={`section-${index}-infobar-button`}
           value={button}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.button}</FormErrorMessage>
@@ -83,6 +87,7 @@ export const InfobarBody = ({
           placeholder="Insert /page-url or https://"
           id={`section-${index}-infobar-url`}
           value={url}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.url}</FormErrorMessage>
diff --git a/src/layouts/components/Homepage/InfopicBody.tsx b/src/layouts/components/Homepage/InfopicBody.tsx
index 8e19f234b..d9f0ca8d2 100644
--- a/src/layouts/components/Homepage/InfopicBody.tsx
+++ b/src/layouts/components/Homepage/InfopicBody.tsx
@@ -25,7 +25,6 @@ interface InfopicFormFields {
 
 interface InfopicBodyProps extends InfopicFormFields {
   index: number
-  onClick: () => void
   errors: InfopicFormFields & { image: string }
   image: string
 }
@@ -33,7 +32,6 @@ interface InfopicBodyProps extends InfopicFormFields {
 export const InfopicBody = ({
   errors,
   index,
-  onClick,
   title,
   subtitle,
   description,
@@ -53,6 +51,7 @@ export const InfopicBody = ({
           id={`section-${index}-infopic-subtitle`}
           value={subtitle}
           onChange={onChange}
+          onBlur={onChange}
         />
         <FormErrorMessage>{errors.subtitle}</FormErrorMessage>
       </FormControl>
@@ -63,6 +62,7 @@ export const InfopicBody = ({
           id={`section-${index}-infopic-title`}
           value={title}
           onChange={onChange}
+          onBlur={onChange}
         />
         <FormErrorMessage>{errors.title}</FormErrorMessage>
       </FormControl>
@@ -72,6 +72,7 @@ export const InfopicBody = ({
           placeholder="This paragraph appears below the title and conveys information"
           id={`section-${index}-infopic-description`}
           value={description}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.description}</FormErrorMessage>
@@ -82,6 +83,7 @@ export const InfopicBody = ({
           placeholder="This is a button at the bottom of the infopic"
           id={`section-${index}-infopic-button`}
           value={button}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.button}</FormErrorMessage>
@@ -92,6 +94,7 @@ export const InfopicBody = ({
           placeholder="Insert /page-url or https://"
           id={`section-${index}-infopic-url`}
           value={url}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.url}</FormErrorMessage>
@@ -115,6 +118,7 @@ export const InfopicBody = ({
           placeholder="Add a descriptive text about the image"
           id={`section-${index}-infopic-alt`}
           value={alt}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.alt}</FormErrorMessage>
diff --git a/src/layouts/components/Homepage/ResourcesBody.tsx b/src/layouts/components/Homepage/ResourcesBody.tsx
index d00fcdfdf..3a0c1de9a 100644
--- a/src/layouts/components/Homepage/ResourcesBody.tsx
+++ b/src/layouts/components/Homepage/ResourcesBody.tsx
@@ -53,6 +53,7 @@ export const ResourcesBody = ({
           placeholder="This subtitle appears above the title"
           id={`section-${index}-resources-subtitle`}
           value={subtitle}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.subtitle}</FormErrorMessage>
@@ -63,6 +64,7 @@ export const ResourcesBody = ({
           placeholder="Your widget title goes here"
           id={`section-${index}-resources-title`}
           value={title}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.title}</FormErrorMessage>
@@ -73,6 +75,7 @@ export const ResourcesBody = ({
           placeholder="This button appears at the bottom of the widget"
           id={`section-${index}-resources-button`}
           value={button}
+          onBlur={onChange}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.button}</FormErrorMessage>
diff --git a/src/templates/homepage/HeroSection.jsx b/src/templates/homepage/HeroSection.jsx
index ddb5e2c8e..a44a98d52 100644
--- a/src/templates/homepage/HeroSection.jsx
+++ b/src/templates/homepage/HeroSection.jsx
@@ -8,6 +8,11 @@ import { forwardRef } from "react"
 
 import { useFetchPreviewMedia } from "hooks/useFetchPreviewMedia"
 
+import {
+  DROPDOWN_ELEMENT_SECTION,
+  KEY_HIGHLIGHT_SECTION,
+} from "layouts/EditHomepage/constants"
+
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
@@ -36,7 +41,7 @@ const HeroButton = ({ button }) => (
 
 const HeroDropdownElem = ({ title }) => (
   <div className={editorStyles["bp-dropdown-item"]}>
-    <h5>{title}</h5>
+    <h5>{title || DROPDOWN_ELEMENT_SECTION.title}</h5>
   </div>
 )
 
@@ -94,55 +99,41 @@ const HeroDropdown = ({ title, options, isActive, toggleDropdown }) => (
           "is-centered",
         ])}
       >
-        {options
-          ? options.map((option, index) =>
-              option.title ? (
-                <HeroDropdownElem
-                  key={`dropdown-${index}`}
-                  title={option.title}
-                />
-              ) : null
-            )
-          : null}
+        {options &&
+          options.map((option, index) => (
+            <HeroDropdownElem key={`dropdown-${index}`} title={option.title} />
+          ))}
       </div>
     </div>
   </div>
 )
 
 const KeyHighlightElem = ({ title, description }) => (
-  <>
-    {title || description ? (
-      <div className={getClassNames(editorStyles, ["col"])}>
-        <div className={editorStyles["is-highlight"]}>
-          {/* Title */}
-          {title ? (
-            <p
-              className={getClassNames(editorStyles, [
-                "has-text-weight-semibold",
-                "has-text-white",
-                "key-highlight-title",
-                "is-uppercase",
-                "padding--top--xs",
-              ])}
-            >
-              {title}
-            </p>
-          ) : null}
-          {/* Description */}
-          {description ? (
-            <p
-              className={getClassNames(editorStyles, [
-                "has-text-white-trans",
-                "padding--bottom--sm",
-              ])}
-            >
-              {description}
-            </p>
-          ) : null}
-        </div>
-      </div>
-    ) : null}
-  </>
+  <div className={getClassNames(editorStyles, ["col"])}>
+    <div className={editorStyles["is-highlight"]}>
+      {/* Title */}
+      <p
+        className={getClassNames(editorStyles, [
+          "has-text-weight-semibold",
+          "has-text-white",
+          "key-highlight-title",
+          "is-uppercase",
+          "padding--top--xs",
+        ])}
+      >
+        {title || KEY_HIGHLIGHT_SECTION.title}
+      </p>
+      {/* Description */}
+      <p
+        className={getClassNames(editorStyles, [
+          "has-text-white-trans",
+          "padding--bottom--sm",
+        ])}
+      >
+        {description || KEY_HIGHLIGHT_SECTION.description}
+      </p>
+    </div>
+  </div>
 )
 
 const KeyHighlights = ({ highlights }) => (
diff --git a/src/templates/homepage/InfobarSection.jsx b/src/templates/homepage/InfobarSection.jsx
index 9a582b292..a3b4d8f9f 100644
--- a/src/templates/homepage/InfobarSection.jsx
+++ b/src/templates/homepage/InfobarSection.jsx
@@ -104,10 +104,4 @@ TemplateInfobarSection.propTypes = {
   sectionIndex: PropTypes.number.isRequired,
 }
 
-TemplateInfobarSection.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
-  description: undefined,
-}
-
 export default forwardRef(TemplateInfobarSection)
diff --git a/src/templates/homepage/InfopicLeftSection.jsx b/src/templates/homepage/InfopicLeftSection.jsx
index 7d1eb77ca..a85593cd1 100644
--- a/src/templates/homepage/InfopicLeftSection.jsx
+++ b/src/templates/homepage/InfopicLeftSection.jsx
@@ -12,7 +12,15 @@ import { getClassNames } from "templates/utils/stylingUtils"
  */
 
 const TemplateInfopicLeftSection = (
-  { title, subtitle, description, button, sectionIndex, imageUrl, imageAlt },
+  {
+    title,
+    subtitle,
+    description,
+    button,
+    sectionIndex,
+    image: imageUrl,
+    alt: imageAlt,
+  },
   ref
 ) => {
   const addDefaultSrc = (e) => {
@@ -243,13 +251,7 @@ TemplateInfopicLeftSection.propTypes = {
   subtitle: PropTypes.string,
   description: PropTypes.string,
   button: PropTypes.string,
-  imageUrl: PropTypes.string,
-  imageAlt: PropTypes.string,
+  image: PropTypes.string,
+  alt: PropTypes.string,
   sectionIndex: PropTypes.number.isRequired,
 }
-
-TemplateInfopicLeftSection.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
-  description: undefined,
-}
diff --git a/src/templates/homepage/InfopicRightSection.jsx b/src/templates/homepage/InfopicRightSection.jsx
index b41dec6a0..ffa2cf54c 100644
--- a/src/templates/homepage/InfopicRightSection.jsx
+++ b/src/templates/homepage/InfopicRightSection.jsx
@@ -12,7 +12,15 @@ import { getClassNames } from "templates/utils/stylingUtils"
  */
 
 const TemplateInfopicRightSection = (
-  { title, subtitle, description, button, sectionIndex, imageUrl, imageAlt },
+  {
+    title,
+    subtitle,
+    description,
+    button,
+    sectionIndex,
+    image: imageUrl,
+    alt: imageAlt,
+  },
   ref
 ) => {
   const addDefaultSrc = (e) => {
@@ -243,13 +251,7 @@ TemplateInfopicRightSection.propTypes = {
   subtitle: PropTypes.string,
   description: PropTypes.string,
   button: PropTypes.string,
-  imageUrl: PropTypes.string,
-  imageAlt: PropTypes.string,
+  image: PropTypes.string,
+  alt: PropTypes.string,
   sectionIndex: PropTypes.number.isRequired,
 }
-
-TemplateInfopicRightSection.defaultProps = {
-  title: undefined,
-  subtitle: undefined,
-  description: undefined,
-}
diff --git a/src/types/homepage.ts b/src/types/homepage.ts
index 77c79f93a..d71d4e890 100644
--- a/src/types/homepage.ts
+++ b/src/types/homepage.ts
@@ -1,4 +1,4 @@
-import type { IterableElement } from "type-fest"
+import type { IterableElement, SetOptional } from "type-fest"
 
 export type DropdownOption = {
   title: string
@@ -49,7 +49,7 @@ export interface InfopicSection {
   description?: string
   button?: string
   url?: string
-  images?: string
+  image?: string
   alt?: string
 }
 
@@ -91,20 +91,14 @@ export type HomepageEditorHeroSection =
   | EditorHeroHighlightsSection
 
 export type HeroFrontmatterSection = { hero: HomepageEditorHeroSection }
-// TODO: add properties here instead of typing as `Record<string, unknown>`
-// we can find them in `HomepagePreview`
-export type ResourcesFrontmatterSection = { resources: Record<string, unknown> }
+export type ResourcesFrontmatterSection = { resources: ResourcesSection }
 
-// TODO: add properties here instead of typing as `Record<string, unknown>`
-// we can find them in `HomepagePreview`
 export type InfopicFrontmatterSection = {
-  infopic: Record<string, unknown>
+  infopic: InfopicSection
 }
 
-// TODO: add properties here instead of typing as `Record<string, unknown>`
-// we can find them in `HomepagePreview`
 export type InfobarFrontmatterSection = {
-  infobar: Record<string, unknown>
+  infobar: InfobarSection
 }
 
 export type EditorHomepageFrontmatterSection =
@@ -148,10 +142,22 @@ export interface EditorHomepageState {
 
 export interface EditorHeroDropdownSection {
   dropdown: {
-    options: Partial<DropdownOption>[]
+    options: SetOptional<DropdownOption, "url">[]
   }
 }
 
 export interface EditorHeroHighlightsSection {
-  key_highlights: []
+  key_highlights: SetOptional<HighlightOption, "url">[]
+}
+
+export const isHighlightSection = (
+  heroSection: HomepageEditorHeroSection
+): heroSection is EditorHeroHighlightsSection => {
+  return !!(heroSection as EditorHeroHighlightsSection).key_highlights
+}
+
+export const isDropdownSection = (
+  heroSection: HomepageEditorHeroSection
+): heroSection is EditorHeroDropdownSection => {
+  return !!(heroSection as EditorHeroDropdownSection).dropdown
 }
diff --git a/src/utils/validators.js b/src/utils/validators.js
index 127334f9d..873aa71e1 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -171,329 +171,304 @@ export const MEDIA_SETTINGS_TITLE_MIN_LENGTH = 6
 export const MEDIA_SETTINGS_TITLE_MAX_LENGTH = 100
 export const MEDIA_FILE_MAX_SIZE = 5242880 // 5MB -> 5242880B
 
+const validateAndSetSectionError = (validator) => (
+  sectionError,
+  sectionType,
+  field,
+  value
+) => {
+  const newSectionError = sectionError
+  const errorMessage = validator(field, value)
+  newSectionError[sectionType][field] = errorMessage
+  return newSectionError
+}
+
 // Homepage Editor
 // ==========
-// Returns new errors.highlights[index] object
-const validateHighlights = (highlightError, field, value) => {
-  const newHighlightError = highlightError
-  let errorMessage = ""
+const validateHighlight = (field, value) => {
   switch (field) {
     case "title": {
       // Title is too short
-      if (value.length < HIGHLIGHTS_TITLE_MIN_LENGTH) {
-        errorMessage = `The title should be longer than ${HIGHLIGHTS_TITLE_MIN_LENGTH} characters.`
+      if (value.length <= HIGHLIGHTS_TITLE_MIN_LENGTH) {
+        return `The title should be longer than ${HIGHLIGHTS_TITLE_MIN_LENGTH} characters.`
       }
       // Title is too long
-      if (value.length > HIGHLIGHTS_TITLE_MAX_LENGTH) {
-        errorMessage = `The title should be shorter than ${HIGHLIGHTS_TITLE_MAX_LENGTH} characters.`
+      if (value.length >= HIGHLIGHTS_TITLE_MAX_LENGTH) {
+        return `The title should be shorter than ${HIGHLIGHTS_TITLE_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "description": {
       // Description is too short
-      if (value.length < HIGHLIGHTS_DESCRIPTION_MIN_LENGTH) {
-        errorMessage = `The description should be longer than ${HIGHLIGHTS_DESCRIPTION_MIN_LENGTH} characters.`
+      if (value.length <= HIGHLIGHTS_DESCRIPTION_MIN_LENGTH) {
+        return `The description should be longer than ${HIGHLIGHTS_DESCRIPTION_MIN_LENGTH} characters.`
       }
       // Description is too long
-      if (value.length > HIGHLIGHTS_DESCRIPTION_MAX_LENGTH) {
-        errorMessage = `The description should be shorter than ${HIGHLIGHTS_DESCRIPTION_MAX_LENGTH} characters.`
+      if (value.length >= HIGHLIGHTS_DESCRIPTION_MAX_LENGTH) {
+        return `The description should be shorter than ${HIGHLIGHTS_DESCRIPTION_MAX_LENGTH} characters.`
       }
-      break
-    }
-    case "url": {
-      // Permalink fails regex
-      // if (!permalinkRegexTest.test(value)) {
-      //   errorMessage = `The url should start and end with slashes and contain
-      //     lowercase words separated by hyphens only.
-      //     `;
-      // }
-      // TO-DO: allow external links
-      // TO-DO: Validate that link actually links to a page?
-      break
+      return ""
     }
     default:
-      break
+      return ""
   }
+}
+
+// Returns new errors.highlights[index] object
+const validateHighlights = (highlightError, field, value) => {
+  const newHighlightError = highlightError
+  const errorMessage = validateHighlight(field, value)
   newHighlightError[field] = errorMessage
   return newHighlightError
 }
 
-// Returns errors.dropdownElems[dropdownsIndex] object
-const validateDropdownElems = (dropdownElemError, field, value) => {
-  const newDropdownElemError = dropdownElemError
-  let errorMessage = ""
+const validateDropdownElem = (field, value) => {
   switch (field) {
     case "title": {
       // Title is too short
-      if (value.length < DROPDOWNELEM_TITLE_MIN_LENGTH) {
-        errorMessage = `The title should be longer than ${DROPDOWNELEM_TITLE_MIN_LENGTH} characters.`
+      if (value.length <= DROPDOWNELEM_TITLE_MIN_LENGTH) {
+        return `The title should be longer than ${DROPDOWNELEM_TITLE_MIN_LENGTH} characters.`
       }
       // Title is too long
-      if (value.length > DROPDOWNELEM_TITLE_MAX_LENGTH) {
-        errorMessage = `The title should be shorter than ${DROPDOWNELEM_TITLE_MAX_LENGTH} characters.`
+      if (value.length >= DROPDOWNELEM_TITLE_MAX_LENGTH) {
+        return `The title should be shorter than ${DROPDOWNELEM_TITLE_MAX_LENGTH} characters.`
       }
-      break
-    }
-    case "url": {
-      // Permalink fails regex
-      // if (!permalinkRegexTest.test(value)) {
-      //   errorMessage = `The url should start and end with slashes and contain
-      //     lowercase words separated by hyphens only.
-      //     `;
-      // }
-      // TO-DO: allow external links
-      // TO-DO: Validate that link actually links to a page?
-      break
+      return ""
     }
     default:
-      break
+      return ""
   }
+}
+// Returns errors.dropdownElems[dropdownsIndex] object
+const validateDropdownElems = (dropdownElemError, field, value) => {
+  const newDropdownElemError = dropdownElemError
+  const errorMessage = validateDropdownElem(field, value)
   newDropdownElemError[field] = errorMessage
   return newDropdownElemError
 }
 
-const validateHeroSection = (sectionError, sectionType, field, value) => {
-  const newSectionError = sectionError
-  let errorMessage = ""
+const validateHeroSectionFields = (field, value) => {
   switch (field) {
     case "title": {
       // Title is too short
-      if (value.length < HERO_TITLE_MIN_LENGTH) {
-        errorMessage = `The title should be longer than ${HERO_TITLE_MIN_LENGTH} characters.`
+      if (value.length <= HERO_TITLE_MIN_LENGTH) {
+        return `The title should be longer than ${HERO_TITLE_MIN_LENGTH} characters.`
       }
       // Title is too long
-      if (value.length > HERO_TITLE_MAX_LENGTH) {
-        errorMessage = `The title should be shorter than ${HERO_TITLE_MAX_LENGTH} characters.`
+      if (value.length >= HERO_TITLE_MAX_LENGTH) {
+        return `The title should be shorter than ${HERO_TITLE_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "subtitle": {
       // Subtitle is too short
-      if (value.length < HERO_SUBTITLE_MIN_LENGTH) {
-        errorMessage = `The subtitle should be longer than ${HERO_SUBTITLE_MIN_LENGTH} characters.`
+      if (value.length <= HERO_SUBTITLE_MIN_LENGTH) {
+        return `The subtitle should be longer than ${HERO_SUBTITLE_MIN_LENGTH} characters.`
       }
       // Subtitle is too long
-      if (value.length > HERO_SUBTITLE_MAX_LENGTH) {
-        errorMessage = `The subtitle should be shorter than ${HERO_SUBTITLE_MAX_LENGTH} characters.`
+      if (value.length >= HERO_SUBTITLE_MAX_LENGTH) {
+        return `The subtitle should be shorter than ${HERO_SUBTITLE_MAX_LENGTH} characters.`
       }
-      break
-    }
-    case "background": {
-      errorMessage = ""
-      break
-    }
-    case "button": {
-      // // Button text is too short
-      // if (value.length < HERO_BUTTON_TEXT_MIN_LENGTH) {
-      //   errorMessage = `The button text should be longer than ${HERO_BUTTON_TEXT_MIN_LENGTH} characters.`;
-      // }
-      // // Button text is too long
-      // if (value.length > HERO_BUTTON_TEXT_MAX_LENGTH) {
-      //   errorMessage = `The button text should be shorter than ${HERO_BUTTON_TEXT_MAX_LENGTH} characters.`;
-      // }
-      break
+      return ""
     }
     case "dropdown": {
       // Dropdown text is too short
-      if (value.length < HERO_DROPDOWN_MIN_LENGTH) {
-        errorMessage = `The dropdown text should be longer than ${HERO_DROPDOWN_MIN_LENGTH} characters.`
+      if (value.length <= HERO_DROPDOWN_MIN_LENGTH) {
+        return `The dropdown text should be longer than ${HERO_DROPDOWN_MIN_LENGTH} characters.`
       }
       // Dropdown text is too long
-      if (value.length > HERO_DROPDOWN_MAX_LENGTH) {
-        errorMessage = `The dropdown text should be shorter than ${HERO_DROPDOWN_MAX_LENGTH} characters.`
+      if (value.length >= HERO_DROPDOWN_MAX_LENGTH) {
+        return `The dropdown text should be shorter than ${HERO_DROPDOWN_MAX_LENGTH} characters.`
       }
-      break
-    }
-    case "url": {
-      // if (!permalinkRegexTest.test(value)) {
-      //   errorMessage = `The url should start and end with slashes and contain
-      //     lowercase words separated by hyphens only.
-      //     `;
-      // }
-      // TO-DO: Allow external URLs
-      break
+      return ""
     }
     default:
-      break
+      return ""
   }
-  newSectionError[sectionType][field] = errorMessage
-  return newSectionError
 }
+const validateHeroSection = validateAndSetSectionError(
+  validateHeroSectionFields
+)
 
-const validateResourcesSection = (sectionError, sectionType, field, value) => {
-  const newSectionError = sectionError
-  let errorMessage = ""
+const validateResourcesSectionFields = (field, value) => {
   switch (field) {
     case "title": {
       // Title is too short
-      if (value.length < RESOURCES_TITLE_MIN_LENGTH) {
-        errorMessage = `Title should be longer than ${RESOURCES_TITLE_MIN_LENGTH} characters.`
+      if (value.length <= RESOURCES_TITLE_MIN_LENGTH) {
+        return `Title should be longer than ${RESOURCES_TITLE_MIN_LENGTH} characters.`
       }
       // Title is too long
-      if (value.length > RESOURCES_TITLE_MAX_LENGTH) {
-        errorMessage = `Title should be shorter than ${RESOURCES_TITLE_MAX_LENGTH} characters.`
+      if (value.length >= RESOURCES_TITLE_MAX_LENGTH) {
+        return `Title should be shorter than ${RESOURCES_TITLE_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "subtitle": {
       // Subtitle is too short
-      if (value.length < RESOURCES_SUBTITLE_MIN_LENGTH) {
-        errorMessage = `Subtitle should be longer than ${RESOURCES_SUBTITLE_MIN_LENGTH} characters.`
+      if (value.length <= RESOURCES_SUBTITLE_MIN_LENGTH) {
+        return `Subtitle should be longer than ${RESOURCES_SUBTITLE_MIN_LENGTH} characters.`
       }
       // Subtitle is too long
-      if (value.length > RESOURCES_SUBTITLE_MAX_LENGTH) {
-        errorMessage = `Subtitle should be shorter than ${RESOURCES_SUBTITLE_MAX_LENGTH} characters.`
+      if (value.length >= RESOURCES_SUBTITLE_MAX_LENGTH) {
+        return `Subtitle should be shorter than ${RESOURCES_SUBTITLE_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "button": {
       // Button text is too short
-      if (value.length < RESOURCES_BUTTON_TEXT_MIN_LENGTH) {
-        errorMessage = `Button text should be longer than ${RESOURCES_BUTTON_TEXT_MIN_LENGTH} characters.`
+      if (value.length <= RESOURCES_BUTTON_TEXT_MIN_LENGTH) {
+        return `Button text should be longer than ${RESOURCES_BUTTON_TEXT_MIN_LENGTH} characters.`
       }
       // Button text is too long
-      if (value.length > RESOURCES_BUTTON_TEXT_MAX_LENGTH) {
-        errorMessage = `Button text should be shorter than ${RESOURCES_BUTTON_TEXT_MAX_LENGTH} characters.`
+      if (value.length >= RESOURCES_BUTTON_TEXT_MAX_LENGTH) {
+        return `Button text should be shorter than ${RESOURCES_BUTTON_TEXT_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     default:
-      break
+      return ""
   }
-  newSectionError[sectionType][field] = errorMessage
-  return newSectionError
 }
-
-const validateInfobarSection = (sectionError, sectionType, field, value) => {
-  const newSectionError = sectionError
-  let errorMessage = ""
+const validateResourcesSection = validateAndSetSectionError(
+  validateResourcesSectionFields
+)
+const validateInfobarSectionFields = (field, value) => {
   switch (field) {
     case "title": {
       // Title is too short
-      if (value.length < INFOBAR_TITLE_MIN_LENGTH) {
-        errorMessage = `Title should be longer than ${INFOBAR_TITLE_MIN_LENGTH} characters.`
+      if (value.length <= INFOBAR_TITLE_MIN_LENGTH) {
+        return `Title should be longer than ${INFOBAR_TITLE_MIN_LENGTH} characters.`
       }
       // Title is too long
-      if (value.length > INFOBAR_TITLE_MAX_LENGTH) {
-        errorMessage = `Title should be shorter than ${INFOBAR_TITLE_MAX_LENGTH} characters.`
+      if (value.length >= INFOBAR_TITLE_MAX_LENGTH) {
+        return `Title should be shorter than ${INFOBAR_TITLE_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "subtitle": {
       // Subtitle is too short
-      if (value.length < INFOBAR_SUBTITLE_MIN_LENGTH) {
-        errorMessage = `Subtitle should be longer than ${INFOBAR_SUBTITLE_MIN_LENGTH} characters.`
+      if (value.length <= INFOBAR_SUBTITLE_MIN_LENGTH) {
+        return `Subtitle should be longer than ${INFOBAR_SUBTITLE_MIN_LENGTH} characters.`
       }
       // Subtitle is too long
-      if (value.length > INFOBAR_SUBTITLE_MAX_LENGTH) {
-        errorMessage = `Subtitle should be shorter than ${INFOBAR_SUBTITLE_MAX_LENGTH} characters.`
+      if (value.length >= INFOBAR_SUBTITLE_MAX_LENGTH) {
+        return `Subtitle should be shorter than ${INFOBAR_SUBTITLE_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "description": {
       // Description is too short
-      if (value.length < INFOBAR_DESCRIPTION_MIN_LENGTH) {
-        errorMessage = `Ddescription should be longer than ${INFOBAR_DESCRIPTION_MIN_LENGTH} characters.`
+      if (value.length <= INFOBAR_DESCRIPTION_MIN_LENGTH) {
+        return `Ddescription should be longer than ${INFOBAR_DESCRIPTION_MIN_LENGTH} characters.`
       }
       // Description is too long
-      if (getLengthWithoutTags(value) > INFOBAR_DESCRIPTION_MAX_LENGTH) {
-        errorMessage = `Description should be shorter than ${INFOBAR_DESCRIPTION_MAX_LENGTH} characters.`
+      if (getLengthWithoutTags(value) >= INFOBAR_DESCRIPTION_MAX_LENGTH) {
+        return `Description should be shorter than ${INFOBAR_DESCRIPTION_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "button": {
       // Button text is too short
-      if (value.length < INFOBAR_BUTTON_TEXT_MIN_LENGTH) {
-        errorMessage = `Button text should be longer than ${INFOBAR_BUTTON_TEXT_MIN_LENGTH} characters.`
+      if (value.length <= INFOBAR_BUTTON_TEXT_MIN_LENGTH) {
+        return `Button text should be longer than ${INFOBAR_BUTTON_TEXT_MIN_LENGTH} characters.`
       }
       // Button text is too long
-      if (value.length > INFOBAR_BUTTON_TEXT_MAX_LENGTH) {
-        errorMessage = `Button text should be shorter than ${INFOBAR_BUTTON_TEXT_MAX_LENGTH} characters.`
+      if (value.length >= INFOBAR_BUTTON_TEXT_MAX_LENGTH) {
+        return `Button text should be shorter than ${INFOBAR_BUTTON_TEXT_MAX_LENGTH} characters.`
       }
-      break
-    }
-    case "url": {
-      // if (!permalinkRegexTest.test(value)) {
-      //   errorMessage = `The url should start and end with slashes and contain
-      //     lowercase words separated by hyphens only.
-      //     `;
-      // }
-      // TO-DO: Allow external URLs
-      break
+      return ""
     }
     default:
-      break
+      return ""
   }
-  newSectionError[sectionType][field] = errorMessage
-  return newSectionError
 }
+const validateInfobarSection = validateAndSetSectionError(
+  validateInfobarSectionFields
+)
 
-const validateInfopicSection = (sectionError, sectionType, field, value) => {
-  const newSectionError = sectionError
-  let errorMessage = ""
+const validateInfopicSectionFields = (field, value) => {
   switch (field) {
     case "title": {
       // Title is too short
-      if (value.length < INFOPIC_TITLE_MIN_LENGTH) {
-        errorMessage = `Title should be longer than ${INFOPIC_TITLE_MIN_LENGTH} characters.`
+      if (value.length <= INFOPIC_TITLE_MIN_LENGTH) {
+        return `Title should be longer than ${INFOPIC_TITLE_MIN_LENGTH} characters.`
       }
       // Title is too long
-      if (value.length > INFOPIC_TITLE_MAX_LENGTH) {
-        errorMessage = `Title should be shorter than ${INFOPIC_TITLE_MAX_LENGTH} characters.`
+      if (value.length >= INFOPIC_TITLE_MAX_LENGTH) {
+        return `Title should be shorter than ${INFOPIC_TITLE_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "subtitle": {
       // Subtitle is too short
-      if (value.length < INFOPIC_SUBTITLE_MIN_LENGTH) {
-        errorMessage = `Subtitle should be longer than ${INFOPIC_SUBTITLE_MIN_LENGTH} characters.`
+      if (value.length <= INFOPIC_SUBTITLE_MIN_LENGTH) {
+        return `Subtitle should be longer than ${INFOPIC_SUBTITLE_MIN_LENGTH} characters.`
       }
       // Subtitle is too long
-      if (value.length > INFOPIC_SUBTITLE_MAX_LENGTH) {
-        errorMessage = `Subtitle should be shorter than ${INFOPIC_SUBTITLE_MAX_LENGTH} characters.`
+      if (value.length >= INFOPIC_SUBTITLE_MAX_LENGTH) {
+        return `Subtitle should be shorter than ${INFOPIC_SUBTITLE_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "description": {
       // Description is too short
-      if (value.length < INFOPIC_DESCRIPTION_MIN_LENGTH) {
-        errorMessage = `Description should be longer than ${INFOPIC_DESCRIPTION_MIN_LENGTH} characters.`
+      if (value.length <= INFOPIC_DESCRIPTION_MIN_LENGTH) {
+        return `Description should be longer than ${INFOPIC_DESCRIPTION_MIN_LENGTH} characters.`
       }
       // Description is too long
-      if (value.length > INFOPIC_DESCRIPTION_MAX_LENGTH) {
-        errorMessage = `Description should be shorter than ${INFOPIC_DESCRIPTION_MAX_LENGTH} characters.`
+      if (value.length >= INFOPIC_DESCRIPTION_MAX_LENGTH) {
+        return `Description should be shorter than ${INFOPIC_DESCRIPTION_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "button": {
       // Button text is too short
-      if (value.length < INFOPIC_BUTTON_TEXT_MIN_LENGTH) {
-        errorMessage = `Button text should be longer than ${INFOPIC_BUTTON_TEXT_MIN_LENGTH} characters.`
+      if (value.length <= INFOPIC_BUTTON_TEXT_MIN_LENGTH) {
+        return `Button text should be longer than ${INFOPIC_BUTTON_TEXT_MIN_LENGTH} characters.`
       }
       // Button text is too long
-      if (value.length > INFOPIC_BUTTON_TEXT_MAX_LENGTH) {
-        errorMessage = `Button text should be shorter than ${INFOPIC_BUTTON_TEXT_MAX_LENGTH} characters.`
+      if (value.length >= INFOPIC_BUTTON_TEXT_MAX_LENGTH) {
+        return `Button text should be shorter than ${INFOPIC_BUTTON_TEXT_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     case "alt": {
       // Alt text is too short
-      if (value.length < INFOPIC_ALT_TEXT_MIN_LENGTH) {
-        errorMessage = `Image alt text should be longer than ${INFOPIC_ALT_TEXT_MIN_LENGTH} characters.`
+      if (value.length <= INFOPIC_ALT_TEXT_MIN_LENGTH) {
+        return `Image alt text should be longer than ${INFOPIC_ALT_TEXT_MIN_LENGTH} characters.`
       }
       // Alt text is too long
-      if (value.length > INFOPIC_ALT_TEXT_MAX_LENGTH) {
-        errorMessage = `Image alt text should be shorter than ${INFOPIC_ALT_TEXT_MAX_LENGTH} characters.`
+      if (value.length >= INFOPIC_ALT_TEXT_MAX_LENGTH) {
+        return `Image alt text should be shorter than ${INFOPIC_ALT_TEXT_MAX_LENGTH} characters.`
       }
-      break
+      return ""
     }
     default:
-      break
+      return ""
   }
-  newSectionError[sectionType][field] = errorMessage
-  return newSectionError
 }
+const validateInfopicSection = validateAndSetSectionError(
+  validateInfopicSectionFields
+)
 
+const validateSection = (sectionType, field, value) => {
+  switch (sectionType) {
+    case "hero": {
+      return validateHeroSectionFields(field, value)
+    }
+    case "resources": {
+      return validateResourcesSectionFields(field, value)
+    }
+    case "infobar": {
+      return validateInfobarSectionFields(field, value)
+    }
+    case "infopic": {
+      return validateInfopicSectionFields(field, value)
+    }
+    default:
+      return ""
+  }
+}
 const validateSections = (sectionError, sectionType, field, value) => {
   let newSectionError = sectionError
   switch (sectionType) {
@@ -963,8 +938,11 @@ export {
   validateContactType,
   validateLocationType,
   validateLink,
+  validateHighlight,
   validateHighlights,
+  validateDropdownElem,
   validateDropdownElems,
+  validateSection,
   validateSections,
   validatePageSettings,
   validateResourceSettings,

From fc571d11865bbb4c8c43e85a8f43f069df6fbd3e Mon Sep 17 00:00:00 2001
From: Alexander Lee <alexander@open.gov.sg>
Date: Wed, 6 Sep 2023 16:50:03 +0800
Subject: [PATCH 02/12] Chore/fix edit nav bar styles (#1466)

* fix: nav menu template styles

* fix: add spacing for legacy nav section

* chore: remove unused attributes

* chore: move flex into className
---
 src/components/navbar/NavSection.jsx | 6 ++++--
 src/templates/NavBar.jsx             | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/navbar/NavSection.jsx b/src/components/navbar/NavSection.jsx
index e725220a2..3a254a2ec 100644
--- a/src/components/navbar/NavSection.jsx
+++ b/src/components/navbar/NavSection.jsx
@@ -1,3 +1,4 @@
+import { Box } from "@chakra-ui/react"
 import { Button, IconButton } from "@opengovsg/design-system-react"
 import PropTypes from "prop-types"
 import { useState, useRef } from "react"
@@ -269,7 +270,7 @@ const NavSection = ({
           </div>
         )}
       </Droppable>
-      <div className="d-flex justify-content-between mt-4">
+      <Box mt="2rem" mb="1rem">
         <Select
           ref={selectInputRef}
           className="w-50"
@@ -278,6 +279,7 @@ const NavSection = ({
           options={sectionCreationOptions}
         />
         <Button
+          mt="1rem"
           onClick={sectionCreationHandler}
           isDisabled={!newSectionType}
           variant="solid"
@@ -285,7 +287,7 @@ const NavSection = ({
         >
           Create New Menu
         </Button>
-      </div>
+      </Box>
       <span className={elementStyles.info}>
         {`Note: you can specify a folder ${
           hasResourceRoom ? `or resource room ` : ``
diff --git a/src/templates/NavBar.jsx b/src/templates/NavBar.jsx
index 17b238d78..80d322bcb 100644
--- a/src/templates/NavBar.jsx
+++ b/src/templates/NavBar.jsx
@@ -15,9 +15,10 @@ const NavDropdownSection = ({ children, link }) => (
 
 const TemplateNavBar = ({ links, collectionInfo, resources }) => (
   <nav className="navbar is-transparent flex-fill">
-    <div className="bp-container">
+    <div className="bp-container is-flex">
       <div className="bp-container is-fluid margin--none navbar-menu h-100">
         <div className="navbar-start">
+          <div className="navbar-item sub-link" />
           {links.map((link, linkIndex) => {
             if (link.collection) {
               return (

From e1e6bdf3d4216f22d36c62556b1741f92a708ade Mon Sep 17 00:00:00 2001
From: Alexander Lee <alexander@open.gov.sg>
Date: Wed, 6 Sep 2023 16:50:26 +0800
Subject: [PATCH 03/12] Chore/fix title text (#1472)

* chore: fix title text

* chore: fix other instances of spacing
---
 public/index.html                         | 2 +-
 src/components/Header.jsx                 | 2 +-
 src/components/Header/AllSitesHeader.tsx  | 2 +-
 src/components/VerifyUserDetailsModal.jsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 0e6121749..5191c7907 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,7 +29,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Isomer CMS</title>
+    <title>IsomerCMS</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index e18a37d55..addd759ac 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -110,7 +110,7 @@ const Header = ({
             <Box w="180px">
               <img
                 src={`${process.env.PUBLIC_URL}/img/logo.svg`}
-                alt="Isomer CMS logo"
+                alt="IsomerCMS logo"
               />
             </Box>
           ) : (
diff --git a/src/components/Header/AllSitesHeader.tsx b/src/components/Header/AllSitesHeader.tsx
index 508f6e77a..dd93cae31 100644
--- a/src/components/Header/AllSitesHeader.tsx
+++ b/src/components/Header/AllSitesHeader.tsx
@@ -28,7 +28,7 @@ export const AllSitesHeader = (): JSX.Element => {
       <Flex w="180px" justifyContent="center">
         <Image
           src={`${process.env.PUBLIC_URL}/img/logo.svg`}
-          alt="Isomer CMS logo"
+          alt="IsomerCMS logo"
         />
       </Flex>
       <Spacer />
diff --git a/src/components/VerifyUserDetailsModal.jsx b/src/components/VerifyUserDetailsModal.jsx
index 8ad1c59b9..60397d6fa 100644
--- a/src/components/VerifyUserDetailsModal.jsx
+++ b/src/components/VerifyUserDetailsModal.jsx
@@ -189,7 +189,7 @@ const VerifyUserDetailsModal = () => {
           <>
             <div>
               In order to improve security, a verified email is now required for
-              all users of Isomer CMS. Only <b>.gov.sg</b> or{" "}
+              all users of IsomerCMS. Only <b>.gov.sg</b> or{" "}
               <b>whitelisted email addresses</b> will be accepted. You must
               verify your email before proceeding.{" "}
               <Link isExternal href={IDENTITY_GUIDE_LINK}>

From 7e5d8e3d7538abe83d583c510a0a9887c6d1d1e7 Mon Sep 17 00:00:00 2001
From: seaerchin <44049504+seaerchin@users.noreply.github.com>
Date: Wed, 6 Sep 2023 17:04:46 +0800
Subject: [PATCH 04/12] fix(edithomepage): spread properly (#1474)

Co-authored-by: seaerchin <chin@ers-macbook-pro.lan>
---
 src/layouts/EditHomepage/EditHomepage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
index e45ace788..b9eda4fa8 100644
--- a/src/layouts/EditHomepage/EditHomepage.jsx
+++ b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -938,7 +938,7 @@ const EditHomepage = ({ match }) => {
                               {({ currentSelectedOption }) =>
                                 currentSelectedOption === "dropdown" ? (
                                   <HeroDropdownSection
-                                    {...section.hero}
+                                    {...section.hero.dropdown}
                                     state={section.hero}
                                     errors={errors}
                                   />

From 5e285cf3ff71335435f949b0d4fc37d601577112 Mon Sep 17 00:00:00 2001
From: Alexander Lee <alexander@open.gov.sg>
Date: Wed, 6 Sep 2023 17:08:11 +0800
Subject: [PATCH 05/12] Fix/edit nav nits (#1476)

* fix: reduce bottom padding of sidebar

* fix: text styling

* fix: padding on add section button

* chore: remove periods from validators

* chore: change placeholder text

* fix: update default values of new sections

* fix: copy changes
---
 src/layouts/EditNavBar.jsx                       | 14 +++++++-------
 src/layouts/components/Editable/Editable.tsx     |  1 +
 src/layouts/components/NavBar/FolderMenuBody.tsx |  2 +-
 src/layouts/components/NavBar/GroupMenuBody.tsx  | 16 +++++++++-------
 src/layouts/components/NavBar/PageMenuBody.tsx   |  4 ++--
 src/utils/validators.js                          |  6 +++---
 6 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/layouts/EditNavBar.jsx b/src/layouts/EditNavBar.jsx
index efe818621..b541d9d66 100644
--- a/src/layouts/EditNavBar.jsx
+++ b/src/layouts/EditNavBar.jsx
@@ -87,28 +87,28 @@ const EditNavBar = ({ match }) => {
   const errorToast = useErrorToast()
 
   const LinkCollectionSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New folder",
     collection: collections[0],
   })
 
   const LinkResourceSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New resource room",
     resource_room: true,
   })
 
   const LinkPageSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New single page",
     url: "/permalink",
   })
 
   const LinkSublinkSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New menu group",
     url: "/permalink",
     sublinks: [],
   })
 
   const SublinkSectionConstructor = () => ({
-    title: "Submenu Title",
+    title: "New submenu",
     url: "/permalink",
   })
 
@@ -710,7 +710,7 @@ const EditNavBar = ({ match }) => {
                                     <Editable.DraggableAccordionItem
                                       index={linkIndex}
                                       tag={
-                                        <Tag variant="subtle">Menu Group</Tag>
+                                        <Tag variant="subtle">Menu group</Tag>
                                       }
                                       title={link.title}
                                       isInvalid={
@@ -763,7 +763,7 @@ const EditNavBar = ({ match }) => {
                     </VStack>
                   </Editable.Accordion>
 
-                  <Box p="1.5rem">
+                  <Box px="1.5rem">
                     <AddSectionButton buttonText="Add menu item">
                       <AddSectionButton.List>
                         {/* NOTE: Check if the site contains any collections in `options` 
diff --git a/src/layouts/components/Editable/Editable.tsx b/src/layouts/components/Editable/Editable.tsx
index 83bb853ed..3c5cdec52 100644
--- a/src/layouts/components/Editable/Editable.tsx
+++ b/src/layouts/components/Editable/Editable.tsx
@@ -103,6 +103,7 @@ const EditableSidebar = ({
       bg="base.canvas.alt"
       width="450px"
       overflowY="scroll"
+      pb="1.5rem"
       // NOTE: We reserve 80px **each** for
       // both the header and the footer
       h="calc(100vh - 160px - 1rem)"
diff --git a/src/layouts/components/NavBar/FolderMenuBody.tsx b/src/layouts/components/NavBar/FolderMenuBody.tsx
index 9ea77f389..cb8755bfd 100644
--- a/src/layouts/components/NavBar/FolderMenuBody.tsx
+++ b/src/layouts/components/NavBar/FolderMenuBody.tsx
@@ -50,7 +50,7 @@ export const FolderMenuBody = ({
   return (
     <Editable.Section>
       <FormControl isRequired isInvalid={!!errors.title}>
-        <FormLabel>Menu Item Name</FormLabel>
+        <FormLabel>Menu item name</FormLabel>
         <Input
           placeholder="This is displayed on the navigation bar"
           id={`link-${index}-title`}
diff --git a/src/layouts/components/NavBar/GroupMenuBody.tsx b/src/layouts/components/NavBar/GroupMenuBody.tsx
index 6d6977406..71b0b3444 100644
--- a/src/layouts/components/NavBar/GroupMenuBody.tsx
+++ b/src/layouts/components/NavBar/GroupMenuBody.tsx
@@ -40,7 +40,7 @@ export const GroupMenuBody = ({
   return (
     <Editable.Section>
       <FormControl isRequired isInvalid={!!errors.title}>
-        <FormLabel>Menu Group Name</FormLabel>
+        <FormLabel>Menu group name</FormLabel>
         <Input
           placeholder="This is displayed on the navigation bar"
           id={`link-${index}-title`}
@@ -52,7 +52,7 @@ export const GroupMenuBody = ({
       <FormControl isRequired isInvalid={!!errors.url}>
         <FormLabel>Destination</FormLabel>
         <Input
-          placeholder="This subtitle appears above the title"
+          placeholder="Enter a /page-url or link for this menu item"
           id={`link-${index}-url`}
           value={url}
           onChange={onChange}
@@ -60,9 +60,11 @@ export const GroupMenuBody = ({
         <FormErrorMessage>{errors.url}</FormErrorMessage>
       </FormControl>
       <FormControl isRequired pt="0.5rem">
-        <FormLabel mb="0.5rem">Submenus</FormLabel>
-        <Text textStyle="caption-2" mb="1.5rem">
-          Cards are displayed side by side on a desktop screen
+        <FormLabel mb="0.5rem" textStyle="h6">
+          Submenus
+        </FormLabel>
+        <Text textStyle="body-2" mb="1.5rem">
+          Cards are displayed side by side on a desktop screens
         </Text>
         <DragDropContext onDragEnd={onDragEnd}>
           <Editable.Droppable width="100%" editableId={`sublink-${index}`}>
@@ -87,7 +89,7 @@ export const GroupMenuBody = ({
                             isRequired
                             isInvalid={!!errors.sublinks[sublinkIndex].title}
                           >
-                            <FormLabel>Submenu Name</FormLabel>
+                            <FormLabel>Submenu name</FormLabel>
                             <Input
                               placeholder="New menu group"
                               id={`sublink-${index}-${sublinkIndex}-title`}
@@ -104,7 +106,7 @@ export const GroupMenuBody = ({
                           >
                             <FormLabel>Destination</FormLabel>
                             <Input
-                              placeholder="/permalink"
+                              placeholder="Enter a /page-url or link for this menu item"
                               id={`sublink-${index}-${sublinkIndex}-url`}
                               value={sublink.url}
                               onChange={onChange}
diff --git a/src/layouts/components/NavBar/PageMenuBody.tsx b/src/layouts/components/NavBar/PageMenuBody.tsx
index 607f73fa7..be6070916 100644
--- a/src/layouts/components/NavBar/PageMenuBody.tsx
+++ b/src/layouts/components/NavBar/PageMenuBody.tsx
@@ -26,7 +26,7 @@ export const PageMenuBody = ({ title, url, index, errors }: PagesBodyProps) => {
   return (
     <Editable.Section>
       <FormControl isRequired isInvalid={!!errors.title}>
-        <FormLabel>Menu Item Name</FormLabel>
+        <FormLabel>Menu item name</FormLabel>
         <Input
           placeholder="This is displayed on the navigation bar"
           id={`link-${index}-title`}
@@ -38,7 +38,7 @@ export const PageMenuBody = ({ title, url, index, errors }: PagesBodyProps) => {
       <FormControl isRequired isInvalid={!!errors.url}>
         <FormLabel>Destination</FormLabel>
         <Input
-          placeholder="This subtitle appears above the title"
+          placeholder="Enter a /page-url or link for this menu item"
           id={`link-${index}-url`}
           value={url}
           onChange={onChange}
diff --git a/src/utils/validators.js b/src/utils/validators.js
index 873aa71e1..2dd87b9cd 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -652,15 +652,15 @@ const validateLink = (linkType, value) => {
   switch (linkType) {
     case "title":
       if (value.length < LINK_TITLE_MIN_LENGTH) {
-        errorMessage = `Title cannot be empty.`
+        errorMessage = `Name cannot be empty`
       }
       if (value.length > LINK_TITLE_MAX_LENGTH) {
-        errorMessage = `Title should be shorter than ${LINK_TITLE_MAX_LENGTH} characters.`
+        errorMessage = `Name should be shorter than ${LINK_TITLE_MAX_LENGTH} characters`
       }
       break
     case "url":
       if (value.length < LINK_URL_MIN_LENGTH) {
-        errorMessage = `Permalink cannot be empty.`
+        errorMessage = `Destination cannot be empty`
       }
       break
     default:

From 63ebfb1ce799596b4ec3cdf735e783459301db03 Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Wed, 6 Sep 2023 17:30:31 +0800
Subject: [PATCH 06/12] fix(edithomepage): move error msg extraction into
 component

---
 src/layouts/EditHomepage/EditHomepage.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
index b9eda4fa8..48e477b7a 100644
--- a/src/layouts/EditHomepage/EditHomepage.jsx
+++ b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -160,7 +160,6 @@ const EditHomepage = ({ match }) => {
     setDisplayHighlights(displayHighlights)
   }
   const heroSection = frontMatter.sections.filter((section) => !!section.hero)
-  const errorMessages = getErrorsFromHomepageState(homepageState)
 
   const errorToast = useErrorToast()
 
@@ -1093,7 +1092,13 @@ const EditHomepage = ({ match }) => {
               />
             </HStack>
             <Footer>
-              {errorMessages.some((message) => message.includes("longer")) && (
+              {/* NOTE: We have to call this method twice because `homepageState` isn't guaranteed to be loaded
+                  if we put the declaration out of the components.
+                  This is because we have a blocking conditional `isLoaded` that gets set only after data is fetched.
+              */}
+              {getErrorsFromHomepageState(homepageState).some((message) =>
+                message.includes("longer")
+              ) && (
                 <Text
                   mr="0.25rem"
                   textStyle="body-2"
@@ -1104,7 +1109,7 @@ const EditHomepage = ({ match }) => {
                 </Text>
               )}
               <LoadingButton
-                isDisabled={errorMessages.length > 0}
+                isDisabled={getErrorsFromHomepageState(homepageState)}
                 onClick={savePage}
               >
                 Save

From c61f544a0027d6755e02b791cbf922ecc5090bab Mon Sep 17 00:00:00 2001
From: Alexander Lee <alexander@open.gov.sg>
Date: Wed, 6 Sep 2023 17:43:23 +0800
Subject: [PATCH 07/12] fix: error condition

---
 src/layouts/EditHomepage/EditHomepage.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
index 48e477b7a..53e98865e 100644
--- a/src/layouts/EditHomepage/EditHomepage.jsx
+++ b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -1109,7 +1109,9 @@ const EditHomepage = ({ match }) => {
                 </Text>
               )}
               <LoadingButton
-                isDisabled={getErrorsFromHomepageState(homepageState)}
+                isDisabled={
+                  getErrorsFromHomepageState(homepageState).length > 0
+                }
                 onClick={savePage}
               >
                 Save

From ed6e9dd5c1765b4e780a3b0a81aa787ea407b161 Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Thu, 7 Sep 2023 01:36:08 +0800
Subject: [PATCH 08/12] fix(edithomepage): pass param properly

---
 src/layouts/EditHomepage/EditHomepage.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
index 53e98865e..a92adf9bf 100644
--- a/src/layouts/EditHomepage/EditHomepage.jsx
+++ b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -939,7 +939,11 @@ const EditHomepage = ({ match }) => {
                                   <HeroDropdownSection
                                     {...section.hero.dropdown}
                                     state={section.hero}
-                                    errors={errors}
+                                    errors={{
+                                      ...errors,
+                                      dropdown:
+                                        errors.sections[0].hero.dropdown,
+                                    }}
                                   />
                                 ) : (
                                   <HeroHighlightSection

From c334c1ede78cd944819ea3f1b823c5798d737e2a Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Thu, 7 Sep 2023 01:36:27 +0800
Subject: [PATCH 09/12] refactor(herodropdown): remove extra prop

---
 src/layouts/components/Homepage/HeroDropdownSection.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/components/Homepage/HeroDropdownSection.tsx b/src/layouts/components/Homepage/HeroDropdownSection.tsx
index 96b8058b4..558106097 100644
--- a/src/layouts/components/Homepage/HeroDropdownSection.tsx
+++ b/src/layouts/components/Homepage/HeroDropdownSection.tsx
@@ -23,7 +23,6 @@ export interface HeroDropdownFormFields {
 interface HeroDropdownSectionProps {
   errors: {
     dropdownElems: HeroDropdownFormFields[]
-    title: string
     dropdown: string
   }
   state: EditorHeroDropdownSection

From bfd64cbbc3e4896ebc5e35844c8dcd306371ab56 Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Thu, 7 Sep 2023 02:55:38 +0800
Subject: [PATCH 10/12] fix(validators): fix wrong error msg

---
 src/utils/validators.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils/validators.js b/src/utils/validators.js
index 2dd87b9cd..e64819483 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -359,7 +359,7 @@ const validateInfobarSectionFields = (field, value) => {
     case "description": {
       // Description is too short
       if (value.length <= INFOBAR_DESCRIPTION_MIN_LENGTH) {
-        return `Ddescription should be longer than ${INFOBAR_DESCRIPTION_MIN_LENGTH} characters.`
+        return `Description should be longer than ${INFOBAR_DESCRIPTION_MIN_LENGTH} characters.`
       }
       // Description is too long
       if (getLengthWithoutTags(value) >= INFOBAR_DESCRIPTION_MAX_LENGTH) {
@@ -940,6 +940,7 @@ export {
   validateLink,
   validateHighlight,
   validateHighlights,
+  validateHeroSectionFields,
   validateDropdownElem,
   validateDropdownElems,
   validateSection,

From 115c37a759b8f5925749b1fc7f1f0e111077b965 Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Thu, 7 Sep 2023 03:30:56 +0800
Subject: [PATCH 11/12] fix(hero-+-buttons): validate more strictly

---
 src/layouts/EditHomepage/EditHomepage.jsx | 39 ++++++++--------
 src/layouts/EditHomepage/utils.ts         | 54 ++++++++++++++++++++---
 2 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
index a92adf9bf..169a212b5 100644
--- a/src/layouts/EditHomepage/EditHomepage.jsx
+++ b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -56,7 +56,11 @@ import {
   RESOURCES_SECTION,
 } from "./constants"
 import { HomepagePreview } from "./HomepagePreview"
-import { getDefaultValues, getErrorsFromHomepageState } from "./utils"
+import {
+  getDefaultValues,
+  getErrorsFromHomepageState,
+  validateButton,
+} from "./utils"
 
 /* eslint-disable react/no-array-index-key */
 
@@ -321,24 +325,15 @@ const EditHomepage = ({ match }) => {
 
           // Set special error message if hero button has text but hero url is empty
           // This needs to be done separately because it relies on the state of another field
-          if (
-            field === "url" &&
-            !value &&
-            frontMatter.sections[sectionIndex][sectionType].button &&
-            (frontMatter.sections[sectionIndex][sectionType].button || value)
-          ) {
-            const errorMessage = "Please specify a URL for your button"
-            newSectionError = _.cloneDeep(errors.sections[sectionIndex])
-            newSectionError[sectionType][field] = errorMessage
-          } else if (
-            field === "button" &&
-            !frontMatter.sections[sectionIndex][sectionType].url &&
-            (value || frontMatter.sections[sectionIndex][sectionType].url) &&
-            sectionType !== "resources"
-          ) {
-            const errorMessage = "Please specify a URL for your button"
+          if (field === "url" || field === "button") {
+            const buttonError = validateButton(
+              field,
+              frontMatter.sections[sectionIndex][sectionType],
+              sectionType,
+              value
+            )
             newSectionError = _.cloneDeep(errors.sections[sectionIndex])
-            newSectionError[sectionType].url = errorMessage
+            newSectionError[sectionType].url = buttonError
           } else {
             newSectionError = validateSections(
               _.cloneDeep(errors.sections[sectionIndex]),
@@ -941,13 +936,15 @@ const EditHomepage = ({ match }) => {
                                     state={section.hero}
                                     errors={{
                                       ...errors,
-                                      dropdown:
-                                        errors.sections[0].hero.dropdown,
+                                      ...errors.sections[0].hero,
                                     }}
                                   />
                                 ) : (
                                   <HeroHighlightSection
-                                    errors={errors}
+                                    errors={{
+                                      ...errors,
+                                      ...errors.sections[0].hero,
+                                    }}
                                     highlights={section.hero.key_highlights}
                                   />
                                 )
diff --git a/src/layouts/EditHomepage/utils.ts b/src/layouts/EditHomepage/utils.ts
index 5e2f43703..a70d3a6b4 100644
--- a/src/layouts/EditHomepage/utils.ts
+++ b/src/layouts/EditHomepage/utils.ts
@@ -6,7 +6,12 @@ import {
   isDropdownSection,
   isHighlightSection,
 } from "types/homepage"
-import { validateDropdownElem, validateHighlight, validateSection } from "utils"
+import {
+  validateDropdownElem,
+  validateHeroSectionFields,
+  validateHighlight,
+  validateSection,
+} from "utils"
 
 export const getDefaultValues = (
   obj: Record<string, string>
@@ -25,6 +30,30 @@ const validate = <T>(
     .value()
 }
 
+export const validateButton = (
+  field: "url" | "button",
+  section: { button?: string; url?: string },
+  sectionType: string,
+  value: string
+): string => {
+  // Set special error message if hero button has text but hero url is empty
+  // This needs to be done separately because it relies on the state of another field
+  if (field === "url" && !value && section.button) {
+    return "Please specify a URL for your button"
+  }
+
+  if (
+    field === "button" &&
+    !section.url &&
+    value &&
+    sectionType !== "resources"
+  ) {
+    return "Please specify a URL for your button"
+  }
+
+  return ""
+}
+
 // NOTE: We might wish to extend this so that we map the values to
 // error msg etc then extract an overall boolean based on that
 // but for now will return a bool
@@ -55,6 +84,12 @@ export const getErrorsFromHomepageState = ({
     errorMessages = [...errorMessages, ...dropdownErrors]
   }
 
+  const heroFieldErrors = _(heroSection)
+    .omit(["key_highlights", "dropdown"])
+    .mapValues((val, key) => validateHeroSectionFields(key, val))
+    .values()
+    .value()
+
   // NOTE: Section is an object keyed by the section type
   // this is, for example, `{ infobar: someValue }`
   const sectionErrors = _(rest)
@@ -63,16 +98,21 @@ export const getErrorsFromHomepageState = ({
       // this is, for example, `title`/`subtitle`/`button` etc
       _(section)
         .entries()
-        .map(([sectionType, sectionObj]) =>
-          validate(sectionObj, (key, val) =>
-            validateSection(sectionType, key, val)
-          )
-        )
+        .map(([sectionType, sectionObj]) => {
+          return validate(sectionObj, (key, val) => {
+            const baseError = validateSection(sectionType, key, val)
+            const buttonError =
+              key === "button" || key === "url"
+                ? validateButton(key, sectionObj, sectionType, val as string)
+                : ""
+            return baseError || buttonError
+          })
+        })
         .flatten()
         .value()
     )
     .flatten()
     .value()
 
-  return [...errorMessages, ...sectionErrors]
+  return [...errorMessages, ...sectionErrors, ...heroFieldErrors]
 }

From 0549a1f2559e174b8d8731cbcde795bfce456d61 Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Thu, 7 Sep 2023 03:42:41 +0800
Subject: [PATCH 12/12] fix(edithomepage): update condition for button

---
 src/layouts/EditHomepage/EditHomepage.jsx | 5 +++--
 src/layouts/EditHomepage/utils.ts         | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
index 169a212b5..ed9d5bcaa 100644
--- a/src/layouts/EditHomepage/EditHomepage.jsx
+++ b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -1097,8 +1097,9 @@ const EditHomepage = ({ match }) => {
                   if we put the declaration out of the components.
                   This is because we have a blocking conditional `isLoaded` that gets set only after data is fetched.
               */}
-              {getErrorsFromHomepageState(homepageState).some((message) =>
-                message.includes("longer")
+              {getErrorsFromHomepageState(homepageState).some(
+                (message) =>
+                  message.includes("longer") || message.includes("specify")
               ) && (
                 <Text
                   mr="0.25rem"
diff --git a/src/layouts/EditHomepage/utils.ts b/src/layouts/EditHomepage/utils.ts
index a70d3a6b4..cdc6d23d3 100644
--- a/src/layouts/EditHomepage/utils.ts
+++ b/src/layouts/EditHomepage/utils.ts
@@ -87,7 +87,7 @@ export const getErrorsFromHomepageState = ({
   const heroFieldErrors = _(heroSection)
     .omit(["key_highlights", "dropdown"])
     .mapValues((val, key) => validateHeroSectionFields(key, val))
-    .values()
+    .filter()
     .value()
 
   // NOTE: Section is an object keyed by the section type