@shopgate/engage
Version:
Shopgate's ENGAGE library.
10 lines • 4.75 kB
JavaScript
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()};/**
* @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'}));}};};/**
* @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 {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);