From 217da4062611308d3bd146694b41c99313326d4d Mon Sep 17 00:00:00 2001
From: littlemight <mfang555@gmail.com>
Date: Thu, 30 Oct 2025 20:58:29 +0800
Subject: [PATCH 1/6] feat(i18n): extract text from dropdown field + AI
 generated translation

---
 .../MultiSelect/MultiSelectProvider.tsx       | 25 ++++++++++++++-----
 .../SingleSelect/SingleSelectProvider.tsx     |  8 ++++--
 .../features/public-form/fields/en-sg.ts      |  2 ++
 .../features/public-form/fields/index.ts      |  2 ++
 .../features/public-form/fields/ms-sg.ts      |  2 ++
 .../features/public-form/fields/ta-sg.ts      |  2 ++
 .../features/public-form/fields/zh-sg.ts      |  2 ++
 7 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Dropdown/MultiSelect/MultiSelectProvider.tsx b/frontend/src/components/Dropdown/MultiSelect/MultiSelectProvider.tsx
index fc8473ad51..36f59994dd 100644
--- a/frontend/src/components/Dropdown/MultiSelect/MultiSelectProvider.tsx
+++ b/frontend/src/components/Dropdown/MultiSelect/MultiSelectProvider.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { VirtuosoHandle } from 'react-virtuoso'
 import {
   FormControlOptions,
@@ -73,9 +74,9 @@ export const MultiSelectProvider = ({
   onBlur,
   name,
   filter = defaultFilter,
-  nothingFoundLabel = 'No matching results',
+  nothingFoundLabel,
   placeholder: placeholderProp,
-  clearButtonLabel = 'Clear selection',
+  clearButtonLabel,
   isSearchable = true,
   defaultIsOpen,
   isInvalid: isInvalidProp,
@@ -92,6 +93,7 @@ export const MultiSelectProvider = ({
 }: MultiSelectProviderProps): JSX.Element => {
   const { items, getItemByValue } = useItems({ rawItems })
   const [isFocused, setIsFocused] = useState(false)
+  const { t } = useTranslation()
 
   // Inject for components to manipulate
   const inputRef = useRef<HTMLInputElement | null>(null)
@@ -171,8 +173,19 @@ export const MultiSelectProvider = ({
 
   const dynamicPlaceholder = useMemo(() => {
     if (placeholderProp === null || selectedItems.length > 0) return ''
-    return placeholderProp ?? 'Select options'
-  }, [placeholderProp, selectedItems.length])
+    return (
+      placeholderProp ??
+      t('features.publicForm.components.fields.dropdown.selectOptions')
+    )
+  }, [placeholderProp, selectedItems.length, t])
+
+  const nothingFoundLabelTranslated =
+    nothingFoundLabel ??
+    t('features.publicForm.components.fields.dropdown.nothingFound')
+
+  const clearButtonLabelTranslated =
+    clearButtonLabel ??
+    t('features.publicForm.components.fields.dropdown.clearSelection')
 
   const {
     toggleMenu,
@@ -313,11 +326,11 @@ export const MultiSelectProvider = ({
         selectItem,
         highlightedIndex,
         items: filteredItems,
-        nothingFoundLabel,
+        nothingFoundLabel: nothingFoundLabelTranslated,
         inputValue,
         isSearchable,
         name,
-        clearButtonLabel,
+        clearButtonLabel: clearButtonLabelTranslated,
         placeholder: dynamicPlaceholder,
         styles,
         isFocused,
diff --git a/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx b/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx
index 5746e64cba..3404f077d9 100644
--- a/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx
+++ b/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx
@@ -53,7 +53,7 @@ export const SingleSelectProvider = ({
   name,
   filter = defaultFilter,
   placeholder: placeholderProp,
-  clearButtonLabel = 'Clear selection',
+  clearButtonLabel,
   isClearable = true,
   isSearchable = true,
   initialIsOpen,
@@ -94,6 +94,10 @@ export const SingleSelectProvider = ({
     'features.publicForm.components.fields.dropdown.nothingFound',
   )
 
+  const clearButtonLabelTranslated =
+    clearButtonLabel ??
+    t('features.publicForm.components.fields.dropdown.clearSelection')
+
   const getFilteredItems = useCallback(
     (filterValue?: string) =>
       filterValue ? filter(items, filterValue) : items,
@@ -274,7 +278,7 @@ export const SingleSelectProvider = ({
         isReadOnly,
         isRequired,
         name,
-        clearButtonLabel,
+        clearButtonLabel: clearButtonLabelTranslated,
         placeholder,
         styles,
         isFocused,
diff --git a/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts
index a258ed65d4..880512098f 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts
@@ -11,6 +11,8 @@ export const enSG: Fields = {
   dropdown: {
     placeholder: 'Select an option',
     nothingFound: 'No matching results',
+    clearSelection: 'Clear selection',
+    selectOptions: 'Select options',
   },
   attachment: {
     disabled: 'Attachment upload is disabled for you',
diff --git a/frontend/src/i18n/locales/features/public-form/fields/index.ts b/frontend/src/i18n/locales/features/public-form/fields/index.ts
index 2bb314f040..32c43f39b2 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/index.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/index.ts
@@ -9,6 +9,8 @@ export interface Fields {
   dropdown: {
     placeholder: string
     nothingFound: string
+    clearSelection: string
+    selectOptions: string
   }
   email: {
     validation: {
diff --git a/frontend/src/i18n/locales/features/public-form/fields/ms-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/ms-sg.ts
index 4feace59c8..d0414f86d5 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/ms-sg.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/ms-sg.ts
@@ -13,6 +13,8 @@ export const msSG: PartialDeep<Fields> = {
   dropdown: {
     placeholder: 'Pilih satu pilihan',
     nothingFound: 'Tiada hasil yang sepadan',
+    clearSelection: 'Kosongkan pilihan',
+    selectOptions: 'Pilih pilihan',
   },
   attachment: {
     maxFileSize: 'Saiz fail maksimum: {readableMaxSize}',
diff --git a/frontend/src/i18n/locales/features/public-form/fields/ta-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/ta-sg.ts
index 61a2d36983..41b8d0dad6 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/ta-sg.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/ta-sg.ts
@@ -13,6 +13,8 @@ export const taSG: PartialDeep<Fields> = {
   dropdown: {
     placeholder: 'ஒரு விருப்பத்தை தேர்வு செய்யவும்',
     nothingFound: 'முடிவுகள் எதுவும் பொருந்தவில்லை',
+    clearSelection: 'தேர்வை அழிக்கவும்',
+    selectOptions: 'விருப்பங்களைத் தேர்ந்தெடுக்கவும்',
   },
   attachment: {
     maxFileSize: 'கோப்பின் அதிகபட்ச அளவு: {readableMaxSize}',
diff --git a/frontend/src/i18n/locales/features/public-form/fields/zh-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/zh-sg.ts
index 2817c80298..bdb4a944e9 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/zh-sg.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/zh-sg.ts
@@ -13,6 +13,8 @@ export const zhSG: PartialDeep<Fields> = {
   dropdown: {
     placeholder: '请选择一个选项',
     nothingFound: '没有匹配结果',
+    clearSelection: '清除选择',
+    selectOptions: '选择选项',
   },
   attachment: {
     maxFileSize: '文件限制：不超过 {readableMaxSize}',

From bc9ea3d262ac0199b9bb41eded7c155a5d4eb63c Mon Sep 17 00:00:00 2001
From: littlemight <mfang555@gmail.com>
Date: Thu, 30 Oct 2025 21:06:20 +0800
Subject: [PATCH 2/6] feaet(i18n): extract text from calendar field +
 translation

---
 .../Calendar/CalendarBase/CalendarTodayButton.tsx  |  9 +++++++--
 .../components/DatePicker/DatePickerContext.tsx    | 14 ++++++++++----
 .../locales/features/public-form/fields/en-sg.ts   |  9 +++++++++
 .../locales/features/public-form/fields/index.ts   |  9 +++++++++
 .../locales/features/public-form/fields/ms-sg.ts   |  9 +++++++++
 .../locales/features/public-form/fields/ta-sg.ts   |  9 +++++++++
 .../locales/features/public-form/fields/zh-sg.ts   |  9 +++++++++
 7 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Calendar/CalendarBase/CalendarTodayButton.tsx b/frontend/src/components/Calendar/CalendarBase/CalendarTodayButton.tsx
index 2e25ac4a4e..17ec57815b 100644
--- a/frontend/src/components/Calendar/CalendarBase/CalendarTodayButton.tsx
+++ b/frontend/src/components/Calendar/CalendarBase/CalendarTodayButton.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { Box } from '@chakra-ui/react'
 
 import Button from '~components/Button'
@@ -8,16 +9,20 @@ import { useCalendarStyles } from './CalendarStyleProvider'
 export const CalendarTodayButton = (): JSX.Element => {
   const styles = useCalendarStyles()
   const { handleTodayClick, colorScheme } = useCalendar()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.publicForm.components.fields.calendar',
+  })
+
   return (
     <Box sx={styles.todayLinkContainer}>
       <Button
-        aria-label="Focus on today's date"
+        aria-label={t('todayAriaLabel')}
         colorScheme={colorScheme}
         variant="link"
         type="button"
         onClick={handleTodayClick}
       >
-        Today
+        {t('today')}
       </Button>
     </Box>
   )
diff --git a/frontend/src/components/DatePicker/DatePickerContext.tsx b/frontend/src/components/DatePicker/DatePickerContext.tsx
index 03ccd5165f..4652aa1736 100644
--- a/frontend/src/components/DatePicker/DatePickerContext.tsx
+++ b/frontend/src/components/DatePicker/DatePickerContext.tsx
@@ -10,6 +10,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   CSSObject,
   FormControlProps,
@@ -101,6 +102,9 @@ const useProvideDatePicker = ({
   const inputRef = useRef<HTMLInputElement>(null)
 
   const isMobile = useIsMobile()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.publicForm.components.fields.datePicker',
+  })
 
   const disclosureProps = useDisclosure({
     onClose: () => {
@@ -161,16 +165,18 @@ const useProvideDatePicker = ({
   )
 
   const calendarButtonAria = useMemo(() => {
-    let ariaLabel = 'Select from date picker. '
+    let ariaLabel = t('selectFromDatePicker')
     if (internalValue) {
       if (isValid(internalValue)) {
-        ariaLabel += `Selected date is ${internalValue.toLocaleDateString()}.`
+        ariaLabel += t('selectedDateIs', {
+          date: internalValue.toLocaleDateString(),
+        })
       } else {
-        ariaLabel += 'The current selected date is invalid.'
+        ariaLabel += t('invalidDate')
       }
     }
     return ariaLabel
-  }, [internalValue])
+  }, [internalValue, t])
 
   const handleDateChange = useCallback(
     (date: Date | null) => {
diff --git a/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts
index 880512098f..c38866c093 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/en-sg.ts
@@ -66,4 +66,13 @@ export const enSG: Fields = {
     title: 'Send the following emails a copy of my responses upon submission',
     info: 'Separate multiple email addresses with a comma',
   },
+  calendar: {
+    today: 'Today',
+    todayAriaLabel: "Focus on today's date",
+  },
+  datePicker: {
+    selectFromDatePicker: 'Select from date picker. ',
+    selectedDateIs: 'Selected date is {date}.',
+    invalidDate: 'The current selected date is invalid.',
+  },
 }
diff --git a/frontend/src/i18n/locales/features/public-form/fields/index.ts b/frontend/src/i18n/locales/features/public-form/fields/index.ts
index 32c43f39b2..a908eff81c 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/index.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/index.ts
@@ -57,6 +57,15 @@ export interface Fields {
     title: string
     info: string
   }
+  calendar: {
+    today: string
+    todayAriaLabel: string
+  }
+  datePicker: {
+    selectFromDatePicker: string
+    selectedDateIs: string
+    invalidDate: string
+  }
 }
 
 export * from './en-sg'
diff --git a/frontend/src/i18n/locales/features/public-form/fields/ms-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/ms-sg.ts
index d0414f86d5..afbc025432 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/ms-sg.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/ms-sg.ts
@@ -45,4 +45,13 @@ export const msSG: PartialDeep<Fields> = {
       },
     },
   },
+  calendar: {
+    today: 'Hari ini',
+    todayAriaLabel: 'Fokus pada tarikh hari ini',
+  },
+  datePicker: {
+    selectFromDatePicker: 'Pilih dari pemilih tarikh. ',
+    selectedDateIs: 'Tarikh yang dipilih ialah {date}.',
+    invalidDate: 'Tarikh yang dipilih semasa tidak sah.',
+  },
 }
diff --git a/frontend/src/i18n/locales/features/public-form/fields/ta-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/ta-sg.ts
index 41b8d0dad6..138c59c751 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/ta-sg.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/ta-sg.ts
@@ -45,4 +45,13 @@ export const taSG: PartialDeep<Fields> = {
       },
     },
   },
+  calendar: {
+    today: 'இன்று',
+    todayAriaLabel: 'இன்றைய தேதியைக் கவனியுங்கள்',
+  },
+  datePicker: {
+    selectFromDatePicker: 'தேதி தேர்வியிலிருந்து தேர்ந்தெடுக்கவும். ',
+    selectedDateIs: 'தேர்ந்தெடுக்கப்பட்ட தேதி {date}.',
+    invalidDate: 'தற்போது தேர்ந்தெடுக்கப்பட்ட தேதி தவறானது.',
+  },
 }
diff --git a/frontend/src/i18n/locales/features/public-form/fields/zh-sg.ts b/frontend/src/i18n/locales/features/public-form/fields/zh-sg.ts
index bdb4a944e9..7f91b9884b 100644
--- a/frontend/src/i18n/locales/features/public-form/fields/zh-sg.ts
+++ b/frontend/src/i18n/locales/features/public-form/fields/zh-sg.ts
@@ -42,4 +42,13 @@ export const zhSG: PartialDeep<Fields> = {
       },
     },
   },
+  calendar: {
+    today: '今天',
+    todayAriaLabel: '专注于今天的日期',
+  },
+  datePicker: {
+    selectFromDatePicker: '从日期选择器中选择。',
+    selectedDateIs: '选择的日期是 {date}。',
+    invalidDate: '当前选择的日期无效。',
+  },
 }

From 04ccc348a6c2ef67e1dfaad27aec82299492a7b6 Mon Sep 17 00:00:00 2001
From: littlemight <mfang555@gmail.com>
Date: Thu, 30 Oct 2025 22:01:12 +0800
Subject: [PATCH 3/6] feat(i18n): extract text from preview form feature

---
 .../PreviewFormBanner/PreviewFormBanner.tsx   | 40 +++++++++----------
 .../i18n/locales/features/admin-form/en-sg.ts |  2 +
 .../i18n/locales/features/admin-form/index.ts |  1 +
 .../admin-form/preview-form-banner/en-sg.ts   | 23 +++++++++++
 .../admin-form/preview-form-banner/index.ts   | 21 ++++++++++
 5 files changed, 65 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/i18n/locales/features/admin-form/preview-form-banner/en-sg.ts
 create mode 100644 frontend/src/i18n/locales/features/admin-form/preview-form-banner/index.ts

diff --git a/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx b/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx
index 755b65c081..d37057d6cf 100644
--- a/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx
+++ b/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx
@@ -57,7 +57,10 @@ const textProps: TextProps = {
 export const PreviewFormBanner = ({
   isTemplate,
 }: PreviewFormBannerProps): JSX.Element => {
-  const { t } = useTranslation()
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.previewFormBanner',
+  })
+  const { t: tCommon } = useTranslation()
   const { formId, isPaymentEnabled } = usePublicFormContext()
   const { data: { secretEnv } = {} } = useEnv()
   const {
@@ -99,7 +102,7 @@ export const PreviewFormBanner = ({
               mr={{ base: '0.5rem', md: '1rem' }}
             />
             <Text textStyle="subhead-3">
-              {isTemplate ? 'Template Preview' : 'Form Preview'}
+              {isTemplate ? t('templatePreview') : t('formPreview')}
             </Text>
           </Flex>
           {isTemplate ? (
@@ -111,35 +114,35 @@ export const PreviewFormBanner = ({
               >
                 <Link
                   variant="standalone"
-                  aria-label="Click to return to the admin dashboard"
+                  aria-label={t('backToDashboardAriaLabel')}
                   as={ReactLink}
                   to={DASHBOARD_ROUTE}
                 >
-                  Back to FormSG
+                  {t('backToFormSG')}
                 </Link>
                 <Button
-                  aria-label="Click to use this template"
+                  aria-label={t('useTemplateAriaLabel')}
                   onClick={onModalOpen}
                 >
-                  Use this template
+                  {t('useTemplate')}
                 </Button>
               </Stack>
               <IconButton
                 color="primary.500"
                 variant="clear"
                 display={{ base: 'flex', md: 'none' }}
-                aria-label="Template preview actions"
+                aria-label={t('templateActionsAriaLabel')}
                 onClick={onDrawerOpen}
                 icon={<BiDotsHorizontalRounded />}
               />
             </>
           ) : (
             <Button
-              aria-label={t('features.common.editForm.ariaLabel')}
+              aria-label={tCommon('features.common.editForm.ariaLabel')}
               as={ReactLink}
               to={`${ADMINFORM_ROUTE}/${formId}`}
             >
-              {t('features.common.editForm.text')}
+              {tCommon('features.common.editForm.text')}
             </Button>
           )}
         </Flex>
@@ -165,7 +168,7 @@ export const PreviewFormBanner = ({
                 isFullWidth={true}
                 {...mobileDrawerButtonProps}
               >
-                Use this template
+                {t('useTemplate')}
               </Button>
               <Divider />
               <Button
@@ -174,7 +177,7 @@ export const PreviewFormBanner = ({
                 leftIcon={<BiArrowBack fontSize="1.25rem" />}
                 {...mobileDrawerButtonProps}
               >
-                Back to FormSG
+                {t('backToFormSG')}
               </Button>
             </DrawerBody>
           </DrawerContent>
@@ -184,27 +187,20 @@ export const PreviewFormBanner = ({
         <Flex backgroundColor="neutral.900">
           {secretEnv === 'production' ? (
             <Text {...textProps}>
-              To test your payment form, replicate this form on our{' '}
+              {t('paymentWarning.production.prefix')}
               <Link isExternal color="white" href={FORMSG_UAT}>
-                testing platform.
+                {t('paymentWarning.production.linkText')}
               </Link>
             </Text>
           ) : (
-            <Text {...textProps}>
-              You will not be able to make a test payment, or view submitted
-              answers or attachments in Form Preview mode. Open your form to
-              make a test payment or form submission.
-            </Text>
+            <Text {...textProps}>{t('paymentWarning.nonProduction')}</Text>
           )}
         </Flex>
       )}
       {!isPaymentEnabled && (
         <Flex backgroundColor="neutral.900">
           {!(secretEnv === 'production') && (
-            <Text {...textProps}>
-              You will not be able to view submitted answers or attachments in
-              Form Preview mode. Open your form to test a form submission.
-            </Text>
+            <Text {...textProps}>{t('previewWarning.withoutPayment')}</Text>
           )}
         </Flex>
       )}
diff --git a/frontend/src/i18n/locales/features/admin-form/en-sg.ts b/frontend/src/i18n/locales/features/admin-form/en-sg.ts
index 0b4e8df75e..037bfdf9b1 100644
--- a/frontend/src/i18n/locales/features/admin-form/en-sg.ts
+++ b/frontend/src/i18n/locales/features/admin-form/en-sg.ts
@@ -6,11 +6,13 @@ import { enSG as feedback } from './feedback'
 import { enSG as meta } from './meta'
 import { enSG as modals } from './modals'
 import { enSG as navbar } from './navbar'
+import { enSG as previewFormBanner } from './preview-form-banner'
 import { enSG as settings } from './settings'
 import { enSG as sidebar } from './sidebar'
 import { enSG as toasts } from './toasts'
 
 export const enSG = {
+  previewFormBanner,
   responses: {
     charts: responsesCharts,
     components: responsesComponents,
diff --git a/frontend/src/i18n/locales/features/admin-form/index.ts b/frontend/src/i18n/locales/features/admin-form/index.ts
index 9a6698fdcc..046df6bd7c 100644
--- a/frontend/src/i18n/locales/features/admin-form/index.ts
+++ b/frontend/src/i18n/locales/features/admin-form/index.ts
@@ -3,6 +3,7 @@ export { type Feedback } from './feedback'
 export { type Meta } from './meta'
 export { type Modals } from './modals'
 export { type Navbar } from './navbar'
+export { type PreviewFormBanner } from './preview-form-banner'
 export { type ResponsesCharts } from './responses/charts'
 export { type ResponsesComponents } from './responses/components'
 export { type ResponsesIndividualResponse } from './responses/individual-response'
diff --git a/frontend/src/i18n/locales/features/admin-form/preview-form-banner/en-sg.ts b/frontend/src/i18n/locales/features/admin-form/preview-form-banner/en-sg.ts
new file mode 100644
index 0000000000..43dc934a86
--- /dev/null
+++ b/frontend/src/i18n/locales/features/admin-form/preview-form-banner/en-sg.ts
@@ -0,0 +1,23 @@
+import { PreviewFormBanner } from '.'
+
+export const enSG: PreviewFormBanner = {
+  templatePreview: 'Template Preview',
+  formPreview: 'Form Preview',
+  backToDashboardAriaLabel: 'Click to return to the admin dashboard',
+  backToFormSG: 'Back to FormSG',
+  useTemplateAriaLabel: 'Click to use this template',
+  useTemplate: 'Use this template',
+  templateActionsAriaLabel: 'Template preview actions',
+  paymentWarning: {
+    production: {
+      prefix: 'To test your payment form, replicate this form on our ',
+      linkText: 'testing platform.',
+    },
+    nonProduction:
+      'You will not be able to make a test payment, or view submitted answers or attachments in Form Preview mode. Open your form to make a test payment or form submission.',
+  },
+  previewWarning: {
+    withoutPayment:
+      'You will not be able to view submitted answers or attachments in Form Preview mode. Open your form to test a form submission.',
+  },
+}
diff --git a/frontend/src/i18n/locales/features/admin-form/preview-form-banner/index.ts b/frontend/src/i18n/locales/features/admin-form/preview-form-banner/index.ts
new file mode 100644
index 0000000000..533687e636
--- /dev/null
+++ b/frontend/src/i18n/locales/features/admin-form/preview-form-banner/index.ts
@@ -0,0 +1,21 @@
+export interface PreviewFormBanner {
+  templatePreview: string
+  formPreview: string
+  backToDashboardAriaLabel: string
+  backToFormSG: string
+  useTemplateAriaLabel: string
+  useTemplate: string
+  templateActionsAriaLabel: string
+  paymentWarning: {
+    production: {
+      prefix: string
+      linkText: string
+    }
+    nonProduction: string
+  }
+  previewWarning: {
+    withoutPayment: string
+  }
+}
+
+export * from './en-sg'

From 61332ac9d5268cd4b2537e699de3fd286a31c972 Mon Sep 17 00:00:00 2001
From: littlemight <mfang555@gmail.com>
Date: Thu, 30 Oct 2025 22:12:57 +0800
Subject: [PATCH 4/6] feat(i18n): extract text for MFB related feature

---
 .../components/MagicFormBuilderAcceptDeny.tsx | 15 +++--
 .../components/MagicFormBuilderButton.tsx     |  7 ++-
 .../MagicFormBuilderPromptModal.tsx           | 59 ++++++++++++-------
 .../MagicFormBuilderSmallButton.tsx           |  7 ++-
 .../i18n/locales/features/admin-form/en-sg.ts |  2 +
 .../i18n/locales/features/admin-form/index.ts |  1 +
 .../admin-form/magic-form-builder/en-sg.ts    | 55 +++++++++++++++++
 .../admin-form/magic-form-builder/index.ts    | 48 +++++++++++++++
 8 files changed, 164 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/i18n/locales/features/admin-form/magic-form-builder/en-sg.ts
 create mode 100644 frontend/src/i18n/locales/features/admin-form/magic-form-builder/index.ts

diff --git a/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderAcceptDeny.tsx b/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderAcceptDeny.tsx
index fde66a59d1..2de2a021c9 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderAcceptDeny.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderAcceptDeny.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { Flex, Portal, Text } from '@chakra-ui/react'
 
 import { NextAndBackButtonGroup } from '~components/Button'
@@ -12,20 +13,22 @@ const MagicFormBuilderAcceptDeny = ({
   onAccept: () => void
   onDeny: () => void
 }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.magicFormBuilder.acceptDeny',
+  })
+
   return isOpen ? (
     <Portal>
       <BottomHugBox>
         <Flex direction="column" gap="1rem">
-          <Text textStyle="h6">
-            The created fields have been saved.
-            <br />
-            Keep them?
+          <Text textStyle="h6" whiteSpace="pre-line">
+            {t('message')}
           </Text>
           <NextAndBackButtonGroup
             handleBack={onDeny}
             handleNext={onAccept}
-            nextButtonLabel="Yes, keep them"
-            backButtonLabel="No, delete them"
+            nextButtonLabel={t('keepButton')}
+            backButtonLabel={t('deleteButton')}
           />
         </Flex>
       </BottomHugBox>
diff --git a/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderButton.tsx b/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderButton.tsx
index e5ac5a0f6a..3efb43a0b6 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderButton.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderButton.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { BiSolidMagicWand } from 'react-icons/bi'
 
 import Button from '~components/Button'
@@ -7,6 +8,10 @@ const MagicFormBuilderButton = ({
 }: {
   onClick: () => void
 }): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.magicFormBuilder.button',
+  })
+
   return (
     <Button
       maxW="100%"
@@ -14,7 +19,7 @@ const MagicFormBuilderButton = ({
       onClick={onClick}
       isTruncated
     >
-      Create fields with AI
+      {t('createFields')}
     </Button>
   )
 }
diff --git a/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderPromptModal.tsx b/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderPromptModal.tsx
index db3df4aaee..84b774b643 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderPromptModal.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderPromptModal.tsx
@@ -9,6 +9,7 @@ import {
   UseFormSetError,
   UseFormSetValue,
 } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { BiSolidMagicWand } from 'react-icons/bi'
 import {
   Box,
@@ -75,9 +76,13 @@ const PromptSelectorBar = ({
   }[]
   onClick: (prompt: string) => void
 }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.magicFormBuilder.promptModal.textTab',
+  })
+
   return (
     <Flex direction="column">
-      <Text textStyle="subhead-1">Need inspiration? Try one of these:</Text>
+      <Text textStyle="subhead-1">{t('inspirationLabel')}</Text>
       <HStack
         display="flex"
         justifyContent="space-between"
@@ -111,9 +116,6 @@ const PromptSelectorBar = ({
   )
 }
 
-const GENERATE_FORM_PLACEHOLDER =
-  'Describe your form, including fields and sections to create'
-
 export interface TextPromptInputs {
   prompt: string
 }
@@ -127,21 +129,23 @@ const TextPromptModalBodyContent = ({
   setValue: UseFormSetValue<TextPromptInputs>
   errors: FieldErrors<TextPromptInputs>
 }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.magicFormBuilder.promptModal.textTab',
+  })
+
   return (
     <>
       <FormControl isInvalid={!!errors.prompt?.message}>
-        <FormLabel textStyle="subhead-1">
-          I want to create a form that collects...
-        </FormLabel>
+        <FormLabel textStyle="subhead-1">{t('promptLabel')}</FormLabel>
         <Textarea
           minH="9rem"
           borderRadius="4px"
-          placeholder={GENERATE_FORM_PLACEHOLDER}
+          placeholder={t('promptPlaceholder')}
           {...register('prompt', {
-            required: 'Please enter a prompt',
+            required: t('validation.required'),
             maxLength: {
               value: 500,
-              message: 'Please enter at most 500 characters',
+              message: t('validation.maxLength'),
             },
           })}
         />
@@ -174,16 +178,18 @@ const VisionPromptModalBodyContent = ({
   setError: UseFormSetError<VisionPromptInputs>
   isVisionPromptSubmitLoading: boolean
 }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.magicFormBuilder.promptModal.pdfTab',
+  })
+
   return (
     <>
       <FormControl isInvalid={!!errors.attachment?.message}>
-        <FormLabel textStyle="subhead-1">
-          Create a form based on this pdf
-        </FormLabel>
+        <FormLabel textStyle="subhead-1">{t('uploadLabel')}</FormLabel>
         <Controller
           name="attachment"
           control={control}
-          rules={{ required: 'Please upload a pdf file' }}
+          rules={{ required: t('uploadError') }}
           render={({ field: { onChange, ...rest } }) => (
             <Attachment
               {...rest}
@@ -193,7 +199,9 @@ const VisionPromptModalBodyContent = ({
               }}
               accept=".pdf"
               showFileSize
-              fileConstraintsText={`Files should not be more than ${MFB_VISION_MAX_IMAGES_COUNT} pages long.`}
+              fileConstraintsText={t('fileConstraints', {
+                maxPages: MFB_VISION_MAX_IMAGES_COUNT,
+              })}
               showRemove
               isRemoveDisabled={isVisionPromptSubmitLoading}
               onError={(message) => setError('attachment', { message })}
@@ -224,6 +232,13 @@ const MagicFormBuilderCreateFormPrompt = ({
   isVisionPromptSubmitLoading: MagicFormBuilderPromptModalProps['isVisionPromptSubmitLoading']
   onCancel: () => void
 }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.magicFormBuilder.promptModal',
+  })
+  const { t: tPdf } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.magicFormBuilder.promptModal.pdfTab',
+  })
+
   const {
     register,
     handleSubmit,
@@ -251,7 +266,7 @@ const MagicFormBuilderCreateFormPrompt = ({
   return (
     <>
       <ModalHeader display="flex" alignItems="center">
-        <Text textStyle="h2">Create fields with AI</Text>
+        <Text textStyle="h2">{t('header')}</Text>
       </ModalHeader>
       <ModalBody>
         <>
@@ -262,13 +277,13 @@ const MagicFormBuilderCreateFormPrompt = ({
                   isDisabled={isVisionPromptSubmitLoading}
                   value={PROMPT_TYPE.TEXT}
                 >
-                  Text
+                  {t('tabs.text')}
                 </Tab>
                 <Tab
                   isDisabled={isTextPromptSubmitLoading}
                   value={PROMPT_TYPE.VISION}
                 >
-                  Pdf
+                  {t('tabs.pdf')}
                 </Tab>
               </TabList>
               <TabPanels>
@@ -324,7 +339,7 @@ const MagicFormBuilderCreateFormPrompt = ({
                     if (imageDataUrls.length > MFB_VISION_MAX_IMAGES_COUNT) {
                       setVisionError('attachment', {
                         type: 'manual',
-                        message: `Your pdf file must have less than or equal ${MFB_VISION_MAX_IMAGES_COUNT} pages.`,
+                        message: tPdf('conversionError.fileSizeTooLarge'),
                       })
                       return
                     }
@@ -333,7 +348,7 @@ const MagicFormBuilderCreateFormPrompt = ({
                   } catch (error) {
                     setVisionError('attachment', {
                       type: 'manual',
-                      message: 'Failed to convert PDF file to images.',
+                      message: tPdf('conversionError.unknown'),
                     })
                   }
                 })
@@ -345,8 +360,8 @@ const MagicFormBuilderCreateFormPrompt = ({
             isTextPromptSubmitLoading || isVisionPromptSubmitLoading
           }
           handleBack={onCancel}
-          nextButtonLabel="Create fields"
-          backButtonLabel="Cancel"
+          nextButtonLabel={t('actions.create')}
+          backButtonLabel={t('actions.cancel')}
         />
       </ModalFooter>
     </>
diff --git a/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderSmallButton.tsx b/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderSmallButton.tsx
index 4bb697db4b..752a4ef34a 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderSmallButton.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/MagicFormBuilder/components/MagicFormBuilderSmallButton.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { BiSolidMagicWand } from 'react-icons/bi'
 import { Button, Icon, Tooltip } from '@chakra-ui/react'
 
@@ -8,8 +9,12 @@ const MagicFormBuilderSmallButton = ({
 }: { isActive: boolean; onClick: () => void } & React.ComponentProps<
   typeof Button
 >) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.magicFormBuilder.smallButton',
+  })
+
   return (
-    <Tooltip openDelay={500} hasArrow label="Create fields with AI">
+    <Tooltip openDelay={500} hasArrow label={t('tooltip')}>
       <Button
         variant="outline"
         onClick={onClick}
diff --git a/frontend/src/i18n/locales/features/admin-form/en-sg.ts b/frontend/src/i18n/locales/features/admin-form/en-sg.ts
index 037bfdf9b1..17dc0f3ee9 100644
--- a/frontend/src/i18n/locales/features/admin-form/en-sg.ts
+++ b/frontend/src/i18n/locales/features/admin-form/en-sg.ts
@@ -3,6 +3,7 @@ import { enSG as responsesComponents } from './responses/components'
 import { enSG as responsesIndividualResponse } from './responses/individual-response'
 import { enSG as responsesResponsesPage } from './responses/responses-page'
 import { enSG as feedback } from './feedback'
+import { enSG as magicFormBuilder } from './magic-form-builder'
 import { enSG as meta } from './meta'
 import { enSG as modals } from './modals'
 import { enSG as navbar } from './navbar'
@@ -26,4 +27,5 @@ export const enSG = {
   toasts,
   settings,
   feedback,
+  magicFormBuilder,
 }
diff --git a/frontend/src/i18n/locales/features/admin-form/index.ts b/frontend/src/i18n/locales/features/admin-form/index.ts
index 046df6bd7c..d12f16045c 100644
--- a/frontend/src/i18n/locales/features/admin-form/index.ts
+++ b/frontend/src/i18n/locales/features/admin-form/index.ts
@@ -1,5 +1,6 @@
 export * from './en-sg'
 export { type Feedback } from './feedback'
+export { type MagicFormBuilder } from './magic-form-builder'
 export { type Meta } from './meta'
 export { type Modals } from './modals'
 export { type Navbar } from './navbar'
diff --git a/frontend/src/i18n/locales/features/admin-form/magic-form-builder/en-sg.ts b/frontend/src/i18n/locales/features/admin-form/magic-form-builder/en-sg.ts
new file mode 100644
index 0000000000..c425944144
--- /dev/null
+++ b/frontend/src/i18n/locales/features/admin-form/magic-form-builder/en-sg.ts
@@ -0,0 +1,55 @@
+import { MagicFormBuilder } from '.'
+
+export const enSG: MagicFormBuilder = {
+  acceptDeny: {
+    message: 'The created fields have been saved.\nKeep them?',
+    keepButton: 'Yes, keep them',
+    deleteButton: 'No, delete them',
+  },
+  button: {
+    createFields: 'Create fields with AI',
+  },
+  smallButton: {
+    tooltip: 'Create fields with AI',
+  },
+  promptModal: {
+    header: 'Create fields with AI',
+    tabs: {
+      text: 'Text',
+      pdf: 'Pdf',
+    },
+    textTab: {
+      inspirationLabel: 'Need inspiration? Try one of these:',
+      promptLabel: 'I want to create a form that collects...',
+      promptPlaceholder:
+        'Describe your form, including fields and sections to create',
+      validation: {
+        required: 'Please enter a prompt',
+        maxLength: 'Please enter at most 500 characters',
+      },
+    },
+    pdfTab: {
+      uploadLabel: 'Create a form based on this pdf',
+      uploadError: 'Please upload a pdf file',
+      fileConstraints: 'Files should not be more than {maxPages} pages long.',
+      conversionError: {
+        unknown:
+          'We encountered an unknown error while converting your PDF. Please try again with a different PDF.',
+        timeout:
+          'We encountered a timeout while converting your PDF. Please try again with a smaller PDF.',
+        fileSizeTooLarge:
+          'Your PDF is too large. Please try again with a smaller PDF.',
+        invalidInputPdf:
+          'We encountered an error while reading your PDF. Please ensure your PDF is valid and try again.',
+        pdfEncrypted:
+          'Your PDF is encrypted. Please remove the encryption and try again.',
+        pdfHasNoText:
+          'Your PDF does not contain any text. Please try again with a PDF that contains text.',
+      },
+    },
+    actions: {
+      create: 'Create fields',
+      cancel: 'Cancel',
+    },
+  },
+}
diff --git a/frontend/src/i18n/locales/features/admin-form/magic-form-builder/index.ts b/frontend/src/i18n/locales/features/admin-form/magic-form-builder/index.ts
new file mode 100644
index 0000000000..c9b76590cb
--- /dev/null
+++ b/frontend/src/i18n/locales/features/admin-form/magic-form-builder/index.ts
@@ -0,0 +1,48 @@
+export * from './en-sg'
+
+export interface MagicFormBuilder {
+  acceptDeny: {
+    message: string
+    keepButton: string
+    deleteButton: string
+  }
+  button: {
+    createFields: string
+  }
+  smallButton: {
+    tooltip: string
+  }
+  promptModal: {
+    header: string
+    tabs: {
+      text: string
+      pdf: string
+    }
+    textTab: {
+      inspirationLabel: string
+      promptLabel: string
+      promptPlaceholder: string
+      validation: {
+        required: string
+        maxLength: string
+      }
+    }
+    pdfTab: {
+      uploadLabel: string
+      uploadError: string
+      fileConstraints: string
+      conversionError: {
+        unknown: string
+        timeout: string
+        fileSizeTooLarge: string
+        invalidInputPdf: string
+        pdfEncrypted: string
+        pdfHasNoText: string
+      }
+    }
+    actions: {
+      create: string
+      cancel: string
+    }
+  }
+}

From 8fd229198d85ce8b42eeeb2794f28c48adca4b10 Mon Sep 17 00:00:00 2001
From: littlemight <mfang555@gmail.com>
Date: Thu, 30 Oct 2025 22:26:10 +0800
Subject: [PATCH 5/6] feat(i18n): extract more text for workflow (MRF)

---
 .../workflow/components/EmptyWorkflow.tsx     | 14 +++++-----
 .../ActiveStepBlock/ActiveStepBlock.tsx       |  6 ++++-
 .../Components/StaticRespondentOption.tsx     | 14 ++++++----
 .../InactiveStepBlock/InactiveStepBlock.tsx   | 19 +++++++++-----
 .../admin-form/sidebar/workflow/en-sg.ts      | 26 +++++++++++++++++++
 .../admin-form/sidebar/workflow/index.ts      | 22 ++++++++++++++++
 6 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/frontend/src/features/admin-form/create/workflow/components/EmptyWorkflow.tsx b/frontend/src/features/admin-form/create/workflow/components/EmptyWorkflow.tsx
index 5355aba218..08ed988a59 100644
--- a/frontend/src/features/admin-form/create/workflow/components/EmptyWorkflow.tsx
+++ b/frontend/src/features/admin-form/create/workflow/components/EmptyWorkflow.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { BiPlus } from 'react-icons/bi'
 import { Flex, Text } from '@chakra-ui/react'
 
@@ -13,6 +14,9 @@ import {
 import { WorkflowSvgr } from './WorkflowSvgr'
 
 export const EmptyWorkflow = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.sidebar.workflow.emptyWorkflow',
+  })
   const setToCreating = useAdminWorkflowStore(setToCreatingSelector)
 
   return (
@@ -24,14 +28,12 @@ export const EmptyWorkflow = (): JSX.Element => {
       pt={{ base: '0.5rem', md: '2.75rem' }}
     >
       <Text textStyle="h2" as="h2">
-        Create a workflow to collect responses from multiple respondents in the
-        same form submission
+        {t('title')}
       </Text>
       <Text textStyle="body-1" mt="1rem">
-        Assign respondents to specific steps, and control which fields they can
-        fill.{' '}
+        {t('description')}{' '}
         <Link isExternal href={GUIDE_FORM_MRF}>
-          Learn how to create a workflow
+          {t('learnMore')}
         </Link>
       </Text>
       <Button
@@ -39,7 +41,7 @@ export const EmptyWorkflow = (): JSX.Element => {
         leftIcon={<BiPlus fontSize="1.5rem" />}
         onClick={setToCreating}
       >
-        Create workflow
+        {t('createButton')}
       </Button>
       <WorkflowSvgr maxW="292px" />
     </Flex>
diff --git a/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/ActiveStepBlock/ActiveStepBlock.tsx b/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/ActiveStepBlock/ActiveStepBlock.tsx
index 4abee2c60f..cb5d07dbba 100644
--- a/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/ActiveStepBlock/ActiveStepBlock.tsx
+++ b/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/ActiveStepBlock/ActiveStepBlock.tsx
@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { FormWorkflowStep, FormWorkflowStepDto } from '~shared/types'
 
@@ -43,6 +44,9 @@ export const ActiveStepBlock = ({
   step,
   handleOpenDeleteModal,
 }: ActiveStepBlockProps): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.sidebar.workflow',
+  })
   const { updateStepMutation } = useWorkflowMutations()
   const setToInactive = useAdminWorkflowStore(setToInactiveSelector)
 
@@ -69,7 +73,7 @@ export const ActiveStepBlock = ({
       handleOpenDeleteModal={handleOpenDeleteModal}
       onSubmit={handleSubmit}
       defaultValues={step}
-      submitButtonLabel="Save step"
+      submitButtonLabel={t('saveStep')}
     />
   )
 }
diff --git a/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/EditStepBlock/RespondentBlock/Components/StaticRespondentOption.tsx b/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/EditStepBlock/RespondentBlock/Components/StaticRespondentOption.tsx
index 774caa7d9f..52c68bc702 100644
--- a/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/EditStepBlock/RespondentBlock/Components/StaticRespondentOption.tsx
+++ b/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/EditStepBlock/RespondentBlock/Components/StaticRespondentOption.tsx
@@ -1,4 +1,5 @@
 import { Controller } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { FormControl, Text } from '@chakra-ui/react'
 import { get } from 'lodash'
 import isEmail from 'validator/lib/isEmail'
@@ -17,6 +18,9 @@ export const StaticRespondentOption = ({
   formMethods,
   selectedWorkflowType,
 }: RespondentOptionProps) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.sidebar.workflow.staticRespondent',
+  })
   const {
     register,
     control,
@@ -40,7 +44,7 @@ export const StaticRespondentOption = ({
           },
         }}
       >
-        <Text>Specific email(s)</Text>
+        <Text>{t('title')}</Text>
         {selectedWorkflowType === WorkflowType.Static ? (
           <FormControl
             pt="0.5rem"
@@ -57,18 +61,18 @@ export const StaticRespondentOption = ({
                 validate: {
                   required: (emails) =>
                     !emails || emails.length === 0
-                      ? 'You must enter at least one email to receive responses'
+                      ? t('validation.required')
                       : true,
                   isEmails: (emails) =>
                     !emails ||
                     emails.every((email) => isEmail(email)) ||
-                    'Please enter valid email(s) (e.g. me@example.com) separated by commas, as invalid emails will not be saved',
+                    t('validation.invalidEmails'),
                 },
               }}
               render={({ field }) => (
                 <TagInput
                   isDisabled={isLoading}
-                  placeholder="me@example.com"
+                  placeholder={t('placeholder')}
                   tagValidation={isEmail}
                   {...field}
                 />
@@ -77,7 +81,7 @@ export const StaticRespondentOption = ({
             <FormErrorMessage>{staticTagInputErrorMessage}</FormErrorMessage>
             {!staticTagInputErrorMessage ? (
               <Text textStyle="body-2" color="secondary.400" mt="0.5rem">
-                Separate multiple emails with a comma
+                {t('helperText')}
               </Text>
             ) : null}
           </FormControl>
diff --git a/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx b/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx
index 9d65d101a1..a0f94a8b74 100644
--- a/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx
+++ b/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx
@@ -80,7 +80,9 @@ const SubsequentStepRespondentBadges = ({
             <FieldLogicBadge
               defaults={{
                 variant: 'error',
-                message: 'Please update your CSV options and emails',
+                message: t(
+                  'features.adminForm.sidebar.workflow.fieldBadges.updateCsvOptionsEmails',
+                ),
               }}
             />
           ) : null}
@@ -122,7 +124,9 @@ export const InactiveStepBlock = ({
         <FieldLogicBadge
           defaults={{
             variant: 'info',
-            message: 'No fields selected',
+            message: t(
+              'features.adminForm.sidebar.workflow.fieldBadges.noFieldsSelected',
+            ),
           }}
         />
       )
@@ -135,8 +139,9 @@ export const InactiveStepBlock = ({
         <FieldLogicBadge
           defaults={{
             variant: 'error',
-            message:
-              'All fields were deleted, please select at least one field',
+            message: t(
+              'features.adminForm.sidebar.workflow.fieldBadges.allFieldsDeleted',
+            ),
           }}
         />
       )
@@ -148,11 +153,13 @@ export const InactiveStepBlock = ({
         field={idToFieldMap[fieldId]}
         defaults={{
           variant: 'info',
-          message: 'This field was deleted, please select another field',
+          message: t(
+            'features.adminForm.sidebar.workflow.fieldBadges.fieldDeleted',
+          ),
         }}
       />
     ))
-  }, [idToFieldMap, step.edit])
+  }, [idToFieldMap, step.edit, t])
 
   return (
     <Box pos="relative">
diff --git a/frontend/src/i18n/locales/features/admin-form/sidebar/workflow/en-sg.ts b/frontend/src/i18n/locales/features/admin-form/sidebar/workflow/en-sg.ts
index 42fa9f5a54..d4a5d3256b 100644
--- a/frontend/src/i18n/locales/features/admin-form/sidebar/workflow/en-sg.ts
+++ b/frontend/src/i18n/locales/features/admin-form/sidebar/workflow/en-sg.ts
@@ -10,6 +10,15 @@ import { Workflow } from '.'
 
 export const enSG: Workflow = {
   title: 'Add workflow',
+  saveStep: 'Save step',
+  emptyWorkflow: {
+    title:
+      'Create a workflow to collect responses from multiple respondents in the same form submission',
+    description:
+      'Assign respondents to specific steps, and control which fields they can fill.',
+    learnMore: 'Learn how to create a workflow',
+    createButton: 'Create workflow',
+  },
   respondentBlock: {
     stepRespondent: 'Respondent in this step',
     anyone: 'Anyone who has access to your form',
@@ -17,6 +26,23 @@ export const enSG: Workflow = {
     fieldsToFill: 'Fields to fill',
     clickToEdit: 'Click to edit',
   },
+  staticRespondent: {
+    title: 'Specific email(s)',
+    placeholder: 'me@example.com',
+    helperText: 'Separate multiple emails with a comma',
+    validation: {
+      required: 'You must enter at least one email to receive responses',
+      invalidEmails:
+        'Please enter valid email(s) (e.g. me@example.com) separated by commas, as invalid emails will not be saved',
+    },
+  },
+  fieldBadges: {
+    updateCsvOptionsEmails: 'Please update your CSV options and emails',
+    noFieldsSelected: 'No fields selected',
+    allFieldsDeleted:
+      'All fields were deleted, please select at least one field',
+    fieldDeleted: 'This field was deleted, please select another field',
+  },
   dynamicRespondent: {
     title: 'An email field from the form',
     required: 'Please select a field.',
diff --git a/frontend/src/i18n/locales/features/admin-form/sidebar/workflow/index.ts b/frontend/src/i18n/locales/features/admin-form/sidebar/workflow/index.ts
index 4055cb3da7..33a75e2f1f 100644
--- a/frontend/src/i18n/locales/features/admin-form/sidebar/workflow/index.ts
+++ b/frontend/src/i18n/locales/features/admin-form/sidebar/workflow/index.ts
@@ -8,6 +8,13 @@ interface CsvColumnText {
 
 export interface Workflow {
   title: string
+  saveStep: string
+  emptyWorkflow: {
+    title: string
+    description: string
+    learnMore: string
+    createButton: string
+  }
   respondentBlock: {
     stepRespondent: string
     anyone: string
@@ -15,6 +22,21 @@ export interface Workflow {
     fieldsToFill: string
     clickToEdit: string
   }
+  staticRespondent: {
+    title: string
+    placeholder: string
+    helperText: string
+    validation: {
+      required: string
+      invalidEmails: string
+    }
+  }
+  fieldBadges: {
+    updateCsvOptionsEmails: string
+    noFieldsSelected: string
+    allFieldsDeleted: string
+    fieldDeleted: string
+  }
   dynamicRespondent: {
     title: string
     required: string

From 8a673fe8503b25bac86e85287221bc63279b75da Mon Sep 17 00:00:00 2001
From: littlemight <mfang555@gmail.com>
Date: Thu, 30 Oct 2025 22:42:17 +0800
Subject: [PATCH 6/6] fix: prop drill useTranslation hook

---
 .../WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx b/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx
index a0f94a8b74..a296bded0d 100644
--- a/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx
+++ b/frontend/src/features/admin-form/create/workflow/components/WorkflowContent/InactiveStepBlock/InactiveStepBlock.tsx
@@ -33,11 +33,13 @@ interface InactiveStepBlockProps {
 interface RespondentBadgeProps {
   step: FormWorkflowStepDto
   idToFieldMap: Dictionary<FormFieldWithQuestionNo<FormField>>
+  t: (key: string) => string
 }
 
 const SubsequentStepRespondentBadges = ({
   step,
   idToFieldMap,
+  t,
 }: RespondentBadgeProps): JSX.Element => {
   switch (step.workflow_type) {
     case WorkflowType.Static:
@@ -202,6 +204,7 @@ export const InactiveStepBlock = ({
                 <SubsequentStepRespondentBadges
                   step={step}
                   idToFieldMap={idToFieldMap}
+                  t={t}
                 />
               </Flex>
             )}