@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/orders/components/OrderDetails/OrderDetailsOrder.js

@@ -1,4 +1,80 @@
-import React,{useMemo}from'react';import{CartItems}from'@shopgate/engage/cart';import{CheckoutConfirmationPickUpContact,CheckoutConfirmationOrderContact,CheckoutConfirmationBilledTo,CheckoutConfirmationShippedTo,CheckoutConfirmationOrderSummary,SupplementalContent}from"../../../checkout/components";import{convertLineItemsToCartItems,isDirectShipOnlyOrder,isReserveOnlyOrder}from"../../../checkout/helpers";import{useOrderDetails}from"../../hooks";import OrderDetailsOrderHeader from"./OrderDetailsOrderHeader";import OrderDetailsOrderPickupLocation from"./OrderDetailsOrderPickupLocation";import{root,contactsWrapper,contact,cartWrapper,summaryWrapper,summary,supplemental}from"./OrderDetailsOrder.style";/**
+import React, { useMemo } from 'react';
+import { CartItems } from '@shopgate/engage/cart';
+import { CheckoutConfirmationPickUpContact, CheckoutConfirmationOrderContact, CheckoutConfirmationBilledTo, CheckoutConfirmationShippedTo, CheckoutConfirmationOrderSummary, SupplementalContent } from "../../../checkout/components";
+import { convertLineItemsToCartItems, isDirectShipOnlyOrder, isReserveOnlyOrder } from "../../../checkout/helpers";
+import { useOrderDetails } from "../../hooks";
+import OrderDetailsOrderHeader from "./OrderDetailsOrderHeader";
+import OrderDetailsOrderPickupLocation from "./OrderDetailsOrderPickupLocation";
+import { root, contactsWrapper, contact, cartWrapper, summaryWrapper, summary, supplemental } from "./OrderDetailsOrder.style";
+
+/**
  * The OrderDetailsOrder component
  * @returns {JSX}
- */var OrderDetailsOrder=function OrderDetailsOrder(){var _useOrderDetails=useOrderDetails(),isUserLoggedIn=_useOrderDetails.isUserLoggedIn,order=_useOrderDetails.order;var _useMemo=useMemo(function(){if(!(order===null||order===void 0?void 0:order.lineItems)){return{};}return{orderNumber:order.orderNumber,date:order.date,cartItems:convertLineItemsToCartItems(order.lineItems),isReserveOnly:isReserveOnlyOrder(order),isDirectShipOnly:isDirectShipOnlyOrder(order),currencyOverride:order.currencyCode};},[order]),cartItems=_useMemo.cartItems,isReserveOnly=_useMemo.isReserveOnly,isDirectShipOnly=_useMemo.isDirectShipOnly,currencyOverride=_useMemo.currencyOverride;if(!order||!cartItems){return null;}return React.createElement("div",{className:root},React.createElement(OrderDetailsOrderHeader,{order:order}),React.createElement("div",{className:contactsWrapper},!isUserLoggedIn&&isReserveOnly?React.createElement(CheckoutConfirmationOrderContact,{order:order,className:contact}):React.createElement(CheckoutConfirmationBilledTo,{order:order,className:contact}),React.createElement(CheckoutConfirmationShippedTo,{order:order,className:contact}),React.createElement(CheckoutConfirmationPickUpContact,{order:order,className:contact}),React.createElement(OrderDetailsOrderPickupLocation,{order:order,className:contact})),React.createElement("div",{className:cartWrapper},React.createElement(CartItems,{cartItems:cartItems,onFocus:function onFocus(){},editable:false,multiLineReservation:true,isOrderDetails:true,isDirectShipOnly:isDirectShipOnly,currencyOverride:currencyOverride})),React.createElement("div",{className:summaryWrapper},React.createElement(CheckoutConfirmationOrderSummary,{order:order,className:summary}),React.createElement(SupplementalContent,{className:supplemental})));};export default OrderDetailsOrder;
+ */
+const OrderDetailsOrder = () => {
+  const {
+    isUserLoggedIn,
+    order
+  } = useOrderDetails();
+  const {
+    cartItems,
+    isReserveOnly,
+    isDirectShipOnly,
+    currencyOverride
+  } = useMemo(() => {
+    if (!order?.lineItems) {
+      return {};
+    }
+    return {
+      orderNumber: order.orderNumber,
+      date: order.date,
+      cartItems: convertLineItemsToCartItems(order.lineItems),
+      isReserveOnly: isReserveOnlyOrder(order),
+      isDirectShipOnly: isDirectShipOnlyOrder(order),
+      currencyOverride: order.currencyCode
+    };
+  }, [order]);
+  if (!order || !cartItems) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: root
+  }, /*#__PURE__*/React.createElement(OrderDetailsOrderHeader, {
+    order: order
+  }), /*#__PURE__*/React.createElement("div", {
+    className: contactsWrapper
+  }, !isUserLoggedIn && isReserveOnly ? /*#__PURE__*/React.createElement(CheckoutConfirmationOrderContact, {
+    order: order,
+    className: contact
+  }) : /*#__PURE__*/React.createElement(CheckoutConfirmationBilledTo, {
+    order: order,
+    className: contact
+  }), /*#__PURE__*/React.createElement(CheckoutConfirmationShippedTo, {
+    order: order,
+    className: contact
+  }), /*#__PURE__*/React.createElement(CheckoutConfirmationPickUpContact, {
+    order: order,
+    className: contact
+  }), /*#__PURE__*/React.createElement(OrderDetailsOrderPickupLocation, {
+    order: order,
+    className: contact
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cartWrapper
+  }, /*#__PURE__*/React.createElement(CartItems, {
+    cartItems: cartItems,
+    onFocus: () => {},
+    editable: false,
+    multiLineReservation: true,
+    isOrderDetails: true,
+    isDirectShipOnly: isDirectShipOnly,
+    currencyOverride: currencyOverride
+  })), /*#__PURE__*/React.createElement("div", {
+    className: summaryWrapper
+  }, /*#__PURE__*/React.createElement(CheckoutConfirmationOrderSummary, {
+    order: order,
+    className: summary
+  }), /*#__PURE__*/React.createElement(SupplementalContent, {
+    className: supplemental
+  })));
+};
+export default OrderDetailsOrder;

