@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.1

package/checkout/paymentMethods/index.js

@@ -1,8 +1,7 @@
 import React, { useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { connect, useStore } from 'react-redux';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { getPaymentMethods } from "../selectors/payment";
 import { getCheckoutOrder } from "../selectors/order";
 import CheckoutContext from "../providers/CheckoutProvider.context";
@@ -33,31 +32,28 @@ const mapDispatchToProps = dispatch => ({
   updateOrder: order => dispatch(updateCheckoutOrder(order)),
   fetchOrder: () => dispatch(fetchCheckoutOrder())
 });
-const {
-  variables
-} = themeConfig;
-const styles = {
-  headline: css({
+const useStyles = makeStyles()(theme => ({
+  headline: {
     fontSize: '1.25rem',
     fontWeight: 'normal',
-    margin: `0 0 ${variables.gap.small}px 0`,
+    margin: theme.spacing(0, 0, 1, 0),
     marginLeft: 16,
     marginRight: 8,
-    color: 'var(--color-text-high-emphasis)',
+    color: theme.palette.text.primary,
     textTransform: 'none'
-  }).toString(),
-  section: css({
+  },
+  section: {
     marginBottom: 0,
     marginTop: 4
-  }).toString(),
-  buttons: css({
+  },
+  buttons: {
     marginLeft: 16,
     marginRight: 16,
     marginBottom: 16,
     display: 'flex',
     flexDirection: 'row'
-  }).toString()
-};
+  }
+}));
 
 /**
  * PaymentMethodProvider
@@ -70,6 +66,9 @@ const PaymentMethodProvider = ({
   fetchOrder,
   updateOrder
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [activePaymentMeta, setActivePaymentMeta] = useState(null);
   const {
     setPaymentHandler,
@@ -160,12 +159,12 @@ const PaymentMethodProvider = ({
   return /*#__PURE__*/_jsx(Context.Provider, {
     value: paymentMethodApi,
     children: /*#__PURE__*/_jsxs("div", {
-      className: styles.section,
+      className: classes.section,
       children: [/*#__PURE__*/_jsx("h3", {
-        className: styles.headline,
+        className: classes.headline,
         children: i18n.text('checkout.payment.title')
       }), /*#__PURE__*/_jsx("div", {
-        className: styles.buttons,
+        className: classes.buttons,
         children: availablePaymentMethods.map(method => /*#__PURE__*/_jsx(method.button, {
           settings: method.settings,
           onChange: meta => handleChangePayment(method.internalCode, meta),

package/checkout/paymentMethods/paypal/PaypalButtonApp.js

@@ -1,22 +1,25 @@
 import React, { useEffect } from 'react';
-import { css } from 'glamor';
 import PropTypes from 'prop-types';
 import { PayPalRiskCheck } from '@shopgate/native-modules';
+import { makeStyles } from '@shopgate/engage/styles';
 import { useCheckoutContext } from "../../hooks/common";
 import Button from "../../components/PaymentMethodButton";
 import paypalLogoUrl from "./paypal_logo.png";
 import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  logo: css({
+const useStyles = makeStyles()({
+  logo: {
     width: '60%'
-  }).toString()
-};
+  }
+});
 
 /**
  * @param {Object} props The component props
  * @returns {JSX}
  */
 const PaypalButtonApp = props => {
+  const {
+    classes
+  } = useStyles();
   const {
     settings
   } = props;
@@ -42,7 +45,7 @@ const PaypalButtonApp = props => {
   return /*#__PURE__*/_jsx(Button, {
     ...props,
     children: /*#__PURE__*/_jsx("img", {
-      className: styles.logo,
+      className: classes.logo,
       src: paypalLogoUrl,
       alt: "PayPal"
     })

package/checkout/paymentMethods/paypal/PaypalButtonWeb.js

@@ -1,12 +1,12 @@
 import React, { Fragment, useLayoutEffect, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import { useCheckoutContext } from "../../hooks/common";
 import Button from "../../components/PaymentMethodButton";
 import { loadWebSdk, usePaypal } from "./sdk";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const styles = {
-  button: css({
+const useStyles = makeStyles()({
+  button: {
     ' .paypal-mark': {
       ' img': {
         height: 25,
@@ -17,8 +17,8 @@ const styles = {
       margin: 0,
       padding: 0
     }
-  }).toString()
-};
+  }
+});
 
 /**
  * Paypal
@@ -31,6 +31,9 @@ const PaypalButton = ({
   activePaymentMeta: activeFundingSource,
   active
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     setLocked,
     order
@@ -81,7 +84,7 @@ const PaypalButton = ({
         active: isButtonActive,
         children: /*#__PURE__*/_jsx("div", {
           id: `sg-paypal-button-${index}`,
-          className: styles.button
+          className: classes.button
         })
       }, fundingSource);
     })

package/checkout/paymentMethods/paypal/PaypalPayButton.js

@@ -1,21 +1,21 @@
 import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import { getThemeSettings, showModal, MODAL_PIPELINE_ERROR } from '@shopgate/engage/core';
 import { connect } from 'react-redux';
 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 styles = {
-  headline: css({
+const useStyles = makeStyles()(theme => ({
+  headline: {
     fontSize: '1.25rem',
     fontWeight: 'normal',
     margin: '12px 0 12px 0',
-    color: 'var(--color-text-high-emphasis)',
+    color: theme.palette.text.primary,
     textTransform: 'none'
-  }).toString()
-};
+  }
+}));
 
 /**
  * Paypal Pay button
@@ -28,6 +28,9 @@ const PaypalPayButton = ({
   onValidate,
   showModal
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     paymentData,
     paymentTransactions
@@ -113,7 +116,7 @@ const PaypalPayButton = ({
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("h3", {
-      className: styles.headline,
+      className: classes.headline,
       children: i18n.text('checkout.finalizePayment')
     }), /*#__PURE__*/_jsx("div", {
       ref: button

package/checkout/paymentMethods/stripe/StripeButton.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import Button from "../../components/PaymentMethodButton";
 import { i18n } from "../../../core/helpers/i18n";
 import { loadSdk } from "./sdk";
@@ -9,11 +9,11 @@ import connect from "./StripeButton.connector";
 import googlePayLogo from "./googlepay.png";
 import applePayLogo from "./applepay.svg";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  mark: css({
+const useStyles = makeStyles()({
+  mark: {
     height: 32
-  }).toString()
-};
+  }
+});
 
 /**
  * Stripe Payment Button Component
@@ -31,6 +31,9 @@ const StripeButton = ({
   activePaymentMeta: subMethod,
   ...props
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [stripeRequest, setStripeRequest] = useState(null);
   const [stripeRequestType, setStripeRequestType] = useState(null);
   const {
@@ -77,7 +80,7 @@ const StripeButton = ({
         stripeRequestType
       }),
       children: /*#__PURE__*/_jsx("img", {
-        className: styles.mark,
+        className: classes.mark,
         alt: "ApplePay",
         src: applePayLogo
       })
@@ -89,7 +92,7 @@ const StripeButton = ({
         stripeRequestType
       }),
       children: /*#__PURE__*/_jsx("img", {
-        className: styles.mark,
+        className: classes.mark,
         alt: "GooglePay",
         src: googlePayLogo
       })

package/checkout/paymentMethods/stripe/StripeCreditCard.js

@@ -1,10 +1,9 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { useContext } from 'react';
-import { css } from 'glamor';
 import { themeConfig } from '@shopgate/engage';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { TextField } from '@shopgate/engage/components';
-import { getCSSCustomProp } from '@shopgate/engage/styles';
+import { getCSSCustomProp, makeStyles } from '@shopgate/engage/styles';
 import { CardNumberElement, CardCvcElement, CardExpiryElement } from '@stripe/react-stripe-js';
 import Section from "../../components/Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
@@ -13,14 +12,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
-const styles = {
-  root: css({
+const useStyles = makeStyles()(theme => ({
+  root: {
     padding: '0 16px',
     display: 'flex',
     flexDirection: 'column',
     flex: '0 0 auto',
     ' .formElement': {
-      background: `var(--color-background-accent, ${colors.shade8})`,
+      background: 'var(--color-background-accent)',
       padding: 0,
       marginBottom: 38,
       borderTopLeftRadius: 4,
@@ -28,7 +27,7 @@ const styles = {
       borderBottom: `1px solid ${colors.shade12}`
     },
     ' .formElement label': {
-      color: 'var(--color-text-low-emphasis)',
+      color: theme.palette.text.secondary,
       paddingLeft: 24
     },
     ' .underline': {
@@ -42,19 +41,19 @@ const styles = {
     ' .StripeElement': {
       paddingLeft: 16
     }
-  }).toString(),
-  secondRow: css({
+  },
+  secondRow: {
     display: 'flex',
     flexDirection: 'row'
-  }).toString(),
-  cvc: css({
+  },
+  cvc: {
     flex: 1.5,
     marginRight: 16
-  }).toString(),
-  expiry: css({
+  },
+  expiry: {
     flex: 1
-  }).toString()
-};
+  }
+}));
 
 /* eslint-disable react/prop-types */
 /**
@@ -98,6 +97,9 @@ const StripeCardExpiryElement = wrapStripeElement(CardExpiryElement);
  * @returns {JSX}
  */
 const StripeCreditCard = () => {
+  const {
+    classes
+  } = useStyles();
   const cardRef = React.useRef();
   const {
     error,
@@ -133,7 +135,7 @@ const StripeCreditCard = () => {
   };
   return /*#__PURE__*/_jsx("div", {
     ref: cardRef,
-    className: styles.root,
+    className: classes.root,
     children: /*#__PURE__*/_jsxs(Section, {
       title: "checkout.creditCard.headline",
       hasForm: true,
@@ -153,9 +155,9 @@ const StripeCreditCard = () => {
           }
         }
       }), /*#__PURE__*/_jsxs("div", {
-        className: styles.secondRow,
+        className: classes.secondRow,
         children: [/*#__PURE__*/_jsx(TextField, {
-          className: styles.cvc,
+          className: classes.cvc,
           label: i18n.text('checkout.creditCard.cvc'),
           name: "creditCard",
           inputComponent: StripeCardCvcElement,
@@ -168,7 +170,7 @@ const StripeCreditCard = () => {
             }
           }
         }), /*#__PURE__*/_jsx(TextField, {
-          className: styles.expiry,
+          className: classes.expiry,
           label: i18n.text('checkout.creditCard.expiry'),
           name: "creditCard",
           inputComponent: StripeCardExpiryElement,

package/checkout/selectors/order.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { createSelector } from 'reselect';
 import { isUserLoggedIn } from '@shopgate/pwa-common/selectors/user';
 import { DIRECT_SHIP, ROPIS, BOPIS } from '@shopgate/engage/locations';

package/components/BrandingColorBanner/BrandingColorBanner.d.ts

@@ -0,0 +1,7 @@
+export default BrandingColorBanner;
+/**
+ * The Viewport component.
+ * @returns {JSX}
+ */
+declare function BrandingColorBanner(): JSX;
+//# sourceMappingURL=BrandingColorBanner.d.ts.map

package/components/BrandingColorBanner/BrandingColorBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingColorBanner.d.ts","sourceRoot":"","sources":["../../../components/BrandingColorBanner/BrandingColorBanner.jsx"],"names":[],"mappings":";AAcA;;;GAGG;AACH,wCAFa,GAAG,CAUf"}

package/components/BrandingColorBanner/BrandingColorBanner.js

@@ -1,25 +1,31 @@
 import React from 'react';
 import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
-import { css } from 'glamor';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const brandingColorBanner = css({
-  position: 'fixed',
-  backgroundColor: 'var(--color-background-gutter-header, var(--color-primary))',
-  left: 0,
-  right: 0,
-  height: 288
+const useStyles = makeStyles()({
+  brandingColorBanner: {
+    position: 'fixed',
+    backgroundColor: 'var(--color-background-gutter-header, var(--color-primary))',
+    left: 0,
+    right: 0,
+    height: 288
+  }
 });
 
 /**
  * The Viewport component.
- * @param {Object} props The component props.
  * @returns {JSX}
  */
-const BrandingColorBanner = () => /*#__PURE__*/_jsx(ResponsiveContainer, {
-  breakpoint: ">xs",
-  webOnly: true,
-  children: /*#__PURE__*/_jsx("div", {
-    className: brandingColorBanner
-  })
-});
+const BrandingColorBanner = () => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx(ResponsiveContainer, {
+    breakpoint: ">xs",
+    webOnly: true,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.brandingColorBanner
+    })
+  });
+};
 export default BrandingColorBanner;

package/components/BrandingColorBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./BrandingColorBanner";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/BrandingColorBanner/index.js"],"names":[],"mappings":""}

package/components/ChipLayout/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The height of one row.
+ * @type {number}
+ */
+export const CHIP_ROW_HEIGHT: number;
+/**
+ * The minimum width that a chip should have.
+ * @type {number}
+ */
+export const CHIP_MINIMUM_WIDTH: number;
+declare const _default: React.MemoExoticComponent<{
+    ({ children, handleMoreButton, invertMoreButton, maxRows, moreLabel, pathname, }: Object): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        handleMoreButton: PropTypes.Requireable<(...args: any[]) => any>;
+        invertMoreButton: PropTypes.Requireable<boolean>;
+        maxRows: PropTypes.Requireable<number>;
+        moreLabel: PropTypes.Requireable<string>;
+        pathname: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        children: null;
+        handleMoreButton: () => void;
+        invertMoreButton: boolean;
+        maxRows: number;
+        moreLabel: string;
+        pathname: string;
+    };
+}>;
+export default _default;
+import PropTypes from 'prop-types';
+import React from 'react';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ChipLayout/index.jsx"],"names":[],"mappings":"AASA;;;GAGG;AACH,8BAFU,MAAM,CAEkB;AAElC;;;GAGG;AACH,iCAFU,MAAM,CAEqB;;sFA0C1B,MAAM,GACJ,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;sBA3DF,YAAY;kBAD3B,OAAO"}