@eeacms/volto-cca-policy 0.2.4 → 0.2.6

package/src/components/manage/Blocks/CountryProfileDetail/CountryTabPane.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import CountryTabPane from './CountryTabPane';
+
+const mockStore = configureStore();
+
+describe('CountryTabPane', () => {
+  const setActivePanes = () => {
+    return 0;
+  };
+  it('should render the component', () => {
+    const data = {
+      _index: 2,
+      contents: [
+        [
+          {
+            type: 'div',
+            value: '<div><p class="testing">Just a test</p></div>',
+          },
+        ],
+      ],
+      activePanes: 1,
+      setActivePanes: setActivePanes,
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CountryTabPane {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/manage/Blocks/CountryProfileDetail/View.js

@@ -1,47 +1,30 @@
 import React from 'react';
 import { TabPane, Tab } from 'semantic-ui-react';
+import { Accordion, Icon } from 'semantic-ui-react';
+import CountryTabPane from './CountryTabPane';
 
-const extract_body = (html_string) => {
-  let parser = new DOMParser();
-  let dom_document = parser.parseFromString(html_string, 'text/html');
-
-  let list = dom_document
-    .getElementById('third-level-menu')
-    .getElementsByTagName('a');
-  let response = { options: [], values: [] };
-  for (let i = 0; i < list.length; i++) {
-    let theId = list[i].href.split('#')[1];
-    response.options.push({
-      id: theId,
-      name: list[i].innerHTML.replace('&amp;', '&'),
-    });
-    response.values.push(dom_document.getElementById(theId).innerHTML);
-  }
-  return response;
-};
+import './styles.less';
 
 export default function View(props) {
-  const [data, setData] = React.useState();
-  const html = props.properties['@components'].countryprofile.html;
-
-  React.useEffect(
-    () =>
-      setData(extract_body(html.replaceAll('\n', '').replaceAll('\\"', '"'))),
-    [html],
-  );
+  // const dataJson = JSON.parse(
+  //   props?.properties['@components']?.countryprofile?.html,
+  // );
+  const dataJson = props?.properties['@components']?.countryprofile?.html;
+  const [activePanes, setActivePanes] = React.useState({});
 
   const panes = [];
-  if (data?.options) {
-    data.options.forEach((element, index) => {
+  if (dataJson?.menu) {
+    dataJson.menu.forEach((element, index) => {
       panes.push({
-        menuItem: element.name,
+        menuItem: element,
         render: () => (
           <TabPane>
-            {!!data && (
-              <div
-                dangerouslySetInnerHTML={{ __html: data.values[index] }}
-              ></div>
-            )}
+            <CountryTabPane
+              _index={index}
+              contents={dataJson.content[index]}
+              activePanes={activePanes}
+              setActivePanes={setActivePanes}
+            ></CountryTabPane>
           </TabPane>
         ),
       });
@@ -49,19 +32,53 @@ export default function View(props) {
   }
 
   return (
-    <Tab
-      className="secondary mnu"
-      panes={panes}
-      grid={{ paneWidth: 8, tabWidth: 4 }}
-      menu={{
-        tabular: true,
-        vertical: true,
-        inverted: false,
-        pointing: true,
-        fluid: true,
-        className: 'secondary',
-        tabIndex: 0,
-      }}
-    />
+    <>
+      {dataJson.message_top ? (
+        <div class="eea callout">{dataJson.message_top}</div>
+      ) : null}
+      {dataJson.top_accordeon ? (
+        <div className="top-accordion">
+          {dataJson.top_accordeon.map((accordion, index) => (
+            <Accordion className="secondary">
+              <Accordion.Title
+                role="button"
+                tabIndex={0}
+                active={activePanes['_' + index] || false}
+                onClick={(e) => {
+                  const temp = JSON.parse(JSON.stringify(activePanes));
+                  let val = temp['_' + index] || false;
+                  temp['_' + index] = !val;
+                  setActivePanes(temp);
+                }}
+              >
+                <span className="item-title">{accordion.title}</span>
+                <Icon className="ri-arrow-down-s-line" />
+              </Accordion.Title>
+              <Accordion.Content
+                active={activePanes['_' + index] || false}
+                dangerouslySetInnerHTML={{ __html: accordion.value }}
+              ></Accordion.Content>
+            </Accordion>
+          ))}
+        </div>
+      ) : null}
+      <Tab
+        className="secondary menu"
+        panes={panes}
+        grid={{ paneWidth: 8, tabWidth: 4 }}
+        menu={{
+          tabular: true,
+          vertical: true,
+          inverted: false,
+          pointing: true,
+          fluid: true,
+          className: 'secondary',
+          tabIndex: 0,
+        }}
+      />
+      {dataJson.updated ? (
+        <p>Reported updated until: {dataJson.updated}</p>
+      ) : null}
+    </>
   );
 }

package/src/components/manage/Blocks/CountryProfileDetail/View.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import View from './View';
+
+const mockStore = configureStore();
+
+describe('View', () => {
+  it('should render the component', () => {
+    const properties = {
+      '@components': {
+        countryprofile: {
+          html:
+            '{"menu":[],"content":[],"html":"","updated":"","message_top":"", "top_accordeon":""}',
+        },
+      },
+    };
+    const data = { properties: properties };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <View {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/manage/Blocks/CountryProfileDetail/styles.less

@@ -0,0 +1,59 @@
+.section-countries-regions.section-countries {
+  .secondary.menu > a {
+    text-transform: uppercase;
+  }
+
+  .top-accordion {
+    margin-bottom: 40px;
+  }
+
+  .ui.segment.active.tab > table {
+    margin-top: 0px !important;
+  }
+
+  .ui.segment.active.tab {
+    padding-top: 0px;
+    margin-top: 0px;
+    background-color: #ffffff;
+
+    table {
+      width: 100%;
+      margin-top: 20px !important;
+
+      tr:nth-child(even) {
+        background-color: #f9f9f9;
+      }
+
+      th {
+        padding: 0.5em 1em;
+        border-bottom: 1px solid #d7d7d7;
+        background-color: #f9f9f9;
+        font-weight: bold;
+        text-align: left;
+      }
+
+      td {
+        padding: 0.5em 1em;
+        border-bottom: 1px solid #d7d7d7;
+        text-align: left;
+      }
+
+      th:not(:last-child),
+      td:not(:last-child) {
+        border-right: 1px solid #d7d7d7;
+      }
+
+      td.bb1 {
+        border-bottom: 1px solid #d7d7d7;
+      }
+    }
+  }
+
+  .ui.accordion .title:not(.ui) {
+    padding: 1rem 1rem;
+
+    span.item-title {
+      text-transform: uppercase;
+    }
+  }
+}

package/src/components/manage/Blocks/RASTBlock/RASTMap.jsx

@@ -21,8 +21,10 @@ export default function RASTMap(props) {
   const { path, pathname, activeMenu, skip_items } = props;
   const currentPath = path || pathname;
 
-  const items = props.items;
   let data = skip_items.split(',');
+  const items = props.items.filter(
+    (_item, index) => !data.includes(index.toString()),
+  );
   let currentMenu = activeMenu;
 
   if (activeMenu !== null) {

package/src/components/manage/Blocks/RASTBlock/RASTView.jsx

@@ -11,8 +11,10 @@ function useChildren(location) {
     dispatch(action);
   }, [location, dispatch]);
 
-  const items = useSelector(
-    (state) => state.content.subrequests?.[location]?.data?.items || [],
+  const items = useSelector((state) =>
+    (state.content.subrequests?.[location]?.data?.items || []).filter(
+      (i) => i.review_state === 'published',
+    ),
   );
   return items;
 }

package/src/components/theme/ASTNavigation/ASTAccordion.jsx

@@ -1,10 +1,22 @@
 import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { Accordion, List } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
 import ASTLogoMap from './ASTLogoMap';
 import UASTLogoMap from './UASTLogoMap';
 import cx from 'classnames';
 
+const messages = defineMessages({
+  ast_start_title: {
+    id: 'The Adaptation Support Tool - Getting started',
+    defaultMessage: 'The Adaptation Support Tool - Getting started',
+  },
+  uast_start_title: {
+    id: 'Getting started',
+    defaultMessage: 'Getting started',
+  },
+});
+
 const sortItems = (items) => {
   const sortedItems = items.sort((a, b) => {
     const idA = a['@id'];
@@ -19,7 +31,7 @@ const sortItems = (items) => {
   return sortedItems;
 };
 
-const groupItemsByStep = (object, isAST, isUAST, lang) => {
+const groupItemsByStep = (object, isAST, isUAST, lang, intl) => {
   const grouped = {};
   const items = {};
 
@@ -61,15 +73,15 @@ const groupItemsByStep = (object, isAST, isUAST, lang) => {
     items[key] = grouped[key];
   });
 
+  const astPath = 'knowledge/tools/adaptation-support-tool';
+
   if (Object.keys(items).length !== 0) {
     if (isAST) {
-      items['step-0'][
-        '@id'
-      ] = `/${lang}/knowledge/tools/adaptation-support-tool`;
-      items['step-0'].title = 'The Adaptation Support Tool - Getting started';
+      items['step-0']['@id'] = `/${lang}/${astPath}`;
+      items['step-0'].title = intl.formatMessage(messages.ast_start_title);
     }
     if (isUAST) {
-      items['step-0'].title = 'Getting started';
+      items['step-0'].title = intl.formatMessage(messages.uast_start_title);
     }
   }
   return items;
@@ -77,6 +89,7 @@ const groupItemsByStep = (object, isAST, isUAST, lang) => {
 
 const ASTAccordion = (props) => {
   const history = useHistory();
+  const intl = useIntl();
   const {
     astItems,
     location,
@@ -90,6 +103,7 @@ const ASTAccordion = (props) => {
     isAdaptationSupportTool,
     isUrbanAdaptationSupportTool,
     currentLanguage,
+    intl,
   );
 
   return (

package/src/components/theme/MissionDisclaimer/MissionDisclaimer.jsx

@@ -0,0 +1,24 @@
+const MissionDisclaimer = () => {
+  return (
+    <div className="styled-slate has--style_name--content-box-gray styled">
+      <div className="disclaimer content-box">
+        <div className="content-box-inner">
+          <p>
+            <strong>Disclaimer</strong>
+            <br />
+            The contents and links to third-party items on this Mission webpage
+            are developed by the MIP4Adapt team led by Ricardo, under contract
+            CINEA/2022/OP/0013/SI2.884597 funded by the European Union and do
+            not necessarily reflect those of the European Union, CINEA, or those
+            of the European Environment Agency (EEA) as host of the
+            Climate-ADAPT Platform. Neither the European Union nor CINEA nor the
+            EEA accepts responsibility or liability arising out of or in
+            connection with the information on these pages.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MissionDisclaimer;

package/src/components/theme/Views/MissionFundingCCAView.jsx

@@ -1,13 +1,19 @@
-import { HTMLField, BannerTitle } from '@eeacms/volto-cca-policy/helpers';
-import { Container, Grid } from 'semantic-ui-react';
-import { PortalMessage } from '@eeacms/volto-cca-policy/components';
-import './styles.less';
+import {
+  HTMLField,
+  BannerTitle,
+  MetadataItemList,
+} from '@eeacms/volto-cca-policy/helpers';
+import { Container, Grid, Segment, List } from 'semantic-ui-react';
+import {
+  PortalMessage,
+  MissionDisclaimer,
+} from '@eeacms/volto-cca-policy/components';
 
 function MissiongFundingCCAView(props) {
   const { content } = props;
 
   return (
-    <div className="mission-funding-cca-view">
+    <div className="mission-item-view">
       <BannerTitle
         content={{ ...content, image: '' }}
         data={{
@@ -99,7 +105,7 @@ function MissiongFundingCCAView(props) {
               computer={4}
               className="col-right"
             >
-              <div className="metadata">
+              <Segment className="metadata">
                 {!!content.country && content.country.length > 0 && (
                   <>
                     <h5>Countries where the funding opportunity is offered</h5>
@@ -119,69 +125,32 @@ function MissiongFundingCCAView(props) {
                 {!!content.rast_steps && content.rast_steps.length > 0 && (
                   <>
                     <h5>RAST step(s) of relevance</h5>
-                    <ul>
-                      {content.rast_steps.map((step) => (
-                        <li>{step.title}</li>
+                    <List>
+                      {content.rast_steps.map((step, index) => (
+                        <List.Item key={index}>{step.title}</List.Item>
                       ))}
-                    </ul>
+                    </List>
                   </>
                 )}
                 {!!content.eligible_entities &&
                   content.eligible_entities.length > 0 && (
                     <>
                       <h5>Eligible to receive funding</h5>
-                      <ul>
-                        {content.eligible_entities.map((entity) => (
-                          <li>{entity.title}</li>
-                        ))}
-                      </ul>
+                      <MetadataItemList value={content.eligible_entities} />
                     </>
                   )}
-                {!!content.sectors && content.eligible_entities.length > 0 && (
+                {!!content.sectors && content.sectors.length > 0 && (
                   <>
                     <h5>Adaptation Sectors</h5>
-                    <ul>
-                      {content.sectors.map((sector) => (
-                        <li>{sector.title}</li>
-                      ))}
-                    </ul>
+                    <MetadataItemList value={content.sectors} />
                   </>
                 )}
-              </div>
-            </Grid.Column>
-          </div>
-        </Grid>
-        <Grid columns="12">
-          <div className="row">
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={12}
-              className="col-full"
-            >
-              <div className="styled-slate has--style_name--content-box-gray styled">
-                <div className="disclaimer content-box">
-                  <div className="content-box-inner">
-                    <p>
-                      <strong>Disclaimer</strong>
-                      <br />
-                      The contents and links to third-party items on this
-                      Mission webpage are developed by the MIP4Adapt team led by
-                      Ricardo, under contract CINEA/2022/OP/0013/SI2.884597
-                      funded by the European Union and do not necessarily
-                      reflect those of the European Union, CINEA, or those of
-                      the European Environment Agency (EEA) as host of the
-                      Climate-ADAPT Platform. Neither the European Union nor
-                      CINEA nor the EEA accepts responsibility or liability
-                      arising out of or in connection with the information on
-                      these pages.
-                    </p>
-                  </div>
-                </div>
-              </div>
+              </Segment>
             </Grid.Column>
           </div>
         </Grid>
+
+        <MissionDisclaimer />
       </Container>
     </div>
   );

package/src/components/theme/Views/MissionFundingCCAView.test.jsx

@@ -99,8 +99,6 @@ describe('MissiongFundingCCAView', () => {
         </MemoryRouter>
       </Provider>,
     );
-    expect(
-      container.querySelector('.mission-funding-cca-view'),
-    ).toBeInTheDocument();
+    expect(container.querySelector('.mission-item-view')).toBeInTheDocument();
   });
 });