package/orders/components/OrderDetails/OrderDetailsOrder.style.js

@@ -1 +1,62 @@
-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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var root=css({padding:"".concat(variables.gap.big,"px 0")});export var contactsWrapper=css(_defineProperty({paddingBottom:variables.gap.big},responsiveMediaQuery('>sm',{webOnly:true}),{display:'flex'})).toString();export var contact=css(_defineProperty({},responsiveMediaQuery('>sm',{webOnly:true}),{width:'50%',display:'flex',flexDirection:'column',paddingLeft:variables.gap.small,paddingRight:variables.gap.small,':first-child':{paddingLeft:variables.gap.big},':last-child':{paddingRight:variables.gap.big}})).toString();export var cartWrapper=css({paddingTop:variables.gap.big,paddingBottom:variables.gap.big});export var summaryWrapper=css(_defineProperty({},responsiveMediaQuery('>sm',{webOnly:true}),{display:'flex',alignItems:'flex-end',flexDirection:'column'}));export var summary=css(_defineProperty({},responsiveMediaQuery('>sm',{webOnly:true}),{width:'50%'})).toString();export var supplemental=css(_defineProperty({padding:variables.gap.big},responsiveMediaQuery('>sm',{webOnly:true}),{width:'50%'})).toString();
+import { css } from 'glamor';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const root = css({
+  padding: `${variables.gap.big}px 0`
+});
+export const contactsWrapper = css({
+  paddingBottom: variables.gap.big,
+  [responsiveMediaQuery('>sm', {
+    webOnly: true
+  })]: {
+    display: 'flex'
+  }
+}).toString();
+export const contact = css({
+  [responsiveMediaQuery('>sm', {
+    webOnly: true
+  })]: {
+    width: '50%',
+    display: 'flex',
+    flexDirection: 'column',
+    paddingLeft: variables.gap.small,
+    paddingRight: variables.gap.small,
+    ':first-child': {
+      paddingLeft: variables.gap.big
+    },
+    ':last-child': {
+      paddingRight: variables.gap.big
+    }
+  }
+}).toString();
+export const cartWrapper = css({
+  paddingTop: variables.gap.big,
+  paddingBottom: variables.gap.big
+});
+export const summaryWrapper = css({
+  [responsiveMediaQuery('>sm', {
+    webOnly: true
+  })]: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    flexDirection: 'column'
+  }
+});
+export const summary = css({
+  [responsiveMediaQuery('>sm', {
+    webOnly: true
+  })]: {
+    width: '50%'
+  }
+}).toString();
+export const supplemental = css({
+  padding: variables.gap.big,
+  [responsiveMediaQuery('>sm', {
+    webOnly: true
+  })]: {
+    width: '50%'
+  }
+}).toString();

