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

package/cart/components/CartItem/CartItemProductLayoutWide.style.js

@@ -1 +1,113 @@
-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{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({display:'flex',flexDirection:'row',justifyContent:'space-between',padding:variables.gap.big}).toString();export var imageColumn=css({width:120,height:120,marginRight:variables.gap.small,flexShrink:0,flexGrow:0});export var column=css({display:'flex',alignItems:'center',flexDirection:'column',flexShrink:1,flexGrow:1,flexBasis:0,padding:"0 ".concat(variables.gap.small,"px"),':last-child':{paddingRight:0}});export var detailsColumn=css(column,{flexShrink:1,flexGrow:3,alignItems:'flex-start'});export var priceColumnWide=css(column,{flexGrow:4,alignItems:'flex-end'});export var locationColumn=css(column,{fontSize:'1.25rem',lineHeight:'1.625rem',fontWeight:500,flexGrow:2});export var statusColumn=css(column,{fontSize:'1.25rem',lineHeight:'1.625rem'});export var productName=css({fontSize:'1.25rem',lineHeight:'1.5rem',fontWeight:500,wordBreak:['keep-all','break-word'],hyphens:'auto'}).toString();export var productProperties=css({paddingTop:variables.gap.small,color:'var(--color-text-low-emphasis)',fontSize:'1rem'}).toString();export var quantityPicker=css({width:140}).toString();export var quantityPickerDisabled=css({padding:"0 ".concat(variables.gap.small,"px"),textAlign:'center',fontSize:'1.25rem',lineHeight:'1.625rem',height:28,width:'100%',fontWeight:500,color:'var(--color-text-high-emphasis)',whiteSpace:'nowrap'}).toString();export var containerInactive=css(_defineProperty(_defineProperty({color:'var(--color-text-low-emphasis)'}," .".concat(quantityPickerDisabled),{color:'var(--color-text-low-emphasis)'})," .".concat(imageColumn),{opacity:0.7})).toString();export var price=css({fontSize:'1.25rem !important',lineHeight:'1.625rem  !important'}).toString();export var priceListEntry=css({flexDirection:'column-reverse !important'}).toString();export var priceListPromo=css({paddingRight:0,alignSelf:'flex-end'}).toString();export var priceInfo=css({wordBreak:'break-word',fontSize:'0.75rem',lineHeight:'0.875rem',color:'var(--color-text-low-emphasis)',padding:"".concat(variables.gap.xsmall,"px 0")}).toString();export var contextMenu=css({marginTop:"-".concat(variables.gap.xsmall*3,"px"),marginRight:"-".concat(variables.gap.big,"px")}).toString();export var messageContainer=css({marginTop:0}).toString();export var messageContainerRope=css({marginTop:0,marginBottom:0}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const container = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  padding: variables.gap.big
+}).toString();
+export const imageColumn = css({
+  width: 120,
+  height: 120,
+  marginRight: variables.gap.small,
+  flexShrink: 0,
+  flexGrow: 0
+});
+export const column = css({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  flexShrink: 1,
+  flexGrow: 1,
+  flexBasis: 0,
+  padding: `0 ${variables.gap.small}px`,
+  ':last-child': {
+    paddingRight: 0
+  }
+});
+export const detailsColumn = css(column, {
+  flexShrink: 1,
+  flexGrow: 3,
+  alignItems: 'flex-start'
+});
+export const priceColumnWide = css(column, {
+  flexGrow: 4,
+  alignItems: 'flex-end'
+});
+export const locationColumn = css(column, {
+  fontSize: '1.25rem',
+  lineHeight: '1.625rem',
+  fontWeight: 500,
+  flexGrow: 2
+});
+export const statusColumn = css(column, {
+  fontSize: '1.25rem',
+  lineHeight: '1.625rem'
+});
+export const productName = css({
+  fontSize: '1.25rem',
+  lineHeight: '1.5rem',
+  fontWeight: 500,
+  wordBreak: ['keep-all', 'break-word'],
+  hyphens: 'auto'
+}).toString();
+export const productProperties = css({
+  paddingTop: variables.gap.small,
+  color: 'var(--color-text-low-emphasis)',
+  fontSize: '1rem'
+}).toString();
+export const quantityPicker = css({
+  width: 140
+}).toString();
+export const quantityPickerDisabled = css({
+  padding: `0 ${variables.gap.small}px`,
+  textAlign: 'center',
+  fontSize: '1.25rem',
+  lineHeight: '1.625rem',
+  height: 28,
+  width: '100%',
+  fontWeight: 500,
+  color: 'var(--color-text-high-emphasis)',
+  whiteSpace: 'nowrap'
+}).toString();
+export const containerInactive = css({
+  color: 'var(--color-text-low-emphasis)',
+  [` .${quantityPickerDisabled}`]: {
+    color: 'var(--color-text-low-emphasis)'
+  },
+  [` .${imageColumn}`]: {
+    opacity: 0.7
+  }
+}).toString();
+export const price = css({
+  fontSize: '1.25rem !important',
+  lineHeight: '1.625rem  !important'
+}).toString();
+export const priceListEntry = css({
+  flexDirection: 'column-reverse !important'
+}).toString();
+export const priceListPromo = css({
+  paddingRight: 0,
+  alignSelf: 'flex-end'
+}).toString();
+export const priceInfo = css({
+  wordBreak: 'break-word',
+  fontSize: '0.75rem',
+  lineHeight: '0.875rem',
+  color: 'var(--color-text-low-emphasis)',
+  padding: `${variables.gap.xsmall}px 0`
+}).toString();
+export const contextMenu = css({
+  marginTop: `-${variables.gap.xsmall * 3}px`,
+  marginRight: `-${variables.gap.big}px`
+}).toString();
+export const messageContainer = css({
+  marginTop: 0
+}).toString();
+export const messageContainerRope = css({
+  marginTop: 0,
+  marginBottom: 0
+}).toString();

