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

package/checkout/components/Checkout/CheckoutPickupContactForm.js

@@ -1,4 +1,92 @@
-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 from'react';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import{FormBuilder,SurroundPortals}from'@shopgate/engage/components';import{StylePresets}from'@shopgate/engage/components/Form';import generateFormConfig from"./CheckoutPickupContactForm.config";import Section from"./CheckoutSection";import{useCheckoutContext}from"../../hooks/common";import{CHECKOUT_PICKUP_CONTACT_FORM}from"../../constants";var variables=themeConfig.variables;var styles={root:css({padding:16,paddingTop:0,display:'flex',flex:'0 0 auto',flexDirection:'column'}).toString(),h1:css({fontSize:24,marginBottom:4,color:'var(--color-text-high-emphasis)'}).toString(),h2:css({fontSize:16}).toString(),form:css(_extends({' .pickupFormPickupPerson':{marginTop:variables.gap.small},' .pickupFormPickupPerson .me':{marginRight:variables.gap.big},' .pickupFormPickupPerson .label span':{color:'var(--color-text-high-emphasis)',fontWeight:'bold'},' .pickupFormPickupPerson .radioGroup':{marginTop:variables.gap.small,flexDirection:'row',' .uncheckedIcon':{color:'var(--color-text-medium-emphasis)'}}},StylePresets.OUTLINED_FORM_FIELDS)).toString()};/**
+import React from 'react';
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/engage';
+import { FormBuilder, SurroundPortals } from '@shopgate/engage/components';
+import { StylePresets } from '@shopgate/engage/components/Form';
+import generateFormConfig from "./CheckoutPickupContactForm.config";
+import Section from "./CheckoutSection";
+import { useCheckoutContext } from "../../hooks/common";
+import { CHECKOUT_PICKUP_CONTACT_FORM } from "../../constants";
+const {
+  variables
+} = themeConfig;
+const styles = {
+  root: css({
+    padding: 16,
+    paddingTop: 0,
+    display: 'flex',
+    flex: '0 0 auto',
+    flexDirection: 'column'
+  }).toString(),
+  h1: css({
+    fontSize: 24,
+    marginBottom: 4,
+    color: 'var(--color-text-high-emphasis)'
+  }).toString(),
+  h2: css({
+    fontSize: 16
+  }).toString(),
+  form: css({
+    ' .pickupFormPickupPerson': {
+      marginTop: variables.gap.small
+    },
+    ' .pickupFormPickupPerson .me': {
+      marginRight: variables.gap.big
+    },
+    ' .pickupFormPickupPerson .label span': {
+      color: 'var(--color-text-high-emphasis)',
+      fontWeight: 'bold'
+    },
+    ' .pickupFormPickupPerson .radioGroup': {
+      marginTop: variables.gap.small,
+      flexDirection: 'row',
+      ' .uncheckedIcon': {
+        color: 'var(--color-text-medium-emphasis)'
+      }
+    },
+    ...StylePresets.OUTLINED_FORM_FIELDS
+  }).toString()
+};
+
+/**
  * PickupContactForm
  * @returns {JSX}
- */var PickupContactForm=function PickupContactForm(){var _useCheckoutContext=useCheckoutContext(),supportedCountries=_useCheckoutContext.supportedCountries,countrySortOrder=_useCheckoutContext.countrySortOrder,userLocation=_useCheckoutContext.userLocation,defaultPickupPersonState=_useCheckoutContext.defaultPickupPersonState,formValidationErrors=_useCheckoutContext.formValidationErrors,formSetValues=_useCheckoutContext.formSetValues,isPickupContactSelectionEnabled=_useCheckoutContext.isPickupContactSelectionEnabled;var formConfig=React.useMemo(function(){return generateFormConfig({supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation});},[countrySortOrder,supportedCountries,userLocation]);var handleUpdate=React.useCallback(function(values){formSetValues(values);},[formSetValues]);if(!isPickupContactSelectionEnabled){return null;}return React.createElement(SurroundPortals,{portalName:CHECKOUT_PICKUP_CONTACT_FORM},React.createElement("div",{className:styles.root},React.createElement(Section,{title:"checkout.pickup_contact.headline",hasForm:true},React.createElement(FormBuilder,{className:styles.form,name:"PickupForm",config:formConfig,defaults:defaultPickupPersonState,validationErrors:formValidationErrors,handleUpdate:handleUpdate}))));};export default PickupContactForm;
+ */
+const PickupContactForm = () => {
+  const {
+    supportedCountries,
+    countrySortOrder,
+    userLocation,
+    defaultPickupPersonState,
+    formValidationErrors,
+    formSetValues,
+    isPickupContactSelectionEnabled
+  } = useCheckoutContext();
+  const formConfig = React.useMemo(() => generateFormConfig({
+    supportedCountries,
+    countrySortOrder,
+    userLocation
+  }), [countrySortOrder, supportedCountries, userLocation]);
+  const handleUpdate = React.useCallback(values => {
+    formSetValues(values);
+  }, [formSetValues]);
+  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
+  }))));
+};
+export default PickupContactForm;