package/orders/components/OrderDetails/OrderDetailsOrderHeader.js

@@ -1,4 +1,67 @@
-import React from'react';import PropTypes from'prop-types';import moment from'moment';import{i18n}from'@shopgate/engage/core';import TimeIcon from'@shopgate/pwa-ui-shared/icons/TimeIcon';import{getTranslatedOrderStatus}from"../../helpers";import{useOrderDetails}from"../../hooks";import{wrapper,instructions,body,orderNum,subline,cancel,time,timeIcon}from"./OrderDetailsOrderHeader.style";import{Button}from"../../../components";import{ORDER_STATUS_SUBMITTED}from"../../constants";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { i18n } from '@shopgate/engage/core';
+import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
+import { getTranslatedOrderStatus } from "../../helpers";
+import { useOrderDetails } from "../../hooks";
+import { wrapper, instructions, body, orderNum, subline, cancel, time, timeIcon } from "./OrderDetailsOrderHeader.style";
+import { Button } from "../../../components";
+import { ORDER_STATUS_SUBMITTED } from "../../constants";
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var OrderDetailsOrderHeader=function OrderDetailsOrderHeader(_ref){var _lineItems$;var order=_ref.order;var _useOrderDetails=useOrderDetails(),cancelOrder=_useOrderDetails.cancelOrder;if(!order){return null;}var orderNumber=order.orderNumber,status=order.status,statusText=order.statusText,lineItems=order.lineItems;var fulfillmentSlot=(_lineItems$=lineItems[0])===null||_lineItems$===void 0?void 0:_lineItems$.fulfillmentSlot;/* eslint-disable react/no-danger */return React.createElement("div",{className:wrapper},React.createElement("div",{className:subline},React.createElement("p",{className:orderNum},i18n.text('order_details.subline.order_number',{orderNumber:orderNumber}),' | ',i18n.text('order_details.subline.order_status',{status:getTranslatedOrderStatus(status)})),status===ORDER_STATUS_SUBMITTED&&React.createElement(Button,{className:cancel,type:"secondary",onClick:cancelOrder,flat:true,wrapContent:false},i18n.text('order_details.cancel.button'))),fulfillmentSlot?React.createElement("div",{className:time},React.createElement(TimeIcon,{size:20,className:timeIcon}),React.createElement("span",{className:subline},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,statusText&&React.createElement("div",{className:instructions},React.createElement("p",{className:body,dangerouslySetInnerHTML:{__html:statusText}})));/* eslint-enable react/no-danger */};export default OrderDetailsOrderHeader;
+ */
+const OrderDetailsOrderHeader = ({
+  order
+}) => {
+  const {
+    cancelOrder
+  } = useOrderDetails();
+  if (!order) {
+    return null;
+  }
+  const {
+    orderNumber,
+    status,
+    statusText,
+    lineItems
+  } = order;
+  const fulfillmentSlot = lineItems[0]?.fulfillmentSlot;
+
+  /* eslint-disable react/no-danger */
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: subline
+  }, /*#__PURE__*/React.createElement("p", {
+    className: orderNum
+  }, i18n.text('order_details.subline.order_number', {
+    orderNumber
+  }), ' | ', i18n.text('order_details.subline.order_status', {
+    status: getTranslatedOrderStatus(status)
+  })), status === ORDER_STATUS_SUBMITTED && /*#__PURE__*/React.createElement(Button, {
+    className: cancel,
+    type: "secondary",
+    onClick: cancelOrder,
+    flat: true,
+    wrapContent: false
+  }, i18n.text('order_details.cancel.button'))), fulfillmentSlot ? /*#__PURE__*/React.createElement("div", {
+    className: time
+  }, /*#__PURE__*/React.createElement(TimeIcon, {
+    size: 20,
+    className: timeIcon
+  }), /*#__PURE__*/React.createElement("span", {
+    className: subline
+  }, moment(fulfillmentSlot?.date, 'YYYY:MM-DD').format('LL'), ' ', moment(fulfillmentSlot?.from, 'HH:mm').format('LT'), ' - ', moment(fulfillmentSlot?.to, 'HH:mm').format('LT'))) : null, statusText && /*#__PURE__*/React.createElement("div", {
+    className: instructions
+  }, /*#__PURE__*/React.createElement("p", {
+    className: body,
+    dangerouslySetInnerHTML: {
+      __html: statusText
+    }
+  })));
+  /* eslint-enable react/no-danger */
+};
+export default OrderDetailsOrderHeader;

