fix: add better error handling

Author: justynoh

packages/backend/src/apps/paysg/actions/create-payment-form-submission/index.ts

@@ -3,7 +3,7 @@ import type { IRawAction } from '@plumber/types'
 import { ZodError } from 'zod'
 import { fromZodError } from 'zod-validation-error'
 
-import StepError, { GenericSolution } from '@/errors/step'
+import StepError from '@/errors/step'
 
 import { requestSchema } from './schema'
 
@@ -79,14 +79,14 @@ const action: IRawAction = {
       required: false,
       subFields: [
         {
-          label: 'Question',
+          placeholder: 'Question',
           key: 'question',
           type: 'string' as const,
           required: true,
           variables: true,
         },
         {
-          label: 'Answer',
+          placeholder: 'Answer',
           key: 'answer',
           type: 'string' as const,
           required: true,
@@ -119,7 +119,7 @@ const action: IRawAction = {
 
         throw new StepError(
           `${firstError.message} at "${firstError.path}"`,
-          GenericSolution.ReconfigureInvalidField,
+          `${firstError.message} under set up step`,
           $.step.position,
           $.app.name,
         )

packages/backend/src/apps/paysg/actions/create-payment-form-submission/schema.ts

@@ -9,9 +9,9 @@ const PAYMENT_FORM_LINK_REGEX = /^https:\/\/(staging.)?pay.gov.sg\/forms\/(.*)$/
 
 export const requestSchema = z.object({
   formId: z
-    .string()
+    .string({ invalid_type_error: 'Empty payment form link' })
     .trim()
-    .min(1, { message: 'Specify a form link' })
+    .min(1, { message: 'Specify a payment form link' })
     .transform((value, context) => {
       const match = value.match(PAYMENT_FORM_LINK_REGEX)
 
@@ -26,16 +26,19 @@ export const requestSchema = z.object({
       return match[2]
     }),
   formsg_form_id: z
-    .string()
+    .string({ invalid_type_error: 'Empty FormSG form ID' })
     .trim()
     .length(FORM_ID_LENGTH, { message: 'Specify a valid FormSG form ID' }),
   formsg_submission_id: z
-    .string()
+    .string({ invalid_type_error: 'Empty FormSG submission ID' })
     .trim()
     .min(1, { message: 'Specify a submission ID' }),
-  nonce: z.string().trim().min(1, { message: 'Specify a nonce field' }),
+  nonce: z
+    .string({ invalid_type_error: 'Empty FormSG reference field answer' })
+    .trim()
+    .min(1, { message: 'Specify a FormSG reference field answer' }),
   payer_name: z
-    .string()
+    .string({ invalid_type_error: 'Empty payer name' })
     .trim()
     .min(1, { message: 'Empty payer name' })
     .max(255, { message: 'Payer name cannot be more than 255 characters' })
@@ -65,8 +68,10 @@ export const requestSchema = z.object({
     .min(1, { message: 'Empty payment amount' })
     .pipe(
       z.coerce
-        .number()
-        .int('Payment amount must be round number')
+        .number({
+          invalid_type_error: 'Payment amount must be a number',
+        })
+        .int('Payment amount must be a round number')
         .min(50, { message: 'Payment amount must be larger than 50 cents' })
         .max(99999999, {
           message: 'Payment amount cannot be larger than $999999.99',
@@ -80,8 +85,14 @@ export const requestSchema = z.object({
     .optional(),
   responses: z.array(
     z.object({
-      question: z.string().trim().min(1, { message: 'Empty question' }),
-      answer: z.string().trim().min(1, { message: 'Empty answer' }),
+      question: z
+        .string({ invalid_type_error: 'Empty question' })
+        .trim()
+        .min(1, { message: 'Empty question' }),
+      answer: z
+        .string({ invalid_type_error: 'Empty answer' })
+        .trim()
+        .min(1, { message: 'Empty answer' }),
     }),
   ),
 })