@shopgate/engage 7.30.0-alpha.1 → 7.30.0-alpha.11

package/styles/theme/hooks/useTheme.js

@@ -1,4 +1,9 @@
-import{useContext}from'react';import{ThemeContext}from"../providers/ThemeProvider";// eslint-disable-next-line valid-jsdoc
+import { useContext } from 'react';
+import { ThemeContext } from "../providers/ThemeProvider";
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Returns the theme object.
- */var useTheme=function useTheme(){return useContext(ThemeContext);};export default useTheme;
+ */
+const useTheme = () => useContext(ThemeContext);
+export default useTheme;

package/styles/theme/index.js

@@ -1 +1,3 @@
-export{default as ThemeProvider}from"./providers/ThemeProvider";export{createTheme}from"./createTheme";export{useActiveBreakpoint,useMediaQuery,useResponsiveValue,useTheme}from"./hooks";
+export { default as ThemeProvider } from "./providers/ThemeProvider";
+export { createTheme } from "./createTheme";
+export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme } from "./hooks";

package/styles/theme/providers/ActiveBreakpointProvider.js

@@ -1,13 +1,66 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{createContext,useEffect,useState}from'react';import PropTypes from'prop-types';import{useTheme}from'@shopgate/engage/styles';/**
+import "core-js/modules/es.string.replace.js";
+import React, { createContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@shopgate/engage/styles';
+
+/**
  * @typedef {import('..').Breakpoint} Breakpoint
- */ /** @type {import('react').Context<Breakpoint>} */export var ActiveBreakpointContext=createContext(undefined);/**
+ */
+
+/** @type {import('react').Context<Breakpoint>} */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ActiveBreakpointContext = /*#__PURE__*/createContext(undefined);
+
+/**
  * @param {Object} props The component props
  * @param {React.ReactNode} props.children The children to render within the provider
  * @returns {JSX.Element} The ActiveBreakpointProvider component
- */var ActiveBreakpointProvider=function ActiveBreakpointProvider(_ref){var children=_ref.children;var theme=useTheme();// ['xl', 'lg', ..., 'xs']
-var breakpoints=[].concat(theme.breakpoints.keys).reverse();/**
+ */
+const ActiveBreakpointProvider = ({
+  children
+}) => {
+  const theme = useTheme();
+
+  // ['xl', 'lg', ..., 'xs']
+  const breakpoints = [].concat(theme.breakpoints.keys).reverse();
+
+  /**
    * Retrieve the initial breakpoint based on the current window size.
    * @returns {Breakpoint|undefined} The initial breakpoint based on the current window size.
-   */var getInitialBreakpoint=function getInitialBreakpoint(){if(typeof window==='undefined')return undefined;return breakpoints.find(function(bp){return window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m,'')).matches;});};/** @type {[Breakpoint, React.Dispatch<React.SetStateAction<Breakpoint>>]} */var _useState=useState(getInitialBreakpoint),_useState2=_slicedToArray(_useState,2),active=_useState2[0],setActive=_useState2[1];useEffect(function(){if(typeof window==='undefined')return undefined;var queries=breakpoints.map(function(bp){return{bp:bp,mql:window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m,''))};});/**
+   */
+  const getInitialBreakpoint = () => {
+    if (typeof window === 'undefined') return undefined;
+    return breakpoints.find(bp => window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m, '')).matches);
+  };
+
+  /** @type {[Breakpoint, React.Dispatch<React.SetStateAction<Breakpoint>>]} */
+  const [active, setActive] = useState(getInitialBreakpoint);
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const queries = breakpoints.map(bp => ({
+      bp,
+      mql: window.matchMedia(theme.breakpoints.up(bp).replace(/^@media( ?)/m, ''))
+    }));
+
+    /**
      * Updates the active breakpoint based on the current media query matches.
-     */var update=function update(){var matched=queries.find(function(_ref2){var mql=_ref2.mql;return mql.matches;});setActive(matched===null||matched===void 0?void 0:matched.bp);};queries.forEach(function(_ref3){var mql=_ref3.mql;return mql.addEventListener('change',update);});return function(){return queries.forEach(function(_ref4){var mql=_ref4.mql;return mql.removeEventListener('change',update);});};},[breakpoints,theme]);return React.createElement(ActiveBreakpointContext.Provider,{value:active},children);};export default ActiveBreakpointProvider;
+     */
+    const update = () => {
+      const matched = queries.find(({
+        mql
+      }) => mql.matches);
+      setActive(matched?.bp);
+    };
+    queries.forEach(({
+      mql
+    }) => mql.addEventListener('change', update));
+    return () => queries.forEach(({
+      mql
+    }) => mql.removeEventListener('change', update));
+  }, [breakpoints, theme]);
+  return /*#__PURE__*/_jsx(ActiveBreakpointContext.Provider, {
+    value: active,
+    children: children
+  });
+};
+export default ActiveBreakpointProvider;

