@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/checkout/paymentMethods/stripe/StripeCreditCard.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { useContext } from 'react';
 import { css } from 'glamor';
 import { themeConfig } from '@shopgate/engage';
@@ -9,6 +9,7 @@ import { CardNumberElement, CardCvcElement, CardExpiryElement } from '@stripe/re
 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;
@@ -61,25 +62,31 @@ const styles = {
  * @param {Object} Element element
  * @returns {Object}
  */
-const wrapStripeElement = Element => class extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.onChange = () => {
-      this.props.onChange({
+const wrapStripeElement = Element => /*#__PURE__*/function (_React$Component) {
+  function _class(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.onChange = () => {
+      _this.props.onChange({
         target: {
           value: ' '
         }
       });
     };
+    return _this;
   }
+  _inheritsLoose(_class, _React$Component);
+  var _proto = _class.prototype;
   /** Render
    * @returns {JSX} */
-  render() {
-    return /*#__PURE__*/React.createElement(Element, _extends({}, this.props, {
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(Element, {
+      ...this.props,
       onChange: this.onChange
-    }));
-  }
-};
+    });
+  };
+  return _class;
+}(React.Component);
 /* eslint-enable react/prop-types */
 
 const StripeCardNumberElement = wrapStripeElement(CardNumberElement);
@@ -124,55 +131,58 @@ const StripeCreditCard = () => {
       }
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     ref: cardRef,
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    title: "checkout.creditCard.headline",
-    hasForm: true
-  }, /*#__PURE__*/React.createElement(TextField, {
-    label: i18n.text('checkout.creditCard.card'),
-    name: "creditCard",
-    inputComponent: StripeCardNumberElement,
-    isControlled: false,
-    value: " ",
-    errorText: error || undefined,
-    onChange: () => error && setError(null),
-    variables: true,
-    attributes: {
-      options: {
-        showIcon: true,
-        ...textFieldStyles
-      }
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.secondRow
-  }, /*#__PURE__*/React.createElement(TextField, {
-    className: styles.cvc,
-    label: i18n.text('checkout.creditCard.cvc'),
-    name: "creditCard",
-    inputComponent: StripeCardCvcElement,
-    isControlled: false,
-    onChange: () => error && setError(null),
-    value: " ",
-    attributes: {
-      options: {
-        ...textFieldStyles
-      }
-    }
-  }), /*#__PURE__*/React.createElement(TextField, {
-    className: styles.expiry,
-    label: i18n.text('checkout.creditCard.expiry'),
-    name: "creditCard",
-    inputComponent: StripeCardExpiryElement,
-    isControlled: false,
-    onChange: () => error && setError(null),
-    value: " ",
-    attributes: {
-      options: {
-        ...textFieldStyles
-      }
-    }
-  }))));
+    className: styles.root,
+    children: /*#__PURE__*/_jsxs(Section, {
+      title: "checkout.creditCard.headline",
+      hasForm: true,
+      children: [/*#__PURE__*/_jsx(TextField, {
+        label: i18n.text('checkout.creditCard.card'),
+        name: "creditCard",
+        inputComponent: StripeCardNumberElement,
+        isControlled: false,
+        value: " ",
+        errorText: error || undefined,
+        onChange: () => error && setError(null),
+        variables: true,
+        attributes: {
+          options: {
+            showIcon: true,
+            ...textFieldStyles
+          }
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.secondRow,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          className: styles.cvc,
+          label: i18n.text('checkout.creditCard.cvc'),
+          name: "creditCard",
+          inputComponent: StripeCardCvcElement,
+          isControlled: false,
+          onChange: () => error && setError(null),
+          value: " ",
+          attributes: {
+            options: {
+              ...textFieldStyles
+            }
+          }
+        }), /*#__PURE__*/_jsx(TextField, {
+          className: styles.expiry,
+          label: i18n.text('checkout.creditCard.expiry'),
+          name: "creditCard",
+          inputComponent: StripeCardExpiryElement,
+          isControlled: false,
+          onChange: () => error && setError(null),
+          value: " ",
+          attributes: {
+            options: {
+              ...textFieldStyles
+            }
+          }
+        })]
+      })]
+    })
+  });
 };
 export default StripeCreditCard;