package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.js

@@ -1,4 +1,26 @@
-import React from'react';import{BOPIS,ROPIS}from'@shopgate/engage/locations';import{i18n}from'@shopgate/engage/core';import{label}from"./CartItemProductLayoutWideFulfillmentLabel.style";import{useCartItemProduct}from"./CartItem.hooks";/**
+import React from 'react';
+import { BOPIS, ROPIS } from '@shopgate/engage/locations';
+import { i18n } from '@shopgate/engage/core';
+import { label } from "./CartItemProductLayoutWideFulfillmentLabel.style";
+import { useCartItemProduct } from "./CartItem.hooks";
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var CartItemProductLayoutWideFulfillmentLabel=function CartItemProductLayoutWideFulfillmentLabel(){var _cartItem$fulfillment;var _useCartItemProduct=useCartItemProduct(),cartItem=_useCartItemProduct.cartItem;var fulfillmentMethod=(cartItem===null||cartItem===void 0?void 0:(_cartItem$fulfillment=cartItem.fulfillment)===null||_cartItem$fulfillment===void 0?void 0:_cartItem$fulfillment.method)||null;var suffix='direct_ship';if(fulfillmentMethod===BOPIS){suffix='bopis';}else if(fulfillmentMethod===ROPIS){suffix='ropis';}return React.createElement("div",{className:label},i18n.text("locations.method.".concat(suffix)));};export{CartItemProductLayoutWideFulfillmentLabel};
+ */
+const CartItemProductLayoutWideFulfillmentLabel = () => {
+  const {
+    cartItem
+  } = useCartItemProduct();
+  const fulfillmentMethod = cartItem?.fulfillment?.method || null;
+  let suffix = 'direct_ship';
+  if (fulfillmentMethod === BOPIS) {
+    suffix = 'bopis';
+  } else if (fulfillmentMethod === ROPIS) {
+    suffix = 'ropis';
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: label
+  }, i18n.text(`locations.method.${suffix}`));
+};
+export { CartItemProductLayoutWideFulfillmentLabel };

package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.style.js

