feat: conditionally render sex based on timezone (#7376)

* feat: conditionally render sex based on timezone * fix: typo, show sex instead of child sex if referencing self * fix: knit on year of date reference to 2024 instead of 2022 * fix: lint issues on index.ts * feat: infobox on myinfo children * fix: remove unnecessary vstack, use warn infobox and rename comment as TODO * feat: added conditional render of info boxes and confirmed 28 jun as the date * fix: standardize as TODO * chore: update comments for clarity --------- Co-authored-by: Ken <ken@open.gov.sg>
opengovsg · Jun 14, 2024 · 6b3aedb · 6b3aedb
1 parent 508624d
commit 6b3aedb
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 1 deletion.
diff --git a/...nd-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMyInfo/EditMyInfo.tsx b/...nd-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMyInfo/EditMyInfo.tsx
@@ -1,9 +1,10 @@
 import { BiCheck, BiData, BiX } from 'react-icons/bi'
-import { HStack, Icon, Text, VStack } from '@chakra-ui/react'
+import { Box, HStack, Icon, Text, VStack } from '@chakra-ui/react'
 
 import { MyInfoField } from '~shared/types'
 
 import { SINGPASS_FAQ } from '~constants/links'
+import InlineMessage from '~components/InlineMessage'
 import Link from '~components/Link'
 
 import {
@@ -44,9 +45,34 @@ export const EditMyInfo = ({ field }: EditMyInfoProps): JSX.Element => {
       },
     })
 
+  function conditionallyDisplayInfoBox() {
+    const currentDate = new Date().toLocaleString('en-US', {
+      timeZone: 'Asia/Singapore',
+    })
+    const targetDate = new Date('2024-06-28T00:00:00').toLocaleString('en-US', {
+      timeZone: 'Asia/Singapore',
+    })
+
+    if (new Date(currentDate) <= new Date(targetDate)) {
+      return (
+        <>
+          <Box pb="1.5rem">
+            <InlineMessage variant="warning">
+              To align with MyInfo terminology, the “Gender” field will be
+              renamed to “Sex” from 1 Jul 2024.
+            </InlineMessage>
+          </Box>{' '}
+        </>
+      )
+    } else {
+      return null
+    }
+  }
+
   return (
     <CreatePageDrawerContentContainer>
       <VStack align="flex-start">
+        {conditionallyDisplayInfoBox()}
         <Text textStyle="subhead-1">Data source</Text>
         {extendedField.dataSource.map((dataSource, idx) => (
           <HStack key={idx} align="flex-start">

diff --git a/...rAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMyInfoChildren/EditMyInfoChildren.tsx b/...rAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMyInfoChildren/EditMyInfoChildren.tsx
@@ -7,6 +7,7 @@ import { MyInfoChildAttributes } from '~shared/types'
 
 import { SINGPASS_FAQ } from '~constants/links'
 import { MultiSelect } from '~components/Dropdown'
+import InlineMessage from '~components/InlineMessage'
 import Link from '~components/Link'
 import { Toggle } from '~components/Toggle/Toggle'
 
@@ -60,9 +61,34 @@ export const EditMyInfoChildren = ({
     },
   })
 
+  function conditionallyDisplayInfoBox() {
+    const currentDate = new Date().toLocaleString('en-US', {
+      timeZone: 'Asia/Singapore',
+    })
+    const targetDate = new Date('2024-06-28T00:00:00').toLocaleString('en-US', {
+      timeZone: 'Asia/Singapore',
+    })
+
+    if (new Date(currentDate) <= new Date(targetDate)) {
+      return (
+        <>
+          <Box pb="1.5rem">
+            <InlineMessage variant="warning">
+              To align with MyInfo terminology, the “Gender” field will be
+              renamed to “Sex” from 1 Jul 2024.
+            </InlineMessage>
+          </Box>{' '}
+        </>
+      )
+    } else {
+      return null
+    }
+  }
+
   return (
     <CreatePageDrawerContentContainer>
       <VStack align="flex-start">
+        {conditionallyDisplayInfoBox()}
         <Text textStyle="subhead-1">Data source</Text>
         {extendedField.dataSource.map((dataSource, idx) => (
           <HStack key={idx} align="flex-start">

diff --git a/frontend/src/features/admin-form/create/constants.ts b/frontend/src/features/admin-form/create/constants.ts
@@ -361,3 +361,24 @@ export const MYINFO_FIELD_TO_DRAWER_META: {
     isSubmitted: true,
   },
 }
+// TODO: remove after 28 Jun 2024 as this would have fully taken effect
+function updateLabelsBasedOnDate() {
+  const currentDate = new Date().toLocaleString('en-US', {
+    timeZone: 'Asia/Singapore',
+  })
+  const targetDate = new Date('2024-06-28T00:00:00').toLocaleString('en-US', {
+    timeZone: 'Asia/Singapore',
+  })
+  if (new Date(currentDate) >= new Date(targetDate)) {
+    const sexAttribute = MYINFO_FIELD_TO_DRAWER_META[MyInfoAttribute.Sex]
+    if (sexAttribute) {
+      sexAttribute.label = 'Sex'
+    }
+    const childGenderAttribute =
+      MYINFO_FIELD_TO_DRAWER_META[MyInfoAttribute.ChildGender]
+    if (childGenderAttribute) {
+      childGenderAttribute.label = 'Sex'
+    }
+  }
+}
+updateLabelsBasedOnDate()
diff --git a/shared/constants/field/myinfo/index.ts b/shared/constants/field/myinfo/index.ts
@@ -394,3 +394,30 @@ export const types: MyInfoFieldBlock[] = [
 ]
 
 export const MYINFO_ATTRIBUTE_MAP = keyBy(types, 'name')
+
+// TODO: remove after 28 Jun 2024 as this would have fully taken effect
+function updateLabelBasedOnDate() {
+  const currentDate = new Date().toLocaleString('en-US', {
+    timeZone: 'Asia/Singapore',
+  })
+  const targetDate = new Date('2024-06-28T00:00:00').toLocaleString('en-US', {
+    timeZone: 'Asia/Singapore',
+  })
+  if (new Date(currentDate) >= new Date(targetDate)) {
+    const sexAttribute = MYINFO_ATTRIBUTE_MAP[MyInfoAttribute.Sex]
+    if (sexAttribute) {
+      sexAttribute.description = 'Sex'
+      sexAttribute.value = 'Sex'
+      sexAttribute.description =
+        'The sex of the form-filler. This field is verified by ICA for Singaporeans/PRs & foreigners on Long-Term Visit Pass, and by MOM for Employment Pass holders.'
+    }
+    const childGenderAttribute =
+      MYINFO_ATTRIBUTE_MAP[MyInfoAttribute.ChildGender]
+    if (childGenderAttribute) {
+      childGenderAttribute.value = "Child's Sex"
+      childGenderAttribute.description = 'Sex'
+    }
+  }
+}
+
+updateLabelBasedOnDate()