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

package/checkout/components/CheckoutConfirmation/CheckoutConfirmation.js

@@ -17,6 +17,7 @@ import CheckoutConfirmationShippedTo from "./CheckoutConfirmationShippedTo";
 import CheckoutConfirmationOrderSummary from "./CheckoutConfirmationOrderSummary";
 import { SupplementalContent } from "../SupplementalContent";
 import connect from "./CheckoutConfirmation.connector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -160,84 +161,99 @@ const CheckoutConfirmation = ({
   if (!orderData || !cartItems) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.root
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.main
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.backButtonContainer
-  }, /*#__PURE__*/React.createElement(ResponsiveBackButton, {
-    label: "checkout.success.continue",
-    onClick: onContinueShopping
-  })), /*#__PURE__*/React.createElement("div", {
-    className: style.container
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: style.heading
-  }, i18n.text('checkout.success.title')), /*#__PURE__*/React.createElement("p", {
-    className: style.orderNum
-  }, i18n.text('checkout.success.order_date', {
-    date: i18n.date(new Date(date).getTime(), 'short')
-  }), ' | ', i18n.text('checkout.success.order_number', {
-    orderNumber
-  })), /*#__PURE__*/React.createElement("div", {
-    className: style.instructions
-  }, /*#__PURE__*/React.createElement("p", {
-    className: style.body
-  }, i18n.text('checkout.success.instructions_1')), /*#__PURE__*/React.createElement("p", {
-    className: style.body
-  }, i18n.text('checkout.success.instructions_2')))), /*#__PURE__*/React.createElement("div", {
-    className: style.cartItems
-  }, /*#__PURE__*/React.createElement(CartItems, {
-    cartItems: cartItems,
-    onFocus: () => {},
-    multiLineReservation: true,
-    editable: false,
-    isCheckoutConfirmation: true,
-    isDirectShipOnly: isDirectShipOnly,
-    currencyOverride: currencyOverride
-  })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: "<md",
-    appAlways: true
-  }, /*#__PURE__*/React.createElement(CheckoutConfirmationPickUpContact, {
-    order: orderData
-  }), /*#__PURE__*/React.createElement(CheckoutConfirmationPickupNotes, {
-    order: orderData
-  }), /*#__PURE__*/React.createElement(CheckoutConfirmationShippedTo, {
-    order: orderData
-  }), !isUserLoggedIn && isReserveOnly ? /*#__PURE__*/React.createElement(CheckoutConfirmationOrderContact, {
-    order: orderData
-  }) : /*#__PURE__*/React.createElement(CheckoutConfirmationBilledTo, {
-    order: orderData
-  }), /*#__PURE__*/React.createElement(CheckoutConfirmationOrderSummary, {
-    order: orderData
-  }), /*#__PURE__*/React.createElement(SupplementalContent, {
-    className: style.supplementalWrapper
-  })), /*#__PURE__*/React.createElement("div", {
-    className: style.buttonWrapper
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    type: "secondary",
-    disabled: false,
-    className: style.button.toString(),
-    onClick: onContinueShopping
-  }, i18n.text('checkout.success.continue')))), /*#__PURE__*/React.createElement("div", {
-    className: style.side
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">=md",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement(CheckoutConfirmationPickUpContact, {
-    order: orderData
-  }), /*#__PURE__*/React.createElement(CheckoutConfirmationPickupNotes, {
-    order: orderData
-  }), /*#__PURE__*/React.createElement(CheckoutConfirmationShippedTo, {
-    order: orderData
-  }), !isUserLoggedIn && isReserveOnly ? /*#__PURE__*/React.createElement(CheckoutConfirmationOrderContact, {
-    order: orderData
-  }) : /*#__PURE__*/React.createElement(CheckoutConfirmationBilledTo, {
-    order: orderData
-  }), /*#__PURE__*/React.createElement(CheckoutConfirmationOrderSummary, {
-    order: orderData
-  }), /*#__PURE__*/React.createElement(SupplementalContent, {
-    className: style.supplementalWrapper
-  }))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: style.root,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: style.main,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: style.backButtonContainer,
+        children: /*#__PURE__*/_jsx(ResponsiveBackButton, {
+          label: "checkout.success.continue",
+          onClick: onContinueShopping
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: style.container,
+        children: [/*#__PURE__*/_jsx("h2", {
+          className: style.heading,
+          children: i18n.text('checkout.success.title')
+        }), /*#__PURE__*/_jsxs("p", {
+          className: style.orderNum,
+          children: [i18n.text('checkout.success.order_date', {
+            date: i18n.date(new Date(date).getTime(), 'short')
+          }), ' | ', i18n.text('checkout.success.order_number', {
+            orderNumber
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: style.instructions,
+          children: [/*#__PURE__*/_jsx("p", {
+            className: style.body,
+            children: i18n.text('checkout.success.instructions_1')
+          }), /*#__PURE__*/_jsx("p", {
+            className: style.body,
+            children: i18n.text('checkout.success.instructions_2')
+          })]
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: style.cartItems,
+        children: /*#__PURE__*/_jsx(CartItems, {
+          cartItems: cartItems,
+          onFocus: () => {},
+          multiLineReservation: true,
+          editable: false,
+          isCheckoutConfirmation: true,
+          isDirectShipOnly: isDirectShipOnly,
+          currencyOverride: currencyOverride
+        })
+      }), /*#__PURE__*/_jsxs(ResponsiveContainer, {
+        breakpoint: "<md",
+        appAlways: true,
+        children: [/*#__PURE__*/_jsx(CheckoutConfirmationPickUpContact, {
+          order: orderData
+        }), /*#__PURE__*/_jsx(CheckoutConfirmationPickupNotes, {
+          order: orderData
+        }), /*#__PURE__*/_jsx(CheckoutConfirmationShippedTo, {
+          order: orderData
+        }), !isUserLoggedIn && isReserveOnly ? /*#__PURE__*/_jsx(CheckoutConfirmationOrderContact, {
+          order: orderData
+        }) : /*#__PURE__*/_jsx(CheckoutConfirmationBilledTo, {
+          order: orderData
+        }), /*#__PURE__*/_jsx(CheckoutConfirmationOrderSummary, {
+          order: orderData
+        }), /*#__PURE__*/_jsx(SupplementalContent, {
+          className: style.supplementalWrapper
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: style.buttonWrapper,
+        children: /*#__PURE__*/_jsx(RippleButton, {
+          type: "secondary",
+          disabled: false,
+          className: style.button.toString(),
+          onClick: onContinueShopping,
+          children: i18n.text('checkout.success.continue')
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: style.side,
+      children: /*#__PURE__*/_jsxs(ResponsiveContainer, {
+        breakpoint: ">=md",
+        webOnly: true,
+        children: [/*#__PURE__*/_jsx(CheckoutConfirmationPickUpContact, {
+          order: orderData
+        }), /*#__PURE__*/_jsx(CheckoutConfirmationPickupNotes, {
+          order: orderData
+        }), /*#__PURE__*/_jsx(CheckoutConfirmationShippedTo, {
+          order: orderData
+        }), !isUserLoggedIn && isReserveOnly ? /*#__PURE__*/_jsx(CheckoutConfirmationOrderContact, {
+          order: orderData
+        }) : /*#__PURE__*/_jsx(CheckoutConfirmationBilledTo, {
+          order: orderData
+        }), /*#__PURE__*/_jsx(CheckoutConfirmationOrderSummary, {
+          order: orderData
+        }), /*#__PURE__*/_jsx(SupplementalContent, {
+          className: style.supplementalWrapper
+        })]
+      })
+    })]
+  });
 };
 export default connect(CheckoutConfirmation);

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationBilledTo.js

@@ -8,6 +8,7 @@ import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
  * CheckoutConfirmationBilledTo component
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CheckoutConfirmationBilledTo = ({
   order,
   className
@@ -34,21 +35,21 @@ const CheckoutConfirmationBilledTo = ({
     } = payment;
     const hasPayment = order.paymentTransactions && order.paymentTransactions[0];
     const address = [`${firstName} ${lastName}`, `${address1 || ''}`, `${city ? `${city},` : ''} ${city && region ? region : ''} ${postalCode || ''}`].filter(Boolean).join('\n');
-    return [...(hasPayment && paymentType === 'cc' ? [{
+    return [].concat(hasPayment && paymentType === 'cc' ? [{
       label: i18n.text('checkout.success.card_holder'),
       text: address
     }] : [{
       label: i18n.text('checkout.success.address'),
       text: address
-    }]), ...(hasPayment && paymentType === 'cc' ? [{
+    }], hasPayment && paymentType === 'cc' ? [{
       label: i18n.text('checkout.success.payment_method'),
       text: `${startCase(type)} **** **** ${last4}`
-    }] : []), ...(hasPayment && paymentType === 'paypal' ? [{
+    }] : [], hasPayment && paymentType === 'paypal' ? [{
       label: i18n.text('checkout.success.payment_method'),
       text: 'PayPal'
-    }] : [])];
+    }] : []);
   }, [order]);
-  return /*#__PURE__*/React.createElement(CheckoutConfirmationSection, {
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
     title: "checkout.success.billed_to",
     content: content,
     className: className

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationOrderContact.js

@@ -7,6 +7,7 @@ import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
  * CheckoutConfirmationOrderContact component
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CheckoutConfirmationOrderContact = ({
   order,
   className
@@ -43,7 +44,7 @@ const CheckoutConfirmationOrderContact = ({
     }
     return entries;
   }, [order]);
-  return /*#__PURE__*/React.createElement(CheckoutConfirmationSection, {
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
     title: "checkout.success.order_contact",
     content: content,
     className: className

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationOrderSummary.js

@@ -6,6 +6,7 @@ import moment from 'moment';
 import { i18n } from "../../../core/helpers/i18n";
 import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
 import { getCheckoutTaxLinesFromOrder } from "../../helpers";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   time: css({
     marginBottom: 4,
@@ -41,18 +42,21 @@ const CheckoutConfirmationOrderSummary = ({
     };
   }), [order]);
   const fulfillmentSlot = order?.lineItems[0]?.fulfillmentSlot;
-  return /*#__PURE__*/React.createElement(CheckoutConfirmationSection, {
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
     title: "checkout.success.order_summary",
     content: content,
     isSummary: true,
-    className: className
-  }, 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);
+    className: className,
+    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
+  });
 };
 CheckoutConfirmationOrderSummary.defaultProps = {
   className: null

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationPickUpContact.js

@@ -7,6 +7,7 @@ import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
  * CheckoutConfirmationPickUpContact component
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CheckoutConfirmationPickUpContact = ({
   order,
   className
@@ -49,7 +50,7 @@ const CheckoutConfirmationPickUpContact = ({
   if (!content) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(CheckoutConfirmationSection, {
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
     title: "checkout.success.pick_up_contact",
     content: content,
     className: className

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationPickupNotes.js

@@ -6,6 +6,7 @@ import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
  * CheckoutConfirmationPickupNotes component
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CheckoutConfirmationPickupNotes = ({
   order,
   className
@@ -13,7 +14,7 @@ const CheckoutConfirmationPickupNotes = ({
   if (!order.notes) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(CheckoutConfirmationSection, {
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
     title: "checkout.success.pickup_notes",
     content: order.notes,
     className: className

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationSection.js

@@ -6,6 +6,7 @@ import { Card, TextLink } from '@shopgate/engage/components';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { isIOSTheme } from '@shopgate/engage/core';
 import { i18n } from "../../../core/helpers/i18n";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors,
   variables
@@ -111,50 +112,64 @@ const CheckoutConfirmationSegment = ({
     return null;
   }
   const isString = typeof content === 'string';
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.wrapper, className)
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: styles.headline
-  }, i18n.text(title)), /*#__PURE__*/React.createElement(Card, {
-    className: classNames(styles.card, {
-      [styles.cardWithForm]: hasForm
-    })
-  }, isString && /*#__PURE__*/React.createElement("span", null, content), !isString && !isSummary && /*#__PURE__*/React.createElement("dl", {
-    className: styles.list
-  }, content.map(({
-    label,
-    text,
-    link
-  }) => /*#__PURE__*/React.createElement(Fragment, {
-    key: label || text
-  }, label && /*#__PURE__*/React.createElement("dt", {
-    className: styles.listTitle
-  }, i18n.text(label)), link ? /*#__PURE__*/React.createElement("dd", {
-    className: styles.listEntry
-  }, /*#__PURE__*/React.createElement(TextLink, {
-    href: link,
-    className: styles.link
-  }, /*#__PURE__*/React.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: text
-    }
-  }))) : /*#__PURE__*/React.createElement("dd", {
-    className: styles.listEntry,
-    dangerouslySetInnerHTML: {
-      __html: text
-    }
-  })))), children, isSummary && /*#__PURE__*/React.createElement("table", {
-    className: styles.table
-  }, /*#__PURE__*/React.createElement("tbody", null, content.map(({
-    label,
-    text
-  }) => /*#__PURE__*/React.createElement("tr", {
-    key: label || text
-  }, label && /*#__PURE__*/React.createElement("td", null, i18n.text(label)), /*#__PURE__*/React.createElement("td", {
-    dangerouslySetInnerHTML: {
-      __html: text
-    }
-  }))))))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(styles.wrapper, className),
+    children: [/*#__PURE__*/_jsx("h3", {
+      className: styles.headline,
+      children: i18n.text(title)
+    }), /*#__PURE__*/_jsxs(Card, {
+      className: classNames(styles.card, {
+        [styles.cardWithForm]: hasForm
+      }),
+      children: [isString && /*#__PURE__*/_jsx("span", {
+        children: content
+      }), !isString && !isSummary && /*#__PURE__*/_jsx("dl", {
+        className: styles.list,
+        children: content.map(({
+          label,
+          text,
+          link
+        }) => /*#__PURE__*/_jsxs(Fragment, {
+          children: [label && /*#__PURE__*/_jsx("dt", {
+            className: styles.listTitle,
+            children: i18n.text(label)
+          }), link ? /*#__PURE__*/_jsx("dd", {
+            className: styles.listEntry,
+            children: /*#__PURE__*/_jsx(TextLink, {
+              href: link,
+              className: styles.link,
+              children: /*#__PURE__*/_jsx("span", {
+                dangerouslySetInnerHTML: {
+                  __html: text
+                }
+              })
+            })
+          }) : /*#__PURE__*/_jsx("dd", {
+            className: styles.listEntry,
+            dangerouslySetInnerHTML: {
+              __html: text
+            }
+          })]
+        }, label || text))
+      }), children, isSummary && /*#__PURE__*/_jsx("table", {
+        className: styles.table,
+        children: /*#__PURE__*/_jsx("tbody", {
+          children: content.map(({
+            label,
+            text
+          }) => /*#__PURE__*/_jsxs("tr", {
+            children: [label && /*#__PURE__*/_jsx("td", {
+              children: i18n.text(label)
+            }), /*#__PURE__*/_jsx("td", {
+              dangerouslySetInnerHTML: {
+                __html: text
+              }
+            })]
+          }, label || text))
+        })
+      })]
+    })]
+  });
 };
 CheckoutConfirmationSegment.defaultProps = {
   children: null,

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationShippedTo.js

@@ -7,6 +7,7 @@ import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
  * CheckoutConfirmationShippedTo component
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CheckoutConfirmationShippedTo = ({
   order,
   className
@@ -30,15 +31,15 @@ const CheckoutConfirmationShippedTo = ({
     return [{
       label: i18n.text('checkout.success.address'),
       text: address
-    }, ...(shippingMethodServiceLevel ? {
+    }].concat(shippingMethodServiceLevel ? {
       label: i18n.text('checkout.success.shipping_method'),
       text: shippingMethodServiceLevel
-    } : [])];
+    } : []);
   }, [order]);
   if (!content) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(CheckoutConfirmationSection, {
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
     title: "checkout.success.shipped_to",
     content: content,
     className: className

package/checkout/components/GuestCheckout/GuestCheckout.js

@@ -14,6 +14,7 @@ import Pickup from "./GuestCheckoutPickup";
 import PickupNotes from "./GuestCheckoutPickupNotes";
 import GuestCheckoutOptIn from "./GuestCheckoutOptIn";
 import { ShippingMethods } from "../ShippingMethods";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -42,29 +43,35 @@ const styles = {
  * The Cart component.
  * @returns {JSX}
  */
-const GuestCheckout = () => /*#__PURE__*/React.createElement(CheckoutProvider, {
+const GuestCheckout = () => /*#__PURE__*/_jsxs(CheckoutProvider, {
   pathPattern: GUEST_CHECKOUT_PAYMENT_PATTERN,
   orderInitialized: true,
   orderReadOnly: true,
-  isGuestCheckout: true
-}, /*#__PURE__*/React.createElement(Header, {
-  stepFrom: 2,
-  stepTo: 2
-}), /*#__PURE__*/React.createElement("div", {
-  className: styles.root
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles.main
-}, /*#__PURE__*/React.createElement(Pickup, null), /*#__PURE__*/React.createElement(PickupNotes, null), /*#__PURE__*/React.createElement(Address, {
-  type: ADDRESS_TYPE_BILLING
-}), /*#__PURE__*/React.createElement(Address, {
-  type: ADDRESS_TYPE_SHIPPING
-}), /*#__PURE__*/React.createElement(GuestCheckoutOptIn, null), /*#__PURE__*/React.createElement(ShippingMethods, null), /*#__PURE__*/React.createElement(PaymentProvider, 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)))));
+  isGuestCheckout: true,
+  children: [/*#__PURE__*/_jsx(Header, {
+    stepFrom: 2,
+    stepTo: 2
+  }), /*#__PURE__*/_jsxs("div", {
+    className: styles.root,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.main,
+      children: [/*#__PURE__*/_jsx(Pickup, {}), /*#__PURE__*/_jsx(PickupNotes, {}), /*#__PURE__*/_jsx(Address, {
+        type: ADDRESS_TYPE_BILLING
+      }), /*#__PURE__*/_jsx(Address, {
+        type: ADDRESS_TYPE_SHIPPING
+      }), /*#__PURE__*/_jsx(GuestCheckoutOptIn, {}), /*#__PURE__*/_jsx(ShippingMethods, {}), /*#__PURE__*/_jsx(PaymentProvider, {}), /*#__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 GuestCheckout;

package/checkout/components/GuestCheckout/GuestCheckoutOptIn.js

@@ -8,6 +8,7 @@ import Section from "../Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import generateFormConfig from "./GuestCheckoutOptIn.config";
 import { CHECKOUT_MARKETING_OPTIN } from "../../constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -48,18 +49,21 @@ const GuestCheckoutOptIn = () => {
   const handleUpdate = useCallback(values => {
     optInFormSetValues(values);
   }, [optInFormSetValues]);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CHECKOUT_MARKETING_OPTIN
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    hasForm: true
-  }, /*#__PURE__*/React.createElement(FormBuilder, {
-    className: styles.form,
-    name: "GuestCheckoutOptIn",
-    config: formConfig,
-    defaults: defaultOptInFormState,
-    handleUpdate: handleUpdate
-  }))));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: CHECKOUT_MARKETING_OPTIN,
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.root,
+      children: /*#__PURE__*/_jsx(Section, {
+        hasForm: true,
+        children: /*#__PURE__*/_jsx(FormBuilder, {
+          className: styles.form,
+          name: "GuestCheckoutOptIn",
+          config: formConfig,
+          defaults: defaultOptInFormState,
+          handleUpdate: handleUpdate
+        })
+      })
+    })
+  });
 };
 export default GuestCheckoutOptIn;

package/checkout/components/GuestCheckout/GuestCheckoutPickup.js

@@ -5,6 +5,7 @@ import { GUEST_CHECKOUT_PATTERN } from "../../constants/routes";
 import Section from "../Checkout/CheckoutSection";
 import { useCheckoutContext } from "../../hooks/common";
 import { ADDRESS_TYPE_PICKUP } from "../../constants";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -36,12 +37,20 @@ const GuestCheckoutPickup = () => {
   if (!pickupAddress) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Section, {
-    className: styles.card,
-    title: headline,
-    editLink: `${GUEST_CHECKOUT_PATTERN}?edit=${ADDRESS_TYPE_PICKUP}`
-  }, /*#__PURE__*/React.createElement("span", null, pickupAddress.middleName?.length ? `${pickupAddress.firstName} ${pickupAddress.middleName} ${pickupAddress.lastName}` : `${pickupAddress.firstName} ${pickupAddress.lastName}`), /*#__PURE__*/React.createElement("span", null, pickupAddress.emailAddress), /*#__PURE__*/React.createElement("span", null, pickupAddress.mobile)));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.root,
+    children: /*#__PURE__*/_jsxs(Section, {
+      className: styles.card,
+      title: headline,
+      editLink: `${GUEST_CHECKOUT_PATTERN}?edit=${ADDRESS_TYPE_PICKUP}`,
+      children: [/*#__PURE__*/_jsx("span", {
+        children: pickupAddress.middleName?.length ? `${pickupAddress.firstName} ${pickupAddress.middleName} ${pickupAddress.lastName}` : `${pickupAddress.firstName} ${pickupAddress.lastName}`
+      }), /*#__PURE__*/_jsx("span", {
+        children: pickupAddress.emailAddress
+      }), /*#__PURE__*/_jsx("span", {
+        children: pickupAddress.mobile
+      })]
+    })
+  });
 };
 export default GuestCheckoutPickup;