@shopgate/engage 7.30.0-alpha.1 → 7.30.0-alpha.11

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationOrderSummary.js

@@ -1,4 +1,64 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import TimeIcon from'@shopgate/pwa-ui-shared/icons/TimeIcon';import moment from'moment';import{i18n}from"../../../core/helpers/i18n";import CheckoutConfirmationSection from"./CheckoutConfirmationSection";import{getCheckoutTaxLinesFromOrder}from"../../helpers";var styles={time:css({marginBottom:4,display:'flex',flexDirection:'row',alignItems:'center'}).toString(),timeText:css({marginLeft:8})};/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
+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,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  }).toString(),
+  timeText: css({
+    marginLeft: 8
+  })
+};
+
+/**
  * CheckoutConfirmationOrderSummary component
  * @returns {JSX}
- */var CheckoutConfirmationOrderSummary=function CheckoutConfirmationOrderSummary(_ref){var _order$lineItems$;var order=_ref.order,className=_ref.className;var content=useMemo(function(){return getCheckoutTaxLinesFromOrder(order).filter(function(t){return t.visible;}).map(function(t){var text=null;if(t.value!==null){if(t.type==='shippingTotal'&&t.value===0){text=i18n.text('shipping.free_short');}else{text=i18n.price(t.value,t.currencyCode,2);}}return{label:t.label===null?i18n.text("checkout.summary.".concat(t.type)):t.label,text:text};});},[order]);var fulfillmentSlot=order===null||order===void 0?void 0:(_order$lineItems$=order.lineItems[0])===null||_order$lineItems$===void 0?void 0:_order$lineItems$.fulfillmentSlot;return React.createElement(CheckoutConfirmationSection,{title:"checkout.success.order_summary",content:content,isSummary:true,className:className},fulfillmentSlot?React.createElement("div",{className:styles.time},React.createElement(TimeIcon,{size:20}),React.createElement("span",{className:styles.timeText},moment(fulfillmentSlot===null||fulfillmentSlot===void 0?void 0:fulfillmentSlot.date,'YYYY-MM-DD').format('ll'),' ',moment(fulfillmentSlot===null||fulfillmentSlot===void 0?void 0:fulfillmentSlot.from,'HH:mm').format('LT'),' - ',moment(fulfillmentSlot===null||fulfillmentSlot===void 0?void 0:fulfillmentSlot.to,'HH:mm').format('LT'))):null);};CheckoutConfirmationOrderSummary.defaultProps={className:null};export default CheckoutConfirmationOrderSummary;
+ */
+const CheckoutConfirmationOrderSummary = ({
+  order,
+  className
+}) => {
+  const content = useMemo(() => getCheckoutTaxLinesFromOrder(order).filter(t => t.visible).map(t => {
+    let text = null;
+    if (t.value !== null) {
+      if (t.type === 'shippingTotal' && t.value === 0) {
+        text = i18n.text('shipping.free_short');
+      } else {
+        text = i18n.price(t.value, t.currencyCode, 2);
+      }
+    }
+    return {
+      label: t.label === null ? i18n.text(`checkout.summary.${t.type}`) : t.label,
+      text
+    };
+  }), [order]);
+  const fulfillmentSlot = order?.lineItems[0]?.fulfillmentSlot;
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
+    title: "checkout.success.order_summary",
+    content: content,
+    isSummary: true,
+    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
+};
+export default CheckoutConfirmationOrderSummary;

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationPickUpContact.js

