@eeacms/volto-embed 3.0.1 → 4.0.0

package/CHANGELOG.md

@@ -4,9 +4,18 @@ 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)
 
-- fix query case [`a4dbd50`](https://github.com/eea/volto-embed/commit/a4dbd50ca703efe31dd8a9deb386f668581aa136)
+> 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)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "3.0.1",
+  "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';
@@ -38,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);
@@ -90,175 +90,168 @@ const getFilteredURL = (url, connected_data_parameters = []) => {
   return decodedURL;
 };
 
-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 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 dispatch = useDispatch();
-    const checkExistance = CookieWatcher(dataprotection.privacy_cookie_key);
-    const connected_data_parameters = useSelector((state) => {
-      return getConnectedDataParametersForContext(
-        state?.connected_data_parameters,
-        state.router?.location?.pathname,
-      );
-    });
+  });
+  const url = getFilteredURL(data.url, connected_data_parameters);
 
-    const url = getFilteredURL(data.url, connected_data_parameters);
+  React.useEffect(() => {
+    if (bgImg) {
+      setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
+    }
+  }, [bgImg]);
 
-    const styles = {
-      minHeight: `${height || 200}px`,
-      position: 'relative',
-    };
-    React.useEffect(() => {
-      if (bgImg) {
-        setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
+  //Effect hook for polling the cookie_key
+  React.useEffect(
+    () => {
+      if (!editable && defaultShow) {
+        setShow(true);
       }
-    }, [bgImg]);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [checkExistance],
+  );
 
-    //Effect hook for polling the cookie_key
-    React.useEffect(
-      () => {
-        if (!isEditMode && defaultShow) {
-          setShow(true);
-        }
-      },
-      // 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]);
 
-    //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)}
-                />,
-              );
-            }
-          })
-          .catch(() => {
-            if (__DEVELOPMENT__) {
-              /* eslint-disable-next-line */
-              console.log('Please enable your VPN!');
-            }
-          });
-      }
-    }, [enabled, url, path, dispatch, bgImg, show, intl, isEditMode]);
+  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>
 
-    return (
-      <VisibilitySensor
-        onChange={(isVisible) => {
-          !visible && isVisible && setVisibility(true);
-        }}
-        partialVisibility={true}
-        offset={{ bottom: 200 }}
-      >
-        {visible ? (
-          <div className="privacy-protection-wrapper" style={styles}>
-            {!dataprotection.enabled || show ? (
-              children
-            ) : !__DEVELOPMENT__ && !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);
-                          }
+                  {!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/PrivacyProtection/styles.less

@@ -18,7 +18,7 @@
 }
 
 .privacy-button {
-  margin-top: 2rem;
+  margin-top: 0.5rem;
 }
 
 .privacy-toggle {