feat: add plain html email template editor
This commit is contained in:
anik-ghosh-au7
@@ -1,457 +1,565 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Center,
|
||||
Flex,
|
||||
Input,
|
||||
InputGroup,
|
||||
MenuItem,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Select,
|
||||
Text,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
Collapse,
|
||||
Box,
|
||||
TableContainer,
|
||||
Table,
|
||||
Thead,
|
||||
Tr,
|
||||
Th,
|
||||
Tbody,
|
||||
Td,
|
||||
Code,
|
||||
Button,
|
||||
Center,
|
||||
Flex,
|
||||
Input,
|
||||
InputGroup,
|
||||
MenuItem,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Select,
|
||||
Text,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
Collapse,
|
||||
Box,
|
||||
TableContainer,
|
||||
Table,
|
||||
Thead,
|
||||
Tr,
|
||||
Th,
|
||||
Tbody,
|
||||
Td,
|
||||
Code,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Stack,
|
||||
Textarea,
|
||||
} from '@chakra-ui/react';
|
||||
import { FaPlus, FaAngleDown, FaAngleUp } from 'react-icons/fa';
|
||||
import { useClient } from 'urql';
|
||||
import EmailEditor from 'react-email-editor';
|
||||
import {
|
||||
UpdateModalViews,
|
||||
EmailTemplateInputDataFields,
|
||||
emailTemplateEventNames,
|
||||
emailTemplateVariables,
|
||||
UpdateModalViews,
|
||||
EmailTemplateInputDataFields,
|
||||
emailTemplateEventNames,
|
||||
emailTemplateVariables,
|
||||
EmailTemplateEditors,
|
||||
} 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;
|
||||
[EmailTemplateInputDataFields.DESIGN]: string;
|
||||
[EmailTemplateInputDataFields.ID]: string;
|
||||
[EmailTemplateInputDataFields.EVENT_NAME]: string;
|
||||
[EmailTemplateInputDataFields.SUBJECT]: string;
|
||||
[EmailTemplateInputDataFields.CREATED_AT]: number;
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: string;
|
||||
[EmailTemplateInputDataFields.DESIGN]: string;
|
||||
}
|
||||
|
||||
interface UpdateEmailTemplateInputPropTypes {
|
||||
view: UpdateModalViews;
|
||||
selectedTemplate?: selectedEmailTemplateDataTypes;
|
||||
fetchEmailTemplatesData: Function;
|
||||
view: UpdateModalViews;
|
||||
selectedTemplate?: selectedEmailTemplateDataTypes;
|
||||
fetchEmailTemplatesData: Function;
|
||||
}
|
||||
|
||||
interface templateVariableDataTypes {
|
||||
text: string;
|
||||
value: string;
|
||||
description: string;
|
||||
text: string;
|
||||
value: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface emailTemplateDataType {
|
||||
[EmailTemplateInputDataFields.EVENT_NAME]: string;
|
||||
[EmailTemplateInputDataFields.SUBJECT]: string;
|
||||
[EmailTemplateInputDataFields.EVENT_NAME]: string;
|
||||
[EmailTemplateInputDataFields.SUBJECT]: string;
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: string;
|
||||
[EmailTemplateInputDataFields.DESIGN]: string;
|
||||
}
|
||||
|
||||
interface validatorDataType {
|
||||
[EmailTemplateInputDataFields.SUBJECT]: boolean;
|
||||
[EmailTemplateInputDataFields.SUBJECT]: boolean;
|
||||
}
|
||||
|
||||
const initTemplateData: emailTemplateDataType = {
|
||||
[EmailTemplateInputDataFields.EVENT_NAME]: emailTemplateEventNames.Signup,
|
||||
[EmailTemplateInputDataFields.SUBJECT]: '',
|
||||
[EmailTemplateInputDataFields.EVENT_NAME]: emailTemplateEventNames.Signup,
|
||||
[EmailTemplateInputDataFields.SUBJECT]: '',
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: '',
|
||||
[EmailTemplateInputDataFields.DESIGN]: '',
|
||||
};
|
||||
|
||||
const initTemplateValidatorData: validatorDataType = {
|
||||
[EmailTemplateInputDataFields.SUBJECT]: true,
|
||||
[EmailTemplateInputDataFields.SUBJECT]: true,
|
||||
};
|
||||
|
||||
const UpdateEmailTemplate = ({
|
||||
view,
|
||||
selectedTemplate,
|
||||
fetchEmailTemplatesData,
|
||||
view,
|
||||
selectedTemplate,
|
||||
fetchEmailTemplatesData,
|
||||
}: UpdateEmailTemplateInputPropTypes) => {
|
||||
const client = useClient();
|
||||
const toast = useToast();
|
||||
const emailEditorRef = useRef(null);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [templateVariables, setTemplateVariables] = useState<
|
||||
templateVariableDataTypes[]
|
||||
>([]);
|
||||
const [templateData, setTemplateData] = useState<emailTemplateDataType>({
|
||||
...initTemplateData,
|
||||
});
|
||||
const [validator, setValidator] = useState<validatorDataType>({
|
||||
...initTemplateValidatorData,
|
||||
});
|
||||
const [isDynamicVariableInfoOpen, setIsDynamicVariableInfoOpen] =
|
||||
useState<boolean>(false);
|
||||
const client = useClient();
|
||||
const toast = useToast();
|
||||
const emailEditorRef = useRef(null);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [editor, setEditor] = useState<string>(
|
||||
EmailTemplateEditors.PLAIN_HTML_EDITOR,
|
||||
);
|
||||
const [templateVariables, setTemplateVariables] = useState<
|
||||
templateVariableDataTypes[]
|
||||
>([]);
|
||||
const [templateData, setTemplateData] = useState<emailTemplateDataType>({
|
||||
...initTemplateData,
|
||||
});
|
||||
const [validator, setValidator] = useState<validatorDataType>({
|
||||
...initTemplateValidatorData,
|
||||
});
|
||||
const [isDynamicVariableInfoOpen, setIsDynamicVariableInfoOpen] =
|
||||
useState<boolean>(false);
|
||||
|
||||
const onReady = () => {
|
||||
if (selectedTemplate) {
|
||||
const { design } = selectedTemplate;
|
||||
try {
|
||||
const designData = JSON.parse(design);
|
||||
// @ts-ignore
|
||||
emailEditorRef.current.editor.loadDesign(designData);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
const onReady = () => {
|
||||
if (selectedTemplate) {
|
||||
const { design } = selectedTemplate;
|
||||
try {
|
||||
if (design) {
|
||||
const designData = JSON.parse(design);
|
||||
// @ts-ignore
|
||||
emailEditorRef.current.editor.loadDesign(designData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const inputChangehandler = (inputType: string, value: any) => {
|
||||
if (inputType !== EmailTemplateInputDataFields.EVENT_NAME) {
|
||||
setValidator({
|
||||
...validator,
|
||||
[inputType]: value?.trim().length,
|
||||
});
|
||||
}
|
||||
setTemplateData({ ...templateData, [inputType]: value });
|
||||
};
|
||||
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.SUBJECT].length > 0 &&
|
||||
validator[EmailTemplateInputDataFields.SUBJECT]
|
||||
);
|
||||
};
|
||||
const validateData = () => {
|
||||
return (
|
||||
!loading &&
|
||||
templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 &&
|
||||
templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 &&
|
||||
validator[EmailTemplateInputDataFields.SUBJECT]
|
||||
);
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
if (!validateData()) return;
|
||||
setLoading(true);
|
||||
// @ts-ignore
|
||||
return await emailEditorRef.current.editor.exportHtml(async (data) => {
|
||||
const { design, html } = data;
|
||||
if (!html || !design) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const params = {
|
||||
[EmailTemplateInputDataFields.EVENT_NAME]:
|
||||
templateData[EmailTemplateInputDataFields.EVENT_NAME],
|
||||
[EmailTemplateInputDataFields.SUBJECT]:
|
||||
templateData[EmailTemplateInputDataFields.SUBJECT],
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
|
||||
[EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
|
||||
};
|
||||
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, template, design, ...rest } = selectedTemplate;
|
||||
setTemplateData(rest);
|
||||
}
|
||||
}, [isOpen]);
|
||||
useEffect(() => {
|
||||
const updatedTemplateVariables = Object.entries(
|
||||
emailTemplateVariables,
|
||||
).reduce((acc, [key, val]): any => {
|
||||
if (
|
||||
(templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
|
||||
emailTemplateEventNames['Verify Otp'] &&
|
||||
val === emailTemplateVariables.otp) ||
|
||||
(templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
|
||||
emailTemplateEventNames['Verify Otp'] &&
|
||||
val === emailTemplateVariables.verification_url)
|
||||
) {
|
||||
return acc;
|
||||
}
|
||||
return [
|
||||
...acc,
|
||||
{
|
||||
text: key,
|
||||
value: val.value,
|
||||
description: val.description,
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
setTemplateVariables(updatedTemplateVariables);
|
||||
}, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
|
||||
const updateTemplate = async (params: emailTemplateDataType) => {
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
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={() => {
|
||||
resetData();
|
||||
onClose();
|
||||
}}
|
||||
size="6xl"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<Alert
|
||||
status="info"
|
||||
onClick={() =>
|
||||
setIsDynamicVariableInfoOpen(!isDynamicVariableInfoOpen)
|
||||
}
|
||||
borderRadius="5"
|
||||
marginBottom={5}
|
||||
cursor="pointer"
|
||||
fontSize="sm"
|
||||
>
|
||||
<AlertIcon />
|
||||
<Flex
|
||||
width="100%"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box width="85%">
|
||||
<b>Note:</b> You can add set of dynamic variables to subject
|
||||
and email body. Click here to see the set of dynamic
|
||||
variables.
|
||||
</Box>
|
||||
{isDynamicVariableInfoOpen ? <FaAngleUp /> : <FaAngleDown />}
|
||||
</Flex>
|
||||
</Alert>
|
||||
<Collapse
|
||||
style={{
|
||||
width: '100%',
|
||||
}}
|
||||
in={isDynamicVariableInfoOpen}
|
||||
>
|
||||
<TableContainer
|
||||
background="gray.100"
|
||||
borderRadius={5}
|
||||
height={200}
|
||||
width="100%"
|
||||
overflowY="auto"
|
||||
overflowWrap="break-word"
|
||||
>
|
||||
<Table variant="simple">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Variable</Th>
|
||||
<Th>Description</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{templateVariables.map((i) => (
|
||||
<Tr key={i.text}>
|
||||
<Td>
|
||||
<Code fontSize="sm">{`{{.${i.text}}}`}</Code>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text
|
||||
size="sm"
|
||||
fontSize="sm"
|
||||
overflowWrap="break-word"
|
||||
width="100%"
|
||||
>
|
||||
{i.description}
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Collapse>
|
||||
<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="2%"
|
||||
>
|
||||
<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%"
|
||||
>
|
||||
Template Body
|
||||
</Flex>
|
||||
<Flex
|
||||
width="100%"
|
||||
justifyContent="flex-start"
|
||||
alignItems="center"
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
>
|
||||
<EmailEditor ref={emailEditorRef} onReady={onReady} />
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
const saveData = async () => {
|
||||
if (!validateData()) return;
|
||||
setLoading(true);
|
||||
let params: emailTemplateDataType = {
|
||||
[EmailTemplateInputDataFields.EVENT_NAME]:
|
||||
templateData[EmailTemplateInputDataFields.EVENT_NAME],
|
||||
[EmailTemplateInputDataFields.SUBJECT]:
|
||||
templateData[EmailTemplateInputDataFields.SUBJECT],
|
||||
[EmailTemplateInputDataFields.TEMPLATE]:
|
||||
templateData[EmailTemplateInputDataFields.TEMPLATE],
|
||||
[EmailTemplateInputDataFields.DESIGN]: '',
|
||||
};
|
||||
if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
|
||||
// @ts-ignore
|
||||
await emailEditorRef.current.editor.exportHtml(async (data) => {
|
||||
const { design, html } = data;
|
||||
if (!html || !design) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
params = {
|
||||
...params,
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
|
||||
[EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
|
||||
};
|
||||
await updateTemplate(params);
|
||||
});
|
||||
} else {
|
||||
await updateTemplate(params);
|
||||
}
|
||||
view === UpdateModalViews.ADD && onClose();
|
||||
};
|
||||
|
||||
const resetData = () => {
|
||||
if (selectedTemplate) {
|
||||
setTemplateData(selectedTemplate);
|
||||
} else {
|
||||
setTemplateData({ ...initTemplateData });
|
||||
}
|
||||
};
|
||||
|
||||
// set template data if edit modal is open
|
||||
useEffect(() => {
|
||||
if (
|
||||
isOpen &&
|
||||
view === UpdateModalViews.Edit &&
|
||||
selectedTemplate &&
|
||||
Object.keys(selectedTemplate || {}).length
|
||||
) {
|
||||
const { id, created_at, ...rest } = selectedTemplate;
|
||||
setTemplateData(rest);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// set template variables
|
||||
useEffect(() => {
|
||||
const updatedTemplateVariables = Object.entries(
|
||||
emailTemplateVariables,
|
||||
).reduce((acc, [key, val]): any => {
|
||||
if (
|
||||
(templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
|
||||
emailTemplateEventNames['Verify Otp'] &&
|
||||
val === emailTemplateVariables.otp) ||
|
||||
(templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
|
||||
emailTemplateEventNames['Verify Otp'] &&
|
||||
val === emailTemplateVariables.verification_url)
|
||||
) {
|
||||
return acc;
|
||||
}
|
||||
return [
|
||||
...acc,
|
||||
{
|
||||
text: key,
|
||||
value: val.value,
|
||||
description: val.description,
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
setTemplateVariables(updatedTemplateVariables);
|
||||
}, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
|
||||
|
||||
// change editor
|
||||
useEffect(() => {
|
||||
if (isOpen && selectedTemplate) {
|
||||
const { design } = selectedTemplate;
|
||||
if (design) {
|
||||
setEditor(EmailTemplateEditors.UNLAYER_EDITOR);
|
||||
} else {
|
||||
setEditor(EmailTemplateEditors.PLAIN_HTML_EDITOR);
|
||||
}
|
||||
}
|
||||
}, [isOpen, selectedTemplate]);
|
||||
|
||||
// reset fields when editor is changed
|
||||
useEffect(() => {
|
||||
if (selectedTemplate?.design) {
|
||||
if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
|
||||
setTemplateData({
|
||||
...templateData,
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: selectedTemplate.template,
|
||||
[EmailTemplateInputDataFields.DESIGN]: selectedTemplate.design,
|
||||
});
|
||||
} else {
|
||||
setTemplateData({
|
||||
...templateData,
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: '',
|
||||
[EmailTemplateInputDataFields.DESIGN]: '',
|
||||
});
|
||||
}
|
||||
} else if (selectedTemplate?.template) {
|
||||
if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
|
||||
setTemplateData({
|
||||
...templateData,
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: '',
|
||||
[EmailTemplateInputDataFields.DESIGN]: '',
|
||||
});
|
||||
} else {
|
||||
setTemplateData({
|
||||
...templateData,
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: selectedTemplate?.template,
|
||||
[EmailTemplateInputDataFields.DESIGN]: '',
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [editor]);
|
||||
|
||||
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={() => {
|
||||
resetData();
|
||||
onClose();
|
||||
}}
|
||||
size="6xl"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<Alert
|
||||
status="info"
|
||||
onClick={() =>
|
||||
setIsDynamicVariableInfoOpen(!isDynamicVariableInfoOpen)
|
||||
}
|
||||
borderRadius="5"
|
||||
marginBottom={5}
|
||||
cursor="pointer"
|
||||
fontSize="sm"
|
||||
>
|
||||
<AlertIcon />
|
||||
<Flex
|
||||
width="100%"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box width="85%">
|
||||
<b>Note:</b> You can add set of dynamic variables to subject
|
||||
and email body. Click here to see the set of dynamic
|
||||
variables.
|
||||
</Box>
|
||||
{isDynamicVariableInfoOpen ? <FaAngleUp /> : <FaAngleDown />}
|
||||
</Flex>
|
||||
</Alert>
|
||||
<Collapse
|
||||
style={{
|
||||
width: '100%',
|
||||
}}
|
||||
in={isDynamicVariableInfoOpen}
|
||||
>
|
||||
<TableContainer
|
||||
background="gray.100"
|
||||
borderRadius={5}
|
||||
height={200}
|
||||
width="100%"
|
||||
overflowY="auto"
|
||||
overflowWrap="break-word"
|
||||
>
|
||||
<Table variant="simple">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Variable</Th>
|
||||
<Th>Description</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{templateVariables.map((i) => (
|
||||
<Tr key={i.text}>
|
||||
<Td>
|
||||
<Code fontSize="sm">{`{{.${i.text}}}`}</Code>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text
|
||||
size="sm"
|
||||
fontSize="sm"
|
||||
overflowWrap="break-word"
|
||||
width="100%"
|
||||
>
|
||||
{i.description}
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Collapse>
|
||||
<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="2%"
|
||||
>
|
||||
<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 flex="1">Template Body</Flex>
|
||||
<Flex flex="3">
|
||||
<RadioGroup
|
||||
onChange={(value) => setEditor(value)}
|
||||
value={editor}
|
||||
>
|
||||
<Stack direction="row" spacing="50px">
|
||||
<Radio value={EmailTemplateEditors.PLAIN_HTML_EDITOR}>
|
||||
Plain HTML
|
||||
</Radio>
|
||||
<Radio value={EmailTemplateEditors.UNLAYER_EDITOR}>
|
||||
Unlayer Editor
|
||||
</Radio>
|
||||
</Stack>
|
||||
</RadioGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
width="100%"
|
||||
justifyContent="flex-start"
|
||||
alignItems="center"
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
>
|
||||
{editor === EmailTemplateEditors.UNLAYER_EDITOR ? (
|
||||
<EmailEditor ref={emailEditorRef} onReady={onReady} />
|
||||
) : (
|
||||
<Textarea
|
||||
value={templateData.template}
|
||||
onChange={(e) => {
|
||||
setTemplateData({
|
||||
...templateData,
|
||||
[EmailTemplateInputDataFields.TEMPLATE]: e.target.value,
|
||||
});
|
||||
}}
|
||||
placeholder="Template HTML"
|
||||
border="0"
|
||||
height="500px"
|
||||
/>
|
||||
)}
|
||||
</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;
|
||||
|
||||
Reference in New Issue
Block a user