@eeacms/volto-clms-theme 1.0.113 → 1.0.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.113",
+  "version": "1.0.116",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -55,7 +55,7 @@
     "react-svg": "14.0.4",
     "slick-carousel": "1.8.1",
     "volto-dropdownmenu": "2.2.7",
-    "volto-form-block": "2.2.2",
+    "volto-form-block": "2.4.1",
     "react-input-range": "^1.3.0",
     "lightgallery": "^2.4.0",
     "validator": "13.7.0"

package/src/actions/index.js

@@ -92,3 +92,5 @@ export {
   POST_IMPORT_WMS_FIELDS,
   postImportWMSFields,
 } from './import_wms_fields/import_wms_fields';
+
+export { DELETE_PROFILE, delProfile } from './profile/delete_profile';

package/src/actions/profile/delete_profile.js

@@ -0,0 +1,20 @@
+/**
+ * Delete profle.
+ * @module actions/newsletter
+ */
+export const DELETE_PROFILE = 'DELETE_PROFILE';
+
+/**
+ * Delete profle.
+ * @function delProfile
+ * @returns {Object} Get extra items action.
+ */
+export function delProfile() {
+  return {
+    type: DELETE_PROFILE,
+    request: {
+      op: 'del',
+      path: `/@delete-user-profile`,
+    },
+  };
+}

package/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx

