@eeacms/volto-cca-policy 0.3.83 → 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.83](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.1...0.3.83) - 10 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,32 @@ 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)]
@@ -110,8 +125,14 @@ 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.82...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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.83",
+  "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/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;
         }
       }
     }