@@ -1,4 +1,62 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{i18n}from"../../../core/helpers/i18n";import CheckoutConfirmationSection from"./CheckoutConfirmationSection";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from "../../../core/helpers/i18n";
+import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
+
+/**
  * CheckoutConfirmationPickUpContact component
  * @returns {JSX}
- */var CheckoutConfirmationPickUpContact=function CheckoutConfirmationPickUpContact(_ref){var order=_ref.order,className=_ref.className;var content=useMemo(function(){var pickup=order.addressSequences.find(function(address){return address.type==='pickup';});if(!pickup){return null;}var firstName=pickup.firstName,lastName=pickup.lastName,phone=pickup.phone,mobile=pickup.mobile,emailAddress=pickup.emailAddress;var entries=[{label:i18n.text('checkout.success.name'),text:"".concat(firstName," ").concat(lastName)}];if(emailAddress){entries.push({label:i18n.text('checkout.success.email_address'),text:emailAddress});}if(mobile){entries.push({label:i18n.text('checkout.success.phone_number'),text:mobile});}else if(phone){entries.push({label:i18n.text('checkout.success.phone_number'),text:phone});}return entries;},[order]);if(!content){return null;}return React.createElement(CheckoutConfirmationSection,{title:"checkout.success.pick_up_contact",content:content,className:className});};CheckoutConfirmationPickUpContact.defaultProps={className:null};export default CheckoutConfirmationPickUpContact;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const CheckoutConfirmationPickUpContact = ({
+  order,
+  className
+}) => {
+  const content = useMemo(() => {
+    const pickup = order.addressSequences.find(address => address.type === 'pickup');
+    if (!pickup) {
+      return null;
+    }
+    const {
+      firstName,
+      lastName,
+      phone,
+      mobile,
+      emailAddress
+    } = pickup;
+    const entries = [{
+      label: i18n.text('checkout.success.name'),
+      text: `${firstName} ${lastName}`
+    }];
+    if (emailAddress) {
+      entries.push({
+        label: i18n.text('checkout.success.email_address'),
+        text: emailAddress
+      });
+    }
+    if (mobile) {
+      entries.push({
+        label: i18n.text('checkout.success.phone_number'),
+        text: mobile
+      });
+    } else if (phone) {
+      entries.push({
+        label: i18n.text('checkout.success.phone_number'),
+        text: phone
+      });
+    }
+    return entries;
+  }, [order]);
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
+    title: "checkout.success.pick_up_contact",
+    content: content,
+    className: className
+  });
+};
+CheckoutConfirmationPickUpContact.defaultProps = {
+  className: null
+};
+export default CheckoutConfirmationPickUpContact;

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationPickupNotes.js

@@ -1,4 +1,26 @@
-import React from'react';import PropTypes from'prop-types';import CheckoutConfirmationSection from"./CheckoutConfirmationSection";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
+
+/**
  * CheckoutConfirmationPickupNotes component
  * @returns {JSX}
- */var CheckoutConfirmationPickupNotes=function CheckoutConfirmationPickupNotes(_ref){var order=_ref.order,className=_ref.className;if(!order.notes){return null;}return React.createElement(CheckoutConfirmationSection,{title:"checkout.success.pickup_notes",content:order.notes,className:className});};CheckoutConfirmationPickupNotes.defaultProps={className:null};export default CheckoutConfirmationPickupNotes;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const CheckoutConfirmationPickupNotes = ({
+  order,
+  className
+}) => {
+  if (!order.notes) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
+    title: "checkout.success.pickup_notes",
+    content: order.notes,
+    className: className
+  });
+};
+CheckoutConfirmationPickupNotes.defaultProps = {
+  className: null
+};
+export default CheckoutConfirmationPickupNotes;

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationSection.js

