@eeacms/volto-cca-policy 0.3.82 → 0.3.84

package/CHANGELOG.md

@@ -4,7 +4,7 @@ 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).
 
-### [0.3.82](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.1...0.3.82) - 5 September 2025
+### [0.3.84](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.1...0.3.84) - 7 October 2025
 
 #### :rocket: Dependency updates
 
@@ -14,17 +14,34 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :bug: Bug Fixes
 
+- fix: duplicated code - make ItemsSection reusable [kreafox - [`52e2625`](https://github.com/eea/volto-cca-policy/commit/52e2625914f699c194f75d561f97959ab6c21fbf)]
 - fix: add missing props for title block [kreafox - [`1d8efa0`](https://github.com/eea/volto-cca-policy/commit/1d8efa0136960261196e7585f89f4ff7db75ae17)]
 - fix: trailing space issue in HtmlSlateWidget - refs #290137 [kreafox - [`34c1ff6`](https://github.com/eea/volto-cca-policy/commit/34c1ff6896a0fe3fae40527f31ea34220e945163)]
 
+#### :nail_care: Enhancements
+
+- refactor(mission): use ItemsSection in PlanningTab - refs #291190 [kreafox - [`9e96aaa`](https://github.com/eea/volto-cca-policy/commit/9e96aaac0686f6688b3406aca578b598882a9c29)]
+- change: update sectors with icons for Planning tab - refs #291190 [kreafox - [`8b82168`](https://github.com/eea/volto-cca-policy/commit/8b821686fc6b9d98c542d9f0315734b446070a17)]
+- change: update factors with icons for Assessment tab - refs #291189 [kreafox - [`d8b7afc`](https://github.com/eea/volto-cca-policy/commit/d8b7afc36b2129b60ef81d9a057c4c9be35cbb03)]
+- change: update sectors with icons for Action tab - refs #291188 [kreafox - [`a9f15c7`](https://github.com/eea/volto-cca-policy/commit/a9f15c70fa261c9da5b0f01d0bf07ede0136085f)]
+- change(mission): use result_beta in sandbox for signatory reporting - refs #292508 [kreafox - [`b425801`](https://github.com/eea/volto-cca-policy/commit/b42580100bdd2b4d79be53bbfa05098856deb4be)]
+- change: update signatory profile action tab with icons [kreafox - [`0e72902`](https://github.com/eea/volto-cca-policy/commit/0e7290259b966ff72d2a4d77efca8fbeec8655f8)]
+
 #### :house: Internal changes
 
+- style(mission): mobile fixes on signatory reporting pages [kreafox - [`cbeb584`](https://github.com/eea/volto-cca-policy/commit/cbeb5846c8047c164c29635bd30491b4f810246a)]
+- chore: better component naming [kreafox - [`d61e462`](https://github.com/eea/volto-cca-policy/commit/d61e4629da184ec14d6ad0d056ac29751223e2f9)]
 - style: Automated code fix [eea-jenkins - [`f8934ba`](https://github.com/eea/volto-cca-policy/commit/f8934baf29317bb81cb5a816bfe66ee1724e040f)]
 - style: Automated code fix [eea-jenkins - [`0e75a69`](https://github.com/eea/volto-cca-policy/commit/0e75a6978a2b43e8ad4545ea5fb41191354fd9d0)]
 - style: fix item spacing [kreafox - [`7d4535d`](https://github.com/eea/volto-cca-policy/commit/7d4535dbc486e6cb80fc55d6ac8c7c01d9cf48af)]
 
 #### :hammer_and_wrench: Others
 
+- test: resolve Jest errors in component tests [kreafox - [`6dbb735`](https://github.com/eea/volto-cca-policy/commit/6dbb73540e8301fcb42a4d52db7004f5a42db4d8)]
+- test: fix PlanningTab mock data to match component structure [kreafox - [`48e76e1`](https://github.com/eea/volto-cca-policy/commit/48e76e1e50e0c6d8a6a500fec3d1831419faeee9)]
+- test: resolve Jest errors in component tests [kreafox - [`f309b96`](https://github.com/eea/volto-cca-policy/commit/f309b96b0767358530d969e21102887a9db76b5a)]
+- Add customization for server.jsx [Tiberiu Ichim - [`c625d39`](https://github.com/eea/volto-cca-policy/commit/c625d397493ca9c1bcbd4083dd0b93969d89ef97)]
+- Remove customizations for server, to benefit from CSP headers implemented in eea-website-theme [Tiberiu Ichim - [`0c9ce15`](https://github.com/eea/volto-cca-policy/commit/0c9ce154c68a589ad6a0c553b36ea6e4f155ed09)]
 - Refs #290787 - sum of countries [Tripon Eugen - [`f1033cf`](https://github.com/eea/volto-cca-policy/commit/f1033cf0beca2d7cace3d1ee2bc93d03cbf7b3c8)]
 - Refs #290787 - contry map update flat/round earth and diffrent countries list [Tripon Eugen - [`6009e9f`](https://github.com/eea/volto-cca-policy/commit/6009e9f2ef28aeacd8f27d2735e0270822a13a5e)]
 ### [1.0.0-alpha.1](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.0...1.0.0-alpha.1) - 28 July 2025
@@ -108,7 +125,19 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add some loadable for components [Tiberiu Ichim - [`1793962`](https://github.com/eea/volto-cca-policy/commit/179396211c66a6a2465b2d1b6c0f2afc40fc7189)]
 - Refs #284961 - test [Tripon Eugen - [`c989f1f`](https://github.com/eea/volto-cca-policy/commit/c989f1f8638c0c5233c5c49f8673c9a2cdc7937e)]
 - Refs #284961 - add translations [Tripon Eugen - [`04ee988`](https://github.com/eea/volto-cca-policy/commit/04ee988c086d393b9b37ce1ea8d24f5e84f266aa)]
-### [1.0.0-alpha.0](https://github.com/eea/volto-cca-policy/compare/0.3.81...1.0.0-alpha.0) - 15 July 2025
+### [1.0.0-alpha.0](https://github.com/eea/volto-cca-policy/compare/0.3.83...1.0.0-alpha.0) - 15 July 2025
+
+### [0.3.83](https://github.com/eea/volto-cca-policy/compare/0.3.82...0.3.83) - 10 September 2025
+
+#### :hammer_and_wrench: Others
+
+- Add customization for server.jsx [Tiberiu Ichim - [`c625d39`](https://github.com/eea/volto-cca-policy/commit/c625d397493ca9c1bcbd4083dd0b93969d89ef97)]
+- Remove customizations for server, to benefit from CSP headers implemented in eea-website-theme [Tiberiu Ichim - [`0c9ce15`](https://github.com/eea/volto-cca-policy/commit/0c9ce154c68a589ad6a0c553b36ea6e4f155ed09)]
+### [0.3.82](https://github.com/eea/volto-cca-policy/compare/0.3.81...0.3.82) - 5 September 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-searchlib@2.1.10 [EEA Jenkins - [`ec1bf82`](https://github.com/eea/volto-cca-policy/commit/ec1bf82df7258b9df4e2496b98aa7a8eccdbeb17)]
 
 ### [0.3.81](https://github.com/eea/volto-cca-policy/compare/0.3.80...0.3.81) - 26 August 2025
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.82",
+  "version": "0.3.84",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/theme/MissionSignatoryProfile/ItemsSection.jsx

@@ -0,0 +1,35 @@
+import cx from 'classnames';
+import { Item, Image } from 'semantic-ui-react';
+import { normalizeImageFileName } from '@eeacms/volto-cca-policy/utils';
+import defaultImage from '@eeacms/volto-cca-policy/../theme/assets/images/image-narrow.svg';
+
+const ItemsSection = ({ items, field, iconPath }) => {
+  if (!items?.length) return null;
+
+  return (
+    <Item.Group
+      unstackable
+      className={cx('items-group', { column: items.length > 3 })}
+    >
+      {items.map((item, index) => {
+        const normalizedIcon = normalizeImageFileName(item.Icon);
+        return (
+          <Item key={index}>
+            {item.Icon ? (
+              <Image
+                src={`/en/mission/icons/signatory-reporting/${iconPath}/${normalizedIcon}/@@images/image`}
+              />
+            ) : (
+              <Image size="small" src={defaultImage} />
+            )}
+            <Item.Content verticalAlign="middle">
+              <p>{item[field]}</p>
+            </Item.Content>
+          </Item>
+        );
+      })}
+    </Item.Group>
+  );
+};
+
+export default ItemsSection;

package/src/components/theme/MissionSignatoryProfile/MissionSignatoryProfileView.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { Tab, Container, Divider, Button, Icon } from 'semantic-ui-react';
 import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import { BannerTitle, HTMLField } from '@eeacms/volto-cca-policy/helpers';
@@ -8,18 +8,24 @@ import { flattenToAppURL } from '@plone/volto/helpers';
 import GovernanceTab from './TabSections/GovernanceTab';
 import AssessmentTab from './TabSections/AssessmentTab';
 import PlanningTab from './TabSections/PlanningTab';
-import ActionPagesTab from './TabSections/ActionPagesTab';
+import ActionTab from './TabSections/ActionTab';
 
 const tabRenderers = {
   Governance_Label: (props) => <GovernanceTab {...props} />,
   Assessment_Label: (props) => <AssessmentTab {...props} />,
   Planning_Label: (props) => <PlanningTab {...props} />,
-  Action_Label: (props) => <ActionPagesTab {...props} />,
+  Action_Label: (props) => <ActionTab {...props} />,
 };
 
 const MissionSignatoryProfileView = ({ content }) => {
+  const location = useLocation();
+  const isSandbox = location.pathname.includes(
+    '/mission/sandbox/eea-sandbox/signatory-reporting',
+  );
   const signatoryData =
-    content?.['@components']?.missionsignatoryprofile?.result || {};
+    content?.['@components']?.missionsignatoryprofile?.[
+      isSandbox ? 'result_beta' : 'result'
+    ] || {};
 
   const {
     governance = [{}],

package/src/components/theme/MissionSignatoryProfile/MissionSignatoryProfileView.test.jsx

@@ -10,7 +10,7 @@ jest.mock('./TabSections/AssessmentTab', () => () => (
   <div>Mocked Assessment</div>
 ));
 jest.mock('./TabSections/PlanningTab', () => () => <div>Mocked Planning</div>);
-jest.mock('./TabSections/ActionPagesTab', () => () => <div>Mocked Action</div>);
+jest.mock('./TabSections/ActionTab', () => () => <div>Mocked Action</div>);
 
 jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
   BannerTitle: ({ children }) => <div>{children}</div>,

package/src/components/theme/MissionSignatoryProfile/TabSections/{ActionPagesTab.jsx → ActionTab.jsx}

@@ -1,19 +1,26 @@
+import { useLocation } from 'react-router-dom';
 import { Tab, Grid } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
 import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import { formatTextToHTML, isEmpty } from '@eeacms/volto-cca-policy/utils';
 import AccordionList from '../AccordionList';
 import NoDataReported from '../NoDataReported';
+import ItemsSection from '../ItemsSection';
 
-const ActionsTabContent = ({ action }) => {
+const ActionTabContent = ({ action }) => {
+  const location = useLocation();
   const hasHazards = action?.Climate_Hazards?.length > 0;
   const hasSectors = action?.Sectors.length > 0;
   const hasBenefits = action?.Co_Benefits.length > 0;
 
+  const isSandbox = location.pathname.includes(
+    '/mission/sandbox/eea-sandbox/signatory-reporting',
+  );
+
   return (
     <>
       <Grid columns="12">
-        <Grid.Column mobile={12} tablet={12} computer={6}>
+        <Grid.Column mobile={12} tablet={12} computer={hasBenefits ? 6 : 9}>
           {hasHazards && (
             <>
               <h5 className="small-label">{action.Hazards_Addressed_Label}</h5>
@@ -27,17 +34,25 @@ const ActionsTabContent = ({ action }) => {
           {hasSectors && (
             <>
               <h5 className="small-label">{action.Sectors_Label}</h5>
-              <ul>
-                {action.Sectors.map((hazard, index) => (
-                  <li key={index}>{hazard}</li>
-                ))}
-              </ul>
+              {isSandbox ? (
+                <ItemsSection
+                  items={action.Sectors}
+                  field="Sector"
+                  iconPath="sector"
+                />
+              ) : (
+                <ul>
+                  {action.Sectors.map((item, index) => (
+                    <li key={index}>{item.Sector}</li>
+                  ))}
+                </ul>
+              )}
             </>
           )}
         </Grid.Column>
 
-        <Grid.Column mobile={12} tablet={12} computer={6}>
-          {hasBenefits && (
+        {hasBenefits && (
+          <Grid.Column mobile={12} tablet={12} computer={6}>
             <>
               <h5 className="small-label">{action.Co_Benefits_Label}</h5>
               <ul>
@@ -46,8 +61,8 @@ const ActionsTabContent = ({ action }) => {
                 ))}
               </ul>
             </>
-          )}
-        </Grid.Column>
+          </Grid.Column>
+        )}
       </Grid>
       {action.Funding_Sources && (
         <>
@@ -66,7 +81,7 @@ const ActionsTabContent = ({ action }) => {
   );
 };
 
-const ActionPagesTab = ({ result, general_text }) => {
+const ActionTab = ({ result, general_text }) => {
   const { action_text, actions } = result || {};
   const { No_Data_Reported_Label } = general_text || {};
   const { Title, Abstract, Abstract_Line } = action_text?.[0] || {};
@@ -80,7 +95,7 @@ const ActionPagesTab = ({ result, general_text }) => {
   }
 
   return (
-    <Tab.Pane>
+    <Tab.Pane className="action-tab">
       {Title && <h2>{Title}</h2>}
       {Abstract && <HTMLField value={{ data: formatTextToHTML(Abstract) }} />}
       {Abstract_Line && (
@@ -102,7 +117,7 @@ const ActionPagesTab = ({ result, general_text }) => {
               accordions={[
                 {
                   title: action?.More_Details_Label,
-                  content: <ActionsTabContent action={action} />,
+                  content: <ActionTabContent action={action} />,
                 },
               ]}
             />
@@ -113,4 +128,4 @@ const ActionPagesTab = ({ result, general_text }) => {
   );
 };
 
-export default ActionPagesTab;
+export default ActionTab;

package/src/components/theme/MissionSignatoryProfile/TabSections/{ActionPagesTab.test.jsx → ActionTab.test.jsx}

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
+import { MemoryRouter } from 'react-router-dom';
 import { render, within } from '@testing-library/react';
-import ActionPagesTab from './ActionPagesTab';
+import ActionTab from './ActionTab';
 
 jest.mock('@eeacms/volto-eea-design-system/ui', () => ({
   Callout: ({ children }) => <div>{children}</div>,
@@ -65,7 +66,9 @@ describe('ActionPagesTab', () => {
 
   it('renders action tab content correctly', () => {
     const { getByText, container } = render(
-      <ActionPagesTab result={mockResult} />,
+      <MemoryRouter>
+        <ActionTab result={mockResult} />
+      </MemoryRouter>,
     );
 
     expect(getByText('Adaptation Actions')).toBeInTheDocument();
@@ -76,7 +79,6 @@ describe('ActionPagesTab', () => {
 
     const sections = container.querySelectorAll('.section-wrapper');
 
-    // First action
     const firstAction = within(sections[0]);
     expect(firstAction.getByText('First action')).toBeInTheDocument();
     expect(firstAction.getByText('Hazards addressed')).toBeInTheDocument();
@@ -84,7 +86,6 @@ describe('ActionPagesTab', () => {
     expect(firstAction.getByText('Funding source:')).toBeInTheDocument();
     expect(firstAction.getByText('National Funds')).toBeInTheDocument();
 
-    // Second action
     const secondAction = within(sections[1]);
     expect(secondAction.getByText('Second action')).toBeInTheDocument();
     expect(secondAction.getByText('Hazards addressed')).toBeInTheDocument();

package/src/components/theme/MissionSignatoryProfile/TabSections/AssessmentTab.jsx

@@ -1,26 +1,10 @@
-import { Tab, Image, Segment, Item } from 'semantic-ui-react';
+import { Tab, Segment } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
 import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
-import { formatTextToHTML, isEmpty } from '@eeacms/volto-cca-policy/utils';
+import { isEmpty, formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import AccordionList from '../AccordionList';
 import NoDataReported from '../NoDataReported';
-
-import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
-
-const ItemsSection = ({ items }) => {
-  if (!items?.length) return null;
-
-  return (
-    <Item.Group className="items-group">
-      {items.map((item, index) => (
-        <Item key={index}>
-          <Image size="small" src={image} />
-          <Item.Content verticalAlign="middle">{item.Factor}</Item.Content>
-        </Item>
-      ))}
-    </Item.Group>
-  );
-};
+import ItemsSection from '../ItemsSection';
 
 const AssessmentAccordionContent = ({ result }) => {
   return (
@@ -72,7 +56,7 @@ const AssessmentTab = ({ result, general_text }) => {
   }
 
   return (
-    <Tab.Pane>
+    <Tab.Pane className="assessment-tab">
       {Title && <h2>{Title}</h2>}
       {Subheading && (
         <Callout>
@@ -88,7 +72,11 @@ const AssessmentTab = ({ result, general_text }) => {
         {result.assessment_factors.length > 0 && (
           <>
             {Cra_Abstract && <h5>{Cra_Abstract}</h5>}
-            <ItemsSection items={result.assessment_factors} />
+            <ItemsSection
+              items={result.assessment_factors}
+              field="Factor"
+              iconPath="factors"
+            />
           </>
         )}
 

package/src/components/theme/MissionSignatoryProfile/TabSections/AssessmentTab.test.jsx

@@ -9,6 +9,7 @@ jest.mock('@eeacms/volto-eea-design-system/ui', () => ({
 jest.mock('@eeacms/volto-cca-policy/utils', () => ({
   isEmpty: (arr) => !arr || arr.length === 0,
   formatTextToHTML: (text) => text,
+  normalizeImageFileName: (filename) => filename || '',
 }));
 
 const mockData = {

package/src/components/theme/MissionSignatoryProfile/TabSections/GovernanceTab.jsx

@@ -52,7 +52,7 @@ const GovernanceTab = ({ result, general_text }) => {
   }
 
   return (
-    <Tab.Pane>
+    <Tab.Pane className="governance-tab">
       {Title && <h2>{Title}</h2>}
 
       {Introduction && <Callout>{Introduction}</Callout>}

package/src/components/theme/MissionSignatoryProfile/TabSections/PlanningTab.jsx

@@ -1,30 +1,15 @@
 import React from 'react';
-import { Tab, Message, Segment, Grid, Item, Image } from 'semantic-ui-react';
+import { Tab, Message, Segment, Grid } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
 import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import {
+  isEmpty,
   formatTextToHTML,
   extractPlanNameAndURL,
-  isEmpty,
 } from '@eeacms/volto-cca-policy/utils';
 import AccordionList from '../AccordionList';
 import NoDataReported from '../NoDataReported';
-import image from '@eeacms/volto-cca-policy/../theme/assets/images/image-narrow.svg';
-
-const ItemsSection = ({ items }) => {
-  if (!items?.length) return null;
-
-  return (
-    <Item.Group className="items-group">
-      {items.map((sector, index) => (
-        <Item key={index}>
-          <Image size="small" src={image} />
-          <Item.Content verticalAlign="middle">{sector}</Item.Content>
-        </Item>
-      ))}
-    </Item.Group>
-  );
-};
+import ItemsSection from '../ItemsSection';
 
 const PlanningGoalContent = ({ goal }) => {
   const hasHazards = goal?.Climate_Hazards?.length > 0;
@@ -98,8 +83,9 @@ const PlanningTab = ({ result, general_text }) => {
   }
 
   return (
-    <Tab.Pane>
+    <Tab.Pane className="planning-tab">
       {titleData?.Title && <h2>{titleData.Title}</h2>}
+
       {titleData?.Abstract_Line && (
         <Callout>
           <HTMLField
@@ -108,27 +94,24 @@ const PlanningTab = ({ result, general_text }) => {
         </Callout>
       )}
 
-      {sortedGoals.map((goal, index) => {
-        return (
-          <div key={index} className="section-wrapper">
-            <h5 className="section-title">
-              <span className="section-number">{goal?.Title_Label} </span>
-
-              <HTMLField value={{ data: formatTextToHTML(goal?.Title) }} />
-            </h5>
-
-            <AccordionList
-              variation="secondary"
-              accordions={[
-                {
-                  title: goal?.More_Details_Label || 'More details',
-                  content: <PlanningGoalContent goal={goal} />,
-                },
-              ]}
-            />
-          </div>
-        );
-      })}
+      {sortedGoals.map((goal, index) => (
+        <div key={index} className="section-wrapper">
+          <h5 className="section-title">
+            <span className="section-number">{goal?.Title_Label} </span>
+            <HTMLField value={{ data: formatTextToHTML(goal?.Title) }} />
+          </h5>
+
+          <AccordionList
+            variation="secondary"
+            accordions={[
+              {
+                title: goal?.More_Details_Label || 'More details',
+                content: <PlanningGoalContent goal={goal} />,
+              },
+            ]}
+          />
+        </div>
+      ))}
 
       {goalData?.Climate_Action_Title && (
         <h2>{goalData.Climate_Action_Title}</h2>
@@ -142,71 +125,73 @@ const PlanningTab = ({ result, general_text }) => {
         </Callout>
       )}
 
-      {planning_climate_action.map((action, index) => {
-        return (
-          <React.Fragment key={index}>
-            <br />
-            {action?.Sectors_Introduction && (
-              <Message>
-                <HTMLField
-                  value={{
-                    data: formatTextToHTML(action.Sectors_Introduction),
-                  }}
-                />
-              </Message>
-            )}
-
-            <ItemsSection items={action?.Sectors} />
-
-            {action?.Description && (
+      {planning_climate_action.map((action, index) => (
+        <React.Fragment key={index}>
+          <br />
+          {action?.Sectors_Introduction && (
+            <Message>
               <HTMLField
-                className="description"
-                value={{ data: formatTextToHTML(action.Description) }}
+                value={{
+                  data: formatTextToHTML(action.Sectors_Introduction),
+                }}
               />
-            )}
-
-            {(action?.Approval_Year || action?.End_Year) && (
-              <p>
-                {action?.Year_Of_Approval_Label}{' '}
-                <strong className="date">{action.Approval_Year}</strong>{' '}
-                {action?.End_Year_Of_Plan_Label}{' '}
-                <strong className="date">{action.End_Year}</strong>
-              </p>
-            )}
-
-            {action?.Name_Of_Plan_And_Hyperlink && (
-              <p>
-                {(() => {
-                  const { name, url } = extractPlanNameAndURL(
-                    action.Name_Of_Plan_And_Hyperlink,
-                  );
-
-                  return url ? (
-                    <a href={url} title={name} target="_blank" rel="noreferrer">
-                      <strong>
-                        {action.Further_Information_Link_Text}
-                        {name && ` [${name}]`}
-                      </strong>
-                    </a>
-                  ) : (
+            </Message>
+          )}
+
+          <ItemsSection
+            items={action?.Sectors}
+            field="Sector"
+            iconPath="sector"
+          />
+
+          {action?.Description && (
+            <HTMLField
+              className="description"
+              value={{ data: formatTextToHTML(action.Description) }}
+            />
+          )}
+
+          {(action?.Approval_Year || action?.End_Year) && (
+            <p>
+              {action?.Year_Of_Approval_Label}{' '}
+              <strong className="date">{action.Approval_Year}</strong>{' '}
+              {action?.End_Year_Of_Plan_Label}{' '}
+              <strong className="date">{action.End_Year}</strong>
+            </p>
+          )}
+
+          {action?.Name_Of_Plan_And_Hyperlink && (
+            <p>
+              {(() => {
+                const { name, url } = extractPlanNameAndURL(
+                  action.Name_Of_Plan_And_Hyperlink,
+                );
+                return url ? (
+                  <a href={url} title={name} target="_blank" rel="noreferrer">
                     <strong>
                       {action.Further_Information_Link_Text}
                       {name && ` [${name}]`}
                     </strong>
-                  );
-                })()}
-              </p>
-            )}
-            {action?.Attachment && (
-              <p>
-                <a href={action.Attachment}>
-                  <strong>{action.Explore_Plan_Link_Text}</strong>
-                </a>
-              </p>
-            )}
-          </React.Fragment>
-        );
-      })}
+                  </a>
+                ) : (
+                  <strong>
+                    {action.Further_Information_Link_Text}
+                    {name && ` [${name}]`}
+                  </strong>
+                );
+              })()}
+            </p>
+          )}
+
+          {action?.Attachment && (
+            <p>
+              <a href={action.Attachment}>
+                <strong>{action.Explore_Plan_Link_Text}</strong>
+              </a>
+            </p>
+          )}
+        </React.Fragment>
+      ))}
     </Tab.Pane>
   );
 };

package/src/components/theme/MissionSignatoryProfile/TabSections/PlanningTab.test.jsx

@@ -15,6 +15,7 @@ jest.mock('@eeacms/volto-cca-policy/utils', () => ({
     name: 'Plan Example',
     url: 'https://plan-link.com',
   }),
+  normalizeImageFileName: (filename) => filename || '',
 }));
 
 describe('PlanningTab', () => {
@@ -65,7 +66,7 @@ describe('PlanningTab', () => {
         Further_Information_Link_Text: 'More Info',
         Attachment: 'https://attachment.com',
         Explore_Plan_Link_Text: 'Explore Plan',
-        Sectors: ['Agriculture'],
+        Sectors: [{ Sector: 'Agriculture', Icon: '' }],
       },
     ],
   };

package/src/customizations/volto/README.md

@@ -0,0 +1,2 @@
+copied from volto-eea-website-theme sha 5fa9b49d4619f893baa0330ee45f5b2e90eeb72c
+server.jsx is customized to not crash when it doesn't find .po translation files.

package/src/customizations/volto/server.jsx

@@ -1,6 +1,3 @@
-/*  Original: https://github.com/plone/volto/blob/16.x.x/src/server.jsx */
-/*  Line: 59 - Fix crash when a supported language it's not in volto/locales folder */
-
 /* eslint no-console: 0 */
 import '@plone/volto/config'; // This is the bootstrap for the global config - server side
 import { existsSync, lstatSync, readFileSync } from 'fs';
@@ -20,7 +17,7 @@ import { resetServerContext } from 'react-beautiful-dnd';
 import { CookiesProvider } from 'react-cookie';
 import cookiesMiddleware from 'universal-cookie-express';
 import debug from 'debug';
-// import crypto from 'crypto';
+import crypto from 'crypto';
 
 import routes from '@plone/volto/routes';
 import config from '@plone/volto/registry';
@@ -49,7 +46,18 @@ import {
 } from '@plone/volto/helpers/AsyncConnect';
 
 let locales = {};
+const isCSP = process.env.CSP_HEADER || config.settings.serverConfig.csp;
+
+// if (config.settings) {
+//   config.settings.supportedLanguages.forEach((lang) => {
+//     const langFileName = toGettextLang(lang);
+//     import('@root/../locales/' + langFileName + '.json').then((locale) => {
+//       locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
+//     });
+//   });
+// }
 
+// customized
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     const langFileName = toGettextLang(lang);
@@ -64,18 +72,7 @@ if (config.settings) {
     // end customization
   });
 }
-
-// function buildCSPHeader(opts, nonce) {
-//   return Object.keys(opts)
-//     .sort()
-//     .reduce((acc, key) => {
-//       return [
-//         ...acc,
-//         `${key} ${opts[key].replaceAll('{nonce}', `'nonce-${nonce}'`)}`,
-//       ];
-//     }, [])
-//     .join('; ');
-// }
+//end customized
 
 function reactIntlErrorHandler(error) {
   debug('i18n')(error);
@@ -84,8 +81,8 @@ function reactIntlErrorHandler(error) {
 const supported = new locale.Locales(keys(languages), 'en');
 
 const server = express()
-  .set('etag', false)
   .disable('x-powered-by')
+  .set('etag', false)
   .head('/*', function (req, res) {
     // Support for HEAD requests. Required by start-test utility in CI.
     res.send('');
@@ -125,7 +122,28 @@ server.use(function (err, req, res, next) {
   }
 });
 
+function buildCSPHeader(opts, nonce) {
+  if (typeof opts === 'string') {
+    //CSP_HEADER
+    return opts.replaceAll('{nonce}', `'nonce-${nonce}'`);
+  }
+  return Object.keys(opts)
+    .sort()
+    .reduce((acc, key) => {
+      return [
+        ...acc,
+        `${key} ${opts[key].replaceAll('{nonce}', `'nonce-${nonce}'`)}`,
+      ];
+    }, [])
+    .join('; ');
+}
+
 function setupServer(req, res, next) {
+  if (isCSP) {
+    const nonce = crypto.randomBytes(16).toString('base64');
+    res.locals.nonce = nonce;
+  }
+
   const api = new Api(req);
 
   const lang = toReactIntlLang(
@@ -199,7 +217,11 @@ function setupServer(req, res, next) {
 }
 
 server.get('/*', (req, res) => {
-  const { errorHandler } = res.locals;
+  const { errorHandler, nonce } = res.locals;
+
+  if (isCSP) {
+    res.setHeader('Content-Security-Policy', buildCSPHeader(isCSP, nonce));
+  }
 
   const api = new Api(req);
 
@@ -265,7 +287,7 @@ server.get('/*', (req, res) => {
         : store.getState().content.data?.language?.token ||
           config.settings.defaultLanguage;
 
-      if (toBackendLang(initialLang) !== contentLang) {
+      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
         const newLang = toReactIntlLang(
           new locale.Locales(contentLang).best(supported).toString(),
         );
@@ -310,6 +332,7 @@ server.get('/*', (req, res) => {
               ${renderToString(
                 <Html
                   extractor={extractor}
+                  nonce={nonce}
                   markup={markup}
                   store={store}
                   extractScripts={
@@ -331,6 +354,7 @@ server.get('/*', (req, res) => {
               ${renderToString(
                 <Html
                   extractor={extractor}
+                  nonce={nonce}
                   markup={markup}
                   store={store}
                   criticalCss={readCriticalCss(req)}

package/src/utils.js

@@ -134,3 +134,22 @@ export const extractPlanNameAndURL = (text) => {
 };
 
 export const isEmpty = (arr) => !Array.isArray(arr) || arr.length === 0;
+
+export const normalizeImageFileName = (filename) => {
+  if (!filename) return '';
+
+  const parts = filename.split('.');
+  if (parts.length < 2)
+    return filename.split('(').join('-').split(')').join('-');
+
+  const ext = parts.pop();
+  let name = parts.join('.');
+
+  name = name.split('(').join('-').split(')').join('-');
+
+  if (name.endsWith('-')) {
+    name = name.slice(0, -1);
+  }
+
+  return `${name}.${ext}`;
+};

package/theme/globals/mission.less

@@ -14,15 +14,11 @@
   }
 }
 
-body.view-viewview.contenttype-subsite.section-mission
-  .block.gridBlock
-  .image {
+body.view-viewview.contenttype-subsite.section-mission .block.gridBlock .image {
   height: 260px;
 }
 
-body.view-viewview.contenttype-subsite.section-mission
-  .block.gridBlock
-  img {
+body.view-viewview.contenttype-subsite.section-mission .block.gridBlock img {
   height: 260px;
   object-fit: contain;
 }
@@ -78,7 +74,6 @@ body.subsite-mkh {
     }
   }
 
-
   .search-action {
     background-color: @green-1;
   }
@@ -114,7 +109,25 @@ body.subsite-mkh {
   /* Mission signatory profile */
   .signatory-profile {
     .ui.items.items-group {
-      margin: 2em 0 !important;
+      margin: 2em 0;
+    }
+
+    .action-tab {
+      .ui.items.items-group {
+        margin: 1em 0;
+
+        .item {
+          .content {
+            font-size: 16px;
+            max-width: 300px;
+          }
+        }
+
+        .ui.image {
+          width: 35px;
+          height: 35px;
+        }
+      }
     }
 
     .ui.inverted.button.back-to-map {
@@ -211,14 +224,28 @@ body.subsite-mkh {
 
     .items-group {
       display: block !important;
-      column-count: 2;
+
+      @media only screen and (min-width: 900px) {
+        &.column {
+          column-count: 2;
+          column-gap: 15px;
+        }
+      }
 
       .item {
         padding: 0.5em 0 !important;
         break-inside: avoid-column;
+        align-items: center;
+
+        .ui.image {
+          width: 40px;
+          height: 40px;
+        }
 
         .content {
-          padding-left: 0.5rem !important;
+          font-size: 18px;
+          padding-left: 0.6rem !important;
+          max-width: 300px;
         }
       }
     }

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -1,213 +0,0 @@
-/**
- * Html helper.
- * @module helpers/Html
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import serialize from 'serialize-javascript';
-import { join } from 'lodash';
-import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
-import { runtimeConfig } from '@plone/volto/runtime_config';
-import config from '@plone/volto/registry';
-
-const CRITICAL_CSS_TEMPLATE = `function alter() {
-  document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'});
-}
-if (window.addEventListener) {
-  window.addEventListener('DOMContentLoaded', alter, false)
-} else {
-  window.onload=alter
-}`;
-
-export const loadReducers = (state = {}) => {
-  const { settings } = config;
-  return Object.assign(
-    {},
-    ...Object.keys(state).map((name) =>
-      settings.initialReducersBlacklist.includes(name)
-        ? {}
-        : { [name]: state[name] },
-    ),
-  );
-};
-
-/**
- * Html class.
- * Wrapper component containing HTML metadata and boilerplate tags.
- * Used in server-side code only to wrap the string output of the
- * rendered route component.
- *
- * The only thing this component doesn't (and can't) include is the
- * HTML doctype declaration, which is added to the rendered output
- * by the server.js file.
- *
- * Critical.css behaviour: when a file `public/critical.css` is present, the
- * loading of stylesheets is changed. The styles in critical.css are inlined in
- * the generated HTML, and the whole story needs to change completely: instead
- * of treating stylesheets as priority for rendering, we want to defer their
- * loading as much as possible. So we change the stylesheets to be prefetched
- * and we switch their rel back to stylesheets at document ready event.
- *
- * @function Html
- * @param {Object} props Component properties.
- * @param {Object} props.assets Assets to be rendered.
- * @param {Object} props.component Content to be rendered as child node.
- * @param {Object} props.store Store object.
- * @returns {string} Markup of the not found page.
- */
-
-/**
- * Html class.
- * @class Html
- * @extends Component
- */
-class Html extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    extractor: PropTypes.shape({
-      getLinkElements: PropTypes.func.isRequired,
-      getScriptElements: PropTypes.func.isRequired,
-      getStyleElements: PropTypes.func.isRequired,
-    }).isRequired,
-    markup: PropTypes.string.isRequired,
-    store: PropTypes.shape({
-      getState: PropTypes.func,
-    }).isRequired,
-    nonce: PropTypes.string,
-  };
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { extractor, markup, store, criticalCss, apiPath, publicURL, nonce } =
-      this.props;
-    const head = Helmet.rewind();
-    const bodyClass = join(BodyClass.rewind(), ' ');
-    const htmlAttributes = head.htmlAttributes.toComponent();
-
-    return (
-      <html lang={htmlAttributes.lang}>
-        <head>
-          <meta charSet="utf-8" />
-          {head.base.toComponent()}
-          {head.title.toComponent()}
-          {head.meta.toComponent()}
-          {head.link.toComponent()}
-          {head.script.toComponent()}
-
-          {React.createElement('script', {
-            nonce: nonce,
-            dangerouslySetInnerHTML: {
-              __html: `window.env = ${serialize({
-                ...runtimeConfig,
-                // Seamless mode requirement, the client need to know where the API is located
-                // if not set in the API_PATH
-                ...(apiPath && {
-                  apiPath,
-                }),
-                ...(publicURL && {
-                  publicURL,
-                }),
-              })};`,
-            },
-          })}
-          <link
-            rel="sitemap"
-            type="application/xml"
-            title="Sitemap"
-            href="/sitemap-index.xml"
-          ></link>
-          <link rel="icon" href="/favicon.ico" sizes="any" />
-          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
-          <link
-            rel="apple-touch-icon"
-            sizes="180x180"
-            href="/apple-touch-icon.png"
-          />
-          <link rel="manifest" href="/site.webmanifest" />
-          <meta name="generator" content="Plone 6 - https://plone.org" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <meta name="apple-mobile-web-app-capable" content="yes" />
-          {process.env.NODE_ENV === 'production' && criticalCss && (
-            <style
-              dangerouslySetInnerHTML={{ __html: this.props.criticalCss }}
-            />
-          )}
-          {/* Add the crossorigin while in development */}
-          {extractor.getLinkElements().map((elem) =>
-            React.cloneElement(elem, {
-              crossOrigin:
-                process.env.NODE_ENV === 'production' ? undefined : 'true',
-              rel: !criticalCss
-                ? elem.props.rel
-                : elem.props.as === 'style'
-                ? 'prefetch'
-                : elem.props.rel,
-            }),
-          )}
-          {/* Styles in development are loaded with Webpack's style-loader, in production,
-              they need to be static*/}
-          {process.env.NODE_ENV === 'production' ? (
-            criticalCss ? (
-              <>
-                <script
-                  dangerouslySetInnerHTML={{
-                    __html: CRITICAL_CSS_TEMPLATE,
-                  }}
-                ></script>
-                {extractor.getStyleElements().map((elem) => (
-                  <noscript>
-                    {React.cloneElement(elem, {
-                      rel: 'stylesheet',
-                      crossOrigin:
-                        process.env.NODE_ENV === 'production'
-                          ? undefined
-                          : 'true',
-                    })}
-                  </noscript>
-                ))}
-              </>
-            ) : (
-              extractor.getStyleElements()
-            )
-          ) : undefined}
-        </head>
-        <body className={bodyClass}>
-          <div role="navigation" aria-label="Toolbar" id="toolbar" />
-          <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
-          <div role="complementary" aria-label="Sidebar" id="sidebar" />
-          {React.createElement('script', {
-            nonce: nonce,
-            dangerouslySetInnerHTML: {
-              __html: `window.__data=${serialize(
-                loadReducers(store.getState()),
-              )};`,
-            },
-            charSet: 'UTF-8',
-          })}
-          {/* Add the crossorigin while in development */}
-          {this.props.extractScripts !== false
-            ? extractor.getScriptElements().map((elem) =>
-                React.cloneElement(elem, {
-                  nonce: nonce,
-                  crossOrigin:
-                    process.env.NODE_ENV === 'production' ? undefined : 'true',
-                }),
-              )
-            : ''}
-        </body>
-      </html>
-    );
-  }
-}
-
-export default Html;