fix(hero-+-buttons): validate more strictly

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}
                                   />
                                 )

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]
 }