@@ -1 +1,10 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var label=css({color:"var(--color-secondary, ".concat(colors.accent,")"),fontSize:'0.875rem',marginTop:'auto'});
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+export const label = css({
+  color: `var(--color-secondary, ${colors.accent})`,
+  fontSize: '0.875rem',
+  marginTop: 'auto'
+});

package/cart/components/CartItem/CartItemProductLayoutWideOrderDetails.js

@@ -1,3 +1,33 @@
-import React,{Fragment}from'react';import{QuantityLabel}from'@shopgate/engage/components';import{getTranslatedLineItemStatus}from'@shopgate/engage/orders';import{useCartItem,useCartItemProduct}from"./CartItem.hooks";import{column,locationColumn,statusColumn,quantityPickerDisabled}from"./CartItemProductLayoutWide.style";/**
+import React, { Fragment } from 'react';
+import { QuantityLabel } from '@shopgate/engage/components';
+import { getTranslatedLineItemStatus } from '@shopgate/engage/orders';
+import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
+import { column, locationColumn, statusColumn, quantityPickerDisabled } from "./CartItemProductLayoutWide.style";
+
+/**
  * @returns {JSX}
- */var CartItemProductLayoutWide=function CartItemProductLayoutWide(){var _useCartItem=useCartItem(),location=_useCartItem.location,cartItem=_useCartItem.cartItem,cartIsDirectShipOnly=_useCartItem.cartIsDirectShipOnly;var _useCartItemProduct=useCartItemProduct(),product=_useCartItemProduct.product;var hasUnitWithDecimals=product.unit&&product.hasCatchWeight||false;return React.createElement(Fragment,null,!cartIsDirectShipOnly?React.createElement("div",{className:locationColumn},location===null||location===void 0?void 0:location.name):null,React.createElement("div",{className:statusColumn},getTranslatedLineItemStatus(cartItem===null||cartItem===void 0?void 0:cartItem.status,cartItem===null||cartItem===void 0?void 0:cartItem.subStatus)),React.createElement("div",{className:column},React.createElement(QuantityLabel,{className:quantityPickerDisabled,value:cartItem.quantity,unit:hasUnitWithDecimals?product.unit:null,maxDecimals:hasUnitWithDecimals?2:0})));};export default CartItemProductLayoutWide;
+ */
+const CartItemProductLayoutWide = () => {
+  const {
+    location,
+    cartItem,
+    cartIsDirectShipOnly
+  } = useCartItem();
+  const {
+    product
+  } = useCartItemProduct();
+  const hasUnitWithDecimals = product.unit && product.hasCatchWeight || false;
+  return /*#__PURE__*/React.createElement(Fragment, null, !cartIsDirectShipOnly ? /*#__PURE__*/React.createElement("div", {
+    className: locationColumn
+  }, location?.name) : null, /*#__PURE__*/React.createElement("div", {
+    className: statusColumn
+  }, getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)), /*#__PURE__*/React.createElement("div", {
+    className: column
+  }, /*#__PURE__*/React.createElement(QuantityLabel, {
+    className: quantityPickerDisabled,
+    value: cartItem.quantity,
+    unit: hasUnitWithDecimals ? product.unit : null,
+    maxDecimals: hasUnitWithDecimals ? 2 : 0
+  })));
+};
+export default CartItemProductLayoutWide;

package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.js

@@ -1,4 +1,24 @@
-import React from'react';import{RippleButton,I18n}from'@shopgate/engage/components';import{button,ripple}from"./CartItemProductLayoutWideRemoveItem.style";import{useCartItemProduct}from"./CartItem.hooks";/**
+import React from 'react';
+import { RippleButton, I18n } from '@shopgate/engage/components';
+import { button, ripple } from "./CartItemProductLayoutWideRemoveItem.style";
+import { useCartItemProduct } from "./CartItem.hooks";
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var CartItemProductLayoutWideRemoveItem=function CartItemProductLayoutWideRemoveItem(){var _useCartItemProduct=useCartItemProduct(),handleRemove=_useCartItemProduct.handleRemove;return React.createElement(RippleButton,{onClick:handleRemove,className:button,rippleClassName:ripple,type:"secondary",flat:true},React.createElement(I18n.Text,{string:"cart.remove_item"}));};export{CartItemProductLayoutWideRemoveItem};
+ */
+const CartItemProductLayoutWideRemoveItem = () => {
+  const {
+    handleRemove
+  } = useCartItemProduct();
+  return /*#__PURE__*/React.createElement(RippleButton, {
+    onClick: handleRemove,
+    className: button,
+    rippleClassName: ripple,
+    type: "secondary",
+    flat: true
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.remove_item"
+  }));
+};
+export { CartItemProductLayoutWideRemoveItem };