@@ -1,4 +1,181 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{Fragment}from'react';import{css}from'glamor';import classNames from'classnames';import PropTypes from'prop-types';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";var colors=themeConfig.colors,variables=themeConfig.variables;var styles={wrapper:css({padding:"".concat(variables.gap.bigger,"px ").concat(variables.gap.big,"px 0 ").concat(variables.gap.big,"px")}).toString(),headline:css(_extends({color:colors.shade3,fontSize:'1rem',fontWeight:'normal',textTransform:'uppercase',paddingBottom:variables.gap.small,margin:0},!isIOSTheme()?{fontSize:'1.25rem',lineHeight:'1.5rem',fontWeight:500,color:'var(--color-text-high-emphasis)',textTransform:'none'}:{})),link:css({color:"var(--color-primary, ".concat(colors.primary,") !important")}).toString(),card:css(_extends({fontSize:'0.875rem',lineHeight:'1.25rem',margin:0,padding:variables.gap.big,color:'var(--color-text-medium-emphasis)',flex:'1 0 auto'},!isIOSTheme()?{background:'var(--color-background-accent)',boxShadow:'none'}:{})).toString(),cardWithForm:css(_extends({},!isIOSTheme()?{background:'inherit',boxShadow:'none',padding:0}:{})).toString(),list:css({margin:0}),listTitle:css({fontSize:'0.625rem',lineHeight:'1rem',fontWeight:'bold',letterSpacing:'1.5px',textTransform:'uppercase',color:'var(--color-text-high-emphasis)',':not(:first-child)':{paddingTop:variables.gap.xsmall*3}}),listEntry:css({fontSize:'0.875rem',lineHeight:'1.5rem',marginLeft:0,whiteSpace:'pre-line',wordBreak:'break-all',color:'var(--color-text-medium-emphasis)'}),table:css({color:'var(--color-text-high-emphasis)',' td':{padding:"".concat(variables.gap.xsmall,"px 0")},' td:last-child':{textAlign:'right',whiteSpace:'pre-wrap',paddingLeft:variables.gap.xsmall},' tr:nth-last-child(2) td':{paddingBottom:8},' tr:last-child td':{fontSize:'1rem',paddingTop:8,borderTop:'1px solid #979797',fontWeight:'bold'}})};/**
+import React, { Fragment } from 'react';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+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
+} = themeConfig;
+const styles = {
+  wrapper: css({
+    padding: `${variables.gap.bigger}px ${variables.gap.big}px 0 ${variables.gap.big}px`
+  }).toString(),
+  headline: css({
+    color: colors.shade3,
+    fontSize: '1rem',
+    fontWeight: 'normal',
+    textTransform: 'uppercase',
+    paddingBottom: variables.gap.small,
+    margin: 0,
+    ...(!isIOSTheme() ? {
+      fontSize: '1.25rem',
+      lineHeight: '1.5rem',
+      fontWeight: 500,
+      color: 'var(--color-text-high-emphasis)',
+      textTransform: 'none'
+    } : {})
+  }),
+  link: css({
+    color: `var(--color-primary, ${colors.primary}) !important`
+  }).toString(),
+  card: css({
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+    margin: 0,
+    padding: variables.gap.big,
+    color: 'var(--color-text-medium-emphasis)',
+    flex: '1 0 auto',
+    ...(!isIOSTheme() ? {
+      background: 'var(--color-background-accent)',
+      boxShadow: 'none'
+    } : {})
+  }).toString(),
+  cardWithForm: css({
+    ...(!isIOSTheme() ? {
+      background: 'inherit',
+      boxShadow: 'none',
+      padding: 0
+    } : {})
+  }).toString(),
+  list: css({
+    margin: 0
+  }),
+  listTitle: css({
+    fontSize: '0.625rem',
+    lineHeight: '1rem',
+    fontWeight: 'bold',
+    letterSpacing: '1.5px',
+    textTransform: 'uppercase',
+    color: 'var(--color-text-high-emphasis)',
+    ':not(:first-child)': {
+      paddingTop: variables.gap.xsmall * 3
+    }
+  }),
+  listEntry: css({
+    fontSize: '0.875rem',
+    lineHeight: '1.5rem',
+    marginLeft: 0,
+    whiteSpace: 'pre-line',
+    wordBreak: 'break-all',
+    color: 'var(--color-text-medium-emphasis)'
+  }),
+  table: css({
+    color: 'var(--color-text-high-emphasis)',
+    ' td': {
+      padding: `${variables.gap.xsmall}px 0`
+    },
+    ' td:last-child': {
+      textAlign: 'right',
+      whiteSpace: 'pre-wrap',
+      paddingLeft: variables.gap.xsmall
+    },
+    ' tr:nth-last-child(2) td': {
+      paddingBottom: 8
+    },
+    ' tr:last-child td': {
+      fontSize: '1rem',
+      paddingTop: 8,
+      borderTop: '1px solid #979797',
+      fontWeight: 'bold'
+    }
+  })
+};
+
+/**
  * CheckoutConfirmationSegment component
  * @returns {JSX}
- */var CheckoutConfirmationSegment=function CheckoutConfirmationSegment(_ref){var title=_ref.title,content=_ref.content,children=_ref.children,hasForm=_ref.hasForm,isSummary=_ref.isSummary,className=_ref.className;if(!content){return null;}var isString=typeof content==='string';return React.createElement(Fragment,null,React.createElement("div",{className:classNames(styles.wrapper,className)},React.createElement("h3",{className:styles.headline},i18n.text(title)),React.createElement(Card,{className:classNames(styles.card,_defineProperty({},styles.cardWithForm,hasForm))},isString&&React.createElement("span",null,content),!isString&&!isSummary&&React.createElement("dl",{className:styles.list},content.map(function(_ref2){var label=_ref2.label,text=_ref2.text,link=_ref2.link;return React.createElement(Fragment,{key:label||text},label&&React.createElement("dt",{className:styles.listTitle},i18n.text(label)),link?React.createElement("dd",{className:styles.listEntry},React.createElement(TextLink,{href:link,className:styles.link},React.createElement("span",{dangerouslySetInnerHTML:{__html:text}}))):React.createElement("dd",{className:styles.listEntry,dangerouslySetInnerHTML:{__html:text}}));})),children,isSummary&&React.createElement("table",{className:styles.table},React.createElement("tbody",null,content.map(function(_ref3){var label=_ref3.label,text=_ref3.text;return React.createElement("tr",{key:label||text},label&&React.createElement("td",null,i18n.text(label)),React.createElement("td",{dangerouslySetInnerHTML:{__html:text}}));}))))));};CheckoutConfirmationSegment.defaultProps={children:null,content:null,hasForm:false,isSummary:false,className:null};export default CheckoutConfirmationSegment;
+ */
+const CheckoutConfirmationSegment = ({
+  title,
+  content,
+  children,
+  hasForm,
+  isSummary,
+  className
+}) => {
+  if (!content) {
+    return null;
+  }
+  const isString = typeof content === 'string';
+  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,
+  content: null,
+  hasForm: false,
+  isSummary: false,
+  className: null
+};
+export default CheckoutConfirmationSegment;

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationShippedTo.js

