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

package/checkout/components/Checkout/Checkout.js

@@ -14,6 +14,7 @@ import Address from "./CheckoutAddress";
 import Summary from "./CheckoutSummary";
 import Actions from "./CheckoutActions";
 import Header from "./CheckoutHeader";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -46,27 +47,34 @@ const Checkout = () => {
   const {
     id
   } = useRoute();
-  return /*#__PURE__*/React.createElement(CheckoutProvider, {
+  return /*#__PURE__*/_jsxs(CheckoutProvider, {
     pathPattern: CHECKOUT_PATTERN,
-    routeId: id
-  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.main
-  }, /*#__PURE__*/React.createElement(ProfileProvider, {
-    isCheckout: true
-  }, /*#__PURE__*/React.createElement(Address, {
-    type: ADDRESS_TYPE_BILLING
-  }), /*#__PURE__*/React.createElement(Address, {
-    type: ADDRESS_TYPE_SHIPPING
-  })), /*#__PURE__*/React.createElement(PickupContactForm, null), /*#__PURE__*/React.createElement(ShippingMethods, null), /*#__PURE__*/React.createElement(PaymentMethodProvider, null), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: "<md",
-    appAlways: true
-  }, /*#__PURE__*/React.createElement(Summary, null)), /*#__PURE__*/React.createElement(Actions, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles.side
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">=md",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement(Summary, null)))));
+    routeId: id,
+    children: [/*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.main,
+        children: [/*#__PURE__*/_jsxs(ProfileProvider, {
+          isCheckout: true,
+          children: [/*#__PURE__*/_jsx(Address, {
+            type: ADDRESS_TYPE_BILLING
+          }), /*#__PURE__*/_jsx(Address, {
+            type: ADDRESS_TYPE_SHIPPING
+          })]
+        }), /*#__PURE__*/_jsx(PickupContactForm, {}), /*#__PURE__*/_jsx(ShippingMethods, {}), /*#__PURE__*/_jsx(PaymentMethodProvider, {}), /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: "<md",
+          appAlways: true,
+          children: /*#__PURE__*/_jsx(Summary, {})
+        }), /*#__PURE__*/_jsx(Actions, {})]
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.side,
+        children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: ">=md",
+          webOnly: true,
+          children: /*#__PURE__*/_jsx(Summary, {})
+        })
+      })]
+    })]
+  });
 };
 export default Checkout;

package/checkout/components/Checkout/CheckoutActions.js

@@ -5,6 +5,7 @@ import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
 import { useCheckoutContext } from "../../hooks/common";
 import { SupplementalContent } from "../SupplementalContent";
 import { CHECKOUT_ACTIONS } from "../../constants";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     padding: 16,
@@ -26,19 +27,23 @@ const Actions = () => {
     paymentButton: PaymentButton,
     isButtonLocked
   } = useCheckoutContext();
-  const originalButton = /*#__PURE__*/React.createElement(RippleButton, {
+  const originalButton = /*#__PURE__*/_jsx(RippleButton, {
     type: "secondary",
     onClick: handleSubmitOrder,
-    disabled: isButtonLocked
-  }, i18n.text('checkout.submit_order'));
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CHECKOUT_ACTIONS
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, PaymentButton ? /*#__PURE__*/React.createElement(PaymentButton, {
-    onSubmit: handleSubmitOrder,
-    onValidate: handleValidation,
-    disabled: isButtonLocked
-  }, originalButton) : originalButton, /*#__PURE__*/React.createElement(SupplementalContent, null)));
+    disabled: isButtonLocked,
+    children: i18n.text('checkout.submit_order')
+  });
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CHECKOUT_ACTIONS,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [PaymentButton ? /*#__PURE__*/_jsx(PaymentButton, {
+        onSubmit: handleSubmitOrder,
+        onValidate: handleValidation,
+        disabled: isButtonLocked,
+        children: originalButton
+      }) : originalButton, /*#__PURE__*/_jsx(SupplementalContent, {})]
+    })
+  });
 };
 export default Actions;

package/checkout/components/Checkout/CheckoutAddress.js

