build: release v6.69.0

CREDITS.md

@@ -2229,36 +2229,6 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 02110-1301 USA
 
 
-## Project
-toastr
-
-### Source
-https://github.com/CodeSeven/toastr
-
-### License
-MIT License
-
-Copyright (c) 2017 Toastr Maintainers
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
 -------------------------------------------------------------------------------
 
 ## Project

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

@@ -13,6 +13,7 @@ import {
   IAttachmentFieldSchema,
   IAttachmentResponse,
   ICheckboxFieldSchema,
+  ICountryRegionFieldSchema,
   IDateFieldSchema,
   IDecimalFieldSchema,
   IDropdownFieldSchema,
@@ -117,6 +118,12 @@ export const generateDefaultField = (
         getQuestion: () => defaultParams.title,
         ...customParams,
       } as IDropdownFieldSchema
+    case BasicField.CountryRegion:
+      return {
+        ...defaultParams,
+        getQuestion: () => defaultParams.title,
+        ...customParams,
+      } as ICountryRegionFieldSchema
     case BasicField.Decimal:
       return {
         ...defaultParams,

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.68.0",
+  "version": "6.69.0",
   "homepage": ".",
   "private": true,
   "dependencies": {

frontend/src/constants/links.ts

@@ -31,8 +31,7 @@ export const GUIDE_PREVENT_EMAIL_BOUNCE =
 export const GUIDE_EMAIL_RELIABILITY =
   'https://go.gov.sg/formsg-guide-email-reliability'
 export const GUIDE_PREFILL = 'https://go.gov.sg/formsg-guide-prefills'
-export const GUIDE_STRIPE_ONBOARDING =
-  'https://go.gov.sg/formsg-stripe-onboarding'
+export const GUIDE_STRIPE_ONBOARDING = 'https://go.gov.sg/formsg-payments'
 export const GUIDE_PAYMENTS_ENTRY = 'https://go.gov.sg/formsg-payment-overview'
 export const GUIDE_PAYMENTS_INVOICE_DIFFERENCES =
   'https://go.gov.sg/formsg-payments-invoice-differences'

frontend/src/constants/validation.ts

@@ -6,3 +6,6 @@ export const INVALID_EMAIL_DOMAIN_ERROR =
 
 export const INVALID_DROPDOWN_OPTION_ERROR =
   'Entered value is not a valid dropdown option'
+
+export const INVALID_COUNTRY_REGION_OPTION_ERROR =
+  'Please select a valid country/region from the dropdown list'

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

@@ -25,6 +25,7 @@ import {
   AttachmentField,
   CheckboxField,
   ChildrenCompoundField,
+  CountryRegionField,
   DateField,
   DecimalField,
   DropdownField,
@@ -482,6 +483,8 @@ const FieldRow = ({ field, ...rest }: FieldRowProps) => {
       return <DateField schema={field} {...rest} />
     case BasicField.Dropdown:
       return <DropdownField schema={field} {...rest} />
+    case BasicField.CountryRegion:
+      return <CountryRegionField schema={field} {...rest} />
     case BasicField.ShortText:
       return <ShortTextField schema={field} {...rest} />
     case BasicField.LongText:

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

@@ -11,6 +11,7 @@ import Tooltip from '~components/Tooltip'
 import { PaymentPreview } from '~templates/Field/PaymentPreview/PaymentPreview'
 
 import { useAdminForm } from '~features/admin-form/common/queries'
+import { useDesignColorTheme } from '~features/admin-form/create/builder-and-design/utils/useDesignColorTheme'
 
 import {
   CreatePageSidebarContextProps,
@@ -59,6 +60,7 @@ export const PaymentView = () => {
   })
 
   const paymentRef = useRef<HTMLDivElement | null>(null)
+  const colourTheme = useDesignColorTheme()
 
   useEffect(() => {
     if (paymentState === PaymentState.EditingPayment) {
@@ -113,7 +115,7 @@ export const PaymentView = () => {
           >
             <Box p={{ base: '0.75rem', md: '1.5rem' }}>
               <PaymentPreview
-                colorTheme={form?.startPage.colorTheme}
+                colorTheme={colourTheme}
                 paymentDetails={paymentDetailsWithPlaceholderPreview}
                 isBuilder
               />

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

@@ -28,6 +28,7 @@ import {
 import {
   EditAttachment,
   EditCheckbox,
+  EditCountryRegion,
   EditDate,
   EditDecimal,
   EditDropdown,
@@ -130,6 +131,8 @@ export const MemoFieldDrawerContent = memo<MemoFieldDrawerContentProps>(
         return <EditCheckbox {...props} field={field} />
       case BasicField.Dropdown:
         return <EditDropdown {...props} field={field} />
+      case BasicField.CountryRegion:
+        return <EditCountryRegion {...props} field={field} />
       case BasicField.Mobile:
         return <EditMobile {...props} field={field} />
       case BasicField.HomeNo:

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

@@ -0,0 +1,51 @@
+import { Meta, Story } from '@storybook/react'
+
+import { CountryRegion } from '~shared/constants/countryRegion'
+import { BasicField, CountryRegionFieldBase } from '~shared/types'
+
+import { createFormBuilderMocks } from '~/mocks/msw/handlers/admin-form'
+
+import { EditFieldDrawerDecorator, StoryRouter } from '~utils/storybook'
+
+import { EditCountryRegion } from './EditCountryRegion'
+
+const DEFAULT_COUNTRY_REGION_FIELD: CountryRegionFieldBase = {
+  title: 'Storybook Country/Region',
+  description: 'Some description about Country/Region',
+  required: true,
+  disabled: false,
+  fieldType: BasicField.CountryRegion,
+  fieldOptions: Object.values(CountryRegion),
+  globalId: 'unused',
+}
+
+export default {
+  title: 'Features/AdminForm/EditFieldDrawer/EditCountryRegion',
+  component: EditCountryRegion,
+  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_COUNTRY_REGION_FIELD,
+  },
+} as Meta<StoryArgs>
+
+interface StoryArgs {
+  field: CountryRegionFieldBase
+}
+
+const Template: Story<StoryArgs> = ({ field }) => {
+  return <EditCountryRegion field={field} />
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'EditCountryRegion'

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

@@ -0,0 +1,92 @@
+import { useMemo } from 'react'
+import { FormControl } from '@chakra-ui/react'
+import { extend, pick } from 'lodash'
+
+import { CountryRegionFieldBase } 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'
+
+type EditCountryRegionProps = EditFieldProps<CountryRegionFieldBase>
+
+const EDIT_COUNTRY_FIELD_KEYS = ['title', 'description', 'required'] as const
+
+type EditCountryRegionKeys = typeof EDIT_COUNTRY_FIELD_KEYS[number]
+
+type EditCountryRegionInputs = Pick<
+  CountryRegionFieldBase,
+  EditCountryRegionKeys
+>
+
+const transformCountryRegionFieldToEditForm = (
+  field: CountryRegionFieldBase,
+): EditCountryRegionInputs => {
+  return {
+    ...pick(field, EDIT_COUNTRY_FIELD_KEYS),
+  }
+}
+
+const transformCountryRegionEditFormToField = (
+  inputs: EditCountryRegionInputs,
+  originalField: CountryRegionFieldBase,
+): CountryRegionFieldBase => {
+  return extend({}, originalField, inputs, {})
+}
+
+export const EditCountryRegion = ({
+  field,
+}: EditCountryRegionProps): JSX.Element => {
+  const {
+    register,
+    formState: { errors },
+    buttonText,
+    handleUpdateField,
+    isLoading,
+    handleCancel,
+  } = useEditFieldForm<EditCountryRegionInputs, CountryRegionFieldBase>({
+    field,
+    transform: {
+      input: transformCountryRegionFieldToEditForm,
+      output: transformCountryRegionEditFormToField,
+    },
+  })
+
+  const requiredValidationRule = useMemo(
+    () => createBaseValidationRules({ required: true }),
+    [],
+  )
+
+  return (
+    <CreatePageDrawerContentContainer>
+      <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
+        <FormLabel>Question</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/EditCountryRegion/index.ts

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

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

@@ -1,5 +1,6 @@
 export * from './EditAttachment'
 export * from './EditCheckbox'
+export * from './EditCountryRegion'
 export * from './EditDate'
 export * from './EditDecimal'
 export * from './EditDropdown'

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/FixedPaymentAmountField.tsx

@@ -38,7 +38,7 @@ export const FixedPaymentAmountField = ({
       isInvalid={!!errors[DISPLAY_AMOUNT_FIELD_KEY]}
       isRequired
     >
-      <FormLabel isRequired description="Amount should include GST">
+      <FormLabel isRequired description="Including GST">
         Payment amount
       </FormLabel>
       <Controller

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-hook-form'
 import { Link as ReactLink } from 'react-router-dom'
 import { useDebounce } from 'react-use'
-import { Box, FormControl, Link, Text, Textarea } from '@chakra-ui/react'
+import { Box, FormControl, Link, Stack, Text } from '@chakra-ui/react'
 import { cloneDeep } from 'lodash'
 
 import {
@@ -204,31 +204,33 @@ const PaymentInput = ({
           )}
         />
       </FormControl>
-      <FormControl
-        isReadOnly={paymentsMutation.isLoading}
-        isInvalid={!!errors.name}
-        isDisabled={isDisabled}
-        isRequired
-      >
-        <FormLabel description="This will be reflected on the proof of payment">
-          Product/service name
-        </FormLabel>
-        <Input
-          {...register('name', {
-            required: 'This field is required',
-          })}
-        />
-        <FormErrorMessage>{errors.name?.message}</FormErrorMessage>
-      </FormControl>
-      <FormControl
-        isReadOnly={paymentsMutation.isLoading}
-        isDisabled={isDisabled}
-        isRequired
-      >
-        <FormLabel>Description</FormLabel>
-        <Textarea {...register('description')} />
-        <FormErrorMessage>{errors.description?.message}</FormErrorMessage>
-      </FormControl>
+      <Stack spacing="2rem">
+        <FormControl
+          isReadOnly={paymentsMutation.isLoading}
+          isInvalid={!!errors.name}
+          isDisabled={isDisabled}
+          isRequired
+        >
+          <FormLabel description="This will be reflected on the proof of payment">
+            Product/service name
+          </FormLabel>
+          <Input
+            {...register('name', {
+              required: 'This field is required',
+            })}
+          />
+          <FormErrorMessage>{errors.name?.message}</FormErrorMessage>
+        </FormControl>
+        <FormControl
+          isReadOnly={paymentsMutation.isLoading}
+          isDisabled={isDisabled}
+          isRequired
+        >
+          <FormLabel>Description</FormLabel>
+          <Input {...register('description')} />
+          <FormErrorMessage>{errors.description?.message}</FormErrorMessage>
+        </FormControl>
+      </Stack>
       {paymentsData?.payment_type === PaymentType.Variable ? (
         <VariablePaymentAmountField
           isLoading={paymentsMutation.isLoading}