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

package/cart/components/CartItem/CartItemProductPriceListPromotion.js

@@ -1,10 +1,178 @@
-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";
+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__*/React.createElement("span", {
+    onClick: () => showText(text),
+    onKeyDown: () => showText(text),
+    className: classNames(styles.infoIconWrapper, {
+      [styles.loading]: isLoading
+    }),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(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__*/React.createElement("div", {
+      className: classNames(styles.container, className)
+    }, name, /*#__PURE__*/React.createElement(PromotionalTextInfoIcon, {
+      text: promotionalText,
+      showText: showText
+    }));
+  }
+  if (isCoupon && coupon) {
+    const promotionalText = coupon?.promotionalText;
+    const code = coupon?.coupon?.code;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.container, className)
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.deleteIcon,
+      onClick: () => {
+        deleteCoupon(code);
+      },
+      onKeyDown: () => {
+        deleteCoupon(code);
+      },
+      role: "button",
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement(CrossIcon, null)), /*#__PURE__*/React.createElement(I18n.Text, {
+      string: "cart.coupon_label",
+      params: {
+        label: code
+      }
+    }), /*#__PURE__*/React.createElement(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,142 @@
-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";
+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__*/React.createElement(Context.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(CartItemProductProviderLegacy, null, 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]
+ */

package/cart/components/CartItem/CartItemProductProviderLegacy.js

@@ -1,22 +1,82 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}import React from'react';import PropTypes from'prop-types';import{CART_ITEM_TYPE_PRODUCT}from'@shopgate/engage/cart';import{useCartItemProduct}from"./CartItem.hooks";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CART_ITEM_TYPE_PRODUCT } from '@shopgate/engage/cart';
+import { useCartItemProduct } from "./CartItem.hooks";
+
+/**
  * Provides legacy context for CartItemProduct component and its children.
  * Within PWA7 the context was refactored to the new context API. To keep compatibility with
  * older extensions, this provider is used to provide the legacy context.
  *
  * Should be removed when PWA 7 is deployed to all of the shops and affected extensions can be
  * updated without the need to support older PWA versions.
- */var LegacyProvider=/*#__PURE__*/function(_React$Component){/**
+ */
+class LegacyProvider extends React.Component {
+  /**
    * @param {Object} props The component props.
-   */function LegacyProvider(props){var _this2;_classCallCheck(this,LegacyProvider);_this2=_callSuper(this,LegacyProvider,[props]);_this2.state={cartItemId:props.cartItemId,product:props.product};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      cartItemId: props.cartItemId,
+      product: props.product
+    };
+  }
+
+  /**
    * @param {Object} nextProps Next props
    * @param {*} prevState  Prev state
    * @returns {Object|null}
-   */_inherits(LegacyProvider,_React$Component);return _createClass(LegacyProvider,[{key:"getChildContext",value:/**
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.cartItemId !== prevState.cartItemId || nextProps.product !== prevState.product) {
+      return {
+        cartItemId: nextProps.cartItemId,
+        product: nextProps.product
+      };
+    }
+    return null;
+  }
+
+  /**
    * @returns {Object}
-   */function getChildContext(){return{type:CART_ITEM_TYPE_PRODUCT,cartItemId:this.state.cartItemId,product:this.state.product};}/**
+   */
+  getChildContext() {
+    return {
+      type: CART_ITEM_TYPE_PRODUCT,
+      cartItemId: this.state.cartItemId,
+      product: this.state.product
+    };
+  }
+
+  /**
    * @returns {JSX.Element}
-   */},{key:"render",value:function render(){return this.props.children;}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,prevState){if(nextProps.cartItemId!==prevState.cartItemId||nextProps.product!==prevState.product){return{cartItemId:nextProps.cartItemId,product:nextProps.product};}return null;}}]);}(React.Component);LegacyProvider.childContextTypes={type:PropTypes.string,cartItemId:PropTypes.string,product:PropTypes.shape()};/**
+   */
+  render() {
+    return this.props.children;
+  }
+}
+LegacyProvider.childContextTypes = {
+  type: PropTypes.string,
+  cartItemId: PropTypes.string,
+  product: PropTypes.shape()
+};
+
+/**
  * Bridges the CartItemProductContext value to the legacy CartItemProduct context.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var CartItemProductProviderLegacy=function CartItemProductProviderLegacy(_ref){var children=_ref.children;var _useCartItemProduct=useCartItemProduct(),cartItemId=_useCartItemProduct.cartItemId,product=_useCartItemProduct.product;return React.createElement(LegacyProvider,{cartItemId:cartItemId,product:product},children);};export default CartItemProductProviderLegacy;
+ */
+const CartItemProductProviderLegacy = ({
+  children
+}) => {
+  const {
+    cartItemId,
+    product
+  } = useCartItemProduct();
+  return /*#__PURE__*/React.createElement(LegacyProvider, {
+    cartItemId: cartItemId,
+    product: product
+  }, children);
+};
+export default CartItemProductProviderLegacy;

