@shopgate/engage 7.27.3-alpha.17 → 7.27.3-alpha.19

package/styles/theme/createTheme/index.d.ts

@@ -0,0 +1,19 @@
+import { type Breakpoints } from './createBreakpoints';
+import { type Spacing } from './createSpacing';
+import { Transitions } from './transitions';
+import { type ZIndex } from './zIndex';
+
+export { type Breakpoint } from './createBreakpoints'
+
+export interface ThemeOptions {
+
+}
+
+export interface Theme {
+  breakpoints: Breakpoints;
+  spacing: Spacing;
+  transitions: Transitions;
+  zIndex: ZIndex;
+}
+
+export function createTheme(): Theme;

package/styles/theme/createTheme/index.js

@@ -0,0 +1,5 @@
+import createBreakpoints from"./createBreakpoints";import createSpacing from"./createSpacing";import transitions from"./transitions";import zIndex from"./zIndex";// eslint-disable-next-line valid-jsdoc
+/**
+ * Creates a theme object for the ThemeProvider.
+ * @returns The theme object
+ */export var createTheme=function createTheme(){var breakpoints=createBreakpoints();var spacing=createSpacing();return{breakpoints:breakpoints,spacing:spacing,transitions:transitions,zIndex:zIndex};};

package/styles/theme/createTheme/transitions.d.ts

@@ -0,0 +1,100 @@
+export interface Easing {
+  /**
+   * This is the most common easing curve.
+   */
+  easeInOut: string;
+  /**
+   * Objects enter the screen at full velocity from off-screen and slowly decelerate to a resting
+   * point.
+   */
+  easeOut: string;
+  /**
+   * Objects leave the screen at full velocity. They do not decelerate when off-screen.
+   */
+  easeIn: string;
+  /**
+   * The sharp curve is used by objects that may return to the screen at any time.
+   */
+  sharp: string;
+}
+export const easing: Easing;
+
+export interface Duration {
+  shortest: number;
+  shorter: number;
+  short: number;
+  /**
+   * Most basic recommended timing
+   */
+  standard: number;
+  /**
+   * This is to be used in complex animations
+   */
+  complex: number;
+  /**
+   * Recommended when something is entering screen
+   */
+  enteringScreen: number;
+  /**
+   * Recommended when something is leaving screen
+   */
+  leavingScreen: number;
+}
+
+export const duration: Duration;
+
+export function formatMs(milliseconds: number): string;
+
+export interface Transitions {
+  /**
+   * Easing functions for transitions.
+   */
+  easing: Easing;
+  /**
+   * Presets for transition durations.
+   */
+  duration: Duration;
+  /**
+   * Creates a CSS transition string based on the provided properties and options.
+   */
+  create(
+    /**
+     * The CSS properties to apply the transition to.
+     * Can be a single property or an array of properties.
+     */
+    props: string | string[],
+    options?: Partial<{
+      /**
+       * Duration of the transition as a number in milliseconds or a string with a
+       * CSS time unit (e.g., '500ms', '0.5s').
+       */
+      duration: number | string;
+      /**
+       * Easing function to use for the transition.
+       */
+      easing: string;
+      /**
+       * Delay before the transition starts, as a number in milliseconds or a string with a
+       * CSS time unit (e.g., '500ms', '0.5s').
+       */
+      delay: number | string
+    }>
+  ): string;
+  /**
+   * Calculates an appropriate animation duration (in milliseconds) for a height-based
+   * transition effect. The duration increases with height but in a sub-linear fashion,
+   * providing a smooth and visually pleasing animation speed for expanding/collapsing UI elements.
+   *
+   * @param {number} height - The height (in pixels) of the element being animated.
+   * @returns {number} The calculated duration in milliseconds. Returns 0 if height is 0 or falsy.
+   *
+   * @example
+   * getAutoHeightDuration(72); // returns ~222
+   */
+  getAutoHeightDuration(height: number): number;
+}
+
+// export type TransitionsOptions = DeepPartial<Transitions>;
+
+declare const transitions: Transitions;
+export default transitions;

package/styles/theme/createTheme/transitions.js