@@ -1,4 +1,51 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{i18n}from"../../../core/helpers/i18n";import CheckoutConfirmationSection from"./CheckoutConfirmationSection";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from "../../../core/helpers/i18n";
+import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
+
+/**
  * CheckoutConfirmationShippedTo component
  * @returns {JSX}
- */var CheckoutConfirmationShippedTo=function CheckoutConfirmationShippedTo(_ref){var order=_ref.order,className=_ref.className;var content=useMemo(function(){var _orderSegment$selecte,_orderSegment$selecte2;var shipping=order.addressSequences.find(function(address){return address.type==='shipping';});if(!shipping){return null;}var firstName=shipping.firstName,lastName=shipping.lastName,address1=shipping.address1,city=shipping.city,region=shipping.region,postalCode=shipping.postalCode,orderSegment=shipping.orderSegment;var shippingMethodServiceLevel=orderSegment===null||orderSegment===void 0?void 0:(_orderSegment$selecte=orderSegment.selectedShippingMethod)===null||_orderSegment$selecte===void 0?void 0:(_orderSegment$selecte2=_orderSegment$selecte.serviceLevel)===null||_orderSegment$selecte2===void 0?void 0:_orderSegment$selecte2.name;var address=["".concat(firstName," ").concat(lastName),"".concat(address1||''),"".concat(city?"".concat(city,","):''," ").concat(city&&region?region:''," ").concat(postalCode||'')].filter(Boolean).join('\n');return[{label:i18n.text('checkout.success.address'),text:address}].concat(shippingMethodServiceLevel?{label:i18n.text('checkout.success.shipping_method'),text:shippingMethodServiceLevel}:[]);},[order]);if(!content){return null;}return React.createElement(CheckoutConfirmationSection,{title:"checkout.success.shipped_to",content:content,className:className});};CheckoutConfirmationShippedTo.defaultProps={className:null};export default CheckoutConfirmationShippedTo;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const CheckoutConfirmationShippedTo = ({
+  order,
+  className
+}) => {
+  const content = useMemo(() => {
+    const shipping = order.addressSequences.find(address => address.type === 'shipping');
+    if (!shipping) {
+      return null;
+    }
+    const {
+      firstName,
+      lastName,
+      address1,
+      city,
+      region,
+      postalCode,
+      orderSegment
+    } = shipping;
+    const shippingMethodServiceLevel = orderSegment?.selectedShippingMethod?.serviceLevel?.name;
+    const address = [`${firstName} ${lastName}`, `${address1 || ''}`, `${city ? `${city},` : ''} ${city && region ? region : ''} ${postalCode || ''}`].filter(Boolean).join('\n');
+    return [{
+      label: i18n.text('checkout.success.address'),
+      text: address
+    }].concat(shippingMethodServiceLevel ? {
+      label: i18n.text('checkout.success.shipping_method'),
+      text: shippingMethodServiceLevel
+    } : []);
+  }, [order]);
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
+    title: "checkout.success.shipped_to",
+    content: content,
+    className: className
+  });
+};
+CheckoutConfirmationShippedTo.defaultProps = {
+  className: null
+};
+export default CheckoutConfirmationShippedTo;

