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

package/cart/components/CartItems/CartItemsHeaderWide.style.js

@@ -1 +1,60 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var header=css({display:'flex',flexDirection:'row',justifyContent:'space-between',fontWeight:500,fontSize:'1rem',lineHeight:'1.5rem',padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.small,"px ").concat(variables.gap.big,"px")});export var column=css({display:'flex',alignItems:'center',flexDirection:'column',flexShrink:0,flexGrow:1,flexBasis:0,padding:"0 ".concat(variables.gap.small,"px"),textAlign:'center',':last-child':{paddingRight:variables.gap.small}});export var priceColumnWide=css({flexGrow:4,alignItems:'flex-end'}).toString();export var imageColumn=css({flexGrow:0,width:120,margin:"0 ".concat(variables.gap.small,"px 0 ").concat(variables.gap.big,"px"),paddingLeft:0});export var detailsColumn=css(column,{flexShrink:1,flexGrow:3,alignItems:'flex-start',padding:"0 ".concat(variables.gap.small,"px")});export var locationColumn=css(column,{flexGrow:2});export var quantityPickerColumn=css(column,{' > *':{width:140,textAlign:'center'}});export var quantityPickerColumnNotEditable=css(column,{' > *':{textAlign:'center'}});export var contextMenuColumn=css({width:variables.gap.xbig+variables.gap.small});
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const header = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  fontWeight: 500,
+  fontSize: '1rem',
+  lineHeight: '1.5rem',
+  padding: `0 ${variables.gap.big}px ${variables.gap.small}px ${variables.gap.big}px`
+}).toString();
+export const column = css({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  flexShrink: 0,
+  flexGrow: 1,
+  flexBasis: 0,
+  padding: `0 ${variables.gap.small}px`,
+  textAlign: 'center',
+  ':last-child': {
+    paddingRight: variables.gap.small
+  }
+});
+export const priceColumnWide = css({
+  flexGrow: 4,
+  alignItems: 'flex-end'
+}).toString();
+export const imageColumn = css({
+  flexGrow: 0,
+  width: 120,
+  margin: `0 ${variables.gap.small}px 0 ${variables.gap.big}px`,
+  paddingLeft: 0
+}).toString();
+export const detailsColumn = css(column, {
+  flexShrink: 1,
+  flexGrow: 3,
+  alignItems: 'flex-start',
+  padding: `0 ${variables.gap.small}px`
+}).toString();
+export const locationColumn = css(column, {
+  flexGrow: 2
+}).toString();
+export const quantityPickerColumn = css(column, {
+  ' > *': {
+    width: 140,
+    textAlign: 'center'
+  }
+}).toString();
+export const quantityPickerColumnNotEditable = css(column, {
+  ' > *': {
+    textAlign: 'center'
+  }
+});
+export const contextMenuColumn = css({
+  width: variables.gap.xbig + variables.gap.small
+}).toString();

package/cart/components/CartItems/CartItemsSubscription.connector.js

@@ -1,5 +1,12 @@
-import{connect}from'react-redux';import updateProductsInCart from'@shopgate/pwa-common-commerce/cart/actions/updateProductsInCart';/**
+import { connect } from 'react-redux';
+import updateProductsInCart from '@shopgate/pwa-common-commerce/cart/actions/updateProductsInCart';
+
+/**
  * Connects the dispatch function to a callable function in the props.
  * @param {Function} dispatch The redux dispatch function.
  * @return {Object} The extended component props.
- */var mapDispatchToProps={updateProductsInCart:updateProductsInCart};export default connect(null,mapDispatchToProps);
+ */
+const mapDispatchToProps = {
+  updateProductsInCart
+};
+export default connect(null, mapDispatchToProps);

package/cart/components/CartItems/CartItemsSubstitution.js

