templates: add more changes before release (#761)

Details
- Refactor empty flows page to use the same tile component from
templates page
- Modify schedule reminder template details
- Add new badge to templates sidebar item
- Change whats new date

---------

Co-authored-by: Ian Chen <[email protected]>

packages/backend/src/db/storage/schedule-reminders.ts

@@ -8,7 +8,7 @@ export const SCHEDULE_REMINDERS_TEMPLATE: ITemplate = {
   id: SCHEDULE_REMINDERS_ID,
   name: 'Schedule reminders',
   description:
-    'Schedule a recurring reminder to yourself to complete a task everyday',
+    'Schedule a recurring reminder to yourself to complete a task weekly',
   iconName: 'BiCalendar',
   tags: ['empty'],
   // Steps: scheduler --> postman

packages/frontend/src/components/Layout/NavigationSidebar.tsx

@@ -47,7 +47,11 @@ function NavigationSidebarItem({
         {text}
       </Text>
       {link.badge && (
-        <Badge color="white" display={{ sm: 'none', lg: 'block' }}>
+        <Badge
+          color="white"
+          bg="primary.400"
+          display={{ sm: 'none', lg: 'block' }}
+        >
           {link.badge}
         </Badge>
       )}

packages/frontend/src/components/Layout/index.tsx

@@ -53,6 +53,7 @@ const drawerLinks = [
     text: 'Templates',
     to: URLS.TEMPLATES,
     isBottom: true,
+    badge: 'New',
   },
 ]
 

packages/frontend/src/components/NewsDrawer/NewsItemList.ts

@@ -11,7 +11,7 @@ const IF_THEN_EXTERNAL_LINK =
 
 export const NEWS_ITEM_LIST: NewsItemProps[] = [
   {
-    date: '2024-10-03',
+    date: '2024-10-04',
     tag: NEW_FEATURE_TAG,
     title: 'Save time building workflows with Templates!',
     details: `Each template comes with pre-selected steps and content set up for you. Use them as starting points or to get inspired by what others are creating. We are continuously working on adding more relevant templates to speed up workflow building. If you need a template, put in a request [here](${URLS.TEMPLATES_FORM_LINK})!`,

packages/frontend/src/exports/components.ts

@@ -18,7 +18,6 @@ export { default as EditableTypography } from '../components/EditableTypography'
 export { default as Editor } from '../components/Editor'
 export { default as EditorLayout } from '../components/EditorLayout'
 export { default as EditorSettings } from '../components/EditorSettings'
-export { default as EmptyFlows } from '../components/EmptyFlows'
 export { default as ErrorResult } from '../components/ErrorResult'
 export { default as ExecutionHeader } from '../components/ExecutionHeader'
 export { default as ExecutionRow } from '../components/ExecutionRow'

packages/frontend/src/pages/Flows/components/ApproveTransfersInfobox.tsx

@@ -1,19 +1,24 @@
+import type { IFlowTransfer } from '@plumber/types'
+
 import { BiLoader } from 'react-icons/bi'
 import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@apollo/client'
 import { Flex, Icon, Text } from '@chakra-ui/react'
 import { Button, Infobox } from '@opengovsg/design-system-react'
 
-import * as URLS from '../../../config/urls'
-
-interface ApproveTransfersInfoboxProps {
-  count: number
-}
+import * as URLS from '@/config/urls'
+import { GET_PENDING_FLOW_TRANSFERS } from '@/graphql/queries/get-pending-flow-transfers'
 
-export default function ApproveTransfersInfobox(
-  props: ApproveTransfersInfoboxProps,
-) {
-  const { count } = props
+export default function ApproveTransfersInfobox() {
+  const { data, loading } = useQuery(GET_PENDING_FLOW_TRANSFERS)
+  const flowTransfers: IFlowTransfer[] = data?.getPendingFlowTransfers
+  const count = flowTransfers?.length
   const navigate = useNavigate()
+
+  if (loading || count === 0) {
+    return <></>
+  }
+
   return (
     <Infobox
       icon={<Icon as={BiLoader} color="primary.500" />}

packages/frontend/src/pages/Flows/components/EmptyFlows.tsx

@@ -0,0 +1,69 @@
+import { useNavigate } from 'react-router-dom'
+import { Box, Flex, Hide, Text } from '@chakra-ui/react'
+import { Tile } from '@opengovsg/design-system-react'
+
+import NavigationDrawer from '@/components/Layout/NavigationDrawer'
+import * as URLS from '@/config/urls'
+import { TemplateIcon } from '@/helpers/flow-templates'
+
+export default function EmptyFlows({ onCreate }: { onCreate: () => void }) {
+  const navigate = useNavigate()
+
+  return (
+    <Flex
+      maxW="600px"
+      margin="auto"
+      rowGap={4}
+      flexDir="column"
+      pt={{ base: '0', md: '10vh' }}
+    >
+      <Flex maxW="400px">
+        <Hide above="sm">
+          <Box mt={-1.5}>
+            <NavigationDrawer />
+          </Box>
+        </Hide>
+        <Text textStyle="h3">How do you want to create your pipe?</Text>
+      </Flex>
+
+      <Flex gap={4} flexDir={{ base: 'column', md: 'row' }}>
+        <Tile
+          icon={() => (
+            <Box py={2}>
+              <TemplateIcon iconName="BiBookOpen" fontSize="2rem" />
+            </Box>
+          )}
+          display="flex"
+          flex="1"
+          onClick={() => navigate(URLS.TEMPLATES)}
+        >
+          <Flex flexDir="column" gap={2} mt={2}>
+            <Text textStyle="subhead-1">Use a template</Text>
+            <Text textStyle="body-2">
+              Select from pre-built workflows that you can use as-is or
+              customize further for your own use case
+            </Text>
+          </Flex>
+        </Tile>
+
+        <Tile
+          icon={() => (
+            <Box py={2}>
+              <TemplateIcon iconName="BiPlus" fontSize="2rem" />
+            </Box>
+          )}
+          display="flex"
+          flex="1"
+          onClick={onCreate}
+        >
+          <Flex flexDir="column" gap={2} mt={2}>
+            <Text textStyle="subhead-1">Start from scratch</Text>
+            <Text textStyle="body-2">
+              Use our workflow builder to create your own workflow
+            </Text>
+          </Flex>
+        </Tile>
+      </Flex>
+    </Flex>
+  )
+}