package/checkout/components/CheckoutConfirmation/index.js

@@ -1 +1,6 @@
-export{default as CheckoutConfirmationPickUpContact}from"./CheckoutConfirmationPickUpContact";export{default as CheckoutConfirmationOrderContact}from"./CheckoutConfirmationOrderContact";export{default as CheckoutConfirmationBilledTo}from"./CheckoutConfirmationBilledTo";export{default as CheckoutConfirmationShippedTo}from"./CheckoutConfirmationShippedTo";export{default as CheckoutConfirmationOrderSummary}from"./CheckoutConfirmationOrderSummary";export{default as CheckoutConfirmationSection}from"./CheckoutConfirmationSection";
+export { default as CheckoutConfirmationPickUpContact } from "./CheckoutConfirmationPickUpContact";
+export { default as CheckoutConfirmationOrderContact } from "./CheckoutConfirmationOrderContact";
+export { default as CheckoutConfirmationBilledTo } from "./CheckoutConfirmationBilledTo";
+export { default as CheckoutConfirmationShippedTo } from "./CheckoutConfirmationShippedTo";
+export { default as CheckoutConfirmationOrderSummary } from "./CheckoutConfirmationOrderSummary";
+export { default as CheckoutConfirmationSection } from "./CheckoutConfirmationSection";

package/checkout/components/GuestCheckout/GuestCheckout.js

