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

package/checkout/components/GuestCheckout/GuestCheckoutPickupNotes.js

@@ -5,6 +5,7 @@ import { StylePresets } from '@shopgate/engage/components/Form';
 import generateFormConfig from "./GuestCheckoutPickupNotes.config";
 import Section from "../Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   root: css({
     padding: '16px 16px 0',
@@ -39,18 +40,20 @@ const GuestCheckoutPickupNotes = () => {
   if (!isPickupContactSelectionEnabled) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    title: "",
-    hasForm: true
-  }, /*#__PURE__*/React.createElement(FormBuilder, {
-    className: styles.form,
-    name: "PickupNotesForm",
-    config: formConfig,
-    defaults: defaultPickupPersonState,
-    validationErrors: formValidationErrors,
-    handleUpdate: handleUpdate
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.root,
+    children: /*#__PURE__*/_jsx(Section, {
+      title: "",
+      hasForm: true,
+      children: /*#__PURE__*/_jsx(FormBuilder, {
+        className: styles.form,
+        name: "PickupNotesForm",
+        config: formConfig,
+        defaults: defaultPickupPersonState,
+        validationErrors: formValidationErrors,
+        handleUpdate: handleUpdate
+      })
+    })
+  });
 };
 export default GuestCheckoutPickupNotes;

package/checkout/components/PaymentMethodButton/PaymentMethodButton.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { responsiveMediaQuery } from '@shopgate/engage/styles';
 import { css } from 'glamor';
 import { useCheckoutContext } from "../../hooks/common";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   root: css({
     outline: 'none',
@@ -52,11 +53,12 @@ const PaymentMethodButton = ({
   const {
     isLocked
   } = useCheckoutContext();
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/_jsx("button", {
     type: "button",
     disabled: isLocked,
     className: `${styles.root} ${active && styles.active}`,
-    onClick: () => onChange()
-  }, children);
+    onClick: () => onChange(),
+    children: children
+  });
 };
 export default PaymentMethodButton;

package/checkout/components/ResponsiveBackButton/ResponsiveBackButton.js

@@ -8,6 +8,7 @@ import { container, button, buttonIcon } from "./ResponsiveBackButton.style";
  * A back button  for the desktop checkout pages.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ResponsiveBackButton = ({
   label,
   onClick
@@ -22,18 +23,20 @@ const ResponsiveBackButton = ({
     }
     pop();
   }, [onClick, pop]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    flat: true,
-    className: button,
-    type: "secondary",
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement(ArrowIcon, {
-    className: buttonIcon
-  }), /*#__PURE__*/React.createElement(I18n.Text, {
-    string: label
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: container,
+    children: /*#__PURE__*/_jsxs(RippleButton, {
+      flat: true,
+      className: button,
+      type: "secondary",
+      onClick: handleClick,
+      children: [/*#__PURE__*/_jsx(ArrowIcon, {
+        className: buttonIcon
+      }), /*#__PURE__*/_jsx(I18n.Text, {
+        string: label
+      })]
+    })
+  });
 };
 ResponsiveBackButton.defaultProps = {
   label: 'common.back',

package/checkout/components/ShippingMethods/ShippingMethod.js

@@ -6,6 +6,7 @@ import { i18n } from '@shopgate/engage/core';
 import { Image } from '@shopgate/engage/components';
 import { useCheckoutContext } from '@shopgate/engage/checkout/hooks/common';
 import ShippingMethodIcon from '@shopgate/pwa-ui-shared/icons/ShippingMethodIcon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -50,20 +51,26 @@ const ShippingMethod = ({
     serviceLevel
   } = shippingMethod;
   const [useImage, setUseImage] = useState(!!serviceLevel?.iconUrl);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.root)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.imageContainer
-  }, useImage ? /*#__PURE__*/React.createElement(Image, {
-    className: styles.image,
-    src: serviceLevel?.iconUrl,
-    onError: () => setUseImage(false)
-  }) : /*#__PURE__*/React.createElement(ShippingMethodIcon, {
-    className: styles.image
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.label
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.name
-  }, serviceLevel?.name), /*#__PURE__*/React.createElement("span", null, serviceLevel?.cost ? i18n.price(serviceLevel?.cost, currencyCode, 2) : i18n.text('shipping.free_short'))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(styles.root),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.imageContainer,
+      children: useImage ? /*#__PURE__*/_jsx(Image, {
+        className: styles.image,
+        src: serviceLevel?.iconUrl,
+        onError: () => setUseImage(false)
+      }) : /*#__PURE__*/_jsx(ShippingMethodIcon, {
+        className: styles.image
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.label,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: styles.name,
+        children: serviceLevel?.name
+      }), /*#__PURE__*/_jsx("span", {
+        children: serviceLevel?.cost ? i18n.price(serviceLevel?.cost, currencyCode, 2) : i18n.text('shipping.free_short')
+      })]
+    })]
+  });
 };
 export default ShippingMethod;

package/checkout/components/ShippingMethods/ShippingMethods.js