package/orders/components/OrderDetails/OrderDetailsOrderHeader.style.js

@@ -1 +1,42 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var wrapper=css({padding:"".concat(variables.gap.big,"px ").concat(variables.gap.big,"px 0")});export var instructions=css({});export var body=css({border:0,fontSize:'0.875rem',lineHeight:'1.25rem',marginBottom:0});export var orderNum=css({padding:0,fontSize:'1.25rem',fontWeight:500,lineHeight:'1.5rem',margin:"0 0 ".concat(variables.gap.big,"px"),border:0});export var subline=css({display:'flex',alignItems:'baseline',justifyContent:'space-between',flexWrap:'wrap'});export var cancel=css({flexShrink:0,marginRight:8}).toString();export var time=css({marginTop:8,display:'flex',flexDirection:'row',alignItems:'center'}).toString();export var timeIcon=css({marginRight:8}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const wrapper = css({
+  padding: `${variables.gap.big}px ${variables.gap.big}px 0`
+});
+export const instructions = css({});
+export const body = css({
+  border: 0,
+  fontSize: '0.875rem',
+  lineHeight: '1.25rem',
+  marginBottom: 0
+});
+export const orderNum = css({
+  padding: 0,
+  fontSize: '1.25rem',
+  fontWeight: 500,
+  lineHeight: '1.5rem',
+  margin: `0 0 ${variables.gap.big}px`,
+  border: 0
+});
+export const subline = css({
+  display: 'flex',
+  alignItems: 'baseline',
+  justifyContent: 'space-between',
+  flexWrap: 'wrap'
+});
+export const cancel = css({
+  flexShrink: 0,
+  marginRight: 8
+}).toString();
+export const time = css({
+  marginTop: 8,
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center'
+}).toString();
+export const timeIcon = css({
+  marginRight: 8
+}).toString();

package/orders/components/OrderDetails/OrderDetailsOrderPickupLocation.connector.js

@@ -1,3 +1,23 @@
-import{connect}from'react-redux';import{makeGetLocation}from'@shopgate/engage/locations';/**
+import { connect } from 'react-redux';
+import { makeGetLocation } from '@shopgate/engage/locations';
+
+/**
  * @return {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getLocation=makeGetLocation(function(_,props){return props.locationCode;});return function(state,props){var _lineItems$find;var _props$order$lineItem=props.order.lineItems,lineItems=_props$order$lineItem===void 0?[]:_props$order$lineItem;var locationCode=(_lineItems$find=lineItems.find(function(lineItem){return(lineItem===null||lineItem===void 0?void 0:lineItem.fulfillmentLocationCode)!==undefined;}))===null||_lineItems$find===void 0?void 0:_lineItems$find.fulfillmentLocationCode;return{location:getLocation(state,{locationCode:locationCode})};};};export default connect(makeMapStateToProps);
+ */
+const makeMapStateToProps = () => {
+  const getLocation = makeGetLocation((_, props) => props.locationCode);
+  return (state, props) => {
+    const {
+      order: {
+        lineItems = []
+      }
+    } = props;
+    const locationCode = lineItems.find(lineItem => lineItem?.fulfillmentLocationCode !== undefined)?.fulfillmentLocationCode;
+    return {
+      location: getLocation(state, {
+        locationCode
+      })
+    };
+  };
+};
+export default connect(makeMapStateToProps);

package/orders/components/OrderDetails/OrderDetailsOrderPickupLocation.js

@@ -1,4 +1,60 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{i18n,generateGoogleMapsDirectionsUrl}from'@shopgate/engage/core';import{CheckoutConfirmationSection}from"../../../checkout/components";import connect from"./OrderDetailsOrderPickupLocation.connector";import{locationName}from"./OrderDetailsOrderPickupLocation.style";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { i18n, generateGoogleMapsDirectionsUrl } from '@shopgate/engage/core';
+import { CheckoutConfirmationSection } from "../../../checkout/components";
+import connect from "./OrderDetailsOrderPickupLocation.connector";
+import { locationName } from "./OrderDetailsOrderPickupLocation.style";
+
+/**
  * OrderDetailsPickupLocation component
  * @returns {JSX}
- */var OrderDetailsPickupLocation=function OrderDetailsPickupLocation(_ref){var location=_ref.location,className=_ref.className;var content=useMemo(function(){if(!location){return null;}var name=location.name,address=location.address;var mapsUrl=generateGoogleMapsDirectionsUrl(address);var entries=[{text:"<h4 class=\"".concat(locationName,"\">").concat(name,"</h4>")}];var formattedAddress=[address===null||address===void 0?void 0:address.street,address===null||address===void 0?void 0:address.street2,i18n.text('locations.address',{postalCode:address.postalCode,city:address.city,region:address.region})].filter(Boolean).join('\n');entries.push({label:'order_details.pickup_location.address',text:formattedAddress,link:mapsUrl});if(address.phoneNumber){entries.push({label:'order_details.pickup_location.phone_number',text:address.phoneNumber,link:"tel:".concat(address.phoneNumber)});}return entries;},[location]);if(!location){return null;}return React.createElement(CheckoutConfirmationSection,{title:"order_details.pickup_location.headline",content:content,className:className});};OrderDetailsPickupLocation.defaultProps={className:null,location:null};export default connect(OrderDetailsPickupLocation);
+ */
+const OrderDetailsPickupLocation = ({
+  location,
+  className
+}) => {
+  const content = useMemo(() => {
+    if (!location) {
+      return null;
+    }
+    const {
+      name,
+      address
+    } = location;
+    const mapsUrl = generateGoogleMapsDirectionsUrl(address);
+    const entries = [{
+      text: `<h4 class="${locationName}">${name}</h4>`
+    }];
+    const formattedAddress = [address?.street, address?.street2, i18n.text('locations.address', {
+      postalCode: address.postalCode,
+      city: address.city,
+      region: address.region
+    })].filter(Boolean).join('\n');
+    entries.push({
+      label: 'order_details.pickup_location.address',
+      text: formattedAddress,
+      link: mapsUrl
+    });
+    if (address.phoneNumber) {
+      entries.push({
+        label: 'order_details.pickup_location.phone_number',
+        text: address.phoneNumber,
+        link: `tel:${address.phoneNumber}`
+      });
+    }
+    return entries;
+  }, [location]);
+  if (!location) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(CheckoutConfirmationSection, {
+    title: "order_details.pickup_location.headline",
+    content: content,
+    className: className
+  });
+};
+OrderDetailsPickupLocation.defaultProps = {
+  className: null,
+  location: null
+};
+export default connect(OrderDetailsPickupLocation);

package/orders/components/OrderDetails/OrderDetailsOrderPickupLocation.style.js

@@ -1 +1,7 @@
-import{css}from'glamor';export var locationName=css({margin:0,color:'var(--color-text-high-emphasis)',fontSize:'1rem',fontWeight:500});
+import { css } from 'glamor';
+export const locationName = css({
+  margin: 0,
+  color: 'var(--color-text-high-emphasis)',
+  fontSize: '1rem',
+  fontWeight: 500
+});

package/orders/components/OrderDetails/index.js

@@ -1 +1 @@
-export{default as OrderDetails}from"./OrderDetails";
+export { default as OrderDetails } from "./OrderDetails";

package/orders/components/OrderHistory/OrderHistory.js

@@ -1,4 +1,41 @@
-import React from'react';import{Table,TableRow}from"./OrderHistoryTable";import{List,Row}from"./OrderHistoryList";import{ResponsiveContainer,NoResults}from"../../../components";import OrderHistoryLoader from"./OrderHistoryLoader";import{useOrderHistory}from"../../hooks";import{root,noResult}from"./OrderHistory.style";/**
+import React from 'react';
+import { Table, TableRow } from "./OrderHistoryTable";
+import { List, Row } from "./OrderHistoryList";
+import { ResponsiveContainer, NoResults } from "../../../components";
+import OrderHistoryLoader from "./OrderHistoryLoader";
+import { useOrderHistory } from "../../hooks";
+import { root, noResult } from "./OrderHistory.style";
+
+/**
  * The OrderDetails components
  * @returns {JSX}
- */var OrderHistory=function OrderHistory(){var _useOrderHistory=useOrderHistory(),totalOrderCount=_useOrderHistory.totalOrderCount;if(totalOrderCount===0){return React.createElement("div",{className:noResult},React.createElement(NoResults,{headlineText:"orders.no_result.body",bodyText:""}));}return React.createElement("div",{className:root},React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"<=xs"},React.createElement(OrderHistoryLoader,{wrapper:List,iterator:Row})),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(OrderHistoryLoader,{wrapper:Table,iterator:TableRow})));};export default OrderHistory;
+ */
+const OrderHistory = () => {
+  const {
+    totalOrderCount
+  } = useOrderHistory();
+  if (totalOrderCount === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: noResult
+    }, /*#__PURE__*/React.createElement(NoResults, {
+      headlineText: "orders.no_result.body",
+      bodyText: ""
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: root
+  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
+    appAlways: true,
+    breakpoint: "<=xs"
+  }, /*#__PURE__*/React.createElement(OrderHistoryLoader, {
+    wrapper: List,
+    iterator: Row
+  })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
+    webOnly: true,
+    breakpoint: ">xs"
+  }, /*#__PURE__*/React.createElement(OrderHistoryLoader, {
+    wrapper: Table,
+    iterator: TableRow
+  })));
+};
+export default OrderHistory;

