@eeacms/volto-clms-theme 1.0.41 → 1.0.45

package/src/components/Blocks/CclRelatedListingBlock/schema.js

@@ -0,0 +1,34 @@
+import config from '@plone/volto/registry';
+
+const Schema = (types_schema) => {
+  const variationsConfig =
+    config.blocks.blocksConfig['relatedListing'].variations;
+  const variations = Object.keys(variationsConfig).map((variation) => [
+    variationsConfig[variation].id,
+    variationsConfig[variation].title,
+  ]);
+  return {
+    title: 'Related Items List block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['content_type', 'variation'],
+      },
+    ],
+    properties: {
+      content_type: {
+        title: 'Content Type',
+        choices: [...types_schema],
+      },
+      variation: {
+        title: 'Variation',
+        type: 'array',
+        choices: [...variations],
+      },
+    },
+    required: [],
+  };
+};
+
+export default Schema;

package/src/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselEdit.jsx

@@ -0,0 +1,38 @@
+import React /* , { useState } */ from 'react';
+
+// import { TextLinkCarouselView } from './TextLinkCarouselView';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { TextLinkCarouselSchema } from './TextLinkCarouselSchema';
+
+// import { compose } from 'redux';
+// import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+// import { injectIntl } from 'react-intl';
+
+const TextLinkCarouselEdit = (props) => {
+  const { block, data, onChangeBlock, selected } = props;
+
+  return (
+    <>
+      {data?.textLink?.items.map((item, index) => (
+        <div className="text-link-carousel-block" key={index}>
+          {item.text}
+        </div>
+      ))}
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={TextLinkCarouselSchema()}
+          title="Home text link carousel"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+export default /*  compose(withObjectBrowser, injectIntl) */ TextLinkCarouselEdit;

package/src/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import loadable from '@loadable/component';
+const Slider = loadable(() => import('react-slick'));
+
+const TextLinkCarouselView = (props) => {
+  const { data } = props;
+  const slider = React.useRef(null);
+
+  const { tabsList = [], setActiveTab = () => {} } = props;
+  const settings = {
+    dots: false,
+    infinite: true,
+    speed: 500,
+    fade: false,
+    cssEase: 'linear',
+    arrows: false,
+    autoplay: true,
+    autoplaySpeed: 2000,
+    beforeChange: (oldIndex, index) => {
+      setActiveTab(tabsList[index]);
+    },
+  };
+
+  return (
+    <>
+      <div class="ccl-container">
+        <Slider {...settings} ref={slider} className="text-carousel">
+          {data?.textLink?.items.map((item, index) => (
+            <div className="text-link-carousel-block" key={index}>
+              <div className="text-link-carousel-block-content">
+                <a href={'' + item?.link?.[0]?.['@id']}>{item.text}</a>
+              </div>
+            </div>
+          ))}
+        </Slider>
+      </div>
+    </>
+  );
+};
+
+export default TextLinkCarouselView;

package/src/components/Blocks/CclTextLinkCarouselBlock/TextLinkCarouselSchema.js

@@ -0,0 +1,18 @@
+export const TextLinkCarouselSchema = () => ({
+  title: 'Home text link carousel',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['textLink'],
+    },
+  ],
+  properties: {
+    textLink: {
+      title: 'Text and Link',
+      widget: 'text_link_widget',
+      type: 'string',
+    },
+  },
+  required: [],
+});

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

@@ -36,19 +36,7 @@ const CclWorkOpportunity = (props) => {
   );
 };
 