@@ -0,0 +1,26 @@
+var _excluded=["duration","easing","delay"];function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import{isDev}from'@shopgate/engage/core/helpers';// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
+// to learn the context in which each easing should be used.
+export var easing={// This is the most common easing curve.
+easeInOut:'cubic-bezier(0.4, 0, 0.2, 1)',// Objects enter the screen at full velocity from off-screen and
+// slowly decelerate to a resting point.
+easeOut:'cubic-bezier(0.0, 0, 0.2, 1)',// Objects leave the screen at full velocity. They do not decelerate when off-screen.
+easeIn:'cubic-bezier(0.4, 0, 1, 1)',// The sharp curve is used by objects that may return to the screen at any time.
+sharp:'cubic-bezier(0.4, 0, 0.6, 1)'};// Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+// to learn when use what timing
+export var duration={shortest:150,shorter:200,"short":250,// most basic recommended timing
+standard:300,// this is to be used in complex animations
+complex:375,// recommended when something is entering screen
+enteringScreen:225,// recommended when something is leaving screen
+leavingScreen:195};/**
+ * Converts milliseconds to a string representation.
+ * @param {number} milliseconds Input in milliseconds.
+ * @returns {string}
+ */function formatMs(milliseconds){return"".concat(Math.round(milliseconds),"ms");}/**
+ * @param {string|Array} props
+ * @param {object} param
+ * @param {string} param.prop
+ * @param {number} param.duration
+ * @param {string} param.easing
+ * @param {number} param.delay
+ */export default{easing:easing,duration:duration,create:function create(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:['all'];var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$duration=options.duration,durationOption=_options$duration===void 0?duration.standard:_options$duration,_options$easing=options.easing,easingOption=_options$easing===void 0?easing.easeInOut:_options$easing,_options$delay=options.delay,delay=_options$delay===void 0?0:_options$delay,other=_objectWithoutProperties(options,_excluded);if(isDev){/* eslint-disable require-jsdoc */var isString=function isString(value){return typeof value==='string';};var isNumber=function isNumber(value){return!Number.isNaN(parseFloat(value));};/* eslint-enable require-jsdoc */if(!isString(props)&&!Array.isArray(props)){console.error('Shopgate Theme: Argument "props" must be a string or Array.');}if(!isNumber(durationOption)&&!isString(durationOption)){console.error("Shopgate Theme: Argument \"duration\" must be a number or a string but found ".concat(durationOption,"."));}if(!isString(easingOption)){console.error('Shopgate Theme: Argument "easing" must be a string.');}if(!isNumber(delay)&&!isString(delay)){console.error('Shopgate Theme: Argument "delay" must be a number or a string.');}if(Object.keys(other).length!==0){console.error("Shopgate Theme: Unrecognized argument(s) [".concat(Object.keys(other).join(','),"]."));}}return(Array.isArray(props)?props:[props]).map(function(animatedProp){return"".concat(animatedProp," ").concat(typeof durationOption==='string'?durationOption:formatMs(durationOption)," ").concat(easingOption," ").concat(typeof delay==='string'?delay:formatMs(delay));}).join(',');},getAutoHeightDuration:function getAutoHeightDuration(height){if(!height){return 0;}var constant=height/36;// https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
+return Math.round((4+15*Math.pow(constant,0.25)+constant/5)*10);}};

package/styles/theme/createTheme/zIndex.d.ts

@@ -0,0 +1,12 @@
+export interface ZIndex {
+  tabBar: number;
+  drawer: number;
+  snackbar: number;
+  modal: number;
+}
+
+export type ZIndexOptions = Partial<ZIndex>;
+
+declare const zIndex: ZIndex;
+
+export default zIndex;

package/styles/theme/createTheme/zIndex.js

@@ -0,0 +1,3 @@
+// We need to centralize the zIndex definitions as they work
+// like global values in the browser.
+var zIndex={tabBar:10,drawer:1200,snackbar:1400,modal:2000};export default zIndex;

package/styles/theme/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { default as useActiveBreakpoint } from './useActiveBreakpoint';
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as useResponsiveValue } from './useResponsiveValue';
+export { default as useTheme } from './useTheme';

package/styles/theme/hooks/index.js

@@ -0,0 +1 @@
+export{default as useActiveBreakpoint}from"./useActiveBreakpoint";export{default as useMediaQuery}from"./useMediaQuery";export{default as useResponsiveValue}from"./useResponsiveValue";export{default as useTheme}from"./useTheme";

package/styles/theme/hooks/useActiveBreakpoint.d.ts

@@ -0,0 +1,18 @@
+import { Breakpoint } from '..';
+
+/**
+ * Returns the active breakpoint for the current window size.
+ *
+ * @example
+ * ```js
+ * import React from 'react';
+ * import { useActiveBreakpoint } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const activeBreakpoint = useActiveBreakpoint();
+ *
+ *   return (<span>{`active breakpoint: ${activeBreakpoint}`}</span>)
+ * }
+ * ```
+ */
+export default function useActiveBreakpoint(): Breakpoint;

package/styles/theme/hooks/useActiveBreakpoint.js

@@ -0,0 +1,4 @@
+import{useContext}from'react';import{ActiveBreakpointContext}from"../providers/ActiveBreakpointProvider";// eslint-disable-next-line valid-jsdoc
+/**
+ * Returns the active breakpoint for the current window size.
+ */var useActiveBreakpoint=function useActiveBreakpoint(){return useContext(ActiveBreakpointContext);};export default useActiveBreakpoint;

package/styles/theme/hooks/useMediaQuery.d.ts

@@ -0,0 +1,33 @@
+import { Theme } from '..';
+
+/**
+ * Creates a media query hook that can be used to check if a media query matches the current
+ * viewport.
+ * @param {string|ThemeFn} queryInput The media query string or a function that receives the theme
+ * and returns a media query string.
+ * @returns {boolean} Returns true if the media query matches, false otherwise.
+ *
+ * @example Use the useTheme hook to get access to the breakpoint helper functions:
+ * ```js
+ * import React from 'react';
+ * import { useTheme, useMediaQuery } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const theme = useTheme();
+ *   const matches = useMediaQuery(theme.breakpoints.up('sm'));
+ *
+ *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
+ * }
+ *```
+ * @example Alternatively, you can use a callback function, accepting the theme as a first argument:
+ * ```js
+ * import React from 'react';
+ * import { useMediaQuery } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
+ *
+ *   return (<span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>)
+ * }
+ */
+export default function useMediaQuery(queryInput: string | ((theme: Theme) => string)): boolean;