package/checkout/components/Checkout/CheckoutSection.js

@@ -1,4 +1,149 @@
-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,{Fragment}from'react';import{css}from'glamor';import classNames from'classnames';import PropTypes from'prop-types';import{Card,Link}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import CheckoutSectionInfo from"./CheckoutSectionInfo";import CheckoutSectionMessages from"./CheckoutSectionMessages";import{i18n}from"../../../core/helpers/i18n";var variables=themeConfig.variables;var styles={headline:css({fontSize:'1.25rem',fontWeight:'normal',margin:"0 0 ".concat(variables.gap.small,"px 0"),color:'var(--color-text-high-emphasis)',textTransform:'none'}),card:css({display:'flex',flexDirection:'row',fontSize:15,width:'100%',overflow:'inherit !important',marginBottom:variables.gap.big,boxShadow:'none',background:'var(--color-background-accent)',padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big,"px"),margin:0}),cardWithForm:css({background:'inherit !important',boxShadow:'none  !important',padding:'0px !important'}).toString(),table:css({' 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':{paddingTop:8,borderTop:'1px solid #979797',fontWeight:'600'}}),actionsContainer:css({flex:1,display:'table',width:'100%'}).toString(),link:css({fontSize:'0.875rem',color:'var(--color-primary)',textTransform:'uppercase'}).toString(),actions:css({paddingTop:8}).toString(),labelWithInfoIcon:css({paddingRight:variables.gap.small}).toString()};/**
+import React, { Fragment } from 'react';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Card, Link } from '@shopgate/engage/components';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import CheckoutSectionInfo from "./CheckoutSectionInfo";
+import CheckoutSectionMessages from "./CheckoutSectionMessages";
+import { i18n } from "../../../core/helpers/i18n";
+const {
+  variables
+} = themeConfig;
+const styles = {
+  headline: css({
+    fontSize: '1.25rem',
+    fontWeight: 'normal',
+    margin: `0 0 ${variables.gap.small}px 0`,
+    color: 'var(--color-text-high-emphasis)',
+    textTransform: 'none'
+  }),
+  card: css({
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 15,
+    width: '100%',
+    overflow: 'inherit !important',
+    marginBottom: variables.gap.big,
+    boxShadow: 'none',
+    background: 'var(--color-background-accent)',
+    padding: `${variables.gap.small}px ${variables.gap.big}px`,
+    margin: 0
+  }),
+  cardWithForm: css({
+    background: 'inherit !important',
+    boxShadow: 'none  !important',
+    padding: '0px !important'
+  }).toString(),
+  table: css({
+    ' 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': {
+      paddingTop: 8,
+      borderTop: '1px solid #979797',
+      fontWeight: '600'
+    }
+  }),
+  actionsContainer: css({
+    flex: 1,
+    display: 'table',
+    width: '100%'
+  }).toString(),
+  link: css({
+    fontSize: '0.875rem',
+    color: 'var(--color-primary)',
+    textTransform: 'uppercase'
+  }).toString(),
+  actions: css({
+    paddingTop: 8
+  }).toString(),
+  labelWithInfoIcon: css({
+    paddingRight: variables.gap.small
+  }).toString()
+};
+
+/**
  * CheckoutSection component
  * @returns {JSX}
- */var CheckoutSection=function CheckoutSection(_ref){var title=_ref.title,className=_ref.className,content=_ref.content,children=_ref.children,hasForm=_ref.hasForm,editLink=_ref.editLink,editLabel=_ref.editLabel,id=_ref.id;return React.createElement(Fragment,null,title&&React.createElement("h3",{className:styles.headline,id:id},i18n.text(title)),React.createElement(Card,{className:classNames(styles.card.toString(),_defineProperty({},styles.cardWithForm.toString(),hasForm)),id:!title?id:null},React.createElement("div",{className:"".concat(styles.actionsContainer," ").concat(className)},children||null,content&&React.createElement("table",{className:styles.table},React.createElement("tbody",null,content.map(function(_ref2){var label=_ref2.label,text=_ref2.text,info=_ref2.info,messages=_ref2.messages;var hasMessages=Array.isArray(messages)&&messages.length>0;var hasError=false;if(hasMessages){hasError=!!messages.find(function(_ref3){var type=_ref3.type;return type==='error';});}return React.createElement(Fragment,{key:label},React.createElement("tr",null,React.createElement("td",null,React.createElement(Fragment,null,React.createElement("span",{className:classNames(_defineProperty({},styles.labelWithInfoIcon,!!info))},label),!hasError&&React.createElement(CheckoutSectionInfo,{text:info}))),React.createElement("td",null,text)),hasMessages&&React.createElement("tr",null,React.createElement("td",{colSpan:"2",style:{textAlign:'left',paddingLeft:0}},React.createElement(CheckoutSectionMessages,{messages:messages}),hasError&&React.createElement(CheckoutSectionInfo,{text:info,renderIcon:false}))));})))),editLink?React.createElement("div",{className:styles.actions},React.createElement(Link,{tag:"a",className:styles.link,href:editLink},i18n.text(editLabel))):null));};CheckoutSection.defaultProps={title:null,className:'',children:null,content:null,hasForm:false,editLink:null,editLabel:'checkout.billing.edit',id:null};export default CheckoutSection;
+ */
+const CheckoutSection = ({
+  title,
+  className,
+  content,
+  children,
+  hasForm,
+  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));
+CheckoutSection.defaultProps = {
+  title: null,
+  className: '',
+  children: null,
+  content: null,
+  hasForm: false,
+  editLink: null,
+  editLabel: 'checkout.billing.edit',
+  id: null
+};
+export default CheckoutSection;

