@eeacms/volto-embed 2.0.11 → 4.0.0

package/CHANGELOG.md

@@ -4,8 +4,39 @@ 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).
 
+#### [4.0.0](https://github.com/eea/volto-embed/compare/3.0.1...4.0.0)
+
+- Prettier [`fffa1c9`](https://github.com/eea/volto-embed/commit/fffa1c9f42c9dacc7de1fed730e0a4494c04d2f8)
+- Prettier [`f9ca05d`](https://github.com/eea/volto-embed/commit/f9ca05d3c55d204080f8769bd7d556b4d8f0ce21)
+- Breaking changes. Bumped to version 4.0.0 [`eb78abf`](https://github.com/eea/volto-embed/commit/eb78abf98103ee8831814b3df4c441279c586da2)
+- Volto 15.x compatibility: updated react-cookie library [`a480372`](https://github.com/eea/volto-embed/commit/a480372f47e6e34d6f3e14d7b54b345dc83fd328)
+
+#### [3.0.1](https://github.com/eea/volto-embed/compare/3.0.0...3.0.1)
+
+> 11 February 2022
+
+- fix query case [`#20`](https://github.com/eea/volto-embed/pull/20)
+
+#### [3.0.0](https://github.com/eea/volto-embed/compare/3.0.0-beta.0...3.0.0)
+
+> 7 February 2022
+
+- Make this compatible with volto-datablocks@3.x [`#19`](https://github.com/eea/volto-embed/pull/19)
+
+#### [3.0.0-beta.0](https://github.com/eea/volto-embed/compare/2.0.11...3.0.0-beta.0)
+
+> 7 February 2022
+
+- Release 3.0.0-beta.0 [`c9af803`](https://github.com/eea/volto-embed/commit/c9af80319bc89b1a579d14538ac5509e71db813f)
+- Updated cypress [`9112bee`](https://github.com/eea/volto-embed/commit/9112bee538e457e9f19a687c3442d222129eb95c)
+- Update [`c5c1251`](https://github.com/eea/volto-embed/commit/c5c1251a69c76c341c8deb28e0f2ccc940b2411b)
+- Make this compatible with volto-datablocks@3.x [`3457ee9`](https://github.com/eea/volto-embed/commit/3457ee9e3f5c78cf483525a274f03e6941d06f6f)
+
 #### [2.0.11](https://github.com/eea/volto-embed/compare/2.0.10...2.0.11)
 
+> 11 January 2022
+
+- use latest volto-slate [`#17`](https://github.com/eea/volto-embed/pull/17)
 - add cy tests [`#16`](https://github.com/eea/volto-embed/pull/16)
 - improve arcgis map view [`#14`](https://github.com/eea/volto-embed/pull/14)
 - Update package.json [`0ec673a`](https://github.com/eea/volto-embed/commit/0ec673a8178731b8c1e010101caee2a3c9fafaca)

package/cypress/integration/block-basics.js

@@ -24,14 +24,20 @@ describe('Blocks Tests', () => {
         .first()
         .contains('Embed external content');
 
-      cy.get('.field-wrapper-privacy_statement-0-dataprotection p').first().clear().type('Test text for privacy protection');
+      cy.get('.field-wrapper-privacy_statement-0-dataprotection p')
+        .first()
+        .clear()
+        .type('Test text for privacy protection');
       cy.get('.field-wrapper-privacy_cookie_key-1-dataprotection');
       cy.get('.field-wrapper-enabled-2-dataprotection .checkbox').click();
 
       const imageFile = 'cat.jpg';
-      cy.get('.field-wrapper-background_image-3-dataprotection .dropzone-placeholder').attachFile(imageFile);
-      const embed_url = "<div class=\"mapouter\"><div class=\"gmap_canvas\"><iframe width=\"600\" height=\"500\" id=\"gmap_canvas\" src=\"https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"></iframe><a href=\"https://www.embedgooglemap.net/blog/divi-discount-code-elegant-themes-coupon/\"></a><br></div></div>";
-      cy.get('.block.maps input').click().type(embed_url, { force: true })
+      cy.get(
+        '.field-wrapper-background_image-3-dataprotection .dropzone-placeholder',
+      ).attachFile(imageFile);
+      const embed_url =
+        '<div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.embedgooglemap.net/blog/divi-discount-code-elegant-themes-coupon/"></a><br></div></div>';
+      cy.get('.block.maps input').click().type(embed_url, { force: true });
 
       cy.get('.block-editor-text').last().click();
       cy.get('.block-add-button').first().click();
@@ -39,16 +45,20 @@ describe('Blocks Tests', () => {
       cy.get('.ui.basic.icon.button.maps').contains('Maps').click();
 
       cy.get('.align-widget.field-wrapper-align button').first().click();
-      cy.get('.block.maps input').last().click().type(embed_url, { force: true })
-      cy.get('.field-wrapper-background_image-3-dataprotection .dropzone-placeholder').attachFile(imageFile);
-
+      cy.get('.block.maps input')
+        .last()
+        .click()
+        .type(embed_url, { force: true });
+      cy.get(
+        '.field-wrapper-background_image-3-dataprotection .dropzone-placeholder',
+      ).attachFile(imageFile);
 
       // Save
       cy.get('#toolbar-save').click();
       cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
 
       // then the page view should contain our changes
-      cy.get('.ui.loader');
-      });
+      // cy.get('.ui.loader');
+    });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "2.0.11",
+  "version": "4.0.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/Iframe/EditIframe.jsx

@@ -16,6 +16,7 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import mapsBlockSVG from '@plone/volto/components/manage/Blocks/Maps/block-maps.svg';
 import schema from './schema';
 import { addPrivacyProtectionToSchema } from '../PrivacyProtection';
+import { PrivacyProtection } from '../PrivacyProtection';
 
 const messages = defineMessages({
   MapsBlockInputPlaceholder: {
@@ -182,15 +183,20 @@ class Edit extends Component {
               'full-width': this.props.data.align === 'full',
             })}
           >
-            <iframe
-              title={this.props.intl.formatMessage(
-                messages.GoogleMapsEmbeddedBlock,
-              )}
-              src={this.props.data.url}
-              className="google-map"
-              frameBorder="0"
-              allowFullScreen
-            />
+            <PrivacyProtection
+              data={this.props.data}
+              editable={this.props.editable}
+            >
+              <iframe
+                title={this.props.intl.formatMessage(
+                  messages.GoogleMapsEmbeddedBlock,
+                )}
+                src={this.props.data.url}
+                className="google-map"
+                frameBorder="0"
+                allowFullScreen
+              />
+            </PrivacyProtection>
           </div>
         ) : (
           <Message>

package/src/Iframe/ViewIframe.jsx

@@ -22,7 +22,7 @@ const messages = defineMessages({
  * @extends Component
  */
 
-const View = ({ data, intl }) => {
+const View = ({ data, intl, id }) => {
   return (
     <div
       className={cx(
@@ -42,7 +42,7 @@ const View = ({ data, intl }) => {
         })}
         style={{ height: '100%' }}
       >
-        <PrivacyProtection data={data}>
+        <PrivacyProtection data={data} id={id}>
           <iframe
             title={intl.formatMessage(messages.EmbededGoogleMaps)}
             src={data.url}

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
+import { compose } from 'redux';
 import { useSelector } from 'react-redux';
 import VisibilitySensor from 'react-visibility-sensor';
 import { Placeholder, Dimmer, Loader } from 'semantic-ui-react';
-import cookie from 'react-cookie';
-
+import { withCookies } from 'react-cookie';
 //import { find, without } from 'lodash';
 import { serializeNodes } from 'volto-slate/editor/render';
 import { Button, Checkbox } from 'semantic-ui-react';
@@ -11,14 +11,15 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { toast } from 'react-toastify';
 import config from '@plone/volto/registry';
-import '../css/embed-styles.css';
-import { createImageUrl } from './helpers';
-
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Toast } from '@plone/volto/components';
 import { getConnectedDataParametersForContext } from '@eeacms/volto-datablocks/helpers';
+
+import { createImageUrl } from './helpers';
 import { ProtectionSchema } from './schema';
 
+import './styles.less';
+
 const messages = defineMessages({
   success: {
     id: 'Success',
@@ -37,29 +38,29 @@ const getExpDays = () =>
     ? config.settings.embedCookieExpirationDays
     : 90;
 
-function saveCookie(domain_key) {
+function saveCookie(domain_key, cookies) {
   const date = new Date();
   date.setDate(date.getDate() + getExpDays());
 
-  cookie.save(key(domain_key), 'true', {
+  cookies.set(key(domain_key), 'true', {
     path: '/',
     expires: date,
   });
 }
 
-function canShow(domain_key) {
-  return cookie.load(key(domain_key)) === 'true';
+function canShow(domain_key, cookies) {
+  return cookies.get(key(domain_key)) === 'true';
 }
 
-const cookieExist = (domain_key) => cookie.load(key(domain_key));
+const cookieExist = (domain_key, cookies) => cookies.get(key(domain_key));
 
-const CookieWatcher = (cookie, pollingRate = 250) => {
+const CookieWatcher = (domain_key, cookies, pollingRate = 250) => {
   // state for cookie existence
-  const [exist, setExist] = useState(cookieExist(cookie));
+  const [exist, setExist] = useState(cookieExist(domain_key, cookies));
 
   React.useEffect(() => {
     const interval = setInterval(
-      () => setExist(cookieExist(cookie)),
+      () => setExist(cookieExist(domain_key, cookies)),
       pollingRate,
     );
     return () => clearInterval(interval);
@@ -68,179 +69,189 @@ const CookieWatcher = (cookie, pollingRate = 250) => {
   return exist;
 };
 
-export default injectIntl(
-  ({
-    children,
-    data = {},
-    id,
-    isEditMode,
-    onChangeBlock,
-    intl,
-    path,
-    properties,
-    ...rest
-  }) => {
-    const { dataprotection = {}, height } = data;
-    const { background_image: bgImg, enabled = false } = dataprotection;
-    const [image, setImage] = React.useState(null);
-    const [visible, setVisibility] = useState(false);
-    const defaultShow = canShow(dataprotection.privacy_cookie_key);
-    const [show, setShow] = useState(defaultShow);
-    const [remember, setRemember] = useState(
-      cookieExist(dataprotection.privacy_cookie_key) ? defaultShow : true,
-    );
-    const dispatch = useDispatch();
-    const checkExistance = CookieWatcher(dataprotection.privacy_cookie_key);
-    const queryParam = useSelector((state) => {
-      return {
-        connected_data_parameters: getConnectedDataParametersForContext(
-          state?.connected_data_parameters,
-          state.router?.location?.pathname,
-        ),
-      };
-    });
-    const param = queryParam
-      ? queryParam.connected_data_parameters?.[0]?.query?.[0]?.v?.[0] ||
-        queryParam.connected_data_parameters?.[0]?.v?.[0]
-      : null;
-
-    // create a url with params
-    const url =
-      param && data.url
-        ? decodeURIComponent(data.url).replace('<<NUTS_CODE>>', param)
-        : data.url;
-
-    const styles = {
-      height: `${height}px`,
-      position: 'relative',
-    };
-    React.useEffect(() => {
-      if (bgImg) {
-        setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
-      }
-    }, [bgImg]);
-
-    //Effect hook for polling the cookie_key
-    React.useEffect(
-      () => {
-        if (!isEditMode && defaultShow) {
-          setShow(true);
-        }
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [checkExistance],
+const getFilteredURL = (url, connected_data_parameters = []) => {
+  if (!connected_data_parameters?.length) return url;
+  let decodedURL = decodeURIComponent(url);
+  const queries = decodedURL.match(/(?<=(<<))(.*?)(?=(>>))/g);
+  if (!queries?.length) return url;
+  const keys = connected_data_parameters.map((param) => param.i);
+  for (let poz in queries) {
+    const key = queries[poz];
+    const paramPoz = keys.indexOf(key);
+    if (paramPoz > -1) {
+      decodedURL = decodedURL.replace(
+        `<<${key}>>`,
+        connected_data_parameters[paramPoz].v[0],
+      );
+
+      continue;
+    }
+  }
+  return decodedURL;
+};
+
+const PrivacyProtection = (props) => {
+  const { children, data = {}, id, editable, intl, path, cookies } = props;
+  const {
+    enabled = false,
+    privacy_statement,
+    background_image: bgImg,
+    privacy_cookie_key = 'esri-maps',
+  } = data.dataprotection || {};
+
+  const [image, setImage] = React.useState(null);
+  const [visible, setVisibility] = useState(false);
+  const defaultShow = canShow(privacy_cookie_key, cookies);
+  const [show, setShow] = useState(defaultShow);
+  const [remember, setRemember] = useState(
+    cookieExist(privacy_cookie_key, cookies) ? defaultShow : true,
+  );
+  const dispatch = useDispatch();
+  const checkExistance = CookieWatcher(privacy_cookie_key, cookies);
+  const connected_data_parameters = useSelector((state) => {
+    return getConnectedDataParametersForContext(
+      state?.connected_data_parameters,
+      state.router?.location?.pathname,
     );
+  });
+  const url = getFilteredURL(data.url, connected_data_parameters);
 
-    //screenshot api
-    React.useEffect(() => {
-      if (enabled && !bgImg && !show) {
-        fetch(
-          `${getBaseUrl(
-            '',
-          )}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${encodeURIComponent(
-            url,
-          )}&w=1920&waitfor=4000`,
-        )
-          .then((e) => e.blob())
-          .then((blob) => {
-            setImage(URL.createObjectURL(blob));
-            if (isEditMode) {
-              toast.success(
-                <Toast
-                  success
-                  title={intl.formatMessage(messages.success)}
-                  content={intl.formatMessage(messages.image)}
-                />,
-              );
-            }
-          });
+  React.useEffect(() => {
+    if (bgImg) {
+      setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
+    }
+  }, [bgImg]);
+
+  //Effect hook for polling the cookie_key
+  React.useEffect(
+    () => {
+      if (!editable && defaultShow) {
+        setShow(true);
       }
-    }, [enabled, url, path, dispatch, bgImg, show, intl, isEditMode]);
-
-    return (
-      <VisibilitySensor
-        onChange={(isVisible) => {
-          !visible && isVisible && setVisibility(true);
-        }}
-        partialVisibility={true}
-        offset={{ bottom: 200 }}
-      >
-        {visible ? (
-          <div style={height ? styles : {}}>
-            {!dataprotection.enabled || show ? (
-              children
-            ) : !image ? (
-              <Dimmer active>
-                <Loader />
-              </Dimmer>
-            ) : (
-              <div
-                className="privacy-protection"
-                {...rest}
-                style={
-                  image
-                    ? {
-                        backgroundImage: `url(${image})`,
-                        backgroundRepeat: 'no-repeat',
-                        backgroundSize: 'cover',
-                        backgroundPosition: 'center -70px',
-                      }
-                    : {}
-                }
-              >
-                <div className="overlay">
-                  <div className="wrapped">
-                    <div className="privacy-button">
-                      <Button
-                        primary
-                        onClick={() => {
-                          setShow(true);
-                          if (remember) {
-                            saveCookie(dataprotection.privacy_cookie_key);
-                          }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [checkExistance],
+  );
+
+  //screenshot api
+  React.useEffect(() => {
+    if (enabled && !bgImg && !show) {
+      fetch(
+        `${getBaseUrl(
+          '',
+        )}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${encodeURIComponent(
+          url,
+        )}&w=1920&waitfor=4000`,
+      )
+        .then((e) => e.blob())
+        .then((blob) => {
+          setImage(URL.createObjectURL(blob));
+          if (editable) {
+            toast.success(
+              <Toast
+                success
+                title={intl.formatMessage(messages.success)}
+                content={intl.formatMessage(messages.image)}
+              />,
+            );
+          }
+        })
+        .catch(() => {
+          if (__DEVELOPMENT__) {
+            /* eslint-disable-next-line */
+            console.log('Please enable your VPN!');
+          }
+        });
+    }
+  }, [enabled, url, path, dispatch, bgImg, show, intl, editable]);
+
+  return (
+    <VisibilitySensor
+      onChange={(isVisible) => {
+        !visible && isVisible && setVisibility(true);
+      }}
+      partialVisibility={true}
+      offset={{ bottom: 200 }}
+    >
+      {visible ? (
+        <div
+          className="privacy-protection-wrapper"
+          style={{ position: 'relative', minHeight: '200px' }}
+        >
+          {!enabled || show ? (
+            children
+          ) : !__DEVELOPMENT__ && !image ? (
+            <Dimmer active>
+              <Loader />
+            </Dimmer>
+          ) : (
+            <div
+              className="privacy-protection"
+              style={
+                image
+                  ? {
+                      backgroundImage: `url(${image})`,
+                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center -70px',
+                    }
+                  : {}
+              }
+            >
+              <div className="overlay">
+                <div className="wrapped">
+                  <div className="privacy-button">
+                    <Button
+                      primary
+                      onClick={() => {
+                        setShow(true);
+                        if (remember) {
+                          saveCookie(privacy_cookie_key, cookies);
+                        }
+                      }}
+                    >
+                      Show external content
+                    </Button>
+                  </div>
+
+                  {!editable && (
+                    <div className="privacy-toggle">
+                      <Checkbox
+                        toggle
+                        label="Remember my choice"
+                        id={`remember-choice-${id}`}
+                        onChange={(ev, { checked }) => {
+                          setRemember(checked);
                         }}
-                      >
-                        Show external content
-                      </Button>
+                        checked={remember}
+                      />
                     </div>
+                  )}
 
-                    {!isEditMode && (
-                      <div className="privacy-toggle">
-                        <Checkbox
-                          toggle
-                          label="Remember my choice"
-                          id={`remember-choice-${id}`}
-                          onChange={(ev, { checked }) => {
-                            setRemember(checked);
-                          }}
-                          checked={remember}
-                        />
-                      </div>
+                  <p className="discreet">
+                    Your choice will be saved in a cookie managed by{' '}
+                    {config.settings.ownDomain || '.eea.europa.eu'} that will
+                    expire in {getExpDays()} days.
+                  </p>
+                  <p className="discreet">
+                    {serializeNodes(
+                      privacy_statement ||
+                        ProtectionSchema().properties.privacy_statement
+                          .defaultValue,
                     )}
-
-                    <p className="discreet">
-                      Your choice will be saved in a cookie managed by{' '}
-                      {config.settings.ownDomain || '.eea.europa.eu'} that will
-                      expire in {getExpDays()} days.
-                    </p>
-                    <p className="discreet">
-                      {serializeNodes(
-                        dataprotection.privacy_statement ||
-                          ProtectionSchema().properties.privacy_statement
-                            .defaultValue,
-                      )}
-                    </p>
-                  </div>
+                  </p>
                 </div>
               </div>
-            )}
-          </div>
-        ) : (
-          <Placeholder style={{ height: '100%', width: '100%' }}>
-            <Placeholder.Image rectangular />
-          </Placeholder>
-        )}
-      </VisibilitySensor>
-    );
-  },
-);
+            </div>
+          )}
+        </div>
+      ) : (
+        <Placeholder style={{ height: '100%', width: '100%' }}>
+          <Placeholder.Image rectangular />
+        </Placeholder>
+      )}
+    </VisibilitySensor>
+  );
+};
+
+export default compose(injectIntl, withCookies)(PrivacyProtection);

package/src/{css/embed-styles.css → PrivacyProtection/styles.less}

@@ -1,3 +1,13 @@
+.privacy-protection-wrapper {
+  .ui.dimmer {
+    z-index: 9;
+
+    .ui.loader {
+      padding: 0;
+    }
+  }
+}
+
 .privacy-protection {
   display: flex;
   height: 100%;
@@ -8,7 +18,7 @@
 }
 
 .privacy-button {
-  margin-top: 2rem;
+  margin-top: 0.5rem;
 }
 
 .privacy-toggle {
@@ -16,17 +26,17 @@
 }
 
 .wrapped {
-  position: absolute;
-  top: 50%;
-  left: 50%;
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
   width: 300px;
   padding: 1.4rem;
   margin: 0 auto;
   background: white;
   border-radius: 5px;
-  opacity: 0.8;
-  -ms-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  opacity: 1;
+  // -ms-transform: translate(-50%, -50%);
+  // transform: translate(-50%, -50%);
 }
 
 .discreet,