package/cart/components/CartItem/CartItemProductTitle.js

@@ -1,7 +1,97 @@
-import React,{useCallback}from'react';import PropTypes from'prop-types';import{Grid,I18n,ContextMenu,SurroundPortals,TextLink}from'@shopgate/engage/components';import{CART_ITEM_CONTEXT_MENU,CART_ITEM_CONTEXT_MENU_ITEM_REMOVE,CART_ITEM_NAME}from'@shopgate/engage/cart';import{CartContextMenuItemChangeLocation,CartContextMenuItemChangeFulfillment}from'@shopgate/engage/locations';import{ITEM_PATH,ProductName}from'@shopgate/engage/product';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import{useCartItem,useCartItemProduct}from"./CartItem.hooks";import{menuToggleButton,menuToggleContainer,title,menuContainer}from"./CartItemProductTitle.style";import{ConditionalWrapper}from"../../../components";var contextMenuClasses={button:menuToggleButton,container:menuToggleContainer};/**
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Grid, I18n, ContextMenu, SurroundPortals, TextLink } from '@shopgate/engage/components';
+import { CART_ITEM_CONTEXT_MENU, CART_ITEM_CONTEXT_MENU_ITEM_REMOVE, CART_ITEM_NAME } from '@shopgate/engage/cart';
+import { CartContextMenuItemChangeLocation, CartContextMenuItemChangeFulfillment } from '@shopgate/engage/locations';
+import { ITEM_PATH, ProductName } from '@shopgate/engage/product';
+import { bin2hex } from '@shopgate/pwa-common/helpers/data';
+import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
+import { menuToggleButton, menuToggleContainer, title, menuContainer } from "./CartItemProductTitle.style";
+import { ConditionalWrapper } from "../../../components";
+const contextMenuClasses = {
+  button: menuToggleButton,
+  container: menuToggleContainer
+};
+
+/**
  * The Cart Product Title component.
  * @param {Object} props The component properties.
  * @param {string} props.value The product name
  * @param {string} props.productId The product id
  * @returns {JSX.Element}
- */export function CartItemProductTitle(_ref){var value=_ref.value,productId=_ref.productId;var _useCartItem=useCartItem(),invokeFulfillmentAction=_useCartItem.invokeFulfillmentAction;var context=useCartItemProduct();var handleRemove=context.handleRemove,toggleEditMode=context.toggleEditMode,cartItem=context.cartItem,isEditable=context.isEditable,isLinkable=context.isLinkable;var handleChangeLocationClick=useCallback(function(){if(!cartItem||!cartItem.fulfillment||!cartItem.fulfillment.method){return;}var method=cartItem.fulfillment.method;invokeFulfillmentAction('changeLocation',method);},[cartItem,invokeFulfillmentAction]);var handleChangeFulfillmentClick=useCallback(function(){invokeFulfillmentAction('changeFulfillment');},[invokeFulfillmentAction]);return React.createElement(Grid,null,React.createElement(Grid.Item,{grow:1},React.createElement(ConditionalWrapper,{condition:isEditable&&isLinkable,wrapper:function wrapper(children){return React.createElement(TextLink,{href:"".concat(ITEM_PATH,"/").concat(bin2hex(productId))},children);}},React.createElement(ProductName,{name:value,className:title,portalName:CART_ITEM_NAME,portalProps:context,testId:value,ellipsis:false}))),isEditable&&React.createElement(Grid.Item,{className:menuContainer,shrink:0},React.createElement(SurroundPortals,{portalName:CART_ITEM_CONTEXT_MENU,portalProps:{context:context,handleRemove:handleRemove,toggleEditMode:toggleEditMode}},React.createElement(ContextMenu,{classes:contextMenuClasses},React.createElement(SurroundPortals,{portalName:CART_ITEM_CONTEXT_MENU_ITEM_REMOVE,portalProps:{context:context,handleRemove:handleRemove}},React.createElement("div",{"data-test-id":"cartItemContextMenuItemRemove"},React.createElement(ContextMenu.Item,{onClick:handleRemove},React.createElement(I18n.Text,{string:"cart.remove"})))),React.createElement(CartContextMenuItemChangeLocation,{cartItem:context.cartItem,onClick:handleChangeLocationClick}),React.createElement(CartContextMenuItemChangeFulfillment,{cartItem:context.cartItem,onClick:handleChangeFulfillmentClick})))));}
+ */
+export function CartItemProductTitle({
+  value,
+  productId
+}) {
+  const {
+    invokeFulfillmentAction
+  } = useCartItem();
+  const context = useCartItemProduct();
+  const {
+    handleRemove,
+    toggleEditMode,
+    cartItem,
+    isEditable,
+    isLinkable
+  } = context;
+  const handleChangeLocationClick = useCallback(() => {
+    if (!cartItem || !cartItem.fulfillment || !cartItem.fulfillment.method) {
+      return;
+    }
+    const {
+      fulfillment: {
+        method
+      }
+    } = cartItem;
+    invokeFulfillmentAction('changeLocation', method);
+  }, [cartItem, invokeFulfillmentAction]);
+  const handleChangeFulfillmentClick = useCallback(() => {
+    invokeFulfillmentAction('changeFulfillment');
+  }, [invokeFulfillmentAction]);
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Item, {
+    grow: 1
+  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: isEditable && isLinkable,
+    wrapper: children => /*#__PURE__*/React.createElement(TextLink, {
+      href: `${ITEM_PATH}/${bin2hex(productId)}`
+    }, children)
+  }, /*#__PURE__*/React.createElement(ProductName, {
+    name: value,
+    className: title,
+    portalName: CART_ITEM_NAME,
+    portalProps: context,
+    testId: value,
+    ellipsis: false
+  }))), isEditable && /*#__PURE__*/React.createElement(Grid.Item, {
+    className: menuContainer,
+    shrink: 0
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_ITEM_CONTEXT_MENU,
+    portalProps: {
+      context,
+      handleRemove,
+      toggleEditMode
+    }
+  }, /*#__PURE__*/React.createElement(ContextMenu, {
+    classes: contextMenuClasses
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: CART_ITEM_CONTEXT_MENU_ITEM_REMOVE,
+    portalProps: {
+      context,
+      handleRemove
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "cartItemContextMenuItemRemove"
+  }, /*#__PURE__*/React.createElement(ContextMenu.Item, {
+    onClick: handleRemove
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "cart.remove"
+  })))), /*#__PURE__*/React.createElement(CartContextMenuItemChangeLocation, {
+    cartItem: context.cartItem,
+    onClick: handleChangeLocationClick
+  }), /*#__PURE__*/React.createElement(CartContextMenuItemChangeFulfillment, {
+    cartItem: context.cartItem,
+    onClick: handleChangeFulfillmentClick
+  })))));
+}