package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.style.js

@@ -1 +1,16 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var button=css({fontSize:'0.875rem !important',letterSpacing:'0.05em',padding:"".concat(variables.gap.big,"px 0 !important"),' *':{padding:'0 !important'}}).toString();export var ripple=css({padding:0}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const button = css({
+  fontSize: '0.875rem !important',
+  letterSpacing: '0.05em',
+  padding: `${variables.gap.big}px 0 !important`,
+  ' *': {
+    padding: '0 !important'
+  }
+}).toString();
+export const ripple = css({
+  padding: 0
+}).toString();

package/cart/components/CartItem/CartItemProductOrderDetails.js

@@ -1,3 +1,69 @@
-import React,{useMemo}from'react';import classNames from'classnames';import{QuantityLabel,I18n,Price}from'@shopgate/engage/components';import{getTranslatedLineItemStatus}from'@shopgate/engage/orders';import{CartItemProductPriceCaption}from"./CartItemProductPriceCaption";import{createCartItemPrices}from"../../cart.helpers";import{useCartItem,useCartItemProduct}from"./CartItem.hooks";import{quantityLabel,label,container,labelValue,fulfillmentLabel}from"./CartItemProductOrderDetails.style";/**
- * @returns {JSX}
- */var CartItemProductOrderDetails=function CartItemProductOrderDetails(){var _useCartItem=useCartItem(),location=_useCartItem.location,cartItem=_useCartItem.cartItem,cartIsDirectShipOnly=_useCartItem.cartIsDirectShipOnly;var _useCartItemProduct=useCartItemProduct(),product=_useCartItemProduct.product,currency=_useCartItemProduct.currency;var hasUnitWithDecimals=product.unit&&product.hasCatchWeight||false;var unitPrice=useMemo(function(){var result=createCartItemPrices(cartItem).price;return result.slice(-1)[0].price;},[cartItem]);return React.createElement("ul",{className:container},!cartIsDirectShipOnly&&(location===null||location===void 0?void 0:location.name)?React.createElement("li",null,React.createElement(I18n.Text,{string:"cart.location",className:label}),React.createElement("span",{className:labelValue},location===null||location===void 0?void 0:location.name),React.createElement(CartItemProductPriceCaption,{className:fulfillmentLabel})):null,React.createElement("li",null,React.createElement(I18n.Text,{string:"cart.status",className:label}),React.createElement("span",{className:labelValue},getTranslatedLineItemStatus(cartItem===null||cartItem===void 0?void 0:cartItem.status,cartItem===null||cartItem===void 0?void 0:cartItem.subStatus))),React.createElement("li",null,React.createElement(I18n.Text,{string:"cart.fulfilled_quantity",className:label}),React.createElement(QuantityLabel,{className:classNames(quantityLabel,labelValue),value:cartItem.quantity,unit:hasUnitWithDecimals?product.unit:null,maxDecimals:hasUnitWithDecimals?2:0})),React.createElement("li",null,React.createElement(I18n.Text,{string:"cart.ordered_quantity",className:label}),React.createElement(QuantityLabel,{className:classNames(quantityLabel,labelValue),value:cartItem.orderedQuantity,unit:hasUnitWithDecimals?product.unit:null,maxDecimals:hasUnitWithDecimals?2:0})),React.createElement("li",null,React.createElement(I18n.Text,{string:"cart.price",className:label}),React.createElement(Price,{className:labelValue,currency:currency,taxDisclaimer:true,unitPrice:unitPrice,allowFree:true})));};export default CartItemProductOrderDetails;
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { QuantityLabel, I18n, Price } from '@shopgate/engage/components';
+import { getTranslatedLineItemStatus } from '@shopgate/engage/orders';
+import { CartItemProductPriceCaption } from "./CartItemProductPriceCaption";
+import { createCartItemPrices } from "../../cart.helpers";
+import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
+import { quantityLabel, label, container, labelValue, fulfillmentLabel } from "./CartItemProductOrderDetails.style";
+
+/**
+ * @returns {JSX.Element}
+ */
+const CartItemProductOrderDetails = () => {
+  const {
+    location,
+    cartItem,
+    cartIsDirectShipOnly
+  } = useCartItem();
+  const {
+    product,
+    currency
+  } = useCartItemProduct();
+  const hasUnitWithDecimals = product.unit && product.hasCatchWeight || false;
+  const unitPrice = useMemo(() => {
+    const result = createCartItemPrices(cartItem).price;
+    return result.slice(-1)[0].price;
+  }, [cartItem]);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: container
+  }, !cartIsDirectShipOnly && location?.name ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.location",
+    className: label
+  }), /*#__PURE__*/React.createElement("span", {
+    className: labelValue
+  }, location?.name), /*#__PURE__*/React.createElement(CartItemProductPriceCaption, {
+    className: fulfillmentLabel
+  })) : null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.status",
+    className: label
+  }), /*#__PURE__*/React.createElement("span", {
+    className: labelValue
+  }, getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.fulfilled_quantity",
+    className: label
+  }), /*#__PURE__*/React.createElement(QuantityLabel, {
+    className: classNames(quantityLabel, labelValue),
+    value: cartItem.quantity,
+    unit: hasUnitWithDecimals ? product.unit : null,
+    maxDecimals: hasUnitWithDecimals ? 2 : 0
+  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.ordered_quantity",
+    className: label
+  }), /*#__PURE__*/React.createElement(QuantityLabel, {
+    className: classNames(quantityLabel, labelValue),
+    value: cartItem.orderedQuantity,
+    unit: hasUnitWithDecimals ? product.unit : null,
+    maxDecimals: hasUnitWithDecimals ? 2 : 0
+  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.price",
+    className: label
+  }), /*#__PURE__*/React.createElement(Price, {
+    className: labelValue,
+    currency: currency,
+    taxDisclaimer: true,
+    unitPrice: unitPrice,
+    allowFree: true
+  })));
+};
+export default CartItemProductOrderDetails;

