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

package/cart/components/CartItem/CartItemProductPriceCaption.js

@@ -1,4 +1,42 @@
-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";/**
- * @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};
+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.Element}
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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__*/_jsxs("span", {
+    className: classNames(caption, className),
+    children: ["(", /*#__PURE__*/_jsx(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,96 @@
-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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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;
+ * @param {Object} [props.classes] CSS class names
+ * @param {boolean} [props.isSubtotal] Whether to show subtotal prices
+ * @param {boolean} [props.showLabels] Whether to show promotion labels
+ * @returns {JSX.Element}
+ */
+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__*/_jsx("ul", {
+    children: prices.map(({
+      price,
+      isCoupon,
+      isPromo
+    }, index) => {
+      const isLast = index === prices.length - 1;
+      return /*#__PURE__*/ /* eslint-disable react/no-array-index-key */_jsxs("li", {
+        className: classNames(styles.priceListEntry, classes?.entry),
+        children: [(showLabels || !isSubtotal) && /*#__PURE__*/_jsx(CartItemProductPriceListPromotion, {
+          isCoupon: isCoupon,
+          isPromo: isPromo,
+          className: classes?.promo
+        }), !isLast ? /*#__PURE__*/_jsx(PriceStriked, {
+          className: classNames(styles.priceStriked, classes?.priceStriked),
+          value: price,
+          currency: currency
+        }) : /*#__PURE__*/_jsx(Price, {
+          className: classNames(styles.price, classes?.price),
+          unitPrice: price,
+          currency: currency,
+          discounted: prices.length > 1 || price === 0,
+          taxDisclaimer: true,
+          allowFree: true
+        })]
+      }, `total_${index}`)
+      /* eslint-enable react/no-array-index-key */;
+    })
+  });
+};
+CartItemProductPriceList.defaultProps = {
+  isSubtotal: false,
+  showLabels: false,
+  classes: {
+    price: null,
+    priceStriked: null
+  }
+};
+export default CartItemProductPriceList;

package/cart/components/CartItem/CartItemProductPriceListPromotion.js

@@ -1,10 +1,183 @@
-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,useContext,useCallback}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{showModal}from'@shopgate/engage/core';import{deleteCouponsFromCart}from'@shopgate/engage/cart';import{I18n,CrossIcon,InfoIcon}from'@shopgate/engage/components';import{CartContext}from"../../cart.context";import{useCartItem}from"./CartItem.hooks";var variables=themeConfig.variables;var styles={container:css({flex:'0 1 auto',color:'var(--color-secondary)',paddingRight:8}).toString(),deleteIcon:css(_defineProperty({backgroundColor:'#898989',color:'#fff',borderRadius:32,padding:4,marginRight:variables.gap.small,cursor:'pointer',fontSize:'0.75rem',display:'inline-flex'},responsiveMediaQuery('<=xs',{appAlways:true}),{padding:3})).toString(),infoIconWrapper:css(_defineProperty({cursor:'pointer',color:'var(--color-primary)',fontSize:'1.5rem',display:'inline-flex',verticalAlign:'bottom',paddingBottom:1,marginLeft:variables.gap.small},responsiveMediaQuery('<=xs',{appAlways:true}),{fontSize:'1.375rem',paddingBottom:0})).toString(),icon:css({display:'inline'}).toString(),loading:css({opacity:0.5}).toString()};/**
+import React, { useMemo, useContext, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { showModal } from '@shopgate/engage/core';
+import { deleteCouponsFromCart } from '@shopgate/engage/cart';
+import { I18n, CrossIcon, InfoIcon } from '@shopgate/engage/components';
+import { CartContext } from "../../cart.context";
+import { useCartItem } from "./CartItem.hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  variables
+} = themeConfig;
+const styles = {
+  container: css({
+    flex: '0 1 auto',
+    color: 'var(--color-secondary)',
+    paddingRight: 8
+  }).toString(),
+  deleteIcon: css({
+    backgroundColor: '#898989',
+    color: '#fff',
+    borderRadius: 32,
+    padding: 4,
+    marginRight: variables.gap.small,
+    cursor: 'pointer',
+    fontSize: '0.75rem',
+    display: 'inline-flex',
+    [responsiveMediaQuery('<=xs', {
+      appAlways: true
+    })]: {
+      padding: 3
+    }
+  }).toString(),
+  infoIconWrapper: css({
+    cursor: 'pointer',
+    color: 'var(--color-primary)',
+    fontSize: '1.5rem',
+    display: 'inline-flex',
+    verticalAlign: 'bottom',
+    paddingBottom: 1,
+    marginLeft: variables.gap.small,
+    [responsiveMediaQuery('<=xs', {
+      appAlways: true
+    })]: {
+      fontSize: '1.375rem',
+      paddingBottom: 0
+    }
+  }).toString(),
+  icon: css({
+    display: 'inline'
+  }).toString(),
+  loading: css({
+    opacity: 0.5
+  }).toString()
+};
+
+/**
  * @param {Function} dispatch The redux dispatch function.
  * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{deleteCoupon:function deleteCoupon(couponCode){return dispatch(deleteCouponsFromCart([couponCode]));},showTextModal:function showTextModal(text){return dispatch(showModal({message:text,title:null,confirm:null,dismiss:'modal.ok'}));}};};/**
+ */
+const mapDispatchToProps = dispatch => ({
+  deleteCoupon: couponCode => dispatch(deleteCouponsFromCart([couponCode])),
+  showTextModal: text => dispatch(showModal({
+    message: text,
+    title: null,
+    confirm: null,
+    dismiss: 'modal.ok'
+  }))
+});
+
+/**
  * @param {Object} props The component props
- * @returns {JSX}
- */var PromotionalTextInfoIcon=function PromotionalTextInfoIcon(_ref){var text=_ref.text,showText=_ref.showText;var _useContext=useContext(CartContext),isLoading=_useContext.isLoading;if(!text){return null;}return React.createElement("span",{onClick:function onClick(){return showText(text);},onKeyDown:function onKeyDown(){return showText(text);},className:classNames(styles.infoIconWrapper,_defineProperty({},styles.loading,isLoading)),role:"button",tabIndex:0},React.createElement(InfoIcon,{className:styles.icon}));};PromotionalTextInfoIcon.defaultProps={text:null};/**
+ * @param {string} props.text The promotional text
+ * @param {Function} props.showText The function to show the promotional text
+ * @returns {JSX.Element}
+ */
+const PromotionalTextInfoIcon = ({
+  text,
+  showText
+}) => {
+  const {
+    isLoading
+  } = useContext(CartContext);
+  if (!text) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("span", {
+    onClick: () => showText(text),
+    onKeyDown: () => showText(text),
+    className: classNames(styles.infoIconWrapper, {
+      [styles.loading]: isLoading
+    }),
+    role: "button",
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsx(InfoIcon, {
+      className: styles.icon
+    })
+  });
+};
+PromotionalTextInfoIcon.defaultProps = {
+  text: null
+};
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var CartItemProductPriceListPromotion=function CartItemProductPriceListPromotion(_ref2){var isCoupon=_ref2.isCoupon,isPromo=_ref2.isPromo,deleteCoupon=_ref2.deleteCoupon,showTextModal=_ref2.showTextModal,className=_ref2.className;var _useCartItem=useCartItem(),_useCartItem$cartItem=_useCartItem.cartItem,cartItem=_useCartItem$cartItem===void 0?{}:_useCartItem$cartItem;var appliedPromotions=cartItem===null||cartItem===void 0?void 0:cartItem.appliedPromotions;var promo=useMemo(function(){if(!appliedPromotions){return null;}return appliedPromotions.find(function(entry){return entry.coupon===null;});},[appliedPromotions]);var coupon=useMemo(function(){if(!appliedPromotions){return null;}return appliedPromotions.find(function(entry){return entry.coupon!==null;});},[appliedPromotions]);var showText=useCallback(function(text){showTextModal(text);},[showTextModal]);if(isPromo&&promo){var promotionalText=promo===null||promo===void 0?void 0:promo.promotionalText;var name=promo===null||promo===void 0?void 0:promo.name;return React.createElement("div",{className:classNames(styles.container,className)},name,React.createElement(PromotionalTextInfoIcon,{text:promotionalText,showText:showText}));}if(isCoupon&&coupon){var _coupon$coupon;var _promotionalText=coupon===null||coupon===void 0?void 0:coupon.promotionalText;var code=coupon===null||coupon===void 0?void 0:(_coupon$coupon=coupon.coupon)===null||_coupon$coupon===void 0?void 0:_coupon$coupon.code;return React.createElement("div",{className:classNames(styles.container,className)},React.createElement("span",{className:styles.deleteIcon,onClick:function onClick(){deleteCoupon(code);},onKeyDown:function onKeyDown(){deleteCoupon(code);},role:"button",tabIndex:0},React.createElement(CrossIcon,null)),React.createElement(I18n.Text,{string:"cart.coupon_label",params:{label:code}}),React.createElement(PromotionalTextInfoIcon,{text:_promotionalText,showText:showText}));}return null;};CartItemProductPriceListPromotion.defaultProps={isCoupon:false,isPromo:false,className:null};export default connect(null,mapDispatchToProps)(CartItemProductPriceListPromotion);
+ */
+const CartItemProductPriceListPromotion = ({
+  isCoupon,
+  isPromo,
+  deleteCoupon,
+  showTextModal,
+  className
+}) => {
+  const {
+    cartItem = {}
+  } = useCartItem();
+  const appliedPromotions = cartItem?.appliedPromotions;
+  const promo = useMemo(() => {
+    if (!appliedPromotions) {
+      return null;
+    }
+    return appliedPromotions.find(entry => entry.coupon === null);
+  }, [appliedPromotions]);
+  const coupon = useMemo(() => {
+    if (!appliedPromotions) {
+      return null;
+    }
+    return appliedPromotions.find(entry => entry.coupon !== null);
+  }, [appliedPromotions]);
+  const showText = useCallback(text => {
+    showTextModal(text);
+  }, [showTextModal]);
+  if (isPromo && promo) {
+    const promotionalText = promo?.promotionalText;
+    const name = promo?.name;
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames(styles.container, className),
+      children: [name, /*#__PURE__*/_jsx(PromotionalTextInfoIcon, {
+        text: promotionalText,
+        showText: showText
+      })]
+    });
+  }
+  if (isCoupon && coupon) {
+    const promotionalText = coupon?.promotionalText;
+    const code = coupon?.coupon?.code;
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames(styles.container, className),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: styles.deleteIcon,
+        onClick: () => {
+          deleteCoupon(code);
+        },
+        onKeyDown: () => {
+          deleteCoupon(code);
+        },
+        role: "button",
+        tabIndex: 0,
+        children: /*#__PURE__*/_jsx(CrossIcon, {})
+      }), /*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.coupon_label",
+        params: {
+          label: code
+        }
+      }), /*#__PURE__*/_jsx(PromotionalTextInfoIcon, {
+        text: promotionalText,
+        showText: showText
+      })]
+    });
+  }
+  return null;
+};
+CartItemProductPriceListPromotion.defaultProps = {
+  isCoupon: false,
+  isPromo: false,
+  className: null
+};
+export default connect(null, mapDispatchToProps)(CartItemProductPriceListPromotion);

