Add thank you page.

collective · Oct 5, 2024 · a4ac2bf · a4ac2bf
1 parent 38cd999
commit a4ac2bf
Show file tree

Hide file tree

Showing 14 changed files with 129 additions and 40 deletions.
diff --git a/frontend/packages/volto-form-block/locales/de/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/de/LC_MESSAGES/volto.po
@@ -782,6 +782,11 @@ msgstr "Statischer Text"
 msgid "textarea"
 msgstr "Textfeld"
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/en/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/en/LC_MESSAGES/volto.po
@@ -782,6 +782,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/es/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/es/LC_MESSAGES/volto.po
@@ -788,6 +788,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/eu/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/eu/LC_MESSAGES/volto.po
@@ -784,6 +784,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/fr/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/fr/LC_MESSAGES/volto.po
@@ -782,6 +782,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/it/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/it/LC_MESSAGES/volto.po
@@ -782,6 +782,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/ja/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/ja/LC_MESSAGES/volto.po
@@ -782,6 +782,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/nl/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/nl/LC_MESSAGES/volto.po
@@ -782,6 +782,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/pt/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/pt/LC_MESSAGES/volto.po
@@ -782,6 +782,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/pt_BR/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/pt_BR/LC_MESSAGES/volto.po
@@ -788,6 +788,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/ro/LC_MESSAGES/volto.po b/frontend/packages/volto-form-block/locales/ro/LC_MESSAGES/volto.po
@@ -782,6 +782,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/locales/volto.pot b/frontend/packages/volto-form-block/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-10-05T13:25:45.385Z\n"
+"POT-Creation-Date: 2024-10-05T15:44:18.362Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -784,6 +784,11 @@ msgstr ""
 msgid "textarea"
 msgstr ""
 
+#. Default: "Thank you message"
+#: schemaFormBlock/schema
+msgid "thankyou"
+msgstr ""
+
 #. Default: "Time"
 #: index
 msgid "time"

diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/ViewSchemaForm.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/ViewSchemaForm.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import { Form } from '@plone/volto/components/manage/Form';
@@ -30,6 +30,7 @@ const FormBlockView = ({ data, id, properties, metadata, path }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
   const location = useLocation();
+  const [submitted, setSubmitted] = useState(false);
 
   const propertyNames = keys(data.schema.properties);
   const initialData = pickBy(qs.parse(location.search), (value, key) =>
@@ -58,27 +59,31 @@ const FormBlockView = ({ data, id, properties, metadata, path }) => {
         ),
     );
 
-    dispatch(submitForm(path, id, submitData, captcha)).catch((err) => {
-      let message =
-        err?.response?.body?.error?.message ||
-        err?.response?.body?.message ||
-        err?.response?.text ||
-        '';
-      const errorsList = tryParseJSON(message);
-      let invariantErrors = [];
-      if (Array.isArray(errorsList)) {
-        invariantErrors = extractInvariantErrors(errorsList);
-      }
-      if (invariantErrors.length > 0) {
-        toast.error(
-          <Toast
-            error
-            title={intl.formatMessage(messages.error)}
-            content={invariantErrors.join(' - ')}
-          />,
-        );
-      }
-    });
+    dispatch(submitForm(path, id, submitData, captcha))
+      .then((resp) => {
+        setSubmitted(true);
+      })
+      .catch((err) => {
+        let message =
+          err?.response?.body?.error?.message ||
+          err?.response?.body?.message ||
+          err?.response?.text ||
+          '';
+        const errorsList = tryParseJSON(message);
+        let invariantErrors = [];
+        if (Array.isArray(errorsList)) {
+          invariantErrors = extractInvariantErrors(errorsList);
+        }
+        if (invariantErrors.length > 0) {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(messages.error)}
+              content={invariantErrors.join(' - ')}
+            />,
+          );
+        }
+      });
   };
 
   return (
@@ -87,23 +92,34 @@ const FormBlockView = ({ data, id, properties, metadata, path }) => {
       {data.description && (
         <p className="documentDescription">{data.description}</p>
       )}
-      <Form
-        schema={{
-          ...data.schema,
-          fieldsets: map(data.schema.fieldsets, (fieldset) => ({
-            ...fieldset,
-            fields: includes(fieldset.fields, 'captchaWidget')
-              ? [...without(fieldset.fields, 'captchaWidget'), 'captchaWidget']
-              : fieldset.fields,
-          })),
-        }}
-        formData={initialData}
-        onSubmit={onSubmit}
-        resetOnCancel={true}
-        onCancel={data.show_cancel ? onCancel : null}
-        submitLabel={data.submit_label || intl.formatMessage(messages.submit)}
-        cancelLabel={data.cancel_label || intl.formatMessage(messages.cancel)}
-      />
+      {submitted ? (
+        <p
+          dangerouslySetInnerHTML={{
+            __html: data.thankyou?.data || '',
+          }}
+        />
+      ) : (
+        <Form
+          schema={{
+            ...data.schema,
+            fieldsets: map(data.schema.fieldsets, (fieldset) => ({
+              ...fieldset,
+              fields: includes(fieldset.fields, 'captchaWidget')
+                ? [
+                    ...without(fieldset.fields, 'captchaWidget'),
+                    'captchaWidget',
+                  ]
+                : fieldset.fields,
+            })),
+          }}
+          formData={initialData}
+          onSubmit={onSubmit}
+          resetOnCancel={true}
+          onCancel={data.show_cancel ? onCancel : null}
+          submitLabel={data.submit_label || intl.formatMessage(messages.submit)}
+          cancelLabel={data.cancel_label || intl.formatMessage(messages.cancel)}
+        />
+      )}
     </>
   );
 };

diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/schema.js b/frontend/packages/volto-form-block/src/schemaFormBlock/schema.js
@@ -48,6 +48,10 @@ const messages = defineMessages({
     id: 'Admin Recipients',
     defaultMessage: 'Admin Recipients',
   },
+  thankyou: {
+    id: 'thankyou',
+    defaultMessage: 'Thank you message',
+  },
   recipients_description: {
     id: 'The email addresses the submitted form data will be sent to. Multiple email addresses can be entered separated by a semicolon.',
     defaultMessage:
@@ -197,6 +201,7 @@ export const schemaFormBlockSchema = ({ intl, ...props }) => {
           'description',
           'submit_label',
           'show_cancel',
+          'thankyou',
           ...(data?.show_cancel ? ['cancel_label'] : []),
           'captcha',
         ],
@@ -256,6 +261,14 @@ export const schemaFormBlockSchema = ({ intl, ...props }) => {
       cancel_label: {
         title: intl.formatMessage(messages.cancel_label),
       },
+      thankyou: {
+        title: intl.formatMessage(messages.thankyou),
+        widget: 'richtext',
+        type: 'string',
+        default: {
+          data: '<p>Send!</p>',
+        },
+      },
       captcha: {
         title: intl.formatMessage(messages.captcha),
         type: 'string',