package/cart/components/CartItem/CartItemProductOrderDetails.style.js

@@ -1 +1,28 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({paddingTop:variables.gap.small}).toString();export var quantityLabel=css({textAlign:'center',whiteSpace:'nowrap'}).toString();export var label=css({':after':{content:': '}}).toString();export var labelValue=css({fontWeight:500,display:'inline',color:'var(--color-text-medium-emphasis)'}).toString();export var fulfillmentLabel=css({fontSize:'inherit',':before':{content:' '}}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const container = css({
+  paddingTop: variables.gap.small
+}).toString();
+export const quantityLabel = css({
+  textAlign: 'center',
+  whiteSpace: 'nowrap'
+}).toString();
+export const label = css({
+  ':after': {
+    content: ': '
+  }
+}).toString();
+export const labelValue = css({
+  fontWeight: 500,
+  display: 'inline',
+  color: 'var(--color-text-medium-emphasis)'
+}).toString();
+export const fulfillmentLabel = css({
+  fontSize: 'inherit',
+  ':before': {
+    content: ' '
+  }
+}).toString();

package/cart/components/CartItem/CartItemProductPriceCaption.js

@@ -1,4 +1,40 @@
-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,{useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{ROPIS}from//  BOPIS,
-'@shopgate/engage/locations';import{I18n}from'@shopgate/engage/components';import{useCartItemProduct}from"./CartItem.hooks";import{caption}from"./CartItemProductPriceCaption.style";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { ROPIS
+//  BOPIS,
+} from '@shopgate/engage/locations';
+import { I18n } from '@shopgate/engage/components';
+import { useCartItemProduct } from "./CartItem.hooks";
+import { caption } from "./CartItemProductPriceCaption.style";
+
+/**
  * @returns {JSX}
- */var CartItemProductPriceCaption=function CartItemProductPriceCaption(_ref){var className=_ref.className;var _useCartItemProduct=useCartItemProduct(),cartItem=_useCartItemProduct.cartItem;var label=useMemo(function(){var _cartItem$fulfillment;var labels=_defineProperty({},ROPIS,'cart.price_caption.reservation');var fulfillmentMethod=(cartItem===null||cartItem===void 0?void 0:(_cartItem$fulfillment=cartItem.fulfillment)===null||_cartItem$fulfillment===void 0?void 0:_cartItem$fulfillment.method)||null;return labels[fulfillmentMethod];},[cartItem]);if(!label){return null;}return React.createElement("span",{className:classNames(caption,className)},"(",React.createElement(I18n.Text,{string:label}),")");};CartItemProductPriceCaption.defaultProps={className:null};export{CartItemProductPriceCaption};
+ */
+const CartItemProductPriceCaption = ({
+  className
+}) => {
+  const {
+    cartItem
+  } = useCartItemProduct();
+  const label = useMemo(() => {
+    const labels = {
+      [ROPIS]: 'cart.price_caption.reservation'
+      //  [BOPIS]: 'cart.price_caption.pay_in_store',
+    };
+    const fulfillmentMethod = cartItem?.fulfillment?.method || null;
+    return labels[fulfillmentMethod];
+  }, [cartItem]);
+  if (!label) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames(caption, className)
+  }, "(", /*#__PURE__*/React.createElement(I18n.Text, {
+    string: label
+  }), ")");
+};
+CartItemProductPriceCaption.defaultProps = {
+  className: null
+};
+export { CartItemProductPriceCaption };