-function formatDate(date) {
-  var d = new Date(date),
-    month = '' + (d.getMonth() + 1),
-    day = '' + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = '0' + month;
-  if (day.length < 2) day = '0' + day;
-
-  return [year, month, day].join('-');
-}
-
-var Today = formatDate(Date.now());
+var Today = new Date();
 
 const CclListingWorkOpportunities = (props) => {
   const { items, variation } = props;
@@ -61,7 +49,8 @@ const CclListingWorkOpportunities = (props) => {
       {items
         .filter(
           (item) =>
-            item.submission_deadline < Today && status === 'CloseTenders',
+            new Date(item.submission_deadline) < Today &&
+            status === 'CloseTenders',
         )
         .map((item, index) => (
           <CclWorkOpportunity
@@ -73,7 +62,8 @@ const CclListingWorkOpportunities = (props) => {
       {items
         .filter(
           (item) =>
-            item.submission_deadline > Today && status === 'OpenTenders',
+            new Date(item.submission_deadline) > Today &&
+            status === 'OpenTenders',
         )
         .map((item, index) => (
           <CclWorkOpportunity

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

@@ -3,12 +3,10 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import loadable from '@loadable/component';
-import { Icon, RenderBlocks } from '@plone/volto/components';
+import { RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import './custom.less';
-import rightArrowSVG from '@eeacms/volto-tabs-block/icons/right-arrow.svg';
-import leftArrowSVG from '@eeacms/volto-tabs-block/icons/left-arrow.svg';
-// import cx from 'classnames';
+import cx from 'classnames';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';
@@ -29,17 +27,43 @@ const View = (props) => {
   const activeTabIndex = tabsList.indexOf(activeTab);
 
   const settings = {
-    dots: true,
+    dots: false,
     infinite: true,
     speed: 2000,
     fade: true,
     cssEase: 'linear',
-    autoplay: true,
+    autoplay: false,
     autoplaySpeed: 5000,
     beforeChange: (oldIndex, index) => {
       setActiveTab(tabsList[index]);
     },
   };
+
+  const Dots = (props) => {
+    const { activeTab = null, tabsList = [], slider = {} } = props;
+    return tabsList.length > 1 ? (
+      <ul className={cx('slick-dots', props.uiContainer)} role={'tablist'}>
+        {tabsList.map((tab, index) => (
+          <li
+            key={`dot-${tab}`}
+            className={cx({ 'slick-active': activeTab === tab })}
+            role={'presentation'}
+          >
+            <button
+              onClick={() => {
+                if (slider.current) {
+                  slider.current.slickGoTo(index);
+                }
+              }}
+            />
+          </li>
+        ))}
+      </ul>
+    ) : (
+      ''
+    );
+  };
+
   const ArrowsGroup = (props) => {
     // const { activeTab = null, tabsList = [], slider = {} } = props;
     // const currentSlide = tabsList.indexOf(activeTab);
@@ -55,9 +79,7 @@ const View = (props) => {
               slider.current.slickPrev();
             }
           }}
-        >
-          <Icon name={leftArrowSVG} size="50px" />
-        </button>
+        ></button>
 
         <button
           aria-label="Next slide"
@@ -67,9 +89,7 @@ const View = (props) => {
               slider.current.slickNext();
             }
           }}
-        >
-          <Icon name={rightArrowSVG} size="50px" />
-        </button>
+        ></button>
       </div>
     );
   };
@@ -103,6 +123,7 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [hashlink.counter]);
 
+  const [showInfo, setShowInfo] = React.useState(false);
   const panes = tabsList.map((tab, index) => {
     return {
       id: tab,
@@ -111,7 +132,11 @@ const View = (props) => {
           key={`slide-${tab}`}
           {...props}
           metadata={metadata}
-          content={tabs[tab]}
+          content={{
+            ...tabs[tab],
+            setShowInfo: setShowInfo,
+            showInfo: showInfo,
+          }}
         />
       ),
     };
@@ -123,6 +148,7 @@ const View = (props) => {
         {panes.length ? panes.map((pane) => pane.renderItem) : ''}
       </Slider>
       <ArrowsGroup activeTab={activeTab} tabsList={tabsList} slider={slider} />
+      <Dots activeTab={activeTab} tabsList={tabsList} slider={slider} />
     </>
   );
 };

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import CclVerticalTabsView from './CclVerticalTabsView';
 import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
 
 const CclProductTabsView = (props) => {
+  const locale = useSelector((state) => state.intl.locale);
   const ExtraComponent = () => (
     <div className="left-menu-detail">
       <div className="menu-detail-image">
@@ -20,7 +22,10 @@ const CclProductTabsView = (props) => {
         )}
       </div>
       <div className="menu-detail-button">
-        <a href="/" className="ccl-button ccl-button--default">
+        <a
+          href={'/' + locale + '/map-viewer?product=' + props.metadata['UID']}
+          className="ccl-button ccl-button--default"
+        >
           <FormattedMessage
             id="View in the map viewer"
             defaultMessage="View in the map viewer"

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

@@ -7,52 +7,10 @@ import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import './fontawesome';
 import cx from 'classnames';
 import './custom.less';
+import { Route, NavLink } from 'react-router-dom';
 
 const CclVerticalFaqTabsView = (props) => {
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-  const {
-    metadata = {},
-    data = {},
-    tabsList = [],
-    activeTabIndex = 0,
-    hashlink = {},
-    setActiveTab = () => {},
-  } = props;
-
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          setActiveTab(id);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-  }, [
-    activeTabIndex,
-    data.id,
-    hashlink.counter,
-    hashlink.hash,
-    hashlinkOnMount,
-    props,
-    setActiveTab,
-    tabsList,
-  ]);
+  const { metadata = {}, tabsList = [] } = props;
 
   const PanelsComponent = () => {
     const { activeTab = null, tabs = {} } = props;
@@ -60,18 +18,20 @@ const CclVerticalFaqTabsView = (props) => {
       <div className="right-content cont-w-75">
         {tabsList.map((tab, index) => {
           return (
-            <div
-              key={index}
-              className={cx('panel', tab === activeTab && 'panel-selected')}
-              role="tabpanel"
-              aria-hidden="false"
-            >
-              <RenderBlocks
-                {...props}
-                metadata={metadata}
-                content={tabs[tab]}
-              />
-            </div>
+            <Route to={'#' + activeTab}>
+              <div
+                key={index}
+                className={cx('panel', tab === activeTab && 'panel-selected')}
+                role="tabpanel"
+                aria-hidden="false"
+              >
+                <RenderBlocks
+                  {...props}
+                  metadata={metadata}
+                  content={tabs[tab]}
+                />
+              </div>
+            </Route>
           );
         })}
       </div>
@@ -96,11 +56,10 @@ const CclVerticalFaqTabsView = (props) => {
                 id={tabIndex}
                 className={cx('card', tab === activeTab && 'active')}
               >
-                <a
-                  href={'#' + tabIndex}
+                <NavLink
+                  to={'#tab' + tabIndex}
                   className="collapsed"
                   onClick={(e) => {
-                    e.preventDefault();
                     if (activeTab !== tab) {
                       setActiveTab(tab);
                     }
@@ -112,7 +71,7 @@ const CclVerticalFaqTabsView = (props) => {
                   }}
                 >
                   {title || defaultTitle}
-                </a>
+                </NavLink>
               </div>
             );
           })}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+
+const FixTemplates = (TabView) =>
+  function Component(props) {
+    const deprecated_templates =
+      config.blocks.blocksConfig[TABS_BLOCK].deprecated_templates;
+    const { data = {} } = props;
+    const deprecated = deprecated_templates.includes(data.template);
+    const new_props = {
+      ...props,
+      data: { ...data, template: deprecated ? 'default' : data.template },
+    };
+
+    return <TabView {...new_props} />;
+  };
+
+export default FixTemplates;

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/custom.less

@@ -9,12 +9,18 @@ div.tabs-block.CCLCarousel {
     left: 50% !important;
     width: 100vw !important;
     max-width: initial !important;
-    // margin-top: -2rem;
     margin-right: -50vw !important;
     margin-left: -50vw !important;
   }
 }
 
+.slick-slider.text-carousel {
+  div & {
+    z-index: 1;
+    width: 60%;
+  }
+}
+
 .tabs-block .slick-slider {
   z-index: 1;
 }
@@ -22,3 +28,51 @@ div.tabs-block.CCLCarousel {
 .slick-arrows {
   margin-top: -2rem !important;
 }
+
+.text-link-carousel-block {
+  height: 2rem;
+  padding: 0;
+}
+
+.text-link-carousel-block-content {
+  display: flex;
+  height: 2rem;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.text-link-carousel-block .text-link-carousel-block-content > a,
+.text-link-carousel-block .text-link-carousel-block-content > a:hover {
+  color: #fff;
+}
+
+p.styled-slate {
+  margin-bottom: 0;
+}
+
+@media (max-width: 1200px) {
+  .text-link-carousel-block {
+    height: fit-content !important;
+    margin: 0.5rem;
+    margin-top: -2rem;
+  }
+
+  .text-carousel {
+    margin: 0.5rem;
+    margin-top: -2rem;
+  }
+
+  .text-link-carousel-block-content {
+    height: fit-content !important;
+  }
+}
+
+@media (max-width: 420px) {
+  .text-link-carousel-block {
+    margin-top: -4rem;
+  }
+
+  .text-carousel {
+    margin-top: -4rem;
+  }
+}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/index.js

@@ -4,6 +4,7 @@ import CclVerticalFaqTabsView from './CclVerticalFaqTabsView';
 import CclCarouselView from './CclCarouselView';
 import RoutingHOC from './RoutingHOC';
 import CclProductTabsView from './CclProductTabsView';
+import FixTemplates from './FixTemplates';
 
 export {
   CclTabsView,
@@ -12,4 +13,5 @@ export {
   CclCarouselView,
   RoutingHOC,
   CclProductTabsView,
+  FixTemplates,
 };