package/styles/theme/providers/ThemeProvider.js

@@ -1,7 +1,27 @@
-import React,{createContext,memo}from'react';import PropTypes from'prop-types';import ActiveBreakpointProvider from"./ActiveBreakpointProvider";/** @typedef {import('../index').Theme} Theme */ /** @type {import('react').Context<Theme>} */export var ThemeContext=createContext();/**
+import React, { createContext, memo } from 'react';
+import PropTypes from 'prop-types';
+import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
+
+/** @typedef {import('../index').Theme} Theme */
+
+/** @type {import('react').Context<Theme>} */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ThemeContext = /*#__PURE__*/createContext();
+
+/**
  * The ThemeProvider component provides the theme context to its children.
  * @param {Object} props The component props
  * @param {Theme} props.theme The theme object to provide
  * @param {React.ReactNode} props.children The children to render within the provider
  * @returns {JSX.Element} The ThemeProvider component
- */var ThemeProvider=function ThemeProvider(_ref){var children=_ref.children,theme=_ref.theme;return React.createElement(ThemeContext.Provider,{value:theme},React.createElement(ActiveBreakpointProvider,null,children));};export default memo(ThemeProvider);
+ */
+const ThemeProvider = ({
+  children,
+  theme
+}) => /*#__PURE__*/_jsx(ThemeContext.Provider, {
+  value: theme,
+  children: /*#__PURE__*/_jsx(ActiveBreakpointProvider, {
+    children: children
+  })
+});
+export default /*#__PURE__*/memo(ThemeProvider);

package/styles/tss/index.js

@@ -1,3 +1,21 @@
-import createCache from'@emotion/cache';import{createMakeAndWithStyles,createTss}from'tss-react';import{useTheme}from'@shopgate/engage/styles';export{GlobalStyles,keyframes}from'tss-react';export var emotionCache=createCache({// All tss-react styles will be prefixed with `.tss-*` instead of `.css-*`
-key:'tss'});var _createTss=createTss({useContext:useTheme}),tss=_createTss.tss;// Create makeStyles and withStyles functions for tss-react package
-export{tss};var _createMakeAndWithSty=createMakeAndWithStyles({useTheme:useTheme}),makeStyles=_createMakeAndWithSty.makeStyles,withStyles=_createMakeAndWithSty.withStyles;export{makeStyles,withStyles};
+import createCache from '@emotion/cache';
+import { createMakeAndWithStyles, createTss } from 'tss-react';
+import { useTheme } from '@shopgate/engage/styles';
+export { GlobalStyles, keyframes } from 'tss-react';
+export const emotionCache = createCache({
+  // All tss-react styles will be prefixed with `.tss-*` instead of `.css-*`
+  key: 'tss'
+});
+export const {
+  tss
+} = createTss({
+  useContext: useTheme
+});
+
+// Create makeStyles and withStyles functions for tss-react package
+export const {
+  makeStyles,
+  withStyles
+} = createMakeAndWithStyles({
+  useTheme
+});

package/tracking/action-creators/cookieConsent.js

