@eeacms/volto-cca-policy 0.3.27 → 0.3.28

package/CHANGELOG.md

@@ -4,6 +4,33 @@ 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.28](https://github.com/eea/volto-cca-policy/compare/0.3.27...0.3.28) - 22 April 2025
+
+#### :rocket: New Features
+
+- feat: update assessment section view - refs #286757 [kreafox - [`1997bff`](https://github.com/eea/volto-cca-policy/commit/1997bff63788aff4c5e834bd73bef1443f4f869a)]
+
+#### :bug: Bug Fixes
+
+- fix: mission profile template fixes - refs #286757 [kreafox - [`583594e`](https://github.com/eea/volto-cca-policy/commit/583594e4d25bb7269037a5b7628a8f37dcd126ae)]
+- fix: governance section - refs #285296 [kreafox - [`f34df51`](https://github.com/eea/volto-cca-policy/commit/f34df512bb82b50895b3f8ed6f83926da7c152b1)]
+
+#### :nail_care: Enhancements
+
+- change: update assessment section view - refs #286757 [kreafox - [`7e15434`](https://github.com/eea/volto-cca-policy/commit/7e15434972f54f5836063224ebf7fc4793de3606)]
+- change: update planning section - refs #286151 [kreafox - [`38b8007`](https://github.com/eea/volto-cca-policy/commit/38b8007be3a6ecc88ccccbef3f6f14eec27a5e6b)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`7b6b95f`](https://github.com/eea/volto-cca-policy/commit/7b6b95fcf910e33f70a7ab41bb6fbb3652dcb4ce)]
+- style: Automated code fix [eea-jenkins - [`fc17148`](https://github.com/eea/volto-cca-policy/commit/fc17148d1e433b0990abe81b267343e36de3bd8f)]
+
+#### :hammer_and_wrench: Others
+
+- test: increase code coverage [kreafox - [`4bfdeaa`](https://github.com/eea/volto-cca-policy/commit/4bfdeaa37f8ce25591248ced83642acb54527053)]
+- update tests [kreafox - [`83cf81c`](https://github.com/eea/volto-cca-policy/commit/83cf81cd58b6dc1b771b9f283e34d5b42ee7abbc)]
+- test: update GovernanceTab test [kreafox - [`fd25e65`](https://github.com/eea/volto-cca-policy/commit/fd25e65c24838205ae5e4376a50c642f3686cb97)]
+- update planning section - refs #285361 [kreafox - [`110f4de`](https://github.com/eea/volto-cca-policy/commit/110f4def3b73544c18f4a963e9a9c9592865333e)]
 ### [0.3.27](https://github.com/eea/volto-cca-policy/compare/0.3.26...0.3.27) - 16 April 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.27",
+  "version": "0.3.28",
   "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/MissionSignatoriesProfileView.js

@@ -12,7 +12,9 @@ import './style.less';
 const MissionSignatoriesProfileView = (props) => {
   const { data } = props;
   const result = data?._v_results || {};
-  const governance = result?.governance?.[0] || {};
+  const governance = result?.governance?.[0] || [];
+  const planning = result?.planning || {};
+  const assessment = result?.assessment || {};
 
   // const dataJson = JSON.parse(result?.Cooperation_Experience);
   const [activeIndex, setActiveIndex] = React.useState(0);
@@ -25,7 +27,8 @@ const MissionSignatoriesProfileView = (props) => {
             'DescribeDetailCooperationEnhance'
           ]
         } */}
-        <h2>{result?.planning_titles?.[0].Signatory}</h2>
+        <h2>{planning?.planning_titles?.[0].Signatory}</h2>
+        {/* <h2>{planning?.planning_titles?.[0].Id}</h2> */}
 
         <br />
 
@@ -50,20 +53,11 @@ const MissionSignatoriesProfileView = (props) => {
             },
             {
               menuItem: 'Assessment',
-              render: () => <AssessmentTab />,
+              render: () => <AssessmentTab result={assessment} />,
             },
             {
               menuItem: 'Planning',
-              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,
-                  }}
-                />
-              ),
+              render: () => <PlanningTab result={planning} />,
             },
             {
               menuItem: 'Action Pages',

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

@@ -1,107 +1,60 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import MissionSignatoriesProfileView from './MissionSignatoriesProfileView';
 
-// Mock components for tabs
+// Mock the tab components with minimal placeholders
 jest.mock('./TabSections/IntroductionTab', () => () => (
-  <div>Introduction Content</div>
+  <div>Mocked Introduction</div>
 ));
 jest.mock('./TabSections/GovernanceTab', () => () => (
-  <div>Governance Content</div>
+  <div>Mocked Governance</div>
 ));
 jest.mock('./TabSections/AssessmentTab', () => () => (
-  <div>Assessment Content</div>
+  <div>Mocked Assessment</div>
 ));
-jest.mock('./TabSections/PlanningTab', () => () => <div>Planning Content</div>);
+jest.mock('./TabSections/PlanningTab', () => () => <div>Mocked Planning</div>);
 jest.mock('./TabSections/ActionPagesTab', () => () => (
-  <div>Action Pages Content</div>
+  <div>Mocked Action Pages</div>
 ));
 
 describe('MissionSignatoriesProfileView', () => {
   const data = {
     _v_results: {
-      planning_titles: [{ Signatory: 'Test Signatory Title' }],
-      planning_goals: [],
-      planning_climate_action: [],
-      planning_climate_sectors: [],
+      planning: {
+        planning_titles: [{}],
+      },
       governance: [{}],
     },
   };
 
-  it('should render the component with data and tabs', () => {
-    const { getByText } = render(<MissionSignatoriesProfileView data={data} />);
+  it('renders tab labels and default content', () => {
+    render(<MissionSignatoriesProfileView data={data} />);
 
-    expect(getByText('Governance')).toBeInTheDocument();
-    expect(getByText('Assessment')).toBeInTheDocument();
-    expect(getByText('Planning')).toBeInTheDocument();
-    expect(getByText('Action Pages')).toBeInTheDocument();
-    expect(getByText('Introduction')).toBeInTheDocument();
-  });
-
-  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();
-  });
+    // Tab labels
+    expect(screen.getByText('Introduction')).toBeInTheDocument();
+    expect(screen.getByText('Governance')).toBeInTheDocument();
+    expect(screen.getByText('Assessment')).toBeInTheDocument();
+    expect(screen.getByText('Planning')).toBeInTheDocument();
+    expect(screen.getByText('Action Pages')).toBeInTheDocument();
 
-  it('should handle empty _v_results object gracefully', () => {
-    const { getByText } = render(
-      <MissionSignatoriesProfileView data={{ _v_results: {} }} />,
-    );
-    expect(getByText('Introduction')).toBeInTheDocument();
+    // Default selected tab content (Introduction)
+    expect(screen.getByText('Mocked 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} />);
-
-    fireEvent.click(getByText('Governance'));
-    await waitFor(() =>
-      expect(getByText('Governance Content')).toBeInTheDocument(),
-    );
+  it('switches tabs and renders corresponding content', () => {
+    render(<MissionSignatoriesProfileView data={data} />);
 
-    fireEvent.click(getByText('Introduction'));
-    await waitFor(() =>
-      expect(getByText('Introduction Content')).toBeInTheDocument(),
-    );
+    fireEvent.click(screen.getByText('Governance'));
+    expect(screen.getByText('Mocked Governance')).toBeInTheDocument();
 
-    fireEvent.click(getByText('Assessment'));
-    await waitFor(() =>
-      expect(getByText('Assessment Content')).toBeInTheDocument(),
-    );
+    fireEvent.click(screen.getByText('Assessment'));
+    expect(screen.getByText('Mocked Assessment')).toBeInTheDocument();
 
-    fireEvent.click(getByText('Planning'));
-    await waitFor(() =>
-      expect(getByText('Planning Content')).toBeInTheDocument(),
-    );
+    fireEvent.click(screen.getByText('Planning'));
+    expect(screen.getByText('Mocked Planning')).toBeInTheDocument();
 
-    fireEvent.click(getByText('Action Pages'));
-    await waitFor(() =>
-      expect(getByText('Action Pages Content')).toBeInTheDocument(),
-    );
+    fireEvent.click(screen.getByText('Action Pages'));
+    expect(screen.getByText('Mocked Action Pages')).toBeInTheDocument();
   });
 });

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

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Tab,
   Image,
-  Button,
   Segment,
   Item,
   ItemGroup,
@@ -14,83 +13,109 @@ import AccordionList from './../AccordionList';
 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">
-      <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>
+      {items.map((item, index) => (
+        <Item key={index}>
+          <Image size="small" src={image} />
+          <ItemContent verticalAlign="middle">{item.Factor}</ItemContent>
+        </Item>
+      ))}
     </ItemGroup>
   );
 };
 
-const AssessmentTab = () => {
+const AssessmentAccordionContent = ({ result }) => {
+  return (
+    <>
+      <p>
+        <a href={result.Hyperlink} target="_blank" rel="noreferrer">
+          <strong>{result.Explore_Link_Text}</strong>
+        </a>
+      </p>
+      <p>
+        <span>
+          {result.Year_Of_Publication_Label}
+          {': '}
+        </span>
+        <strong>{result.Year_Of_Publication}</strong>
+      </p>
+
+      <h5>{result.Further_Details_Label}</h5>
+      <Segment className="border">
+        <p>{result.Please_Explain}</p>
+      </Segment>
+    </>
+  );
+};
+
+const AssessmentTab = ({ result }) => {
+  const {
+    Title,
+    Subheading,
+    Abstract,
+    Cra_Title,
+    Cra_Abstract,
+    Attachments,
+    Hazards_Title,
+    Hazards_Abstract,
+  } = result.assessment_text[0] || [];
+
   const [activeIndex, setActiveIndex] = React.useState(0);
+
   return (
     <Tab.Pane>
-      <h2>Assessment</h2>
-      <Callout>
+      {Title && <h2>{Title}</h2>}
+      {Subheading && (
+        <Callout>
+          <p>{Subheading}</p>
+        </Callout>
+      )}
+
+      {Abstract && <p>{Abstract}</p>}
+
+      <div className="tab-section-wrapper assessment">
+        {Cra_Title && <h3>{Cra_Title}</h3>}
+        {Cra_Abstract && <h5>{Cra_Abstract}</h5>}
+
+        <ItemsSection items={result.assessment_factors} />
+
+        {Attachments && <h4>{Attachments}</h4>}
+
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Lorem ipsum dolor sit amet consectetur. Quam porta convallis ultrices
+          aliquet. Imperdiet maecenas at velit gravida arcu blandit eget. Etiam
+          tellus vulputate mi vitae bibendum fermentum condimentum facilisis.
+          Amet et sed nunc pretium fames nibh lacus mi magna.
         </p>
-      </Callout>
-
-      <div className="section-wrapper">
-        <h3>Climate Risk Assessment</h3>
-        <div className="section-wrapper-info">
-          <ItemGroup unstackable className="row">
-            <Item>
-              <Image size="miny" src={image} />
-              <ItemContent
-                verticalAlign="middle"
-                style={{ paddingLeft: '5px' }}
-              >
-                Lorem ipsum dolor sit amet
-              </ItemContent>
-            </Item>
-          </ItemGroup>
-
-          <div className="date">
-            <p>Year of publication: 2022</p>
-          </div>
-        </div>
-
-        <h4>The CRA conducted considers the following factors</h4>
-
-        <div className="items-wrapper">
-          <ItemsSection />
-        </div>
-
-        <h4>Further details</h4>
-        <Segment>
-          Nam tempor finibus lorem, nec varius arcu convallis sed. Nunc id orci
-          a neque vehicula malesuada. Donec vehicula libero vel leo convallis,
-          nec tincidunt felis tincidunt. Maecenas euismod tristique leo, vel
-          malesuada ligula malesuada sed. Donec eget libero id leo congue
-          venenatis.
-        </Segment>
-        <Button primary inverted>
-          Download
-        </Button>
+
+        {result.assessment_risks.map((risk, index) => {
+          const title = risk?.Attachment_Title
+            ? `${risk.Assessment_Id}. ${risk.Attachment_Title} - ${
+                risk.Year_Of_Publication || ''
+              }`
+            : null;
+          return (
+            <div key={index}>
+              <AccordionList
+                variation="tertiary"
+                accordions={[
+                  {
+                    title: title,
+                    content: <AssessmentAccordionContent result={risk} />,
+                  },
+                ]}
+              />
+            </div>
+          );
+        })}
       </div>
 
-      <h3>Climate related hazards & sectors most exposed</h3>
-      <p>
-        Donec eget libero id leo congue venenatis. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-        esse cillum dolore eu fugiat nulla pariatur.
-      </p>
+      {Hazards_Title && <h3>{Hazards_Title}</h3>}
+
+      {Hazards_Abstract && <p>{Hazards_Abstract}</p>}
 
       <br />
 

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import AssessmentTab from './AssessmentTab';
+
+jest.mock('@eeacms/volto-eea-design-system/ui', () => ({
+  Callout: ({ children }) => <div>{children}</div>,
+}));
+
+const mockData = {
+  assessment_text: [
+    {
+      Title: 'Assessment Title',
+      Subheading: 'Assessment Subheading',
+      Abstract: 'Assessment abstract content.',
+      Cra_Title: 'CRA Title',
+      Cra_Abstract: 'CRA Abstract here.',
+      Attachments: 'Attachment Heading',
+      Hazards_Title: 'Hazards',
+      Hazards_Abstract: 'Hazards abstract text.',
+    },
+  ],
+  assessment_factors: [{ Factor: 'Factor A' }, { Factor: 'Factor B' }],
+  assessment_risks: [
+    {
+      Assessment_Id: '1',
+      Attachment_Title: 'Risk Attachment Title',
+      Year_Of_Publication: '2023',
+      Hyperlink: 'https://example.com',
+      Explore_Link_Text: 'Explore this risk',
+      Year_Of_Publication_Label: 'Published Year',
+      Further_Details_Label: 'Details',
+      Please_Explain: 'Explanation content here.',
+    },
+  ],
+};
+
+describe('AssessmentTab', () => {
+  it('renders core sections and nested tabs', () => {
+    render(<AssessmentTab result={mockData} />);
+
+    // General headings
+    expect(screen.getByText('Assessment Title')).toBeInTheDocument();
+    expect(screen.getByText('Assessment Subheading')).toBeInTheDocument();
+    expect(
+      screen.getByText('Assessment abstract content.'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('CRA Title')).toBeInTheDocument();
+    expect(screen.getByText('CRA Abstract here.')).toBeInTheDocument();
+    expect(screen.getByText('Attachment Heading')).toBeInTheDocument();
+    expect(screen.getByText('Hazards')).toBeInTheDocument();
+    expect(screen.getByText('Hazards abstract text.')).toBeInTheDocument();
+
+    // Items section
+    expect(screen.getByText('Factor A')).toBeInTheDocument();
+    expect(screen.getByText('Factor B')).toBeInTheDocument();
+
+    // Hazard tabs
+    expect(screen.getByText('Water related')).toBeInTheDocument();
+    expect(screen.getByText('Heat related')).toBeInTheDocument();
+    expect(screen.getByText('Other hazards')).toBeInTheDocument();
+  });
+});

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

@@ -6,30 +6,43 @@ import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import AccordionList from './../AccordionList';
 
 const GovernanceTab = ({ result }) => {
-  const { Introduction, Describe_Title, Describe, Provide_Title, Provide } =
-    result || {};
+  const {
+    Title,
+    Introduction,
+    Describe_Title,
+    Describe,
+    Provide_Title,
+    Provide,
+  } = result;
 
   return (
     <Tab.Pane>
-      <h2>Governance</h2>
-      <Callout>
-        <p>{Introduction}</p>
-      </Callout>
+      {Title && <h2>{Title}</h2>}
 
-      <h3>{Describe_Title}</h3>
+      {Introduction && (
+        <Callout>
+          <p>{Introduction}</p>
+        </Callout>
+      )}
 
-      <HTMLField value={{ data: formatTextToHTML(Describe) }} />
+      {Describe_Title && <h3>{Describe_Title}</h3>}
+
+      {Describe && <HTMLField value={{ data: formatTextToHTML(Describe) }} />}
 
       <br />
 
-      <AccordionList
-        accordions={[
-          {
-            title: <>{Provide_Title}</>,
-            content: <HTMLField value={{ data: formatTextToHTML(Provide) }} />,
-          },
-        ]}
-      />
+      {Provide_Title && Provide && (
+        <AccordionList
+          accordions={[
+            {
+              title: Provide_Title,
+              content: (
+                <HTMLField value={{ data: formatTextToHTML(Provide) }} />
+              ),
+            },
+          ]}
+        />
+      )}
     </Tab.Pane>
   );
 };

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

@@ -1,20 +1,24 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import GovernanceTab from './GovernanceTab';
 
 describe('GovernanceTab', () => {
   const mockResult = {
+    Title: 'Governance Section',
+    Introduction: 'This is an introduction to governance.',
     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} />);
+  it('renders the governance tab correctly with all sections', () => {
+    render(<GovernanceTab result={mockResult} />);
 
+    expect(screen.getByText('Governance Section')).toBeInTheDocument();
     expect(
-      getByText('Opportunities and benefits of climate action'),
+      screen.getByText('This is an introduction to governance.'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Opportunities and benefits of climate action'),
     ).toBeInTheDocument();
-    expect(getByText('Further details and evidence')).toBeInTheDocument();
   });
 });

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

@@ -4,8 +4,8 @@
 @import (multiple, reference, optional) '../../theme.config';
 
 .signatories-profile {
-  .items-wrapper {
-    margin: 2em 0;
+  .ui.items.items-group {
+    margin: 2em 0 !important;
   }
 
   .column > .ui.segment {
@@ -23,6 +23,27 @@
     }
   }
 
+  .tab-section-wrapper {
+    padding: 1.5em;
+    margin: 2em 0;
+    background-color: #f9f9f9;
+
+    &.assessment {
+      .ui.accordion {
+        margin-top: 1em;
+
+        .content.active {
+          padding: 1rem 1rem !important;
+          background-color: @white;
+        }
+
+        .ui.segment.border {
+          border: 1px solid #e6e7e8;
+        }
+      }
+    }
+  }
+
   .section-wrapper {
     margin: 1em 0;