package/checkout/components/Checkout/CheckoutSectionInfo.js

@@ -1,4 +1,75 @@
-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,{useCallback}from'react';import{css}from'glamor';import PropTypes from'prop-types';import{connect}from'react-redux';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';var mapDispatchToProps={showModal:showModalAction};var variables=themeConfig.variables;var styles={textWrapper:css({paddingTop:variables.gap.xsmall,fontSize:'0.75rem',color:'var(--color-state-alert)'}).toString(),iconWrapper:css(_defineProperty({cursor:'pointer',color:'var(--color-primary)',fontSize:'1.5rem',display:'inline-flex',verticalAlign:'bottom'},responsiveMediaQuery('<=xs',{appAlways:true}),{fontSize:'1.375rem'})).toString()};/**
+import React, { useCallback } from 'react';
+import { css } from 'glamor';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+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';
+const mapDispatchToProps = {
+  showModal: showModalAction
+};
+const {
+  variables
+} = themeConfig;
+const styles = {
+  textWrapper: css({
+    paddingTop: variables.gap.xsmall,
+    fontSize: '0.75rem',
+    color: 'var(--color-state-alert)'
+  }).toString(),
+  iconWrapper: css({
+    cursor: 'pointer',
+    color: 'var(--color-primary)',
+    fontSize: '1.5rem',
+    display: 'inline-flex',
+    verticalAlign: 'bottom',
+    [responsiveMediaQuery('<=xs', {
+      appAlways: true
+    })]: {
+      fontSize: '1.375rem'
+    }
+  }).toString()
+};
+
+/**
  * @param {Object} props The components props
  * @returns {JSX}
- */var CheckoutSectionInfo=function CheckoutSectionInfo(_ref){var text=_ref.text,showModal=_ref.showModal,renderIcon=_ref.renderIcon;var showPopup=useCallback(function(){showModal({message:text,title:null,confirm:null,dismiss:'modal.ok'});},[showModal,text]);if(!text){return null;}if(!renderIcon){return React.createElement("div",{className:styles.textWrapper,dangerouslySetInnerHTML:{__html:nl2br(text)}});}return React.createElement("span",{onClick:showPopup,onKeyDown:showPopup,className:styles.iconWrapper,role:"button",tabIndex:0},React.createElement(InfoIcon,null));};CheckoutSectionInfo.defaultProps={text:null,renderIcon:true};export default connect(null,mapDispatchToProps)(CheckoutSectionInfo);
+ */
+const CheckoutSectionInfo = ({
+  text,
+  showModal,
+  renderIcon
+}) => {
+  const showPopup = useCallback(() => {
+    showModal({
+      message: text,
+      title: null,
+      confirm: null,
+      dismiss: 'modal.ok'
+    });
+  }, [showModal, text]);
+  if (!text) {
+    return null;
+  }
+  if (!renderIcon) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.textWrapper,
+      dangerouslySetInnerHTML: {
+        __html: nl2br(text)
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    onClick: showPopup,
+    onKeyDown: showPopup,
+    className: styles.iconWrapper,
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(InfoIcon, null));
+};
+CheckoutSectionInfo.defaultProps = {
+  text: null,
+  renderIcon: true
+};
+export default connect(null, mapDispatchToProps)(CheckoutSectionInfo);

package/checkout/components/Checkout/CheckoutSectionMessages.js