@@ -1,10 +1,28 @@
-import{appConfig}from'@shopgate/engage';import{UPDATE_COOKIE_CONSENT,COOKIE_CONSENT_HANDLED,HIDE_COOKIE_CONSENT_MODAL,SHOW_COOKIE_CONSENT_MODAL}from"../constants";var _appConfig$cookieCons=appConfig.cookieConsent,_appConfig$cookieCons2=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons,showComfortCookiesToggle=_appConfig$cookieCons2.showComfortCookiesToggle;/**
+import { appConfig } from '@shopgate/engage';
+import { UPDATE_COOKIE_CONSENT, COOKIE_CONSENT_HANDLED, HIDE_COOKIE_CONSENT_MODAL, SHOW_COOKIE_CONSENT_MODAL } from "../constants";
+const {
+  cookieConsent: {
+    showComfortCookiesToggle
+  } = {}
+} = appConfig;
+
+/**
  * action to be dispatched when the cookie consent modal should be shown
  * @returns {Function}
- */export var showCookieConsentModal=function showCookieConsentModal(){return{type:SHOW_COOKIE_CONSENT_MODAL};};/**
+ */
+export const showCookieConsentModal = () => ({
+  type: SHOW_COOKIE_CONSENT_MODAL
+});
+
+/**
  * action to be dispatched when the cookie consent modal should be hidden
  * @returns {Function}
- */export var hideCookieConsentModal=function hideCookieConsentModal(){return{type:HIDE_COOKIE_CONSENT_MODAL};};/**
+ */
+export const hideCookieConsentModal = () => ({
+  type: HIDE_COOKIE_CONSENT_MODAL
+});
+
+/**
  * action to be dispatched when the user accepted the selected cookies in the custom modal
  * @param {Object} params Action params
  * @param {boolean} [params.comfortCookiesAccepted=false] whether this cookie type was accepted
@@ -12,7 +30,17 @@ import{appConfig}from'@shopgate/engage';import{UPDATE_COOKIE_CONSENT,COOKIE_CONS
  * @param {boolean} [params.statisticsCookiesAccepted=false] whether this cookie type was accepted
  * by user
  * @returns {Function}
- */export var updateCookieConsent=function updateCookieConsent(_ref){var _ref$comfortCookiesAc=_ref.comfortCookiesAccepted,comfortCookiesAccepted=_ref$comfortCookiesAc===void 0?false:_ref$comfortCookiesAc,_ref$statisticsCookie=_ref.statisticsCookiesAccepted,statisticsCookiesAccepted=_ref$statisticsCookie===void 0?false:_ref$statisticsCookie;return{type:UPDATE_COOKIE_CONSENT,comfortCookiesAccepted:showComfortCookiesToggle===true?comfortCookiesAccepted:true,statisticsCookiesAccepted:statisticsCookiesAccepted};};/**
+ */
+export const updateCookieConsent = ({
+  comfortCookiesAccepted = false,
+  statisticsCookiesAccepted = false
+}) => ({
+  type: UPDATE_COOKIE_CONSENT,
+  comfortCookiesAccepted: showComfortCookiesToggle === true ? comfortCookiesAccepted : true,
+  statisticsCookiesAccepted
+});
+
+/**
  * action to be dispatched when the cookies have been handled either by user or by merchant
  * and native modal should be triggered for setting the permission
  * @param {Object} params Action params
@@ -21,4 +49,12 @@ import{appConfig}from'@shopgate/engage';import{UPDATE_COOKIE_CONSENT,COOKIE_CONS
  * @param {boolean} [params.statisticsCookiesAccepted=false] whether this cookie type was accepted
  * by user
  * @returns {Function}
- */export var handleCookieConsent=function handleCookieConsent(_ref2){var _ref2$comfortCookiesA=_ref2.comfortCookiesAccepted,comfortCookiesAccepted=_ref2$comfortCookiesA===void 0?false:_ref2$comfortCookiesA,_ref2$statisticsCooki=_ref2.statisticsCookiesAccepted,statisticsCookiesAccepted=_ref2$statisticsCooki===void 0?false:_ref2$statisticsCooki;return{type:COOKIE_CONSENT_HANDLED,comfortCookiesAccepted:comfortCookiesAccepted,statisticsCookiesAccepted:statisticsCookiesAccepted};};
+ */
+export const handleCookieConsent = ({
+  comfortCookiesAccepted = false,
+  statisticsCookiesAccepted = false
+}) => ({
+  type: COOKIE_CONSENT_HANDLED,
+  comfortCookiesAccepted,
+  statisticsCookiesAccepted
+});

package/tracking/action-creators/index.js

@@ -1 +1 @@
-export*from"./cookieConsent";
+export * from "./cookieConsent";

package/tracking/actions/cookieConsent.js