@@ -11,6 +11,7 @@ import { RadioGroupV2 as RadioGroup, RadioCard, MessageBar } from '@shopgate/eng
 import { useCheckoutContext } from '@shopgate/engage/checkout/hooks/common';
 import ShippingMethod from "./ShippingMethod";
 import connect from "./connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -77,9 +78,10 @@ const hashShippingMethod = method => {
  */
 const CardComponent = ({
   children
-}) => /*#__PURE__*/React.createElement("li", {
-  className: styles.card
-}, children);
+}) => /*#__PURE__*/_jsx("li", {
+  className: styles.card,
+  children: children
+});
 CardComponent.defaultProps = {
   children: null
 };
@@ -165,45 +167,51 @@ const ShippingMethods = ({
     return null;
   }
   if (shippingMethods.length === 0) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.root
-    }, /*#__PURE__*/React.createElement("h3", {
-      className: styles.headline
-    }, i18n.text('checkout.shippingMethod.title')), /*#__PURE__*/React.createElement(MessageBar, {
-      messages: [{
-        type: 'error',
-        message: i18n.text(`checkout.shippingMethod.errors.${!shippingAddress ? 'noShippingAddress' : 'invalidShippingAddress'}`)
-      }],
-      classNames: {
-        container: styles.errorMessage
-      },
-      showIcons: true
-    }));
+    return /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/_jsx("h3", {
+        className: styles.headline,
+        children: i18n.text('checkout.shippingMethod.title')
+      }), /*#__PURE__*/_jsx(MessageBar, {
+        messages: [{
+          type: 'error',
+          message: i18n.text(`checkout.shippingMethod.errors.${!shippingAddress ? 'noShippingAddress' : 'invalidShippingAddress'}`)
+        }],
+        classNames: {
+          container: styles.errorMessage
+        },
+        showIcons: true
+      })]
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: styles.headline
-  }, i18n.text('checkout.shippingMethod.title')), shippingMethods.length === 1 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.container, styles.containerSingle)
-  }, /*#__PURE__*/React.createElement(ShippingMethod, {
-    shippingMethod: shippingMethods[0]
-  })) : /*#__PURE__*/React.createElement(RadioGroup, {
-    name: "shipping-methods",
-    value: selectedHash,
-    onChange: onChange,
-    component: "ul",
-    classes: {
-      root: styles.container
-    },
-    disabled: isLoading
-  }, shippingMethods.map(shippingMethod => /*#__PURE__*/React.createElement(RadioCard, {
-    renderCard: CardComponent,
-    value: shippingMethod.hash,
-    key: shippingMethod.hash
-  }, /*#__PURE__*/React.createElement(ShippingMethod, {
-    shippingMethod: shippingMethod
-  })))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.root,
+    children: [/*#__PURE__*/_jsx("h3", {
+      className: styles.headline,
+      children: i18n.text('checkout.shippingMethod.title')
+    }), shippingMethods.length === 1 ? /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.container, styles.containerSingle),
+      children: /*#__PURE__*/_jsx(ShippingMethod, {
+        shippingMethod: shippingMethods[0]
+      })
+    }) : /*#__PURE__*/_jsx(RadioGroup, {
+      name: "shipping-methods",
+      value: selectedHash,
+      onChange: onChange,
+      component: "ul",
+      classes: {
+        root: styles.container
+      },
+      disabled: isLoading,
+      children: shippingMethods.map(shippingMethod => /*#__PURE__*/_jsx(RadioCard, {
+        renderCard: CardComponent,
+        value: shippingMethod.hash,
+        children: /*#__PURE__*/_jsx(ShippingMethod, {
+          shippingMethod: shippingMethod
+        })
+      }, shippingMethod.hash))
+    })]
+  });
 };
 ShippingMethods.defaultProps = {
   orderHasDirectShipItems: false

package/checkout/components/SupplementalContent/SupplementalContent.js

@@ -9,6 +9,7 @@ import connect from "./SupplementalContent.connector";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SupplementalContent = ({
   text,
   className
@@ -18,7 +19,7 @@ const SupplementalContent = ({
   }
 
   /* eslint-disable react/no-danger */
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: classNames(wrapper, className),
     dangerouslySetInnerHTML: {
       __html: text

package/checkout/helpers/index.js

@@ -203,7 +203,7 @@ export const getCheckoutTaxLinesFromOrder = (order = {}) => {
     label: null,
     value: order.subTotal || 0,
     currencyCode: order.currencyCode
-  }, ...getPromotionLinesFromOrder(order), ...getCouponLinesFromOrder(order), {
+  }].concat(getPromotionLinesFromOrder(order), getCouponLinesFromOrder(order), [{
     visible: hasDirectShipItems && hasSelectedShippingMethod,
     type: 'shippingTotal',
     label: null,
@@ -221,7 +221,7 @@ export const getCheckoutTaxLinesFromOrder = (order = {}) => {
     label: null,
     value: order.total || 0,
     currencyCode: order.currencyCode
-  }];
+  }]);
 };
 
 /**

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,