package/styles/theme/hooks/useMediaQuery.js

@@ -0,0 +1,20 @@
+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{useState,useEffect}from'react';import useTheme from"./useTheme";/**
+ * React hook to check if a media query matches the current viewport.
+ * Doesn't accept media query strings that start with '@media'.
+ * @param {string} query A media query string, e.g. '(min-width: 600px)'
+ * @returns {boolean} Returns true if the media query matches, false otherwise.
+ */var useMediaQueryInternal=function useMediaQueryInternal(query){var _useState=useState(function(){return window.matchMedia(query).matches;}),_useState2=_slicedToArray(_useState,2),match=_useState2[0],setMatch=_useState2[1];useEffect(function(){var queryList=window.matchMedia(query);/**
+     * Update the match state when the media query changes.
+     */var updateMatch=function updateMatch(){setMatch(queryList.matches);};queryList.addEventListener('change',updateMatch);return function(){queryList.removeEventListener('change',updateMatch);};},[query]);return match;};/**
+ * @typedef {import('./useTheme').Theme} Theme
+ */ /**
+ * @callback ThemeFn
+ * @param {Theme} theme The current theme object.
+ */ /**
+ * Creates a media query hook that can be used to check if a media query matches the current
+ * viewport.
+ * @param {string|ThemeFn} queryInput The media query string or a function that receives the theme
+ * and returns a media query string.
+ * @returns {boolean} Returns true if the media query matches, false otherwise.
+ */var useMediaQuery=function useMediaQuery(queryInput){var theme=useTheme();var query=typeof queryInput==='function'?queryInput(theme):queryInput;// Remove the '@media' prefix if it exists, as useMediaQueryInternal expects a plain media query.
+query=query.replace(/^@media( ?)/m,'');var match=useMediaQueryInternal(query);return match;};export default useMediaQuery;

package/styles/theme/hooks/useResponsiveValue.d.ts

@@ -0,0 +1,27 @@
+import { Breakpoint } from '..';
+
+type BreakpointValueMap<T> = Partial<Record<Breakpoint, T>>;
+
+/**
+ * Returns the value for the current breakpoint based on the provided responsive values object.
+ * It is also responsive to window resizing and returning the appropriate value according to the
+ * new window size.
+ * @param values The responsive values object
+ * @example
+ * ```js
+ * import React from 'react';
+ * import { useResponsiveValue } from '@shopgate/engage/styles';
+ *
+ * export default function MyComponent() {
+ *   const flexDir = useResponsiveValue({
+ *     xs: "column",
+ *     lg: "row"
+ *   });
+ *
+ *   return (<span style={{ display: 'flex', flexDirection: flexDir }} />)
+ * }
+ * ```
+ */
+export default function useResponsiveValue<const T extends BreakpointValueMap<any>>(
+  values: T
+): T[keyof T];

package/styles/theme/hooks/useResponsiveValue.js

@@ -0,0 +1,4 @@
+import useTheme from"./useTheme";import useActiveBreakpoint from"./useActiveBreakpoint";// eslint-disable-next-line require-jsdoc
+var useResponsiveValue=function useResponsiveValue(values){var theme=useTheme();var active=useActiveBreakpoint();if(!active)return undefined;// Get the keys of the breakpoints in the theme
+var breakpoints=[].concat(theme.breakpoints.keys);var activeIndex=breakpoints.indexOf(active);// Walk from the active breakpoint down to smallest
+for(var i=activeIndex;i>=0;i-=1){var bp=breakpoints[i];if(values[bp]!==undefined){return values[bp];}}return undefined;};export default useResponsiveValue;

package/styles/theme/hooks/useTheme.d.ts

@@ -0,0 +1,8 @@
+import { type Theme } from '..';
+
+export type { Theme } from '..';
+
+/**
+ * Returns the theme object.
+ */
+export default function useTheme<T = Theme>(): T;

package/styles/theme/hooks/useTheme.js

@@ -0,0 +1,4 @@
+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;

package/styles/theme/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ThemeProvider } from './providers/ThemeProvider';
+export { createTheme, Theme, Breakpoint } from './createTheme';
+export {
+  useActiveBreakpoint,
+  useMediaQuery,
+  useResponsiveValue,
+  useTheme,
+} from './hooks';

package/styles/theme/index.js

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

package/styles/theme/providers/ActiveBreakpointProvider.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, JSX, Context } from 'react';
+import { Breakpoint } from '..';
+
+/**
+ * React Context for current active breakpoint.
+ */
+export const ActiveBreakpointContext: Context<Breakpoint | undefined>;
+
+/**
+ * Props for the ActiveBreakpointProvider.
+ */
+export interface ActiveBreakpointProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provides the current active breakpoint to child components.
+ */
+declare function ActiveBreakpointProvider(props: ActiveBreakpointProviderProps): JSX.Element;
+
+export default ActiveBreakpointProvider;

package/styles/theme/providers/ActiveBreakpointProvider.js

