PLU-479: [SIDE-DRAWER-29]: add announcement modal (#1014)

**Waiting for design for the last modal screen from Stacey**

## Details
- Add modal for editor to show announcements using local storage key,
only when local storage timestamp matches the
`LATEST_ANNOUNCEMENT_MODAL_TIMESTAMP` in the code

## Tests
- [ ] Announcement modal appears on first load into any pipe
- [ ] Modal should still load if you refresh the page without closing it
- [ ] Modal should not load again after clicking `Experience it now` or
closing the modal
- [ ] Modal appears below the DemoFlowModal for template with demo video

Author: m0nggh

packages/frontend/src/components/EditorLayout/AnnouncementModal/AnnouncementItem.tsx

@@ -0,0 +1,81 @@
+import { useMemo } from 'react'
+import { Components } from 'react-markdown'
+import { Box, Image, ModalBody, ModalHeader, Text } from '@chakra-ui/react'
+import { AnimationConfigWithData } from 'lottie-web'
+import { RequireExactlyOne } from 'type-fest'
+
+import MarkdownRenderer from '@/components/MarkdownRenderer'
+import LottieWebAnimation from '@/components/NewsDrawer/LottieWebAnimation'
+
+type AnnouncementItemMultimedia = RequireExactlyOne<
+  {
+    url: string
+    animationData: AnimationConfigWithData['animationData']
+  },
+  'url' | 'animationData'
+>
+
+export interface AnnouncementItemProps {
+  title: string
+  details: string
+  multimedia?: AnnouncementItemMultimedia
+}
+
+const mdComponents: Components = {
+  li: ({ node, ...props }) => {
+    // Check if this is a top-level <ul>
+    const isTopLevel =
+      !node.position?.start?.offset || node.position.start.column === 1
+
+    return (
+      <li
+        {...props}
+        style={{
+          listStyleType: isTopLevel ? 'none' : 'disc',
+          lineHeight: '1.75',
+          paddingLeft: isTopLevel ? '0' : '0.5rem',
+          marginLeft: isTopLevel ? '-1rem' : '0rem',
+        }}
+      />
+    )
+  },
+}
+
+export default function AnnouncementItem(props: AnnouncementItemProps) {
+  const { title, details, multimedia } = props
+  const displayedMultimedia = useMemo(() => {
+    if (!multimedia) {
+      return
+    }
+    if (multimedia.animationData) {
+      return (
+        <LottieWebAnimation
+          title={title}
+          animationData={multimedia.animationData}
+        />
+      )
+    }
+    return (
+      <Image
+        borderTopRadius="lg"
+        fit="fill"
+        src={multimedia.url}
+        title={title}
+        alt={title}
+      />
+    )
+  }, [multimedia, title])
+
+  return (
+    <>
+      {displayedMultimedia && <Box>{displayedMultimedia}</Box>}
+      <ModalHeader mb={displayedMultimedia ? 0 : 2}>
+        <Text textStyle="h4">{title}</Text>
+      </ModalHeader>
+
+      <ModalBody>
+        <MarkdownRenderer source={details} components={mdComponents} />
+      </ModalBody>
+    </>
+  )
+}

packages/frontend/src/components/EditorLayout/AnnouncementModal/AnnouncementItemList.ts

@@ -0,0 +1,50 @@
+import dedent from 'dedent'
+
+import GraphicAnimation from './assets/Graphic.json'
+import RedesignPipe from './assets/redesign-pipe.svg'
+import WorkflowVisualisation from './assets/workflow-visualisation.svg'
+import { AnnouncementItemProps } from './AnnouncementItem'
+
+export const ANNOUNCEMENT_ITEM_LIST: AnnouncementItemProps[] = [
+  {
+    title: 'Redesigned pipe building experience',
+    details:
+      'Set up steps on the side without losing an overview of your workflow. This helps to reduce the need to scroll up and down to reference previous steps and also to focus your attention on setting up the current step.',
+    multimedia: {
+      url: RedesignPipe,
+    },
+  },
+  {
+    title: 'Rename your steps',
+    details:
+      'Add more context to your workflow by renaming steps - make handovers easier and help others understand what happens in each step.',
+    multimedia: {
+      animationData: GraphicAnimation,
+    },
+  },
+  {
+    title: 'Better workflow visualisation',
+    details:
+      'View steps within branches when using if then - for a more complete overview of your workflow.',
+    multimedia: {
+      url: WorkflowVisualisation,
+    },
+  },
+  {
+    title: 'Other fixes and improvements',
+    details: dedent`
+    - ✏️  **Set up steps faster**
+      * Added prompts to save your step so you don't lose your work
+      * Rearranged fields for easier mapping and readability
+    
+
+    - 🔍  **Find what you need quickly**
+      * Sorted apps and tools by categories to help you choose the right ones faster
+      * Added quick links to view connected forms and locate your M365 Excel folder
+      
+
+    - ☝️  **One time setup**
+      * Created a one-time connection to your M365 account — no repeated connection needed
+    `,
+  },
+]

packages/frontend/src/components/EditorLayout/AnnouncementModal/MotionBox.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react'
+import { Box, BoxProps } from '@chakra-ui/react'
+import { HTMLMotionProps, motion } from 'framer-motion'
+import { Merge } from 'type-fest'
+
+export type MotionBoxProps = Merge<BoxProps, HTMLMotionProps<'div'>>
+export const MotionBox = motion(Box) as FC<MotionBoxProps>

packages/frontend/src/components/EditorLayout/AnnouncementModal/ProgressIndicator.tsx

@@ -0,0 +1,87 @@
+import { useMemo } from 'react'
+import { Box } from '@chakra-ui/react'
+
+import { MotionBox } from './MotionBox'
+
+const ActiveIndicator = (): JSX.Element => (
+  <Box
+    // Top required to align it with CircleIndicators
+    top="0.125rem"
+    width="1.5rem"
+    height="0.5rem"
+    borderRadius="full"
+    backgroundColor="secondary.500"
+    position="absolute"
+  />
+)
+
+interface CircleIndicatorProps {
+  onClick: () => void
+  isActiveIndicator: boolean
+}
+
+const CircleIndicator = ({
+  onClick,
+  isActiveIndicator,
+}: CircleIndicatorProps): JSX.Element => {
+  return (
+    <Box
+      width="0.75rem"
+      height="0.75rem"
+      padding="0.125rem"
+      borderRadius="full"
+      backgroundColor="secondary.200"
+      marginRight={isActiveIndicator ? '1.25rem' : '0.25rem'}
+      onClick={onClick}
+      _hover={{ backgroundColor: 'secondary.300' }}
+      _focus={
+        isActiveIndicator
+          ? undefined
+          : {
+              backgroundColor: 'secondary.300',
+              boxShadow: `0 0 0 1px var(--chakra-colors-secondary-400)`,
+            }
+      }
+      backgroundClip="content-box"
+      as="button"
+    />
+  )
+}
+
+interface ProgressIndicatorProps {
+  numIndicators: number
+  currActiveIdx: number
+  onClick: (indicatorIdx: number) => void
+}
+
+export const ProgressIndicator = ({
+  numIndicators,
+  currActiveIdx,
+  onClick,
+}: ProgressIndicatorProps): JSX.Element => {
+  const animationProps = useMemo(() => {
+    return { x: `${currActiveIdx + 0.125}rem` }
+  }, [currActiveIdx])
+
+  return (
+    <Box display="inline-flex" alignSelf="center">
+      {[...Array(numIndicators)].map((_, idx) => (
+        <CircleIndicator
+          key={idx}
+          isActiveIndicator={idx === currActiveIdx}
+          onClick={() => onClick(idx)}
+          aria-label={`Page ${idx + 1} of ${numIndicators}`}
+        />
+      ))}
+
+      <MotionBox
+        // Absolute positioning is required for the active progress indicator to slide over inactive ones
+        pos="absolute"
+        animate={animationProps}
+        transition={{ stiffness: 100 }}
+      >
+        <ActiveIndicator />
+      </MotionBox>
+    </Box>
+  )
+}

packages/frontend/src/components/EditorLayout/AnnouncementModal/assets/Graphic.json

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import {
+  Box,
+  Flex,
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalOverlay,
+} from '@chakra-ui/react'
+import {
+  Button,
+  ModalCloseButton,
+  useIsMobile,
+} from '@opengovsg/design-system-react'
+import { AnimatePresence } from 'framer-motion'
+
+import AnnouncementItem from './AnnouncementItem'
+import { ANNOUNCEMENT_ITEM_LIST } from './AnnouncementItemList'
+import { MotionBox } from './MotionBox'
+import { ProgressIndicator } from './ProgressIndicator'
+
+const ITEMS_LENGTH = ANNOUNCEMENT_ITEM_LIST.length
+export const LOCAL_STORAGE_ANNOUNCEMENT_LAST_OPENED_KEY =
+  'announcement-modal-last-opened'
+
+export const LATEST_ANNOUNCEMENT_MODAL_TIMESTAMP = '2025-05-28'
+
+interface AnnouncementModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function AnnouncementModal(props: AnnouncementModalProps) {
+  const { isOpen, onClose } = props
+  const [currActiveIdx, setCurrActiveIdx] = useState<number>(0)
+  const currAnnouncement = ANNOUNCEMENT_ITEM_LIST[currActiveIdx]
+  const isFirstAnnouncement = currActiveIdx === 0
+  const isLastAnnouncement = currActiveIdx === ITEMS_LENGTH - 1
+  const isMobile = useIsMobile()
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      autoFocus={false}
+      closeOnOverlayClick={false}
+      closeOnEsc={false}
+    >
+      <ModalOverlay />
+      <ModalContent
+        borderRadius="lg"
+        display="flex"
+        flexDirection="column"
+        h="630px"
+      >
+        <ModalCloseButton size="xs" zIndex={1} mr={-4} mt={-2} />
+
+        <Box flexGrow={1} overflow={isMobile ? 'scroll' : 'none'}>
+          <AnimatePresence mode="wait">
+            <MotionBox
+              key={currActiveIdx}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.1 }}
+            >
+              <AnnouncementItem {...currAnnouncement} />
+            </MotionBox>
+          </AnimatePresence>
+        </Box>
+
+        <ModalFooter>
+          <Flex
+            width="100vw"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <ProgressIndicator
+              numIndicators={ITEMS_LENGTH}
+              currActiveIdx={currActiveIdx}
+              onClick={setCurrActiveIdx}
+            />
+            <Flex gap={4}>
+              {!isFirstAnnouncement && (
+                <Button
+                  onClick={() => setCurrActiveIdx(currActiveIdx - 1)}
+                  variant="clear"
+                  colorScheme="secondary"
+                >
+                  Back
+                </Button>
+              )}
+
+              {isLastAnnouncement ? (
+                <Button onClick={onClose}>Experience it now</Button>
+              ) : (
+                <Button onClick={() => setCurrActiveIdx(currActiveIdx + 1)}>
+                  Next
+                </Button>
+              )}
+            </Flex>
+          </Flex>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