package/orders/components/OrderHistory/OrderHistory.style.js

@@ -1 +1,7 @@
-import{css}from'glamor';export var root=css({margin:8});export var noResult=css({margin:16});
+import { css } from 'glamor';
+export const root = css({
+  margin: 8
+});
+export const noResult = css({
+  margin: 16
+});

package/orders/components/OrderHistory/OrderHistoryList.js

@@ -1,9 +1,56 @@
-import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import{i18n}from'@shopgate/engage/core';import{getTranslatedOrderStatus}from"../../helpers";import{card,list,orderNumber,column,rightAlign,cardContent}from"./OrderHistoryList.style";import{CardList,Link}from"../../../components";import{getOrderDetailsRoute}from"../../helpers/orderDetails";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import { i18n } from '@shopgate/engage/core';
+import { getTranslatedOrderStatus } from "../../helpers";
+import { card, list, orderNumber, column, rightAlign, cardContent } from "./OrderHistoryList.style";
+import { CardList, Link } from "../../../components";
+import { getOrderDetailsRoute } from "../../helpers/orderDetails";
+
+/**
  * The Order History List Item component
  * @param {Object} props props
  * @returns {JSX}
- */export var Row=function Row(props){return React.createElement(CardList.Item,{key:props.orderNumber,className:card,onClick:props.openDetails},React.createElement(Link,{className:cardContent,href:getOrderDetailsRoute(props.orderNumber)},React.createElement("div",{className:column},React.createElement("span",{className:orderNumber},i18n.text('orders.header.orderNumber'),":\xA0",props.orderNumber),React.createElement("span",null,React.createElement(I18n.Date,{timestamp:new Date(props.submitDate).getTime(),format:"short"}),"\xA0",React.createElement(I18n.Time,{timestamp:new Date(props.submitDate).getTime(),format:"short"})),React.createElement("span",null,i18n.text('orders.header.status'),":\xA0",getTranslatedOrderStatus(props.status))),React.createElement("div",{className:column},React.createElement("span",{className:rightAlign},React.createElement(I18n.Price,{currency:props.currencyCode,price:props.total})),React.createElement("span",{className:rightAlign},React.createElement(I18n.Number,{number:props.lineItemCount,fractions:0}),"\xA0",i18n.text('orders.itemCount',{count:props.lineItemCount})))));};/**
+ */
+export const Row = props => /*#__PURE__*/React.createElement(CardList.Item, {
+  key: props.orderNumber,
+  className: card,
+  onClick: props.openDetails
+}, /*#__PURE__*/React.createElement(Link, {
+  className: cardContent,
+  href: getOrderDetailsRoute(props.orderNumber)
+}, /*#__PURE__*/React.createElement("div", {
+  className: column
+}, /*#__PURE__*/React.createElement("span", {
+  className: orderNumber
+}, i18n.text('orders.header.orderNumber'), ":\xA0", props.orderNumber), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n.Date, {
+  timestamp: new Date(props.submitDate).getTime(),
+  format: "short"
+}), "\xA0", /*#__PURE__*/React.createElement(I18n.Time, {
+  timestamp: new Date(props.submitDate).getTime(),
+  format: "short"
+})), /*#__PURE__*/React.createElement("span", null, i18n.text('orders.header.status'), ":\xA0", getTranslatedOrderStatus(props.status))), /*#__PURE__*/React.createElement("div", {
+  className: column
+}, /*#__PURE__*/React.createElement("span", {
+  className: rightAlign
+}, /*#__PURE__*/React.createElement(I18n.Price, {
+  currency: props.currencyCode,
+  price: props.total
+})), /*#__PURE__*/React.createElement("span", {
+  className: rightAlign
+}, /*#__PURE__*/React.createElement(I18n.Number, {
+  number: props.lineItemCount,
+  fractions: 0
+}), "\xA0", i18n.text('orders.itemCount', {
+  count: props.lineItemCount
+})))));
+/**
  * The Order History List component
  * @param {Object} props props
  * @returns {JSX}
- */export var List=function List(_ref){var children=_ref.children;return React.createElement(CardList,{className:list},children);};
+ */
+export const List = ({
+  children
+}) => /*#__PURE__*/React.createElement(CardList, {
+  className: list
+}, children);