@@ -1,4 +1,10 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{historyPush,grantAppTrackingTransparencyPermission}from'@shopgate/engage/core/actions';import{softOptInSelected}from'@shopgate/engage/core/action-creators';import{updateCookieConsent,hideCookieConsentModal}from"../action-creators";import{PRIVACY_SETTINGS_PATTERN}from"../constants";import{getCookieConsentTrackingMeta,getIsCookieConsentModalVisible,getIsCookieConsentHandled}from"../selectors/cookieConsent";/**
+import { historyPush, grantAppTrackingTransparencyPermission } from '@shopgate/engage/core/actions';
+import { softOptInSelected } from '@shopgate/engage/core/action-creators';
+import { updateCookieConsent, hideCookieConsentModal } from "../action-creators";
+import { PRIVACY_SETTINGS_PATTERN } from "../constants";
+import { getCookieConsentTrackingMeta, getIsCookieConsentModalVisible, getIsCookieConsentHandled } from "../selectors/cookieConsent";
+
+/**
  * Broadcasts updates of the cookie consent states and dispatches related tracking events.
  * @param {Object} update Updated cookie consent states
  * @param {boolean} update.comfortCookiesAccepted Whether comfort cookies
@@ -6,15 +12,56 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGenera
  * @param {boolean} update.statisticsCookiesAccepted Whether statistics cookies
  * are accepted.
  * @returns {Function}
- */var updateCookieConsentLocal=function updateCookieConsentLocal(update){return function(dispatch,getState){var comfortCookiesAccepted=update.comfortCookiesAccepted,statisticsCookiesAccepted=update.statisticsCookiesAccepted;var state=getState();// Whether the update was triggered by a button from within the modal
-var updateFromModal=getIsCookieConsentModalVisible(state);// Whether the cookie consent was already handled when the update came in
-var cookieConsentHandled=getIsCookieConsentHandled(state);if(!cookieConsentHandled){// Prepare tracking events when cookie consent wasn't handled yet
-var meta=getCookieConsentTrackingMeta(state,{allowComfort:comfortCookiesAccepted,allowStatistics:statisticsCookiesAccepted});var selection='manage';if(updateFromModal){selection=comfortCookiesAccepted&&statisticsCookiesAccepted?'approvedAll':'deniedAll';}dispatch(softOptInSelected({selection:selection,meta:meta}));}// Broadcast the actual state update
-dispatch(updateCookieConsent(update));};};/**
+ */
+const updateCookieConsentLocal = update => (dispatch, getState) => {
+  const {
+    comfortCookiesAccepted,
+    statisticsCookiesAccepted
+  } = update;
+  const state = getState();
+
+  // Whether the update was triggered by a button from within the modal
+  const updateFromModal = getIsCookieConsentModalVisible(state);
+  // Whether the cookie consent was already handled when the update came in
+  const cookieConsentHandled = getIsCookieConsentHandled(state);
+  if (!cookieConsentHandled) {
+    // Prepare tracking events when cookie consent wasn't handled yet
+    const meta = getCookieConsentTrackingMeta(state, {
+      allowComfort: comfortCookiesAccepted,
+      allowStatistics: statisticsCookiesAccepted
+    });
+    let selection = 'manage';
+    if (updateFromModal) {
+      selection = comfortCookiesAccepted && statisticsCookiesAccepted ? 'approvedAll' : 'deniedAll';
+    }
+    dispatch(softOptInSelected({
+      selection,
+      meta
+    }));
+  }
+
+  // Broadcast the actual state update
+  dispatch(updateCookieConsent(update));
+};
+
+/**
  * action to be dispatched when the user accepted all cookies in the custom modal
  * and native modal should be triggered for setting the permission
  * @returns {Function}
- */export var acceptAllCookies=function acceptAllCookies(){return(/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(dispatch,getState){var meta;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:meta=getCookieConsentTrackingMeta(getState());_context.next=3;return dispatch(grantAppTrackingTransparencyPermission({meta:meta}));case 3:dispatch(updateCookieConsentLocal({comfortCookiesAccepted:true,statisticsCookiesAccepted:true}));dispatch(hideCookieConsentModal());case 5:case"end":return _context.stop();}},_callee);}));return function(_x,_x2){return _ref.apply(this,arguments);};}());};/**
+ */
+export const acceptAllCookies = () => async (dispatch, getState) => {
+  const meta = getCookieConsentTrackingMeta(getState());
+  await dispatch(grantAppTrackingTransparencyPermission({
+    meta
+  }));
+  dispatch(updateCookieConsentLocal({
+    comfortCookiesAccepted: true,
+    statisticsCookiesAccepted: true
+  }));
+  dispatch(hideCookieConsentModal());
+};
+
+/**
  * action to be dispatched when the user accepted the selected cookies in the custom modal
  * and native modal should be triggered for setting the permission
  * @param {Object} params Action params
@@ -23,11 +70,43 @@ dispatch(updateCookieConsent(update));};};/**
  * @param {boolean|null} params.statisticsCookiesAccepted whether this cookie type was accepted
  * by user
  * @returns {Function}
- */export var acceptSelectedCookies=function acceptSelectedCookies(_ref2){var comfortCookiesAccepted=_ref2.comfortCookiesAccepted,statisticsCookiesAccepted=_ref2.statisticsCookiesAccepted;return(/*#__PURE__*/function(){var _ref3=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(dispatch,getState){var meta;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:if(!(comfortCookiesAccepted||statisticsCookiesAccepted)){_context2.next=4;break;}meta=getCookieConsentTrackingMeta(getState());_context2.next=4;return dispatch(grantAppTrackingTransparencyPermission({meta:meta}));case 4:dispatch(updateCookieConsentLocal({comfortCookiesAccepted:comfortCookiesAccepted,statisticsCookiesAccepted:statisticsCookiesAccepted}));dispatch(hideCookieConsentModal());case 6:case"end":return _context2.stop();}},_callee2);}));return function(_x3,_x4){return _ref3.apply(this,arguments);};}());};/**
+ */
+export const acceptSelectedCookies = ({
+  comfortCookiesAccepted,
+  statisticsCookiesAccepted
+}) => async (dispatch, getState) => {
+  if (comfortCookiesAccepted || statisticsCookiesAccepted) {
+    const meta = getCookieConsentTrackingMeta(getState());
+    await dispatch(grantAppTrackingTransparencyPermission({
+      meta
+    }));
+  }
+  dispatch(updateCookieConsentLocal({
+    comfortCookiesAccepted,
+    statisticsCookiesAccepted
+  }));
+  dispatch(hideCookieConsentModal());
+};
+
+/**
  * action to be dispatched when the user selected only the required cookies in the custom modal
  * and native modal should be triggered for setting the permission
  * @returns {Function}
- */export var acceptRequiredCookies=function acceptRequiredCookies(){return function(dispatch){dispatch(updateCookieConsentLocal({comfortCookiesAccepted:false,statisticsCookiesAccepted:false}));dispatch(hideCookieConsentModal());};};/**
+ */
+export const acceptRequiredCookies = () => dispatch => {
+  dispatch(updateCookieConsentLocal({
+    comfortCookiesAccepted: false,
+    statisticsCookiesAccepted: false
+  }));
+  dispatch(hideCookieConsentModal());
+};
+
+/**
  * action to be dispatched when the user opted to configure cookie settings in the custom modal
  * @returns {Function}
- */export var openPrivacySettings=function openPrivacySettings(){return function(dispatch){dispatch(historyPush({pathname:PRIVACY_SETTINGS_PATTERN}));};};
+ */
+export const openPrivacySettings = () => dispatch => {
+  dispatch(historyPush({
+    pathname: PRIVACY_SETTINGS_PATTERN
+  }));
+};

