fix: fix field schema form sent_message and added customizable FormRe…

…sult component
collective · Apr 16, 2024 · 6dd725b · 6dd725b
1 parent b4139d2
commit 6dd725b
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 52 deletions.
diff --git a/src/components/FormResult.jsx b/src/components/FormResult.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import { Message, Button } from 'semantic-ui-react';
+
+const messages = defineMessages({
+  success: {
+    id: 'form_submit_success',
+    defaultMessage: 'Sent!',
+  },
+  reset: {
+    id: 'form_reset',
+    defaultMessage: 'Clear',
+  },
+});
+
+/* Function that replaces variables from the user customized message  */
+const replaceMessage = (text, sent_data) => {
+  let i = 0;
+  while (i < sent_data.length) {
+    let idField = sent_data[i].label;
+    text = text.replaceAll('${' + idField + '}', sent_data[i].value ?? '');
+    i++;
+  }
+  text = text.replaceAll('\n', '<br/>');
+  return text;
+};
+
+const FormResult = ({ formState, data, resetFormState }) => {
+  const intl = useIntl();
+  return (
+    <Message positive role="alert">
+      {/* Custom message */}
+      {data.send_message ? (
+        <p
+          dangerouslySetInnerHTML={{
+            __html: replaceMessage(data.send_message, formState.result.data),
+          }}
+        />
+      ) : (
+        <>
+          {/* Default message */}
+          <Message.Header as="h4">
+            {intl.formatMessage(messages.success)}
+          </Message.Header>
+          <p>{formState.result}</p>
+        </>
+      )}
+      {/* Back button */}
+      <Button
+        secondary
+        type="button"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          resetFormState();
+        }}
+      >
+        {intl.formatMessage(messages.reset)}
+      </Button>
+    </Message>
+  );
+};
+export default FormResult;
diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
@@ -11,7 +11,7 @@ import {
 import { getFieldName } from 'volto-form-block/components/utils';
 import Field from 'volto-form-block/components/Field';
 import config from '@plone/volto/registry';
-
+import { FormResult } from 'volto-form-block/components';
 /* Style */
 import 'volto-form-block/components/FormView.css';
 
@@ -28,18 +28,10 @@ const messages = defineMessages({
     id: 'Error',
     defaultMessage: 'Error',
   },
-  success: {
-    id: 'form_submit_success',
-    defaultMessage: 'Sent!',
-  },
   form_errors: {
     id: 'form_errors_validation',
     defaultMessage: 'There are some errors in the form.',
   },
-  reset: {
-    id: 'form_reset',
-    defaultMessage: 'Clear',
-  },
 });
 
 const FormView = ({
@@ -62,18 +54,6 @@ const FormView = ({
     return formErrors?.filter((e) => e.field === field).length === 0;
   };
 
-  /* Function that replaces variables from the user customized message  */
-  const replaceMessage = (text) => {
-    let i = 0;
-    const sent_data = formState.result.data;
-    while (i < sent_data.length) {
-      let idField = sent_data[i].label;
-      text = text.replaceAll('${' + idField + '}', sent_data[i].value ?? '');
-      i++;
-    }
-    return text;
-  };
-
   const submit = (e) => {
     resetFormOnError();
     onSubmit(e);
@@ -89,36 +69,11 @@ const FormView = ({
           )}
 
           {formState.result ? (
-            <Message positive role="alert">
-              {/* Custom message */}
-              {data.send_message ? (
-                <p
-                  dangerouslySetInnerHTML={{
-                    __html: replaceMessage(data.send_message),
-                  }}
-                />
-              ) : (
-                <>
-                  {/* Default message */}
-                  <Message.Header as="h4">
-                    {intl.formatMessage(messages.success)}
-                  </Message.Header>
-                  <p>{formState.result}</p>
-                </>
-              )}
-              {/* Back button */}
-              <Button
-                secondary
-                type="button"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  resetFormState();
-                }}
-              >
-                {intl.formatMessage(messages.reset)}
-              </Button>
-            </Message>
+            <FormResult
+              formState={formState}
+              data={data}
+              resetFormState={resetFormState}
+            />
           ) : (
             <Form
               id={id}

diff --git a/src/components/index.js b/src/components/index.js
@@ -13,6 +13,11 @@ export const FormView = loadable(() =>
     /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/FormView'
   ),
 );
+export const FormResult = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/FormResult'
+  ),
+);
 export const Field = loadable(() =>
   import(
     /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/Field'

diff --git a/src/formSchema.js b/src/formSchema.js
@@ -164,7 +164,7 @@ const Schema = (data) => {
       },
       send_message: {
         title: intl.formatMessage(messages.send_message),
-        type: 'textarea',
+        widget: 'textarea',
         description: intl.formatMessage(messages.send_message_helptext),
       },
     },