@eeacms/volto-clms-theme 1.0.132 → 1.0.133

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.133](https://github.com/eea/volto-clms-theme/compare/1.0.132...1.0.133) - 6 October 2022
+
+#### :bug: Bug Fixes
+
+- fix: remove padding from datset download table segment [joewdavies - [`323857c`](https://github.com/eea/volto-clms-theme/commit/323857c3c4f02e31e6bae880b9c4feda7807932e)]
+- fix: hash for FAQ tabs [ionlizarazu - [`10621d1`](https://github.com/eea/volto-clms-theme/commit/10621d15f2a83405d60109874e0a03798873de28)]
+- fix: tabs hash with search inside CLMS-1438 [ionlizarazu - [`1cea1b0`](https://github.com/eea/volto-clms-theme/commit/1cea1b0b8dc772e6ca2beb8831f6625f8a58166e)]
+- fix: fields order for the email in volto-form-block [ionlizarazu - [`798dcb3`](https://github.com/eea/volto-clms-theme/commit/798dcb38defe79924ba5b1aa4eace10d99235bcb)]
+- fix: manage the image_field_widget as attachment [ionlizarazu - [`c93869f`](https://github.com/eea/volto-clms-theme/commit/c93869f9d3e05f7dba4be7398d73b7dae9b276b5)]
+- fix: CLMS-1424 remove word-break from cart table cells to prevent compaction [joewdavies - [`8b43cb0`](https://github.com/eea/volto-clms-theme/commit/8b43cb0486597c82d25c5e547801da4645706bdd)]
+
+#### :hammer_and_wrench: Others
+
+- override and use our volto-form-block View.jsx [ionlizarazu - [`f47511a`](https://github.com/eea/volto-clms-theme/commit/f47511a5c50b82d411e9b3c4fe45287f728bca17)]
 ### [1.0.132](https://github.com/eea/volto-clms-theme/compare/1.0.131...1.0.132) - 3 October 2022
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.132",
+  "version": "1.0.133",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CustomTemplates/VoltoFormBlock/View.jsx

@@ -0,0 +1,274 @@
+import React, { useState, useEffect, useReducer, useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { useIntl, defineMessages } from 'react-intl';
+import { submitForm } from 'volto-form-block/actions';
+import { getFieldName } from 'volto-form-block/components/utils';
+import FormView from 'volto-form-block/components/FormView';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import config from '@plone/volto/registry';
+import Captcha from 'volto-form-block/components/Widget/Captcha';
+
+const messages = defineMessages({
+  formSubmitted: {
+    id: 'formSubmitted',
+    defaultMessage: 'Form successfully submitted',
+  },
+});
+
+const initialState = {
+  loading: false,
+  error: null,
+  result: null,
+};
+
+const FORM_STATES = {
+  normal: 'normal',
+  loading: 'loading',
+  error: 'error',
+  success: 'success',
+};
+
+const formStateReducer = (state, action) => {
+  switch (action.type) {
+    case FORM_STATES.normal:
+      return initialState;
+
+    case FORM_STATES.loading:
+      return { loading: true, error: null, result: null };
+
+    case FORM_STATES.error:
+      return { loading: false, error: action.error, result: null };
+
+    case FORM_STATES.success:
+      return { loading: false, error: null, result: action.result };
+
+    default:
+      return initialState;
+  }
+};
+
+const getInitialData = (data) => ({
+  ...data.reduce(
+    (acc, field) => ({ ...acc, [getFieldName(field.label, field.id)]: field }),
+    {},
+  ),
+});
+
+/**
+ * Form view
+ * @class View
+ */
+const View = ({ data, id, path }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { static_fields = [] } = data;
+
+  const [formData, setFormData] = useReducer((state, action) => {
+    if (action.reset) {
+      return getInitialData(static_fields);
+    }
+
+    return {
+      ...state,
+      [action.field]: action.value,
+    };
+  }, getInitialData(static_fields));
+
+  const [formState, setFormState] = useReducer(formStateReducer, initialState);
+  const [formErrors, setFormErrors] = useState([]);
+  const submitResults = useSelector((state) => state.submitForm);
+  const captchaToken = useRef();
+
+  const onChangeFormData = (field_id, field, value, extras) => {
+    setFormData({ field, value: { field_id, value, ...extras } });
+  };
+
+  useEffect(() => {
+    if (formErrors.length > 0) {
+      isValidForm();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formData]);
+
+  const isValidForm = () => {
+    const v = [];
+    data.subblocks.forEach((subblock, index) => {
+      const name = getFieldName(subblock.label, subblock.id);
+      const fieldType = subblock.field_type;
+      const additionalField =
+        config.blocks.blocksConfig.form.additionalFields?.filter(
+          (f) => f.id === fieldType && f.isValid !== undefined,
+        )?.[0] ?? null;
+      if (
+        subblock.required &&
+        additionalField &&
+        !additionalField?.isValid(formData, name)
+      ) {
+        v.push(name);
+      } else if (
+        subblock.required &&
+        fieldType === 'checkbox' &&
+        !formData[name]?.value
+      ) {
+        v.push(name);
+      } else if (
+        subblock.required &&
+        (!formData[name] ||
+          formData[name]?.value?.length === 0 ||
+          JSON.stringify(formData[name]?.value ?? {}) === '{}')
+      ) {
+        v.push(name);
+      }
+    });
+
+    if (data.captcha && !captchaToken.current) {
+      v.push('captcha');
+    }
+
+    setFormErrors(v);
+    return v.length === 0;
+  };
+
+  const submit = (e) => {
+    e.preventDefault();
+    captcha
+      .verify()
+      .then(() => {
+        if (isValidForm()) {
+          let attachments = {};
+          let captcha = {
+            provider: data.captcha,
+            token: captchaToken.current,
+          };
+          if (data.captcha === 'honeypot') {
+            captcha.value = formData[data.captcha_props.id]?.value ?? '';
+          }
+
+          let formattedFormData = { ...formData };
+          data.subblocks.forEach((subblock) => {
+            let name = getFieldName(subblock.label, subblock.id);
+            if (formattedFormData[name]?.value) {
+              formattedFormData[name].field_id = subblock.field_id;
+              // const isAttachment = subblock.field_type === 'attachment';
+              const isAttachment = [
+                'attachment',
+                'image_field_widget',
+              ].includes(subblock.field_type);
+              const isDate = subblock.field_type === 'date';
+
+              if (isAttachment) {
+                attachments[name] = formattedFormData[name].value;
+                delete formattedFormData[name];
+              }
+
+              if (isDate) {
+                formattedFormData[name].value = formatDate({
+                  date: formattedFormData[name].value,
+                  format: 'DD-MM-YYYY',
+                  locale: intl.locale,
+                });
+              }
+            }
+          });
+
+          const sortedFormattedFormData = Object.keys(formattedFormData)
+            .sort((a, b) => {
+              return (
+                data.subblocks
+                  .map((subblock) => getFieldName(subblock.label, subblock.id))
+                  .indexOf(a) -
+                data.subblocks
+                  .map((subblock) => getFieldName(subblock.label, subblock.id))
+                  .indexOf(b)
+              );
+            })
+            .reduce((accumulator, key) => {
+              accumulator[key] = formattedFormData[key];
+
+              return accumulator;
+            }, {});
+          dispatch(
+            submitForm(
+              path,
+              id,
+              Object.keys(sortedFormattedFormData).map((name) => ({
+                ...sortedFormattedFormData[name],
+              })),
+              attachments,
+              captcha,
+            ),
+          );
+          setFormState({ type: FORM_STATES.loading });
+        } else {
+          setFormState({ type: FORM_STATES.error });
+        }
+      })
+      .catch(() => {
+        setFormState({ type: FORM_STATES.error });
+      });
+  };
+
+  const resetFormState = () => {
+    setFormData({ reset: true });
+    setFormState({ type: FORM_STATES.normal });
+  };
+
+  const resetFormOnError = () => {
+    setFormState({ type: FORM_STATES.normal });
+  };
+
+  const captcha = new Captcha({
+    captchaToken,
+    captcha: data.captcha,
+    captcha_props: data.captcha_props,
+    onChangeFormData,
+  });
+
+  useEffect(() => {
+    if (submitResults?.loaded) {
+      setFormState({
+        type: FORM_STATES.success,
+        result: intl.formatMessage(messages.formSubmitted),
+      });
+      captcha.reset();
+    } else if (submitResults?.error) {
+      let errorDescription = `${
+        JSON.parse(submitResults.error.response?.text ?? '{}')?.message
+      }`;
+
+      setFormState({ type: FORM_STATES.error, error: errorDescription });
+    }
+    captchaToken.current = undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [submitResults]);
+
+  useEffect(() => {
+    resetFormState();
+  }, []);
+
+  return (
+    <FormView
+      formState={formState}
+      formErrors={formErrors}
+      formData={formData}
+      captcha={captcha}
+      onChangeFormData={onChangeFormData}
+      data={data}
+      onSubmit={submit}
+      resetFormState={resetFormState}
+      resetFormOnError={resetFormOnError}
+    />
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default View;

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalFaqTabsView.jsx

@@ -25,7 +25,7 @@ const CclVerticalFaqTabsView = (props) => {
       <div className="right-content cont-w-75">
         {tabsList.map((tab, index) => {
           const title = tabs[tab].title;
-          const tabHash = slugify(title);
+          const tabHash = `tab=${slugify(title)}`;
           return (
             <Route to={'#' + tabHash}>
               <div
@@ -64,7 +64,7 @@ const CclVerticalFaqTabsView = (props) => {
             const nextSubTab =
               tabs[tabsList[tabIndex]]?.subTab?.subtab || false;
             const defaultTitle = `Tab ${tabIndex}`;
-            const tabHash = title.split(' ').join('-');
+            const tabHash = `tab=${slugify(title)}`;
             return (
               <div
                 key={index}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -37,7 +37,7 @@ const CclVerticalTabsView = (props) => {
       <div className="right-content cont-w-75">
         {tabsList.map((tab, index) => {
           const title = tabs[tab].title;
-          const tabHash = slugify(title);
+          const tabHash = `tab=${slugify(title)}`;
           return (
             <Route key={index} to={'#' + tabHash}>
               <div
@@ -70,7 +70,7 @@ const CclVerticalTabsView = (props) => {
             const nextSubTab =
               tabs[tabsList[tabIndex]]?.subTab?.subtab || false;
             const defaultTitle = `Tab ${tabIndex}`;
-            const tabHash = slugify(title);
+            const tabHash = `tab=${slugify(title)}`;
             return (
               <div
                 key={index}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/RoutingHOC.jsx

@@ -29,12 +29,12 @@ const RoutingHOC = (TabView) =>
       //   return rTabsList[window.location.hash.match(/.*&?#?tab=(.*)/)[1] - 1];
       // }
       if (
-        window.location.hash.match(/.*&?(#.*)/) &&
-        window.location.hash.match(/.*&?(#.*)/).length > 1
+        window.location.hash.match(/.*([&|#]tab=.*)/) &&
+        window.location.hash.match(/.*([&|#]tab=.*)/).length > 1
       ) {
         const hashMatch = window.location.hash
-          .match(/.*&?(#.*)/)[1]
-          .replace('#', '');
+          .match(/.*([&|#]tab=.*)/)[1]
+          .replace(/[&|#]tab=/, '');
         const result = tabsDict.filter((t) => slugify(t.title) === hashMatch);
         if (result.length > 0) {
           return result[0].id;

package/src/components/Blocks/customBlocks.js

@@ -74,7 +74,7 @@ import ImageWidget from '@eeacms/volto-clms-theme/components/Widgets/ImageWidget
 import TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
 import TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
 import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
-
+import { default as FormCustomView } from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoFormBlock/View';
 export const customGroupBlocksOrder = [
   {
     id: 'ccl_blocks',
@@ -481,6 +481,7 @@ const customBlocks = (config) => ({
   },
   form: {
     ...config.blocks.blocksConfig.form,
+    view: FormCustomView,
     fieldSchema: customIdFieldSchema,
     fieldTypeSchemaExtenders: {
       checkbox_html: CheckboxSchemaExtender,

package/theme/clms/css/styles.less

@@ -940,6 +940,11 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
   vertical-align: middle;
 }
 
+.dataset-download-table > .ui.basic.segment {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 /* Downloads */
 .download-block {
   position: relative;
@@ -1251,4 +1256,9 @@ div#page-document h1.documentFirstHeading {
 #sidebar-metadata .react-select__option {
   white-space: nowrap;
   width: fit-content;
+}
+
+// CLMS-1424
+.cart-table td {
+  word-break: unset !important;
 }