feat: address field

__tests__/unit/backend/helpers/generate-form-data.ts

@@ -279,12 +279,15 @@ export const generateNewSingleAnswerResponse = (
   customParams?: Partial<ProcessedSingleAnswerResponse>,
 ): ProcessedSingleAnswerResponse => {
   if (
-    [BasicField.Attachment, BasicField.Table, BasicField.Checkbox].includes(
-      fieldType,
-    )
+    [
+      BasicField.Attachment,
+      BasicField.Table,
+      BasicField.Checkbox,
+      BasicField.Address,
+    ].includes(fieldType)
   ) {
     throw new Error(
-      'Call the custom response generator functions for attachment, table and checkbox.',
+      'Call the custom response generator functions for attachment, address, table and checkbox.',
     )
   }
   return {

frontend/package.json

@@ -14,7 +14,7 @@
     "@growthbook/growthbook-react": "^0.17.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@loadable/component": "^5.16.4",
-    "@opengovsg/formsg-sdk": "^0.12.0-alpha.1",
+    "@opengovsg/formsg-sdk": "^0.13.0",
     "@stablelib/base64": "^1.0.1",
     "@stripe/react-stripe-js": "^1.15.0",
     "@stripe/stripe-js": "^1.44.1",

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx

@@ -23,6 +23,7 @@ import { useToast } from '~hooks/useToast'
 import IconButton from '~components/IconButton'
 import Tooltip from '~components/Tooltip'
 import {
+  AddressCompoundField,
   AttachmentField,
   CheckboxField,
   ChildrenCompoundField,
@@ -512,5 +513,7 @@ const FieldRow = ({ field, ...rest }: FieldRowProps) => {
       return <TableField schema={field} {...rest} />
     case BasicField.Children:
       return <ChildrenCompoundField schema={field} {...rest} />
+    case BasicField.Address:
+      return <AddressCompoundField schema={field} {...rest} />
   }
 }

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx

@@ -26,6 +26,7 @@ import {
   EditMyInfoChildren,
 } from './edit-fieldtype/EditMyInfoChildren'
 import {
+  EditAddress,
   EditAttachment,
   EditCheckbox,
   EditCountryRegion,
@@ -167,6 +168,8 @@ export const MemoFieldDrawerContent = memo<MemoFieldDrawerContentProps>(
         return <EditParagraph {...props} field={field} />
       case BasicField.Image:
         return <EditImage {...props} field={field} />
+      case BasicField.Address:
+        return <EditAddress {...props} field={field} />
       default:
         return <div>TODO: Insert field options here</div>
     }

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditAddress/EditAddress.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { AddressCompoundFieldBase, BasicField } from '~shared/types'
+
+import { createFormBuilderMocks } from '~/mocks/msw/handlers/admin-form'
+
+import { EditFieldDrawerDecorator, StoryRouter } from '~utils/storybook'
+
+import { EditAddress, EditAddressProps } from './EditAddress'
+
+const DEFAULT_ADDRESS_FIELD: AddressCompoundFieldBase = {
+  title: 'Local address',
+  description: '',
+  required: true,
+  disabled: false,
+  fieldType: BasicField.Address,
+  globalId: 'unused',
+}
+
+export default {
+  title: 'Features/AdminForm/EditFieldDrawer/EditAddress',
+  component: EditAddress,
+  decorators: [
+    StoryRouter({
+      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
+      path: '/:formId',
+    }),
+    EditFieldDrawerDecorator,
+  ],
+  parameters: {
+    // Required so skeleton "animation" does not hide content.
+    chromatic: { pauseAnimationAtEnd: true },
+    msw: createFormBuilderMocks({}, 0),
+  },
+  args: {
+    field: DEFAULT_ADDRESS_FIELD,
+  },
+} as Meta<EditAddressProps>
+
+interface StoryArgs {
+  field: AddressCompoundFieldBase
+}
+
+const Template: StoryFn<StoryArgs> = ({ field }) => {
+  return <EditAddress field={field} />
+}
+
+export const Default = Template.bind({})
+
+export const WithValues = Template.bind({})
+WithValues.args = {
+  field: {
+    ...DEFAULT_ADDRESS_FIELD,
+    title: 'Address Field Title',
+    description: 'Address Field Description',
+  },
+}

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditAddress/EditAddress.tsx

@@ -0,0 +1,77 @@
+import { useMemo } from 'react'
+import { FormControl } from '@chakra-ui/react'
+import { extend, pick } from 'lodash'
+
+import { AddressCompoundFieldBase } from '~shared/types/field'
+
+import { createBaseValidationRules } from '~utils/fieldValidation'
+import FormErrorMessage from '~components/FormControl/FormErrorMessage'
+import FormLabel from '~components/FormControl/FormLabel'
+import Input from '~components/Input'
+import Textarea from '~components/Textarea'
+import Toggle from '~components/Toggle'
+
+import { CreatePageDrawerContentContainer } from '~features/admin-form/create/common'
+
+import { FormFieldDrawerActions } from '../common/FormFieldDrawerActions'
+import { EditFieldProps } from '../common/types'
+import { useEditFieldForm } from '../common/useEditFieldForm'
+
+export type EditAddressProps = EditFieldProps<AddressCompoundFieldBase>
+
+type EditAddressInputs = Pick<
+  AddressCompoundFieldBase,
+  'title' | 'description' | 'required'
+>
+
+export const EditAddress = ({ field }: EditAddressProps): JSX.Element => {
+  const {
+    register,
+    formState: { errors },
+    getValues,
+    buttonText,
+    handleUpdateField,
+    watch,
+    control,
+    clearErrors,
+    isLoading,
+    handleCancel,
+    setValue,
+  } = useEditFieldForm<EditAddressInputs, AddressCompoundFieldBase>({
+    field,
+    transform: {
+      input: (inputField) =>
+        pick(inputField, ['title', 'description', 'required']),
+      output: (formOutput, originalField) =>
+        extend({}, originalField, formOutput),
+    },
+  })
+
+  const requiredValidationRule = useMemo(
+    () => createBaseValidationRules({ required: true }),
+    [],
+  )
+  return (
+    <CreatePageDrawerContentContainer>
+      <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
+        <FormLabel>Field Name</FormLabel>
+        <Input autoFocus {...register('title', requiredValidationRule)} />
+        <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
+      </FormControl>
+      <FormControl isReadOnly={isLoading} isInvalid={!!errors.description}>
+        <FormLabel>Description</FormLabel>
+        <Textarea {...register('description')} />
+        <FormErrorMessage>{errors?.description?.message}</FormErrorMessage>
+      </FormControl>
+      <FormControl isReadOnly={isLoading}>
+        <Toggle {...register('required')} label="Required" />
+      </FormControl>
+      <FormFieldDrawerActions
+        isLoading={isLoading}
+        buttonText={buttonText}
+        handleClick={handleUpdateField}
+        handleCancel={handleCancel}
+      />
+    </CreatePageDrawerContentContainer>
+  )
+}

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditAddress/index.ts

@@ -0,0 +1 @@
+export { EditAddress } from './EditAddress'

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/index.ts

@@ -1,3 +1,4 @@
+export * from './EditAddress'
 export * from './EditAttachment'
 export * from './EditCheckbox'
 export * from './EditCountryRegion'

frontend/src/features/admin-form/create/builder-and-design/constants.ts

@@ -27,6 +27,7 @@ export const BASIC_FIELDS_ORDERED = [
   BasicField.Email,
   BasicField.Mobile,
   BasicField.HomeNo,
+  BasicField.Address,
   BasicField.Date,
   BasicField.Image,
   BasicField.Table,

frontend/src/features/admin-form/create/builder-and-design/utils/fieldCreation.ts

@@ -212,6 +212,12 @@ export const getFieldCreationMeta = (fieldType: BasicField): FieldCreateDto => {
         ...baseMeta,
       }
     }
+    case BasicField.Address: {
+      return {
+        fieldType,
+        ...baseMeta,
+      }
+    }
   }
 }
 

frontend/src/features/admin-form/create/constants.ts

@@ -43,6 +43,7 @@ import {
   BiUser,
   BiUserVoice,
 } from 'react-icons/bi'
+import { SlLocationPin } from 'react-icons/sl'
 import { As } from '@chakra-ui/react'
 
 import { BasicField, MyInfoAttribute } from '~shared/types/field'
@@ -266,6 +267,24 @@ export const BASICFIELD_TO_DRAWER_META: {
     icon: BiGroup,
     isSubmitted: true,
   },
+
+  [BasicField.Address]: {
+    label: 'Local address',
+    icon: SlLocationPin,
+    isSubmitted: true,
+    searchAliases: [
+      'address',
+      'location',
+      'place',
+      'destination',
+      'directions',
+      'postal code',
+      'street',
+      'building',
+      'road',
+      'venue',
+    ],
+  },
 }
 
 const BiDummyIcon = BiCalendar // random icon that is not actually shown in app

