From a044b805076b6ad14b44fd7baf7c2d73ba73bddc Mon Sep 17 00:00:00 2001
From: Ken <ken@open.gov.sg>
Date: Sun, 23 Jun 2024 17:28:15 +0800
Subject: [PATCH] add reddot to mrf workflow

---
 .../CreatePageSidebar/CreatePageSidebar.tsx   | 34 +++++++++++++++----
 .../CreatePageSidebar/DrawerTabIcon.tsx       | 31 ++++++++++++-----
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/frontend/src/features/admin-form/create/common/CreatePageSidebar/CreatePageSidebar.tsx b/frontend/src/features/admin-form/create/common/CreatePageSidebar/CreatePageSidebar.tsx
index 01c6e8d080..99a681405b 100644
--- a/frontend/src/features/admin-form/create/common/CreatePageSidebar/CreatePageSidebar.tsx
+++ b/frontend/src/features/admin-form/create/common/CreatePageSidebar/CreatePageSidebar.tsx
@@ -1,8 +1,8 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { BiGitMerge, BiQuestionMark } from 'react-icons/bi'
 import { Divider, Stack } from '@chakra-ui/react'
 
-import { FormResponseMode } from '~shared/types'
+import { FormResponseMode, SeenFlags } from '~shared/types'
 
 import { MultiParty, PhHandsClapping } from '~assets/icons'
 import { BxsDockTop } from '~assets/icons/BxsDockTop'
@@ -17,6 +17,10 @@ import {
   DrawerTabs,
   useCreatePageSidebar,
 } from '~features/admin-form/create/common/CreatePageSidebarContext/CreatePageSidebarContext'
+import { SeenFlagsMapVersion } from '~features/user/constants'
+import { useUserMutations } from '~features/user/mutations'
+import { useUser } from '~features/user/queries'
+import { getShowFeatureFlagLastSeen } from '~features/user/utils'
 
 import {
   isDirtySelector,
@@ -34,6 +38,13 @@ export const CreatePageSidebar = (): JSX.Element | null => {
   const isMobile = useIsMobile()
 
   const { data } = useAdminForm()
+  const { user, isLoading: isUserLoading } = useUser()
+  const { updateLastSeenFlagMutation } = useUserMutations()
+
+  const shouldShowMrfWorkflowReddot = useMemo(() => {
+    if (isUserLoading || !user) return false
+    return getShowFeatureFlagLastSeen(user, SeenFlags.CreateBuilderMrfWorkflow)
+  }, [isUserLoading, user])
 
   const setFieldsToInactive = useFieldBuilderStore(setToInactiveSelector)
   const isDirty = useDirtyFieldStore(isDirtySelector)
@@ -69,10 +80,20 @@ export const CreatePageSidebar = (): JSX.Element | null => {
     [handleEndpageClick, isDirty],
   )
 
-  const handleDrawerWorkflowClick = useCallback(
-    () => handleWorkflowClick(isDirty),
-    [handleWorkflowClick, isDirty],
-  )
+  const handleDrawerWorkflowClick = useCallback(() => {
+    handleWorkflowClick(isDirty)
+    if (shouldShowMrfWorkflowReddot) {
+      updateLastSeenFlagMutation.mutate({
+        flag: SeenFlags.CreateBuilderMrfWorkflow,
+        version: SeenFlagsMapVersion.createBuilderMrfWorkflow,
+      })
+    }
+  }, [
+    handleWorkflowClick,
+    updateLastSeenFlagMutation,
+    shouldShowMrfWorkflowReddot,
+    isDirty,
+  ])
 
   return (
     <Stack
@@ -123,6 +144,7 @@ export const CreatePageSidebar = (): JSX.Element | null => {
               icon={<MultiParty fontSize="1.5rem" />}
               onClick={handleDrawerWorkflowClick}
               isActive={activeTab === DrawerTabs.Workflow}
+              showRedDot={shouldShowMrfWorkflowReddot}
             />
           </>
         )}
diff --git a/frontend/src/features/admin-form/create/common/CreatePageSidebar/DrawerTabIcon.tsx b/frontend/src/features/admin-form/create/common/CreatePageSidebar/DrawerTabIcon.tsx
index 3a02d4153f..9fb300aa90 100644
--- a/frontend/src/features/admin-form/create/common/CreatePageSidebar/DrawerTabIcon.tsx
+++ b/frontend/src/features/admin-form/create/common/CreatePageSidebar/DrawerTabIcon.tsx
@@ -1,3 +1,6 @@
+import { GoPrimitiveDot } from 'react-icons/go'
+import { Box, Icon } from '@chakra-ui/react'
+
 import IconButton from '~components/IconButton'
 import Tooltip from '~components/Tooltip'
 
@@ -7,6 +10,7 @@ interface DrawerTabIconProps {
   label: string
   isActive: boolean
   id?: string
+  showRedDot?: boolean
 }
 
 export const DrawerTabIcon = ({
@@ -15,17 +19,28 @@ export const DrawerTabIcon = ({
   label,
   isActive,
   id,
+  showRedDot,
 }: DrawerTabIconProps): JSX.Element => {
   return (
     <Tooltip label={label} placement="right">
-      <IconButton
-        variant="reverse"
-        aria-label={label}
-        isActive={isActive}
-        icon={icon}
-        onClick={onClick}
-        id={id}
-      />
+      <Box>
+        <IconButton
+          variant="reverse"
+          aria-label={label}
+          isActive={isActive}
+          icon={icon}
+          onClick={onClick}
+          id={id}
+        />
+        {showRedDot ? (
+          <Icon
+            as={GoPrimitiveDot}
+            color="danger.500"
+            position="absolute"
+            ml="-15px"
+          />
+        ) : null}
+      </Box>
     </Tooltip>
   )
 }