package/tracking/actions/index.js

@@ -1 +1 @@
-export*from"./cookieConsent";
+export * from "./cookieConsent";

package/tracking/components/CookieConsentModal/connector.js

@@ -1,6 +1,26 @@
-import{connect}from'react-redux';import{makeGetPrivacyPolicyLink}from'@shopgate/engage/page/selectors';import{getIsCookieConsentModalVisible}from"../../selectors/cookieConsent";import{acceptAllCookies,acceptRequiredCookies,openPrivacySettings}from"../../actions";/**
+import { connect } from 'react-redux';
+import { makeGetPrivacyPolicyLink } from '@shopgate/engage/page/selectors';
+import { getIsCookieConsentModalVisible } from "../../selectors/cookieConsent";
+import { acceptAllCookies, acceptRequiredCookies, openPrivacySettings } from "../../actions";
+
+/**
  * @return {Object} The extended component props.
- */var makeMapStateToProps=function makeMapStateToProps(){var getPrivacyPolicyLink=makeGetPrivacyPolicyLink();return function(state){return{isCookieConsentModalVisible:getIsCookieConsentModalVisible(state),privacyPolicyLink:getPrivacyPolicyLink(state)};};};/**
+ */
+const makeMapStateToProps = () => {
+  const getPrivacyPolicyLink = makeGetPrivacyPolicyLink();
+  return state => ({
+    isCookieConsentModalVisible: getIsCookieConsentModalVisible(state),
+    privacyPolicyLink: getPrivacyPolicyLink(state)
+  });
+};
+
+/**
  * Connects the dispatch function to a callable function in the props.
  * @return {Object} The extended component props.
- */var mapDispatchToProps={acceptAllCookies:acceptAllCookies,acceptRequiredCookies:acceptRequiredCookies,openPrivacySettings:openPrivacySettings};export default connect(makeMapStateToProps,mapDispatchToProps);
+ */
+const mapDispatchToProps = {
+  acceptAllCookies,
+  acceptRequiredCookies,
+  openPrivacySettings
+};
+export default connect(makeMapStateToProps, mapDispatchToProps);

package/tracking/components/CookieConsentModal/index.js

