From b22f4cf86eec881f1aec3e7c132228ccacba9cd1 Mon Sep 17 00:00:00 2001
From: halfwhole <41856541+halfwhole@users.noreply.github.com>
Date: Wed, 12 Apr 2023 17:15:00 +0800
Subject: [PATCH] feat: add env var to configure announcement modal button text
 (#2195)

---
 README.md                                             |  3 ++-
 docker-compose.yml                                    |  1 +
 src/client/user/actions/index.ts                      |  1 +
 src/client/user/actions/types.ts                      |  1 +
 .../user/components/AnnouncementModal/index.tsx       | 11 ++++++-----
 src/client/user/reducers/types.ts                     |  1 +
 src/server/config.ts                                  |  1 +
 7 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index cde70a556..a49a6dfdc 100644
--- a/README.md
+++ b/README.md
@@ -121,9 +121,10 @@ After these have been set up, set the environment variables according to the tab
 |ANNOUNCEMENT_MESSAGE|No|The message in the announcement displayed as a modal to users on login|
 |ANNOUNCEMENT_TITLE|No|The title in the announcement displayed as a modal to users on login|
 |ANNOUNCEMENT_SUBTITLE|No|The subtitle in the announcement displayed as a modal to users on login|
-|ROTATED_LINKS|No|List of comma separated path of links to rotate on the landing page|
 |ANNOUNCEMENT_URL|No|The hyperlink for the button in the announcement displayed as a modal to users on login|
 |ANNOUNCEMENT_IMAGE|No|The image in the announcement displayed as a modal to users on login|
+|ANNOUNCEMENT_BUTTON_TEXT|No|The text on the button in the announcement displayed as a modal to users on login|
+|ROTATED_LINKS|No|List of comma separated path of links to rotate on the landing page|
 |CSP_REPORT_URI|No|A URI to report CSP violations to.|
 |CSP_ONLY_REPORT_VIOLATIONS|No|Only report CSP violations, do not enforce.|
 |CLOUDMERSIVE_KEY|No|API key for access to Cloudmersive.|
diff --git a/docker-compose.yml b/docker-compose.yml
index 6b256f9b9..7e86bc70d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -38,6 +38,7 @@ services:
       - ANNOUNCEMENT_SUBTITLE=Search all go.gov.sg links
       - ANNOUNCEMENT_URL=https://go.gov.sg/
       - ANNOUNCEMENT_IMAGE=/assets/gov/transition-page/images/directory-browser.svg
+      - ANNOUNCEMENT_BUTTON_TEXT=Try me now
       - AWS_S3_BUCKET=local-bucket
       - ROTATED_LINKS=whatsapp,passport,spsc,sppr
       - AWS_ACCESS_KEY_ID=foobar
diff --git a/src/client/user/actions/index.ts b/src/client/user/actions/index.ts
index be5db9fc2..73ddff266 100644
--- a/src/client/user/actions/index.ts
+++ b/src/client/user/actions/index.ts
@@ -186,6 +186,7 @@ const setUserAnnouncement: (payload: {
   subtitle: string
   url: string
   image: string
+  buttonText: string
 }) => SetUserAnnouncementAction = (payload) => ({
   type: UserAction.SET_USER_ANNOUNCEMENT,
   payload,
diff --git a/src/client/user/actions/types.ts b/src/client/user/actions/types.ts
index 0dd5068c9..6adcc0b91 100644
--- a/src/client/user/actions/types.ts
+++ b/src/client/user/actions/types.ts
@@ -67,6 +67,7 @@ export type SetUserAnnouncementAction = ReduxPayloadAction<
     subtitle: string | undefined
     url: string | undefined
     image: string | undefined
+    buttonText: string | undefined
   }
 >
 
diff --git a/src/client/user/components/AnnouncementModal/index.tsx b/src/client/user/components/AnnouncementModal/index.tsx
index 8b8ea476b..02cac00df 100644
--- a/src/client/user/components/AnnouncementModal/index.tsx
+++ b/src/client/user/components/AnnouncementModal/index.tsx
@@ -94,7 +94,7 @@ const useStyles = makeStyles((theme) =>
         boxShadow: 'unset',
       },
     },
-    learnMoreButton: {
+    button: {
       // @ts-ignore
       filter: (props) => (props.isLightItems ? 'brightness(10)' : ''),
       // this class is not mobile first by default as padding should not be set
@@ -104,7 +104,7 @@ const useStyles = makeStyles((theme) =>
         paddingRight: 0,
         minWidth: theme.spacing(6),
       },
-      width: theme.spacing(16),
+      minWidth: theme.spacing(16),
       marginTop: theme.spacing(3),
       backgroundColor: theme.palette.primary.dark,
       color: theme.palette.background.default,
@@ -143,7 +143,8 @@ const AnnouncementModal = () => {
             announcement.title ||
             announcement.subtitle ||
             announcement.url ||
-            announcement.image,
+            announcement.image ||
+            announcement.buttonText,
         )
         setShowModal(hasAnnouncement)
       }
@@ -233,12 +234,12 @@ const AnnouncementModal = () => {
             color="primary"
             size="large"
             variant="text"
-            className={classes.learnMoreButton}
+            className={classes.button}
             onClick={() => {
               GAEvent('Announcement Page', announcement?.title || 'successful')
             }}
           >
-            Try it now
+            {announcement.buttonText || 'Try it now'}
           </Button>
         ) : null}
       </div>
diff --git a/src/client/user/reducers/types.ts b/src/client/user/reducers/types.ts
index cfa2cc948..4242cec9b 100644
--- a/src/client/user/reducers/types.ts
+++ b/src/client/user/reducers/types.ts
@@ -94,6 +94,7 @@ export type UserState = {
     subtitle: string | undefined
     url: string | undefined
     image: string | undefined
+    buttonText: string | undefined
   } | null
   linkHistory: Array<LinkChangeSet>
   linkHistoryCount: number
diff --git a/src/server/config.ts b/src/server/config.ts
index bbb1d94bf..9ed29e62f 100644
--- a/src/server/config.ts
+++ b/src/server/config.ts
@@ -171,6 +171,7 @@ export const userAnnouncement = {
   subtitle: process.env.ANNOUNCEMENT_SUBTITLE,
   url: process.env.ANNOUNCEMENT_URL,
   image: process.env.ANNOUNCEMENT_IMAGE,
+  buttonText: process.env.ANNOUNCEMENT_BUTTON_TEXT,
 }
 
 export const s3Bucket = process.env.AWS_S3_BUCKET as string