@@ -1,5 +1,46 @@
-import React,{useMemo,useCallback}from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import{CardList}from'@shopgate/engage/components';import Substitution,{SubstitutionWrapper}from"../Substitution";import connect from"./CartItemsSubscription.connector";/**
+import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core';
+import { CardList } from '@shopgate/engage/components';
+import Substitution, { SubstitutionWrapper } from "../Substitution";
+import connect from "./CartItemsSubscription.connector";
+
+/**
  * Renders the cart reservation card label.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var CartItemsSubstitution=function CartItemsSubstitution(_ref){var cartItems=_ref.cartItems,updateProductsInCart=_ref.updateProductsInCart,className=_ref.className,wrapCard=_ref.wrapCard;var allAllowed=useMemo(function(){return cartItems.every(function(item){return item.substitutionAllowed;});},[cartItems]);var handleChange=useCallback(function(){return updateProductsInCart(cartItems.map(function(item){return{cartItemId:item.id,substitutionAllowed:!allAllowed};}));},[allAllowed,cartItems,updateProductsInCart]);if(wrapCard){return React.createElement(SubstitutionWrapper,null,React.createElement(CardList.Item,{className:className},React.createElement(Substitution,{id:"substitution-all",label:i18n.text('cart.allow_substitution_all'),checked:allAllowed,onChange:handleChange})));}return React.createElement(SubstitutionWrapper,null,React.createElement(Substitution,{className:className,id:"substitution-all",label:i18n.text('cart.allow_substitution_all'),checked:allAllowed,onChange:handleChange}));};CartItemsSubstitution.defaultProps={className:undefined,wrapCard:false};export default connect(CartItemsSubstitution);
+ */
+const CartItemsSubstitution = ({
+  cartItems,
+  updateProductsInCart,
+  className,
+  wrapCard
+}) => {
+  const allAllowed = useMemo(() => cartItems.every(item => item.substitutionAllowed), [cartItems]);
+  const handleChange = useCallback(() => updateProductsInCart(cartItems.map(item => ({
+    cartItemId: item.id,
+    substitutionAllowed: !allAllowed
+  }))), [allAllowed, cartItems, updateProductsInCart]);
+  if (wrapCard) {
+    return /*#__PURE__*/React.createElement(SubstitutionWrapper, null, /*#__PURE__*/React.createElement(CardList.Item, {
+      className: className
+    }, /*#__PURE__*/React.createElement(Substitution, {
+      id: "substitution-all",
+      label: i18n.text('cart.allow_substitution_all'),
+      checked: allAllowed,
+      onChange: handleChange
+    })));
+  }
+  return /*#__PURE__*/React.createElement(SubstitutionWrapper, null, /*#__PURE__*/React.createElement(Substitution, {
+    className: className,
+    id: "substitution-all",
+    label: i18n.text('cart.allow_substitution_all'),
+    checked: allAllowed,
+    onChange: handleChange
+  }));
+};
+CartItemsSubstitution.defaultProps = {
+  className: undefined,
+  wrapCard: false
+};
+export default connect(CartItemsSubstitution);

package/cart/components/CartItems/index.js

@@ -1 +1,2 @@
-export{default as CartItemGroup}from"./CartItemGroup";export{default as CartItems}from"./CartItems";
+export { default as CartItemGroup } from "./CartItemGroup";
+export { default as CartItems } from "./CartItems";

package/cart/components/CartSummaryWide/CartSummaryWide.connector.js

@@ -1,4 +1,15 @@
-import{connect}from'react-redux';import{getDiscounts,getShippingCost,getSubTotal,getGrandTotal,getTax}from'@shopgate/pwa-common-commerce/cart/selectors';/**
+import { connect } from 'react-redux';
+import { getDiscounts, getShippingCost, getSubTotal, getGrandTotal, getTax } from '@shopgate/pwa-common-commerce/cart/selectors';
+
+/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){return function(state,props){return{discounts:getDiscounts(state,props),shippingCosts:getShippingCost(state,props),subTotal:getSubTotal(state,props),grandTotal:getGrandTotal(state,props),tax:getTax(state,props)};};};export default connect(makeMapStateToProps);
+ */
+const makeMapStateToProps = () => (state, props) => ({
+  discounts: getDiscounts(state, props),
+  shippingCosts: getShippingCost(state, props),
+  subTotal: getSubTotal(state, props),
+  grandTotal: getGrandTotal(state, props),
+  tax: getTax(state, props)
+});
+export default connect(makeMapStateToProps);

package/cart/components/CartSummaryWide/CartSummaryWide.js