frontend/src/features/admin-form/responses/IndividualResponsePage/DecryptedRow.tsx

@@ -10,7 +10,10 @@ import Spinner from '~components/Spinner'
 
 import { AugmentedDecryptedResponse } from '../ResponsesPage/storage/utils/augmentDecryptedResponses'
 
-import { useMutateDownloadAttachments } from './mutations'
+import {
+  handleAddressResponseDisplay,
+  useMutateDownloadAttachments,
+} from './mutations'
 
 export interface DecryptedRowBaseProps {
   row: AugmentedDecryptedResponse
@@ -104,6 +107,18 @@ const DecryptedAttachmentRow = ({
   )
 }
 
+const DecryptedAddressRow = ({ row }: DecryptedRowBaseProps): JSX.Element => {
+  const transformedAddress = handleAddressResponseDisplay(
+    row.answerArray as string[],
+  ).join(', ')
+  return (
+    <Stack>
+      <DecryptedQuestionLabel row={row} />
+      <Text textStyle="body-1">{transformedAddress}</Text>
+    </Stack>
+  )
+}
+
 export const DecryptedRow = memo(
   ({ row, attachmentDecryptionKey }: DecryptedRowProps): JSX.Element => {
     switch (row.fieldType) {
@@ -118,6 +133,8 @@ export const DecryptedRow = memo(
         )
       case BasicField.Table:
         return <DecryptedTableRow row={row} />
+      case BasicField.Address:
+        return <DecryptedAddressRow row={row} />
       default:
         return (
           <Stack>

frontend/src/features/admin-form/responses/IndividualResponsePage/mutations.ts

@@ -79,3 +79,29 @@ export const useMutateDownloadAttachments = () => {
 
   return { downloadAttachmentMutation, downloadAttachmentsAsZipMutation }
 }
+
+/**
+ * Converts address field info as Single Responses into single-line string for response page display
+ * String manipulation done on frontend in DecryptRow
+ * since backend requires inputs to be single responses for info to be separate csv columns
+ *
+ * responses format:
+ * ["blockNumber_161","streetName_BUKIT BATOK STREET 11","buildingName_","levelNumber_","unitNumber_","postalCode_650161"]
+ */
+export const handleAddressResponseDisplay = (responses: string[]) => {
+  const ans = responses
+  if (Array.isArray(ans)) {
+    let arr: string[] = []
+    if (ans.every((item) => typeof item === 'string')) {
+      arr = ans.map((item) => (item as string).split('_')[1])
+    }
+    if (arr && arr[arr.length - 1])
+      arr[arr.length - 1] = 'SINGAPORE ' + arr[arr.length - 1]
+    if (arr && arr[arr.length - 2] && arr[arr.length - 3]) {
+      const combinedUnit = '#' + arr[arr.length - 2] + '-' + arr[arr.length - 3]
+      arr.splice(arr.length - 3, 2, combinedUnit)
+    }
+    return arr
+  }
+  return responses
+}