opengovsg · wanlingt · Jul 20, 2023 · Jul 19, 2023 · Jul 19, 2023 · Jul 20, 2023
@@ -6,7 +6,7 @@ on:
     branches: [develop, release-al2, master]
 jobs:
   test:
-    timeout-minutes: 60
+    timeout-minutes: 40
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -24,10 +24,13 @@ jobs:
         run: npm run build
       - name: Run Playwright tests (login)
         run: npx playwright test __tests__/e2e/login.spec.ts
+        timeout-minutes: 5
       - name: Run Playwright tests (email-submission)
         run: npx playwright test __tests__/e2e/email-submission.spec.ts
+        timeout-minutes: 15
       - name: Run Playwright tests (encrypt-submission)
         run: npx playwright test __tests__/e2e/encrypt-submission.spec.ts
+        timeout-minutes: 10
       - uses: actions/upload-artifact@v3
         if: always()
         with:

@@ -4,17 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v6.66.0](https://github.com/opengovsg/FormSG/compare/v6.66.0...v6.66.0)
-
+#### [v6.67.0](https://github.com/opengovsg/FormSG/compare/v6.66.0...v6.67.0)
+
+- feat: experimental login integration with SGID [`#6552`](https://github.com/opengovsg/FormSG/pull/6552)
+- build: merge v6.66.0 into develop [`#6554`](https://github.com/opengovsg/FormSG/pull/6554)
+- fix: change instances of invoice to proof of payment [`#6553`](https://github.com/opengovsg/FormSG/pull/6553)
+- build: release v6.66.0 [`#6550`](https://github.com/opengovsg/FormSG/pull/6550)
+- feat: MyInfo Children compound fields beta [`#6523`](https://github.com/opengovsg/FormSG/pull/6523)
+- ci: adjust timeouts for playwright pipe [`#6551`](https://github.com/opengovsg/FormSG/pull/6551)
 - fix: use proof-of-payment for payment receipt/invoice [`#6549`](https://github.com/opengovsg/FormSG/pull/6549)
+- build(deps-dev): bump word-wrap from 1.2.3 to 1.2.4 in /frontend [`#6548`](https://github.com/opengovsg/FormSG/pull/6548)
+- fix(deps): bump word-wrap from 1.2.3 to 1.2.4 [`#6547`](https://github.com/opengovsg/FormSG/pull/6547)
+- build(deps): bump winston-cloudwatch to v6.2.0 [`#6545`](https://github.com/opengovsg/FormSG/pull/6545)
+- chore: bump version to v6.66.0 [`0233ba8`](https://github.com/opengovsg/FormSG/commit/0233ba8018532d4978d13717fac065f81e2eb515)
 
 #### [v6.66.0](https://github.com/opengovsg/FormSG/compare/v6.65.0...v6.66.0)
 
-> 19 July 2023
+> 18 July 2023
 
-- build(deps-dev): bump word-wrap from 1.2.3 to 1.2.4 in /frontend [`#6548`](https://github.com/opengovsg/FormSG/pull/6548)
-- fix(deps): bump word-wrap from 1.2.3 to 1.2.4 [`#6547`](https://github.com/opengovsg/FormSG/pull/6547)
-- build(deps): bump winston-cloudwatch to v6.2.0 [`#6545`](https://github.com/opengovsg/FormSG/pull/6545)
 - fix(deps): [Snyk] Security upgrade mongoose from 5.13.15 to 5.13.20 [`#6541`](https://github.com/opengovsg/FormSG/pull/6541)
 - feat: indicate if GST has been applied to a payment transaction [`#6538`](https://github.com/opengovsg/FormSG/pull/6538)
 - chore: reduce max payment limit [`#6543`](https://github.com/opengovsg/FormSG/pull/6543)
@@ -26,7 +33,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: merge v6.65.0 into develop [`#6531`](https://github.com/opengovsg/FormSG/pull/6531)
 - build: release v6.65.0 [`#6528`](https://github.com/opengovsg/FormSG/pull/6528)
 - fix: add FE validation rule that email domains must be non empty [`#6529`](https://github.com/opengovsg/FormSG/pull/6529)
-- chore: bump version to v6.66.0 [`ab91cd7`](https://github.com/opengovsg/FormSG/commit/ab91cd7dea0940d8cc05cd9d7ef9c642f8e37571)
+- chore: bump version to v6.66.0 [`b3a9818`](https://github.com/opengovsg/FormSG/commit/b3a9818762e334bc7126c029cdba63156bac85ed)
 
 #### [v6.65.0](https://github.com/opengovsg/FormSG/compare/v6.64.0...v6.65.0)
 
@@ -379,7 +386,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: only return previous payment id [`#6210`](https://github.com/opengovsg/FormSG/pull/6210)
 - build: merge release v6.45.0 to develop [`#6205`](https://github.com/opengovsg/FormSG/pull/6205)
 - build: release v6.45.0 [`#6200`](https://github.com/opengovsg/FormSG/pull/6200)
-- chore: bump version to v6.46.0 [`87fda0e`](https://github.com/opengovsg/FormSG/commit/87fda0e0ec4c937350ebd013a4a9762f4acee802)
+- chore: bump version to v6.46.0 [`767e7e5`](https://github.com/opengovsg/FormSG/commit/767e7e55c3e8f058963e890b1c249704d6db1459)
 
 #### [v6.45.0](https://github.com/opengovsg/FormSG/compare/v6.44.1...v6.45.0)
 

@@ -24,7 +24,8 @@ SINGPASS_ESRVC_ID=Test-eServiceId-Sp # Needed for MyInfo
 SGID_HOSTNAME=http://localhost:5156/sgid
 SGID_CLIENT_ID=sgidclientid
 SGID_CLIENT_SECRET=sgidclientsecret
-SGID_REDIRECT_URI=http://localhost:5000/sgid/login
+SGID_FORM_LOGIN_REDIRECT_URI=http://localhost:5000/sgid/login
+SGID_ADMIN_LOGIN_REDIRECT_URI=http://localhost:5000/api/v3/auth/sgid/login
 SGID_PRIVATE_KEY=./node_modules/@opengovsg/mockpass/static/certs/key.pem
 SGID_PUBLIC_KEY=./node_modules/@opengovsg/mockpass/static/certs/server.crt
 
@@ -74,13 +75,6 @@ APP_URL=http://localhost:5000
 SECRET_ENV=development
 INTRANET_IP_LIST_PATH=__tests__/setup/mock-intranet-ips.txt
 
-REACT_SWITCH_ENV_FEEDBACK_FORM_ID_ADMIN=62da6a569ee8e90143b5da26
-REACT_SWITCH_ENV_FEEDBACK_FORM_ID_RESPONDENT=62da6a569ee8e90143b5da26
-REACT_MIGRATION_ANGULAR_END_DATE=15 September 2022
-REACT_MIGRATION_RESP_ROLLOUT_EMAIL=100
-REACT_MIGRATION_RESP_ROLLOUT_STORAGE=100
-REACT_MIGRATION_ADMIN_ROLLOUT=100
-
 # Mockpass env vars
 MOCKPASS_NRIC=S9812379B
 MOCKPASS_UID=S8979373D # Not used by mockpass but keep in sync with MOCKPASS_UEN for Corppass tests

@@ -84,7 +84,8 @@ services:
       - SGID_HOSTNAME=http://localhost:5156/sgid
       - SGID_CLIENT_ID=sgidclientid
       - SGID_CLIENT_SECRET=sgidclientsecret
-      - SGID_REDIRECT_URI=http://localhost:5001/sgid/login
+      - SGID_ADMIN_LOGIN_REDIRECT_URI=http://localhost:5001/api/v3/auth/sgid/login
+      - SGID_FORM_LOGIN_REDIRECT_URI=http://localhost:5001/sgid/login
       - SGID_PRIVATE_KEY=./node_modules/@opengovsg/mockpass/static/certs/key.pem
       - SGID_PUBLIC_KEY=./node_modules/@opengovsg/mockpass/static/certs/server.crt
       - SES_PASS

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.66.0",
+  "version": "6.67.0",
   "homepage": ".",
   "private": true,
   "dependencies": {

@@ -13,6 +13,7 @@ import {
   LANDING_PAYMENTS_ROUTE,
   LANDING_ROUTE,
   LOGIN_ROUTE,
+  OGP_LOGIN_ROUTE,
   PAYMENT_PAGE_SUBROUTE,
   PRIVACY_POLICY_ROUTE,
   PUBLICFORM_ROUTE,
@@ -34,6 +35,7 @@ import {
   ResponsesPage,
 } from '~features/admin-form/responses'
 import { SettingsPage } from '~features/admin-form/settings/SettingsPage'
+import { SgidLoginPage } from '~features/login'
 import { FormPaymentPage } from '~features/public-form/components/FormPaymentPage/FormPaymentPage'
 import { BillingPage } from '~features/user/billing'
 
@@ -88,6 +90,10 @@ export const AppRouter = (): JSX.Element => {
           path={LOGIN_ROUTE}
           element={<PublicElement strict element={<LoginPage />} />}
         />
+        <Route
+          path={OGP_LOGIN_ROUTE}
+          element={<PublicElement strict element={<SgidLoginPage />} />}
+        />
         <Route
           path={PRIVACY_POLICY_ROUTE}
           element={<PublicElement element={<PrivacyPolicyPage />} />}

@@ -2,6 +2,7 @@ export const LANDING_ROUTE = '/'
 export const LANDING_PAYMENTS_ROUTE = '/payments'
 export const DASHBOARD_ROUTE = '/dashboard'
 export const LOGIN_ROUTE = '/login'
+export const OGP_LOGIN_ROUTE = '/ogp-login'
 
 export const TOU_ROUTE = '/terms'
 export const PRIVACY_POLICY_ROUTE = '/privacy'

@@ -24,6 +24,7 @@ import Tooltip from '~components/Tooltip'
 import {
   AttachmentField,
   CheckboxField,
+  ChildrenCompoundField,
   DateField,
   DecimalField,
   DropdownField,
@@ -495,5 +496,7 @@ const FieldRow = ({ field, ...rest }: FieldRowProps) => {
       return <YesNoField schema={field} {...rest} />
     case BasicField.Table:
       return <TableField schema={field} {...rest} />
+    case BasicField.Children:
+      return <ChildrenCompoundField schema={field} {...rest} />
   }
 }
@@ -1,12 +1,17 @@
 import { memo, useMemo } from 'react'
 
-import { BasicField, FieldCreateDto } from '~shared/types/field'
+import {
+  BasicField,
+  FieldCreateDto,
+  MyInfoAttribute,
+} from '~shared/types/field'
 
 import {
   BASICFIELD_TO_DRAWER_META,
   MYINFO_FIELD_TO_DRAWER_META,
 } from '~features/admin-form/create/constants'
 import { isMyInfo } from '~features/myinfo/utils'
+import { useUser } from '~features/user/queries'
 
 import { useBuilderFields } from '../../BuilderAndDesignContent/useBuilderFields'
 import {
@@ -16,6 +21,10 @@ import {
 } from '../../useFieldBuilderStore'
 import { BuilderDrawerContainer } from '../common/BuilderDrawerContainer'
 
+import {
+  ChildrenCompoundFieldMyInfo,
+  EditMyInfoChildren,
+} from './edit-fieldtype/EditMyInfoChildren'
 import {
   EditAttachment,
   EditCheckbox,
@@ -98,7 +107,19 @@ interface MemoFieldDrawerContentProps {
 
 export const MemoFieldDrawerContent = memo<MemoFieldDrawerContentProps>(
   ({ field, ...props }) => {
+    const { user } = useUser()
     if (isMyInfo(field)) {
+      if (
+        field?.myInfo?.attr === MyInfoAttribute.ChildrenBirthRecords &&
+        user?.betaFlags?.children
+      ) {
+        return (
+          <EditMyInfoChildren
+            {...props}
+            field={field as ChildrenCompoundFieldMyInfo}
+          />
+        )
+      }
       return <EditMyInfo {...props} field={field} />
     }
 

@@ -0,0 +1,148 @@
+import { Controller } from 'react-hook-form'
+import { BiCheck, BiData, BiX } from 'react-icons/bi'
+import { Box, FormControl, HStack, Icon, Text, VStack } from '@chakra-ui/react'
+import { extend } from 'lodash'
+
+import { MyInfoChildAttributes } from '~shared/types'
+
+import { SINGPASS_FAQ } from '~constants/links'
+import { MultiSelect } from '~components/Dropdown'
+import Link from '~components/Link'
+import { Toggle } from '~components/Toggle/Toggle'
+
+import { CREATE_MYINFO_CHILDREN_SUBFIELDS_OPTIONS } from '~features/admin-form/create/builder-and-design/constants'
+
+import { CreatePageDrawerContentContainer } from '../../../../../common'
+import { FormFieldDrawerActions } from '../common/FormFieldDrawerActions'
+import { EditFieldProps } from '../common/types'
+import { useEditFieldForm } from '../common/useEditFieldForm'
+import { extendWithMyInfo } from '../EditMyInfo/utils'
+
+import { ChildrenCompoundFieldMyInfo } from '.'
+
+const VerifiedIcon = ({ isVerified }: { isVerified: boolean }): JSX.Element => {
+  return (
+    <Icon
+      fontSize="1.5rem"
+      as={isVerified ? BiCheck : BiX}
+      color={isVerified ? 'success.500' : 'danger.500'}
+    />
+  )
+}
+
+const EDIT_MYINFO_CHILDREN = ['allowMultiple', 'childrenSubFields'] as const
+
+type EditMyInfoChildrenProps = EditFieldProps<ChildrenCompoundFieldMyInfo>
+type EditMyInfoChildrenInputs = Pick<
+  ChildrenCompoundFieldMyInfo,
+  typeof EDIT_MYINFO_CHILDREN[number]
+>
+
+export const EditMyInfoChildren = ({
+  field,
+}: EditMyInfoChildrenProps): JSX.Element => {
+  const extendedField = extendWithMyInfo(field)
+  const {
+    control,
+    register,
+    buttonText,
+    handleUpdateField,
+    isLoading,
+    handleCancel,
+  } = useEditFieldForm<EditMyInfoChildrenInputs, ChildrenCompoundFieldMyInfo>({
+    field,
+    transform: {
+      // MyInfo fields are not editable (except for Child compound field),
+      // so omit any transformation and output the original field
+      input: (inputField) => inputField,
+      output: (formOutput, originalField) =>
+        extend({}, originalField, formOutput),
+    },
+  })
+
+  return (
+    <CreatePageDrawerContentContainer>
+      <VStack align="flex-start">
+        <Text textStyle="subhead-1">Data source</Text>
+        {extendedField.dataSource.map((dataSource, idx) => (
+          <HStack key={idx} align="flex-start">
+            <Icon fontSize="1.5rem" as={BiData}></Icon>
+            <Text>{dataSource}</Text>
+          </HStack>
+        ))}
+      </VStack>
+      <VStack align="flex-start">
+        <Text textStyle="subhead-1">Verified for</Text>
+        {/* NOTE: Not creating an array from the keys then enumerating because order has to be enforced in UI.
+         *  This allows the object to be created with arbitrary ordered keys.
+         */}
+        <HStack>
+          <VerifiedIcon isVerified={extendedField.verifiedFor.singaporeans} />
+          <Text>Singaporeans</Text>
+        </HStack>
+        <HStack>
+          <VerifiedIcon isVerified={extendedField.verifiedFor.pr} />
+          <Text>Permanent Residents</Text>
+        </HStack>
+        <HStack>
+          <VerifiedIcon
+            isVerified={extendedField.verifiedFor.singpassforeigners}
+          />
+          <Text>
+            Foreigners with{' '}
+            <Link isExternal href={SINGPASS_FAQ}>
+              Singpass
+            </Link>
+          </Text>
+        </HStack>
+      </VStack>
+      <VStack align="flex-start">
+        <Text textStyle="subhead-1">
+          Collect the following child information
+        </Text>
+        <Box alignSelf="stretch">
+          <Controller
+            control={control}
+            name="childrenSubFields"
+            render={({ field: { value, onChange, ...rest } }) => (
+              <MultiSelect
+                items={CREATE_MYINFO_CHILDREN_SUBFIELDS_OPTIONS}
+                values={
+                  (value ?? [MyInfoChildAttributes.ChildName]) as string[]
+                }
+                // Always insert name
+                onChange={(val) =>
+                  onChange([
+                    MyInfoChildAttributes.ChildName,
+                    ...val.filter(
+                      (val) => val !== MyInfoChildAttributes.ChildName,
+                    ),
+                  ])
+                }
+                {...rest}
+              />
+            )}
+          />
+        </Box>
+      </VStack>
+      <VStack align="flex-start">
+        <FormControl isReadOnly={isLoading}>
+          <Toggle
+            {...register('allowMultiple')}
+            label="Allow respondent to add multiple children"
+          />
+        </FormControl>
+      </VStack>
+      <VStack align="flex-start">
+        <Text textStyle="subhead-1">Field details</Text>
+        <Text>{extendedField.details}</Text>
+      </VStack>
+      <FormFieldDrawerActions
+        isLoading={isLoading}
+        buttonText={buttonText}
+        handleClick={handleUpdateField}
+        handleCancel={handleCancel}
+      />
+    </CreatePageDrawerContentContainer>
+  )
+}
@@ -0,0 +1,10 @@
+import { SetRequired } from 'type-fest'
+
+import { ChildrenCompoundFieldBase } from '~shared/types'
+
+export * from './EditMyInfoChildren'
+
+export type ChildrenCompoundFieldMyInfo = SetRequired<
+  ChildrenCompoundFieldBase,
+  'myInfo'
+>