@@ -1,4 +1,48 @@
-import React from'react';import{i18n}from'@shopgate/engage/core';import{container,headline,summary,total,grandTotal}from"./CartSummaryWide.style";import PaymentBarSubTotal from"../PaymentBar/PaymentBarSubTotal";import PaymentBarGrandTotal from"../PaymentBar/PaymentBarGrandTotal";import PaymentBarShippingCost from"../PaymentBar/PaymentBarShippingCost";import PaymentBarDiscounts from"../PaymentBar/PaymentBarDiscounts";import PaymentBarTax from"../PaymentBar/PaymentBarTax";import PaymentBarAppliedPromotions from"../PaymentBar/PaymentBarAppliedPromotions";import PaymentBarPromotionCoupons from"../PaymentBar/PaymentBarPromotionCoupons";import CartSummaryWideCheckoutButton from"./CartSummaryWideCheckoutButton";import CartSummaryWideFooter from"./CartSummaryWideFooter";/**
+import React from 'react';
+import { i18n } from '@shopgate/engage/core';
+import { container, headline, summary, total, grandTotal } from "./CartSummaryWide.style";
+import PaymentBarSubTotal from "../PaymentBar/PaymentBarSubTotal";
+import PaymentBarGrandTotal from "../PaymentBar/PaymentBarGrandTotal";
+import PaymentBarShippingCost from "../PaymentBar/PaymentBarShippingCost";
+import PaymentBarDiscounts from "../PaymentBar/PaymentBarDiscounts";
+import PaymentBarTax from "../PaymentBar/PaymentBarTax";
+import PaymentBarAppliedPromotions from "../PaymentBar/PaymentBarAppliedPromotions";
+import PaymentBarPromotionCoupons from "../PaymentBar/PaymentBarPromotionCoupons";
+import CartSummaryWideCheckoutButton from "./CartSummaryWideCheckoutButton";
+import CartSummaryWideFooter from "./CartSummaryWideFooter";
+
+/**
  * @param {Object} The component props
  * @returns {JSX}
- */var CartSummaryWide=function CartSummaryWide(){return React.createElement("div",{className:container},React.createElement("h2",{className:headline},i18n.text('checkout.summary.headline')),React.createElement("div",{className:summary},React.createElement(PaymentBarSubTotal,{showSeparator:false,label:"cart.subtotal",className:total}),React.createElement(PaymentBarAppliedPromotions,{showSeparator:false,className:total}),React.createElement(PaymentBarPromotionCoupons,{showSeparator:false,className:total}),React.createElement(PaymentBarDiscounts,{showSeparator:false,className:total}),React.createElement(PaymentBarShippingCost,{showSeparator:false,className:total}),React.createElement(PaymentBarTax,{showSeparator:false,className:total}),React.createElement(PaymentBarGrandTotal,{showSeparator:false,label:"cart.grand_total",className:grandTotal})),React.createElement(CartSummaryWideCheckoutButton,null),React.createElement(CartSummaryWideFooter,null));};export default CartSummaryWide;
+ */
+const CartSummaryWide = () => /*#__PURE__*/React.createElement("div", {
+  className: container
+}, /*#__PURE__*/React.createElement("h2", {
+  className: headline
+}, i18n.text('checkout.summary.headline')), /*#__PURE__*/React.createElement("div", {
+  className: summary
+}, /*#__PURE__*/React.createElement(PaymentBarSubTotal, {
+  showSeparator: false,
+  label: "cart.subtotal",
+  className: total
+}), /*#__PURE__*/React.createElement(PaymentBarAppliedPromotions, {
+  showSeparator: false,
+  className: total
+}), /*#__PURE__*/React.createElement(PaymentBarPromotionCoupons, {
+  showSeparator: false,
+  className: total
+}), /*#__PURE__*/React.createElement(PaymentBarDiscounts, {
+  showSeparator: false,
+  className: total
+}), /*#__PURE__*/React.createElement(PaymentBarShippingCost, {
+  showSeparator: false,
+  className: total
+}), /*#__PURE__*/React.createElement(PaymentBarTax, {
+  showSeparator: false,
+  className: total
+}), /*#__PURE__*/React.createElement(PaymentBarGrandTotal, {
+  showSeparator: false,
+  label: "cart.grand_total",
+  className: grandTotal
+})), /*#__PURE__*/React.createElement(CartSummaryWideCheckoutButton, null), /*#__PURE__*/React.createElement(CartSummaryWideFooter, null));
+export default CartSummaryWide;

package/cart/components/CartSummaryWide/CartSummaryWide.style.js