@@ -1,4 +1,77 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import{css}from'glamor';import{ResponsiveContainer}from'@shopgate/engage/components';import{responsiveMediaQuery}from'@shopgate/engage/styles';import Header from"../Checkout/CheckoutHeader";import{GUEST_CHECKOUT_PAYMENT_PATTERN}from"../../constants/routes";import CheckoutProvider from"../../providers/CheckoutProvider";import PaymentProvider from"../../paymentMethods";import{ADDRESS_TYPE_BILLING,ADDRESS_TYPE_SHIPPING}from"../../constants";import Address from"../Checkout/CheckoutAddress";import Summary from"../Checkout/CheckoutSummary";import Actions from"../Checkout/CheckoutActions";import Pickup from"./GuestCheckoutPickup";import PickupNotes from"./GuestCheckoutPickupNotes";import GuestCheckoutOptIn from"./GuestCheckoutOptIn";import{ShippingMethods}from"../ShippingMethods";var styles={root:css({display:'flex',flexDirection:'row'}),main:css(_defineProperty({flex:1,paddingTop:16},responsiveMediaQuery('>=md',{webOnly:true}),{paddingRight:16,paddingTop:0})),side:css(_defineProperty({},responsiveMediaQuery('>=md',{webOnly:true}),{flex:0.6}))};/**
+import React from 'react';
+import { css } from 'glamor';
+import { ResponsiveContainer } from '@shopgate/engage/components';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import Header from "../Checkout/CheckoutHeader";
+import { GUEST_CHECKOUT_PAYMENT_PATTERN } from "../../constants/routes";
+import CheckoutProvider from "../../providers/CheckoutProvider";
+import PaymentProvider from "../../paymentMethods";
+import { ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from "../../constants";
+import Address from "../Checkout/CheckoutAddress";
+import Summary from "../Checkout/CheckoutSummary";
+import Actions from "../Checkout/CheckoutActions";
+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',
+    flexDirection: 'row'
+  }),
+  main: css({
+    flex: 1,
+    paddingTop: 16,
+    [responsiveMediaQuery('>=md', {
+      webOnly: true
+    })]: {
+      paddingRight: 16,
+      paddingTop: 0
+    }
+  }),
+  side: css({
+    [responsiveMediaQuery('>=md', {
+      webOnly: true
+    })]: {
+      flex: 0.6
+    }
+  })
+};
+
+/**
  * The Cart component.
  * @returns {JSX}
- */var GuestCheckout=function GuestCheckout(){return React.createElement(CheckoutProvider,{pathPattern:GUEST_CHECKOUT_PAYMENT_PATTERN,orderInitialized:true,orderReadOnly:true,isGuestCheckout:true},React.createElement(Header,{stepFrom:2,stepTo:2}),React.createElement("div",{className:styles.root},React.createElement("div",{className:styles.main},React.createElement(Pickup,null),React.createElement(PickupNotes,null),React.createElement(Address,{type:ADDRESS_TYPE_BILLING}),React.createElement(Address,{type:ADDRESS_TYPE_SHIPPING}),React.createElement(GuestCheckoutOptIn,null),React.createElement(ShippingMethods,null),React.createElement(PaymentProvider,null),React.createElement(ResponsiveContainer,{breakpoint:"<md",appAlways:true},React.createElement(Summary,null)),React.createElement(Actions,null)),React.createElement("div",{className:styles.side},React.createElement(ResponsiveContainer,{breakpoint:">=md",webOnly:true},React.createElement(Summary,null)))));};export default GuestCheckout;
+ */
+const GuestCheckout = () => /*#__PURE__*/_jsxs(CheckoutProvider, {
+  pathPattern: GUEST_CHECKOUT_PAYMENT_PATTERN,
+  orderInitialized: true,
+  orderReadOnly: true,
+  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.config.js

@@ -1,4 +1,15 @@
-import{i18n}from'@shopgate/engage/core';/**
+import { i18n } from '@shopgate/engage/core';
+
+/**
  * Generates form configuration.
  * @returns {Object}
- */var generateFormConfig=function generateFormConfig(){return{fields:{marketingOptIn:{type:'checkbox',label:i18n.text('registration.marketing_opt_in_label')}}};};export default generateFormConfig;
+ */
+const generateFormConfig = () => ({
+  fields: {
+    marketingOptIn: {
+      type: 'checkbox',
+      label: i18n.text('registration.marketing_opt_in_label')
+    }
+  }
+});
+export default generateFormConfig;

package/checkout/components/GuestCheckout/GuestCheckoutOptIn.js

@@ -1,3 +1,69 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useMemo,useCallback,useEffect}from'react';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import{FormBuilder,SurroundPortals}from'@shopgate/engage/components';import{isIOSTheme}from'@shopgate/engage/core';import{StylePresets}from'@shopgate/engage/components/Form';import Section from"../Checkout/CheckoutSection";import{useCheckoutContext}from"../../hooks/common";import generateFormConfig from"./GuestCheckoutOptIn.config";import{CHECKOUT_MARKETING_OPTIN}from"../../constants";var variables=themeConfig.variables;var styles={root:css(_extends({padding:"0 ".concat(variables.gap.big,"px")},!isIOSTheme()?{paddingBottom:variables.gap.xbig}:{})).toString(),form:css(_extends({' .guestCheckoutOptInMarketingOptIn .checkbox':{paddingBottom:0}},StylePresets.OUTLINED_FORM_FIELDS)).toString(),section:css({margin:variables.gap.big}).toString()};/**
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/engage';
+import { FormBuilder, SurroundPortals } from '@shopgate/engage/components';
+import { isIOSTheme } from '@shopgate/engage/core';
+import { StylePresets } from '@shopgate/engage/components/Form';
+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;
+const styles = {
+  root: css({
+    padding: `0 ${variables.gap.big}px`,
+    ...(!isIOSTheme() ? {
+      paddingBottom: variables.gap.xbig
+    } : {})
+  }).toString(),
+  form: css({
+    ' .guestCheckoutOptInMarketingOptIn .checkbox': {
+      paddingBottom: 0
+    },
+    ...StylePresets.OUTLINED_FORM_FIELDS
+  }).toString(),
+  section: css({
+    margin: variables.gap.big
+  }).toString()
+};
+
+/**
  * @returns {JSX}
- */var GuestCheckoutOptIn=function GuestCheckoutOptIn(){var _useCheckoutContext=useCheckoutContext(),defaultOptInFormState=_useCheckoutContext.defaultOptInFormState,optInFormSetValues=_useCheckoutContext.optInFormSetValues,setUpdateOptIns=_useCheckoutContext.setUpdateOptIns;/* eslint-disable react-hooks/exhaustive-deps */useEffect(function(){setUpdateOptIns();},[]);/* eslint-enable react-hooks/exhaustive-deps */var formConfig=useMemo(function(){return generateFormConfig();},[]);var handleUpdate=useCallback(function(values){optInFormSetValues(values);},[optInFormSetValues]);return React.createElement(SurroundPortals,{portalName:CHECKOUT_MARKETING_OPTIN},React.createElement("div",{className:styles.root},React.createElement(Section,{hasForm:true},React.createElement(FormBuilder,{className:styles.form,name:"GuestCheckoutOptIn",config:formConfig,defaults:defaultOptInFormState,handleUpdate:handleUpdate}))));};export default GuestCheckoutOptIn;
+ */
+const GuestCheckoutOptIn = () => {
+  const {
+    defaultOptInFormState,
+    optInFormSetValues,
+    setUpdateOptIns
+  } = useCheckoutContext();
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    setUpdateOptIns();
+  }, []);
+  /* eslint-enable react-hooks/exhaustive-deps */
+  const formConfig = useMemo(() => generateFormConfig(), []);
+  const handleUpdate = useCallback(values => {
+    optInFormSetValues(values);
+  }, [optInFormSetValues]);
+  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

