feat(copy): addtl custom theming (#262)

awell-health · Sep 13, 2024 · 97aa487 · 97aa487
1 parent f5625af
commit 97aa487
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 92 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -41,7 +41,6 @@
       "failed_sign_document": "Signing link has failed."
     },
     "form": {
-      "cta_start_form": "Start form",
       "cta_submit": "Submit",
       "date_cannot_be_in_the_future": "Date cannot be in the future.",
       "date_cannot_be_in_the_past": "Date cannot be in the past.",

diff --git a/src/components/Checklist/Checklist.tsx b/src/components/Checklist/Checklist.tsx
@@ -7,13 +7,16 @@ import { ErrorPage } from '../ErrorPage'
 import { useTranslation } from 'next-i18next'
 import { addSentryBreadcrumb } from '../../services/ErrorReporter'
 import { BreadcrumbCategory } from '../../services/ErrorReporter/addSentryBreadcrumb'
+import { useHostedSession } from '../../hooks/useHostedSession'
+import { isEmpty } from 'lodash'
 
 interface ChecklistProps {
   activity: Activity
 }
 
 export const Checklist: FC<ChecklistProps> = ({ activity }) => {
   const { t } = useTranslation()
+  const { theme } = useHostedSession()
   const { loading, items, title, error, refetch } = useChecklist(activity)
   const { onSubmit, isSubmitting } = useSubmitChecklist(activity)
 
@@ -46,7 +49,11 @@ export const Checklist: FC<ChecklistProps> = ({ activity }) => {
       items={items || []}
       onSubmit={handleSubmit}
       disabled={isSubmitting}
-      submitLabel={t('activities.checklist.cta_submit')}
+      submitLabel={
+        isEmpty(theme.locales.checklist.cta_submit)
+          ? t('activities.checklist.cta_submit')
+          : theme.locales.checklist.cta_submit
+      }
     />
   )
 }

diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -138,12 +138,15 @@ export const Form: FC<FormProps> = ({ activity }) => {
   }
 
   const button_labels = {
-    prev: t('activities.form.previous_question_label'),
-    next: t('activities.form.next_question_label'),
+    prev: isEmpty(theme.locales.form.previous_question_label)
+      ? t('activities.form.previous_question_label')
+      : theme.locales.form.previous_question_label,
+    next: isEmpty(theme.locales.form.next_question_label)
+      ? t('activities.form.next_question_label')
+      : theme.locales.form.next_question_label,
     submit: isEmpty(theme.locales.form.cta_submit)
       ? t('activities.form.cta_submit')
       : theme.locales.form.cta_submit,
-    start_form: t('activities.form.cta_start_form'),
   }
 
   const error_labels: ErrorLabels = {

diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
@@ -8,12 +8,16 @@ import { ErrorPage } from '../ErrorPage'
 import attachmentIcon from './../../assets/link.svg'
 import { addSentryBreadcrumb } from '../../services/ErrorReporter'
 import { BreadcrumbCategory } from '../../services/ErrorReporter/addSentryBreadcrumb'
+import { useHostedSession } from '../../hooks/useHostedSession'
+import { isEmpty } from 'lodash'
 interface MessageProps {
   activity: Activity
 }
 
 export const Message = ({ activity }: MessageProps): JSX.Element => {
   const { t } = useTranslation()
+  const { theme } = useHostedSession()
+
   const { loading, message, error, onRead, refetch } = useMessage(activity)
 
   if (loading) {
@@ -53,7 +57,11 @@ export const Message = ({ activity }: MessageProps): JSX.Element => {
         file: t('activities.message.download_file_attachment'),
       }}
       onMessageRead={handleReadMessage}
-      buttonLabels={{ readMessage: t('activities.message.cta_mark_as_read') }}
+      buttonLabels={{
+        readMessage: isEmpty(theme.locales.message.cta_mark_as_read)
+          ? t('activities.message.cta_mark_as_read')
+          : theme.locales.message.cta_mark_as_read,
+      }}
     />
   )
 }
diff --git a/src/hooks/useHostedSession/branding/customTheme.test.ts b/src/hooks/useHostedSession/branding/customTheme.test.ts
@@ -1,117 +1,72 @@
 import { getTheme } from './customTheme'
 
+const DEFAULT_THEME = {
+  layout: { showCloseButton: true, showLogo: true },
+  form: {
+    showProgressBar: true,
+    showAsterisksForRequiredQuestions: true,
+  },
+  locales: {
+    form: {
+      next_question_label: '',
+      previous_question_label: '',
+      cta_submit: '',
+    },
+    message: {
+      cta_mark_as_read: '',
+    },
+    checklist: {
+      cta_submit: '',
+    },
+  },
+}
+
 describe('Custom theme branding', () => {
   test('When custom theme is empty string, the default theme is set', () => {
     const customTheme = ''
     const outcome = getTheme(customTheme)
 
-    expect(outcome).toStrictEqual({
-      layout: { showCloseButton: true, showLogo: true },
-      form: {
-        showProgressBar: true,
-        showAsterisksForRequiredQuestions: true,
-      },
-      locales: {
-        form: {
-          cta_submit: '',
-        },
-      },
-    })
+    expect(outcome).toStrictEqual(DEFAULT_THEME)
   })
 
   test('When custom theme is empty object, the default theme is set', () => {
     const customTheme = '{}'
     const outcome = getTheme(customTheme)
 
-    expect(outcome).toStrictEqual({
-      layout: { showCloseButton: true, showLogo: true },
-      form: {
-        showProgressBar: true,
-        showAsterisksForRequiredQuestions: true,
-      },
-      locales: {
-        form: {
-          cta_submit: '',
-        },
-      },
-    })
+    expect(outcome).toStrictEqual(DEFAULT_THEME)
   })
 
   test('When custom theme is invalid JSON string, the default theme is set', () => {
     const customTheme = 'no valid json'
     const outcome = getTheme(customTheme)
 
-    expect(outcome).toStrictEqual({
-      layout: { showCloseButton: true, showLogo: true },
-      form: {
-        showProgressBar: true,
-        showAsterisksForRequiredQuestions: true,
-      },
-      locales: {
-        form: {
-          cta_submit: '',
-        },
-      },
-    })
+    expect(outcome).toStrictEqual(DEFAULT_THEME)
   })
 
   test('When custom theme is undefined, the default theme is set', () => {
     const outcome = getTheme()
 
-    expect(outcome).toStrictEqual({
-      layout: { showCloseButton: true, showLogo: true },
-      form: {
-        showProgressBar: true,
-        showAsterisksForRequiredQuestions: true,
-      },
-      locales: {
-        form: {
-          cta_submit: '',
-        },
-      },
-    })
+    expect(outcome).toStrictEqual(DEFAULT_THEME)
   })
 
   test('When custom theme is null, the default theme is set', () => {
     const customTheme = null
     const outcome = getTheme(customTheme)
 
-    expect(outcome).toStrictEqual({
-      layout: { showCloseButton: true, showLogo: true },
-      form: {
-        showProgressBar: true,
-        showAsterisksForRequiredQuestions: true,
-      },
-      locales: {
-        form: {
-          cta_submit: '',
-        },
-      },
-    })
+    expect(outcome).toStrictEqual(DEFAULT_THEME)
   })
 
   test('When custom theme is not in the correct shape, we should ignore unexpected fields', () => {
     const customTheme = JSON.stringify({
       hello: 'world',
       test: 123,
       layout: {
-        showCloseButton: false,
+        showCloseButton: true,
       },
     })
     const outcome = getTheme(customTheme)
 
-    expect(outcome).toStrictEqual({
-      layout: { showCloseButton: false, showLogo: true },
-      form: {
-        showProgressBar: true,
-        showAsterisksForRequiredQuestions: true,
-      },
-      locales: {
-        form: {
-          cta_submit: '',
-        },
-      },
-    })
+    expect(outcome).toStrictEqual(DEFAULT_THEME)
   })
 
   test('When custom theme is defined then it should be parsed correctly', () => {
@@ -126,24 +81,21 @@ describe('Custom theme branding', () => {
       },
       locales: {
         form: {
-          cta_submit: 'Custom copy',
+          next_question_label: 'Custom label 1',
+          previous_question_label: 'Custom label 2',
+          cta_submit: 'Custom label 3',
+        },
+        message: {
+          cta_mark_as_read: 'Custom label 4',
+        },
+        checklist: {
+          cta_submit: 'Custom label 5',
         },
       },
     })
     const outcome = getTheme(customTheme)
 
-    expect(outcome).toStrictEqual({
-      layout: { showCloseButton: false, showLogo: false },
-      form: {
-        showProgressBar: true,
-        showAsterisksForRequiredQuestions: false,
-      },
-      locales: {
-        form: {
-          cta_submit: 'Custom copy',
-        },
-      },
-    })
+    expect(outcome).toStrictEqual(JSON.parse(customTheme))
   })
 
   test('When custom theme is partially defined then it should be parsed correctly and merged with defaut', () => {
@@ -162,6 +114,14 @@ describe('Custom theme branding', () => {
       },
       locales: {
         form: {
+          next_question_label: '',
+          previous_question_label: '',
+          cta_submit: '',
+        },
+        message: {
+          cta_mark_as_read: '',
+        },
+        checklist: {
           cta_submit: '',
         },
       },

diff --git a/src/hooks/useHostedSession/branding/customTheme.ts b/src/hooks/useHostedSession/branding/customTheme.ts
@@ -35,6 +35,18 @@ const CustomFormBranding = z
 const CustomLocales = z
   .object({
     form: z
+      .object({
+        next_question_label: z.string().default(''),
+        previous_question_label: z.string().default(''),
+        cta_submit: z.string().default(''),
+      })
+      .default({}),
+    message: z
+      .object({
+        cta_mark_as_read: z.string().default(''),
+      })
+      .default({}),
+    checklist: z
       .object({
         cta_submit: z.string().default(''),
       })