fix: add design to email template

Author: anik-ghosh-au7

dashboard/src/components/UpdateEmailTemplateModal.tsx

@@ -48,6 +48,7 @@ interface selectedEmailTemplateDataTypes {
 	[EmailTemplateInputDataFields.SUBJECT]: string;
 	[EmailTemplateInputDataFields.CREATED_AT]: number;
 	[EmailTemplateInputDataFields.TEMPLATE]: string;
+	[EmailTemplateInputDataFields.DESIGN]: string;
 }
 
 interface UpdateEmailTemplateInputPropTypes {
@@ -102,20 +103,17 @@ const UpdateEmailTemplate = ({
 	const [isDynamicVariableInfoOpen, setIsDynamicVariableInfoOpen] =
 		useState<boolean>(false);
 
-	const onLoad = () => {
-		// editor instance is created
-		// you can load your template here;
-		// const templateJson = {};
-		// emailEditorRef.current.editor.loadDesign(templateJson);
-		console.log('onLoad');
-	};
-
 	const onReady = () => {
-		// editor is ready
-		console.log('onReady');
 		if (selectedTemplate) {
-			const { template } = selectedTemplate;
-			console.log('incoming template ==>> ', template);
+			const { design } = selectedTemplate;
+			try {
+				const designData = JSON.parse(design);
+				// @ts-ignore
+				emailEditorRef.current.editor.loadDesign(designData);
+			} catch (error) {
+				console.error(error);
+				onClose();
+			}
 		}
 	};
 
@@ -132,7 +130,6 @@ const UpdateEmailTemplate = ({
 	const validateData = () => {
 		return (
 			!loading &&
-			emailEditorRef?.current &&
 			templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 &&
 			templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 &&
 			validator[EmailTemplateInputDataFields.SUBJECT]
@@ -145,7 +142,6 @@ const UpdateEmailTemplate = ({
 		// @ts-ignore
 		return await emailEditorRef.current.editor.exportHtml(async (data) => {
 			const { design, html } = data;
-			console.log('design ==>> ', design);
 			if (!html || !design) {
 				setLoading(false);
 				return;
@@ -156,6 +152,7 @@ const UpdateEmailTemplate = ({
 				[EmailTemplateInputDataFields.SUBJECT]:
 					templateData[EmailTemplateInputDataFields.SUBJECT],
 				[EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
+				[EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
 			};
 			let res: any = {};
 			if (
@@ -217,7 +214,7 @@ const UpdateEmailTemplate = ({
 			selectedTemplate &&
 			Object.keys(selectedTemplate || {}).length
 		) {
-			const { id, created_at, template, ...rest } = selectedTemplate;
+			const { id, created_at, template, design, ...rest } = selectedTemplate;
 			setTemplateData(rest);
 		}
 	}, [isOpen]);
@@ -419,11 +416,7 @@ const UpdateEmailTemplate = ({
 							>
 								Template Body
 							</Flex>
-							<EmailEditor
-								ref={emailEditorRef}
-								onLoad={onLoad}
-								onReady={onReady}
-							/>
+							<EmailEditor ref={emailEditorRef} onReady={onReady} />
 						</Flex>
 					</ModalBody>
 					<ModalFooter>

dashboard/src/constants.ts

@@ -168,6 +168,7 @@ export enum EmailTemplateInputDataFields {
 	SUBJECT = 'subject',
 	CREATED_AT = 'created_at',
 	TEMPLATE = 'template',
+	DESIGN = 'design',
 }
 
 export enum WebhookInputHeaderFields {

dashboard/src/graphql/queries/index.ts

@@ -132,6 +132,7 @@ export const EmailTemplatesQuery = `
         subject
         created_at
         template
+        design
       }
       pagination {
         limit

dashboard/src/pages/EmailTemplates.tsx

@@ -58,6 +58,7 @@ interface EmailTemplateDataType {
 	[EmailTemplateInputDataFields.SUBJECT]: string;
 	[EmailTemplateInputDataFields.CREATED_AT]: number;
 	[EmailTemplateInputDataFields.TEMPLATE]: string;
+	[EmailTemplateInputDataFields.DESIGN]: string;
 }
 
 const EmailTemplates = () => {

server/db/models/email_templates.go

@@ -14,6 +14,7 @@ type EmailTemplate struct {
 	EventName string `gorm:"unique" json:"event_name" bson:"event_name" cql:"event_name"`
 	Subject   string `gorm:"type:text" json:"subject" bson:"subject" cql:"subject"`
 	Template  string `gorm:"type:text" json:"template" bson:"template" cql:"template"`
+	Design    string `gorm:"type:text" json:"design" bson:"design" cql:"design"`
 	CreatedAt int64  `json:"created_at" bson:"created_at" cql:"created_at"`
 	UpdatedAt int64  `json:"updated_at" bson:"updated_at" cql:"updated_at"`
 }
@@ -29,6 +30,7 @@ func (e *EmailTemplate) AsAPIEmailTemplate() *model.EmailTemplate {
 		EventName: e.EventName,
 		Subject:   e.Subject,
 		Template:  e.Template,
+		Design:    e.Design,
 		CreatedAt: refs.NewInt64Ref(e.CreatedAt),
 		UpdatedAt: refs.NewInt64Ref(e.UpdatedAt),
 	}

server/graph/generated/generated.go

@@ -194,6 +194,7 @@ type EmailTemplate {
 	id: ID!
 	event_name: String!
 	template: String!
+	design: String!
 	subject: String!
 	created_at: Int64
 	updated_at: Int64
@@ -417,13 +418,15 @@ input AddEmailTemplateRequest {
 	event_name: String!
 	subject: String!
 	template: String!
+	design: String!
 }
 
 input UpdateEmailTemplateRequest {
 	id: ID!
 	event_name: String
 	template: String
 	subject: String
+	design: String
 }
 
 input DeleteEmailTemplateRequest {

server/graph/model/models_gen.go

@@ -40,10 +40,15 @@ func AddEmailTemplateResolver(ctx context.Context, params model.AddEmailTemplate
 		return nil, fmt.Errorf("empty template not allowed")
 	}
 
+	if strings.TrimSpace(params.Design) == "" {
+		return nil, fmt.Errorf("empty design not allowed")
+	}
+
 	_, err = db.Provider.AddEmailTemplate(ctx, models.EmailTemplate{
 		EventName: params.EventName,
 		Template:  params.Template,
 		Subject:   params.Subject,
+		Design:    params.Design,
 	})
 	if err != nil {
 		log.Debug("Failed to add email template: ", err)

server/graph/schema.graphqls

@@ -65,6 +65,14 @@ func UpdateEmailTemplateResolver(ctx context.Context, params model.UpdateEmailTe
 		emailTemplateDetails.Template = refs.StringValue(params.Template)
 	}
 
+	if params.Design != nil && emailTemplateDetails.Design != refs.StringValue(params.Design) {
+		if strings.TrimSpace(refs.StringValue(params.Design)) == "" {
+			log.Debug("empty design not allowed")
+			return nil, fmt.Errorf("empty design not allowed")
+		}
+		emailTemplateDetails.Design = refs.StringValue(params.Design)
+	}
+
 	_, err = db.Provider.UpdateEmailTemplate(ctx, emailTemplateDetails)
 	if err != nil {
 		return nil, err