package/cart/components/CartItem/CartItemProductPriceCaption.style.js

@@ -1 +1,11 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var caption=css({fontSize:'0.75rem',lineHeight:'0.875rem',color:'var(--color-text-low-emphasis)',paddingTop:variables.gap.xsmall});
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const caption = css({
+  fontSize: '0.75rem',
+  lineHeight: '0.875rem',
+  color: 'var(--color-text-low-emphasis)',
+  paddingTop: variables.gap.xsmall
+});

package/cart/components/CartItem/CartItemProductPriceList.js

@@ -1,5 +1,90 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';import Price from'@shopgate/pwa-ui-shared/Price';import PriceStriked from'@shopgate/pwa-ui-shared/PriceStriked';import{useCartItemProduct,useCartItem}from"./CartItem.hooks";import{createCartItemPrices}from"../../cart.helpers";import CartItemProductPriceListPromotion from"./CartItemProductPriceListPromotion";var styles={price:css({fontSize:'1rem',fontWeight:500,marginLeft:'auto'}).toString(),priceStriked:css({fontSize:'.875rem',marginLeft:'auto'}).toString(),priceListEntry:css({display:'flex',flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}).toString()};/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { css } from 'glamor';
+import Price from '@shopgate/pwa-ui-shared/Price';
+import PriceStriked from '@shopgate/pwa-ui-shared/PriceStriked';
+import { useCartItemProduct, useCartItem } from "./CartItem.hooks";
+import { createCartItemPrices } from "../../cart.helpers";
+import CartItemProductPriceListPromotion from "./CartItemProductPriceListPromotion";
+const styles = {
+  price: css({
+    fontSize: '1rem',
+    fontWeight: 500,
+    marginLeft: 'auto'
+  }).toString(),
+  priceStriked: css({
+    fontSize: '.875rem',
+    marginLeft: 'auto'
+  }).toString(),
+  priceListEntry: css({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  }).toString()
+};
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var CartItemProductPriceList=function CartItemProductPriceList(_ref){var classes=_ref.classes,isSubtotal=_ref.isSubtotal,showLabels=_ref.showLabels;var _useCartItem=useCartItem(),isOrderDetails=_useCartItem.isOrderDetails,isCheckoutConfirmation=_useCartItem.isCheckoutConfirmation;var context=useCartItemProduct();var currency=context.currency,cartItem=context.cartItem;var prices=useMemo(function(){var _result;var result=createCartItemPrices(cartItem)[isSubtotal?'subtotal':'price'];// Not striked prices when the product is free or the cart is used to display an order
-if(((_result=result[result.length-1])===null||_result===void 0?void 0:_result.price)===0||isOrderDetails||isCheckoutConfirmation){return result.slice(-1);}return result;},[cartItem,isCheckoutConfirmation,isOrderDetails,isSubtotal]);return React.createElement("ul",null,prices.map(function(_ref2,index){var price=_ref2.price,isCoupon=_ref2.isCoupon,isPromo=_ref2.isPromo;var isLast=index===prices.length-1;return(/* eslint-disable react/no-array-index-key */React.createElement("li",{key:"total_".concat(index),className:classNames(styles.priceListEntry,classes===null||classes===void 0?void 0:classes.entry)},(showLabels||!isSubtotal)&&React.createElement(CartItemProductPriceListPromotion,{isCoupon:isCoupon,isPromo:isPromo,className:classes===null||classes===void 0?void 0:classes.promo}),!isLast?React.createElement(PriceStriked,{className:classNames(styles.priceStriked,classes===null||classes===void 0?void 0:classes.priceStriked),value:price,currency:currency}):React.createElement(Price,{className:classNames(styles.price,classes===null||classes===void 0?void 0:classes.price),unitPrice:price,currency:currency,discounted:prices.length>1||price===0,taxDisclaimer:true,allowFree:true}))/* eslint-enable react/no-array-index-key */);}));};CartItemProductPriceList.defaultProps={isSubtotal:false,showLabels:false,classes:{price:null,priceStriked:null}};export default CartItemProductPriceList;
+ */
+const CartItemProductPriceList = ({
+  classes,
+  isSubtotal,
+  showLabels
+}) => {
+  const {
+    isOrderDetails,
+    isCheckoutConfirmation
+  } = useCartItem();
+  const context = useCartItemProduct();
+  const {
+    currency,
+    cartItem
+  } = context;
+  const prices = useMemo(() => {
+    const result = createCartItemPrices(cartItem)[isSubtotal ? 'subtotal' : 'price'];
+    // Not striked prices when the product is free or the cart is used to display an order
+    if (result[result.length - 1]?.price === 0 || isOrderDetails || isCheckoutConfirmation) {
+      return result.slice(-1);
+    }
+    return result;
+  }, [cartItem, isCheckoutConfirmation, isOrderDetails, isSubtotal]);
+  return /*#__PURE__*/React.createElement("ul", null, prices.map(({
+    price,
+    isCoupon,
+    isPromo
+  }, index) => {
+    const isLast = index === prices.length - 1;
+    return /*#__PURE__*/ /* eslint-disable react/no-array-index-key */React.createElement("li", {
+      key: `total_${index}`,
+      className: classNames(styles.priceListEntry, classes?.entry)
+    }, (showLabels || !isSubtotal) && /*#__PURE__*/React.createElement(CartItemProductPriceListPromotion, {
+      isCoupon: isCoupon,
+      isPromo: isPromo,
+      className: classes?.promo
+    }), !isLast ? /*#__PURE__*/React.createElement(PriceStriked, {
+      className: classNames(styles.priceStriked, classes?.priceStriked),
+      value: price,
+      currency: currency
+    }) : /*#__PURE__*/React.createElement(Price, {
+      className: classNames(styles.price, classes?.price),
+      unitPrice: price,
+      currency: currency,
+      discounted: prices.length > 1 || price === 0,
+      taxDisclaimer: true,
+      allowFree: true
+    }))
+    /* eslint-enable react/no-array-index-key */;
+  }));
+};
+CartItemProductPriceList.defaultProps = {
+  isSubtotal: false,
+  showLabels: false,
+  classes: {
+    price: null,
+    priceStriked: null
+  }
+};
+export default CartItemProductPriceList;