fix(payment): address PR review comments

Author: mokhld

src/server/plugins/engine/pageControllers/QuestionPageController.ts

@@ -185,11 +185,8 @@ export class QuestionPageController extends PageController {
       }
     }
 
-    // Check if any PaymentField component needs payment to be added
-    // If so, hide the submit button until payment is ready
     const hasIncompletePayment = components.some(({ model }) => {
-      // Check if this is a PaymentField by looking for paymentState in model
-      if ('paymentState' in model && 'amount' in model) {
+      if ('paymentState' in model) {
         const paymentState = model.paymentState as
           | { preAuth?: { status?: string } }
           | undefined

src/server/plugins/engine/routes/index.ts

@@ -10,7 +10,10 @@ import {
   EXTERNAL_STATE_PAYLOAD
 } from '~/src/server/constants.js'
 import { resolveFormModel } from '~/src/server/plugins/engine/beta/form-context.js'
-import { FormComponent } from '~/src/server/plugins/engine/components/FormComponent.js'
+import {
+  FormComponent,
+  isFormState
+} from '~/src/server/plugins/engine/components/FormComponent.js'
 import {
   checkFormStatus,
   findPage,
@@ -135,24 +138,35 @@ async function importExternalComponentState(
     throw new Error(`State for component ${componentName} is invalid`)
   }
 
-  // Store component state under the component name
-  const componentState = { [componentName]: stateAppendage }
-
-  // Save the external component state directly (already has correct key format)
-  const savedState = await page.mergeState(request, state, componentState)
+  // Components with a collection (e.g. UkAddressField) need flattened keys
+  // Components without a collection (e.g. PaymentField) store state as nested object
+  const componentState =
+    component.collection && isFormState(stateAppendage)
+      ? Object.fromEntries(
+          Object.entries(stateAppendage).map(([key, value]) => [
+            `${componentName}__${key}`,
+            value
+          ])
+        )
+      : { [componentName]: stateAppendage }
+
+  const pageState = page.getStateFromValidForm(
+    request,
+    state,
+    componentState as FormPayload
+  )
+  const savedState = await page.mergeState(request, state, pageState)
 
   // Merge any stashed payload into the local state
   const payload = request.yar.flash(EXTERNAL_STATE_PAYLOAD)
   const stashedPayload = Array.isArray(payload) ? {} : (payload as FormPayload)
 
-  if (Object.keys(stashedPayload).length) {
-    const localState = page.getStateFromValidForm(request, savedState, {
-      ...stashedPayload
-    } as FormPayload)
-    return { ...savedState, ...localState }
-  }
+  const localState = page.getStateFromValidForm(request, savedState, {
+    ...stashedPayload,
+    ...componentState
+  } as FormPayload)
 
-  return savedState
+  return { ...savedState, ...localState }
 }
 
 export function makeLoadFormPreHandler(server: Server, options: PluginOptions) {