@@ -0,0 +1,13 @@
+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';/**
+ * @typedef {import('..').Breakpoint} Breakpoint
+ */ /** @type {import('react').Context<Breakpoint>} */export var ActiveBreakpointContext=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();/**
+   * 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,''))};});/**
+     * 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;

package/styles/theme/providers/ThemeProvider.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from '..';
+
+export const ThemeContext: React.Context<Theme>;
+
+export interface ThemeProviderProps<Theme = Theme> {
+  children: React.ReactNode;
+  /**
+   * The theme object to provide to the context.
+   */
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+
+/**
+ * The ThemeProvider component provides the theme context to its children.
+ */
+export default function ThemeProvider<T = Theme>(
+  props: ThemeProviderProps<T>
+): React.ReactElement<ThemeProviderProps<T>>;

package/styles/theme/providers/ThemeProvider.js

@@ -0,0 +1,7 @@
+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();/**
+ * 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);

package/styles/tss/index.js

@@ -0,0 +1,3 @@
+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};

package/tracking/action-creators/cookieConsent.js

@@ -1,10 +1,10 @@
-import{appConfig}from'@shopgate/engage';import{UPDATE_COOKIE_CONSENT,COOKIE_CONSENT_HANDLED,HIDE_COOKIE_CONSENT_MODAL,SHOW_COOKIE_CONSENT_MODAL}from"../constants";/**
+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;/**
  * 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};};/**
  * 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};};var _appConfig$cookieCons=appConfig.cookieConsent;_appConfig$cookieCons=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons;var showComfortCookiesToggle=_appConfig$cookieCons.showComfortCookiesToggle;/**
+ */export var hideCookieConsentModal=function hideCookieConsentModal(){return{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

package/tracking/actions/cookieConsent.js

@@ -1,8 +1,20 @@
-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{updateCookieConsent,hideCookieConsentModal}from"../action-creators";import{PRIVACY_SETTINGS_PATTERN}from"../constants";/**
+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";/**
+ * 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
+ * are accepted.
+ * @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));};};/**
  * 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){return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.next=2;return dispatch(grantAppTrackingTransparencyPermission());case 2:dispatch(updateCookieConsent({comfortCookiesAccepted:true,statisticsCookiesAccepted:true}));dispatch(hideCookieConsentModal());case 4:case"end":return _context.stop();}}},_callee);}));return function(_x){return _ref.apply(this,arguments);};}();};/**
+ */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);};}());};/**
  * 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
@@ -11,11 +23,11 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGenera
  * @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){return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:if(!(comfortCookiesAccepted||statisticsCookiesAccepted)){_context2.next=3;break;}_context2.next=3;return dispatch(grantAppTrackingTransparencyPermission());case 3:dispatch(updateCookieConsent({comfortCookiesAccepted:comfortCookiesAccepted,statisticsCookiesAccepted:statisticsCookiesAccepted}));dispatch(hideCookieConsentModal());case 5:case"end":return _context2.stop();}}},_callee2);}));return function(_x2){return _ref3.apply(this,arguments);};}();};/**
+ */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);};}());};/**
  * 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(updateCookieConsent({comfortCookiesAccepted:false,statisticsCookiesAccepted:false}));dispatch(hideCookieConsentModal());};};/**
+ */export var acceptRequiredCookies=function acceptRequiredCookies(){return function(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}));dispatch(hideCookieConsentModal());};};
+ */export var openPrivacySettings=function openPrivacySettings(){return function(dispatch){dispatch(historyPush({pathname:PRIVACY_SETTINGS_PATTERN}));};};

package/tracking/components/CookieConsentModal/connector.js

