@eeacms/volto-clms-theme 1.1.82 → 1.1.84

package/CHANGELOG.md

@@ -4,11 +4,27 @@ 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.1.82](https://github.com/eea/volto-clms-theme/compare/1.1.81...1.1.82) - 21 November 2023
+### [1.1.84](https://github.com/eea/volto-clms-theme/compare/1.1.83...1.1.84) - 24 November 2023
+
+#### :bug: Bug Fixes
+
+- fix: logout cache fix [Unai - [`9da13b1`](https://github.com/eea/volto-clms-theme/commit/9da13b1a94ab442d81c9c142c0f34016caca0ac4)]
+
+#### :hammer_and_wrench: Others
+
+- form button style fix [Unai - [`e9f335c`](https://github.com/eea/volto-clms-theme/commit/e9f335c3183e7356aba43dd091ef83b38846c73c)]
+### [1.1.83](https://github.com/eea/volto-clms-theme/compare/1.1.82...1.1.83) - 24 November 2023
+
+#### :bug: Bug Fixes
+
+- fix: CLMS-2844 breadcrumbs not shown at /cart /profile /cart-downloads /all-downloads [Unai - [`507dbee`](https://github.com/eea/volto-clms-theme/commit/507dbeedd821d070e1e9107d8e980b0d3fb85700)]
+- fix:CLMS-2838 form view customization to style the submit button [Unai - [`95ca208`](https://github.com/eea/volto-clms-theme/commit/95ca208262883c759ddacfcee8e001c1a7b3ac1d)]
 
 #### :hammer_and_wrench: Others
 
-- ul lien z-index eta margina [Zaloa Etxaniz - [`522ae5f`](https://github.com/eea/volto-clms-theme/commit/522ae5fa48e0a1c394866606470fa6737b0de02c)]
+- CLMS-2848 replaced window.location.href with window.location.assign [Unai - [`b1b644c`](https://github.com/eea/volto-clms-theme/commit/b1b644c573f547f5b6e8fd4d75e8313b23bc613b)]
+### [1.1.82](https://github.com/eea/volto-clms-theme/compare/1.1.81...1.1.82) - 21 November 2023
+
 ### [1.1.81](https://github.com/eea/volto-clms-theme/compare/1.1.80...1.1.81) - 20 November 2023
 
 #### :rocket: New Features

package/package.json

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

package/src/components/Blocks/CclHomeProductsBlock/CclHomeProductsBlockView.jsx

@@ -19,18 +19,18 @@ const CclHomeProductsBlockView = (props) => {
           }
           tabIndex={0}
           onClick={() => {
-            window.location.href = isUrl(product?.linkSelector)
-              ? product.linkSelector
+            isUrl(product?.linkSelector)
+              ? window.location.assign(product.linkSelector)
               : isUrl('http://' + product?.linkSelector)
-              ? 'http://' + product.linkSelector
-              : '#';
+              ? window.location.assign('http://' + product.linkSelector)
+              : window.location.replace(window.location + '#');
           }}
           onKeyDown={() => {
-            window.location.href = isUrl(product?.linkSelector)
-              ? product.linkSelector
+            isUrl(product?.linkSelector)
+              ? window.location.assign(product.linkSelector)
               : isUrl('http://' + product?.linkSelector)
-              ? 'http://' + product.linkSelector
-              : '#';
+              ? window.location.assign('http://' + product.linkSelector)
+              : window.location.replace(window.location + '#');
           }}
           id={product.productIcon === 'iconless' ? '' : product.productIcon}
         >

package/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -1,19 +1,14 @@
-/**
- * Breadcrumbs components.
- * @module components/theme/Breadcrumbs/Breadcrumbs
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link } from 'react-router-dom';
+import { useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { Link, useLocation } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
 
 import { getBreadcrumbs } from '@plone/volto/actions';
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 
+import PropTypes from 'prop-types';
+
 const messages = defineMessages({
   home: {
     id: 'Home',
@@ -25,113 +20,78 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-    extraItems: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ),
-  };
+const BreadcrumbsComponent = ({ pathname }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { pathname: realPath } = useLocation();
+  const noBreadCrumbsItems = [];
 
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
+  const items = useSelector(
+    (state) =>
+      realPath.endsWith('/cart') ||
+      realPath.endsWith('profile') ||
+      realPath.endsWith('cart-downloads') ||
+      realPath.endsWith('all-downloads')
+        ? noBreadCrumbsItems
+        : state.breadcrumbs.items,
+    shallowEqual,
+  );
+  const root = useSelector((state) => state.breadcrumbs.root);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
+  useEffect(() => {
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      dispatch(getBreadcrumbs(getBaseUrl(pathname)));
     }
-  }
+  }, [dispatch, items, pathname]);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <>
-        {this.props.items.length > 0 && (
-          <nav
-            aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-            className="ccl-breadcrumb"
-          >
-            <Container>
-              <span className="ccl-u-sr-only">You are here:</span>
-              <ol className="ccl-breadcrumb__segments-wrapper">
-                <li className="ccl-breadcrumb__segment ccl-breadcrumb__segment--first">
-                  <Link
-                    to={this.props.root || '/'}
-                    className="ccl-link ccl-link--inverted ccl-link--standalone ccl-breadcrumb__link"
-                    title={this.props.intl.formatMessage(messages.home)}
-                  >
-                    {this.props.intl.formatMessage(messages.home)}
-                  </Link>
-                </li>
-                {this?.props?.items?.map((item, index, items) => [
-                  index < items.length - 1 ? (
-                    <li key={index} className="ccl-breadcrumb__segment">
-                      <Link
-                        to={item.url}
-                        className="ccl-link ccl-link--inverted ccl-link--standalone ccl-breadcrumb__link"
-                      >
-                        {item.title}
-                      </Link>
-                    </li>
-                  ) : (
-                    <li
-                      key={index}
-                      className="ccl-breadcrumb__segment ccl-breadcrumb__segment--last"
+  return (
+    <>
+      {items.length > 0 && (
+        <nav
+          aria-label={intl.formatMessage(messages.breadcrumbs)}
+          className="ccl-breadcrumb"
+        >
+          <Container>
+            <span className="ccl-u-sr-only">You are here:</span>
+            <ol className="ccl-breadcrumb__segments-wrapper">
+              <li className="ccl-breadcrumb__segment ccl-breadcrumb__segment--first">
+                <Link
+                  to={root || '/'}
+                  className="ccl-link ccl-link--inverted ccl-link--standalone ccl-breadcrumb__link"
+                  title={intl.formatMessage(messages.home)}
+                >
+                  {intl.formatMessage(messages.home)}
+                </Link>
+              </li>
+              {items?.map((item, index, items) => [
+                index < items.length - 1 ? (
+                  <li key={index} className="ccl-breadcrumb__segment">
+                    <Link
+                      to={item.url}
+                      className="ccl-link ccl-link--inverted ccl-link--standalone ccl-breadcrumb__link"
                     >
-                      <span>{item.title}</span>
-                    </li>
-                  ),
-                ])}
-              </ol>
-            </Container>
-          </nav>
-        )}
-      </>
-    );
-  }
-}
+                      {item.title}
+                    </Link>
+                  </li>
+                ) : (
+                  <li
+                    key={index}
+                    className="ccl-breadcrumb__segment ccl-breadcrumb__segment--last"
+                  >
+                    <span>{item.title}</span>
+                  </li>
+                ),
+              ])}
+            </ol>
+          </Container>
+        </nav>
+      )}
+    </>
+  );
+};
+
+BreadcrumbsComponent.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);
+export default BreadcrumbsComponent;

package/src/customizations/volto/components/theme/Logout/Logout.jsx

@@ -1,64 +1,36 @@
-import { Component } from 'react';
-import { connect } from 'react-redux';
-
-import { logout, purgeMessages } from '@plone/volto/actions';
-
-import PropTypes from 'prop-types';
+import { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import qs from 'query-string';
+import { logout, purgeMessages } from '@plone/volto/actions';
 
-/**
- * Login container.
- * @module components/theme/Logout/Logout
- */
-
-/**
- * Logout class.
- * @class Logout
- * @extends Component
- */
-class CclLogout extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    logout: PropTypes.func.isRequired,
-    purgeMessages: PropTypes.func.isRequired,
-    query: PropTypes.shape({
-      return_url: PropTypes.string,
-    }),
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    query: null,
-  };
-
-  componentDidMount() {
-    // eslint-disable-next-line no-restricted-globals
-    this.props.logout();
-    window.location.href = '/';
-    this.props.purgeMessages();
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return '';
-  }
-}
-
-export default connect(
-  (state, props) => ({
-    query: qs.parse(props.location.search),
-  }),
-  { logout, purgeMessages },
-)(CclLogout);
+const Logout = ({ location }) => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  const returnUrl = useMemo(
+    () =>
+      qs.parse(location.search).return_url ||
+      location.pathname
+        .replace(/\/login\/?$/, '')
+        .replace(/\/logout\/?$/, '') ||
+      '/',
+    [location],
+  );
+
+  useEffect(() => {
+    dispatch(logout());
+    dispatch(purgeMessages());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!token) {
+      window.location.href = '/';
+    }
+  }, [history, returnUrl, token]);
+
+  return '';
+};
+
+export default Logout;

package/src/customizations/volto-form-block/components/FormView.jsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import {
+  Segment,
+  Message,
+  Grid,
+  Form,
+  Progress,
+  Button,
+} from 'semantic-ui-react';
+import { getFieldName } from 'volto-form-block/components/utils';
+import Field from 'volto-form-block/components/Field';
+import config from '@plone/volto/registry';
+
+/* Style */
+import 'volto-form-block/components/FormView.css';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+
+const messages = defineMessages({
+  default_submit_label: {
+    id: 'form_default_submit_label',
+    defaultMessage: 'Submit',
+  },
+  error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
+  success: {
+    id: 'form_submit_success',
+    defaultMessage: 'Sent!',
+  },
+  empty_values: {
+    id: 'form_empty_values_validation',
+    defaultMessage: 'Fill in the required fields',
+  },
+  reset: {
+    id: 'form_reset',
+    defaultMessage: 'Clear',
+  },
+});
+
+const FormView = ({
+  formState,
+  formErrors,
+  formData,
+  onChangeFormData,
+  data,
+  onSubmit,
+  resetFormState,
+  resetFormOnError,
+  captcha,
+  id,
+}) => {
+  const intl = useIntl();
+  const FieldSchema = config.blocks.blocksConfig.form.fieldSchema;
+
+  const isValidField = (field) => {
+    return formErrors?.indexOf(field) < 0;
+  };
+
+  return (
+    <div className="block form">
+      <div className="public-ui">
+        <Segment style={{ margin: '2rem 0' }} padded>
+          {data.title && <h2>{data.title}</h2>}
+          {data.description && (
+            <p className="description">{data.description}</p>
+          )}
+          {formState.error ? (
+            <Message error role="alert">
+              <Message.Header as="h4">
+                {intl.formatMessage(messages.error)}
+              </Message.Header>
+              <p>{formState.error}</p>
+              <Button secondary type="clear" onClick={resetFormOnError}>
+                {intl.formatMessage(messages.reset)}
+              </Button>
+            </Message>
+          ) : formState.result ? (
+            <Message positive role="alert">
+              <Message.Header as="h4">
+                {intl.formatMessage(messages.success)}
+              </Message.Header>
+              <p>{formState.result}</p>
+              <Button secondary type="clear" onClick={resetFormState}>
+                {intl.formatMessage(messages.reset)}
+              </Button>
+            </Message>
+          ) : (
+            <Form
+              id={id}
+              loading={formState.loading}
+              onSubmit={onSubmit}
+              autoComplete="off"
+              method="post"
+            >
+              <Grid columns={1} padded="vertically">
+                {data.static_fields?.map((field) => (
+                  <Grid.Row key={field.field_id} className="static-field">
+                    <Grid.Column>
+                      <Field
+                        {...field}
+                        field_type={field.field_type || 'text'}
+                        name={
+                          'static_field_' +
+                          (field.field_id ??
+                            field.name?.toLowerCase()?.replace(' ', ''))
+                        }
+                        value={field.value}
+                        onChange={() => {}}
+                        disabled
+                        valid
+                        formHasErrors={formErrors?.length > 0}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                ))}
+                {data.subblocks?.map((subblock, index) => {
+                  let name = getFieldName(subblock.label, subblock.id);
+
+                  var fields_to_send = [];
+                  var fieldSchemaProperties = FieldSchema(subblock)?.properties;
+                  for (var key in fieldSchemaProperties) {
+                    if (fieldSchemaProperties[key].send_to_backend) {
+                      fields_to_send.push(key);
+                    }
+                  }
+
+                  var fields_to_send_with_value = Object.assign(
+                    {},
+                    ...fields_to_send.map((field) => {
+                      return {
+                        [field]: subblock[field],
+                      };
+                    }),
+                  );
+
+                  return (
+                    <Grid.Row key={'row' + index}>
+                      <Grid.Column>
+                        <Field
+                          {...subblock}
+                          name={name}
+                          onChange={(field, value) =>
+                            onChangeFormData(
+                              subblock.id,
+                              field,
+                              value,
+                              fields_to_send_with_value,
+                            )
+                          }
+                          value={
+                            subblock.field_type === 'static_text'
+                              ? subblock.value
+                              : formData[name]?.value
+                          }
+                          valid={isValidField(name)}
+                          formHasErrors={formErrors?.length > 0}
+                        />
+                      </Grid.Column>
+                    </Grid.Row>
+                  );
+                })}
+                {captcha.render()}
+                {formErrors.length > 0 && (
+                  <Message error role="alert">
+                    <Message.Header as="h4">
+                      {intl.formatMessage(messages.error)}
+                    </Message.Header>
+                    <p>{intl.formatMessage(messages.empty_values)}</p>
+                  </Message>
+                )}
+                <Grid.Row centered className="row-padded-top">
+                  <Grid.Column textAlign="center">
+                    <CclButton
+                      className="ccl-button ccl-button-green"
+                      type="submit"
+                      disabled={formState.loading}
+                    >
+                      {data.submit_label ||
+                        intl.formatMessage(messages.default_submit_label)}
+
+                      {formState.loading && (
+                        <Progress
+                          role="progressbar"
+                          percent={100}
+                          active
+                          success={false}
+                          color="grey"
+                        />
+                      )}
+                    </CclButton>
+                  </Grid.Column>
+                </Grid.Row>
+              </Grid>
+            </Form>
+          )}
+        </Segment>
+      </div>
+    </div>
+  );
+};
+
+export default FormView;