@@ -1 +1,37 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables,colors=themeConfig.colors;export var container=css({display:'flex',flexDirection:'column',alignSelf:'flex-end',padding:variables.gap.big,width:420});export var headline=css({fontSize:'1.25rem',fontWeight:500,lineHeight:'1.5rem'});export var summary=css({background:'var(--color-background-accent)',padding:variables.gap.big});export var total=css({fontSize:'1rem',padding:"".concat(variables.gap.small,"px 0"),color:'var(--color-text-high-emphasis)'}).toString();export var grandTotal=css({fontSize:'1.25rem !important',fontWeight:500,borderTop:"1px solid ".concat(colors.shade4),padding:"".concat(variables.gap.small,"px 0"),color:'var(--color-text-high-emphasis)','&:last-child':{paddingBottom:0}}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables,
+  colors
+} = themeConfig;
+export const container = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignSelf: 'flex-end',
+  padding: variables.gap.big,
+  width: 420
+});
+export const headline = css({
+  fontSize: '1.25rem',
+  fontWeight: 500,
+  lineHeight: '1.5rem'
+});
+export const summary = css({
+  background: 'var(--color-background-accent)',
+  padding: variables.gap.big
+});
+export const total = css({
+  fontSize: '1rem',
+  padding: `${variables.gap.small}px 0`,
+  color: 'var(--color-text-high-emphasis)'
+}).toString();
+export const grandTotal = css({
+  fontSize: '1.25rem !important',
+  fontWeight: 500,
+  borderTop: `1px solid ${colors.shade4}`,
+  padding: `${variables.gap.small}px 0`,
+  color: 'var(--color-text-high-emphasis)',
+  '&:last-child': {
+    paddingBottom: 0
+  }
+}).toString();

package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.connector.js

@@ -1,5 +1,12 @@
-import{connect}from'react-redux';import{getOrderableStatus}from'@shopgate/pwa-common-commerce/cart/selectors';/**
+import { connect } from 'react-redux';
+import { getOrderableStatus } from '@shopgate/pwa-common-commerce/cart/selectors';
+
+/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state){return{isOrderable:getOrderableStatus(state)};};export default connect(mapStateToProps);
+ */
+const mapStateToProps = state => ({
+  isOrderable: getOrderableStatus(state)
+});
+export default connect(mapStateToProps);

package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.js

@@ -1,4 +1,48 @@
-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,{useContext,useMemo}from'react';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import Link from'@shopgate/pwa-common/components/Link';import{SurroundPortals}from'@shopgate/engage/components';import{CART_CHECKOUT_BUTTON}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{CHECKOUT_PATH}from'@shopgate/pwa-common/constants/RoutePaths';import{CartContext}from"../../cart.context";import{container,button,disabledButton}from"./CartSummaryWideCheckoutButton.style";import connect from"./CartSummaryWideCheckoutButton.connector";/**
+import React, { useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import { SurroundPortals, I18n, Link } from '@shopgate/engage/components';
+import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
+import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
+import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
+import PropTypes from 'prop-types';
+import { CartContext } from "../../cart.context";
+import { container, button, disabledButton } from "./CartSummaryWideCheckoutButton.style";
+import connect from "./CartSummaryWideCheckoutButton.connector";
+
+/**
  * @param {Object} props The component props
- * @returns {JSX}
- */var CartSummaryWideCheckoutButton=function CartSummaryWideCheckoutButton(_ref){var isOrderable=_ref.isOrderable;var _useContext=useContext(CartContext),isLoading=_useContext.isLoading;var isActive=useMemo(function(){return isOrderable&&!isLoading;},[isLoading,isOrderable]);var classes=classNames(button,_defineProperty({},disabledButton,!isActive));return React.createElement("div",{className:container},React.createElement(SurroundPortals,{portalName:CART_CHECKOUT_BUTTON,portalProps:{isActive:isActive}},React.createElement(Link,{href:CHECKOUT_PATH,disabled:!isActive},React.createElement(RippleButton,{disabled:!isActive,type:"regular",className:classes},React.createElement(I18n.Text,{string:"cart.checkout"})))));};CartSummaryWideCheckoutButton.defaultProps={isOrderable:true};export default connect(CartSummaryWideCheckoutButton);
+ * @param {boolean} props.isOrderable Indicates whether the cart is orderable.
+ * @returns {JSX.Element}
+ */
+const CartSummaryWideCheckoutButton = ({
+  isOrderable
+}) => {
+  const {
+    isLoading
+  } = useContext(CartContext);
+  const isActive = useMemo(() => isOrderable && !isLoading, [isLoading, isOrderable]);
+  const classes = classNames(button, {
+    [disabledButton]: !isActive
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: container
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_CHECKOUT_BUTTON,
+    portalProps: {
+      isActive
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: CHECKOUT_PATH,
+    disabled: !isActive
+  }, /*#__PURE__*/React.createElement(RippleButton, {
+    disabled: !isActive,
+    type: "regular",
+    className: classes
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.checkout"
+  })))));
+};
+CartSummaryWideCheckoutButton.defaultProps = {
+  isOrderable: true
+};
+export default connect(CartSummaryWideCheckoutButton);

