@shopgate/engage 7.32.0-beta.7 → 7.32.0-beta.9

package/styles/theme/utils/color.d.ts

@@ -24,7 +24,7 @@ export declare const getContrastRatio: (color: string, color2: string, backgroun
  * @param returnType The type of return value to create. Defaults to 'hex'.
  * @returns The desired color value
  */
-export declare const toHex: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const toHex: (color: ColorInstance, returnType?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -48,14 +48,14 @@ export declare const toHex: (color: ColorInstance, returnType?: ColorType) => st
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Converts a passed color to an RGB color
  * @param color The color to convert.
  * @param returnType The type of return value to create. Defaults to 'rgb'.
  * @returns The desired color value
  */
-export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -79,14 +79,14 @@ export declare const toRgb: (color: ColorInstance, returnType?: ColorType) => st
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Converts a passed color to an HSL color
  * @param color The color to convert.
  * @param returnType The type of return value to create. Defaults to 'hsl'.
  * @returns The desired color value
  */
-export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -110,7 +110,7 @@ export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => st
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Adds hsl lightness to a color
  * @param color The color to modify.
@@ -118,7 +118,7 @@ export declare const toHsl: (color: ColorInstance, returnType?: ColorType) => st
  * @param type The type of return value to create. Defaults to 'hsl'.
  * @returns The desired color value
  */
-export declare const addLightness: (color: ColorInstance, value: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const addLightness: (color: ColorInstance, value: number, type?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -142,7 +142,7 @@ export declare const addLightness: (color: ColorInstance, value: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Lightens a color by a given offset
  * @param color The color to modify.
@@ -150,7 +150,7 @@ export declare const addLightness: (color: ColorInstance, value: number, type?:
  * @param type The type of return value to create. Defaults to 'hsl'.
  * @returns The desired color value
  */
-export declare const lighten: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const lighten: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -174,7 +174,7 @@ export declare const lighten: (color: ColorInstance, totalOffset: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 /**
  * Darkens a color by a given offset
  * @param color The color to modify.
@@ -182,7 +182,7 @@ export declare const lighten: (color: ColorInstance, totalOffset: number, type?:
  * @param type The type of return value to create. Defaults to 'hsl'.
  * @returns The desired color value
  */
-export declare const darken: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
+export declare const darken: (color: ColorInstance, totalOffset: number, type?: ColorType) => string | number[] | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | /*elided*/ any | ArrayLike<number> | {
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
@@ -206,6 +206,6 @@ export declare const darken: (color: ColorInstance, totalOffset: number, type?:
     [key: string]: any;
 }> | ArrayLike<number> | {
     [key: string]: any;
-}> | number[];
+}>;
 export {};
 //# sourceMappingURL=color.d.ts.map

package/styles/theme/utils/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../styles/theme/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5D,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,YAWrC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,mBAAmB,WAYpB,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACuB,CAAC;AAEvD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,aAAa,EACpB,OAAO,MAAM,EACb,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACkC,CAAC;AAC5D;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACsC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;aACqC,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../styles/theme/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5D,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,YAWrC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,mBAAmB,WAYpB,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,aAAa,EACpB,aAAY,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACuB,CAAC;AAEvD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,aAAa,EACpB,OAAO,MAAM,EACb,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACkC,CAAC;AAC5D;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACsC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,aAAa,EACpB,aAAa,MAAM,EACnB,OAAM,SAAiB;;;;;;;;;;;;;;;;;;;;;;;;EACqC,CAAC"}

package/tracking/components/CookieConsentModal/index.js

@@ -2,7 +2,8 @@ import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Button, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Grid, I18n, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { appConfig } from '@shopgate/engage';
 import connect from "./connector";
 import cookieImage from "./tracking-opt-in.svg";
@@ -164,21 +165,19 @@ const CookieConsentModal = ({
           className: classes.buttonWrapper,
           children: [/*#__PURE__*/_jsx(Button, {
             onClick: handleAcceptAllCookies,
-            type: "primary",
+            color: "secondary",
             className: cx(classes.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: cx(classes.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: cx(classes.button, 'cookie-consent-modal__button-open-settings'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonConfigureSettings || 'cookieConsentModal.buttonConfigure'

package/tracking/components/PrivacySettings/index.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { Button, Grid, I18n, Link, Switch, ConditionalWrapper } from '@shopgate/engage/components';
+import { Grid, I18n, Link, Switch, ConditionalWrapper } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { appConfig } from '@shopgate/engage';
@@ -148,7 +149,7 @@ const PrivacySettings = ({
       className: classes.buttonWrapper,
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: () => handleAcceptAllCookies(),
-        type: "primary",
+        color: "secondary",
         className: cx(classes.button, 'privacy-settings__button-accept-all'),
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "cookieConsentModal.buttonAcceptAll"
@@ -158,7 +159,6 @@ const PrivacySettings = ({
           comfortCookiesAccepted: areComfortCookiesSelected,
           statisticsCookiesAccepted: areStatisticsCookiesSelected
         }),
-        type: "simple",
         className: cx(classes.button, 'privacy-settings__button-accept-selected'),
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "cookieConsentModal.modalButtonConfirmSelected"

package/cart/components/PaymentBar/PaymentBarReserveButton.connector.js

@@ -1,6 +0,0 @@
-import { connect } from 'react-redux';
-import { historyReset } from '@shopgate/pwa-common/actions/router';
-const mapDispatchToProps = {
-  historyReset
-};
-export default connect(null, mapDispatchToProps);

package/cart/components/PaymentBar/PaymentBarReserveButton.js

@@ -1,71 +0,0 @@
-import "core-js/modules/es.regexp.flags.js";
-import React from 'react';
-import PropTypes from 'prop-types';
-import { I18n, SurroundPortals, RippleButton } from '@shopgate/engage/components';
-import { makeStyles } from '@shopgate/engage/styles';
-import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
-import { FulfillmentSheet, STAGE_RESERVE_FORM } from "../../../locations";
-import { CartContext } from "../../cart.context";
-import connect from "./PaymentBarReserveButton.connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  button: {
-    width: '100%',
-    background: theme.components.ctaButton.background,
-    color: `${theme.contrastColor(theme.components.ctaButton.background)}!important`
-  },
-  disabledButton: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    color: `${theme.contrastColor(theme.palette.action.disabledBackground)}!important`
-  }
-}));
-
-/**
- * The reserve button component.
- * @param {Object} props The component props.
- * @param {Function} props.historyReset The history reset function.
- * @return {JSX.Element} The rendered component.
- */
-const PaymentBarReserveButton = ({
-  historyReset
-}) => {
-  const {
-    classes
-  } = useStyles();
-  const {
-    flags: {
-      orderable
-    }
-  } = React.useContext(CartContext);
-
-  /**
-   * Handles the click on the button.
-   */
-  const handleClick = React.useCallback(() => {
-    FulfillmentSheet.open({
-      stage: STAGE_RESERVE_FORM,
-      callback: (_location, _product, orderSuccess) => {
-        if (orderSuccess === true) {
-          historyReset();
-        }
-      }
-    });
-  }, [historyReset]);
-  return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: CART_CHECKOUT_BUTTON,
-    portalProps: {
-      isActive: orderable
-    },
-    children: /*#__PURE__*/_jsx(RippleButton, {
-      onClick: handleClick,
-      disabled: !orderable,
-      type: "regular",
-      className: orderable ? classes.button : classes.disabledButton,
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "cart.reserve"
-      })
-    })
-  });
-};
-export default connect(PaymentBarReserveButton);

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.connector.js

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import { historyPush } from '@shopgate/pwa-common/actions/router/historyPush';
-
-/**
- * @param {Function} dispatch The redux dispatch function.
- * @return {Object} The extended component props.
- */
-const mapDispatchToProps = dispatch => ({
-  openMap: url => dispatch(historyPush({
-    pathname: url,
-    state: {
-      target: '_blank'
-    }
-  }))
-});
-export default connect(null, mapDispatchToProps);

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js

@@ -1,52 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { i18n, generateGoogleMapsDirectionsUrl } from '@shopgate/engage/core';
-import { makeStyles } from '@shopgate/engage/styles';
-import { RippleButton } from '@shopgate/engage/components';
-import connect from "./StoreFinderGetDirectionsButton.connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  container: {},
-  button: {
-    width: '100%',
-    background: `${theme.palette.primary.main} !important`,
-    color: `${theme.palette.primary.contrastText} !important`,
-    fontSize: `${theme.typography.body2.fontSize} !important`
-  }
-}));
-
-/**
- * @param {Object} props The component props
- * @returns {JSX}
- */
-const StoreFinderGetDirectionsButton = ({
-  address,
-  openMap,
-  className
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  const url = useMemo(() => address && generateGoogleMapsDirectionsUrl(address), [address]);
-  const handleClick = useCallback(() => {
-    openMap(url);
-  }, [openMap, url]);
-  if (!address) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    className: cx(classes.container, className),
-    children: /*#__PURE__*/_jsx(RippleButton, {
-      onClick: handleClick,
-      className: classes.button,
-      children: i18n.text('locations.get_directions')
-    })
-  });
-};
-StoreFinderGetDirectionsButton.defaultProps = {
-  address: null,
-  openMap: () => {},
-  className: null
-};
-export default connect(StoreFinderGetDirectionsButton);