fix(plugin-form-builder): expose formSubmissionID as a variable to be used in emails (#14429)

### What?

Adds the `formSubmissionID` as a variable in `submissionData` so it can
be used in email templates via double curly brackets
`{{formSubmissionID}}`.

### Why?

The plugin determines when emails are sent and what data is available to
be used. Currently this is being done via the collection `beforeChange`
and the `formSubmissionID` does not exist at this point because the doc
hasn't been fully created yet.

This causes an issue for users wanting to including a direct link to the
submission in the email.

### How?

1. Moves the `sendEmail` functionality into the collection `afterChange`
hook.
2. In addition, it takes the `formSubmissionID` and passes it along with
the rest of the submission data.

Issue reported by client.

Author: jessrynkar

packages/plugin-form-builder/src/collections/FormSubmissions/hooks/sendEmail.ts

@@ -1,27 +1,26 @@
-import type { CollectionBeforeChangeHook } from 'payload'
+import type { CollectionAfterChangeHook } from 'payload'
 
 import type { Email, FormattedEmail, FormBuilderPluginConfig } from '../../../types.js'
 
 import { serializeLexical } from '../../../utilities/lexical/serializeLexical.js'
 import { replaceDoubleCurlys } from '../../../utilities/replaceDoubleCurlys.js'
 import { serializeSlate } from '../../../utilities/slate/serializeSlate.js'
 
-type BeforeChangeParams = Parameters<CollectionBeforeChangeHook>[0]
+type AfterChangeParams = Parameters<CollectionAfterChangeHook>[0]
 
 export const sendEmail = async (
-  beforeChangeParameters: BeforeChangeParams,
+  afterChangeParameters: AfterChangeParams,
   formConfig: FormBuilderPluginConfig,
-): Promise<BeforeChangeParams['data']> => {
-  const { data, operation, req } = beforeChangeParameters
-
-  if (operation === 'create') {
+) => {
+  if (afterChangeParameters.operation === 'create') {
     const {
-      data: { id: formSubmissionID },
+      data,
+      doc: { id: formSubmissionID },
       req: { locale, payload },
-    } = beforeChangeParameters
-
-    const { form: formID, submissionData } = data || {}
+      req,
+    } = afterChangeParameters
 
+    const { form: formID, submissionData: submissionDataFromProps } = data || {}
     const { beforeEmail, defaultToEmail, formOverrides } = formConfig || {}
 
     try {
@@ -34,6 +33,14 @@ export const sendEmail = async (
 
       const emails = form.emails as Email[]
 
+      const submissionData = [
+        ...submissionDataFromProps,
+        {
+          field: 'formSubmissionID',
+          value: String(formSubmissionID),
+        },
+      ]
+
       if (emails && emails.length) {
         const formattedEmails: FormattedEmail[] = await Promise.all(
           emails.map(async (email: Email): Promise<FormattedEmail> => {
@@ -76,7 +83,7 @@ export const sendEmail = async (
         let emailsToSend = formattedEmails
 
         if (typeof beforeEmail === 'function') {
-          emailsToSend = await beforeEmail(formattedEmails, beforeChangeParameters)
+          emailsToSend = await beforeEmail(formattedEmails, afterChangeParameters)
         }
 
         await Promise.all(
@@ -101,6 +108,4 @@ export const sendEmail = async (
       payload.logger.error({ err, msg })
     }
   }
-
-  return data
 }

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

@@ -100,9 +100,12 @@ export const generateSubmissionCollection = (
         : defaultFields,
     hooks: {
       ...(formConfig?.formSubmissionOverrides?.hooks || {}),
+      afterChange: [
+        (data) => sendEmail(data, formConfig),
+        ...(formConfig?.formSubmissionOverrides?.hooks?.afterChange || []),
+      ],
       beforeChange: [
         (data) => createCharge(data, formConfig),
-        (data) => sendEmail(data, formConfig),
         ...(formConfig?.formSubmissionOverrides?.hooks?.beforeChange || []),
       ],
     },