package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.style.js

@@ -1 +1,21 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;export var container=css({display:'flex',flexDirection:'column'});export var button=css({width:'100%',background:"var(--color-button-cta, ".concat(colors.cta,")"),color:"var(--color-button-cta-contrast, ".concat(colors.ctaContrast,")!important"),borderRadius:4,margin:"".concat(variables.gap.big,"px 0")}).toString();export var disabledButton=css({background:colors.shade7,color:"".concat(colors.shade4,"!important")}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors,
+  variables
+} = themeConfig;
+export const container = css({
+  display: 'flex',
+  flexDirection: 'column'
+}).toString();
+export const button = css({
+  width: '100%',
+  background: `var(--color-button-cta, ${colors.cta})`,
+  color: `var(--color-button-cta-contrast, ${colors.ctaContrast})!important`,
+  borderRadius: 4,
+  margin: `${variables.gap.big}px 0`
+}).toString();
+export const disabledButton = css({
+  background: colors.shade7,
+  color: `${colors.shade4}!important`
+}).toString();

package/cart/components/CartSummaryWide/CartSummaryWideFooter.js

@@ -1,3 +1,19 @@
-import React,{useContext}from'react';import{CartContext}from"../../cart.context";import{FLAG_MULTI_LINE_RESERVE}from"../../cart.constants";import{SupplementalContent}from"../SupplementalContent";/**
+import "core-js/modules/es.regexp.flags.js";
+import React, { useContext } from 'react';
+import { CartContext } from "../../cart.context";
+import { FLAG_MULTI_LINE_RESERVE } from "../../cart.constants";
+import { SupplementalContent } from "../SupplementalContent";
+
+/**
  * @returns {JSX}
- */var CartSummaryWideFooter=function CartSummaryWideFooter(){var _useContext=useContext(CartContext),flags=_useContext.flags;if(!flags[FLAG_MULTI_LINE_RESERVE]){return null;}return React.createElement(SupplementalContent,null);};export default CartSummaryWideFooter;
+ */
+const CartSummaryWideFooter = () => {
+  const {
+    flags
+  } = useContext(CartContext);
+  if (!flags[FLAG_MULTI_LINE_RESERVE]) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SupplementalContent, null);
+};
+export default CartSummaryWideFooter;

package/cart/components/CartSummaryWide/index.js

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

package/cart/components/PaymentBar/PaymentBar.js

@@ -1,5 +1,27 @@
-import*as React from'react';import PropTypes from'prop-types';import{createPortal}from'react-dom';import PaymentBarContent from"./PaymentBarContent";/**
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+import PaymentBarContent from "./PaymentBarContent";
+
+/**
  * The cart payment bar component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */function PaymentBar(_ref){var visible=_ref.visible,showSeparator=_ref.showSeparator;var domElement=document.getElementById('AppFooter');if(!visible||!domElement){return null;}return createPortal(React.createElement(PaymentBarContent,{showSeparator:showSeparator}),domElement);}PaymentBar.defaultProps={visible:true,showSeparator:false};export default PaymentBar;
+ */
+function PaymentBar({
+  visible,
+  showSeparator
+}) {
+  const domElement = document.getElementById('AppFooter');
+  if (!visible || !domElement) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(PaymentBarContent, {
+    showSeparator: showSeparator
+  }), domElement);
+}
+PaymentBar.defaultProps = {
+  visible: true,
+  showSeparator: false
+};
+export default PaymentBar;

package/cart/components/PaymentBar/PaymentBarAppliedPromotions.connector.js