package/checkout/paymentMethods/stripe/StripePayButton.js

@@ -9,6 +9,7 @@ import { getSdk } from "./sdk";
  * Paypal Pay button
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StripePayButton = ({
   children,
   disabled,
@@ -29,7 +30,7 @@ const StripePayButton = ({
   }
 
   /* eslint-disable react/button-has-type */
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/_jsx("button", {
     disabled: disabled,
     lang: i18n.getLang(),
     onClick: () => {
@@ -51,8 +52,9 @@ const StripePayButton = ({
       WebkitAppearance: '-apple-pay-button',
       ApplePayButtonType: 'buy',
       height: 40
-    }
-  }, ' ');
+    },
+    children: ' '
+  });
   /* eslint-enable react/button-has-type */
 };
 export default StripePayButton;

package/checkout/paymentMethods/stripe/StripeProvider.js

@@ -15,6 +15,7 @@ import PaymentContext from "../context";
  * @param {Order} order Order
  * @return {Promise}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const prepareStripeRequestCheckout = (stripe, req, order) => new Promise(async (resolve, reject) => {
   // Update totals if they updated due to promotions etc.
   req.update({
@@ -65,14 +66,11 @@ const triggerStripeRequest = async (stripe, req, order, activeTransaction) => {
 
   // Send over to stripe and let it validate.
   const intent = activeTransaction?.checkoutParams?.paymentIntent;
-  /* eslint-disable camelcase */
   const result = await stripe.confirmCardPayment(intent, {
     payment_method: event.paymentMethod.id
   }, {
     handleActions: false
   });
-  /* eslint-enable camelcase */
-
   if (result.error) {
     event.complete('fail');
     throw result.error;
@@ -139,7 +137,6 @@ const StripeProvider = ({
         error: incomingError,
         paymentIntent
       } = await stripe.confirmCardPayment(activeTransaction.checkoutParams.paymentIntent, {
-        /* eslint-disable-next-line camelcase */
         payment_method: {
           card: elements.getElement(CardNumberElement)
         }
@@ -163,9 +160,10 @@ const StripeProvider = ({
   useEffect(() => {
     registerPaymentMethod(contextApi);
   }, [contextApi, registerPaymentMethod]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: contextApi
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: contextApi,
+    children: children
+  });
 };
 /**
  * A Provider that is needed for all stripe based
@@ -184,9 +182,12 @@ const StripeProviderWrapper = ({
     }
     loadSdk(publishableKey);
   }, [publishableKey]);
-  return /*#__PURE__*/React.createElement(Elements, {
-    stripe: stripePromise
-  }, /*#__PURE__*/React.createElement(StripeProvider, null, children));
+  return /*#__PURE__*/_jsx(Elements, {
+    stripe: stripePromise,
+    children: /*#__PURE__*/_jsx(StripeProvider, {
+      children: children
+    })
+  });
 };
 StripeProviderWrapper.defaultProps = {
   publishableKey: null

package/checkout/providers/AddressBookProvider.js

@@ -12,6 +12,7 @@ import { ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING, CHECKOUT_PATTERN } from ".
  * @param {Object} state The application state.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const makeMapStateToProp = () => state => ({
   order: getCheckoutOrder(state),
   billingAddress: getCheckoutBillingAddress(state),
@@ -160,9 +161,10 @@ const AddressBookProvider = ({
     popToCheckout,
     type
   }), [updateOrderWithContact, deleteContactFromOrder, popToCheckout, type]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 AddressBookProvider.defaultProps = {
   children: null,

package/checkout/providers/CheckoutProvider.js

@@ -1,5 +1,4 @@
 import "core-js/modules/web.url-search-params.js";
-/* eslint-disable no-unused-expressions */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isAvailable, InAppBrowser, Linking } from '@shopgate/native-modules';
 import { useFormState } from '@shopgate/engage/core/hooks/useFormState';
@@ -44,7 +43,7 @@ import { CHECKOUT_CONFIRMATION_PATTERN } from "../constants/routes";
  * @property {Function} clearCheckoutCampaign - Function to clear the checkout campaign.
  */
 /* eslint-enable max-len */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 const defaultPickupPersonState = {
   pickupPerson: 'me',
   firstName: '',
@@ -112,9 +111,9 @@ const CheckoutProvider = ({
   const [isLoading, setLoading] = useState(true);
   const [validationRules, setValidationRules] = useState(selfPickupConstraints);
   const [updateOptIns, setUpdateOptIns] = useState(false);
-  const defaultOptInFormState = {
+  const defaultOptInFormState = useMemo(() => ({
     ...initialOptInFormState
-  };
+  }), []);
   const optInFormState = useFormState(defaultOptInFormState, () => {});
 
   // Initialize checkout process.
@@ -170,10 +169,10 @@ const CheckoutProvider = ({
           addressSequences: [{
             ...billingAddress,
             customerContactId: billingAddress.customerContactId || undefined
-          }, ...(isShippingAddressSelectionEnabled ? {
+          }].concat(isShippingAddressSelectionEnabled ? {
             ...shippingAddress,
             customerContactId: shippingAddress.customerContactId || undefined
-          } : []), ...(isPickupContactSelectionEnabled ? {
+          } : [], isPickupContactSelectionEnabled ? {
             // When the customer is picking up himself we just take the
             // billing address as pickup address.
             ...(values.pickupPerson === 'me' ? {
@@ -187,7 +186,7 @@ const CheckoutProvider = ({
               mobile: values.mobile,
               emailAddress: values.emailAddress
             })
-          } : [])],
+          } : []),
           primaryBillToAddressSequenceIndex: 0,
           primaryShipToAddressSequenceIndex: 1
         });
@@ -309,9 +308,9 @@ const CheckoutProvider = ({
           orderSegment: {
             selectedShippingMethod
           }
-        }, ...(isGuestCheckout && pickupAddress ? [{
+        }].concat(isGuestCheckout && pickupAddress ? [{
           ...pickupAddress
-        }] : [])],
+        }] : []),
         primaryBillToAddressSequenceIndex: 0,
         primaryShipToAddressSequenceIndex: 1
       });
@@ -375,7 +374,7 @@ const CheckoutProvider = ({
           reject
         };
       });
-      formState.handleSubmit(...params);
+      formState.handleSubmit.apply(formState, params);
       return promise;
     },
     handleValidation: () => formState.validate(formState.values),
@@ -444,9 +443,10 @@ const CheckoutProvider = ({
   if (!isDataReady || !isCheckoutInitialized) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 CheckoutProvider.defaultProps = {
   billingAddress: null,
@@ -462,5 +462,4 @@ CheckoutProvider.defaultProps = {
   pickupAddress: null,
   shippingAddress: null
 };
-export default connect(CheckoutProvider);
-/* eslint-enable no-unused-expressions */
+export default connect(CheckoutProvider);

package/checkout/selectors/guestCheckout.js

@@ -10,4 +10,4 @@ export const isGuestCheckoutActive = createSelector(isUserLoggedIn, getCheckoutO
 /**
  * Returns all required fields for current guest checkout session.
  */
-export const getRequiredGuestCheckoutFields = createSelector(getIsReserveOnly, isReserveOnly => ['firstName', 'lastName', 'emailAddress', 'mobile', ...(!isReserveOnly ? ['address1', 'postalCode', 'city', 'country'] : [])]);
+export const getRequiredGuestCheckoutFields = createSelector(getIsReserveOnly, isReserveOnly => ['firstName', 'lastName', 'emailAddress', 'mobile'].concat(!isReserveOnly ? ['address1', 'postalCode', 'city', 'country'] : []));

package/components/BrandingColorBanner/BrandingColorBanner.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
 import { css } from 'glamor';
+import { jsx as _jsx } from "react/jsx-runtime";
 const brandingColorBanner = css({
   position: 'fixed',
   backgroundColor: 'var(--color-background-gutter-header, var(--color-primary))',
@@ -14,10 +15,11 @@ const brandingColorBanner = css({
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-const BrandingColorBanner = () => /*#__PURE__*/React.createElement(ResponsiveContainer, {
+const BrandingColorBanner = () => /*#__PURE__*/_jsx(ResponsiveContainer, {
   breakpoint: ">xs",
-  webOnly: true
-}, /*#__PURE__*/React.createElement("div", {
-  className: brandingColorBanner
-}));
+  webOnly: true,
+  children: /*#__PURE__*/_jsx("div", {
+    className: brandingColorBanner
+  })
+});
 export default BrandingColorBanner;

package/components/ChipLayout/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
@@ -5,6 +7,7 @@ import I18n from '@shopgate/pwa-common/components/I18n';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -24,18 +27,22 @@ export const CHIP_MINIMUM_WIDTH = 60;
 /**
  * The ChipLayout component.
  */
-class ChipLayout extends Component {
-  constructor(...args) {
-    super(...args);
+let ChipLayout = /*#__PURE__*/function (_Component) {
+  function ChipLayout(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Debounced, eg. layout effect
      */
-    this.processHiddenElementsDebounced = debounce(this.processHiddenElements, 50);
+    _this.processHiddenElementsDebounced = debounce(_this.processHiddenElements, 50);
+    return _this;
   }
+  _inheritsLoose(ChipLayout, _Component);
+  var _proto = ChipLayout.prototype;
   /**
    * When the component mounts we need to initially process all children.
    */
-  componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     this.processHiddenElementsDebounced();
   }
 
@@ -47,35 +54,19 @@ class ChipLayout extends Component {
    * It must be done on every prop change, including the pathname.
    * Sometimes this component is rendered invisible, then since `.processHiddenElements` uses
    * refs.clientHeight it would always be zero.
-   */
-  componentDidUpdate() {
+   */;
+  _proto.componentDidUpdate = function componentDidUpdate() {
     this.processHiddenElementsDebounced();
   }
 
   /**
    * Returns the maximum height the container should have.
    * @returns {number}
-   */
-  get maxContentHeight() {
-    // 8 -> container padding.
-    return CHIP_ROW_HEIGHT * this.props.maxRows + 8;
-  }
-
-  /**
-   * Returns the more button styles.
-   * @return {string} The store button class name.
-   */
-  get moreButtonStyles() {
-    if (this.props.invertMoreButton) {
-      return styles.moreButtonInverted;
-    }
-    return styles.moreButton;
-  }
-
+   */;
   /**
    * Loops through all children to make sure the more button appears if there is too much content.
    */
-  processHiddenElements() {
+  _proto.processHiddenElements = function processHiddenElements() {
     if (!this.containerRef) {
       return;
     }
@@ -128,37 +119,61 @@ class ChipLayout extends Component {
       element.setAttribute('style', 'display: none');
       return true;
     });
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsxs("div", {
       ref: element => {
         this.containerRef = element;
       },
-      className: `${styles.container(this.maxContentHeight)} engage__chip-layout`
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: element => {
-        this.layoutRef = element;
-      },
-      className: styles.layout
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
-      ref: element => {
-        this.moreButtonRef = element;
-      },
-      className: styles.moreButtonWrapper
-    }, /*#__PURE__*/React.createElement(RippleButton, {
-      fill: true,
-      type: "plain",
-      className: this.moreButtonStyles,
-      onClick: this.props.handleMoreButton
-    }, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: this.props.moreLabel
-    }))));
-  }
-}
+      className: `${styles.container(this.maxContentHeight)} engage__chip-layout`,
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: element => {
+          this.layoutRef = element;
+        },
+        className: styles.layout,
+        children: this.props.children
+      }), /*#__PURE__*/_jsx("div", {
+        ref: element => {
+          this.moreButtonRef = element;
+        },
+        className: styles.moreButtonWrapper,
+        children: /*#__PURE__*/_jsx(RippleButton, {
+          fill: true,
+          type: "plain",
+          className: this.moreButtonStyles,
+          onClick: this.props.handleMoreButton,
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: this.props.moreLabel
+          })
+        })
+      })]
+    });
+  };
+  return _createClass(ChipLayout, [{
+    key: "maxContentHeight",
+    get: function () {
+      // 8 -> container padding.
+      return CHIP_ROW_HEIGHT * this.props.maxRows + 8;
+    }
+
+    /**
+     * Returns the more button styles.
+     * @return {string} The store button class name.
+     */
+  }, {
+    key: "moreButtonStyles",
+    get: function () {
+      if (this.props.invertMoreButton) {
+        return styles.moreButtonInverted;
+      }
+      return styles.moreButton;
+    }
+  }]);
+}(Component);
 ChipLayout.defaultProps = {
   children: null,
   handleMoreButton: () => {},

package/components/ChipLayout/spec.js

@@ -8,22 +8,30 @@ import ChipsLayout from "./index";
  * browser to be tested as it needs a full browser that supports styling and
  * width/height calculation.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 describe('<ChipsLayout />', () => {
   it('should render with one chip', () => {
-    const Component = /*#__PURE__*/React.createElement(ChipsLayout, null, /*#__PURE__*/React.createElement(Chip, {
-      id: "some-id"
-    }, "foo"));
+    const Component = /*#__PURE__*/_jsx(ChipsLayout, {
+      children: /*#__PURE__*/_jsx(Chip, {
+        id: "some-id",
+        children: "foo"
+      })
+    });
     const wrapper = mount(Component);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Chip).length).toEqual(1);
     expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');
   });
   it('should render with two chips', () => {
-    const Component = /*#__PURE__*/React.createElement(ChipsLayout, null, /*#__PURE__*/React.createElement(Chip, {
-      id: "some-id"
-    }, "foo"), /*#__PURE__*/React.createElement(Chip, {
-      id: "some-other-id"
-    }, "bar"));
+    const Component = /*#__PURE__*/_jsxs(ChipsLayout, {
+      children: [/*#__PURE__*/_jsx(Chip, {
+        id: "some-id",
+        children: "foo"
+      }), /*#__PURE__*/_jsx(Chip, {
+        id: "some-other-id",
+        children: "bar"
+      })]
+    });
     const wrapper = mount(Component);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Chip).length).toEqual(2);

package/components/ConnectedReactPortal/index.js

@@ -1,30 +1,28 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Provider, ReactReduxContext } from 'react-redux';
-import Portal from 'react-portal';
+import { createPortal } from 'react-dom';
+const node = document.getElementById('portals');
 
 /**
- * @typedef {import('@types/react-portal')} ReactPortal
- */
-
-// eslint-disable-next-line valid-jsdoc
-/**
- * ConnectedReactPortal is a wrapper around "react-portal" v3 that ensures
- * children rendered in the portal have access to the Redux store.
- *
- * This addresses the limitation introduced by the switch to the new Context API in react-redux v6,
- * where the Redux store is only accessible to components within the StoreProvider. Since the Portal
- * component renders its children outside the React component tree, this wrapper bridges the gap.
- *
- * @type {ReactPortal}
+ * The connected react portal component rendering its children into a react portal node.
+ * @param {Object} props The component props
+ * @param {boolean} props.isOpened Whether the portal is open
+ * @param {React.ReactNode} props.children The children to render inside the portal
+ * @private
+ * @returns {React.ReactPortal|null}
  */
 const ConnectedReactPortal = ({
   children,
-  ...props
-}) => /*#__PURE__*/React.createElement(ReactReduxContext.Consumer, null, ctx => /*#__PURE__*/React.createElement(Portal, props, /*#__PURE__*/React.createElement(Provider, {
-  store: ctx.store
-}, children)));
+  isOpened
+}) => {
+  if (!isOpened) return null;
+  return /*#__PURE__*/createPortal(children, node);
+};
+ConnectedReactPortal.propTypes = {
+  children: PropTypes.node,
+  isOpened: PropTypes.bool
+};
 ConnectedReactPortal.defaultProps = {
-  children: null
+  children: null,
+  isOpened: false
 };
 export default ConnectedReactPortal;