@@ -1,4 +1,56 @@
-import React,{useMemo}from'react';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import{GUEST_CHECKOUT_PATTERN}from"../../constants/routes";import Section from"../Checkout/CheckoutSection";import{useCheckoutContext}from"../../hooks/common";import{ADDRESS_TYPE_PICKUP}from"../../constants";var variables=themeConfig.variables;var styles={root:css({padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.big,"px"),display:'flex',flexDirection:'column',flex:'0 0 auto'}).toString(),card:css({display:'flex',flexDirection:'column',fontSize:15,margin:'8px 0 12px 0'}).toString()};/**
+import React, { useMemo } from 'react';
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/engage';
+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;
+const styles = {
+  root: css({
+    padding: `0 ${variables.gap.big}px ${variables.gap.big}px`,
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '0 0 auto'
+  }).toString(),
+  card: css({
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: 15,
+    margin: '8px 0 12px 0'
+  }).toString()
+};
+
+/**
  * GuestCheckoutPickup
  * @returns {JSX}
- */var GuestCheckoutPickup=function GuestCheckoutPickup(){var _pickupAddress$middle;var _useCheckoutContext=useCheckoutContext(),pickupAddress=_useCheckoutContext.pickupAddress,orderReserveOnly=_useCheckoutContext.orderReserveOnly;var headline=useMemo(function(){return orderReserveOnly?'checkout.pickup_contact.headline_reserve':'checkout.pickup_contact.headline';},[orderReserveOnly]);if(!pickupAddress){return null;}return React.createElement("div",{className:styles.root},React.createElement(Section,{className:styles.card,title:headline,editLink:"".concat(GUEST_CHECKOUT_PATTERN,"?edit=").concat(ADDRESS_TYPE_PICKUP)},React.createElement("span",null,((_pickupAddress$middle=pickupAddress.middleName)===null||_pickupAddress$middle===void 0?void 0:_pickupAddress$middle.length)?"".concat(pickupAddress.firstName," ").concat(pickupAddress.middleName," ").concat(pickupAddress.lastName):"".concat(pickupAddress.firstName," ").concat(pickupAddress.lastName)),React.createElement("span",null,pickupAddress.emailAddress),React.createElement("span",null,pickupAddress.mobile)));};export default GuestCheckoutPickup;
+ */
+const GuestCheckoutPickup = () => {
+  const {
+    pickupAddress,
+    orderReserveOnly
+  } = useCheckoutContext();
+  const headline = useMemo(() => orderReserveOnly ? 'checkout.pickup_contact.headline_reserve' : 'checkout.pickup_contact.headline', [orderReserveOnly]);
+  if (!pickupAddress) {
+    return null;
+  }
+  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;