@@ -1,5 +1,12 @@
-import{connect}from'react-redux';import{getAppliedPromotionsWithoutCoupons}from"../../cart.selectors";/**
+import { connect } from 'react-redux';
+import { getAppliedPromotionsWithoutCoupons } from "../../cart.selectors";
+
+/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state){return{promotions:getAppliedPromotionsWithoutCoupons(state)};};export default connect(mapStateToProps);
+ */
+const mapStateToProps = state => ({
+  promotions: getAppliedPromotionsWithoutCoupons(state)
+});
+export default connect(mapStateToProps);

package/cart/components/PaymentBar/PaymentBarAppliedPromotions.js

@@ -1,3 +1,57 @@
-import React,{useContext}from'react';import PropTypes from'prop-types';import CartTotalLine from'@shopgate/pwa-ui-shared/CartTotalLine';import{i18n}from'@shopgate/engage/core';import{CartContext}from"../../cart.context";import PaymentBarPromotionalText from"./PaymentBarPromotionalText";import{spacer}from"./PaymentBarContent.style";import connect from"./PaymentBarAppliedPromotions.connector";/**
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import CartTotalLine from '@shopgate/pwa-ui-shared/CartTotalLine';
+import { i18n } from '@shopgate/engage/core';
+import { CartContext } from "../../cart.context";
+import PaymentBarPromotionalText from "./PaymentBarPromotionalText";
+import { spacer } from "./PaymentBarContent.style";
+import connect from "./PaymentBarAppliedPromotions.connector";
+
+/**
  * @returns {JSX}
- */var PaymentBarAppliedPromotions=function PaymentBarAppliedPromotions(_ref){var promotions=_ref.promotions,className=_ref.className,showSeparator=_ref.showSeparator;var _useContext=useContext(CartContext),isLoading=_useContext.isLoading,currency=_useContext.currency,hasPromotionCoupons=_useContext.hasPromotionCoupons;return promotions.map(function(promotion){var discount=promotion.discount,code=promotion.code,name=promotion.name,promotionalText=promotion.promotionalText;var amount=discount.absoluteAmount;return React.createElement(CartTotalLine,{key:"promotion-".concat(code,"-").concat(amount),isDisabled:isLoading,className:className},React.createElement(CartTotalLine.Label,{label:i18n.text('cart.promotion_label',{label:name}),showSeparator:showSeparator,suffix:React.createElement(PaymentBarPromotionalText,{text:promotionalText})}),React.createElement(CartTotalLine.Amount,{amount:amount,currency:currency}),hasPromotionCoupons&&React.createElement(CartTotalLine.Spacer,{className:spacer}));});};PaymentBarAppliedPromotions.defaultProps={className:null,showSeparator:true};export default connect(PaymentBarAppliedPromotions);
+ */
+const PaymentBarAppliedPromotions = ({
+  promotions,
+  className,
+  showSeparator
+}) => {
+  const {
+    isLoading,
+    currency,
+    hasPromotionCoupons
+  } = useContext(CartContext);
+  return promotions.map(promotion => {
+    const {
+      discount,
+      code,
+      name,
+      promotionalText
+    } = promotion;
+    const {
+      absoluteAmount: amount
+    } = discount;
+    return /*#__PURE__*/React.createElement(CartTotalLine, {
+      key: `promotion-${code}-${amount}`,
+      isDisabled: isLoading,
+      className: className
+    }, /*#__PURE__*/React.createElement(CartTotalLine.Label, {
+      label: i18n.text('cart.promotion_label', {
+        label: name
+      }),
+      showSeparator: showSeparator,
+      suffix: /*#__PURE__*/React.createElement(PaymentBarPromotionalText, {
+        text: promotionalText
+      })
+    }), /*#__PURE__*/React.createElement(CartTotalLine.Amount, {
+      amount: amount,
+      currency: currency
+    }), hasPromotionCoupons && /*#__PURE__*/React.createElement(CartTotalLine.Spacer, {
+      className: spacer
+    }));
+  });
+};
+PaymentBarAppliedPromotions.defaultProps = {
+  className: null,
+  showSeparator: true
+};
+export default connect(PaymentBarAppliedPromotions);

package/cart/components/PaymentBar/PaymentBarCheckoutButton.connector.js