@@ -1,4 +1,56 @@
-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 PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';import{errorBehavior}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;var styles={wrapper:css({paddingTop:variables.gap.xsmall}).toString(),message:css({fontSize:' 0.75rem'}).toString(),error:css({color:'var(--color-state-alert)'}).toString(),warning:css({color:'var(--color-state-warning)'}).toString(),info:css({color:'var(--color-state-ok)'}).toString()};/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { css } from 'glamor';
+import { errorBehavior } from '@shopgate/engage/core';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+const styles = {
+  wrapper: css({
+    paddingTop: variables.gap.xsmall
+  }).toString(),
+  message: css({
+    fontSize: ' 0.75rem'
+  }).toString(),
+  error: css({
+    color: 'var(--color-state-alert)'
+  }).toString(),
+  warning: css({
+    color: 'var(--color-state-warning)'
+  }).toString(),
+  info: css({
+    color: 'var(--color-state-ok)'
+  }).toString()
+};
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var CheckoutSectionMessages=function CheckoutSectionMessages(_ref){var messages=_ref.messages;if(!Array.isArray(messages)||messages.length===0){return null;}return React.createElement("ul",{className:styles.wrapper},messages.map(function(_ref2){var message=_ref2.message,additionalParams=_ref2.additionalParams,type=_ref2.type;return React.createElement("li",{key:message,className:classNames(styles.message,_defineProperty(_defineProperty(_defineProperty({},styles.error,type==='error'),styles.warning,type==='warning'),styles.info,type==='info'))},errorBehavior.getErrorMessage(message,additionalParams));}));};CheckoutSectionMessages.defaultProps={messages:null};export default CheckoutSectionMessages;
+ */
+const CheckoutSectionMessages = ({
+  messages
+}) => {
+  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))));
+};
+CheckoutSectionMessages.defaultProps = {
+  messages: null
+};
+export default CheckoutSectionMessages;

package/checkout/components/Checkout/CheckoutSummary.js

@@ -1,4 +1,69 @@
-import React,{useMemo}from'react';import{css}from'glamor';import{i18n}from'@shopgate/engage/core';import TimeIcon from'@shopgate/pwa-ui-shared/icons/TimeIcon';import moment from'moment';import Section from"./CheckoutSection";import{useCheckoutContext}from"../../hooks/common";var styles={root:css({padding:16,paddingTop:0,display:'flex',flexDirection:'column',flex:'0 0 auto'}).toString(),card:css({marginTop:8}).toString(),time:css({marginBottom:4,display:'flex',flexDirection:'row',alignItems:'center'}).toString(),timeText:css({marginLeft:8})};/**
+import React, { useMemo } from 'react';
+import { css } from 'glamor';
+import { i18n } from '@shopgate/engage/core';
+import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
+import moment from 'moment';
+import Section from "./CheckoutSection";
+import { useCheckoutContext } from "../../hooks/common";
+const styles = {
+  root: css({
+    padding: 16,
+    paddingTop: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '0 0 auto'
+  }).toString(),
+  card: css({
+    marginTop: 8
+  }).toString(),
+  time: css({
+    marginBottom: 4,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  }).toString(),
+  timeText: css({
+    marginLeft: 8
+  })
+};
+
+/**
  * Billing
  * @returns {JSX}
- */var Billing=function Billing(){var _useCheckoutContext=useCheckoutContext(),taxLines=_useCheckoutContext.taxLines,fulfillmentSlot=_useCheckoutContext.fulfillmentSlot;var content=useMemo(function(){return taxLines.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,info:t.info||null,messages:t.messages||null};});},[taxLines]);return React.createElement("div",{className:styles.root},React.createElement(Section,{className:styles.card,title:"checkout.summary.headline",content:content},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));};export default Billing;
+ */
+const Billing = () => {
+  const {
+    taxLines,
+    fulfillmentSlot
+  } = useCheckoutContext();
+  const content = useMemo(() => taxLines.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,
+      info: t.info || null,
+      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));
+};
+export default Billing;

package/checkout/components/CheckoutConfirmation/CheckoutConfirmation.connector.js

@@ -1,3 +1,14 @@
-import{connect}from'react-redux';import{isUserLoggedIn}from'@shopgate/pwa-common/selectors/user';import{fetchCheckoutOrder}from"../../actions/fetchCheckoutOrder";/**
+import { connect } from 'react-redux';
+import { isUserLoggedIn } from '@shopgate/pwa-common/selectors/user';
+import { fetchCheckoutOrder } from "../../actions/fetchCheckoutOrder";
+
+/**
  * @return {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){return function(state){return{isUserLoggedIn:isUserLoggedIn(state)};};};var mapDispatchToProps={fetchCheckoutOrder:fetchCheckoutOrder};export default connect(makeMapStateToProps,mapDispatchToProps);
+ */
+const makeMapStateToProps = () => state => ({
+  isUserLoggedIn: isUserLoggedIn(state)
+});
+const mapDispatchToProps = {
+  fetchCheckoutOrder
+};
+export default connect(makeMapStateToProps, mapDispatchToProps);