@@ -1,6 +1,145 @@
-import React,{useMemo,useCallback}from'react';import PropTypes from'prop-types';import throttle from'lodash/throttle';import{Grid,I18n,Button,Modal,Link,ConditionalWrapper}from'@shopgate/engage/components';import{appConfig}from'@shopgate/engage';import classNames from'classnames';import connect from"./connector";import cookieImage from"./tracking-opt-in.svg";import styles from"./style";import{svgToDataUrl}from"../../../core";/**
+import React, { useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import throttle from 'lodash/throttle';
+import { Grid, I18n, Button, Modal, Link, ConditionalWrapper } from '@shopgate/engage/components';
+import { appConfig } from '@shopgate/engage';
+import classNames from 'classnames';
+import connect from "./connector";
+import cookieImage from "./tracking-opt-in.svg";
+import styles from "./style";
+import { svgToDataUrl } from "../../../core";
+
+/**
  * The cookie consent modal component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var CookieConsentModal=function CookieConsentModal(_ref){var isCookieConsentModalVisible=_ref.isCookieConsentModalVisible,acceptAllCookies=_ref.acceptAllCookies,acceptRequiredCookies=_ref.acceptRequiredCookies,openPrivacySettings=_ref.openPrivacySettings,privacyPolicyLink=_ref.privacyPolicyLink;var _appConfig$cookieCons=appConfig.cookieConsent,_appConfig$cookieCons2=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons,modalMessage=_appConfig$cookieCons2.modalMessage,modalTitle=_appConfig$cookieCons2.modalTitle,modalButtonConfigureSettings=_appConfig$cookieCons2.modalButtonConfigureSettings,modalButtonOnlyRequired=_appConfig$cookieCons2.modalButtonOnlyRequired,modalButtonAcceptAll=_appConfig$cookieCons2.modalButtonAcceptAll,modalImageURL=_appConfig$cookieCons2.modalImageURL,modalImageSVG=_appConfig$cookieCons2.modalImageSVG,showRequiredCookiesButton=_appConfig$cookieCons2.showRequiredCookiesButton;var imageSRC=useMemo(function(){if(!modalImageURL&&!modalImageSVG){return cookieImage;}if(modalImageURL){return modalImageURL;}return svgToDataUrl(modalImageSVG,cookieImage);},[modalImageSVG,modalImageURL]);// Button event handlers are throttled to prevent multiple clicks
-var handleAcceptAllCookies=useCallback(throttle(acceptAllCookies,1000,{leading:true,trailing:false}),[]);var handleAcceptRequiredCookies=useCallback(throttle(acceptRequiredCookies,1000,{leading:true,trailing:false}),[]);var handleOpenPrivacySettings=useCallback(throttle(openPrivacySettings,1000,{leading:true,trailing:false}),[]);if(!isCookieConsentModalVisible){return null;}return React.createElement(Modal,{classes:{content:styles.modalContent,layout:styles.modalLayout}},React.createElement(Grid,{component:"div",className:classNames(styles.container,'cookie-consent-modal__container'),role:"alertdialog","aria-modal":true,"aria-labelledby":"cookieConsentDialogTitle","aria-describedby":"cookieConsentDialogMessage"},React.createElement(Grid.Item,{component:"div",className:styles.item},React.createElement("img",{src:imageSRC,className:classNames(styles.image,'cookie-consent-modal__image'),alt:"","aria-hidden":"true"}),React.createElement(I18n.Text,{className:classNames(styles.title,'cookie-consent-modal__title'),string:modalTitle||'cookieConsentModal.title',id:"cookieConsentDialogTitle"}),React.createElement(I18n.Text,{string:modalMessage||'cookieConsentModal.message',className:classNames('cookie-consent-modal__message'),acceptPlainTextWithPlaceholders:true,id:"cookieConsentDialogMessage"},React.createElement(I18n.Placeholder,{forKey:"privacyLink"},React.createElement(ConditionalWrapper,{condition:!!privacyPolicyLink,wrapper:function wrapper(children){return React.createElement(Link,{href:privacyPolicyLink,tag:"span"},children);}},React.createElement(I18n.Text,{string:"cookieConsentModal.privacyText",className:styles.link})))),React.createElement(Grid.Item,{component:"div",className:styles.buttonWrapper},React.createElement(Button,{onClick:handleAcceptAllCookies,type:"primary",className:classNames(styles.button,'cookie-consent-modal__button-accept-all')},React.createElement(I18n.Text,{string:modalButtonAcceptAll||'cookieConsentModal.buttonAcceptAll'})),showRequiredCookiesButton?React.createElement(Button,{onClick:handleAcceptRequiredCookies,type:"simple",className:classNames(styles.button,'cookie-consent-modal__button-accept-required')},React.createElement(I18n.Text,{string:modalButtonOnlyRequired||'cookieConsentModal.modalButtonOnlyRequired'})):null,React.createElement(Button,{onClick:handleOpenPrivacySettings,type:"simple",className:classNames(styles.button,'cookie-consent-modal__button-open-settings')},React.createElement(I18n.Text,{string:modalButtonConfigureSettings||'cookieConsentModal.buttonConfigure'}))))));};CookieConsentModal.defaultProps={privacyPolicyLink:null};export default connect(CookieConsentModal);
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CookieConsentModal = ({
+  isCookieConsentModalVisible,
+  acceptAllCookies,
+  acceptRequiredCookies,
+  openPrivacySettings,
+  privacyPolicyLink
+}) => {
+  const {
+    cookieConsent: {
+      modalMessage,
+      modalTitle,
+      modalButtonConfigureSettings,
+      modalButtonOnlyRequired,
+      modalButtonAcceptAll,
+      modalImageURL,
+      modalImageSVG,
+      showRequiredCookiesButton
+    } = {}
+  } = appConfig;
+  const imageSRC = useMemo(() => {
+    if (!modalImageURL && !modalImageSVG) {
+      return cookieImage;
+    }
+    if (modalImageURL) {
+      return modalImageURL;
+    }
+    return svgToDataUrl(modalImageSVG, cookieImage);
+  }, [modalImageSVG, modalImageURL]);
+
+  // Button event handlers are throttled to prevent multiple clicks
+  const handleAcceptAllCookies = useMemo(() => throttle(acceptAllCookies, 1000, {
+    leading: true,
+    trailing: false
+  }), [acceptAllCookies]);
+  const handleAcceptRequiredCookies = useMemo(() => throttle(acceptRequiredCookies, 1000, {
+    leading: true,
+    trailing: false
+  }), [acceptRequiredCookies]);
+  const handleOpenPrivacySettings = useMemo(() => throttle(openPrivacySettings, 1000, {
+    leading: true,
+    trailing: false
+  }), [openPrivacySettings]);
+  useEffect(() => () => {
+    handleAcceptAllCookies.cancel();
+    handleAcceptRequiredCookies.cancel();
+    handleOpenPrivacySettings.cancel();
+  }, [handleAcceptAllCookies, handleAcceptRequiredCookies, handleOpenPrivacySettings]);
+  if (!isCookieConsentModalVisible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Modal, {
+    classes: {
+      content: styles.modalContent,
+      layout: styles.modalLayout
+    },
+    children: /*#__PURE__*/_jsx(Grid, {
+      component: "div",
+      className: classNames(styles.container, 'cookie-consent-modal__container'),
+      role: "alertdialog",
+      "aria-modal": true,
+      "aria-labelledby": "cookieConsentDialogTitle",
+      "aria-describedby": "cookieConsentDialogMessage",
+      children: /*#__PURE__*/_jsxs(Grid.Item, {
+        component: "div",
+        className: styles.item,
+        children: [/*#__PURE__*/_jsx("img", {
+          src: imageSRC,
+          className: classNames(styles.image, 'cookie-consent-modal__image'),
+          alt: "",
+          "aria-hidden": "true"
+        }), /*#__PURE__*/_jsx(I18n.Text, {
+          className: classNames(styles.title, 'cookie-consent-modal__title'),
+          string: modalTitle || 'cookieConsentModal.title',
+          id: "cookieConsentDialogTitle"
+        }), /*#__PURE__*/_jsx(I18n.Text, {
+          string: modalMessage || 'cookieConsentModal.message',
+          className: classNames('cookie-consent-modal__message'),
+          acceptPlainTextWithPlaceholders: true,
+          id: "cookieConsentDialogMessage",
+          children: /*#__PURE__*/_jsx(I18n.Placeholder, {
+            forKey: "privacyLink",
+            children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+              condition: !!privacyPolicyLink,
+              wrapper: children => /*#__PURE__*/_jsx(Link, {
+                href: privacyPolicyLink,
+                tag: "span",
+                children: children
+              }),
+              children: /*#__PURE__*/_jsx(I18n.Text, {
+                string: "cookieConsentModal.privacyText",
+                className: styles.link
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsxs(Grid.Item, {
+          component: "div",
+          className: styles.buttonWrapper,
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: handleAcceptAllCookies,
+            type: "primary",
+            className: classNames(styles.button, 'cookie-consent-modal__button-accept-all'),
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: modalButtonAcceptAll || 'cookieConsentModal.buttonAcceptAll'
+            })
+          }), showRequiredCookiesButton ? /*#__PURE__*/_jsx(Button, {
+            onClick: handleAcceptRequiredCookies,
+            type: "simple",
+            className: classNames(styles.button, 'cookie-consent-modal__button-accept-required'),
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: modalButtonOnlyRequired || 'cookieConsentModal.modalButtonOnlyRequired'
+            })
+          }) : null, /*#__PURE__*/_jsx(Button, {
+            onClick: handleOpenPrivacySettings,
+            type: "simple",
+            className: classNames(styles.button, 'cookie-consent-modal__button-open-settings'),
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: modalButtonConfigureSettings || 'cookieConsentModal.buttonConfigure'
+            })
+          })]
+        })]
+      })
+    })
+  });
+};
+CookieConsentModal.defaultProps = {
+  privacyPolicyLink: null
+};
+export default connect(CookieConsentModal);

