fix: update email template variables

dashboard/src/components/UpdateEmailTemplateModal.tsx

@@ -28,6 +28,7 @@ import {
 	UpdateModalViews,
 	EmailTemplateInputDataFields,
 	emailTemplateEventNames,
+	emailTemplateVariables,
 } from '../constants';
 import { capitalizeFirstLetter } from '../utils';
 import { AddEmailTemplate, EditEmailTemplate } from '../graphql/mutation';
@@ -46,6 +47,11 @@ interface UpdateEmailTemplateInputPropTypes {
 	fetchEmailTemplatesData: Function;
 }
 
+interface templateVariableDataTypes {
+	text: string;
+	value: string;
+}
+
 interface emailTemplateDataType {
 	[EmailTemplateInputDataFields.EVENT_NAME]: string;
 	[EmailTemplateInputDataFields.SUBJECT]: string;
@@ -77,6 +83,9 @@ const UpdateEmailTemplate = ({
 	const [editorState, setEditorState] = React.useState<EditorState>(
 		EditorState.createEmpty()
 	);
+	const [templateVariables, setTemplateVariables] = useState<
+		templateVariableDataTypes[]
+	>([]);
 	const [templateData, setTemplateData] = useState<emailTemplateDataType>({
 		...initTemplateData,
 	});
@@ -191,6 +200,30 @@ const UpdateEmailTemplate = ({
 			setEditorState(EditorState.createWithContent(stateFromHTML(template)));
 		}
 	}, [isOpen]);
+	useEffect(() => {
+		const updatedTemplateVariables = Object.entries(
+			emailTemplateVariables
+		).reduce((acc, varData): any => {
+			if (
+				(templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
+					emailTemplateEventNames.VERIFY_OTP &&
+					varData[1] === emailTemplateVariables.otp) ||
+				(templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
+					emailTemplateEventNames.VERIFY_OTP &&
+					varData[1] === emailTemplateVariables.verification_url)
+			) {
+				return acc;
+			}
+			return [
+				...acc,
+				{
+					text: varData[0],
+					value: varData[1],
+				},
+			];
+		}, []);
+		setTemplateVariables(updatedTemplateVariables);
+	}, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
 	return (
 		<>
 			{view === UpdateModalViews.ADD ? (
@@ -307,20 +340,7 @@ const UpdateEmailTemplate = ({
 								mention={{
 									separator: ' ',
 									trigger: '{',
-									suggestions: [
+									suggestions: templateVariables,
-										{
-											text: 'user_name',
-											value: '{user.name}}',
-										},
-										{
-											text: 'user_email',
-											value: '{user.email}}',
-										},
-										{
-											text: 'org_name',
-											value: '{org.name}}',
-										},
-									],
 								}}
 							/>
 						</Flex>

dashboard/src/constants.ts

@@ -206,7 +206,25 @@ export enum webhookVerifiedStatus {
 }
 
 export const emailTemplateVariables = {
-	user_name: '{{user.name}}',
+	'user.id': '{user.id}}',
-	user_email: '{{user.email}}',
+	'user.email': '{user.email}}',
-	organization_name: '{{org.name}}',
+	'user.given_name': '{user.given_name}}',
+	'user.family_name': '{user.family_name}}',
+	'user.signup_methods': '{user.signup_methods}}',
+	'user.email_verified': '{user.email_verified}}',
+	'user.picture': '{user.picture}}',
+	'user.roles': '{user.roles}}',
+	'user.middle_name': '{user.middle_name}}',
+	'user.nickname': '{user.nickname}}',
+	'user.preferred_username': '{user.preferred_username}}',
+	'user.gender': '{user.gender}}',
+	'user.birthdate': '{user.birthdate}}',
+	'user.phone_number': '{user.phone_number}}',
+	'user.phone_number_verified': '{user.phone_number_verified}}',
+	'user.created_at': '{user.created_at}}',
+	'user.updated_at': '{user.updated_at}}',
+	'organization.name': '{organization.name}}',
+	'organization.logo': '{organization.logo}}',
+	verification_url: '{verification_url}}',
+	otp: '{otp}}',
 };