@@ -11,6 +11,7 @@ import { useCheckoutContext } from "../../hooks/common";
 import { GUEST_CHECKOUT_PATTERN, CHECKOUT_ADDRESS_BOOK_PATH, CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN } from "../../constants/routes";
 import { ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from "../../constants";
 import iso3166 from "../../../components/Form/Builder/helpers/iso-3166-2";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -89,22 +90,45 @@ const CheckoutAddress = ({
   if (type === ADDRESS_TYPE_SHIPPING && !isShippingAddressSelectionEnabled) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    className: styles.card,
-    title: headline,
-    editLink: editLink,
-    editLabel: editLabel
-  }, address ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", null, address.middleName?.length ? `${address.firstName} ${address.middleName} ${address.lastName}` : `${address.firstName} ${address.lastName}`), type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", null, address.emailAddress), /*#__PURE__*/React.createElement("span", null, address.mobile)), /*#__PURE__*/React.createElement("span", null, address.address1), address.address2?.length ? /*#__PURE__*/React.createElement("span", null, address.address2) : null, address.address3?.length ? /*#__PURE__*/React.createElement("span", null, address.address3) : null, address.address4?.length ? /*#__PURE__*/React.createElement("span", null, address.address4) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/React.createElement("span", null, i18n.text(`checkout.${type}.address`, {
-    postalCode: address.postalCode || '',
-    region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',
-    city: address.city || '',
-    country: address.country || ''
-  })) : null) : /*#__PURE__*/React.createElement(Link, {
-    href: selectAddressLink,
-    className: styles.link
-  }, i18n.text(`checkout.${type}.select_address`))));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.root,
+    children: /*#__PURE__*/_jsx(Section, {
+      className: styles.card,
+      title: headline,
+      editLink: editLink,
+      editLabel: editLabel,
+      children: address ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          children: address.middleName?.length ? `${address.firstName} ${address.middleName} ${address.lastName}` : `${address.firstName} ${address.lastName}`
+        }), type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("span", {
+            children: address.emailAddress
+          }), /*#__PURE__*/_jsx("span", {
+            children: address.mobile
+          })]
+        }), /*#__PURE__*/_jsx("span", {
+          children: address.address1
+        }), address.address2?.length ? /*#__PURE__*/_jsx("span", {
+          children: address.address2
+        }) : null, address.address3?.length ? /*#__PURE__*/_jsx("span", {
+          children: address.address3
+        }) : null, address.address4?.length ? /*#__PURE__*/_jsx("span", {
+          children: address.address4
+        }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx("span", {
+          children: i18n.text(`checkout.${type}.address`, {
+            postalCode: address.postalCode || '',
+            region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',
+            city: address.city || '',
+            country: address.country || ''
+          })
+        }) : null]
+      }) : /*#__PURE__*/_jsx(Link, {
+        href: selectAddressLink,
+        className: styles.link,
+        children: i18n.text(`checkout.${type}.select_address`)
+      })
+    })
+  });
 };
 CheckoutAddress.defaultProps = {
   type: ADDRESS_TYPE_BILLING

package/checkout/components/Checkout/CheckoutHeader.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { ResponsiveContainer } from '@shopgate/engage/components';
 import { i18n } from "../../../core/helpers/i18n";
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   title: css({
     padding: 16,
@@ -36,19 +37,23 @@ const CheckoutTitle = ({
   stepFrom,
   stepTo,
   headline
-}) => /*#__PURE__*/React.createElement(ResponsiveContainer, {
+}) => /*#__PURE__*/_jsxs(ResponsiveContainer, {
   webOnly: true,
-  breakpoint: ">xs"
-}, /*#__PURE__*/React.createElement(ResponsiveBackButton, null), /*#__PURE__*/React.createElement("div", {
-  className: styles.title
-}, /*#__PURE__*/React.createElement("h1", {
-  className: styles.headline
-}, i18n.text(headline)), stepFrom !== null ? /*#__PURE__*/React.createElement("h2", {
-  className: styles.step
-}, i18n.text('checkout.steps', {
-  from: stepFrom,
-  to: stepTo
-})) : null));
+  breakpoint: ">xs",
+  children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsxs("div", {
+    className: styles.title,
+    children: [/*#__PURE__*/_jsx("h1", {
+      className: styles.headline,
+      children: i18n.text(headline)
+    }), stepFrom !== null ? /*#__PURE__*/_jsx("h2", {
+      className: styles.step,
+      children: i18n.text('checkout.steps', {
+        from: stepFrom,
+        to: stepTo
+      })
+    }) : null]
+  })]
+});
 CheckoutTitle.defaultProps = {
   stepFrom: null,
   stepTo: null,

package/checkout/components/Checkout/CheckoutPickupContactForm.js

@@ -7,6 +7,7 @@ import generateFormConfig from "./CheckoutPickupContactForm.config";
 import Section from "./CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import { CHECKOUT_PICKUP_CONTACT_FORM } from "../../constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -73,20 +74,23 @@ const PickupContactForm = () => {
   if (!isPickupContactSelectionEnabled) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CHECKOUT_PICKUP_CONTACT_FORM
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    title: "checkout.pickup_contact.headline",
-    hasForm: true
-  }, /*#__PURE__*/React.createElement(FormBuilder, {
-    className: styles.form,
-    name: "PickupForm",
-    config: formConfig,
-    defaults: defaultPickupPersonState,
-    validationErrors: formValidationErrors,
-    handleUpdate: handleUpdate
-  }))));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CHECKOUT_PICKUP_CONTACT_FORM,
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.root,
+      children: /*#__PURE__*/_jsx(Section, {
+        title: "checkout.pickup_contact.headline",
+        hasForm: true,
+        children: /*#__PURE__*/_jsx(FormBuilder, {
+          className: styles.form,
+          name: "PickupForm",
+          config: formConfig,
+          defaults: defaultPickupPersonState,
+          validationErrors: formValidationErrors,
+          handleUpdate: handleUpdate
+        })
+      })
+    })
+  });
 };
 export default PickupContactForm;

