Fix thank you functionality.

collective · Oct 30, 2024 · 9f9f95b · 9f9f95b
1 parent 25afd6a
commit 9f9f95b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 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
@@ -804,10 +804,10 @@ msgstr "Textbereichsfeld"
 msgid "thankyou"
 msgstr "Dankesnachricht"
 
-#. Default: "A text with simple formatting can be entered. Also it is possible to use variables; ${field_id} can be used to display the value of a field inside the form. The ${formfields} variable lists all form fields in a tabular view."
+#. Default: "A text with simple formatting can be entered. Also it is possible to use variables; {field_id} can be used to display the value of a field inside the form. The {formfields} variable lists all form fields in a tabular view."
 #: schemaFormBlock/schema
 msgid "thankyou_description"
-msgstr "Ein Text mit einfacher Formatierung kann eingegeben werden. Außerdem ist es möglich, Variablen zu verwenden; ${field_id} kann verwendet werden, um den Wert eines Feldes im Formular anzuzeigen. Die Variable ${formfields} listet alle Formularfelder in einer tabellarischen Ansicht auf."
+msgstr "Ein Text mit einfacher Formatierung kann eingegeben werden. Außerdem ist es möglich, Variablen zu verwenden; {field_id} kann verwendet werden, um den Wert eines Feldes im Formular anzuzeigen. Die Variable {formfields} listet alle Formularfelder in einer tabellarischen Ansicht auf."
 
 #. Default: "Time"
 #: index

diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/ViewSchemaForm.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/ViewSchemaForm.jsx
@@ -9,7 +9,7 @@ import { Toast } from '@plone/volto/components';
 import { useLocation } from 'react-router-dom';
 import qs from 'query-string';
 import { includes, keys, map, pickBy, without } from 'lodash';
-import { Grid } from 'semantic-ui-react';
+import { Grid, Message } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import { renderToString } from 'react-dom/server';
 
@@ -128,7 +128,13 @@ const FormBlockView = ({ data, id, properties, metadata, path }) => {
 
   let thankyou = data.thankyou?.data || '';
 
-  thankyou = thankyou.replace('${formfields}', formfields);
+  // Add formfields
+  thankyou = thankyou.replace('{formfields}', formfields);
+
+  // Add seperate fields
+  map(keys(submittedData), (field) => {
+    thankyou = thankyou.replace('{' + field + '}', submittedData[field]);
+  });
 
   return (
     <div className="block schemaForm">
@@ -138,7 +144,9 @@ const FormBlockView = ({ data, id, properties, metadata, path }) => {
       )}
       {submitted ? (
         <div className="submitted">
-          <div className="success">{data.success}</div>
+          <Message positive>
+            <p>{data.success}</p>
+          </Message>
           <p
             dangerouslySetInnerHTML={{
               __html: thankyou,

diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/schema.js b/frontend/packages/volto-form-block/src/schemaFormBlock/schema.js
@@ -76,7 +76,7 @@ const messages = defineMessages({
   thankyou_description: {
     id: 'thankyou_description',
     defaultMessage:
-      'A text with simple formatting can be entered. Also it is possible to use variables; ${field_id} can be used to display the value of a field inside the form. The ${formfields} variable lists all form fields in a tabular view.',
+      'A text with simple formatting can be entered. Also it is possible to use variables; {field_id} can be used to display the value of a field inside the form. The {formfields} variable lists all form fields in a tabular view.',
   },
   recipients_description: {
     id: 'The email addresses the submitted form data will be sent to. Multiple email addresses can be entered separated by a semicolon.',
@@ -301,7 +301,7 @@ export const schemaFormBlockSchema = ({ intl, ...props }) => {
         description: intl.formatMessage(messages.thankyou_description),
         widget: 'richtext',
         default: {
-          data: '${formfields}',
+          data: '{formfields}',
         },
       },
       captcha: {