Load preview text on the email template show page

newjersey · May 23, 2024 · f670cd9 · f670cd9
1 parent 8ae3c4e
commit f670cd9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/pages/email-templates/[id].tsx b/src/pages/email-templates/[id].tsx
@@ -14,6 +14,7 @@ import { Layout, PageContent, LoadingOverlay, Alert } from 'src/ui'
 import { ShouldShowEmailPart } from 'src/templates/ShouldShowEmailPart'
 import { shouldShowEmailPartsFromEmailTemplate } from 'src/utils/shouldShowEmailPartsFromEmailTemplate'
 import { SyncSidebarAndPreviewScroll } from 'src/templates/SyncSidebarAndPreviewScroll'
+import { PreviewText } from 'src/templates/PreviewText'
 
 export type Props = PageProps<null, null, null>
 
@@ -35,7 +36,7 @@ const EmailTemplateShowPage: FC<Props> = ({ params }) => {
                 <EmailEditorSidebar
                   emailTemplate={emailTemplate}
                   heading={
-                    <h1>
+                    <h1 style={{ fontSize: '1.5rem' }}>
                       {byQueryState(query, {
                         data: ({ name }) => name,
                         loading: () => 'Loading...',
@@ -44,10 +45,12 @@ const EmailTemplateShowPage: FC<Props> = ({ params }) => {
                     </h1>
                   }
                 />
-                <PageContent element="div" className="email-editor-page-content">
-                  {error && <Alert>{error.message}</Alert>}
-                  {emailTemplate && <EmailEditorContent emailTemplate={emailTemplate} />}
-                </PageContent>
+                <PreviewText initialValue={emailTemplate?.previewText}>
+                  <PageContent element="div" className="email-editor-page-content">
+                    {error && <Alert>{error.message}</Alert>}
+                    {emailTemplate && <EmailEditorContent emailTemplate={emailTemplate} />}
+                  </PageContent>
+                </PreviewText>
                 {isLoading && <LoadingOverlay description="Loading your email template" />}
               </EmailPartsContent>
             </SyncSidebarAndPreviewScroll>

diff --git a/src/pages/email-templates/__tests__/[id].test.tsx b/src/pages/email-templates/__tests__/[id].test.tsx
@@ -67,12 +67,15 @@ describe('Email Template Show Page', () => {
   describe('when successful', () => {
     let emailTemplate: EmailTemplateShow
     let title: string
+    let previewText: string
 
     beforeEach(() => {
       title = faker.lorem.words(3)
+      previewText = faker.lorem.paragraph()
       emailTemplate = {
         id: randomUUID(),
         ...buildUniqueEmailConfig({
+          previewText,
           components: [
             buildUniqueEmailComponent('Header', {
               subComponents: [
@@ -94,17 +97,23 @@ describe('Email Template Show Page', () => {
       expect(queryByText(emailTemplate.name)).not.toBeNull()
     })
 
-    xit('displays the EmailEditorContent', () => {
+    it('displays the EmailEditorContent', () => {
       const { baseElement } = renderEmailTemplateShowPage()
       const h1 = baseElement.querySelector('h1[contenteditable="true"]')
       expect(h1).not.toBeNull()
       expect(h1).toHaveTextContent(title)
     })
 
-    xit('displays the EmailEditorSidebar', () => {
+    it('displays the EmailEditorSidebar', () => {
       const { queryByText } = renderEmailTemplateShowPage()
       expect(queryByText('Back')).not.toBeNull()
     })
+
+    it('loads the saved preview text', () => {
+      const { getByLabelText } = renderEmailTemplateShowPage()
+      const textarea: HTMLTextAreaElement = getByLabelText('Preview Text') as any
+      expect(textarea).toHaveValue(previewText)
+    })
   })
 
   describe('when there is an error', () => {