package/tracking/components/CookieConsentModal/style.js

@@ -1 +1,59 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var modalContent=css({width:'100%'}).toString();var modalLayout=css({backgroundColor:themeColors.lightOverlay}).toString();var container=css({backgroundColor:themeColors.lightOverlay,padding:'30px',justifyContent:'center',display:'flex',flexDirection:'column',textAlign:'center'}).toString();var title=css({fontWeight:'bold',fontSize:'1.35rem',paddingTop:'30px',paddingBottom:'30px'}).toString();var item=css({display:'flex',flexDirection:'column',alignItems:'center'}).toString();var link=css({color:themeColors.accent,textDecoration:'underline'}).toString();var image=css({width:'60%',maxWidth:400}).toString();var button=css({marginTop:'20px'}).toString();var buttonText=css({color:themeColors.gray}).toString();var buttonWrapper=css({display:'flex',flexDirection:'column',marginBottom:'30px',width:'100%'}).toString();export default{modalContent:modalContent,modalLayout:modalLayout,container:container,item:item,title:title,link:link,image:image,button:button,buttonText:buttonText,buttonWrapper:buttonWrapper};
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+const modalContent = css({
+  width: '100%'
+}).toString();
+const modalLayout = css({
+  backgroundColor: themeColors.lightOverlay
+}).toString();
+const container = css({
+  backgroundColor: themeColors.lightOverlay,
+  padding: '30px',
+  justifyContent: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'center'
+}).toString();
+const title = css({
+  fontWeight: 'bold',
+  fontSize: '1.35rem',
+  paddingTop: '30px',
+  paddingBottom: '30px'
+}).toString();
+const item = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center'
+}).toString();
+const link = css({
+  color: themeColors.accent,
+  textDecoration: 'underline'
+}).toString();
+const image = css({
+  width: '60%',
+  maxWidth: 400
+}).toString();
+const button = css({
+  marginTop: '20px'
+}).toString();
+const buttonText = css({
+  color: themeColors.gray
+}).toString();
+const buttonWrapper = css({
+  display: 'flex',
+  flexDirection: 'column',
+  marginBottom: '30px',
+  width: '100%'
+}).toString();
+export default {
+  modalContent,
+  modalLayout,
+  container,
+  item,
+  title,
+  link,
+  image,
+  button,
+  buttonText,
+  buttonWrapper
+};

