fix(plugin-form-builder): allow overrides to the payment fields group (#9522)

Co-authored-by: mikecebul <mikecebul@gmail.com>

packages/plugin-form-builder/src/collections/FormSubmissions/fields/defaultPaymentFields.ts

@@ -0,0 +1,54 @@
+import type { Field } from 'payload'
+
+export const defaultPaymentFields: Field = {
+  name: 'payment',
+  type: 'group',
+  admin: {
+    readOnly: true,
+  },
+  fields: [
+    {
+      name: 'field',
+      type: 'text',
+      label: 'Field',
+    },
+    {
+      name: 'status',
+      type: 'text',
+      label: 'Status',
+    },
+    {
+      name: 'amount',
+      type: 'number',
+      admin: {
+        description: 'Amount in cents',
+      },
+    },
+    {
+      name: 'paymentProcessor',
+      type: 'text',
+    },
+    {
+      name: 'creditCard',
+      type: 'group',
+      fields: [
+        {
+          name: 'token',
+          type: 'text',
+          label: 'token',
+        },
+        {
+          name: 'brand',
+          type: 'text',
+          label: 'Brand',
+        },
+        {
+          name: 'number',
+          type: 'text',
+          label: 'Number',
+        },
+      ],
+      label: 'Credit Card',
+    },
+  ],
+}

packages/plugin-form-builder/src/collections/FormSubmissions/index.ts

@@ -2,6 +2,7 @@ import type { CollectionConfig, Field } from 'payload'
 
 import type { FormBuilderPluginConfig } from '../../types.js'
 
+import { defaultPaymentFields } from './fields/defaultPaymentFields.js'
 import { createCharge } from './hooks/createCharge.js'
 import { sendEmail } from './hooks/sendEmail.js'
 
@@ -11,6 +12,8 @@ export const generateSubmissionCollection = (
 ): CollectionConfig => {
   const formSlug = formConfig?.formOverrides?.slug || 'forms'
 
+  const enablePaymentFields = Boolean(formConfig?.fields?.payment)
+
   const defaultFields: Field[] = [
     {
       name: 'form',
@@ -79,6 +82,7 @@ export const generateSubmissionCollection = (
         },
       ],
     },
+    ...(enablePaymentFields ? [defaultPaymentFields] : []),
   ]
 
   const newConfig: CollectionConfig = {
@@ -108,63 +112,5 @@ export const generateSubmissionCollection = (
       ],
     },
   }
-
-  const paymentFieldConfig = formConfig?.fields?.payment
-
-  if (paymentFieldConfig) {
-    newConfig.fields.push({
-      name: 'payment',
-      type: 'group',
-      admin: {
-        readOnly: true,
-      },
-      fields: [
-        {
-          name: 'field',
-          type: 'text',
-          label: 'Field',
-        },
-        {
-          name: 'status',
-          type: 'text',
-          label: 'Status',
-        },
-        {
-          name: 'amount',
-          type: 'number',
-          admin: {
-            description: 'Amount in cents',
-          },
-        },
-        {
-          name: 'paymentProcessor',
-          type: 'text',
-        },
-        {
-          name: 'creditCard',
-          type: 'group',
-          fields: [
-            {
-              name: 'token',
-              type: 'text',
-              label: 'token',
-            },
-            {
-              name: 'brand',
-              type: 'text',
-              label: 'Brand',
-            },
-            {
-              name: 'number',
-              type: 'text',
-              label: 'Number',
-            },
-          ],
-          label: 'Credit Card',
-        },
-      ],
-    })
-  }
-
   return newConfig
 }

test/plugin-form-builder/config.ts

@@ -3,7 +3,7 @@ import path from 'path'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 import type { BeforeEmail } from '@payloadcms/plugin-form-builder/types'
-import type { Block } from 'payload'
+import type { Block, Field } from 'payload'
 
 //import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
 import { formBuilderPlugin, fields as formFields } from '@payloadcms/plugin-form-builder'
@@ -104,8 +104,25 @@ export default buildConfigWithDefaults({
       },
       formSubmissionOverrides: {
         fields: ({ defaultFields }) => {
+          const modifiedFields: Field[] = defaultFields.map((field) => {
+            if ('name' in field && field.type === 'group' && field.name === 'payment') {
+              return {
+                ...field,
+                fields: [
+                  ...field.fields, // comment this out to override payments group entirely
+                  {
+                    name: 'stripeCheckoutSession',
+                    type: 'text',
+                  },
+                ],
+              }
+            }
+
+            return field
+          })
+
           return [
-            ...defaultFields,
+            ...modifiedFields,
             {
               name: 'custom',
               type: 'text',

test/plugin-form-builder/payload-types.ts

@@ -301,7 +301,6 @@ export interface FormSubmission {
         id?: string | null;
       }[]
     | null;
-  custom?: string | null;
   payment?: {
     field?: string | null;
     status?: string | null;
@@ -312,7 +311,9 @@ export interface FormSubmission {
       brand?: string | null;
       number?: string | null;
     };
+    stripeCheckoutSession?: string | null;
   };
+  custom?: string | null;
   updatedAt: string;
   createdAt: string;
 }
@@ -584,7 +585,6 @@ export interface FormSubmissionsSelect<T extends boolean = true> {
         value?: T;
         id?: T;
       };
-  custom?: T;
   payment?:
     | T
     | {
@@ -599,7 +599,9 @@ export interface FormSubmissionsSelect<T extends boolean = true> {
               brand?: T;
               number?: T;
             };
+        stripeCheckoutSession?: T;
       };
+  custom?: T;
   updatedAt?: T;
   createdAt?: T;
 }