@eeacms/volto-embed 8.0.0 → 9.0.1

package/src/Blocks/EmbedMaps/View.jsx

@@ -1,14 +1,24 @@
 import React, { useEffect, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { Message } from 'semantic-ui-react';
+import { getContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import Map from '@eeacms/volto-embed/Map/Map';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 
-import { getContent } from '@plone/volto/actions';
+function getMaps(props) {
+  const content = props.mapsContent || {};
+  const maps = content.maps || props.data?.maps || {};
+  return {
+    ...pickMetadata(content),
+    ...maps,
+  };
+}
 
 function View(props) {
+  const { id, getContent, mode } = props;
   const {
-    url,
+    useVisibilitySensor = true,
     with_notes = true,
     with_sources = true,
     with_more_info = true,
@@ -16,32 +26,16 @@ function View(props) {
     with_enlarge = true,
   } = props.data;
 
-  const maps = useMemo(() => {
-    if (props.data.maps) {
-      return props.data.maps;
-    }
-    if (props.mapsContent?.maps) {
-      return {
-        ...props.mapsContent.maps,
-        '@id': props.mapsContent['@id'],
-        title: props.mapsContent['title'],
-        publisher: props.mapsContent['publisher'],
-        geo_coverage: props.mapsContent['geo_coverage'],
-        temporal_coverage: props.mapsContent['temporal_coverage'],
-        other_organisations: props.mapsContent['other_organisations'],
-        data_provenance: props.mapsContent['data_provenance'],
-        figure_note: props.mapsContent['figure_note'],
-      };
-    }
-    return undefined;
-  }, [props.data.maps, props.mapsContent]);
+  const url = flattenToAppURL(props.data.url || '');
+
+  const maps = useMemo(() => getMaps(props), [props]);
 
   useEffect(() => {
-    if (props.data.url && !props.data.maps) {
-      props.getContent(flattenToAppURL(props.data.url), null, props.id);
+    const mapsId = maps['@id'] ? flattenToAppURL(maps['@id']) : undefined;
+    if (mode === 'edit' && url && url !== mapsId) {
+      getContent(url, null, id);
     }
-    /* eslint-disable-next-line */
-  }, [props.data.url]);
+  }, [id, getContent, mode, url, maps]);
 
   if (props.mode === 'edit' && !url) {
     return <Message>Please select a map from block editor.</Message>;
@@ -53,9 +47,10 @@ function View(props) {
 
   return (
     <div className="embed-map">
-      <Map
+      <EmbedMap
         data={{
           ...maps,
+          useVisibilitySensor,
           with_notes,
           with_sources,
           with_more_info,

package/src/Blocks/EmbedMaps/View.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import View from './View';
+import installEmbedMaps from '.';
+
+installEmbedMaps(config);
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+test('renders a view embed map block component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <View
+        id="my-map"
+        data={{
+          '@type': 'embed_maps',
+          with_notes: false,
+          with_sources: false,
+          with_more_info: true,
+          with_share: true,
+          with_enlarge: true,
+          url: '/path/to/map',
+          maps: {
+            '@id': '/path/to/map',
+            title: 'My map',
+            url:
+              'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          },
+          dataprotection: {
+            enabled: false,
+          },
+          useVisibilitySensor: false,
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Blocks/EmbedMaps/index.js

@@ -3,10 +3,10 @@ import EmbedView from './View';
 
 import sliderSVG from '@plone/volto/icons/slider.svg';
 
-const embedConfig = (config) => {
+const applyConfig = (config) => {
   config.blocks.blocksConfig.embed_maps = {
     id: 'embed_maps',
-    title: 'Embed Map',
+    title: 'Embed interactive Map',
     icon: sliderSVG,
     group: 'common',
     edit: EmbedMap,
@@ -19,4 +19,4 @@ const embedConfig = (config) => {
   return config;
 };
 
-export default embedConfig;
+export default applyConfig;

package/src/Blocks/Maps/Edit.jsx

@@ -229,6 +229,7 @@ class Edit extends Component {
             <PrivacyProtection
               data={this.props.data}
               editable={this.props.editable}
+              useVisibilitySensor={this.props.data.useVisibilitySensor ?? true}
             >
               <iframe
                 title={this.props.intl.formatMessage(

package/src/Blocks/Maps/Edit.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import Edit from './Edit';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  SidebarPortal: jest.requireActual(
+    '@plone/volto/components/manage/Sidebar/SidebarPortal',
+  ).default,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    create: {},
+  },
+  connected_data_parameters: {},
+});
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders an edit map block component', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <Edit
+        data={{
+          '@type': 'maps',
+          url:
+            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          dataprotection: {
+            enabled: false,
+          },
+          useVisibilitySensor: false,
+        }}
+        pathname="/news"
+        selected={false}
+        block="1234"
+        index={1}
+        onChangeBlock={() => {}}
+        onSelectBlock={() => {}}
+        onDeleteBlock={() => {}}
+        onFocusPreviousBlock={() => {}}
+        onFocusNextBlock={() => {}}
+        handleKeyDown={() => {}}
+        content={{}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Blocks/Maps/View.jsx

@@ -40,7 +40,11 @@ const View = ({ data, intl, id }) => {
           'full-width': data.align === 'full',
         })}
       >
-        <PrivacyProtection data={data} id={id}>
+        <PrivacyProtection
+          data={data}
+          id={id}
+          useVisibilitySensor={data.useVisibilitySensor}
+        >
           <iframe
             title={intl.formatMessage(messages.EmbededGoogleMaps)}
             src={data.url}

package/src/Blocks/Maps/View.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import View from './View';
+import installEmbedMaps from '.';
+
+installEmbedMaps(config);
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders a view map block component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <View
+        data={{
+          '@type': 'maps',
+          url:
+            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          useVisibilitySensor: false,
+          dataprotection: {
+            enabled: false,
+          },
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/{Map/Map.jsx → EmbedMap/EmbedMap.jsx}

@@ -21,7 +21,7 @@ const messages = defineMessages({
   },
 });
 
-function Map({ data, intl, id, screen }) {
+function EmbedMap({ data, intl, id, screen }) {
   const el = useRef();
   const [mobile, setMobile] = useState(false);
 
@@ -37,6 +37,8 @@ function Map({ data, intl, id, screen }) {
     }
   }, [screen, mobile]);
 
+  if (!data.url) return null;
+
   return (
     <div
       ref={el}
@@ -53,7 +55,12 @@ function Map({ data, intl, id, screen }) {
           'full-width': data.align === 'full',
         })}
       >
-        <PrivacyProtection data={data} id={id} height={data.height}>
+        <PrivacyProtection
+          data={data}
+          id={id}
+          height={data.height}
+          useVisibilitySensor={data.useVisibilitySensor ?? true}
+        >
           <iframe
             title={intl.formatMessage(messages.EmbededGoogleMaps)}
             src={data.url}
@@ -66,14 +73,16 @@ function Map({ data, intl, id, screen }) {
       </div>
       <div className={cx('visualization-toolbar', { mobile })}>
         <div className="left-col">
-          {data.with_notes && <FigureNote note={data.figure_note || []} />}
-          {data.with_sources && <Sources sources={data.sources} />}
+          {data.with_notes && <FigureNote notes={data.figure_note || []} />}
+          {data.with_sources && (
+            <Sources sources={data.data_provenance?.data} />
+          )}
           {data.with_more_info && <MoreInfo href={data['@id']} />}
         </div>
         <div className="right-col">
           {data.with_enlarge && (
             <Enlarge className="enlarge-embed-maps">
-              <Map
+              <EmbedMap
                 data={{
                   ...data,
                   height: '100%',
@@ -98,4 +107,4 @@ function Map({ data, intl, id, screen }) {
 export default compose(
   injectIntl,
   connect((state) => ({ screen: state.screen })),
-)(Map);
+)(EmbedMap);

package/src/EmbedMap/EmbedMap.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import EmbedMap from './EmbedMap';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders map component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <EmbedMap
+        id="my-map"
+        data={{
+          with_notes: false,
+          with_sources: false,
+          with_more_info: true,
+          with_share: true,
+          with_enlarge: true,
+          url:
+            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          useVisibilitySensor: false,
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -87,6 +87,7 @@ const PrivacyProtection = (props) => {
     intl,
     path,
     cookies,
+    useVisibilitySensor = true,
   } = props;
   const {
     enabled = false,
@@ -173,6 +174,7 @@ const PrivacyProtection = (props) => {
           <Placeholder.Image rectangular />
         </Placeholder>
       )}
+      useVisibilitySensor={useVisibilitySensor}
     >
       <div
         className={cx('privacy-protection-wrapper', className)}

package/src/Toolbar/FigureNote.jsx

@@ -38,8 +38,7 @@ export default function FigureNote({ notes = [] }) {
           <button className={cx('trigger-button', { open })}>Note</button>
         </div>
       }
-    >
-      <Popup.Content>{serializeText(notes)}</Popup.Content>
-    </Popup>
+      content={serializeText(notes)}
+    />
   );
 }

package/src/Toolbar/Toolbar.test.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import { Enlarge, FigureNote, MoreInfo, Share, Sources } from '.';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+jest.mock('@plone/volto-slate/editor/render', () => ({
+  __esModule: true,
+  serializeNodes: (nodes) => {
+    return nodes.map((node, index) => {
+      const Tag = node.type;
+      return (
+        <Tag key={`node-${index}`}>
+          {node.children.map((item, index) => (
+            <span key={`item-${index}`}>{item.text}</span>
+          ))}
+        </Tag>
+      );
+    });
+  },
+  serializeNodesToText: (nodes) => {
+    return nodes
+      .reduce((texts, node) => {
+        if (node.children) {
+          node.children.forEach((item) => {
+            texts.push(item.text);
+          });
+        }
+        return texts;
+      }, [])
+      .join('');
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders toolbar components', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <div className="visualization-toolbar">
+        <div className="left-col">
+          <FigureNote
+            notes={[{ type: 'p', children: [{ text: 'This is a note' }] }]}
+          />
+          <Sources sources={[]} />
+          <MoreInfo href={'/path/to/embeded/content'} />
+        </div>
+        <div className="right-col">
+          <Enlarge className="enlarge-embed-maps">
+            <div>Some enlarged content</div>
+          </Enlarge>
+          <Share href="/path/to/embeded/content" />
+        </div>
+      </div>
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/Views/MapView.jsx

@@ -1,11 +1,25 @@
 import React from 'react';
 import { Container } from 'semantic-ui-react';
-import Map from '@eeacms/volto-embed/Map/Map';
+import { hasBlocksData } from '@plone/volto/helpers';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 
 const MapView = (props) => {
   return (
-    <Container>
-      <Map data={props.content.maps} id={props.content['@id']} />
+    <Container id="page-document" className="view-wrapper visualization-view">
+      {hasBlocksData(props.content) ? (
+        <RenderBlocks {...props} />
+      ) : (
+        <EmbedMap
+          data={{
+            ...(props.content.maps || {}),
+            ...pickMetadata(props.content),
+            with_share: true,
+          }}
+          id="map-view"
+        />
+      )}
     </Container>
   );
 };

package/src/Views/MapView.test.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import MapView from './MapView';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/components', () => ({
+  __esModule: true,
+  UniversalLink: ({ children, href }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+config.blocks.blocksConfig = {
+  ...config.blocks.blocksConfig,
+  maps: {
+    id: 'maps',
+    title: 'Maps',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+test('renders map component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    content: {
+      create: {},
+    },
+    connected_data_parameters: {},
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <MapView
+        content={{
+          maps: {
+            '@id': '/path/to/map',
+            with_notes: false,
+            with_sources: false,
+            with_more_info: true,
+            with_share: true,
+            with_enlarge: true,
+            url:
+              'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+            useVisibilitySensor: false,
+          },
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});