@@ -1,5 +1,12 @@
-import{connect}from'react-redux';import{getOrderableStatus}from'@shopgate/pwa-common-commerce/cart/selectors';/**
+import { connect } from 'react-redux';
+import { getOrderableStatus } from '@shopgate/pwa-common-commerce/cart/selectors';
+
+/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state){return{isOrderable:getOrderableStatus(state)};};export default connect(mapStateToProps);
+ */
+const mapStateToProps = state => ({
+  isOrderable: getOrderableStatus(state)
+});
+export default connect(mapStateToProps);

package/cart/components/PaymentBar/PaymentBarCheckoutButton.js

@@ -1,5 +1,45 @@
-import React,{useContext,useMemo}from'react';import I18n from'@shopgate/pwa-common/components/I18n';import Link from'@shopgate/pwa-common/components/Link';import{SurroundPortals}from'@shopgate/engage/components';import{CART_CHECKOUT_BUTTON}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{CHECKOUT_PATH}from'@shopgate/pwa-common/constants/RoutePaths';import PropTypes from'prop-types';import{CartContext}from"../../cart.context";import connect from"./PaymentBarCheckoutButton.connector";import{button,disabledButton}from"./PaymentBarCheckoutButton.style";/**
+import React, { useContext, useMemo } from 'react';
+import { I18n, Link, SurroundPortals } from '@shopgate/engage/components';
+import { CART_CHECKOUT_BUTTON } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
+import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
+import { CHECKOUT_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
+import PropTypes from 'prop-types';
+import { CartContext } from "../../cart.context";
+import connect from "./PaymentBarCheckoutButton.connector";
+import { button, disabledButton } from "./PaymentBarCheckoutButton.style";
+
+/**
  * Renders the cart payment bar checkout button.
  * @param {boolean} isOrderable Whether the cart is orderable.
  * @return {JSX.Element}
- */var PaymentBarCheckoutButton=function PaymentBarCheckoutButton(_ref){var isOrderable=_ref.isOrderable;var _useContext=useContext(CartContext),isLoading=_useContext.isLoading;var isActive=useMemo(function(){return isOrderable&&!isLoading;},[isLoading,isOrderable]);return React.createElement(SurroundPortals,{portalName:CART_CHECKOUT_BUTTON,portalProps:{isActive:isActive}},React.createElement(Link,{href:CHECKOUT_PATH,disabled:!isActive,tabIndex:0,role:"button","aria-disabled":!isActive},React.createElement(RippleButton,{disabled:!isActive,type:"regular",className:isActive?button:disabledButton},React.createElement(I18n.Text,{string:"cart.checkout"}))));};PaymentBarCheckoutButton.defaultProps={isOrderable:true};export default connect(PaymentBarCheckoutButton);
+ */
+const PaymentBarCheckoutButton = ({
+  isOrderable
+}) => {
+  const {
+    isLoading
+  } = useContext(CartContext);
+  const isActive = useMemo(() => isOrderable && !isLoading, [isLoading, isOrderable]);
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_CHECKOUT_BUTTON,
+    portalProps: {
+      isActive
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: CHECKOUT_PATH,
+    disabled: !isActive,
+    tabIndex: 0,
+    role: "button",
+    "aria-disabled": !isActive
+  }, /*#__PURE__*/React.createElement(RippleButton, {
+    disabled: !isActive,
+    type: "regular",
+    className: isActive ? button : disabledButton
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.checkout"
+  }))));
+};
+PaymentBarCheckoutButton.defaultProps = {
+  isOrderable: true
+};
+export default connect(PaymentBarCheckoutButton);

package/cart/components/PaymentBar/PaymentBarCheckoutButton.style.js