@@ -10,7 +10,7 @@ const CclGreenBgView = (props) => {
       <div
         className="ccl-banner-top-main"
         style={{
-          backgroundImage: `url(${data?.image?.url}/@@images/image/large)`,
+          backgroundImage: `url(${data?.image?.url}/@@images/image/huge)`,
         }}
       >
         {isEditMode && <CclHomeImageEditor {...props} />}

package/src/components/Blocks/CclHomeUsersBlock/CclHomeUsersBlockEdit.jsx

@@ -57,7 +57,7 @@ const CclHomeUsersBlockEdit = ({
         }}
         aria-hidden="true"
       >
-        {data.title}
+        {data.title || 'Home users block'}
       </div>
       <div>
         <div className={'line'}>
@@ -91,8 +91,22 @@ const CclHomeUsersBlockEdit = ({
                   />
                 </div>
                 <div className={'card-text'}>
-                  <div className="card-title">{panel?.title}</div>
-                  <div className="card-description">{panel?.description}</div>
+                  <div className="card-title">
+                    {panel.title
+                      ? panel.title
+                      : panel.productUrl &&
+                        panel.productUrl.length > 0 &&
+                        panel.productUrl[0]['@id'].indexOf('http') !== 0
+                      ? panel.productUrl[0].title
+                      : panel.title}
+                  </div>
+                  <div className="card-description">
+                    {panel.description
+                      ? panel.description
+                      : panel.productUrl && panel.productUrl.length > 0
+                      ? panel.productUrl[0].description
+                      : panel.description}
+                  </div>
                 </div>
               </div>
             </div>

package/src/components/Blocks/CclHomeUsersBlock/CclHomeUsersBlockView.jsx

@@ -4,7 +4,7 @@ import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import './styles.less';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { ConditionalLink } from '@plone/volto/components';
 
 const CclHomeUsersBlockView = (props) => {
   const settings = {
@@ -42,7 +42,6 @@ const CclHomeUsersBlockView = (props) => {
   let cards = data?.customCards?.blocks_layout?.items.map(
     (uid) => data.customCards.blocks[uid],
   );
-
   return (
     <div className="home-meet-container">
       <div className="ccl-container">
@@ -57,6 +56,13 @@ const CclHomeUsersBlockView = (props) => {
                       src={`${card.image.url}/@@images/image`}
                       alt={card.image.alt}
                     />
+                  ) : card.productUrl &&
+                    card.productUrl.length > 0 &&
+                    card.productUrl[0].image_field ? (
+                    <img
+                      src={`${card.productUrl[0]['@id']}/@@images/${card.productUrl[0].image_field}/preview`}
+                      alt={card?.productUrl[0].title || 'Placeholder'}
+                    />
                   ) : (
                     <img
                       src={
@@ -66,14 +72,31 @@ const CclHomeUsersBlockView = (props) => {
                     />
                   )}
                 </div>
-                <a
-                  href={flattenToAppURL(card.url)}
-                  target={'_blank'}
-                  rel="noreferrer"
+                <ConditionalLink
+                  condition={card.productUrl && card.productUrl.length > 0}
+                  item={
+                    card.productUrl && card.productUrl.length > 0
+                      ? card.productUrl[0]
+                      : {}
+                  }
                 >
-                  <h4>{card.title}</h4>
-                </a>
-                <p>{card.description}</p>
+                  <h4>
+                    {card.title
+                      ? card.title
+                      : card.productUrl &&
+                        card.productUrl.length > 0 &&
+                        card.productUrl[0]['@id'].indexOf('http') !== 0
+                      ? card.productUrl[0].title
+                      : card.title}
+                  </h4>
+                </ConditionalLink>
+                <p>
+                  {card.description
+                    ? card.description
+                    : card.productUrl && card.productUrl.length > 0
+                    ? card.productUrl[0].description
+                    : card.description}
+                </p>
               </div>
             </div>
           ))}

package/src/components/Blocks/CclHomeUsersBlock/HomeUsersSchema.js

@@ -28,7 +28,7 @@ export const CardBlockSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'description', 'url'],
+      fields: ['title', 'description', 'productUrl'],
     },
   ],
   properties: {
@@ -42,9 +42,12 @@ export const CardBlockSchema = () => ({
       title: 'Product description',
       type: 'string',
     },
-    url: {
-      title: 'url',
-      type: 'string',
+    productUrl: {
+      title: 'Object or url',
+      widget: 'object_browser',
+      mode: 'link',
+      selectedItemAttrs: ['description', 'image_field'],
+      allowExternals: true,
     },
   },
   required: ['product'],

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingWorkOpportunities.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { workOpportunitiesCclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const messages = defineMessages({
   ProcurementNo: {
@@ -21,6 +22,8 @@ const messages = defineMessages({
 
 const CclWorkOpportunity = (props) => {
   const { item, intl, user } = props;
+  const lang = useSelector((state) => state.intl.locale);
+
   return (
     <div className="card-work">
       {user.roles && user.roles.includes('Manager') && (
@@ -52,7 +55,7 @@ const CclWorkOpportunity = (props) => {
         <span className="card-work-title">
           {intl.formatMessage(messages.SubmissionDeadline)}
         </span>
-        {new Date(item.submission_deadline).toLocaleString()}
+        {workOpportunitiesCclDateTimeFormat(item.submission_deadline, lang)}
       </div>
     </div>
   );

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeFacet.jsx

@@ -57,9 +57,7 @@ const DoubleRangeFacet = (props) => {
         tabIndex={0}
         role={'button'}
       >
-        <legend className="ccl-form-legend">
-          {facet.title} {startingValues.min} - {startingValues.max}
-        </legend>
+        <legend className="ccl-form-legend">{facet.title}</legend>
       </div>
       <div>
         <Segment basic padded>

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/rewriteOptions.js

@@ -4,7 +4,7 @@ export const portal_types_labels = {
   'News Item': 'News',
   'eea.meeting': 'Event',
   UseCase: 'Use case',
-  WorkOpportunity: 'Work opportunity',
+  WorkOpportunity: 'Job vacancy',
   Tender: 'Tender',
   TechnicalLibrary: 'Product documentation',
 };

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

@@ -16,7 +16,12 @@ const RoutingHOC = (TabView) =>
       ) {
         return rTabsList[0];
       }
-      return rTabsList[window.location.hash.match(/.*&?#?tab=(.*)/)[1] - 1];
+      if (
+        window.location.hash.match(/.*&?#?tab=(.*)/) &&
+        window.location.hash.match(/.*&?#?tab=(.*)/).length > 1
+      ) {
+        return rTabsList[window.location.hash.match(/.*&?#?tab=(.*)/)[1] - 1];
+      }
     }
     React.useEffect(() => {
       const isReload =

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -85,6 +85,13 @@ const DataSetInfoContent = (props) => {
           ></CclInfoDescription>
         )}
       </CclInfoContainer>
+      {citation?.data && citation?.data !== '<p><br/></p>' && (
+        <CclCitation
+          title="Citation status"
+          marginBottom={true}
+          children={<StringToHTML string={citation?.data} />}
+        ></CclCitation>
+      )}
       <div className="dataset-info-documents dropdown">
         <div className="accordion-block">
           {renderAccordion(geonetwork_identifiers?.items, libraries) && (
@@ -192,14 +199,6 @@ const DataSetInfoContent = (props) => {
           )}
         </div>
       </div>
-
-      {citation?.data && citation?.data !== '<p><br/></p>' && (
-        <CclCitation
-          title="Citation status"
-          marginBottom={true}
-          children={<StringToHTML string={citation?.data} />}
-        ></CclCitation>
-      )}
     </div>
   );
 };

package/src/components/CLMSDatasetDetailView/DownloadDataSetContent.jsx

@@ -34,6 +34,10 @@ const DownloadDataSetContent = (data) => {
             >
               Go to download by area
             </CclButton>
+          ) : data.mapviewer_istimeseries === true ? (
+            <CclButton url={location.pathname + '/download-by-area'}>
+              Go to download by area and time
+            </CclButton>
           ) : (
             <CclButton url={location.pathname + '/download-by-area'}>
               Go to download by area

package/src/components/CLMSLoginView/CLMSLogin.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import config from '@plone/volto/registry';
+import { UniversalLink } from '@plone/volto/components';
 import { toPublicURL } from '@plone/volto/helpers/Url/Url';
 import './CLMSLogin.css';
 
@@ -29,33 +30,49 @@ function CLMSLoginView(props) {
         <h1 className="page-title">Registration / Login</h1>
         <div className="modal-login-text">
           <p>
-            This site uses EU Login to handle user registration and login. You
-            can read more about this service in the{' '}
-            <a href="https://ecas.ec.europa.eu/cas/about.html">
-              EU Login site help
-            </a>
+            EU Login, the European Commission Authentication Service, enables
+            you to access various web applications centrally using the same
+            e-mail and password. You can read more{' '}
+            <UniversalLink
+              openLinkInNewTab
+              href="https://ecas.ec.europa.eu/cas/about.html"
+            >
+              here
+            </UniversalLink>
             .
           </p>
           <p>
-            {' '}
-            When you clik on the following link, you will be sent to EU Login
-            and after a successful login there you will be redirected back to
-            this site.
+            If you have EU Login account, please click 'Login using EU Login'.
           </p>
           <p>
-            If you have any issues or questions, please contact us using the
-            <a href="/en/contact-service-helpdesk"> helpdesk</a>.
+            If you don't have EU Login account, please folloe this{' '}
+            <UniversalLink
+              openLinkInNewTab
+              href="https://ecas.ec.europa.eu/cas/eim/external/register.cgi"
+            >
+              link
+            </UniversalLink>{' '}
+            to create it
+          </p>
+          <p>
+            If you have othe questions, please contact our
+            <UniversalLink openLinkInNewTab href="/en/service-desk">
+              {' '}
+              Service desk
+            </UniversalLink>
+            .
           </p>
         </div>
       </div>
       <div className="login-button">
         <div className="modal-buttons">
-          <a
+          <UniversalLink
             href={toPublicURL(loginUrl) || '#'}
+            openLinkInNewTab
             className="ccl-button ccl-button-green"
           >
             Login using EU Login
-          </a>
+          </UniversalLink>
         </div>
       </div>
     </>

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { hasBlocksData } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
+import { cclDateFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { LightGalleryListing } from '@eeacms/volto-clms-theme/components/CLMSMeetingView/CclLightGallery';
 import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards';
 import config from '@plone/volto/registry';
@@ -54,7 +54,7 @@ const CLMSNewsItemView = (props) => {
           <h1 className="page-title">{content.title}</h1>
           <div className="news-detail">
             <div className="news-detail-date">
-              {cclDateTimeFormat(content?.effective)}
+              {cclDateFormat(content?.effective)}
             </div>
             {content?.image && (
               <figure className="news-detail-image">

package/src/components/CLMSProfileView/CLMSDeleteProfileView.jsx

@@ -0,0 +1,53 @@
+/**
+ * CLMSProfileView container.
+ * @module components/CLMSProfileView/CLMSProfileView
+ */
+
+import React from 'react';
+
+import { injectIntl } from 'react-intl';
+import { Container } from 'semantic-ui-react';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import { delProfile } from '../../actions';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { logout } from '@plone/volto/actions';
+
+export const CLMSDeleteProfileView = (props) => {
+  const dispatch = useDispatch();
+  let history = useHistory();
+
+  const isDeleted = useSelector((state) => state.profile_delete.loaded)
+    ? true
+    : false;
+
+  function handleClick() {
+    dispatch(delProfile());
+  }
+
+  if (isDeleted === true) {
+    history.push('/');
+    dispatch(logout());
+  }
+
+  return (
+    <Container>
+      <div>
+        <h1 className="page-title">Delete your profile</h1>
+        <p>Click in the button bellow to your profile.</p>
+
+        <CclButton
+          to="profile#Delete-profile"
+          mode={'filled'}
+          onClick={() => {
+            handleClick();
+          }}
+        >
+          Delete
+        </CclButton>
+      </div>
+    </Container>
+  );
+};
+
+export default injectIntl(CLMSDeleteProfileView);

package/src/components/CLMSProfileView/CLMSProfileView.jsx

@@ -11,6 +11,7 @@ import {
   CLMSApiTokensView,
   CLMSNewsletterSubscriberView,
   CLMSUserProfileView,
+  CLMSDeleteProfileView,
 } from '@eeacms/volto-clms-theme/components/CLMSProfileView';
 import React, { Component } from 'react';
 
@@ -75,6 +76,9 @@ class CLMSProfileView extends Component {
                 <SubscriptionView type={subscription?.type} />
               </div>
             ))}
+            <div tabTitle="Delete profile">
+              <CLMSDeleteProfileView />
+            </div>
           </CclTabs>
         ) : (
           <Unauthorized />

package/src/components/CLMSProfileView/index.js

@@ -2,3 +2,4 @@ export CLMSProfileView from './CLMSProfileView';
 export CLMSUserProfileView from './CLMSUserProfileView';
 export CLMSApiTokensView from './CLMSApiTokensView';
 export CLMSNewsletterSubscriberView from './CLMSNewsletterSubscriberView';
+export CLMSDeleteProfileView from './CLMSDeleteProfileView';

package/src/components/CLMSSubscriptionView/ConfirmSubscriptionView.jsx

@@ -111,8 +111,8 @@ class ConfirmSubscriptionView extends Component {
                 type:
                   this.props.type[0].toUpperCase() + this.props.type.slice(1),
                 subscribe_or_unsubscribe: this.props.isUnsubscribe
-                  ? 'unsubscribe'
-                  : 'subscribe',
+                  ? 'unsubscription'
+                  : 'subscription',
               })}
             </h1>
             <div className="event-detail">
@@ -120,8 +120,8 @@ class ConfirmSubscriptionView extends Component {
                 <p>
                   {this.props.intl.formatMessage(messages.description, {
                     subscribe_or_unsubscribe: this.props.isUnsubscribe
-                      ? 'unsubscribe'
-                      : 'subscribe',
+                      ? 'unsubscription'
+                      : 'subscription',
                   })}
                 </p>
               </div>