packages/frontend/src/components/EditorLayout/AnnouncementModal/assets/redesign-pipe.svg

@@ -35,6 +35,10 @@ import InvalidEditorPage from '@/pages/Editor/components/InvalidEditorPage'
 import { EDITOR_MARGIN_TOP } from '../Editor/constants'
 import UnsavedChangesAlert from '../Editor/UnsavedChangesAlert'
 
+import AnnouncementModal, {
+  LATEST_ANNOUNCEMENT_MODAL_TIMESTAMP,
+  LOCAL_STORAGE_ANNOUNCEMENT_LAST_OPENED_KEY,
+} from './AnnouncementModal'
 import EditorSnackbar from './EditorSnackbar'
 import { LensSurvey } from './LensSurvey'
 
@@ -66,6 +70,22 @@ export default function EditorLayout() {
     setSearchParams(searchParams, { replace: true })
   }, [searchParams, setSearchParams])
 
+  // for loading announcement modal
+  const [localLatestTimestamp, setLocalLatestTimestamp] = useState(
+    localStorage.getItem(LOCAL_STORAGE_ANNOUNCEMENT_LAST_OPENED_KEY),
+  )
+
+  const handleCloseAnnouncementModal = useCallback(() => {
+    localStorage.setItem(
+      LOCAL_STORAGE_ANNOUNCEMENT_LAST_OPENED_KEY,
+      LATEST_ANNOUNCEMENT_MODAL_TIMESTAMP,
+    )
+    setLocalLatestTimestamp(LATEST_ANNOUNCEMENT_MODAL_TIMESTAMP)
+  }, [])
+
+  const shouldOpenAnnouncementModal =
+    localLatestTimestamp !== LATEST_ANNOUNCEMENT_MODAL_TIMESTAMP
+
   // phase 1: add check to prevent user from publishing pipe after submitting request
   const requestedEmail = flow?.pendingTransfer?.newOwner.email ?? ''
   const hasFlowTransfer = requestedEmail !== ''
@@ -292,6 +312,13 @@ export default function EditorLayout() {
         handleUnpublish={() => onFlowStatusUpdate(!flow.active)}
       ></EditorSnackbar>
 
+      {shouldOpenAnnouncementModal && (
+        <AnnouncementModal
+          isOpen={shouldOpenAnnouncementModal}
+          onClose={handleCloseAnnouncementModal}
+        />
+      )}
+
       {shouldOpenDemoModal && (
         <DemoFlowModal
           onClose={handleClose}