package/orders/components/OrderHistory/OrderHistoryList.style.js

@@ -1 +1,36 @@
-import{css}from'glamor';import{themeConfig,themeColors,themeName}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;var isIOS=themeName.includes('ios');export var orderNumber=css({fontWeight:500});export var list=css({background:"var(--color-background-accent, ".concat(themeColors.background,")"),marginBottom:"-".concat(variables.gap.small*1.5,"px")});export var cardContent=css({padding:variables.gap.big,display:'flex',flexDirection:'row',justifyContent:'space-between'}).toString();export var column=css({display:'flex',flexDirection:'column'});export var rightAlign=css({textAlign:'right'});export var card=css({marginBottom:variables.gap.small*1.5,':last-of-type':{marginBottom:0},background:themeColors.light,boxSizing:'border-box',boxShadow:themeConfig.shadows.productCard,borderRadius:isIOS?10:2}).toString();
+import { css } from 'glamor';
+import { themeConfig, themeColors, themeName } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+const isIOS = themeName.includes('ios');
+export const orderNumber = css({
+  fontWeight: 500
+});
+export const list = css({
+  background: `var(--color-background-accent, ${themeColors.background})`,
+  marginBottom: `-${variables.gap.small * 1.5}px`
+});
+export const cardContent = css({
+  padding: variables.gap.big,
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between'
+}).toString();
+export const column = css({
+  display: 'flex',
+  flexDirection: 'column'
+});
+export const rightAlign = css({
+  textAlign: 'right'
+});
+export const card = css({
+  marginBottom: variables.gap.small * 1.5,
+  ':last-of-type': {
+    marginBottom: 0
+  },
+  background: themeColors.light,
+  boxSizing: 'border-box',
+  boxShadow: themeConfig.shadows.productCard,
+  borderRadius: isIOS ? 10 : 2
+}).toString();

