@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.1

package/checkout/components/ShippingMethods/ShippingMethod.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { Image } from '@shopgate/engage/components';
+import { Image, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useCheckoutContext } from '@shopgate/engage/checkout/hooks/common';
 import ShippingMethodIcon from '@shopgate/pwa-ui-shared/icons/ShippingMethodIcon';
@@ -9,8 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     display: 'flex',
-    alignItems: 'center',
-    fontSize: 15
+    alignItems: 'center'
   },
   imageContainer: {
     width: 32,
@@ -63,10 +62,12 @@ const ShippingMethod = ({
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.label,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        component: "span",
         className: classes.name,
         children: serviceLevel?.name
-      }), /*#__PURE__*/_jsx("span", {
+      }), /*#__PURE__*/_jsx(Typography, {
+        component: "span",
         children: serviceLevel?.cost ? i18n.price(serviceLevel?.cost, currencyCode, 2) : i18n.text('shipping.free_short')
       })]
     })]

package/checkout/components/ShippingMethods/ShippingMethods.js

@@ -5,7 +5,7 @@ import sortBy from 'lodash/sortBy';
 import uniqBy from 'lodash/uniqBy';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { RadioGroupV2 as RadioGroup, RadioCard, MessageBar } from '@shopgate/engage/components';
+import { RadioGroupV2 as RadioGroup, RadioCard, MessageBar, Typography } from '@shopgate/engage/components';
 import { useCheckoutContext } from '@shopgate/engage/checkout/hooks/common';
 import ShippingMethod from "./ShippingMethod";
 import connect from "./connector";
