Feat/announcement block (#1497)

* feat(announcements): add SCSS styles from template

* feat(announcements): introduce preview component

* chore: sync padding and margin helpers

* chore: sync template changes to CMS preview

* feat(announcements): define shape

* feat(validators): announcement validators

* feat(announcement): add announcement block

* feat(edit homepage): add in announcement block

* feat(useDrag): update draggable

* fix(announcement): interface bugs

* fix(announcement): bugs after interface change

* feat(storybook): attempt to get out storybook

* chore(storybook): remove storybook"

The purpose of the commit was to have history of previous attempt vs commenting it in production code

* fix(announcementbody): dont trigger re-render

* fix(announcement): fix bugs wrt shape

normalise datetime

* chore(edit homepage): rm console log

* fi(announcement): on drag bug fix

* chore(edit homepage): rm console.log

* fix(validations): should throw error for empty str

* chore(announcement body): dynamically retrieve max announcement

* chore(homepage): remove redundant check

* chore(edithomepage): remove redundant console.log

* chore(edit homepage): modify this to announcements

* chore(announcement body): rm redundant placeholder

* chore(edithomepage): rm redundant array

* IS-516 link to jira

* chore(useDrag): change verb

* chore(edit homepage): clarity in comment

* fix(announcement): use func to get new datetime

* refactor(validator): change naming

* refactor(announcement): mutate at data level

* fix(announcement body): copy changes

* fix(announcement): copy changes for clarity

* fix(announcement date): show invalid dates

* style(copy): change copy

* fix(announcement): copy changes

* fix(announcement): have 1 announcemnt by default

* build(de): fix failing build

* fix(homapage prevew): rebase errors

* chore(validators): rm console logs

* feat(feature flag): add partial ff for announment

* chore(announcemnt body): rm console log

* chore(announcementBody): comments for clarity

* fix(typing): relax constraint

* chore(announcementbody): rm redundant console.log

* refactor(editHomepage): rm redundant spread

* style(edit homepage): add comments for clarity

* fix(announcements): empty errors bug

* chore(edit homepage): rm redundant func call

* chore(edit homepage): clarify comment

* fix(imports): fix imports after rebase

* fix(imports): issues after rebase

---------

Co-authored-by: Hsu Zhong Jun <[email protected]>

package.json

@@ -46,6 +46,7 @@
     "libphonenumber-js": "^1.9.48",
     "lodash": "^4.17.21",
     "marked": "^4.0.12",
+    "moment": "^2.29.4",
     "moment-timezone": "^0.5.35",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.2.4",

src/components/Editable/Editable.tsx

@@ -162,7 +162,11 @@ const EditableSidebar = ({
   )
 }
 
-type HomepageDroppableZone = "dropdownelem" | "leftPane" | "highlight"
+type HomepageDroppableZone =
+  | "dropdownelem"
+  | "leftPane"
+  | "highlight"
+  | "announcement"
 type ContactUsDroppableZone =
   | "locations"
   | "contacts"

src/components/PageSettingsModal/PageSettingsSchema.jsx

@@ -5,7 +5,7 @@ import {
   permalinkRegexTest,
   specialCharactersRegexTest,
   jekyllFirstCharacterRegexTest,
-  dateRegexTest,
+  resourceDateRegexTest,
   PAGE_SETTINGS_PERMALINK_MIN_LENGTH,
   PAGE_SETTINGS_PERMALINK_MAX_LENGTH,
   PAGE_SETTINGS_TITLE_MIN_LENGTH,
@@ -71,7 +71,10 @@ export const PageSettingsSchema = (existingTitlesArray = []) =>
         layout
           ? schema
               .required("Date is required")
-              .matches(dateRegexTest, "Date must be formatted as YYYY-MM-DD")
+              .matches(
+                resourceDateRegexTest,
+                "Date must be formatted as YYYY-MM-DD"
+              )
               .test(
                 "Date cannot be in the future",
                 "Date cannot be in the future",

src/hooks/useDrag.tsx

@@ -2,13 +2,18 @@ import { DropResult } from "@hello-pangea/dnd"
 import update from "immutability-helper"
 import _ from "lodash"
 
+import { ANNOUNCEMENT_BLOCK } from "layouts/EditHomepage/constants"
+
 import {
   EditorHeroDropdownSection,
   EditorHeroHighlightsSection,
   EditorHomepageElement,
   EditorHomepageState,
   HeroFrontmatterSection,
   PossibleEditorSections,
+  EditorHomepageFrontmatterSection,
+  AnnouncementsFrontmatterSection,
+  AnnouncementOption,
 } from "types/homepage"
 
 const updatePositions = <T,>(
@@ -33,6 +38,12 @@ const createElement = <T,>(section: T[], elem: T): T[] => {
   })
 }
 
+const createElementFromTop = <T,>(section: T[], elem: T): T[] => {
+  return update(section, {
+    $unshift: [elem],
+  })
+}
+
 const deleteElement = <T,>(section: T[], indexToDelete: number): T[] => {
   return update(section, {
     $splice: [[indexToDelete, 1]],
@@ -54,6 +65,32 @@ const updateEditorSection = (
   errors: { ...homepageState.errors, sections: newSectionErrors },
 })
 
+const updateAnnouncementSection = (
+  homepageState: EditorHomepageState,
+  newDisplayAnnouncementItems: unknown[],
+  newAnnouncementOptions: unknown[],
+  newAnnouncementErrors: unknown[],
+  announcementsIndex: number
+): EditorHomepageState => {
+  return {
+    ...homepageState,
+    displayAnnouncementItems: newDisplayAnnouncementItems,
+    frontMatter: {
+      ...homepageState.frontMatter,
+      sections: _.set(
+        // NOTE: Deep clone here to avoid mutation
+        _.cloneDeep(homepageState.frontMatter.sections),
+        [announcementsIndex, ANNOUNCEMENT_BLOCK.id, "announcement_items"],
+        newAnnouncementOptions
+      ),
+    },
+    errors: {
+      ...homepageState.errors,
+      announcementItems: newAnnouncementErrors,
+    },
+  }
+}
+
 const updateDropdownSection = (
   homepageState: EditorHomepageState,
   newDisplayDropdownElems: unknown[],
@@ -120,6 +157,7 @@ const updateHomepageState = (
     displaySections,
     displayDropdownElems,
     displayHighlights,
+    displayAnnouncementItems,
   } = homepageState
 
   // If the user dropped the draggable to no known droppable
@@ -241,6 +279,61 @@ const updateHomepageState = (
         newHighlightErrors
       )
     }
+    case "announcement": {
+      const doesAnnouncementKeyExist = !_.isEmpty(
+        frontMatter.sections.find((section) =>
+          EditorHomepageFrontmatterSection.isAnnouncements(section)
+        )
+      )
+      if (!doesAnnouncementKeyExist) {
+        // should not reach here, but defensively return the original state
+        return homepageState
+      }
+
+      const announcementsIndex = frontMatter.sections.findIndex((section) =>
+        EditorHomepageFrontmatterSection.isAnnouncements(section)
+      )
+      const draggedElem = (frontMatter.sections[
+        announcementsIndex
+        // safe to assert as check is done above
+      ] as AnnouncementsFrontmatterSection).announcements.announcement_items[
+        source.index
+      ]
+
+      const newAnnouncementsOptions = updatePositions(
+        (frontMatter.sections[
+          announcementsIndex
+          // safe to assert as check is done above
+        ] as AnnouncementsFrontmatterSection).announcements.announcement_items,
+        source.index,
+        destination.index,
+        draggedElem
+      )
+
+      const draggedError = errors.announcementItems[source.index]
+      const newAnnouncementErrors = updatePositions(
+        errors.announcementItems,
+        source.index,
+        destination.index,
+        draggedError
+      )
+      const displayBool = displayAnnouncementItems[source.index]
+      const newDisplayAnnouncementItems = updatePositions(
+        displayAnnouncementItems,
+        source.index,
+        destination.index,
+        displayBool
+      )
+
+      return updateAnnouncementSection(
+        homepageState,
+        newDisplayAnnouncementItems,
+        newAnnouncementsOptions,
+        newAnnouncementErrors,
+        announcementsIndex
+      )
+    }
+
     default:
       return homepageState
   }
@@ -260,6 +353,7 @@ export const onCreate = <E,>(
     displaySections,
     displayDropdownElems,
     displayHighlights,
+    displayAnnouncementItems,
   } = homepageState
 
   switch (elemType) {
@@ -332,6 +426,50 @@ export const onCreate = <E,>(
 
       return updateHighlightsSection(homepageState, [true], [val], [err])
     }
+    case "announcement": {
+      const announcementKeyExist = !_.isEmpty(
+        frontMatter.sections.find((section) =>
+          EditorHomepageFrontmatterSection.isAnnouncements(section)
+        )
+      )
+      if (!announcementKeyExist) {
+        // should not reach here, but defensively return the original state
+        return homepageState
+      }
+
+      const announcementsIndex = frontMatter.sections.findIndex((section) =>
+        EditorHomepageFrontmatterSection.isAnnouncements(section)
+      )
+      const announcementBlockSection: AnnouncementsFrontmatterSection = frontMatter
+        .sections[announcementsIndex] as AnnouncementsFrontmatterSection
+
+      const announcements = createElementFromTop(
+        announcementBlockSection.announcements.announcement_items,
+        val as AnnouncementOption
+      )
+
+      const resetDisplaySections = _.fill(
+        Array(displayAnnouncementItems.length),
+        false
+      )
+      const newDisplayAnnouncementItems = createElementFromTop(
+        resetDisplaySections,
+        true
+      )
+
+      const newAnnouncementErrors = createElementFromTop(
+        errors.announcementItems,
+        err
+      )
+
+      return updateAnnouncementSection(
+        homepageState,
+        newDisplayAnnouncementItems,
+        announcements,
+        newAnnouncementErrors,
+        announcementsIndex
+      )
+    }
     default:
       return homepageState
   }
@@ -348,6 +486,7 @@ export const onDelete = (
     displaySections,
     displayDropdownElems,
     displayHighlights,
+    displayAnnouncementItems,
   } = homepageState
 
   switch (elemType) {
@@ -406,6 +545,45 @@ export const onDelete = (
         newHighlightErrors
       )
     }
+    case "announcement": {
+      const announcementKeyExist = !_.isEmpty(
+        frontMatter.sections.find((section) =>
+          EditorHomepageFrontmatterSection.isAnnouncements(section)
+        )
+      )
+      if (!announcementKeyExist) {
+        // should not reach here, but defensively return the original state
+        return homepageState
+      }
+
+      const announcementsIndex = frontMatter.sections.findIndex((section) =>
+        EditorHomepageFrontmatterSection.isAnnouncements(section)
+      )
+      const announcementsSection: AnnouncementsFrontmatterSection = frontMatter
+        .sections[announcementsIndex] as AnnouncementsFrontmatterSection
+
+      const newAnnouncementOptions = deleteElement(
+        announcementsSection.announcements.announcement_items,
+        indexToDelete
+      )
+      const newAnnouncementErrors = deleteElement(
+        errors.announcementItems,
+        indexToDelete
+      )
+
+      const newDisplayAnnouncements = deleteElement(
+        displayAnnouncementItems,
+        indexToDelete
+      )
+
+      return updateAnnouncementSection(
+        homepageState,
+        newDisplayAnnouncements,
+        newAnnouncementOptions,
+        newAnnouncementErrors,
+        announcementsIndex
+      )
+    }
     default:
       return homepageState
   }