[JN-1617] Allow cloning default email template when language doesn't …

…exist yet (#1465)
broadinstitute · Feb 12, 2025 · 6b2b113 · 6b2b113
1 parent 1351b1c
commit 6b2b113
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 53 deletions.
diff --git a/ui-admin/src/study/notifications/EmailTemplateEditor.tsx b/ui-admin/src/study/notifications/EmailTemplateEditor.tsx
@@ -47,7 +47,7 @@ export default function EmailTemplateEditor({ emailTemplate, updateEmailTemplate
         classic: true
       })
     }
-  }, [localizedEmailTemplate])
+  }, [localizedEmailTemplate, selectedLanguage])
 
   const {
     onChange: languageOnChange, options: languageOptions,
@@ -60,13 +60,31 @@ export default function EmailTemplateEditor({ emailTemplate, updateEmailTemplate
         selectedLanguage
       )
 
-  if (!localizedEmailTemplate) {
-    return <div>no localized template found for {defaultLanguage.languageCode}</div>
+  const addLocalContent = () => {
+    if (!selectedLanguage) { return }
+
+    const defaultContent = emailTemplate.localizedEmailTemplates.find(template =>
+      template.language === defaultLanguage.languageCode) ?? {
+      subject: '',
+      body: ''
+    }
+
+    updateEmailTemplate({
+      ...emailTemplate,
+      localizedEmailTemplates: [
+        ...emailTemplate.localizedEmailTemplates,
+        {
+          ...defaultContent,
+          language: selectedLanguage.languageCode,
+          id: undefined
+        }
+      ]
+    })
   }
 
   const replacePlaceholders = (html: string) => {
     return html.replaceAll('${siteMediaBaseUrl}', location.origin + getMediaBaseUrl(portalShortcode))
-      // support legacy tempaltes that reference this as siteImageBaseUrl
+      // support legacy templates that reference this as siteImageBaseUrl
       .replaceAll('${siteImageBaseUrl}', location.origin + getMediaBaseUrl(portalShortcode))
   }
   const insertPlaceholders = (html: string) => {
@@ -81,15 +99,18 @@ export default function EmailTemplateEditor({ emailTemplate, updateEmailTemplate
       classic: true
     })
     unlayer.addEventListener('design:updated', () => {
-      if (!emailEditorRef.current?.editor) { return }
+      if (!emailEditorRef.current?.editor || !localizedEmailTemplate) { return }
       emailEditorRef.current.editor.exportHtml(data => {
-        updateEmailTemplate({
-          ...emailTemplateRef.current,
-          localizedEmailTemplates: [{
+        const updatedTemplates = emailTemplateRef.current.localizedEmailTemplates.map(template =>
+          template.language === localizedEmailTemplate.language ? {
             ...localizedEmailTemplate,
             id: undefined,
             body: insertPlaceholders(data.html)
-          }]
+          } : template
+        )
+        updateEmailTemplate({
+          ...emailTemplateRef.current,
+          localizedEmailTemplates: updatedTemplates
         })
       })
     })
@@ -112,49 +133,70 @@ export default function EmailTemplateEditor({ emailTemplate, updateEmailTemplate
           }}/>
       </label>
     </div> }
-    <div>
-      <label className="form-label">Subject
-        <input className="form-control" type="text" size={100} value={localizedEmailTemplate.subject}
-          onChange={e => updateEmailTemplate({
-            ...emailTemplate,
-            localizedEmailTemplates: [{
-              ...localizedEmailTemplate,
-              id: undefined,
-              subject: e.target.value
-            }]
-          })}/>
-      </label>
-    </div>
-    <div>
-      <Tabs
-        activeKey={activeTab ?? undefined}
-        className="mb-1"
-        mountOnEnter
-        unmountOnExit
-        onSelect={setActiveTab}
-      >
-        <Tab eventKey="designer" title="Designer">
-          <EmailEditor
-            ref={emailEditorRef}
-            onLoad={onEditorLoaded}
-            onReady={() => 1}
-            options={{ tools: { image: { enabled: false } }, className: 'w-100' }}
-            style={{ maxWidth: '0px', width: '0px' }}
-          />
-        </Tab>
-        <Tab eventKey="html" title="Html">
-          <textarea rows={20} cols={100} value={localizedEmailTemplate.body}
-            onChange={e => updateEmailTemplate({
-              ...emailTemplate,
-              localizedEmailTemplates: [{
-                ...localizedEmailTemplate,
-                id: undefined,
-                body: e.target.value
-              }]
-            })}/>
-
-        </Tab>
-      </Tabs>
-    </div>
+    { localizedEmailTemplate ? <>
+      <div>
+        <label className="form-label">Subject
+          <input className="form-control" type="text" size={100} value={localizedEmailTemplate.subject}
+            onChange={e => {
+              const updatedTemplates = emailTemplate.localizedEmailTemplates.map(template =>
+                template.language === localizedEmailTemplate.language ? {
+                  ...localizedEmailTemplate,
+                  id: undefined,
+                  subject: e.target.value
+                } : template
+              )
+              updateEmailTemplate({
+                ...emailTemplate,
+                localizedEmailTemplates: updatedTemplates
+              })
+            }}/>
+        </label>
+      </div>
+      <div>
+        <Tabs
+          activeKey={activeTab ?? undefined}
+          className="mb-1"
+          mountOnEnter
+          unmountOnExit
+          onSelect={setActiveTab}
+        >
+          <Tab eventKey="designer" title="Designer">
+            <EmailEditor
+              key={localizedEmailTemplate.language}
+              ref={emailEditorRef}
+              onLoad={onEditorLoaded}
+              onReady={() => 1}
+              options={{ tools: { image: { enabled: false } }, className: 'w-100' }}
+              style={{ maxWidth: '0px', width: '0px' }}
+            />
+          </Tab>
+          <Tab eventKey="html" title="Html">
+            <textarea rows={20} cols={100} value={localizedEmailTemplate.body}
+              onChange={e => {
+                const updatedTemplates = emailTemplate.localizedEmailTemplates.map(template =>
+                  template.language === localizedEmailTemplate.language ? {
+                    ...localizedEmailTemplate,
+                    id: undefined,
+                    body: e.target.value
+                  } : template
+                )
+                updateEmailTemplate({
+                  ...emailTemplate,
+                  localizedEmailTemplates: updatedTemplates
+                })
+              }}/>
+          </Tab>
+        </Tabs>
+      </div>
+    </> :
+      <div className="d-flex flex-column flex-grow-1 mt-2">
+        <div className="alert alert-warning" role="alert">
+            No content has been configured for this language.
+          <button className="btn btn-secondary ms-3" onClick={addLocalContent}>
+              Clone from default
+          </button>
+        </div>
+      </div>
+    }
   </div>
 }
diff --git a/ui-admin/src/study/notifications/TriggerDesignerEditor.tsx b/ui-admin/src/study/notifications/TriggerDesignerEditor.tsx
@@ -401,6 +401,9 @@ const NotificationEditor = (
             emailTemplate={trigger.emailTemplate}
             portalShortcode={studyEnvContext.portal.shortcode}
             updateEmailTemplate={updatedTemplate => {
+              updatedTemplate.localizedEmailTemplates.forEach(template => {
+                template.id = undefined
+              })
               const version = trigger?.emailTemplate?.version || 1
               updateTrigger('emailTemplate', {
                 ...updatedTemplate,