feat: add model fields to represent translations for form fields (#7457)

* feat: add fields in model to represent translations for form fields

* feat: add shared types to represent form field translations

* fix: use unicode locales

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

@@ -51,6 +51,8 @@ export const generateDefaultField = (
     fieldType,
     required: true,
     disabled: false,
+    titleTranslations: [],
+    descriptionTranslations: [],
   }
   switch (fieldType) {
     case BasicField.Table:
@@ -77,6 +79,7 @@ export const generateDefaultField = (
       return {
         ...defaultParams,
         fieldOptions: ['Option 1', 'Option 2'],
+        fieldOptionsTranslations: [],
         getQuestion: () => defaultParams.title,
         ValidationOptions: {
           customMin: null,
@@ -116,6 +119,7 @@ export const generateDefaultField = (
       return {
         ...defaultParams,
         fieldOptions: ['Option 1', 'Option 2'],
+        fieldOptionsTranslations: [],
         getQuestion: () => defaultParams.title,
         ...customParams,
       } as IDropdownFieldSchema
@@ -376,6 +380,7 @@ export const generateTableDropdownColumn = (
     required: true,
     _id: new ObjectId().toHexString(),
     fieldOptions: ['a', 'b', 'c'],
+    fieldOptionsTranslations: [],
     ...customParams,
     toObject() {
       // mock toObject method of mongoose document
@@ -385,6 +390,7 @@ export const generateTableDropdownColumn = (
         required: true,
         _id: new ObjectId().toHexString(),
         fieldOptions: ['a', 'b', 'c'],
+        fieldOptionsTranslations: [],
         ...customParams,
       }
     },

shared/constants/form.ts

@@ -9,8 +9,10 @@ const PUBLIC_FORM_FIELDS = [
   'form_logics',
   'hasCaptcha',
   'hasIssueNotification',
+  'hasMultiLang',
   'startPage',
   'status',
+  'supportedLanguages',
   'title',
   '_id',
   'responseMode',
@@ -43,6 +45,8 @@ const FORM_SETTINGS_FIELDS = [
   'submissionLimit',
   'title',
   'webhook',
+  'hasMultiLang',
+  'supportedLanguages',
 ] as const
 
 export const EMAIL_FORM_SETTINGS_FIELDS = [

shared/types/field/base.ts

@@ -1,3 +1,5 @@
+import { Language } from '../form'
+
 export enum BasicField {
   Section = 'section',
   Statement = 'statement',
@@ -96,13 +98,20 @@ export type VerifiableFieldBase = {
   isVerifiable: boolean
 }
 
+export type TranslationMapping = {
+  language: Language
+  translation: string
+}
+
 export type FieldBase = {
   globalId?: string
   title: string
   description: string
   required: boolean
   disabled: boolean
   fieldType: BasicField
+  titleTranslations?: TranslationMapping[]
+  descriptionTranslations?: TranslationMapping[]
 }
 
 export type MyInfoableFieldBase = FieldBase & AllowMyInfoBase

shared/types/field/checkboxField.ts

@@ -1,3 +1,4 @@
+import { TranslationOptionMapping } from '../form'
 import { BasicField, FieldBase } from './base'
 
 export type CheckboxValidationOptions = {
@@ -8,6 +9,7 @@ export type CheckboxValidationOptions = {
 export interface CheckboxFieldBase extends FieldBase {
   fieldType: BasicField.Checkbox
   fieldOptions: string[]
+  fieldOptionsTranslations?: TranslationOptionMapping[]
   othersRadioButton: boolean
   ValidationOptions: CheckboxValidationOptions
   validateByValue: boolean

shared/types/field/dropdownField.ts

@@ -1,6 +1,8 @@
+import { TranslationOptionMapping } from '../form'
 import { BasicField, MyInfoableFieldBase } from './base'
 
 export interface DropdownFieldBase extends MyInfoableFieldBase {
   fieldType: BasicField.Dropdown
   fieldOptions: string[]
+  fieldOptionsTranslations?: TranslationOptionMapping[]
 }

shared/types/field/radioField.ts

@@ -1,7 +1,9 @@
+import { TranslationOptionMapping } from '../form'
 import { BasicField, FieldBase } from './base'
 
 export interface RadioFieldBase extends FieldBase {
   fieldType: BasicField.Radio
   fieldOptions: string[]
+  fieldOptionsTranslations?: TranslationOptionMapping[]
   othersRadioButton: boolean
 }

shared/types/field/tableField.ts

@@ -1,12 +1,13 @@
 import type { Merge } from 'type-fest'
-import { FieldBase, BasicField } from './base'
+import { FieldBase, BasicField, TranslationMapping } from './base'
 import { DropdownFieldBase } from './dropdownField'
 import { ShortTextFieldBase } from './shortTextField'
 
 // Column types do not have most field base props.
 type ColumnBase<T extends FieldBase> = Omit<T, keyof FieldBase> & {
   title: string
   required: boolean
+  titleTranslations?: TranslationMapping[]
 }
 export interface ShortTextColumnBase extends ColumnBase<ShortTextFieldBase> {
   columnType: BasicField.ShortText

shared/types/form/form.ts

@@ -1,5 +1,10 @@
 import { PublicUserDto, UserDto } from '../user'
-import { FormField, FormFieldDto, MyInfoChildData } from '../field'
+import {
+  FormField,
+  FormFieldDto,
+  MyInfoChildData,
+  TranslationMapping,
+} from '../field'
 
 import { FormLogo } from './form_logo'
 import type { Merge, Tagged, PartialDeep } from 'type-fest'
@@ -36,11 +41,17 @@ export type FormPermission = {
   write: boolean
 }
 
+export type TranslationOptionMapping = {
+  language: Language
+  translation: string[]
+}
+
 export type FormStartPage = {
   logo: FormLogo
   colorTheme: FormColorTheme
   estTimeTaken?: number
   paragraph?: string
+  paragraphTranslations?: TranslationMapping[]
 }
 
 export type FormEndPage = {
@@ -50,6 +61,8 @@ export type FormEndPage = {
   buttonText: string
   paymentTitle: string
   paymentParagraph: string
+  titleTranslations?: TranslationMapping[]
+  paragraphTranslations?: TranslationMapping[]
 }
 
 export enum FormAuthType {
@@ -61,12 +74,24 @@ export enum FormAuthType {
   SGID_MyInfo = 'SGID_MyInfo',
 }
 
+export enum Language {
+  ENGLISH = 'en-SG',
+  CHINESE = 'zh-SG',
+  MALAY = 'ms-SG',
+  TAMIL = 'ta-SG',
+}
+
 export enum FormStatus {
   Private = 'PRIVATE',
   Public = 'PUBLIC',
   Archived = 'ARCHIVED',
 }
 
+export type FormSupportedLanguages = {
+  nextSupportedLanguages?: Language[]
+  selectedLanguage?: Language | null
+}
+
 export type FormWebhook = {
   url: string
   isRetryEnabled: boolean
@@ -164,6 +189,9 @@ export interface FormBase {
   responseMode: FormResponseMode
 
   goLinkSuffix?: string
+
+  hasMultiLang?: boolean
+  supportedLanguages?: Language[]
 }
 
 export interface EmailFormBase extends FormBase {

src/app/models/__tests__/form.server.model.spec.ts

@@ -55,6 +55,7 @@ const MOCK_ADMIN_EMAIL = `test@${MOCK_ADMIN_DOMAIN}`
 const MOCK_FORM_PARAMS = {
   title: 'Test Form',
   admin: MOCK_ADMIN_OBJ_ID,
+  supportedLanguages: [],
 }
 const MOCK_ENCRYPTED_FORM_PARAMS = {
   ...MOCK_FORM_PARAMS,
@@ -84,12 +85,15 @@ const FORM_DEFAULTS = {
     logo: {
       state: FormLogoState.Default,
     },
+    paragraphTranslations: [],
   },
   endPage: {
     title: 'Thank you for filling out the form.',
     buttonText: 'Submit another response',
     paymentTitle: 'Thank you, your payment has been made successfully.',
     paymentParagraph: 'Your form has been submitted and payment has been made.',
+    titleTranslations: [],
+    paragraphTranslations: [],
   },
   hasCaptcha: true,
   hasIssueNotification: true,
@@ -1873,7 +1877,11 @@ describe('Form Model', () => {
         expect(actual?.toObject()).toEqual({
           ...form,
           lastModified: expect.any(Date),
-          endPage: { ...updatedEndPage },
+          endPage: {
+            ...updatedEndPage,
+            paragraphTranslations: [],
+            titleTranslations: [],
+          },
         })
       })
 
@@ -1904,6 +1912,8 @@ describe('Form Model', () => {
             paymentParagraph:
               'Your form has been submitted and payment has been made.',
             paymentTitle: 'Thank you, your payment has been made successfully.',
+            paragraphTranslations: [],
+            titleTranslations: [],
           },
         })
       })
@@ -2167,6 +2177,7 @@ describe('Form Model', () => {
             logo: {
               state: FormLogoState.Default,
             },
+            paragraphTranslations: [],
           },
         })
       })

src/app/models/field/baseField.ts

@@ -1,7 +1,7 @@
 import { Schema } from 'mongoose'
 import UIDGenerator from 'uid-generator'
 
-import { BasicField, MyInfoAttribute } from '../../../../shared/types'
+import { BasicField, Language, MyInfoAttribute } from '../../../../shared/types'
 import { IFieldSchema, IMyInfoSchema, ITableFieldSchema } from '../../../types'
 
 const uidgen3 = new UIDGenerator(256, UIDGenerator.BASE62)
@@ -45,6 +45,36 @@ export const BaseFieldSchema = new Schema<IFieldSchema>(
       enum: Object.values(BasicField),
       required: true,
     },
+    titleTranslations: {
+      type: [
+        {
+          language: {
+            type: String,
+            enum: Object.values(Language),
+          },
+          translation: {
+            type: String,
+          },
+        },
+      ],
+      default: [],
+      _id: false,
+    },
+    descriptionTranslations: {
+      type: [
+        {
+          language: {
+            type: String,
+            enum: Object.values(Language),
+          },
+          translation: {
+            type: String,
+          },
+        },
+      ],
+      default: [],
+      _id: false,
+    },
   },
   {
     discriminatorKey: 'fieldType',

src/app/models/field/checkboxField.ts

@@ -1,4 +1,5 @@
 import { Schema } from 'mongoose'
+import { Language } from 'shared/types'
 
 import { ICheckboxFieldSchema } from '../../../types'
 
@@ -13,6 +14,18 @@ const createCheckboxFieldSchema = () => {
         message: 'Please ensure that there are no duplicate checkbox options.',
       },
     },
+    fieldOptionsTranslations: {
+      type: [
+        {
+          language: {
+            type: String,
+            enum: Object.values(Language),
+          },
+          translation: [String],
+        },
+      ],
+      default: [],
+    },
     othersRadioButton: {
       type: Boolean,
       default: false,

src/app/models/field/dropdownField.ts

@@ -1,4 +1,5 @@
 import { Schema } from 'mongoose'
+import { Language } from 'shared/types'
 
 import { IDropdownFieldSchema } from '../../../types'
 
@@ -7,6 +8,18 @@ import { MyInfoSchema } from './baseField'
 const createDropdownFieldSchema = () => {
   return new Schema<IDropdownFieldSchema>({
     fieldOptions: [String],
+    fieldOptionsTranslations: {
+      type: [
+        {
+          language: {
+            type: String,
+            enum: Object.values(Language),
+          },
+          translation: [String],
+        },
+      ],
+      default: [],
+    },
     myInfo: MyInfoSchema,
   })
 }

src/app/models/field/radioField.ts

@@ -1,10 +1,23 @@
 import { Schema } from 'mongoose'
+import { Language } from 'shared/types'
 
 import { IRadioFieldSchema } from '../../../types'
 
 const createRadioFieldSchema = () => {
   return new Schema<IRadioFieldSchema>({
     fieldOptions: [String],
+    fieldOptionsTranslations: {
+      type: [
+        {
+          language: {
+            type: String,
+            enum: Object.values(Language),
+          },
+          translation: [String],
+        },
+      ],
+      default: [],
+    },
     othersRadioButton: {
       type: Boolean,
       default: false,