package/orders/components/OrderHistory/OrderHistoryLoader.js

@@ -1,4 +1,39 @@
-import React from'react';import PropTypes from'prop-types';import{ITEMS_PER_LOAD}from'@shopgate/pwa-common/constants/DisplayOptions';import InfiniteContainer from'@shopgate/pwa-common/components/InfiniteContainer';import LoadingIndicator from'@shopgate/pwa-ui-shared/LoadingIndicator';import{ViewContext}from'@shopgate/engage/components/View';import{useOrderHistory}from"../../hooks";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ITEMS_PER_LOAD } from '@shopgate/pwa-common/constants/DisplayOptions';
+import InfiniteContainer from '@shopgate/pwa-common/components/InfiniteContainer';
+import LoadingIndicator from '@shopgate/pwa-ui-shared/LoadingIndicator';
+import { ViewContext } from '@shopgate/engage/components/View';
+import { useOrderHistory } from "../../hooks";
+
+/**
  * The OrderDetails components
  * @returns {JSX}
- */var OrderHistoryLoader=function OrderHistoryLoader(_ref){var wrapper=_ref.wrapper,iterator=_ref.iterator;var _useOrderHistory=useOrderHistory(),orders=_useOrderHistory.orders,totalOrderCount=_useOrderHistory.totalOrderCount,fetchOrderHistory=_useOrderHistory.fetchOrderHistory;return React.createElement(ViewContext.Consumer,null,function(_ref2){var getContentRef=_ref2.getContentRef;return React.createElement(InfiniteContainer,{containerRef:getContentRef(),wrapper:wrapper,iterator:iterator,loader:function loader(offset){return fetchOrderHistory({limit:ITEMS_PER_LOAD,offset:offset});},items:orders,loadingIndicator:React.createElement(LoadingIndicator,null),totalItems:totalOrderCount,initialLimit:ITEMS_PER_LOAD,limit:ITEMS_PER_LOAD});});};export default OrderHistoryLoader;
+ */
+const OrderHistoryLoader = ({
+  wrapper,
+  iterator
+}) => {
+  const {
+    orders,
+    totalOrderCount,
+    fetchOrderHistory
+  } = useOrderHistory();
+  return /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
+    getContentRef
+  }) => /*#__PURE__*/React.createElement(InfiniteContainer, {
+    containerRef: getContentRef(),
+    wrapper: wrapper,
+    iterator: iterator,
+    loader: offset => fetchOrderHistory({
+      limit: ITEMS_PER_LOAD,
+      offset
+    }),
+    items: orders,
+    loadingIndicator: /*#__PURE__*/React.createElement(LoadingIndicator, null),
+    totalItems: totalOrderCount,
+    initialLimit: ITEMS_PER_LOAD,
+    limit: ITEMS_PER_LOAD
+  }));
+};
+export default OrderHistoryLoader;