package/cart/components/CartItem/CartItemProductProvider.connector.js

@@ -1,9 +1,50 @@
-import{connect}from'react-redux';import{isAndroid}from'@shopgate/pwa-common/selectors/client';import deleteProductsFromCart from'@shopgate/pwa-common-commerce/cart/actions/deleteProductsFromCart';import updateProductsInCart from'@shopgate/pwa-common-commerce/cart/actions/updateProductsInCart';import{getCurrency}from'@shopgate/pwa-common-commerce/cart/selectors';/**
+import { connect } from 'react-redux';
+import { isAndroid } from '@shopgate/pwa-common/selectors/client';
+import deleteProductsFromCart from '@shopgate/pwa-common-commerce/cart/actions/deleteProductsFromCart';
+import updateProductsInCart from '@shopgate/pwa-common-commerce/cart/actions/updateProductsInCart';
+import { getCurrency } from '@shopgate/pwa-common-commerce/cart/selectors';
+
+/**
+ * @typedef {import('./CartItemProductProvider.types').OwnProps} OwnProps
+ * @typedef {import('./CartItemProductProvider.types').StateProps} StateProps
+ */
+
+/**
  * 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{isAndroid:isAndroid(state),currency:getCurrency(state)};};/**
+ * @returns {StateProps} The extended component props.
+ */
+const mapStateToProps = state => ({
+  isAndroid: isAndroid(state),
+  currency: getCurrency(state)
+});
+
+/**
  * 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=function mapDispatchToProps(dispatch){return{deleteProduct:function deleteProduct(cartItemId){return dispatch(deleteProductsFromCart([cartItemId]));},updateProduct:function updateProduct(cartItemId,quantity){if(quantity===0){return dispatch(deleteProductsFromCart([cartItemId]));}return dispatch(updateProductsInCart([{cartItemId:cartItemId,quantity:quantity}]));}};};export default connect(mapStateToProps,mapDispatchToProps);
+ * @returns {DispatchProps} The extended component props.
+ */
+const mapDispatchToProps = dispatch => ({
+  /**
+   * Deletes a product from the cart.
+   * @param {string} cartItemId The ID of the cart item to delete.
+   * @returns {Promise<void>} A promise that resolves when the product is deleted.
+   */
+  deleteProduct: cartItemId => dispatch(deleteProductsFromCart([cartItemId])),
+  /**
+   * Updates the quantity of a product in the cart.
+   * @param {string} cartItemId The ID of the cart item to update.
+   * @param {number} quantity The new quantity.
+   * @returns {Promise<void>} A promise that resolves when the product is updated.
+   */
+  updateProduct: (cartItemId, quantity) => {
+    if (quantity === 0) {
+      return dispatch(deleteProductsFromCart([cartItemId]));
+    }
+    return dispatch(updateProductsInCart([{
+      cartItemId,
+      quantity
+    }]));
+  }
+});
+export default connect(mapStateToProps, mapDispatchToProps);