@@ -1 +1,15 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var button=css({width:'100%',background:"var(--color-button-cta, ".concat(colors.cta,")"),color:"var(--color-button-cta-contrast, ".concat(colors.ctaContrast,")!important")}).toString();export var disabledButton=css({width:'100%',background:colors.shade7,color:"".concat(colors.shade4,"!important")}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+export const button = css({
+  width: '100%',
+  background: `var(--color-button-cta, ${colors.cta})`,
+  color: `var(--color-button-cta-contrast, ${colors.ctaContrast})!important`
+}).toString();
+export const disabledButton = css({
+  width: '100%',
+  background: colors.shade7,
+  color: `${colors.shade4}!important`
+}).toString();

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -1,4 +1,55 @@
-import*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import Grid from'@shopgate/pwa-common/components/Grid';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR,CART_PAYMENT_BAR_TOTALS}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import PaymentBarShippingCost from"./PaymentBarShippingCost";import PaymentBarDiscounts from"./PaymentBarDiscounts";import PaymentBarTax from"./PaymentBarTax";import PaymentBarSubTotal from"./PaymentBarSubTotal";import PaymentBarGrandTotal from"./PaymentBarGrandTotal";import PaymentBarCheckoutButton from"./PaymentBarCheckoutButton";import PaymentBarPromotionCoupons from"./PaymentBarPromotionCoupons";import PaymentBarAppliedPromotions from"./PaymentBarAppliedPromotions";import{wrapper,container,checkoutButtonContainer,checkoutButton}from"./PaymentBarContent.style";/**
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Grid from '@shopgate/pwa-common/components/Grid';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { CART_PAYMENT_BAR, CART_PAYMENT_BAR_TOTALS } from '@shopgate/pwa-common-commerce/cart/constants/Portals';
+import PaymentBarShippingCost from "./PaymentBarShippingCost";
+import PaymentBarDiscounts from "./PaymentBarDiscounts";
+import PaymentBarTax from "./PaymentBarTax";
+import PaymentBarSubTotal from "./PaymentBarSubTotal";
+import PaymentBarGrandTotal from "./PaymentBarGrandTotal";
+import PaymentBarCheckoutButton from "./PaymentBarCheckoutButton";
+import PaymentBarPromotionCoupons from "./PaymentBarPromotionCoupons";
+import PaymentBarAppliedPromotions from "./PaymentBarAppliedPromotions";
+import { wrapper, container, checkoutButtonContainer, checkoutButton } from "./PaymentBarContent.style";
+
+/**
  * The PaymentBarContent component.
  * @returns {JSX}
- */function PaymentBarContent(_ref){var showSeparator=_ref.showSeparator;return React.createElement("div",{className:classNames(wrapper,'theme__cart__payment-bar')},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR},React.createElement(Grid,{className:container},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS},React.createElement(PaymentBarSubTotal,{showSeparator:showSeparator}),React.createElement(PaymentBarAppliedPromotions,{showSeparator:showSeparator}),React.createElement(PaymentBarPromotionCoupons,{showSeparator:showSeparator}),React.createElement(PaymentBarDiscounts,{showSeparator:showSeparator}),React.createElement(PaymentBarShippingCost,{showSeparator:showSeparator}),React.createElement(PaymentBarTax,{showSeparator:showSeparator}),React.createElement(PaymentBarGrandTotal,{showSeparator:showSeparator}))),React.createElement("div",{className:checkoutButtonContainer},React.createElement("div",{className:checkoutButton},React.createElement(PaymentBarCheckoutButton,null)))));}PaymentBarContent.defaultProps={showSeparator:true};export default PaymentBarContent;
+ */
+function PaymentBarContent({
+  showSeparator
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(wrapper, 'theme__cart__payment-bar')
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_PAYMENT_BAR
+  }, /*#__PURE__*/React.createElement(Grid, {
+    className: container
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_PAYMENT_BAR_TOTALS
+  }, /*#__PURE__*/React.createElement(PaymentBarSubTotal, {
+    showSeparator: showSeparator
+  }), /*#__PURE__*/React.createElement(PaymentBarAppliedPromotions, {
+    showSeparator: showSeparator
+  }), /*#__PURE__*/React.createElement(PaymentBarPromotionCoupons, {
+    showSeparator: showSeparator
+  }), /*#__PURE__*/React.createElement(PaymentBarDiscounts, {
+    showSeparator: showSeparator
+  }), /*#__PURE__*/React.createElement(PaymentBarShippingCost, {
+    showSeparator: showSeparator
+  }), /*#__PURE__*/React.createElement(PaymentBarTax, {
+    showSeparator: showSeparator
+  }), /*#__PURE__*/React.createElement(PaymentBarGrandTotal, {
+    showSeparator: showSeparator
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: checkoutButtonContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: checkoutButton
+  }, /*#__PURE__*/React.createElement(PaymentBarCheckoutButton, null)))));
+}
+PaymentBarContent.defaultProps = {
+  showSeparator: true
+};
+export default PaymentBarContent;