@eeacms/volto-cca-policy 0.3.24 → 0.3.26

package/CHANGELOG.md

@@ -4,6 +4,46 @@ 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.26](https://github.com/eea/volto-cca-policy/compare/0.3.25...0.3.26) - 15 April 2025
+
+#### :rocket: New Features
+
+- feat: add extractFirstURL to parse first URL from text; update formatTextToHTML - refs #285361 [kreafox - [`a348454`](https://github.com/eea/volto-cca-policy/commit/a348454d52a06c4cbd668a7ffeaebed74d4a6788)]
+
+#### :nail_care: Enhancements
+
+- change: better link handler, update planning section, update tests - refs #285361 [kreafox - [`547fbb7`](https://github.com/eea/volto-cca-policy/commit/547fbb7ac308c274b94ff961b4abbae629adf93e)]
+- change: update Governance section - refs #285296 [kreafox - [`0a9b924`](https://github.com/eea/volto-cca-policy/commit/0a9b92433239cf8d288885e561d6ecdd1beac6b5)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`7396574`](https://github.com/eea/volto-cca-policy/commit/7396574df65205350cedb1e105927cb9d01ce3ae)]
+- style: Automated code fix [eea-jenkins - [`2f6ca50`](https://github.com/eea/volto-cca-policy/commit/2f6ca50ad766066511659ac8dd85a3daceeca1d8)]
+
+### [0.3.25](https://github.com/eea/volto-cca-policy/compare/0.3.24...0.3.25) - 14 April 2025
+
+#### :bug: Bug Fixes
+
+- fix: code cleanup [kreafox - [`6608927`](https://github.com/eea/volto-cca-policy/commit/660892792e10ef6f38c66d8f2d6b7f2993973bdf)]
+
+#### :nail_care: Enhancements
+
+- change: update planning section, add more tests - refs #285361 [kreafox - [`1d148c8`](https://github.com/eea/volto-cca-policy/commit/1d148c87f0f523effdf7399d7f8a1ddc4620e03e)]
+- change: update planning section - refs #285361 [kreafox - [`50de23f`](https://github.com/eea/volto-cca-policy/commit/50de23f8e75053602b7d0bc1441ae1c59fe0944d)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`e4f700e`](https://github.com/eea/volto-cca-policy/commit/e4f700ea7bcb425ae168308d47729ec59b15b2c4)]
+
+#### :hammer_and_wrench: Others
+
+- Remove console log [Tiberiu Ichim - [`a5ae067`](https://github.com/eea/volto-cca-policy/commit/a5ae06713b54cb1f5fce475827db0a8cd678ecf0)]
+- More langs [Tiberiu Ichim - [`e17b887`](https://github.com/eea/volto-cca-policy/commit/e17b8870eb9e0cdadcab3eca126119287fd2bac2)]
+- test: increase code coverage [kreafox - [`7aeb818`](https://github.com/eea/volto-cca-policy/commit/7aeb818b31fcf2c5225f0b4a6d0294664313b8aa)]
+- increase code coverage [kreafox - [`f82df41`](https://github.com/eea/volto-cca-policy/commit/f82df41ed61fbd901fc5013d966f745c2a97f315)]
+- fix tests [kreafox - [`cf4d267`](https://github.com/eea/volto-cca-policy/commit/cf4d2677c523609b0387f6d8142cb1ad58f0353e)]
+- fix tests [kreafox - [`2151ffc`](https://github.com/eea/volto-cca-policy/commit/2151ffc3d27ff41bd7e72c6c0f373274925e11e8)]
+- fix tests [kreafox - [`3971083`](https://github.com/eea/volto-cca-policy/commit/3971083f85a79d6f99d15b622ca8140a67b1a665)]
 ### [0.3.24](https://github.com/eea/volto-cca-policy/compare/0.3.23...0.3.24) - 11 April 2025
 
 #### :rocket: Dependency updates

package/package.json

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

package/src/components/manage/Blocks/MissionSignatoriesProfile/AccordionList.test.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import AccordionList from './AccordionList';
+
+describe('AccordionList', () => {
+  const mockAccordions = [
+    { title: 'Section 1', content: 'Content for section 1' },
+    { title: 'Section 2', content: 'Content for section 2' },
+  ];
+
+  it('renders all accordion titles', () => {
+    const { getByText } = render(<AccordionList accordions={mockAccordions} />);
+    expect(getByText('Section 1')).toBeInTheDocument();
+    expect(getByText('Section 2')).toBeInTheDocument();
+  });
+
+  it('toggles accordion content on title click', () => {
+    const { getByText, container } = render(
+      <AccordionList accordions={mockAccordions} />,
+    );
+
+    const contentDiv = container.querySelector('.content');
+
+    expect(contentDiv).not.toHaveClass('active');
+
+    fireEvent.click(getByText('Section 1'));
+    expect(contentDiv).toHaveClass('active');
+
+    fireEvent.click(getByText('Section 1'));
+    expect(contentDiv).not.toHaveClass('active');
+  });
+});

package/src/components/manage/Blocks/MissionSignatoriesProfile/MissionSignatoriesProfileView.js

@@ -11,7 +11,9 @@ import './style.less';
 
 const MissionSignatoriesProfileView = (props) => {
   const { data } = props;
-  const result = data?._v_results?.[0] || {};
+  const result = data?._v_results || {};
+  const governance = result?.governance?.[0] || {};
+
   // const dataJson = JSON.parse(result?.Cooperation_Experience);
   const [activeIndex, setActiveIndex] = React.useState(0);
 
@@ -23,7 +25,9 @@ const MissionSignatoriesProfileView = (props) => {
             'DescribeDetailCooperationEnhance'
           ]
         } */}
-        <h1>{result?.Signatory}</h1>
+        <h2>{result?.planning_titles?.[0].Signatory}</h2>
+
+        <br />
 
         <Tab
           menu={{
@@ -42,19 +46,28 @@ const MissionSignatoriesProfileView = (props) => {
             },
             {
               menuItem: 'Governance',
-              render: () => <GovernanceTab result={result} />,
+              render: () => <GovernanceTab result={governance} />,
             },
             {
               menuItem: 'Assessment',
-              render: () => <AssessmentTab result={result} />,
+              render: () => <AssessmentTab />,
             },
             {
               menuItem: 'Planning',
-              render: () => <PlanningTab result={result} />,
+              render: () => (
+                <PlanningTab
+                  result={{
+                    planning_goals: result?.planning_goals,
+                    planning_titles: result?.planning_titles,
+                    planning_climate_action: result?.planning_climate_action,
+                    planning_climate_sectors: result?.planning_climate_sectors,
+                  }}
+                />
+              ),
             },
             {
               menuItem: 'Action Pages',
-              render: () => <ActionPagesTab result={result} />,
+              render: () => <ActionPagesTab />,
             },
           ]}
         />

package/src/components/manage/Blocks/MissionSignatoriesProfile/MissionSignatoriesProfileView.test.jsx

@@ -1,43 +1,107 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import MissionSignatoriesProfileView from './MissionSignatoriesProfileView';
 
+// Mock components for tabs
+jest.mock('./TabSections/IntroductionTab', () => () => (
+  <div>Introduction Content</div>
+));
+jest.mock('./TabSections/GovernanceTab', () => () => (
+  <div>Governance Content</div>
+));
+jest.mock('./TabSections/AssessmentTab', () => () => (
+  <div>Assessment Content</div>
+));
+jest.mock('./TabSections/PlanningTab', () => () => <div>Planning Content</div>);
+jest.mock('./TabSections/ActionPagesTab', () => () => (
+  <div>Action Pages Content</div>
+));
+
 describe('MissionSignatoriesProfileView', () => {
-  it('should render the component with data', () => {
-    const data = {
-      _v_results: [
-        {
-          Signatory: 'Test Signatory',
-          Describe: 'Test description',
-          Provide: 'Test evidence',
-        },
-      ],
-    };
+  const data = {
+    _v_results: {
+      planning_titles: [{ Signatory: 'Test Signatory Title' }],
+      planning_goals: [],
+      planning_climate_action: [],
+      planning_climate_sectors: [],
+      governance: [{}],
+    },
+  };
 
+  it('should render the component with data and tabs', () => {
     const { getByText } = render(<MissionSignatoriesProfileView data={data} />);
 
-    expect(getByText('Test Signatory')).toBeInTheDocument();
     expect(getByText('Governance')).toBeInTheDocument();
     expect(getByText('Assessment')).toBeInTheDocument();
     expect(getByText('Planning')).toBeInTheDocument();
     expect(getByText('Action Pages')).toBeInTheDocument();
+    expect(getByText('Introduction')).toBeInTheDocument();
   });
 
-  it('should render tabs and switch content', () => {
-    const data = {
-      _v_results: [
-        {
-          Signatory: 'Test Signatory',
-        },
-      ],
-    };
+  it('should render Signatory title', () => {
+    const { getByText } = render(<MissionSignatoriesProfileView data={data} />);
+    expect(getByText('Test Signatory Title')).toBeInTheDocument();
+  });
+
+  it('should handle missing planning_titles gracefully', () => {
+    const data = { _v_results: { governance: [{}] } };
+    const { container } = render(<MissionSignatoriesProfileView data={data} />);
+    expect(container).toBeInTheDocument();
+  });
 
+  it('should handle empty _v_results object gracefully', () => {
+    const { getByText } = render(
+      <MissionSignatoriesProfileView data={{ _v_results: {} }} />,
+    );
+    expect(getByText('Introduction')).toBeInTheDocument();
+  });
+
+  it('should handle completely missing data prop', () => {
+    const { getByText } = render(<MissionSignatoriesProfileView data={{}} />);
+    expect(getByText('Planning')).toBeInTheDocument();
+    expect(getByText('Introduction')).toBeInTheDocument();
+  });
+
+  it('should render all tab labels', () => {
+    const { getByText } = render(<MissionSignatoriesProfileView data={{}} />);
+    [
+      'Introduction',
+      'Governance',
+      'Assessment',
+      'Planning',
+      'Action Pages',
+    ].forEach((label) => {
+      expect(getByText(label)).toBeInTheDocument();
+    });
+  });
+
+  it('should switch between tabs and display correct content', async () => {
     const { getByText } = render(<MissionSignatoriesProfileView data={data} />);
-    const governanceTab = getByText('Governance');
-    fireEvent.click(governanceTab);
-    expect(
-      getByText('Opportunities and benefits of climate action'),
-    ).toBeInTheDocument();
+
+    fireEvent.click(getByText('Governance'));
+    await waitFor(() =>
+      expect(getByText('Governance Content')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(getByText('Introduction'));
+    await waitFor(() =>
+      expect(getByText('Introduction Content')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(getByText('Assessment'));
+    await waitFor(() =>
+      expect(getByText('Assessment Content')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(getByText('Planning'));
+    await waitFor(() =>
+      expect(getByText('Planning Content')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(getByText('Action Pages'));
+    await waitFor(() =>
+      expect(getByText('Action Pages Content')).toBeInTheDocument(),
+    );
   });
 });

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/AssessmentTab.jsx

@@ -10,10 +10,29 @@ import {
 } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
 import AccordionList from './../AccordionList';
-import ItemsSection from './../ItemsSection';
 
 import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
 
+const ItemsSection = ({ items }) => {
+  return (
+    <ItemGroup className="items-group">
+      <Item>
+        <Image size="small" src={image} />
+        <ItemContent verticalAlign="middle">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </ItemContent>
+      </Item>
+
+      <Item>
+        <Image size="small" src={image} />
+        <ItemContent verticalAlign="middle">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  );
+};
+
 const AssessmentTab = () => {
   const [activeIndex, setActiveIndex] = React.useState(0);
   return (

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/GovernanceTab.jsx

@@ -4,85 +4,29 @@ import { Callout } from '@eeacms/volto-eea-design-system/ui';
 import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import AccordionList from './../AccordionList';
-import StatisticsSection from './../StatisticsSection';
 
 const GovernanceTab = ({ result }) => {
-  const statisticsData = [
-    {
-      value: '460km',
-      label: 'Duis non quam et nisi tincidunt',
-    },
-    {
-      value: '51-60%',
-      label: 'Vestibulum ante ipsum primis',
-    },
-    {
-      value: '2.431.213',
-      label: 'Aliquam erat volutpat',
-    },
-    {
-      value: '2023',
-      label: 'Etiam accumsan urna a mauris',
-    },
-  ];
+  const { Introduction, Describe_Title, Describe, Provide_Title, Provide } =
+    result || {};
 
   return (
     <Tab.Pane>
       <h2>Governance</h2>
       <Callout>
-        <p>
-          Sed at risus vel nulla consequat fermentum. Donec et orci mauris.
-          Nullam tempor velit id mi luctus, a scelerisque libero accumsan. In
-          hac habitasse platea dictumst. Cras ac nunc nec massa tristique
-          fringilla.
-        </p>
+        <p>{Introduction}</p>
       </Callout>
 
-      <StatisticsSection statistics={statisticsData} />
+      <h3>{Describe_Title}</h3>
 
-      <h3>Climate related issues</h3>
-      <AccordionList
-        accordions={[
-          {
-            title: 'Vestibulum ante ipsum primis',
-            content: 'No additional details provided.',
-          },
-          {
-            title: 'Etiam accumsan urna a mauris',
-            content: 'No additional details provided.',
-          },
-        ]}
-      />
+      <HTMLField value={{ data: formatTextToHTML(Describe) }} />
 
-      <h3>Opportunities and benefits of climate action</h3>
-
-      <HTMLField value={{ data: formatTextToHTML(result?.Describe) }} />
+      <br />
 
       <AccordionList
         accordions={[
           {
-            title: ' Further details and evidence',
-            content: (
-              <HTMLField value={{ data: formatTextToHTML(result?.Provide) }} />
-            ),
-          },
-        ]}
-      />
-
-      <h3>
-        {result?.Signatory} engages with other levels of government regarding
-        their:
-      </h3>
-
-      <AccordionList
-        accordions={[
-          {
-            title: 'Vestibulum ante ipsum primis',
-            content: 'No additional details provided.',
-          },
-          {
-            title: 'Etiam accumsan urna a mauris',
-            content: 'No additional details provided.',
+            title: <>{Provide_Title}</>,
+            content: <HTMLField value={{ data: formatTextToHTML(Provide) }} />,
           },
         ]}
       />

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/GovernanceTab.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import GovernanceTab from './GovernanceTab';
+
+describe('GovernanceTab', () => {
+  const mockResult = {
+    Describe_Title: 'Opportunities and benefits of climate action',
+    Provide_Title: 'Further details and evidence',
+  };
+
+  it('renders the governance tab correctly', () => {
+    const { getByText } = render(<GovernanceTab result={mockResult} />);
+
+    expect(
+      getByText('Opportunities and benefits of climate action'),
+    ).toBeInTheDocument();
+    expect(getByText('Further details and evidence')).toBeInTheDocument();
+  });
+});

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/PlanningTab.jsx

@@ -1,117 +1,191 @@
 import React from 'react';
-import { Tab, Message } from 'semantic-ui-react';
+import {
+  Tab,
+  Message,
+  Segment,
+  Grid,
+  Item,
+  ItemGroup,
+  ItemContent,
+  Image,
+} from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
+import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
+import {
+  formatTextToHTML,
+  extractPlanNameAndURL,
+} from '@eeacms/volto-cca-policy/utils';
 import AccordionList from './../AccordionList';
-import ItemsSection from './../ItemsSection';
+import image from '@eeacms/volto-cca-policy/../theme/assets/images/image-narrow.svg';
+
+const ItemsSection = ({ items }) => {
+  if (!items?.length) return null;
+
+  return (
+    <ItemGroup className="items-group">
+      {items.map((sector, index) => (
+        <Item key={index}>
+          <Image size="small" src={image} />
+          <ItemContent verticalAlign="middle">{sector}</ItemContent>
+        </Item>
+      ))}
+    </ItemGroup>
+  );
+};
+
+const PlanningGoalContent = ({ goal }) => {
+  const hasHazards = goal?.Climate_Hazards?.length > 0;
+  const hasComments = !!goal?.Comments;
+  const hasDescription = !!goal?.Description;
+
+  return (
+    <div>
+      <Grid columns="12">
+        {hasHazards && (
+          <Grid.Column mobile={12} tablet={12} computer={6}>
+            <h5>{goal.Climate_Hazards_Addressed_Label}</h5>
+            <ul>
+              {goal.Climate_Hazards.map((hazard, index) => (
+                <li key={index}>{hazard}</li>
+              ))}
+            </ul>
+          </Grid.Column>
+        )}
+        <Grid.Column mobile={12} tablet={12} computer={hasHazards ? 6 : 12}>
+          {hasComments && (
+            <>
+              <h5 className="small-label">{goal.Comments_Label}</h5>
+              <Segment>
+                <HTMLField value={{ data: formatTextToHTML(goal.Comments) }} />
+              </Segment>
+            </>
+          )}
+          {hasDescription && (
+            <>
+              <h5 className="small-label">{goal.Description_Label}</h5>
+              <Segment>
+                <HTMLField
+                  value={{ data: formatTextToHTML(goal.Description) }}
+                />
+              </Segment>
+            </>
+          )}
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+};
+
+const PlanningTab = ({ result }) => {
+  const {
+    planning_goals = [],
+    planning_titles = [],
+    planning_climate_action = [],
+  } = result || {};
+
+  const titleData = planning_titles?.[0];
+  const goalData = planning_goals?.[0];
+
+  const sortedGoals = [...planning_goals].sort((a, b) => {
+    const aNum = parseInt(a.Adaptation_Goal_Id.replace(/\D/g, ''), 10);
+    const bNum = parseInt(b.Adaptation_Goal_Id.replace(/\D/g, ''), 10);
+    return aNum - bNum;
+  });
 
-const PlanningTab = () => {
   return (
     <Tab.Pane>
-      <h2>Planning</h2>
-      <Callout>
-        <p>
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia curae; Pellentesque sodales, velit nec euismod
-          scelerisque, lectus est interdum eros, sit amet bibendum eros sapien
-          in magna.
-        </p>
-      </Callout>
-      <div className="section-wrapper">
-        <h5>
-          <span className="section-number">1. </span>
-          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
-          eleifend ipsum cursus.
-        </h5>
-        <AccordionList
-          variation="secondary"
-          accordions={[
-            {
-              title: 'Vestibulum ante ipsum primis',
-              content: 'No additional details provided.',
-            },
-          ]}
-        />
-      </div>
-      <div className="section-wrapper">
-        <h5>
-          <span className="section-number">2. </span>
-          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
-          eleifend ipsum cursus.
-        </h5>
-        <AccordionList
-          variation="secondary"
-          accordions={[
-            {
-              title: 'Vestibulum ante ipsum primis',
-              content: 'No additional details provided.',
-            },
-          ]}
-        />
-      </div>
-      <div className="section-wrapper">
-        <h5>
-          <span className="section-number">3. </span>
-          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
-          eleifend ipsum cursus.
-        </h5>
-        <AccordionList
-          variation="secondary"
-          accordions={[
-            {
-              title: 'Vestibulum ante ipsum primis',
-              content: 'No additional details provided.',
-            },
-          ]}
-        />
-      </div>
-      <h2>
-        Quisque suscipit ligula eu turpis dignissim, a eleifend ipsum cursus.
-      </h2>
-
-      <Callout>
-        <p>
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia curae; Pellentesque sodales, velit nec euismod
-          scelerisque, lectus est interdum eros, sit amet bibendum eros sapien
-          in magna.
-        </p>
-      </Callout>
-      <br />
-      <Message>
-        <p>
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia curae. Nunc euismod bibendum augue. Cras nec ligula
-          velit. Donec in laoreet leo. Quisque suscipit ligula eu turpis
-          dignissim, a eleifend ipsum cursus.
-        </p>
-      </Message>
-      <ItemsSection />
-      <p>
-        Curabitur at felis non libero suscipit fermentum. Duis volutpat, ante et
-        scelerisque luctus, sem nulla placerat leo, at aliquet libero justo id
-        nulla. Integer at dui nec magna posuere fringilla. Nunc euismod bibendum
-        augue. Cras nec ligula velit. Donec in laoreet leo. Quisque suscipit
-        ligula eu turpis dignissim, a eleifend ipsum cursus.
-      </p>
-      <p>
-        Year of formal approval of plan: <strong className="date">2023</strong>{' '}
-        End year of plan: {''}
-        <strong className="date">2030</strong>
-      </p>
-
-      <p>
-        <a href="/">
-          <strong>Nunc euismod bibendum augue</strong>
-        </a>
-      </p>
-
-      <p>
-        <a href="/">
-          <strong>
-            Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim
-          </strong>
-        </a>
-      </p>
+      {titleData?.Title && <h2>{titleData.Title}</h2>}
+      {titleData?.Abstract_Line && (
+        <Callout>
+          <p>{titleData.Abstract_Line}</p>
+        </Callout>
+      )}
+
+      {sortedGoals.map((goal, index) => {
+        return (
+          <div key={index} className="section-wrapper">
+            <span className="goal-title-label">{goal?.Title_Label}</span>
+
+            <HTMLField value={{ data: formatTextToHTML(goal?.Title) }} />
+
+            <AccordionList
+              variation="tertiary"
+              accordions={[
+                {
+                  title: goal?.More_Details_Label || 'More details',
+                  content: <PlanningGoalContent goal={goal} />,
+                },
+              ]}
+            />
+          </div>
+        );
+      })}
+
+      {goalData?.Climate_Action_Title && (
+        <h2>{goalData.Climate_Action_Title}</h2>
+      )}
+
+      {goalData?.Climate_Action_Abstract && (
+        <Callout>
+          <p>{goalData.Climate_Action_Abstract}</p>
+        </Callout>
+      )}
+
+      {planning_climate_action.map((action, index) => {
+        return (
+          <React.Fragment key={index}>
+            <br />
+            {action?.Sectors_Introduction && (
+              <Message>
+                <p>{action.Sectors_Introduction}</p>
+              </Message>
+            )}
+
+            <ItemsSection items={action?.Sectors} />
+            {action?.Description && <p>{action.Description}</p>}
+
+            {(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>
+                  ) : (
+                    <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/manage/Blocks/MissionSignatoriesProfile/TabSections/PlanningTab.test.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PlanningTab from './PlanningTab';
+
+jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
+  HTMLField: ({ value }) => (
+    <div dangerouslySetInnerHTML={{ __html: value.data }} />
+  ),
+}));
+
+jest.mock('@eeacms/volto-cca-policy/utils', () => ({
+  formatTextToHTML: (text) => text,
+  extractPlanNameAndURL: (str) => ({
+    name: 'Plan Example',
+    url: 'https://plan-link.com',
+  }),
+}));
+
+describe('PlanningTab', () => {
+  const mockResult = {
+    planning_titles: [
+      { Title: 'Planning Title', Abstract_Line: 'Abstract info' },
+    ],
+    planning_goals: [
+      {
+        Adaptation_Goal_Id: 'AG-001',
+        Title: 'Goal Title 1',
+        Title_Label: 'Goal 1 Label',
+        More_Details_Label: 'Details',
+        Climate_Hazards: ['Heat', 'Flood'],
+        Climate_Hazards_Addressed_Label: 'Hazards',
+        Comments_Label: 'Comments',
+        Comments: 'Some comments',
+        Description_Label: 'Description',
+        Description: 'Detailed description',
+        Climate_Action_Title: 'Action Title',
+        Climate_Action_Abstract: 'Action abstract',
+      },
+      {
+        Adaptation_Goal_Id: 'AG-002',
+        Title: 'Goal Title 2',
+        Title_Label: 'Goal 2 Label',
+        More_Details_Label: 'Details',
+        Climate_Hazards: ['Drought', 'Storm'],
+        Climate_Hazards_Addressed_Label: 'Hazards',
+        Comments_Label: 'Comments',
+        Comments: 'Other comments',
+        Description_Label: 'Description',
+        Description: 'Another detailed description',
+        Climate_Action_Title: 'Action Title',
+        Climate_Action_Abstract: 'Another action abstract',
+      },
+    ],
+    planning_climate_action: [
+      {
+        Sectors_Introduction: 'Intro to sectors',
+        Description: 'Sector description',
+        Year_Of_Approval_Label: 'Approval Year:',
+        Approval_Year: '2023',
+        End_Year_Of_Plan_Label: 'End Year:',
+        End_Year: '2030',
+        Name_Of_Plan_And_Hyperlink: 'http://example.com; https://plan-link.com',
+        Further_Information_Link_Text: 'More Info',
+        Attachment: 'http://attachment.com',
+        Explore_Plan_Link_Text: 'Explore Plan',
+        Sectors: ['Agriculture'],
+      },
+    ],
+  };
+
+  it('renders planning tab with basic data', () => {
+    const { getByText } = render(<PlanningTab result={mockResult} />);
+
+    expect(getByText('Planning Title')).toBeInTheDocument();
+    expect(getByText('Abstract info')).toBeInTheDocument();
+
+    expect(getByText('Goal Title 1')).toBeInTheDocument();
+    expect(getByText('Goal Title 2')).toBeInTheDocument();
+
+    expect(getByText('Action Title')).toBeInTheDocument();
+    expect(getByText('Intro to sectors')).toBeInTheDocument();
+    expect(getByText('Sector description')).toBeInTheDocument();
+
+    expect(getByText(/Approval Year:/)).toBeInTheDocument();
+    expect(getByText(/2023/)).toBeInTheDocument();
+    expect(getByText(/End Year:/)).toBeInTheDocument();
+    expect(getByText(/2030/)).toBeInTheDocument();
+  });
+
+  it('renders ItemsSection if there are sectors', () => {
+    const { getByText } = render(<PlanningTab result={mockResult} />);
+
+    expect(getByText(/Agriculture/)).toBeInTheDocument();
+  });
+
+  it('renders image in ItemsSection', () => {
+    const { container } = render(<PlanningTab result={mockResult} />);
+    const images = container.querySelectorAll('img');
+    expect(images.length).toBeGreaterThan(0);
+  });
+
+  it('renders hyperlink with extracted name and URL', () => {
+    const { getByText } = render(<PlanningTab result={mockResult} />);
+
+    const link = getByText(/More Info \[Plan Example\]/);
+    expect(link).toBeInTheDocument();
+    expect(link.closest('a')).toHaveAttribute('href', 'https://plan-link.com');
+  });
+});

package/src/components/manage/Blocks/MissionSignatoriesProfile/style.less

@@ -8,6 +8,10 @@
     margin: 2em 0;
   }
 
+  .column > .ui.segment {
+    background-color: #fff !important;
+  }
+
   .section-wrapper-info {
     display: flex;
     justify-content: space-between;
@@ -20,12 +24,24 @@
   }
 
   .section-wrapper {
-    padding: 1.5em;
-    margin: 2em 0;
-    background-color: #f9f9f9;
+    margin: 1em 0;
+
+    .goal-title-label {
+      display: inline-block;
+      padding: 0.3em 0.5em;
+      margin: 1em 0;
+      background-color: #dbe7f4;
+      font-size: 14px;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+
+    .ui.accordion {
+      margin-top: 1em;
+    }
 
-    .section-number {
-      color: @pineGreen;
+    .small-label {
+      font-size: 1em;
     }
   }
 

package/src/constants.js

@@ -0,0 +1,51 @@
+export const download_fields = [
+  // { field: 'cca_uid', name: 'UID' },
+  { field: 'about', name: 'About' },
+  { field: 'title', name: 'Title' },
+  { field: 'created', name: 'Creation Date' },
+  { field: 'issued', name: 'Publication Date' },
+  { field: 'creators', name: 'Creator' },
+  { field: 'objectProvides', name: 'Content type' },
+  { field: 'cca_keywords', name: 'Keywords' },
+  { field: 'cca_adaptation_sectors', name: 'Sectors' },
+  { field: 'cca_climate_impacts', name: 'Climate impact' },
+  { field: 'transnational_regions', name: 'Transnational regions' },
+  { field: 'cca_adaptation_elements', name: 'Adaptation Approaches' },
+  { field: 'cca_funding_programme', name: 'Funding programme' },
+  { field: 'cca_key_type_measure', name: 'Key type measure' },
+  { field: 'cca_geographic_countries', name: 'Countries' },
+  { field: 'cca_origin_websites', name: 'Origin website' },
+  { field: 'cca_health_impacts', name: 'Health impacts' },
+  { field: 'cca_partner_contributors', name: 'Observatory impacts' },
+  // { field: 'fulltext', name: 'Description' },
+];
+
+export const eea_languages = [
+  { name: 'English', code: 'en' },
+  { name: 'български', code: 'bg' },
+  { name: 'Español', code: 'es' },
+  // { name: 'Čeština', code: 'cs' },
+  { name: 'Dansk', code: 'da' },
+  { name: 'Deutsch', code: 'de' },
+  // { name: 'Eesti keel', code: 'et' },
+  { name: 'Ελληνικά', code: 'el' },
+  { name: 'Français', code: 'fr' },
+  // { name: 'Gaeilge', code: 'ga' },
+  { name: 'Hrvatski', code: 'hr' },
+  { name: 'Italiano', code: 'it' },
+  // { name: 'Latviešu valoda', code: 'lv' },
+  // { name: 'Lietuvių kalba', code: 'lt' },
+  // { name: 'Magyar', code: 'hu' },
+  // { name: 'Malti', code: 'mt' },
+  // { name: 'Nederlands', code: 'nl' },
+  { name: 'Polski', code: 'pl' },
+  { name: 'Português', code: 'pt' },
+  { name: 'Română', code: 'ro' },
+  // { name: 'Slovenčina', code: 'sk' },
+  // { name: 'Slovenščina', code: 'sl' },
+  { name: 'Suomi', code: 'fi' },
+  { name: 'Svenska', code: 'sv' },
+  { name: 'Íslenska', code: 'is' },
+  { name: 'Nynorsk', code: 'nn' },
+  // { name: 'Türkçe', code: 'tr' },
+];

package/src/index.js

@@ -42,6 +42,8 @@ import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/as
 import './slate-styles.less';
 import BrokenLinks from './components/theme/Views/BrokenLinks';
 
+import { eea_languages } from './constants';
+
 const getEnv = () => (typeof window !== 'undefined' ? window.env : process.env);
 
 const pathToNegRegex = (p) => `(?!(${p}))`;
@@ -140,35 +142,7 @@ const applyConfig = (config) => {
   // EEA customizations
   config.settings.eea = {
     ...(config.settings.eea || {}),
-    languages: [
-      { name: 'English', code: 'en' },
-      // { name: 'български', code: 'bg' },
-      { name: 'Español', code: 'es' },
-      // { name: 'Čeština', code: 'cs' },
-      { name: 'Dansk', code: 'da' },
-      { name: 'Deutsch', code: 'de' },
-      // { name: 'Eesti keel', code: 'et' },
-      { name: 'Ελληνικά', code: 'el' },
-      { name: 'Français', code: 'fr' },
-      // { name: 'Gaeilge', code: 'ga' },
-      { name: 'Hrvatski', code: 'hr' },
-      { name: 'Italiano', code: 'it' },
-      // { name: 'Latviešu valoda', code: 'lv' },
-      // { name: 'Lietuvių kalba', code: 'lt' },
-      // { name: 'Magyar', code: 'hu' },
-      // { name: 'Malti', code: 'mt' },
-      // { name: 'Nederlands', code: 'nl' },
-      { name: 'Polski', code: 'pl' },
-      { name: 'Português', code: 'pt' },
-      // { name: 'Română', code: 'ro' },
-      // { name: 'Slovenčina', code: 'sk' },
-      // { name: 'Slovenščina', code: 'sl' },
-      { name: 'Suomi', code: 'fi' },
-      { name: 'Svenska', code: 'sv' },
-      { name: 'Íslenska', code: 'is' },
-      { name: 'Nynorsk', code: 'nn' },
-      // { name: 'Türkçe', code: 'tr' },
-    ],
+    languages: eea_languages,
     headerOpts: {
       ...(config.settings.eea?.headerOpts || {}),
       logo: ccaLogo,

package/src/search/cca/config.js

@@ -1,9 +1,10 @@
 import { mergeConfig } from '@eeacms/search';
 import { getClientProxyAddress } from '../utils';
-import vocabs from '../vocabulary';
+import { vocab } from '../vocabulary';
 
 import facets from './facets';
 import views from './views';
+import { download_fields } from '../../constants';
 
 const ccaConfig = {
   title: 'ClimateAdapt Main',
@@ -76,30 +77,10 @@ export default function installMainSearch(config) {
     index_name: 'data_searchui',
     host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
     runtime_mappings: cca_build_runtime_mappings,
-    ...vocabs,
+    vocab,
   };
 
-  config.searchui.ccaSearch.download_fields = [
-    // { field: 'cca_uid', name: 'UID' },
-    { field: 'about', name: 'About' },
-    { field: 'title', name: 'Title' },
-    { field: 'created', name: 'Creation Date' },
-    { field: 'issued', name: 'Publication Date' },
-    { field: 'creators', name: 'Creator' },
-    { field: 'objectProvides', name: 'Content type' },
-    { field: 'cca_keywords', name: 'Keywords' },
-    { field: 'cca_adaptation_sectors', name: 'Sectors' },
-    { field: 'cca_climate_impacts', name: 'Climate impact' },
-    { field: 'transnational_regions', name: 'Transnational regions' },
-    { field: 'cca_adaptation_elements', name: 'Adaptation Approaches' },
-    { field: 'cca_funding_programme', name: 'Funding programme' },
-    { field: 'cca_key_type_measure', name: 'Key type measure' },
-    { field: 'cca_geographic_countries', name: 'Countries' },
-    { field: 'cca_origin_websites', name: 'Origin website' },
-    { field: 'cca_health_impacts', name: 'Health impacts' },
-    { field: 'cca_partner_contributors', name: 'Observatory impacts' },
-    // { field: 'fulltext', name: 'Description' },
-  ];
+  config.searchui.ccaSearch.download_fields = download_fields;
 
   const { ccaSearch } = config.searchui;
 

package/src/search/common.js

@@ -1,3 +1,4 @@
+import { eea_languages } from '@eeacms/volto-cca-policy/constants';
 import { booleanFacet } from '@eeacms/search';
 import { getTodayWithTime } from './utils';
 
@@ -192,42 +193,44 @@ export const language = {
       type: 'any',
     };
   },
-  facetValues: [
-    'de',
-    'en',
-    'es',
-    'fr',
-    'it',
-    'pl',
-    // 'ar',
-    // 'bg',
-    // 'bs',
-    // 'cs',
-    // 'da',
-    // 'el',
-    // 'et',
-    // 'fi',
-    // 'ga',
-    // 'hr',
-    // 'hu',
-    // 'is',
-    // 'lt',
-    // 'lv',
-    // 'mk',
-    // 'mt',
-    // 'nl',
-    // 'no',
-    // 'pt',
-    // 'ro',
-    // 'ru',
-    // 'sh',
-    // 'sk',
-    // 'sl',
-    // 'sq',
-    // 'sr',
-    // 'sv',
-    // 'tr',
-  ],
+  facetValues: eea_languages.map(({ code }) => code),
   sortOn: 'custom',
   sortOnCustomLabel: 'Alphabetical',
 };
+
+// [
+//     'de',
+//     'en',
+//     'es',
+//     'fr',
+//     'it',
+//     'pl',
+//     // 'ar',
+//     // 'bg',
+//     // 'bs',
+//     // 'cs',
+//     // 'da',
+//     // 'el',
+//     // 'et',
+//     // 'fi',
+//     // 'ga',
+//     // 'hr',
+//     // 'hu',
+//     // 'is',
+//     // 'lt',
+//     // 'lv',
+//     // 'mk',
+//     // 'mt',
+//     // 'nl',
+//     // 'no',
+//     // 'pt',
+//     // 'ro',
+//     // 'ru',
+//     // 'sh',
+//     // 'sk',
+//     // 'sl',
+//     // 'sq',
+//     // 'sr',
+//     // 'sv',
+//     // 'tr',
+//   ]

package/src/search/health_observatory/config-health.js

@@ -1,7 +1,7 @@
 import { mergeConfig } from '@eeacms/search';
 import { build_runtime_mappings } from '@eeacms/volto-globalsearch/utils';
 import { getClientProxyAddress } from './../utils';
-import vocabs from './../vocabulary';
+import { vocab } from './../vocabulary';
 
 import facets from './facets-health';
 import views from './views-health';
@@ -90,7 +90,7 @@ export default function installMainSearch(config) {
     elastic_index: '_es/globalsearch',
     index_name: 'data_searchui',
     host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
-    ...vocabs,
+    vocab,
     runtime_mappings: build_runtime_mappings(clusters),
   };
 

package/src/search/vocabulary.js

@@ -1,4 +1,6 @@
-const vocab = {
+import { eea_languages } from '@eeacms/volto-cca-policy/constants';
+
+export const vocab = {
   cluster_name: {
     cca: 'Climate-ADAPT',
   },
@@ -19,6 +21,8 @@ const vocab = {
     'Publication reference': 'Publications and reports',
     Video: 'Videos and podcasts',
   },
+  language: Object.assign(
+    {},
+    ...eea_languages.map(({ name, code }) => ({ [code]: name })),
+  ),
 };
-
-export default { vocab };

package/src/utils.js

@@ -81,11 +81,41 @@ export const filterBlocks = (content, blockTypes = []) => {
 export const formatTextToHTML = (text) => {
   if (!text) return '';
 
-  // Replace \\n\\n with </p><p> (separate paragraphs)
-  let formattedText = text.replace(/\\n\\n/g, '</p><p>');
-
-  // Replace \\n with <br /> (line breaks within paragraphs)
-  formattedText = formattedText.replace(/\\n/g, '<br />');
+  let formattedText = text
+    .replace(/\\\\/g, '\\') // unescape backslashes
+    .replace(/\\'/g, "'") // unescape single quotes
+    .replace(/\\"/g, '"') // unescape double quotes
+    .replace(/\\t\\n/g, '') // handle \t\n
+    .replace(/\\n\\n/g, '</p><p>') // double line break = paragraph
+    .replace(/\\no\s*/g, '<br />• ') // list-like "o " to bullet point
+    .replace(/\\n/g, '<br />'); // single line break
 
   return `<p>${formattedText}</p>`;
 };
+
+export const extractPlanNameAndURL = (text) => {
+  if (!text) return { name: '', url: '' };
+
+  // Match URL inside parentheses
+  const parenthesisMatch = text.match(/\((https?:\/\/[^\s)]+)\)/);
+  // Match first direct URL not inside parentheses
+  const directMatch = text.match(/https?:\/\/[^\s,;)]+/);
+  const url = parenthesisMatch?.[1] || directMatch?.[0] || '';
+
+  let name = text;
+
+  if (url) {
+    // Remove URL and any punctuation before it
+    name = name
+      .replace(`(${url})`, '')
+      .replace(url, '')
+      .replace(/[-–;,:\s]+$/, '')
+      .replace(/[-–;,:\s]+$/, '')
+      .trim();
+  }
+
+  return {
+    name: name,
+    url,
+  };
+};

package/src/components/manage/Blocks/MissionSignatoriesProfile/ItemsSection.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Item, ItemGroup, ItemContent, Image } from 'semantic-ui-react';
-
-import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
-
-const ItemsSection = ({ items }) => {
-  return (
-    <ItemGroup className="items-group">
-      <Item>
-        <Image size="small" src={image} />
-        <ItemContent verticalAlign="middle">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </ItemContent>
-      </Item>
-
-      <Item>
-        <Image size="small" src={image} />
-        <ItemContent verticalAlign="middle">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </ItemContent>
-      </Item>
-
-      <Item>
-        <Image size="small" src={image} />
-        <ItemContent verticalAlign="middle">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </ItemContent>
-      </Item>
-
-      <Item>
-        <Image size="small" src={image} />
-        <ItemContent verticalAlign="middle">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </ItemContent>
-      </Item>
-
-      <Item>
-        <Image size="small" src={image} />
-        <ItemContent verticalAlign="middle">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </ItemContent>
-      </Item>
-
-      <Item>
-        <Image size="small" src={image} />
-        <ItemContent verticalAlign="middle">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </ItemContent>
-      </Item>
-    </ItemGroup>
-  );
-};
-
-export default ItemsSection;