@@ -35,17 +35,14 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(0, 2, 4)
   },
   headline: {
-    fontSize: '1.25rem',
-    fontWeight: 'normal',
     padding: theme.spacing(0, 1, 0, 0),
     margin: theme.spacing(0, 0, 1, 0),
-    color: theme.palette.text.primary,
     textTransform: 'none'
   },
   container: {
-    border: '1px solid #eaeaea',
+    border: `1px solid ${theme.components.border.light}`,
     ' li:nth-of-type(2n)': {
-      background: 'var(--color-background-accent)'
+      background: theme.palette.background.emphasized
     }
   },
   containerSingle: {
@@ -168,7 +165,10 @@ const ShippingMethods = ({
   if (shippingMethods.length === 0) {
     return /*#__PURE__*/_jsxs("div", {
       className: classes.root,
-      children: [/*#__PURE__*/_jsx("h3", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        color: "textPrimary",
+        fontWeight: "regular",
         className: classes.headline,
         children: i18n.text('checkout.shippingMethod.title')
       }), /*#__PURE__*/_jsx(MessageBar, {
@@ -185,7 +185,10 @@ const ShippingMethods = ({
   }
   return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
-    children: [/*#__PURE__*/_jsx("h3", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      color: "textPrimary",
+      fontWeight: "regular",
       className: classes.headline,
       children: i18n.text('checkout.shippingMethod.title')
     }), shippingMethods.length === 1 ? /*#__PURE__*/_jsx("div", {

package/checkout/components/SupplementalContent/SupplementalContent.connector.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { makeGetShopSettingByKey, SHOP_SETTING_ORDER_SUPPLEMENTAL_CONTENT } from '@shopgate/engage/core';
+import { makeGetShopSettingByKey } from '@shopgate/engage/settings/selectors/shopSettings';
+import { SHOP_SETTING_ORDER_SUPPLEMENTAL_CONTENT } from '@shopgate/engage/settings/constants/shopSettings';
 
 /**
  * Creates the mapStateToProps connector function.

package/checkout/components/SupplementalContent/SupplementalContent.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./SupplementalContent.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   wrapper: {
     display: 'block',
-    color: theme.palette.text.secondary,
-    fontSize: 12,
     lineHeight: 'unset',
     padding: theme.spacing(2, 0),
     '> *:first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
@@ -25,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
     },
     ' a': {
       textDecoration: 'underline',
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     }
   }
 }));
@@ -46,15 +45,15 @@ const SupplementalContent = ({
   if (!text) {
     return null;
   }
-
-  /* eslint-disable react/no-danger */
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "caption",
+    component: "div",
+    color: "textSecondary",
     className: cx(classes.wrapper, className),
     dangerouslySetInnerHTML: {
       __html: text
     }
   });
-  /* eslint-enable react/no-danger */
 };
 SupplementalContent.defaultProps = {
   text: null,

package/checkout/paymentMethods/index.js

@@ -1,6 +1,7 @@
 import React, { useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { connect, useStore } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getPaymentMethods } from "../selectors/payment";
 import { getCheckoutOrder } from "../selectors/order";
@@ -34,12 +35,9 @@ const mapDispatchToProps = dispatch => ({
 });
 const useStyles = makeStyles()(theme => ({
   headline: {
-    fontSize: '1.25rem',
-    fontWeight: 'normal',
     margin: theme.spacing(0, 0, 1, 0),
     marginLeft: 16,
     marginRight: 8,
-    color: theme.palette.text.primary,
     textTransform: 'none'
   },
   section: {
@@ -160,7 +158,10 @@ const PaymentMethodProvider = ({
     value: paymentMethodApi,
     children: /*#__PURE__*/_jsxs("div", {
       className: classes.section,
-      children: [/*#__PURE__*/_jsx("h3", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        color: "textPrimary",
+        fontWeight: "regular",
         className: classes.headline,
         children: i18n.text('checkout.payment.title')
       }), /*#__PURE__*/_jsx("div", {

package/checkout/paymentMethods/paypal/PaypalPayButton.js

@@ -3,19 +3,17 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getThemeSettings, showModal, MODAL_PIPELINE_ERROR } from '@shopgate/engage/core';
 import { connect } from 'react-redux';
+import { Typography } from '@shopgate/engage/components';
 import { i18n } from "../../../core/helpers/i18n";
 import { useCheckoutContext } from "../../hooks/common";
 import { usePaypal } from "./sdk";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
   headline: {
-    fontSize: '1.25rem',
-    fontWeight: 'normal',
     margin: '12px 0 12px 0',
-    color: theme.palette.text.primary,
     textTransform: 'none'
   }
-}));
+});
 
 /**
  * Paypal Pay button
@@ -115,7 +113,10 @@ const PaypalPayButton = ({
     return null;
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("h3", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      color: "textPrimary",
+      fontWeight: "regular",
       className: classes.headline,
       children: i18n.text('checkout.finalizePayment')
     }), /*#__PURE__*/_jsx("div", {

package/checkout/paymentMethods/stripe/StripeCreditCard.js

@@ -1,17 +1,13 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { useContext } from 'react';
-import { themeConfig } from '@shopgate/engage';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { TextField } from '@shopgate/engage/components';
-import { getCSSCustomProp, makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { CardNumberElement, CardCvcElement, CardExpiryElement } from '@stripe/react-stripe-js';
 import Section from "../../components/Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import StripeContext from "./StripeProvider.context";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   root: {
     padding: '0 16px',
@@ -19,12 +15,12 @@ const useStyles = makeStyles()(theme => ({
     flexDirection: 'column',
     flex: '0 0 auto',
     ' .formElement': {
-      background: 'var(--color-background-accent)',
+      background: theme.palette.background.emphasized,
       padding: 0,
       marginBottom: 38,
       borderTopLeftRadius: 4,
       borderTopRightRadius: 4,
-      borderBottom: `1px solid ${colors.shade12}`
+      borderBottom: `1px solid ${theme.components.border.medium}`
     },
     ' .formElement label': {
       color: theme.palette.text.secondary,
@@ -100,6 +96,7 @@ const StripeCreditCard = () => {
   const {
     classes
   } = useStyles();
+  const theme = useTheme();
   const cardRef = React.useRef();
   const {
     error,
@@ -126,9 +123,9 @@ const StripeCreditCard = () => {
   const textFieldStyles = {
     style: {
       base: {
-        color: getCSSCustomProp('--color-text-high-emphasis'),
+        color: theme.palette.text.primary,
         '::placeholder': {
-          color: getCSSCustomProp('--color-text-low-emphasis')
+          color: theme.palette.text.secondary
         }
       }
     }

package/components/ChipLayout/index.js

@@ -43,16 +43,16 @@ const useStyles = makeStyles()((theme, {
     marginLeft: 'auto',
     outline: 0,
     padding: 9,
-    fontSize: '0.8rem',
-    fontWeight: 500,
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     textTransform: 'uppercase'
   },
   moreButtonInverted: {
     marginLeft: 'auto',
     outline: 0,
     padding: 9,
-    fontSize: '0.8rem',
-    fontWeight: 500,
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     textTransform: 'uppercase'
   }
 }));

package/components/Form/Builder/ElementPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/ElementPhoneNumber.jsx"],"names":[],"mappings":";AA4DA;;;;GAIG;AACH,8EAgLG;uBAjPoB,OAAO"}
+{"version":3,"file":"ElementPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/ElementPhoneNumber.jsx"],"names":[],"mappings":";AAyDA;;;;GAIG;AACH,8EAgLG;uBA9OoB,OAAO"}

package/components/Form/Builder/ElementPhoneNumber.js

@@ -16,14 +16,10 @@ import fr from 'react-phone-number-input/locale/fr';
 import pt from 'react-phone-number-input/locale/pt';
 import flags from 'react-phone-number-input/flags';
 import { useCountriesNames } from '@shopgate/engage/i18n';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
 import Label from '@shopgate/pwa-ui-shared/TextField/components/Label';
 import FormHelper from "./FormHelper";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   phoneField: {
     position: 'relative',
@@ -32,11 +28,11 @@ const useStyles = makeStyles()(theme => ({
     paddingBottom: theme.spacing(2.5),
     ' input.PhoneInputInput': {
       outline: 'none',
-      fontSize: '1rem',
+      fontSize: theme.typography.body1.fontSize,
       lineHeight: '1.1875rem',
       borderRadius: 0,
       paddingBottom: theme.spacing(0.75),
-      borderBottom: `1px solid ${colors.shade12}`,
+      borderBottom: `1px solid ${theme.components.border.medium}`,
       '&:focus': {
         borderBottom: `2px solid ${theme.palette.primary.main}`,
         paddingBottom: theme.spacing(0.75) - 1

package/components/Form/Builder/stylePresets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylePresets.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/stylePresets.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;EAmBE;AAOK,6CAHI,MAAM,GACJ,MAAM,CA+HjB"}
+{"version":3,"file":"stylePresets.d.ts","sourceRoot":"","sources":["../../../../components/Form/Builder/stylePresets.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;EAmBE;AAOK,6CAHI,MAAM,GACJ,MAAM,CA8HjB"}

package/components/Form/Builder/stylePresets.js

@@ -1,8 +1,4 @@
-import { themeConfig } from '@shopgate/engage';
 import { responsiveMediaQuery } from '@shopgate/engage/styles';
-const {
-  colors
-} = themeConfig;
 export const TWO_COLUMN_LAYOUT = {
   [responsiveMediaQuery('>=md', {
     webOnly: false
@@ -38,9 +34,8 @@ export const getOutlinedFormFields = theme => ({
       position: 'relative',
       textOverflow: 'unset',
       whiteSpace: 'unset',
-      lineHeight: '15px',
       bottom: 'unset',
-      padding: '8px 8px 8px 16px'
+      padding: '6px 8px 6px 16px'
     }
   },
   ' .formBuilderField': {
@@ -57,34 +52,34 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker': {
     paddingBottom: 8,
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     padding: 0,
     marginBottom: 32,
     borderTopLeftRadius: 4,
     borderTopRightRadius: 4,
-    borderBottom: `1px solid ${colors.shade12}`
+    borderBottom: `1px solid ${theme.components.border.medium}`
   },
   ' .phonePickerError': {
     borderBottom: `2px solid ${theme.palette.error.main}`
   },
   ' .phonePickerFocused:not(.phonePickerError)': {
-    borderBottom: '2px solid var(--color-primary)'
+    borderBottom: `2px solid ${theme.palette.primary.main}`
   },
   ' .formElement:not(.radioGroup) label': {
     paddingLeft: 24,
-    color: 'var(--color-text-low-emphasis)',
+    color: theme.palette.text.secondary,
     transform: 'translate3d(0, -18px, 0) scale3d(0.75, 0.75, 0.75)'
   },
   ' .textField label': {
     paddingLeft: 17,
-    color: 'var(--color-text-low-emphasis)',
+    color: theme.palette.text.secondary,
     '&.floating': {
       transform: 'translate3d(3px, -18px, 0) scale3d(0.75, 0.75, 0.75)'
     }
   },
   ' .formElement:not(.radioGroup) select, .formElement .info-field': {
     paddingLeft: 16,
-    color: 'var(--color-text-high-emphasis)'
+    color: theme.palette.text.primary
   },
   ' .formElement:not(.radioGroup):not(.checkbox) svg': {
     marginTop: 8,
@@ -92,7 +87,7 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .formElement:not(.radioGroup) .placeholder': {
     paddingLeft: 20,
-    color: 'var(--color-text-low-emphasis)'
+    color: theme.palette.text.secondary
   },
   ' .formElement.disabled, .textField.disabled': {
     ' input, select, svg': {
@@ -104,7 +99,7 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .textField input': {
     paddingLeft: 16,
-    color: 'var(--color-text-high-emphasis)'
+    color: theme.palette.text.primary
   },
   ' .underline': {
     marginBottom: 0,
@@ -133,12 +128,12 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .phonePicker .PhoneInputInput': {
     borderBottom: 'none',
-    color: 'var(--color-text-high-emphasis)',
+    color: theme.palette.text.primary,
     '&:focus': {
       borderBottom: 'none'
     },
     '::placeholder': {
-      color: 'var(--color-text-low-emphasis)'
+      color: theme.palette.text.secondary
     }
   },
   ' .phonePicker .errorText': {
@@ -154,6 +149,6 @@ export const getOutlinedFormFields = theme => ({
     marginBottom: 8
   },
   ' .placeholder': {
-    color: colors.shade12
+    color: theme.palette.grey.medium
   }
 });

package/components/Logo/connector.js

@@ -1,5 +1,7 @@
 import { connect } from 'react-redux';
-import { hasWebBridge, makeGetShopSettingByKey, SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP, SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB } from '@shopgate/engage/core';
+import { hasWebBridge } from '@shopgate/engage/core';
+import { makeGetShopSettingByKey } from '@shopgate/engage/settings/selectors/shopSettings';
+import { SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP, SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB } from '@shopgate/engage/settings/constants/shopSettings';
 
 /**
  * Creates the mapStateToProps connector function.

package/components/Menu/components/Item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Menu/components/Item/index.jsx"],"names":[],"mappings":";AA4BA;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAsCvB;;;;;;;;;;QAUY,oCAAQ;;QACV,kCAAQ;;;;sBA/EG,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Menu/components/Item/index.jsx"],"names":[],"mappings":";AAyBA;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CA+BvB;;;;;;;;;;QAUY,oCAAQ;;QACV,kCAAQ;;;;sBArEG,YAAY"}

package/components/Menu/components/Item/index.js

@@ -2,22 +2,17 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import compose from 'lodash/fp/compose';
 import Glow from '@shopgate/pwa-ui-shared/Glow';
-import Color from 'color';
-import { makeStyles, getCSSCustomProp } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()((theme, {
-  background
-}) => ({
+const useStyles = makeStyles()(theme => ({
   item: {
     position: 'relative',
     whiteSpace: 'nowrap',
-    padding: theme.spacing(1.75, 2.75),
-    lineHeight: 1,
+    padding: theme.spacing(1.3, 2.75),
     zIndex: 1,
     cursor: 'pointer',
     ':hover': {
-      background
+      background: theme.alpha(theme.palette.primary.main, 0.04)
     }
   }
 }));
@@ -38,16 +33,9 @@ const Item = ({
   closeMenu,
   onClick
 }) => {
-  let background = themeConfig.colors.shade8;
-  const customPropColor = getCSSCustomProp('--color-primary');
-  if (customPropColor) {
-    background = Color(customPropColor).alpha(0.04).toString();
-  }
   const {
     classes
-  } = useStyles({
-    background
-  });
+  } = useStyles();
   const handleClick = compose(onClick, () => setTimeout(closeMenu, CLOSE_DELAY));
   const handleKeyPress = useCallback(event => {
     if (event.key === 'Enter' || event.key === ' ') {

package/components/Menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Menu/index.jsx"],"names":[],"mappings":";AAgCA;;;;GAIG;AACH,kEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;;;;;QAeU,kCAAQ;;;;iBAzFF,mBAAmB;sBANd,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Menu/index.jsx"],"names":[],"mappings":";AA+BA;;;;GAIG;AACH,kEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;;;;;QAeU,kCAAS;;;;iBAzFH,mBAAmB;sBALd,YAAY"}

package/components/Menu/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { ConnectedReactPortal } from '@shopgate/engage/components';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Position from "./components/Position";
 import Item from "./components/Item";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,9 +21,9 @@ const useStyles = makeStyles()(theme => ({
     left: 0,
     padding: theme.spacing(1, 0),
     minWidth: 130,
-    background: themeConfig.colors.light,
+    background: theme.palette.background.surface,
     borderRadius: 2,
-    boxShadow: themeConfig.shadows.contextMenu
+    boxShadow: '0 2px 6px rgba(0, 0, 0, .4)'
   }
 }));
 

package/components/MessageBar/MessageBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBar.d.ts","sourceRoot":"","sources":["../../../components/MessageBar/MessageBar.jsx"],"names":[],"mappings":";mDA8IW,MAAM,GAKL,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlJD,YAAY;uBADX,OAAO"}
+{"version":3,"file":"MessageBar.d.ts","sourceRoot":"","sources":["../../../components/MessageBar/MessageBar.jsx"],"names":[],"mappings":";mDA2IW,MAAM,GAKL,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA/ID,YAAY;uBADX,OAAO"}