package/cart/components/CartItem/CartItemProductProvider.context.js

@@ -1 +1,3 @@
-import{createContext}from'react';var initialContext={};export default createContext(initialContext);
+import { createContext } from 'react';
+const initialContext = {};
+export default /*#__PURE__*/createContext(initialContext);

package/cart/components/CartItem/CartItemProductProvider.js

@@ -1,12 +1,146 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useMemo,useCallback,useState,useRef}from'react';import{getAbsoluteHeight}from'@shopgate/pwa-common/helpers/dom';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{CART_ITEM_TYPE_PRODUCT}from'@shopgate/pwa-common-commerce/cart/constants';import{CART_INPUT_AUTO_SCROLL_DELAY}from"../../cart.constants";import Context from"./CartItemProductProvider.context";import connect from"./CartItemProductProvider.connector";import CartItemProductProviderLegacy from"./CartItemProductProviderLegacy";var variables=themeConfig.variables;/**
+import "core-js/modules/es.regexp.flags.js";
+import React, { useMemo, useCallback, useState, useRef } from 'react';
+import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { CART_ITEM_TYPE_PRODUCT } from '@shopgate/pwa-common-commerce/cart/constants';
+import PropTypes from 'prop-types';
+import { CART_INPUT_AUTO_SCROLL_DELAY } from "../../cart.constants";
+import Context from "./CartItemProductProvider.context";
+import connect from "./CartItemProductProvider.connector";
+import CartItemProductProviderLegacy from "./CartItemProductProviderLegacy";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  variables
+} = themeConfig;
+
+/**
+ * @typedef {import('./CartItemProductProvider.types').OwnProps} OwnProps
+ * @typedef {import('./CartItemProductProvider.types').StateProps} StateProps
+ * @typedef {import('./CartItemProductProvider.types').DispatchProps} DispatchProps
+ */
+
+/**
+ * @typedef {OwnProps & StateProps & DispatchProps} Props
+ */
+
+/**
  * The CartItemProduct Provider
- * @param {Object} props The component props.
- * @returns {JSX}
- */var CartItemProductProvider=function CartItemProductProvider(_ref){var currency=_ref.currency,deleteProduct=_ref.deleteProduct,updateProduct=_ref.updateProduct,onFocus=_ref.onFocus,cartItem=_ref.cartItem,isEditable=_ref.isEditable,children=_ref.children,isAndroid=_ref.isAndroid,currencyOverride=_ref.currencyOverride;var id=cartItem.id,product=cartItem.product,quantity=cartItem.quantity,_cartItem$fulfillment=cartItem.fulfillment,fulfillment=_cartItem$fulfillment===void 0?null:_cartItem$fulfillment,_cartItem$messages=cartItem.messages,messages=_cartItem$messages===void 0?[]:_cartItem$messages,status=cartItem.status,subStatus=cartItem.subStatus,orderedQuantity=cartItem.orderedQuantity,unitPromoAmount=cartItem.unitPromoAmount,unitDiscountAmount=cartItem.unitDiscountAmount,price=cartItem.price,promoAmount=cartItem.promoAmount,discountAmount=cartItem.discountAmount,extendedPrice=cartItem.extendedPrice,appliedPromotions=cartItem.appliedPromotions,_cartItem$flags=cartItem.flags,flags=_cartItem$flags===void 0?{}:_cartItem$flags;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),editMode=_useState2[0],setEditMode=_useState2[1];var cartItemRef=useRef();var handleRemove=useCallback(function(){deleteProduct(id);},[deleteProduct,id]);var handleUpdate=useCallback(function(updatedQuantity){updateProduct(id,updatedQuantity);},[id,updateProduct]);var toggleEditMode=useCallback(function(isEnabled){if(isAndroid&&isEnabled){/**
+ * @param {Props} props The component props.
+ * @returns {JSX.Element}
+ */
+const CartItemProductProvider = ({
+  currency,
+  deleteProduct,
+  updateProduct,
+  onFocus,
+  cartItem,
+  isEditable,
+  children,
+  isAndroid,
+  currencyOverride
+}) => {
+  const {
+    id,
+    product,
+    quantity,
+    fulfillment = null,
+    messages = [],
+    status,
+    subStatus,
+    orderedQuantity,
+    unitPromoAmount,
+    unitDiscountAmount,
+    price,
+    promoAmount,
+    discountAmount,
+    extendedPrice,
+    appliedPromotions,
+    flags = {}
+  } = cartItem;
+  const [editMode, setEditMode] = useState(false);
+  const cartItemRef = useRef();
+  const handleRemove = useCallback(() => {
+    deleteProduct(id);
+  }, [deleteProduct, id]);
+  const handleUpdate = useCallback(updatedQuantity => {
+    updateProduct(id, updatedQuantity);
+  }, [id, updateProduct]);
+  const toggleEditMode = useCallback(isEnabled => {
+    if (isAndroid && isEnabled) {
+      /**
        * When the user focuses the quantity input, the keyboard will pop up an overlap the input.
        * Therefor the input has to be scrolled into the viewport again. Since between the focus and
        * the keyboard appearance some time ticks away, the execution of the scroll code is delayed.
        *
        * This should not happen on iOS devices, since their web views behave different.
-       */setTimeout(function(){var yOffset=-(window.innerHeight/2)+getAbsoluteHeight(cartItemRef.current)+variables.paymentBar.height;if(cartItemRef.current){cartItemRef.current.scrollIntoView({behavior:'smooth',yOffset:yOffset});}},CART_INPUT_AUTO_SCROLL_DELAY);}// Give the keyboard some time to slide out after blur, before further actions are taken.
-setTimeout(function(){if(onFocus){onFocus(isEnabled);}},isEnabled?300:0);setEditMode(isEnabled);},[isAndroid,onFocus]);var value=useMemo(function(){var isLinkable=(flags===null||flags===void 0?void 0:flags.disableLink)!==true;var allowQuantityChange=(flags===null||flags===void 0?void 0:flags.disableQuantityField)!==true;return{type:CART_ITEM_TYPE_PRODUCT,currency:currencyOverride||currency,product:product,messages:messages,handleRemove:handleRemove,handleUpdate:handleUpdate,cartItemRef:cartItemRef,toggleEditMode:toggleEditMode,editMode:editMode,isEditable:isEditable,isLinkable:isLinkable,allowQuantityChange:allowQuantityChange,cartItemId:id,cartItem:{id:id,product:product,status:status,subStatus:subStatus,quantity:quantity,orderedQuantity:orderedQuantity,fulfillment:fulfillment,unitPromoAmount:unitPromoAmount,unitDiscountAmount:unitDiscountAmount,price:price,promoAmount:promoAmount,discountAmount:discountAmount,extendedPrice:extendedPrice,appliedPromotions:appliedPromotions}};},[currency,currencyOverride,editMode,fulfillment,handleRemove,handleUpdate,id,isEditable,flags,messages,product,status,subStatus,quantity,orderedQuantity,toggleEditMode,unitPromoAmount,unitDiscountAmount,price,promoAmount,discountAmount,extendedPrice,appliedPromotions]);return React.createElement(Context.Provider,{value:value},React.createElement(CartItemProductProviderLegacy,null,children));};CartItemProductProvider.defaultProps={children:null,isEditable:true,onFocus:function onFocus(){},currencyOverride:null};export default connect(CartItemProductProvider);
+       */
+      setTimeout(() => {
+        const yOffset = -(window.innerHeight / 2) + getAbsoluteHeight(cartItemRef.current) + variables.paymentBar.height;
+        if (cartItemRef.current) {
+          cartItemRef.current.scrollIntoView({
+            behavior: 'smooth',
+            yOffset
+          });
+        }
+      }, CART_INPUT_AUTO_SCROLL_DELAY);
+    }
+
+    // Give the keyboard some time to slide out after blur, before further actions are taken.
+    setTimeout(() => {
+      if (onFocus) {
+        onFocus(isEnabled);
+      }
+    }, isEnabled ? 300 : 0);
+    setEditMode(isEnabled);
+  }, [isAndroid, onFocus]);
+  const value = useMemo(() => {
+    const isLinkable = flags?.disableLink !== true;
+    const allowQuantityChange = flags?.disableQuantityField !== true;
+    return {
+      type: CART_ITEM_TYPE_PRODUCT,
+      currency: currencyOverride || currency,
+      product,
+      messages,
+      handleRemove,
+      handleUpdate,
+      cartItemRef,
+      toggleEditMode,
+      editMode,
+      isEditable,
+      isLinkable,
+      allowQuantityChange,
+      cartItemId: id,
+      cartItem: {
+        id,
+        product,
+        status,
+        subStatus,
+        quantity,
+        orderedQuantity,
+        fulfillment,
+        unitPromoAmount,
+        unitDiscountAmount,
+        price,
+        promoAmount,
+        discountAmount,
+        extendedPrice,
+        appliedPromotions
+      }
+    };
+  }, [currency, currencyOverride, editMode, fulfillment, handleRemove, handleUpdate, id, isEditable, flags, messages, product, status, subStatus, quantity, orderedQuantity, toggleEditMode, unitPromoAmount, unitDiscountAmount, price, promoAmount, discountAmount, extendedPrice, appliedPromotions]);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsx(CartItemProductProviderLegacy, {
+      children: children
+    })
+  });
+};
+CartItemProductProvider.defaultProps = {
+  children: null,
+  isEditable: true,
+  onFocus: () => {},
+  currencyOverride: null,
+  currency: null,
+  isAndroid: false
+};
+export default connect(CartItemProductProvider);

package/cart/components/CartItem/CartItemProductProvider.types.js

@@ -1 +1,36 @@
-import*as React from'react';
+/**
+ * @typedef {import('../../cart.types').ItemFulfillment} ItemFulfillment
+ */
+/**
+ * @typedef {import('@shopgate/engage/product/product.types').Product} Product
+ */
+
+/**
+ * @typedef {Object} CartItemProduct
+ * @property {string} id
+ * @property {Product} product
+ * @property {number} quantity
+ * @property {any[]} messages
+ * @property {ItemFulfillment} [fulfillment]
+ */
+
+/**
+ * @typedef {Object} OwnProps
+ * @property {CartItemProduct} cartItem
+ * @property {(isEnabled: boolean) => void} [onToggleFocus]
+ * @property {boolean} [isEditable]
+ * @property {React.ReactNode} [children]
+ * @property {string} [currencyOverride]
+ */
+
+/**
+ * @typedef {Object} StateProps
+ * @property {boolean} [isAndroid]
+ * @property {string} [currency]
+ */
+
+/**
+ * @typedef {Object} DispatchProps
+ * @property {(cartItemId: string) => Promise<any>} [deleteProduct]
+ * @property {(cartItemId: string, quantity: number) => Promise<any>} [updateProduct]
+ */