diff --git a/packages/backend/src/db/storage/schedule-reminders.ts b/packages/backend/src/db/storage/schedule-reminders.ts index 21282b93f..c91444eba 100644 --- 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 deleted file mode 100644 index e61dfa155..000000000 --- a/packages/frontend/src/components/EmptyFlows/FlowTemplate.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import type { ITemplate } from '@plumber/types' - -import { BiRightArrowAlt } from 'react-icons/bi' -import { useNavigate } from 'react-router-dom' -import { Box, Card, CardBody, CardFooter, Flex, Text } from '@chakra-ui/react' -import { Badge, Button } from '@opengovsg/design-system-react' - -import * as URLS from '@/config/urls' -import { TemplateIcon } from '@/helpers/flow-templates' - -export interface FlowTemplateProps { - template: ITemplate -} - -export default function FlowTemplate(props: FlowTemplateProps) { - const { template } = props - const { id, name, description, iconName, tags } = template - const navigate = useNavigate() - const isDemoTemplate = tags && tags.some((tag) => tag === 'demo') - - return ( - - - - - - - {isDemoTemplate && ( - - Demo - - )} - - - - {name} - {description} - - - - - - - - ) -} diff --git a/packages/frontend/src/components/EmptyFlows/index.tsx b/packages/frontend/src/components/EmptyFlows/index.tsx index 872e7c84e..983e1bbf8 100644 --- 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) => ( - + {emptyFlowsTemplates.map((template, index) => ( + ))} )} diff --git a/packages/frontend/src/components/Layout/NavigationSidebar.tsx b/packages/frontend/src/components/Layout/NavigationSidebar.tsx index 4b5c20337..128ef0c80 100644 --- a/packages/frontend/src/components/Layout/NavigationSidebar.tsx +++ b/packages/frontend/src/components/Layout/NavigationSidebar.tsx @@ -47,7 +47,11 @@ function NavigationSidebarItem({ {text} {link.badge && ( - + {link.badge} )} diff --git a/packages/frontend/src/components/Layout/index.tsx b/packages/frontend/src/components/Layout/index.tsx index 49d6cb60b..35bc4ef55 100644 --- 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 index 8118af96c..2c8676167 100644 --- 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 new file mode 100644 index 000000000..5b9609c82 --- /dev/null +++ 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 ( + ( + + + + )} + badge={ + isDemoTemplate ? ( + + Demo included + + ) : undefined + } + display="flex" + onClick={() => navigate(URLS.TEMPLATE(id))} + > + + {name} + {description} + + + ) +} diff --git a/packages/frontend/src/pages/Templates/index.tsx b/packages/frontend/src/pages/Templates/index.tsx index 05030e65d..20c57cff9 100644 --- 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 ( - ( - - - - )} - badge={ - isDemoTemplate ? ( - - Demo included - - ) : undefined - } - display="flex" - onClick={() => navigate(URLS.TEMPLATE(template.id))} - > - - - {template.name} - - {template.description} - - - ) - })} + {templates?.map((template, index) => ( + + ))} )}