@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/checkout/paymentMethods/index.js

@@ -12,6 +12,7 @@ import { i18n } from "../../core/helpers/i18n";
 import Context from "./context";
 import paypal from "./paypal";
 import stripe from "./stripe";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AVAILABLE_PAYMENT_METHOD = [paypal, stripe];
 
 /**
@@ -156,34 +157,38 @@ const PaymentMethodProvider = ({
     provider: Provider,
     content: Content
   } = paymentImpl || {};
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: paymentMethodApi
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.section
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: styles.headline
-  }, i18n.text('checkout.payment.title')), /*#__PURE__*/React.createElement("div", {
-    className: styles.buttons
-  }, availablePaymentMethods.map(method => /*#__PURE__*/React.createElement(method.button, {
-    key: method.internalCode,
-    settings: method.settings,
-    onChange: meta => handleChangePayment(method.internalCode, meta),
-    active: method.internalCode === paymentMethodCode,
-    activePaymentMeta: activePaymentMeta
-  }))), paymentImpl ? /*#__PURE__*/React.createElement(Provider
-  /**
-   * 2025-01-10: Not 100% sure why a context is being passed here. It seems to work
-   * without it, but since the payment component implementation has a high complexity,
-   * but isn't really used right now in production shops, i kept it for now.
-   * To enable compatibility with react-redux > 7, the "store" prop was added so that
-   * Redux connected child components can still access the store.
-   * Should be revisited when the "native checkout" gets relevance.
-   */, {
-    context: Context,
-    store: store,
-    data: paymentData,
-    activePaymentMeta: activePaymentMeta
-  }, /*#__PURE__*/React.createElement(Content, null)) : null));
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: paymentMethodApi,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.section,
+      children: [/*#__PURE__*/_jsx("h3", {
+        className: styles.headline,
+        children: i18n.text('checkout.payment.title')
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.buttons,
+        children: availablePaymentMethods.map(method => /*#__PURE__*/_jsx(method.button, {
+          settings: method.settings,
+          onChange: meta => handleChangePayment(method.internalCode, meta),
+          active: method.internalCode === paymentMethodCode,
+          activePaymentMeta: activePaymentMeta
+        }, method.internalCode))
+      }), paymentImpl ? /*#__PURE__*/_jsx(Provider
+      /**
+       * 2025-01-10: Not 100% sure why a context is being passed here. It seems to work
+       * without it, but since the payment component implementation has a high complexity,
+       * but isn't really used right now in production shops, i kept it for now.
+       * To enable compatibility with react-redux > 7, the "store" prop was added so that
+       * Redux connected child components can still access the store.
+       * Should be revisited when the "native checkout" gets relevance.
+       */, {
+        context: Context,
+        store: store,
+        data: paymentData,
+        activePaymentMeta: activePaymentMeta,
+        children: /*#__PURE__*/_jsx(Content, {})
+      }) : null]
+    })
+  });
 };
 PaymentMethodProvider.defaultProps = {
   order: null,

package/checkout/paymentMethods/paypal/PaypalButton.js

@@ -8,10 +8,15 @@ import PaypalButtonApp from "./PaypalButtonApp";
  * @param {Object} props Props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PaypalButton = props => {
   if (!isAvailable()) {
-    return /*#__PURE__*/React.createElement(PaypalButtonWeb, props);
+    return /*#__PURE__*/_jsx(PaypalButtonWeb, {
+      ...props
+    });
   }
-  return /*#__PURE__*/React.createElement(PaypalButtonApp, props);
+  return /*#__PURE__*/_jsx(PaypalButtonApp, {
+    ...props
+  });
 };
 export default PaypalButton;

package/checkout/paymentMethods/paypal/PaypalButtonApp.js

@@ -5,6 +5,7 @@ import { PayPalRiskCheck } from '@shopgate/native-modules';
 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({
     width: '60%'
@@ -38,11 +39,14 @@ const PaypalButtonApp = props => {
     };
     handler();
   }, [setLocked, settings]);
-  return /*#__PURE__*/React.createElement(Button, props, /*#__PURE__*/React.createElement("img", {
-    className: styles.logo,
-    src: paypalLogoUrl,
-    alt: "PayPal"
-  }));
+  return /*#__PURE__*/_jsx(Button, {
+    ...props,
+    children: /*#__PURE__*/_jsx("img", {
+      className: styles.logo,
+      src: paypalLogoUrl,
+      alt: "PayPal"
+    })
+  });
 };
 PaypalButtonApp.defaultProps = {
   settings: null

package/checkout/paymentMethods/paypal/PaypalButtonWeb.js

@@ -4,6 +4,7 @@ import { css } from 'glamor';
 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({
     ' .paypal-mark': {
@@ -72,17 +73,19 @@ const PaypalButton = ({
       });
     }, []);
   }, [marks]);