package/tracking/components/PrivacySettings/connector.js

@@ -1,6 +1,26 @@
-import{connect}from'react-redux';import{makeGetPrivacyPolicyLink}from'@shopgate/engage/page/selectors';import{acceptAllCookies,acceptSelectedCookies}from"../../actions";import{getAreComfortCookiesAcceptedInternal,getAreStatisticsCookiesAcceptedInternal}from"../../selectors/cookieConsent";/**
+import { connect } from 'react-redux';
+import { makeGetPrivacyPolicyLink } from '@shopgate/engage/page/selectors';
+import { acceptAllCookies, acceptSelectedCookies } from "../../actions";
+import { getAreComfortCookiesAcceptedInternal, getAreStatisticsCookiesAcceptedInternal } from "../../selectors/cookieConsent";
+
+/**
  * @return {Object} The extended component props.
- */var makeMapStateToProps=function makeMapStateToProps(){var getPrivacyPolicyLink=makeGetPrivacyPolicyLink();return function(state){return{comfortCookiesAcceptedState:getAreComfortCookiesAcceptedInternal(state),statisticsCookiesAcceptedState:getAreStatisticsCookiesAcceptedInternal(state),privacyPolicyLink:getPrivacyPolicyLink(state)};};};/**
+ */
+const makeMapStateToProps = () => {
+  const getPrivacyPolicyLink = makeGetPrivacyPolicyLink();
+  return state => ({
+    comfortCookiesAcceptedState: getAreComfortCookiesAcceptedInternal(state),
+    statisticsCookiesAcceptedState: getAreStatisticsCookiesAcceptedInternal(state),
+    privacyPolicyLink: getPrivacyPolicyLink(state)
+  });
+};
+
+/**
  * Connects the dispatch function to a callable function in the props.
  * @return {Object} The extended component props.
- */var mapDispatchToProps={acceptAllCookies:acceptAllCookies,acceptSelectedCookies:acceptSelectedCookies};export default connect(makeMapStateToProps,mapDispatchToProps);
+ */
+const mapDispatchToProps = {
+  acceptAllCookies,
+  acceptSelectedCookies
+};
+export default connect(makeMapStateToProps, mapDispatchToProps);