feat: add env var to configure announcement modal button text (#2195)

opengovsg · Apr 12, 2023 · b22f4cf · b22f4cf
1 parent 308b021
commit b22f4cf
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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