feat: dashboard add email-template page

2022-07-30 16:05:35 +05:30 · 2022-07-30 16:05:35 +05:30 · f2fb800323
commit f2fb800323
parent db4d711cba
10 changed files with 741 additions and 23 deletions
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@ -2529,8 +2529,7 @@
 		"@chakra-ui/css-reset": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@chakra-ui/css-reset/-/css-reset-1.1.1.tgz",
-			"integrity": "sha512-+KNNHL4OWqeKia5SL858K3Qbd8WxMij9mWIilBzLD4j2KFrl/+aWFw8syMKth3NmgIibrjsljo+PU3fy2o50dg==",
-			"requires": {}
+			"integrity": "sha512-+KNNHL4OWqeKia5SL858K3Qbd8WxMij9mWIilBzLD4j2KFrl/+aWFw8syMKth3NmgIibrjsljo+PU3fy2o50dg=="
 		},
 		"@chakra-ui/descendant": {
 			"version": "2.1.1",
@ -3134,8 +3133,7 @@
 		"@graphql-typed-document-node/core": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.1.tgz",
-			"integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==",
-			"requires": {}
+			"integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg=="
 		},
 		"@popperjs/core": {
 			"version": "2.11.0",
@ -3845,8 +3843,7 @@
 		"react-icons": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
-			"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
-			"requires": {}
+			"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
 		},
 		"react-is": {
 			"version": "16.13.1",
@ -4032,8 +4029,7 @@
 		"use-callback-ref": {
 			"version": "1.2.5",
 			"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-			"integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
-			"requires": {}
+			"integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
 		},
 		"use-sidecar": {
 			"version": "1.0.5",
--- a/dashboard/src/components/Menu.tsx
+++ b/dashboard/src/components/Menu.tsx
@ -31,6 +31,7 @@ import {
 	FiUsers,
 	FiChevronDown,
 	FiLink,
+	FiFileText,
 } from 'react-icons/fi';
 import { BiCustomize } from 'react-icons/bi';
 import { AiOutlineKey } from 'react-icons/ai';
@ -113,6 +114,7 @@ const LinkItems: Array<LinkItemProps> = [
 	},
 	{ name: 'Users', icon: FiUsers, route: '/users' },
 	{ name: 'Webhooks', icon: FiLink, route: '/webhooks' },
+	{ name: 'Email Templates', icon: FiFileText, route: '/email-templates' },
 ];

 interface SidebarProps extends BoxProps {
--- a/dashboard/src/components/UpdateEmailTemplateModal.tsx
+++ b/dashboard/src/components/UpdateEmailTemplateModal.tsx
@ -0,0 +1,327 @@
+import React, { useEffect, useState } from 'react';
+import {
+	Button,
+	Center,
+	Flex,
+	Input,
+	InputGroup,
+	MenuItem,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	Select,
+	useDisclosure,
+	useToast,
+} from '@chakra-ui/react';
+import { FaPlus } from 'react-icons/fa';
+import { useClient } from 'urql';
+import {
+	UpdateModalViews,
+	EmailTemplateInputDataFields,
+	emailTemplateEventNames,
+} from '../constants';
+import { capitalizeFirstLetter } from '../utils';
+import { AddEmailTemplate, EditEmailTemplate } from '../graphql/mutation';
+
+interface selectedEmailTemplateDataTypes {
+	[EmailTemplateInputDataFields.ID]: string;
+	[EmailTemplateInputDataFields.EVENT_NAME]: string;
+	[EmailTemplateInputDataFields.SUBJECT]: string;
+	[EmailTemplateInputDataFields.CREATED_AT]: number;
+	[EmailTemplateInputDataFields.TEMPLATE]: string;
+}
+
+interface UpdateEmailTemplateInputPropTypes {
+	view: UpdateModalViews;
+	selectedTemplate?: selectedEmailTemplateDataTypes;
+	fetchEmailTemplatesData: Function;
+}
+
+interface emailTemplateDataType {
+	[EmailTemplateInputDataFields.EVENT_NAME]: string;
+	[EmailTemplateInputDataFields.SUBJECT]: string;
+	[EmailTemplateInputDataFields.TEMPLATE]: string;
+}
+
+interface validatorDataType {
+	[EmailTemplateInputDataFields.SUBJECT]: boolean;
+	[EmailTemplateInputDataFields.TEMPLATE]: boolean;
+}
+
+const initTemplateData: emailTemplateDataType = {
+	[EmailTemplateInputDataFields.EVENT_NAME]:
+		emailTemplateEventNames.BASIC_AUTH_SIGNUP,
+	[EmailTemplateInputDataFields.SUBJECT]: '',
+	[EmailTemplateInputDataFields.TEMPLATE]: '',
+};
+
+const initTemplateValidatorData: validatorDataType = {
+	[EmailTemplateInputDataFields.SUBJECT]: true,
+	[EmailTemplateInputDataFields.TEMPLATE]: true,
+};
+
+const UpdateEmailTemplate = ({
+	view,
+	selectedTemplate,
+	fetchEmailTemplatesData,
+}: UpdateEmailTemplateInputPropTypes) => {
+	const client = useClient();
+	const toast = useToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [loading, setLoading] = useState<boolean>(false);
+	const [templateData, setTemplateData] = useState<emailTemplateDataType>({
+		...initTemplateData,
+	});
+	const [validator, setValidator] = useState<validatorDataType>({
+		...initTemplateValidatorData,
+	});
+	const inputChangehandler = (inputType: string, value: any) => {
+		if (inputType !== EmailTemplateInputDataFields.EVENT_NAME) {
+			setValidator({
+				...validator,
+				[inputType]: value?.trim().length,
+			});
+		}
+		setTemplateData({ ...templateData, [inputType]: value });
+	};
+
+	const validateData = () => {
+		return (
+			!loading &&
+			templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 &&
+			templateData[EmailTemplateInputDataFields.TEMPLATE].length > 0 &&
+			templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 &&
+			validator[EmailTemplateInputDataFields.TEMPLATE] &&
+			validator[EmailTemplateInputDataFields.SUBJECT]
+		);
+	};
+
+	const saveData = async () => {
+		if (!validateData()) return;
+		setLoading(true);
+		const params = {
+			[EmailTemplateInputDataFields.EVENT_NAME]:
+				templateData[EmailTemplateInputDataFields.EVENT_NAME],
+			[EmailTemplateInputDataFields.SUBJECT]:
+				templateData[EmailTemplateInputDataFields.SUBJECT],
+			[EmailTemplateInputDataFields.TEMPLATE]:
+				templateData[EmailTemplateInputDataFields.TEMPLATE],
+		};
+		let res: any = {};
+		if (
+			view === UpdateModalViews.Edit &&
+			selectedTemplate?.[EmailTemplateInputDataFields.ID]
+		) {
+			res = await client
+				.mutation(EditEmailTemplate, {
+					params: {
+						...params,
+						id: selectedTemplate[EmailTemplateInputDataFields.ID],
+					},
+				})
+				.toPromise();
+		} else {
+			res = await client.mutation(AddEmailTemplate, { params }).toPromise();
+		}
+		setLoading(false);
+		if (res.error) {
+			toast({
+				title: capitalizeFirstLetter(res.error.message),
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+		} else if (
+			res.data?._add_email_template ||
+			res.data?._update_email_template
+		) {
+			toast({
+				title: capitalizeFirstLetter(
+					res.data?._add_email_template?.message ||
+						res.data?._update_email_template?.message
+				),
+				isClosable: true,
+				status: 'success',
+				position: 'bottom-right',
+			});
+			setTemplateData({
+				...initTemplateData,
+			});
+			setValidator({ ...initTemplateValidatorData });
+			fetchEmailTemplatesData();
+		}
+		view === UpdateModalViews.ADD && onClose();
+	};
+	const resetData = () => {
+		if (selectedTemplate) {
+			setTemplateData(selectedTemplate);
+		} else {
+			setTemplateData({ ...initTemplateData });
+		}
+	};
+	useEffect(() => {
+		if (
+			isOpen &&
+			view === UpdateModalViews.Edit &&
+			selectedTemplate &&
+			Object.keys(selectedTemplate || {}).length
+		) {
+			const { id, created_at, ...rest } = selectedTemplate;
+			setTemplateData(rest);
+		}
+	}, [isOpen]);
+	return (
+		<>
+			{view === UpdateModalViews.ADD ? (
+				<Button
+					leftIcon={<FaPlus />}
+					colorScheme="blue"
+					variant="solid"
+					onClick={onOpen}
+					isDisabled={false}
+					size="sm"
+				>
+					<Center h="100%">Add Template</Center>{' '}
+				</Button>
+			) : (
+				<MenuItem onClick={onOpen}>Edit</MenuItem>
+			)}
+			<Modal isOpen={isOpen} onClose={onClose} size="3xl">
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>
+						{view === UpdateModalViews.ADD
+							? 'Add New Email Template'
+							: 'Edit Email Template'}
+					</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Flex
+							flexDirection="column"
+							border="1px"
+							borderRadius="md"
+							borderColor="gray.200"
+							p="5"
+						>
+							<Flex
+								width="100%"
+								justifyContent="space-between"
+								alignItems="center"
+								marginBottom="2%"
+							>
+								<Flex flex="1">Event Name</Flex>
+								<Flex flex="3">
+									<Select
+										size="md"
+										value={
+											templateData[EmailTemplateInputDataFields.EVENT_NAME]
+										}
+										onChange={(e) =>
+											inputChangehandler(
+												EmailTemplateInputDataFields.EVENT_NAME,
+												e.currentTarget.value
+											)
+										}
+									>
+										{Object.entries(emailTemplateEventNames).map(
+											([key, value]: any) => (
+												<option value={value} key={key}>
+													{key}
+												</option>
+											)
+										)}
+									</Select>
+								</Flex>
+							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="start"
+								alignItems="center"
+								marginBottom="5%"
+							>
+								<Flex flex="1">Subject</Flex>
+								<Flex flex="3">
+									<InputGroup size="md">
+										<Input
+											pr="4.5rem"
+											type="text"
+											placeholder="Subject Line"
+											value={templateData[EmailTemplateInputDataFields.SUBJECT]}
+											isInvalid={
+												!validator[EmailTemplateInputDataFields.SUBJECT]
+											}
+											onChange={(e) =>
+												inputChangehandler(
+													EmailTemplateInputDataFields.SUBJECT,
+													e.currentTarget.value
+												)
+											}
+										/>
+									</InputGroup>
+								</Flex>
+							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="flex-start"
+								alignItems="center"
+								marginBottom="2%"
+							>
+								<Flex>Template Body</Flex>
+							</Flex>
+							<Flex flexDirection="column" maxH={220} overflowY="scroll">
+								<Flex>
+									<InputGroup size="md">
+										<Input
+											pr="4.5rem"
+											type="text"
+											placeholder="Subject Line"
+											value={
+												templateData[EmailTemplateInputDataFields.TEMPLATE]
+											}
+											isInvalid={
+												!validator[EmailTemplateInputDataFields.TEMPLATE]
+											}
+											onChange={(e) =>
+												inputChangehandler(
+													EmailTemplateInputDataFields.TEMPLATE,
+													e.currentTarget.value
+												)
+											}
+										/>
+									</InputGroup>
+								</Flex>
+							</Flex>
+						</Flex>
+					</ModalBody>
+					<ModalFooter>
+						<Button
+							variant="outline"
+							onClick={resetData}
+							isDisabled={loading}
+							marginRight="5"
+						>
+							Reset
+						</Button>
+						<Button
+							colorScheme="blue"
+							variant="solid"
+							isLoading={loading}
+							onClick={saveData}
+							isDisabled={!validateData()}
+						>
+							<Center h="100%" pt="5%">
+								Save
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default UpdateEmailTemplate;
--- a/dashboard/src/components/UpdateWebhookModal.tsx
+++ b/dashboard/src/components/UpdateWebhookModal.tsx
@ -27,12 +27,11 @@ import {
 	ArrayInputOperations,
 	WebhookInputDataFields,
 	WebhookInputHeaderFields,
-	UpdateWebhookModalViews,
+	UpdateModalViews,
 	webhookVerifiedStatus,
 } from '../constants';
 import { capitalizeFirstLetter, validateURI } from '../utils';
 import { AddWebhook, EditWebhook, TestEndpoint } from '../graphql/mutation';
-import { rest } from 'lodash';
 import { BiCheckCircle, BiError, BiErrorCircle } from 'react-icons/bi';

 interface headersDataType {
@ -54,7 +53,7 @@ interface selecetdWebhookDataTypes {
 }

 interface UpdateWebhookModalInputPropTypes {
-	view: UpdateWebhookModalViews;
+	view: UpdateModalViews;
 	selectedWebhook?: selecetdWebhookDataTypes;
 	fetchWebookData: Function;
 }
@ -254,7 +253,7 @@ const UpdateWebhookModal = ({
 		const params = getParams();
 		let res: any = {};
 		if (
-			view === UpdateWebhookModalViews.Edit &&
+			view === UpdateModalViews.Edit &&
 			selectedWebhook?.[WebhookInputDataFields.ID]
 		) {
 			res = await client
@ -292,12 +291,12 @@ const UpdateWebhookModal = ({
 			setValidator({ ...initWebhookValidatorData });
 			fetchWebookData();
 		}
-		view === UpdateWebhookModalViews.ADD && onClose();
+		view === UpdateModalViews.ADD && onClose();
 	};
 	useEffect(() => {
 		if (
 			isOpen &&
-			view === UpdateWebhookModalViews.Edit &&
+			view === UpdateModalViews.Edit &&
 			selectedWebhook &&
 			Object.keys(selectedWebhook || {}).length
 		) {
@ -347,7 +346,7 @@ const UpdateWebhookModal = ({
 	};
 	return (
 		<>
-			{view === UpdateWebhookModalViews.ADD ? (
+			{view === UpdateModalViews.ADD ? (
 				<Button
 					leftIcon={<FaPlus />}
 					colorScheme="blue"
@ -365,9 +364,7 @@ const UpdateWebhookModal = ({
 				<ModalOverlay />
 				<ModalContent>
 					<ModalHeader>
-						{view === UpdateWebhookModalViews.ADD
-							? 'Add New Webhook'
-							: 'Edit Webhook'}
+						{view === UpdateModalViews.ADD ? 'Add New Webhook' : 'Edit Webhook'}
 					</ModalHeader>
 					<ModalCloseButton />
 					<ModalBody>
--- a/dashboard/src/constants.ts
+++ b/dashboard/src/constants.ts
@ -162,12 +162,20 @@ export enum WebhookInputDataFields {
 	HEADERS = 'headers',
 }

+export enum EmailTemplateInputDataFields {
+	ID = 'id',
+	EVENT_NAME = 'event_name',
+	SUBJECT = 'subject',
+	CREATED_AT = 'created_at',
+	TEMPLATE = 'template',
+}
+
 export enum WebhookInputHeaderFields {
 	KEY = 'key',
 	VALUE = 'value',
 }

-export enum UpdateWebhookModalViews {
+export enum UpdateModalViews {
 	ADD = 'add',
 	Edit = 'edit',
 }
@ -183,6 +191,14 @@ export const webhookEventNames = {
 	USER_ACCESS_REVOKED: 'user.access_revoked',
 };

+export const emailTemplateEventNames = {
+	BASIC_AUTH_SIGNUP: 'basic_auth_signup',
+	MAGIC_LINK_LOGIN: 'magic_link_login',
+	UPDATE_EMAIL: 'update_email',
+	FORGOT_PASSWORD: 'forgot_password',
+	VERIFY_OTP: 'verify_otp',
+};
+
 export enum webhookVerifiedStatus {
 	VERIFIED = 'verified',
 	NOT_VERIFIED = 'not_verified',
--- a/dashboard/src/graphql/mutation/index.ts
+++ b/dashboard/src/graphql/mutation/index.ts
@ -112,3 +112,27 @@ export const TestEndpoint = `
    }
  }
 `;
+
+export const AddEmailTemplate = `
+  mutation addEmailTemplate($params: AddEmailTemplateRequest!) {
+    _add_email_template(params: $params) {
+      message
+    }
+  }
+`;
+
+export const EditEmailTemplate = `
+  mutation editEmailTemplate($params: UpdateEmailTemplateRequest!) {
+    _update_email_template(params: $params) {
+      message
+    }
+  }
+`;
+
+export const DeleteEmailTemplate = `
+  mutation deleteEmailTemplate($params: DeleteEmailTemplateRequest!) {
+    _delete_email_template(params: $params) {
+      message
+    }
+  }
+`;
--- a/dashboard/src/graphql/queries/index.ts
+++ b/dashboard/src/graphql/queries/index.ts
@ -122,6 +122,26 @@ export const WebhooksDataQuery = `
  }
 `;

+export const EmailTemplatesQuery = `
+  query getEmailTemplates($params: PaginatedInput!) {
+    _email_templates(params: $params) {
+      EmailTemplates {
+        id
+        event_name
+        subject
+        created_at
+        template
+      }
+      pagination {
+        limit
+        page
+        offset
+        total
+      }
+    }
+  }
+`;
+
 export const WebhookLogsQuery = `
  query getWebhookLogs($params: ListWebhookLogRequest!) {
    _webhook_logs(params: $params) {
--- a/dashboard/src/pages/EmailTemplates.tsx
+++ b/dashboard/src/pages/EmailTemplates.tsx
@ -0,0 +1,335 @@
+import React, { useEffect, useState } from 'react';
+import { useClient } from 'urql';
+import {
+	Box,
+	Button,
+	Center,
+	Flex,
+	IconButton,
+	Menu,
+	MenuButton,
+	MenuList,
+	NumberDecrementStepper,
+	NumberIncrementStepper,
+	NumberInput,
+	NumberInputField,
+	NumberInputStepper,
+	Select,
+	Spinner,
+	Table,
+	TableCaption,
+	Tbody,
+	Td,
+	Text,
+	Th,
+	Thead,
+	Tooltip,
+	Tr,
+} from '@chakra-ui/react';
+import {
+	FaAngleDoubleLeft,
+	FaAngleDoubleRight,
+	FaAngleDown,
+	FaAngleLeft,
+	FaAngleRight,
+	FaExclamationCircle,
+} from 'react-icons/fa';
+import UpdateEmailTemplateModal from '../components/UpdateEmailTemplateModal';
+import {
+	pageLimits,
+	UpdateModalViews,
+	EmailTemplateInputDataFields,
+} from '../constants';
+import { EmailTemplatesQuery, WebhooksDataQuery } from '../graphql/queries';
+import dayjs from 'dayjs';
+
+interface paginationPropTypes {
+	limit: number;
+	page: number;
+	offset: number;
+	total: number;
+	maxPages: number;
+}
+
+interface EmailTemplateDataType {
+	[EmailTemplateInputDataFields.ID]: string;
+	[EmailTemplateInputDataFields.EVENT_NAME]: string;
+	[EmailTemplateInputDataFields.SUBJECT]: string;
+	[EmailTemplateInputDataFields.CREATED_AT]: number;
+	[EmailTemplateInputDataFields.TEMPLATE]: string;
+}
+
+const EmailTemplates = () => {
+	const client = useClient();
+	const [loading, setLoading] = useState<boolean>(false);
+	const [emailTemplatesData, setEmailTemplatesData] = useState<
+		EmailTemplateDataType[]
+	>([]);
+	const [paginationProps, setPaginationProps] = useState<paginationPropTypes>({
+		limit: 5,
+		page: 1,
+		offset: 0,
+		total: 0,
+		maxPages: 1,
+	});
+	const getMaxPages = (pagination: paginationPropTypes) => {
+		const { limit, total } = pagination;
+		if (total > 1) {
+			return total % limit === 0
+				? total / limit
+				: parseInt(`${total / limit}`) + 1;
+		} else return 1;
+	};
+	const fetchEmailTemplatesData = async () => {
+		setLoading(true);
+		const res = await client
+			.query(EmailTemplatesQuery, {
+				params: {
+					pagination: {
+						limit: paginationProps.limit,
+						page: paginationProps.page,
+					},
+				},
+			})
+			.toPromise();
+		if (res.data?._email_templates) {
+			const { pagination, EmailTemplates: emailTemplates } =
+				res.data?._email_templates;
+			const maxPages = getMaxPages(pagination);
+			if (emailTemplates?.length) {
+				setEmailTemplatesData(emailTemplates);
+				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
+			} else {
+				if (paginationProps.page !== 1) {
+					setPaginationProps({
+						...paginationProps,
+						...pagination,
+						maxPages,
+						page: 1,
+					});
+				}
+			}
+		}
+		setLoading(false);
+	};
+	const paginationHandler = (value: Record<string, number>) => {
+		setPaginationProps({ ...paginationProps, ...value });
+	};
+	useEffect(() => {
+		fetchEmailTemplatesData();
+	}, [paginationProps.page, paginationProps.limit]);
+	return (
+		<Box m="5" py="5" px="10" bg="white" rounded="md">
+			<Flex margin="2% 0" justifyContent="space-between" alignItems="center">
+				<Text fontSize="md" fontWeight="bold">
+					Email Templates
+				</Text>
+				<UpdateEmailTemplateModal
+					view={UpdateModalViews.ADD}
+					fetchEmailTemplatesData={fetchEmailTemplatesData}
+				/>
+			</Flex>
+			{!loading ? (
+				emailTemplatesData.length ? (
+					<Table variant="simple">
+						<Thead>
+							<Tr>
+								<Th>Event Name</Th>
+								<Th>Subject</Th>
+								<Th>Created At</Th>
+								<Th>Actions</Th>
+							</Tr>
+						</Thead>
+						<Tbody>
+							{emailTemplatesData.map((templateData: EmailTemplateDataType) => (
+								<Tr
+									key={templateData[EmailTemplateInputDataFields.ID]}
+									style={{ fontSize: 14 }}
+								>
+									<Td maxW="300">
+										{templateData[EmailTemplateInputDataFields.EVENT_NAME]}
+									</Td>
+									<Td>{templateData[EmailTemplateInputDataFields.SUBJECT]}</Td>
+									<Td>
+										{dayjs(templateData.created_at * 1000).format(
+											'MMM DD, YYYY'
+										)}
+									</Td>
+									<Td>
+										<Menu>
+											<MenuButton as={Button} variant="unstyled" size="sm">
+												<Flex
+													justifyContent="space-between"
+													alignItems="center"
+												>
+													<Text fontSize="sm" fontWeight="light">
+														Menu
+													</Text>
+													<FaAngleDown style={{ marginLeft: 10 }} />
+												</Flex>
+											</MenuButton>
+											<MenuList>
+												<UpdateEmailTemplateModal
+													view={UpdateModalViews.Edit}
+													selectedTemplate={templateData}
+													fetchEmailTemplatesData={fetchEmailTemplatesData}
+												/>
+											</MenuList>
+										</Menu>
+									</Td>
+								</Tr>
+							))}
+						</Tbody>
+						{(paginationProps.maxPages > 1 || paginationProps.total >= 5) && (
+							<TableCaption>
+								<Flex
+									justifyContent="space-between"
+									alignItems="center"
+									m="2% 0"
+								>
+									<Flex flex="1">
+										<Tooltip label="First Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: 1,
+													})
+												}
+												isDisabled={paginationProps.page <= 1}
+												mr={4}
+												icon={<FaAngleDoubleLeft />}
+											/>
+										</Tooltip>
+										<Tooltip label="Previous Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.page - 1,
+													})
+												}
+												isDisabled={paginationProps.page <= 1}
+												icon={<FaAngleLeft />}
+											/>
+										</Tooltip>
+									</Flex>
+									<Flex
+										flex="8"
+										justifyContent="space-evenly"
+										alignItems="center"
+									>
+										<Text mr={8}>
+											Page{' '}
+											<Text fontWeight="bold" as="span">
+												{paginationProps.page}
+											</Text>{' '}
+											of{' '}
+											<Text fontWeight="bold" as="span">
+												{paginationProps.maxPages}
+											</Text>
+										</Text>
+										<Flex alignItems="center">
+											<Text flexShrink="0">Go to page:</Text>{' '}
+											<NumberInput
+												ml={2}
+												mr={8}
+												w={28}
+												min={1}
+												max={paginationProps.maxPages}
+												onChange={(value) =>
+													paginationHandler({
+														page: parseInt(value),
+													})
+												}
+												value={paginationProps.page}
+											>
+												<NumberInputField />
+												<NumberInputStepper>
+													<NumberIncrementStepper />
+													<NumberDecrementStepper />
+												</NumberInputStepper>
+											</NumberInput>
+										</Flex>
+										<Select
+											w={32}
+											value={paginationProps.limit}
+											onChange={(e) =>
+												paginationHandler({
+													page: 1,
+													limit: parseInt(e.target.value),
+												})
+											}
+										>
+											{pageLimits.map((pageSize) => (
+												<option key={pageSize} value={pageSize}>
+													Show {pageSize}
+												</option>
+											))}
+										</Select>
+									</Flex>
+									<Flex flex="1">
+										<Tooltip label="Next Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.page + 1,
+													})
+												}
+												isDisabled={
+													paginationProps.page >= paginationProps.maxPages
+												}
+												icon={<FaAngleRight />}
+											/>
+										</Tooltip>
+										<Tooltip label="Last Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.maxPages,
+													})
+												}
+												isDisabled={
+													paginationProps.page >= paginationProps.maxPages
+												}
+												ml={4}
+												icon={<FaAngleDoubleRight />}
+											/>
+										</Tooltip>
+									</Flex>
+								</Flex>
+							</TableCaption>
+						)}
+					</Table>
+				) : (
+					<Flex
+						flexDirection="column"
+						minH="25vh"
+						justifyContent="center"
+						alignItems="center"
+					>
+						<Center w="50px" marginRight="1.5%">
+							<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
+						</Center>
+						<Text
+							fontSize="2xl"
+							paddingRight="1%"
+							fontWeight="bold"
+							color="#d9d9d9"
+						>
+							No Data
+						</Text>
+					</Flex>
+				)
+			) : (
+				<Center minH="25vh">
+					<Spinner />
+				</Center>
+			)}
+		</Box>
+	);
+};
+
+export default EmailTemplates;
--- a/dashboard/src/pages/Webhooks.tsx
+++ b/dashboard/src/pages/Webhooks.tsx
@ -8,7 +8,6 @@ import {
 	IconButton,
 	Menu,
 	MenuButton,
-	MenuItem,
 	MenuList,
 	NumberDecrementStepper,
 	NumberIncrementStepper,
@ -40,7 +39,7 @@ import UpdateWebhookModal from '../components/UpdateWebhookModal';
 import {
 	pageLimits,
 	WebhookInputDataFields,
-	UpdateWebhookModalViews,
+	UpdateModalViews,
 } from '../constants';
 import { WebhooksDataQuery } from '../graphql/queries';
 import DeleteWebhookModal from '../components/DeleteWebhookModal';
@ -125,7 +124,7 @@ const Webhooks = () => {
 					Webhooks
 				</Text>
 				<UpdateWebhookModal
-					view={UpdateWebhookModalViews.ADD}
+					view={UpdateModalViews.ADD}
 					fetchWebookData={fetchWebookData}
 				/>
 			</Flex>
@ -196,7 +195,7 @@ const Webhooks = () => {
 											</MenuButton>
 											<MenuList>
 												<UpdateWebhookModal
-													view={UpdateWebhookModalViews.Edit}
+													view={UpdateModalViews.Edit}
 													selectedWebhook={webhook}
 													fetchWebookData={fetchWebookData}
 												/>
--- a/dashboard/src/routes/index.tsx
+++ b/dashboard/src/routes/index.tsx
@ -3,6 +3,7 @@ import { Outlet, Route, Routes } from 'react-router-dom';

 import { useAuthContext } from '../contexts/AuthContext';
 import { DashboardLayout } from '../layouts/DashboardLayout';
+import EmailTemplates from '../pages/EmailTemplates';

 const Auth = lazy(() => import('../pages/Auth'));
 const Environment = lazy(() => import('../pages/Environment'));
@ -31,6 +32,7 @@ export const AppRoutes = () => {
 							</Route>
 							<Route path="users" element={<Users />} />
 							<Route path="webhooks" element={<Webhooks />} />
+							<Route path="email-templates" element={<EmailTemplates />} />
 							<Route path="*" element={<Home />} />
 						</Route>
 					</Routes>