@@ -1,8 +1,6 @@
-import{connect}from'react-redux';import{getIsCookieConsentModalVisible}from"../../selectors/cookieConsent";import{acceptAllCookies,acceptRequiredCookies,openPrivacySettings}from"../../actions";/**
- * Maps the contents of the state to the component props.
- * @param {Object} state The current application state.
+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 mapStateToProps=function mapStateToProps(state){return{isCookieConsentModalVisible:getIsCookieConsentModalVisible(state)};};/**
+ */var makeMapStateToProps=function makeMapStateToProps(){var getPrivacyPolicyLink=makeGetPrivacyPolicyLink();return function(state){return{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(mapStateToProps,mapDispatchToProps);
+ */var mapDispatchToProps={acceptAllCookies:acceptAllCookies,acceptRequiredCookies:acceptRequiredCookies,openPrivacySettings:openPrivacySettings};export default connect(makeMapStateToProps,mapDispatchToProps);

package/tracking/components/CookieConsentModal/index.js

@@ -1,9 +1,6 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{Grid,I18n,Button,Modal,Link}from'@shopgate/engage/components';import{appConfig}from'@shopgate/engage';import{PRIVACY_PATH}from'@shopgate/engage/page';import classNames from'classnames';import connect from"./connector";import cookieImage from"./tracking-opt-in.svg";import styles from"./style";/**
+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";/**
  * 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;var _appConfig$cookieCons=appConfig.cookieConsent;_appConfig$cookieCons=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons;var modalMessage=_appConfig$cookieCons.modalMessage,modalTitle=_appConfig$cookieCons.modalTitle,modalButtonConfigureSettings=_appConfig$cookieCons.modalButtonConfigureSettings,modalButtonOnlyRequired=_appConfig$cookieCons.modalButtonOnlyRequired,modalButtonAcceptAll=_appConfig$cookieCons.modalButtonAcceptAll,modalImageURL=_appConfig$cookieCons.modalImageURL,modalImageSVG=_appConfig$cookieCons.modalImageSVG,showRequiredCookiesButton=_appConfig$cookieCons.showRequiredCookiesButton;var imageSRC=useMemo(function(){if(!modalImageURL&&!modalImageSVG){return cookieImage;}if(modalImageURL){return modalImageURL;}// if SVG overwrite configured: create data url
-try{// encode SVG string to UTF-8 byte array to handle non-Latin1 characters
-// (e.g. Unicode characters like emojis)
-var utf8Encoder=new TextEncoder();var svgBytes=utf8Encoder.encode(modalImageSVG);// Convert the byte array to a Base64 string
-var base64Svg=btoa(String.fromCharCode.apply(null,svgBytes));return"data:image/svg+xml;base64,".concat(base64Svg);}catch(e){return cookieImage;}},[modalImageSVG,modalImageURL]);if(!isCookieConsentModalVisible){return null;}return/*#__PURE__*/React.createElement(Modal,{isOpened:isCookieConsentModalVisible,classes:{content:styles.modalContent,layout:styles.modalLayout}},/*#__PURE__*/React.createElement(Grid,{component:"div",className:classNames(styles.container,'cookie-consent-modal__container'),role:"alertdialog","aria-modal":true,"aria-labelledby":"cookieConsentDialogTitle","aria-describedby":"cookieConsentDialogMessage"},/*#__PURE__*/React.createElement(Grid.Item,{component:"div",className:styles.item},/*#__PURE__*/React.createElement("img",{src:imageSRC,className:classNames(styles.image,'cookie-consent-modal__image'),alt:"","aria-hidden":"true"}),/*#__PURE__*/React.createElement(I18n.Text,{className:classNames(styles.title,'cookie-consent-modal__title'),string:modalTitle||'cookieConsentModal.title',id:"cookieConsentDialogTitle"}),/*#__PURE__*/React.createElement(I18n.Text,{string:modalMessage||'cookieConsentModal.message',className:classNames('cookie-consent-modal__message'),acceptPlainTextWithPlaceholders:true,id:"cookieConsentDialogMessage"},/*#__PURE__*/React.createElement(I18n.Placeholder,{forKey:"privacyLink"},/*#__PURE__*/React.createElement(Link,{href:PRIVACY_PATH,tag:"span"},/*#__PURE__*/React.createElement(I18n.Text,{string:"cookieConsentModal.privacyText",className:styles.link})))),/*#__PURE__*/React.createElement(Grid.Item,{component:"div",className:styles.buttonWrapper},/*#__PURE__*/React.createElement(Button,{onClick:acceptAllCookies,type:"primary",className:classNames(styles.button,'cookie-consent-modal__button-accept-all')},/*#__PURE__*/React.createElement(I18n.Text,{string:modalButtonAcceptAll||'cookieConsentModal.buttonAcceptAll'})),showRequiredCookiesButton?/*#__PURE__*/React.createElement(Button,{onClick:acceptRequiredCookies,type:"simple",className:classNames(styles.button,'cookie-consent-modal__button-accept-required')},/*#__PURE__*/React.createElement(I18n.Text,{string:modalButtonOnlyRequired||'cookieConsentModal.modalButtonOnlyRequired'})):null,/*#__PURE__*/React.createElement(Button,{onClick:openPrivacySettings,type:"simple",className:classNames(styles.button,'cookie-consent-modal__button-open-settings')},/*#__PURE__*/React.createElement(I18n.Text,{string:modalButtonConfigureSettings||'cookieConsentModal.buttonConfigure'}))))));};export default connect(CookieConsentModal);
+ */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);

package/tracking/components/CookieConsentModal/tracking-opt-in.svg

@@ -1,18 +1,18 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 895 895" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,-197.772,-376.125)">
-        <g transform="matrix(1.28727,0,0,1.28727,-185.288,-236.524)">
-            <g transform="matrix(1.25456,0,0,1.25456,-164.192,-209.593)">
-                <circle cx="645" cy="823.354" r="276.929" style="fill:rgb(235,235,235);"/>
-            </g>
-            <g transform="matrix(17.6233,0,0,17.6233,433.521,611.874)">
-                <path d="M12,0C8.629,2.866 6.516,3 3,3L3,14.535C3,19.138 6.203,20.339 12,24C17.797,20.339 21,19.138 21,14.535L21,3C17.484,3 15.371,2.866 12,0Z" style="fill:rgb(255,115,115);fill-rule:nonzero;"/>
-                <path d="M12.99,-1.164C12.419,-1.649 11.581,-1.649 11.01,-1.164C8.014,1.383 6.125,1.472 3,1.472C2.156,1.472 1.472,2.156 1.472,3L1.472,14.535C1.472,17.357 2.45,19.137 4.32,20.771C5.891,22.144 8.2,23.407 11.184,25.292C11.682,25.607 12.318,25.607 12.816,25.292C15.8,23.407 18.109,22.144 19.68,20.771C21.55,19.137 22.528,17.357 22.528,14.535L22.528,3C22.528,2.156 21.844,1.472 21,1.472C17.875,1.472 15.986,1.383 12.99,-1.164ZM12,0C8.629,2.866 6.516,3 3,3L3,14.535C3,19.138 6.203,20.339 12,24C17.797,20.339 21,19.138 21,14.535L21,3C17.484,3 15.371,2.866 12,0Z" style="fill:rgb(216,216,216);"/>
-            </g>
-            <g transform="matrix(24.4351,0,0,24.4351,340.416,541.775)">
-                <path d="M15.762,8.047L11.381,12.522L9.166,10.399L7.93,11.638L11.381,15L17,9.285L15.762,8.047Z" style="fill:white;fill-rule:nonzero;"/>
-            </g>
-        </g>
-    </g>
+<g transform="matrix(1,0,0,1,-197.772,-376.125)">
+<g transform="matrix(1.28727,0,0,1.28727,-185.288,-236.524)">
+<g transform="matrix(1.25456,0,0,1.25456,-164.192,-209.593)">
+<circle cx="645" cy="823.354" r="276.929" style="fill:rgb(235,235,235);"/>
+</g>
+  <g transform="matrix(17.6233,0,0,17.6233,433.521,611.874)">
+<path d="M12,0C8.629,2.866 6.516,3 3,3L3,14.535C3,19.138 6.203,20.339 12,24C17.797,20.339 21,19.138 21,14.535L21,3C17.484,3 15.371,2.866 12,0Z" style="fill:rgb(86,217,95);fill-rule:nonzero;"/>
+    <path d="M12.99,-1.164C12.419,-1.649 11.581,-1.649 11.01,-1.164C8.014,1.383 6.125,1.472 3,1.472C2.156,1.472 1.472,2.156 1.472,3L1.472,14.535C1.472,17.357 2.45,19.137 4.32,20.771C5.891,22.144 8.2,23.407 11.184,25.292C11.682,25.607 12.318,25.607 12.816,25.292C15.8,23.407 18.109,22.144 19.68,20.771C21.55,19.137 22.528,17.357 22.528,14.535L22.528,3C22.528,2.156 21.844,1.472 21,1.472C17.875,1.472 15.986,1.383 12.99,-1.164ZM12,0C8.629,2.866 6.516,3 3,3L3,14.535C3,19.138 6.203,20.339 12,24C17.797,20.339 21,19.138 21,14.535L21,3C17.484,3 15.371,2.866 12,0Z" style="fill:rgb(216,216,216);"/>
+</g>
+  <g transform="matrix(24.4351,0,0,24.4351,340.416,541.775)">
+<path d="M15.762,8.047L11.381,12.522L9.166,10.399L7.93,11.638L11.381,15L17,9.285L15.762,8.047Z" style="fill:white;fill-rule:nonzero;"/>
+</g>
+</g>
+</g>
 </svg>

package/tracking/components/PrivacySettings/connector.js

@@ -1,8 +1,6 @@
-import{connect}from'react-redux';import{acceptAllCookies,acceptSelectedCookies}from"../../actions";import{getAreComfortCookiesAcceptedInternal,getAreStatisticsCookiesAcceptedInternal}from"../../selectors/cookieConsent";/**
- * Maps the contents of the state to the component props.
- * @param {Object} state The current application state.
+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 mapStateToProps=function mapStateToProps(state){return{comfortCookiesAcceptedState:getAreComfortCookiesAcceptedInternal(state),statisticsCookiesAcceptedState:getAreStatisticsCookiesAcceptedInternal(state)};};/**
+ */var makeMapStateToProps=function makeMapStateToProps(){var getPrivacyPolicyLink=makeGetPrivacyPolicyLink();return function(state){return{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(mapStateToProps,mapDispatchToProps);
+ */var mapDispatchToProps={acceptAllCookies:acceptAllCookies,acceptSelectedCookies:acceptSelectedCookies};export default connect(makeMapStateToProps,mapDispatchToProps);

package/tracking/components/PrivacySettings/index.js

@@ -1,4 +1,4 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_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,{useCallback,useState}from'react';import{Button,Grid,I18n,Link,Switch}from'@shopgate/engage/components';import PropTypes from'prop-types';import{PRIVACY_PATH}from'@shopgate/engage/page';import{appConfig}from'@shopgate/engage';import{i18n}from'@shopgate/engage/core';import classNames from'classnames';import styles from"./style";import connect from"./connector";/**
+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,{useCallback,useState}from'react';import{Button,Grid,I18n,Link,Switch,ConditionalWrapper}from'@shopgate/engage/components';import PropTypes from'prop-types';import{appConfig}from'@shopgate/engage';import{i18n}from'@shopgate/engage/core';import classNames from'classnames';import styles from"./style";import connect from"./connector";/**
  * The PrivacySettings component.
  * @returns {JSX.Element}
- */var PrivacySettings=function PrivacySettings(_ref){var acceptAllCookies=_ref.acceptAllCookies,acceptSelectedCookies=_ref.acceptSelectedCookies,comfortCookiesAcceptedState=_ref.comfortCookiesAcceptedState,statisticsCookiesAcceptedState=_ref.statisticsCookiesAcceptedState;var _appConfig$cookieCons=appConfig.cookieConsent;_appConfig$cookieCons=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons;var settingsComfortText=_appConfig$cookieCons.settingsComfortText,settingsComfortTitle=_appConfig$cookieCons.settingsComfortTitle,settingsStatisticsText=_appConfig$cookieCons.settingsStatisticsText,settingsStatisticsTitle=_appConfig$cookieCons.settingsStatisticsTitle,settingsRequiredText=_appConfig$cookieCons.settingsRequiredText,settingsRequiredTitle=_appConfig$cookieCons.settingsRequiredTitle,showComfortCookiesToggle=_appConfig$cookieCons.showComfortCookiesToggle;var _useState=useState(comfortCookiesAcceptedState!==null?comfortCookiesAcceptedState:false),_useState2=_slicedToArray(_useState,2),areComfortCookiesSelected=_useState2[0],setAreComfortCookiesSelected=_useState2[1];var _useState3=useState(statisticsCookiesAcceptedState!==null?statisticsCookiesAcceptedState:false),_useState4=_slicedToArray(_useState3,2),areStatisticsCookiesSelected=_useState4[0],setAreStatisticsCookiesSelected=_useState4[1];var handleChangeComfortCookies=useCallback(function(){setAreComfortCookiesSelected(!areComfortCookiesSelected);},[areComfortCookiesSelected]);var handleChangeStatisticsCookies=useCallback(function(){setAreStatisticsCookiesSelected(!areStatisticsCookiesSelected);},[areStatisticsCookiesSelected]);var handleAcceptAllCookies=useCallback(function(){setAreStatisticsCookiesSelected(true);setAreComfortCookiesSelected(true);acceptAllCookies();},[acceptAllCookies]);return/*#__PURE__*/React.createElement(Grid,{component:"div",className:styles.container},/*#__PURE__*/React.createElement(Grid.Item,{component:"div",className:styles.item},showComfortCookiesToggle?/*#__PURE__*/React.createElement(Grid.Item,{component:"div",className:styles.switchWrapper},/*#__PURE__*/React.createElement(Switch,{onChange:handleChangeComfortCookies,checked:areComfortCookiesSelected,a11yFallbackText:"".concat(i18n.text(settingsComfortTitle||'cookieSettings.comfortTitle'),". ").concat(i18n.text(settingsComfortText||'cookieSettings.comfort'))},/*#__PURE__*/React.createElement("span",{className:styles.title},/*#__PURE__*/React.createElement(I18n.Text,{string:settingsComfortTitle||'cookieSettings.comfortTitle'})),/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(I18n.Text,{string:settingsComfortText||'cookieSettings.comfort'})))):null,/*#__PURE__*/React.createElement(Grid.Item,{component:"div",className:styles.switchWrapper},/*#__PURE__*/React.createElement(Switch,{onChange:handleChangeStatisticsCookies,checked:areStatisticsCookiesSelected,a11yFallbackText:"".concat(i18n.text(settingsStatisticsTitle||'cookieSettings.statisticsTitle'),". ").concat(i18n.text(settingsStatisticsText||'cookieSettings.statistics'))},/*#__PURE__*/React.createElement("span",{className:styles.title},/*#__PURE__*/React.createElement(I18n.Text,{string:settingsStatisticsTitle||'cookieSettings.statisticsTitle'})),/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(I18n.Text,{string:settingsStatisticsText||'cookieSettings.statistics'})))),/*#__PURE__*/React.createElement(Grid.Item,{component:"div",className:styles.switchWrapper},/*#__PURE__*/React.createElement(Switch,{disabled:true,checked:true,a11yFallbackText:"".concat(i18n.text(settingsRequiredTitle||'cookieSettings.requiredTitle'),". ").concat(i18n.text(settingsRequiredText||'cookieSettings.required'))},/*#__PURE__*/React.createElement("span",{className:styles.title},/*#__PURE__*/React.createElement(I18n.Text,{string:settingsRequiredTitle||'cookieSettings.requiredTitle'})),/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(I18n.Text,{string:settingsRequiredText||'cookieSettings.required'}))))),/*#__PURE__*/React.createElement(Grid.Item,{component:"div",className:styles.buttonWrapper},/*#__PURE__*/React.createElement(Button,{onClick:function onClick(){return handleAcceptAllCookies();},type:"primary",className:classNames(styles.button,'privacy-settings__button-accept-all')},/*#__PURE__*/React.createElement(I18n.Text,{string:"cookieConsentModal.buttonAcceptAll"})),/*#__PURE__*/React.createElement(Button,{onClick:function onClick(){return acceptSelectedCookies({comfortCookiesAccepted:areComfortCookiesSelected,statisticsCookiesAccepted:areStatisticsCookiesSelected});},type:"simple",className:classNames(styles.button,'privacy-settings__button-accept-selected')},/*#__PURE__*/React.createElement(I18n.Text,{string:"cookieConsentModal.modalButtonConfirmSelected"}))),/*#__PURE__*/React.createElement(Grid.Item,{component:"div"},/*#__PURE__*/React.createElement(I18n.Text,{string:"cookieSettings.privacy"},/*#__PURE__*/React.createElement(I18n.Placeholder,{forKey:"privacyLink"},/*#__PURE__*/React.createElement(Link,{href:PRIVACY_PATH,tag:"span"},/*#__PURE__*/React.createElement(I18n.Text,{string:"cookieConsentModal.privacyText",className:styles.link}))))));};PrivacySettings.defaultProps={comfortCookiesAcceptedState:null,statisticsCookiesAcceptedState:null};export default connect(PrivacySettings);
+ */var PrivacySettings=function PrivacySettings(_ref){var acceptAllCookies=_ref.acceptAllCookies,acceptSelectedCookies=_ref.acceptSelectedCookies,comfortCookiesAcceptedState=_ref.comfortCookiesAcceptedState,statisticsCookiesAcceptedState=_ref.statisticsCookiesAcceptedState,privacyPolicyLink=_ref.privacyPolicyLink;var _appConfig$cookieCons=appConfig.cookieConsent,_appConfig$cookieCons2=_appConfig$cookieCons===void 0?{}:_appConfig$cookieCons,settingsComfortText=_appConfig$cookieCons2.settingsComfortText,settingsComfortTitle=_appConfig$cookieCons2.settingsComfortTitle,settingsStatisticsText=_appConfig$cookieCons2.settingsStatisticsText,settingsStatisticsTitle=_appConfig$cookieCons2.settingsStatisticsTitle,settingsRequiredText=_appConfig$cookieCons2.settingsRequiredText,settingsRequiredTitle=_appConfig$cookieCons2.settingsRequiredTitle,showComfortCookiesToggle=_appConfig$cookieCons2.showComfortCookiesToggle;var _useState=useState(comfortCookiesAcceptedState!==null?comfortCookiesAcceptedState:false),_useState2=_slicedToArray(_useState,2),areComfortCookiesSelected=_useState2[0],setAreComfortCookiesSelected=_useState2[1];var _useState3=useState(statisticsCookiesAcceptedState!==null?statisticsCookiesAcceptedState:false),_useState4=_slicedToArray(_useState3,2),areStatisticsCookiesSelected=_useState4[0],setAreStatisticsCookiesSelected=_useState4[1];var handleChangeComfortCookies=useCallback(function(){setAreComfortCookiesSelected(!areComfortCookiesSelected);},[areComfortCookiesSelected]);var handleChangeStatisticsCookies=useCallback(function(){setAreStatisticsCookiesSelected(!areStatisticsCookiesSelected);},[areStatisticsCookiesSelected]);var handleAcceptAllCookies=useCallback(function(){setAreStatisticsCookiesSelected(true);setAreComfortCookiesSelected(true);acceptAllCookies();},[acceptAllCookies]);return React.createElement(Grid,{component:"div",className:styles.container},React.createElement(Grid.Item,{component:"div",className:styles.item},showComfortCookiesToggle?React.createElement(Grid.Item,{component:"div",className:styles.switchWrapper},React.createElement(Switch,{onChange:handleChangeComfortCookies,checked:areComfortCookiesSelected,a11yFallbackText:"".concat(i18n.text(settingsComfortTitle||'cookieSettings.comfortTitle'),". ").concat(i18n.text(settingsComfortText||'cookieSettings.comfort'))},React.createElement("span",{className:styles.title},React.createElement(I18n.Text,{string:settingsComfortTitle||'cookieSettings.comfortTitle'})),React.createElement("span",null,React.createElement(I18n.Text,{string:settingsComfortText||'cookieSettings.comfort'})))):null,React.createElement(Grid.Item,{component:"div",className:styles.switchWrapper},React.createElement(Switch,{onChange:handleChangeStatisticsCookies,checked:areStatisticsCookiesSelected,a11yFallbackText:"".concat(i18n.text(settingsStatisticsTitle||'cookieSettings.statisticsTitle'),". ").concat(i18n.text(settingsStatisticsText||'cookieSettings.statistics'))},React.createElement("span",{className:styles.title},React.createElement(I18n.Text,{string:settingsStatisticsTitle||'cookieSettings.statisticsTitle'})),React.createElement("span",null,React.createElement(I18n.Text,{string:settingsStatisticsText||'cookieSettings.statistics'})))),React.createElement(Grid.Item,{component:"div",className:styles.switchWrapper},React.createElement(Switch,{disabled:true,checked:true,a11yFallbackText:"".concat(i18n.text(settingsRequiredTitle||'cookieSettings.requiredTitle'),". ").concat(i18n.text(settingsRequiredText||'cookieSettings.required'))},React.createElement("span",{className:styles.title},React.createElement(I18n.Text,{string:settingsRequiredTitle||'cookieSettings.requiredTitle'})),React.createElement("span",null,React.createElement(I18n.Text,{string:settingsRequiredText||'cookieSettings.required'}))))),React.createElement(Grid.Item,{component:"div",className:styles.buttonWrapper},React.createElement(Button,{onClick:function onClick(){return handleAcceptAllCookies();},type:"primary",className:classNames(styles.button,'privacy-settings__button-accept-all')},React.createElement(I18n.Text,{string:"cookieConsentModal.buttonAcceptAll"})),React.createElement(Button,{onClick:function onClick(){return acceptSelectedCookies({comfortCookiesAccepted:areComfortCookiesSelected,statisticsCookiesAccepted:areStatisticsCookiesSelected});},type:"simple",className:classNames(styles.button,'privacy-settings__button-accept-selected')},React.createElement(I18n.Text,{string:"cookieConsentModal.modalButtonConfirmSelected"}))),React.createElement(Grid.Item,{component:"div"},React.createElement(I18n.Text,{string:"cookieSettings.privacy"},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}))))));};PrivacySettings.defaultProps={comfortCookiesAcceptedState:null,statisticsCookiesAcceptedState:null,privacyPolicyLink:null};export default connect(PrivacySettings);