add more changes before release

opengovsg · Oct 4, 2024 · 4ffb843 · 4ffb843
1 parent cace44c
commit 4ffb843
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 98 deletions.
diff --git a/packages/backend/src/db/storage/schedule-reminders.ts b/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

diff --git a/packages/frontend/src/components/EmptyFlows/FlowTemplate.tsx b/packages/frontend/src/components/EmptyFlows/FlowTemplate.tsx
diff --git a/packages/frontend/src/components/EmptyFlows/index.tsx b/packages/frontend/src/components/EmptyFlows/index.tsx
@@ -20,8 +20,7 @@ import ApproveTransfersInfobox from '@/pages/Flows/components/ApproveTransfersIn
 import CreateFlowModal from '@/pages/Flows/components/CreateFlowModal'
 
 import PrimarySpinner from '../PrimarySpinner'
-
-import FlowTemplate from './FlowTemplate'
+import TemplateTile from '../TemplateTile'
 
 interface EmptyFlowsProps {
   count?: number
@@ -79,8 +78,8 @@ export default function EmptyFlows(props: EmptyFlowsProps) {
             rowGap={6}
             mt={4}
           >
-            {emptyFlowsTemplates.map((template) => (
-              <FlowTemplate key={template.id} template={template} />
+            {emptyFlowsTemplates.map((template, index) => (
+              <TemplateTile key={index} template={template} />
             ))}
           </Grid>
         )}

diff --git a/packages/frontend/src/components/Layout/NavigationSidebar.tsx b/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>
       )}

diff --git a/packages/frontend/src/components/Layout/index.tsx b/packages/frontend/src/components/Layout/index.tsx
@@ -53,6 +53,7 @@ const drawerLinks = [
     text: 'Templates',
     to: URLS.TEMPLATES,
     isBottom: true,
+    badge: 'New',
   },
 ]
 

diff --git a/packages/frontend/src/components/NewsDrawer/NewsItemList.ts b/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})!`,

diff --git a/packages/frontend/src/components/TemplateTile/index.tsx b/packages/frontend/src/components/TemplateTile/index.tsx
@@ -0,0 +1,43 @@
+import type { ITemplate } from '@plumber/types'
+
+import { useNavigate } from 'react-router-dom'
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { Badge, Tile } from '@opengovsg/design-system-react'
+
+import * as URLS from '@/config/urls'
+import { TemplateIcon } from '@/helpers/flow-templates'
+
+interface TemplateTileProps {
+  template: ITemplate
+}
+
+export default function TemplateTile({ template }: TemplateTileProps) {
+  const { id, name, description, iconName, tags } = template
+  const navigate = useNavigate()
+
+  const isDemoTemplate = tags?.some((tag) => tag === 'demo')
+
+  return (
+    <Tile
+      icon={() => (
+        <Box py={2}>
+          <TemplateIcon iconName={iconName} fontSize="2rem" />
+        </Box>
+      )}
+      badge={
+        isDemoTemplate ? (
+          <Badge bg="primary.100" color="primary.500">
+            Demo included
+          </Badge>
+        ) : undefined
+      }
+      display="flex"
+      onClick={() => navigate(URLS.TEMPLATE(id))}
+    >
+      <Flex flexDir="column" gap={2} mt={2}>
+        <Text textStyle="subhead-1">{name}</Text>
+        <Text textStyle="body-2">{description}</Text>
+      </Flex>
+    </Tile>
+  )
+}
diff --git a/packages/frontend/src/pages/Templates/index.tsx b/packages/frontend/src/pages/Templates/index.tsx
@@ -1,23 +1,22 @@
 import { ITemplate } from '@plumber/types'
 
-import { useNavigate, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import { useQuery } from '@apollo/client'
-import { Box, Center, Flex, Grid, Text } from '@chakra-ui/react'
-import { Badge, Link, Tile } from '@opengovsg/design-system-react'
+import { Center, Flex, Grid, Text } from '@chakra-ui/react'
+import { Link } from '@opengovsg/design-system-react'
 
 import Container from '@/components/Container'
 import PageTitle from '@/components/PageTitle'
 import PrimarySpinner from '@/components/PrimarySpinner'
+import TemplateTile from '@/components/TemplateTile'
 import * as URLS from '@/config/urls'
 import { GET_TEMPLATES } from '@/graphql/queries/get-templates'
-import { TemplateIcon } from '@/helpers/flow-templates'
 
 import TemplateModal from '../Template'
 
 const TEMPLATES_TITLE = 'Templates'
 
 export default function Templates(): JSX.Element {
-  const navigate = useNavigate()
   const { data, loading } = useQuery(GET_TEMPLATES)
 
   const templates: ITemplate[] = data?.getTemplates
@@ -53,40 +52,9 @@ export default function Templates(): JSX.Element {
             rowGap={6}
             mb={8}
           >
-            {templates?.map((template, index) => {
-              const isDemoTemplate = template.tags?.some(
-                (tag) => tag === 'demo',
-              )
-              return (
-                <Tile
-                  key={index}
-                  icon={() => (
-                    <Box py={2}>
-                      <TemplateIcon
-                        iconName={template.iconName}
-                        fontSize="2rem"
-                      />
-                    </Box>
-                  )}
-                  badge={
-                    isDemoTemplate ? (
-                      <Badge bg="primary.100" color="primary.500">
-                        Demo included
-                      </Badge>
-                    ) : undefined
-                  }
-                  display="flex"
-                  onClick={() => navigate(URLS.TEMPLATE(template.id))}
-                >
-                  <Flex flexDir="column" gap={2} mt={2}>
-                    <Flex gap={2}>
-                      <Text textStyle="subhead-1">{template.name}</Text>
-                    </Flex>
-                    <Text textStyle="body-2">{template.description}</Text>
-                  </Flex>
-                </Tile>
-              )
-            })}
+            {templates?.map((template, index) => (
+              <TemplateTile key={index} template={template} />
+            ))}
           </Grid>
         )}