package/checkout/components/Checkout/CheckoutSection.js

@@ -7,6 +7,7 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import CheckoutSectionInfo from "./CheckoutSectionInfo";
 import CheckoutSectionMessages from "./CheckoutSectionMessages";
 import { i18n } from "../../../core/helpers/i18n";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -84,58 +85,78 @@ const CheckoutSection = ({
   editLink,
   editLabel,
   id
-}) => /*#__PURE__*/React.createElement(Fragment, null, title && /*#__PURE__*/React.createElement("h3", {
-  className: styles.headline,
-  id: id
-}, i18n.text(title)), /*#__PURE__*/React.createElement(Card, {
-  className: classNames(styles.card.toString(), {
-    [styles.cardWithForm.toString()]: hasForm
-  }),
-  id: !title ? id : null
-}, /*#__PURE__*/React.createElement("div", {
-  className: `${styles.actionsContainer} ${className}`
-}, children || null, content && /*#__PURE__*/React.createElement("table", {
-  className: styles.table
-}, /*#__PURE__*/React.createElement("tbody", null, content.map(({
-  label,
-  text,
-  info,
-  messages
-}) => {
-  const hasMessages = Array.isArray(messages) && messages.length > 0;
-  let hasError = false;
-  if (hasMessages) {
-    hasError = !!messages.find(({
-      type
-    }) => type === 'error');
-  }
-  return /*#__PURE__*/React.createElement(Fragment, {
-    key: label
-  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames({
-      [styles.labelWithInfoIcon]: !!info
-    })
-  }, label), !hasError && /*#__PURE__*/React.createElement(CheckoutSectionInfo, {
-    text: info
-  }))), /*#__PURE__*/React.createElement("td", null, text)), hasMessages && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-    colSpan: "2",
-    style: {
-      textAlign: 'left',
-      paddingLeft: 0
-    }
-  }, /*#__PURE__*/React.createElement(CheckoutSectionMessages, {
-    messages: messages
-  }), hasError && /*#__PURE__*/React.createElement(CheckoutSectionInfo, {
-    text: info,
-    renderIcon: false
-  }))));
-})))), editLink ? /*#__PURE__*/React.createElement("div", {
-  className: styles.actions
-}, /*#__PURE__*/React.createElement(Link, {
-  tag: "a",
-  className: styles.link,
-  href: editLink
-}, i18n.text(editLabel))) : null));
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [title && /*#__PURE__*/_jsx("h3", {
+    className: styles.headline,
+    id: id,
+    children: i18n.text(title)
+  }), /*#__PURE__*/_jsxs(Card, {
+    className: classNames(styles.card.toString(), {
+      [styles.cardWithForm.toString()]: hasForm
+    }),
+    id: !title ? id : null,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${styles.actionsContainer} ${className}`,
+      children: [children || null, content && /*#__PURE__*/_jsx("table", {
+        className: styles.table,
+        children: /*#__PURE__*/_jsx("tbody", {
+          children: content.map(({
+            label,
+            text,
+            info,
+            messages
+          }) => {
+            const hasMessages = Array.isArray(messages) && messages.length > 0;
+            let hasError = false;
+            if (hasMessages) {
+              hasError = !!messages.find(({
+                type
+              }) => type === 'error');
+            }
+            return /*#__PURE__*/_jsxs(Fragment, {
+              children: [/*#__PURE__*/_jsxs("tr", {
+                children: [/*#__PURE__*/_jsxs("td", {
+                  children: [/*#__PURE__*/_jsx("span", {
+                    className: classNames({
+                      [styles.labelWithInfoIcon]: !!info
+                    }),
+                    children: label
+                  }), !hasError && /*#__PURE__*/_jsx(CheckoutSectionInfo, {
+                    text: info
+                  })]
+                }), /*#__PURE__*/_jsx("td", {
+                  children: text
+                })]
+              }), hasMessages && /*#__PURE__*/_jsx("tr", {
+                children: /*#__PURE__*/_jsxs("td", {
+                  colSpan: "2",
+                  style: {
+                    textAlign: 'left',
+                    paddingLeft: 0
+                  },
+                  children: [/*#__PURE__*/_jsx(CheckoutSectionMessages, {
+                    messages: messages
+                  }), hasError && /*#__PURE__*/_jsx(CheckoutSectionInfo, {
+                    text: info,
+                    renderIcon: false
+                  })]
+                })
+              })]
+            }, label);
+          })
+        })
+      })]
+    }), editLink ? /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: /*#__PURE__*/_jsx(Link, {
+        tag: "a",
+        className: styles.link,
+        href: editLink,
+        children: i18n.text(editLabel)
+      })
+    }) : null]
+  })]
+});
 CheckoutSection.defaultProps = {
   title: null,
   className: '',

package/checkout/components/Checkout/CheckoutSectionInfo.js

@@ -6,6 +6,7 @@ import { InfoIcon } from '@shopgate/engage/components';
 import { nl2br, showModal as showModalAction } from '@shopgate/engage/core';
 import { responsiveMediaQuery } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { jsx as _jsx } from "react/jsx-runtime";
 const mapDispatchToProps = {
   showModal: showModalAction
 };
@@ -53,20 +54,21 @@ const CheckoutSectionInfo = ({
     return null;
   }
   if (!renderIcon) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: styles.textWrapper,
       dangerouslySetInnerHTML: {
         __html: nl2br(text)
       }
     });
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/_jsx("span", {
     onClick: showPopup,
     onKeyDown: showPopup,
     className: styles.iconWrapper,
     role: "button",
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(InfoIcon, null));
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsx(InfoIcon, {})
+  });
 };
 CheckoutSectionInfo.defaultProps = {
   text: null,

package/checkout/components/Checkout/CheckoutSectionMessages.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { css } from 'glamor';
 import { errorBehavior } from '@shopgate/engage/core';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -35,20 +36,21 @@ const CheckoutSectionMessages = ({
   if (!Array.isArray(messages) || messages.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("ul", {
-    className: styles.wrapper
-  }, messages.map(({
-    message,
-    additionalParams,
-    type
-  }) => /*#__PURE__*/React.createElement("li", {
-    key: message,
-    className: classNames(styles.message, {
-      [styles.error]: type === 'error',
-      [styles.warning]: type === 'warning',
-      [styles.info]: type === 'info'
-    })
-  }, errorBehavior.getErrorMessage(message, additionalParams))));
+  return /*#__PURE__*/_jsx("ul", {
+    className: styles.wrapper,
+    children: messages.map(({
+      message,
+      additionalParams,
+      type
+    }) => /*#__PURE__*/_jsx("li", {
+      className: classNames(styles.message, {
+        [styles.error]: type === 'error',
+        [styles.warning]: type === 'warning',
+        [styles.info]: type === 'info'
+      }),
+      children: errorBehavior.getErrorMessage(message, additionalParams)
+    }, message))
+  });
 };
 CheckoutSectionMessages.defaultProps = {
   messages: null

package/checkout/components/Checkout/CheckoutSummary.js

@@ -5,6 +5,7 @@ import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
 import moment from 'moment';
 import Section from "./CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     padding: 16,
@@ -52,18 +53,22 @@ const Billing = () => {
       messages: t.messages || null
     };
   }), [taxLines]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    className: styles.card,
-    title: "checkout.summary.headline",
-    content: content
-  }, fulfillmentSlot ? /*#__PURE__*/React.createElement("div", {
-    className: styles.time
-  }, /*#__PURE__*/React.createElement(TimeIcon, {
-    size: 20
-  }), /*#__PURE__*/React.createElement("span", {
-    className: styles.timeText
-  }, moment(fulfillmentSlot?.date, 'YYYY-MM-DD').format('ll'), ' ', moment(fulfillmentSlot?.from, 'HH:mm').format('LT'), ' - ', moment(fulfillmentSlot?.to, 'HH:mm').format('LT'))) : null));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.root,
+    children: /*#__PURE__*/_jsx(Section, {
+      className: styles.card,
+      title: "checkout.summary.headline",
+      content: content,
+      children: fulfillmentSlot ? /*#__PURE__*/_jsxs("div", {
+        className: styles.time,
+        children: [/*#__PURE__*/_jsx(TimeIcon, {
+          size: 20
+        }), /*#__PURE__*/_jsxs("span", {
+          className: styles.timeText,
+          children: [moment(fulfillmentSlot?.date, 'YYYY-MM-DD').format('ll'), ' ', moment(fulfillmentSlot?.from, 'HH:mm').format('LT'), ' - ', moment(fulfillmentSlot?.to, 'HH:mm').format('LT')]
+        })]
+      }) : null
+    })
+  });
 };
 export default Billing;