-  return /*#__PURE__*/React.createElement(Fragment, null, marks.map(([, fundingSource], index) => {
-    const isButtonActive = fundingSource === paypal.FUNDING.PAYPAL && !activeFundingSource ? active : active && fundingSource === activeFundingSource;
-    return /*#__PURE__*/React.createElement(Button, {
-      key: fundingSource,
-      onChange: () => onChange(fundingSource),
-      active: isButtonActive
-    }, /*#__PURE__*/React.createElement("div", {
-      id: `sg-paypal-button-${index}`,
-      className: styles.button
-    }));
-  }));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: marks.map(([, fundingSource], index) => {
+      const isButtonActive = fundingSource === paypal.FUNDING.PAYPAL && !activeFundingSource ? active : active && fundingSource === activeFundingSource;
+      return /*#__PURE__*/_jsx(Button, {
+        onChange: () => onChange(fundingSource),
+        active: isButtonActive,
+        children: /*#__PURE__*/_jsx("div", {
+          id: `sg-paypal-button-${index}`,
+          className: styles.button
+        })
+      }, fundingSource);
+    })
+  });
 };
 PaypalButton.defaultProps = {
   settings: null,

package/checkout/paymentMethods/paypal/PaypalPayButton.js

@@ -6,6 +6,7 @@ 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({
     fontSize: '1.25rem',
@@ -110,11 +111,14 @@ const PaypalPayButton = ({
   if (!paypal) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("h3", {
-    className: styles.headline
-  }, i18n.text('checkout.finalizePayment')), /*#__PURE__*/React.createElement("div", {
-    ref: button
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("h3", {
+      className: styles.headline,
+      children: i18n.text('checkout.finalizePayment')
+    }), /*#__PURE__*/_jsx("div", {
+      ref: button
+    })]
+  });
 };
 const mapDispatchToProps = {
   showModal

package/checkout/paymentMethods/stripe/StripeButton.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'glamor';
@@ -9,6 +8,7 @@ import { useCheckoutContext } from "../../hooks/common";
 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({
     height: 32
@@ -59,30 +59,38 @@ const StripeButton = ({
     };
     fn();
   }, [order, publishableKey]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-    onChange: () => onChange(null),
-    active: active && !subMethod
-  }), i18n.text('checkout.payment.buttons.stripe')), stripeRequest && stripeRequestType?.applePay ? /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-    active: !!(active && subMethod),
-    onChange: () => onChange({
-      stripeRequest,
-      stripeRequestType
-    })
-  }), /*#__PURE__*/React.createElement("img", {
-    className: styles.mark,
-    alt: "ApplePay",
-    src: applePayLogo
-  })) : null, stripeRequest && !stripeRequestType?.applePay ? /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-    active: !!(active && subMethod),
-    onChange: () => onChange({
-      stripeRequest,
-      stripeRequestType
-    })
-  }), /*#__PURE__*/React.createElement("img", {
-    className: styles.mark,
-    alt: "GooglePay",
-    src: googlePayLogo
-  })) : null);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      ...props,
+      onChange: () => onChange(null),
+      active: active && !subMethod,
+      children: i18n.text('checkout.payment.buttons.stripe')
+    }), stripeRequest && stripeRequestType?.applePay ? /*#__PURE__*/_jsx(Button, {
+      ...props,
+      active: !!(active && subMethod),
+      onChange: () => onChange({
+        stripeRequest,
+        stripeRequestType
+      }),
+      children: /*#__PURE__*/_jsx("img", {
+        className: styles.mark,
+        alt: "ApplePay",
+        src: applePayLogo
+      })
+    }) : null, stripeRequest && !stripeRequestType?.applePay ? /*#__PURE__*/_jsx(Button, {
+      ...props,
+      active: !!(active && subMethod),
+      onChange: () => onChange({
+        stripeRequest,
+        stripeRequestType
+      }),
+      children: /*#__PURE__*/_jsx("img", {
+        className: styles.mark,
+        alt: "GooglePay",
+        src: googlePayLogo
+      })
+    }) : null]
+  });
 };
 StripeButton.defaultProps = {
   publishableKey: null,

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: '',
@@ -72,6 +71,7 @@ const initialOptInFormState = {
 
 /**
  * Checkout Provider
+ * @param {CheckoutProviderProps} props The component props.
  * @returns {JSX.Element}
  */
 const CheckoutProvider = ({
@@ -111,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.
@@ -169,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' ? {
@@ -186,7 +186,7 @@ const CheckoutProvider = ({
               mobile: values.mobile,
               emailAddress: values.emailAddress
             })
-          } : [])],
+          } : []),
           primaryBillToAddressSequenceIndex: 0,
           primaryShipToAddressSequenceIndex: 1
         });
@@ -308,9 +308,9 @@ const CheckoutProvider = ({
           orderSegment: {
             selectedShippingMethod
           }
-        }, ...(isGuestCheckout && pickupAddress ? [{
+        }].concat(isGuestCheckout && pickupAddress ? [{
           ...pickupAddress
-        }] : [])],
+        }] : []),
         primaryBillToAddressSequenceIndex: 0,
         primaryShipToAddressSequenceIndex: 1
       });
@@ -374,7 +374,7 @@ const CheckoutProvider = ({
           reject
         };
       });
-      formState.handleSubmit(...params);
+      formState.handleSubmit.apply(formState, params);
       return promise;
     },
     handleValidation: () => formState.validate(formState.values),
@@ -443,18 +443,23 @@ 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,
+  campaignAttribution: null,
+  fulfillmentSlot: null,
+  isGuestCheckout: false,
+  isPickupContactSelectionEnabled: false,
+  isShippingAddressSelectionEnabled: false,
+  order: null,
   orderInitialized: false,
   orderReadOnly: false,
   orderReserveOnly: false,
-  isShippingAddressSelectionEnabled: false,
-  isPickupContactSelectionEnabled: false,
-  isGuestCheckout: false,
-  campaignAttribution: null
+  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'] : []));