package/orders/components/OrderHistory/OrderHistoryTable.js

@@ -1,9 +1,54 @@
-import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import{i18n}from'@shopgate/engage/core';import{getTranslatedOrderStatus}from"../../helpers";import{tableHeader,tableRow}from"./OrderHistoryTable.style";import{Card}from"../../../components";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import { i18n } from '@shopgate/engage/core';
+import { getTranslatedOrderStatus } from "../../helpers";
+import { tableHeader, tableRow } from "./OrderHistoryTable.style";
+import { Card } from "../../../components";
+
+/**
  * The Order History Table Row component
  * @param {Object} props props
  * @returns {JSX}
- */export var TableRow=function TableRow(props){return React.createElement("tr",{key:props.orderNumber,className:tableRow,onClick:props.openDetails},React.createElement("td",null,React.createElement(I18n.Date,{timestamp:new Date(props.submitDate).getTime(),format:"short"}),"\xA0",React.createElement(I18n.Time,{timestamp:new Date(props.submitDate).getTime(),format:"short"})),React.createElement("td",null,props.orderNumber),React.createElement("td",null,getTranslatedOrderStatus(props.status)),React.createElement("td",{align:"right"},React.createElement(I18n.Number,{number:props.lineItemCount,fractions:0})),React.createElement("td",{align:"right"},React.createElement(I18n.Price,{currency:props.currencyCode,price:props.total})));};/**
+ */
+export const TableRow = props => /*#__PURE__*/React.createElement("tr", {
+  key: props.orderNumber,
+  className: tableRow,
+  onClick: props.openDetails
+}, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(I18n.Date, {
+  timestamp: new Date(props.submitDate).getTime(),
+  format: "short"
+}), "\xA0", /*#__PURE__*/React.createElement(I18n.Time, {
+  timestamp: new Date(props.submitDate).getTime(),
+  format: "short"
+})), /*#__PURE__*/React.createElement("td", null, props.orderNumber), /*#__PURE__*/React.createElement("td", null, getTranslatedOrderStatus(props.status)), /*#__PURE__*/React.createElement("td", {
+  align: "right"
+}, /*#__PURE__*/React.createElement(I18n.Number, {
+  number: props.lineItemCount,
+  fractions: 0
+})), /*#__PURE__*/React.createElement("td", {
+  align: "right"
+}, /*#__PURE__*/React.createElement(I18n.Price, {
+  currency: props.currencyCode,
+  price: props.total
+})));
+/**
  * The Order History Table component
  * @param {Object} props props
  * @returns {JSX}
- */export var Table=function Table(_ref){var children=_ref.children;return React.createElement(Card,null,React.createElement("table",null,React.createElement("thead",null,React.createElement("tr",{className:tableHeader},React.createElement("th",{align:"left"},i18n.text('orders.header.date')),React.createElement("th",{align:"left"},i18n.text('orders.header.orderNumber')),React.createElement("th",{align:"left"},i18n.text('orders.header.status')),React.createElement("th",{align:"right"},i18n.text('orders.header.lineItemCount')),React.createElement("th",{align:"right"},i18n.text('orders.header.total')))),React.createElement("tbody",null,children)));};
+ */
+export const Table = ({
+  children
+}) => /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+  className: tableHeader
+}, /*#__PURE__*/React.createElement("th", {
+  align: "left"
+}, i18n.text('orders.header.date')), /*#__PURE__*/React.createElement("th", {
+  align: "left"
+}, i18n.text('orders.header.orderNumber')), /*#__PURE__*/React.createElement("th", {
+  align: "left"
+}, i18n.text('orders.header.status')), /*#__PURE__*/React.createElement("th", {
+  align: "right"
+}, i18n.text('orders.header.lineItemCount')), /*#__PURE__*/React.createElement("th", {
+  align: "right"
+}, i18n.text('orders.header.total')))), /*#__PURE__*/React.createElement("tbody", null, children)));