@eeacms/volto-cca-policy 0.3.65 → 0.3.67

package/src/components/theme/Header/LanguageSwitch.jsx

@@ -20,8 +20,8 @@ export default function LanguageSwitch({ history }) {
   );
   const [, setSelectedLanguage] = useAtom(selectedLanguageAtom);
   const width = useSelector((state) => state.screen?.width);
-
   const currentLang = useSelector((state) => state.intl.locale);
+
   const [language, setLanguage] = React.useState(
     currentLang || eea.defaultLanguage,
   );
@@ -45,7 +45,43 @@ export default function LanguageSwitch({ history }) {
     });
   };
 
-  // .filter((item) => eea.non_eu_langs.indexOf(item.code) !== -1)
+  const renderLanguageItems = (languages) =>
+    languages.map((item, index) => {
+      const translated = (translations || []).some(
+        (obj) => obj.language === item.code,
+      );
+      const active = item.code === currentLang;
+      const disabled = !translated && !active;
+
+      return (
+        <Dropdown.Item
+          className={cx({
+            disabled: disabled,
+            active: active,
+          })}
+          as="li"
+          key={index}
+          text={
+            <span>
+              <span className="country-code">{item.code.toUpperCase()}</span>{' '}
+              {item.name}
+            </span>
+          }
+          onClick={(e) =>
+            disabled || active ? e.preventDefault() : handlePageRedirect(item)
+          }
+        />
+      );
+    });
+
+  const euLanguages = eea.languages.filter(
+    (item) => eea.non_eu_langs.indexOf(item.code) === -1,
+  );
+
+  const nonEuLanguages = eea.languages.filter(
+    (item) => eea.non_eu_langs.indexOf(item.code) !== -1,
+  );
+
   return (
     <Header.TopDropdownMenu
       id="language-switcher"
@@ -56,7 +92,7 @@ export default function LanguageSwitch({ history }) {
       }
       text={`${language.toUpperCase()}`}
       mobileText={`${language.toUpperCase()}`}
-      icon={<Image src={globeIcon} alt="language dropdown globe icon"></Image>}
+      icon={<Image src={globeIcon} alt="language dropdown globe icon" />}
       viewportWidth={width}
     >
       <ul
@@ -64,39 +100,8 @@ export default function LanguageSwitch({ history }) {
         role="listbox"
         aria-label="language switcher"
       >
-        {eea.languages
-          .filter((item) => eea.non_eu_langs.indexOf(item.code) === -1)
-          .map((item, index) => {
-            const translated = (translations || []).some(
-              (obj) => obj.language === item.code,
-            );
-            const active = item.code === currentLang;
-            const disabled = !translated && !active;
+        {renderLanguageItems(euLanguages)}
 
-            return (
-              <Dropdown.Item
-                className={cx({
-                  disabled: disabled,
-                  active: active,
-                })}
-                as="li"
-                key={index}
-                text={
-                  <span>
-                    <span className="country-code">
-                      {item.code.toUpperCase()}
-                    </span>{' '}
-                    {item.name}
-                  </span>
-                }
-                onClick={(e) =>
-                  disabled || active
-                    ? e.preventDefault()
-                    : handlePageRedirect(item)
-                }
-              ></Dropdown.Item>
-            );
-          })}
         <strong className="noneu-langs-label">
           <FormattedMessage
             id="Non-EU Languages"
@@ -104,39 +109,7 @@ export default function LanguageSwitch({ history }) {
           />
         </strong>
 
-        {eea.languages
-          .filter((item) => eea.non_eu_langs.indexOf(item.code) !== -1)
-          .map((item, index) => {
-            const translated = (translations || []).some(
-              (obj) => obj.language === item.code,
-            );
-            const active = item.code === currentLang;
-            const disabled = !translated && !active;
-
-            return (
-              <Dropdown.Item
-                className={cx({
-                  disabled: disabled,
-                  active: active,
-                })}
-                as="li"
-                key={index}
-                text={
-                  <span>
-                    <span className="country-code">
-                      {item.code.toUpperCase()}
-                    </span>{' '}
-                    {item.name}
-                  </span>
-                }
-                onClick={(e) =>
-                  disabled || active
-                    ? e.preventDefault()
-                    : handlePageRedirect(item)
-                }
-              ></Dropdown.Item>
-            );
-          })}
+        {renderLanguageItems(nonEuLanguages)}
       </ul>
     </Header.TopDropdownMenu>
   );

package/src/components/theme/ImageGallery/ImageGallery.jsx

@@ -89,10 +89,10 @@ const ImageGallery = (props) => {
           <Slider {...carouselSettings} ref={sliderRef}>
             {items.map((item, i) => {
               return image.rights ? (
-                <div>
+                <div key={i}>
                   <div className="image-slide">
                     <div className="image-rights">@ {image.rights}</div>
-                    <Image key={i} src={item.url} alt={item?.title} />
+                    <Image src={item.url} alt={item?.title} />
                   </div>
                 </div>
               ) : (

package/src/components/theme/ImageGallery/ImageGallery.test.jsx

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ImageGallery from './ImageGallery';
+
+jest.mock('react-slick', () => (props) => <div>React Slick Gallery</div>);
+
+const mockItems = [
+  {
+    url: 'https://example.com/image1.jpg',
+    title: 'Image One',
+    description: 'First image description',
+    rights: 'Author One',
+  },
+  {
+    url: 'https://example.com/image2.jpg',
+    title: 'Image Two',
+    description: 'Second image description',
+    rights: 'Author Two',
+  },
+];
+
+describe('ImageGallery', () => {
+  it('renders preview image and opens modal on click', () => {
+    render(<ImageGallery items={mockItems} />);
+
+    const previewImage = screen.getByRole('img', { name: /Image One/i });
+    expect(previewImage).toBeInTheDocument();
+
+    expect(
+      screen.queryByText('First image description'),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(previewImage);
+
+    expect(screen.getByText('Image One')).toBeInTheDocument();
+    expect(screen.getByText('First image description')).toBeInTheDocument();
+  });
+});

package/src/components/theme/PortalMessage/PortalMessage.test.jsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import PortalMessage from './PortalMessage';
+import { IntlProvider } from 'react-intl';
+import '@testing-library/jest-dom';
+
+const renderWithIntl = (ui) =>
+  render(<IntlProvider locale="en">{ui}</IntlProvider>);
+
+describe('PortalMessage', () => {
+  it('renders the message component when content is archived', () => {
+    const content = { review_state: 'archived' };
+    const { container } = renderWithIntl(<PortalMessage content={content} />);
+
+    const messageEl = container.querySelector('.ui.message');
+    expect(messageEl).toBeInTheDocument();
+  });
+
+  it('renders nothing when content is not archived', () => {
+    const content = { review_state: 'published' };
+    const { container } = renderWithIntl(<PortalMessage content={content} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/src/components/theme/Widgets/PromotionalImageWidget.jsx

@@ -72,6 +72,24 @@ const messages = defineMessages({
  * ```
  *
  */
+function parseDataURL(dataUrl) {
+  if (!dataUrl.startsWith('data:')) return null;
+
+  const commaIndex = dataUrl.indexOf(',');
+  if (commaIndex === -1) return null;
+
+  const meta = dataUrl.slice(5, commaIndex);
+  const data = dataUrl.slice(commaIndex + 1);
+
+  const [contentType, encoding] = meta.split(';');
+
+  return {
+    'content-type': contentType || '',
+    encoding: encoding || '',
+    data: data || '',
+  };
+}
+
 const FileWidget = (props) => {
   const { id, value, onChange, isDisabled } = props;
   const [fileType, setFileType] = React.useState(false);
@@ -99,27 +117,31 @@ const FileWidget = (props) => {
     const file = files[0];
     if (!validateFileUploadSize(file, intl.formatMessage)) return;
     readAsDataURL(file).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      onChange(id, {
-        data: fields[3],
-        encoding: fields[2],
-        'content-type': fields[1],
-        filename: file.name,
-      });
+      const fields = parseDataURL(data);
+      if (fields) {
+        onChange(id, {
+          data: fields.data,
+          encoding: fields.encoding,
+          'content-type': fields['content-type'],
+          filename: file.name,
+        });
+      }
     });
 
-    let reader = new FileReader();
+    const reader = new FileReader();
     reader.onload = function () {
-      const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
-      if (imageMimetypes.includes(fields[1])) {
+      const parsed = parseDataURL(reader.result);
+      if (parsed && imageMimetypes.includes(parsed['content-type'])) {
         setFileType(true);
-        let imagePreview = document.getElementById(`field-${id}-image`);
-        imagePreview.src = reader.result;
+        const imagePreview = document.getElementById(`field-${id}-image`);
+        if (imagePreview) {
+          imagePreview.src = reader.result;
+        }
       } else {
         setFileType(false);
       }
     };
-    reader.readAsDataURL(files[0]);
+    reader.readAsDataURL(file);
   };
 
   return (

package/src/index.js

@@ -522,7 +522,7 @@ const applyConfig = (config) => {
     },
     {
       match: {
-        path: /(.*)\/add$/,
+        path: /^.*\/add$/,
       },
       component: RedirectToLogin,
     },
@@ -532,13 +532,13 @@ const applyConfig = (config) => {
     ...config.settings.apiExpanders,
     {
       match: {
-        path: /(.*)\/policy-context\/country-profiles\/(.*)/,
+        path: /\/policy-context\/country-profiles\/.+/,
       },
       GET_CONTENT: ['siblings'],
     },
     {
       match: {
-        path: /(.*)\/countries-regions\/countries\/(.*)/,
+        path: /\/countries-regions\/countries\/.+/,
       },
       GET_CONTENT: ['siblings'],
     },
@@ -567,6 +567,21 @@ const applyConfig = (config) => {
     'plone.app.vocabularies.Users'
   ] = SelectAutoCompleteWidget;
 
+  config.settings.matomoTrackerIdFn = (pathname) => {
+    return pathname.split('/')[2] === 'mission'
+      ? {
+          matomoSiteId:
+            typeof window !== 'undefined'
+              ? window.env?.RAZZLE_MATOMO_SITE_ID || '321'
+              : '321',
+          matomoSecondSiteId:
+            typeof window !== 'undefined'
+              ? window.env?.RAZZLE_MATOMO_MISSION_SITE_ID || '321'
+              : '321',
+        }
+      : null;
+  };
+
   return compose(installBlocks, installSearchEngine, installStore)(config);
 };
 

package/src/utils.js

@@ -101,6 +101,15 @@ export const formatTextToHTML = (text) => {
     : `<p>${formattedText}</p>`;
 };
 
+const trimTrailingChars = (str) => {
+  const charsToTrim = ['-', '–', ';', ',', ':', ' '];
+  let end = str.length;
+  while (end > 0 && charsToTrim.includes(str[end - 1])) {
+    end--;
+  }
+  return str.substring(0, end);
+};
+
 export const extractPlanNameAndURL = (text) => {
   if (!text) return { name: '', url: '' };
 
@@ -114,12 +123,8 @@ export const extractPlanNameAndURL = (text) => {
 
   if (url) {
     // Remove URL and any punctuation before it
-    name = name
-      .replace(`(${url})`, '')
-      .replace(url, '')
-      .replace(/[-–;,:\s]+$/, '')
-      .replace(/[-–;,:\s]+$/, '')
-      .trim();
+    name = name.replace(`(${url})`, '').replace(url, '');
+    name = trimTrailingChars(name).trim();
   }
 
   return {