@shopgate/engage 7.9.0-beta.5 → 7.9.0-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/favorites/components/CommentDialog/CommentDialog.js +4 -2
- package/favorites/components/Item/Item.js +5 -4
- package/favorites/components/Item/ItemNotes.js +1 -1
- package/locations/components/FulfillmentSelector/FulfillmentSelector.js +1 -1
- package/locations/components/FulfillmentSelector/FulfillmentSelectorItem.js +1 -1
- package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherBar.js +2 -2
- package/locations/components/StockInfoLists/index.js +1 -1
- package/locations/components/StoreList/StoreListProduct.js +1 -1
- package/package.json +7 -7
- package/product/components/UnitQuantityPicker/UnitQuantityPicker.js +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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,{useEffect,useState,useMemo,useCallback}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{getCommentDialogSettings}from'@shopgate/pwa-common-commerce/favorites/selectors';import{i18n,usePrevious}from'@shopgate/engage/core';import{Dialog,TextField}from'@shopgate/engage/components';import{closeFavoritesCommentDialog}from'@shopgate/pwa-common-commerce/favorites/action-creators';import{themeName}from'@shopgate/pwa-common/helpers/config';import{updateFavorite}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import I18n from'@shopgate/pwa-common/components/I18n';var isIos=themeName.includes('ios');/**
|
|
1
|
+
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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,{useEffect,useState,useMemo,useCallback,useRef}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{getCommentDialogSettings}from'@shopgate/pwa-common-commerce/favorites/selectors';import{i18n,usePrevious}from'@shopgate/engage/core';import{Dialog,TextField}from'@shopgate/engage/components';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{closeFavoritesCommentDialog}from'@shopgate/pwa-common-commerce/favorites/action-creators';import{themeName}from'@shopgate/pwa-common/helpers/config';import{updateFavorite}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import I18n from'@shopgate/pwa-common/components/I18n';var isIos=themeName.includes('ios');/**
|
|
2
2
|
* @param {Object} state State.
|
|
3
3
|
* @returns {Object}
|
|
4
4
|
*/var mapStateToProps=function mapStateToProps(state){return{settings:getCommentDialogSettings(state)};};/**
|
|
@@ -7,4 +7,6 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
|
|
|
7
7
|
*/var mapDispatchToProps=function mapDispatchToProps(dispatch){return{close:function close(){return dispatch(closeFavoritesCommentDialog());},updateFavoriteItem:function updateFavoriteItem(productId,listId,quantity,notes){dispatch(updateFavorite(productId,listId,quantity,notes));}};};var styles={root:css({display:'flex',flexDirection:'column'}),input:css({textAlign:'left',fontSize:'1rem'}).toString(),characterCount:css({textAlign:'right',marginTop:-16,fontSize:'0.875rem',color:'var(--color-text-medium-emphasis)'}).toString()};var MAX_CHARACTER_COUNT=250;/**
|
|
8
8
|
* @param {Object} props Props.
|
|
9
9
|
* @returns {JSX}
|
|
10
|
-
*/var CommentDialog=function CommentDialog(_ref){var settings=_ref.settings,close=_ref.close,updateFavoriteItem=_ref.updateFavoriteItem;var isVisible=!!settings;var _ref2=settings||{},productId=_ref2.productId,listId=_ref2.listId,item=_ref2.item;var prevProdId=usePrevious(productId);var _useState=useState(item===null||item===void 0?void 0:item.notes),_useState2=_slicedToArray(_useState,2),value=_useState2[0],setValue=_useState2[1]
|
|
10
|
+
*/var CommentDialog=function CommentDialog(_ref){var settings=_ref.settings,close=_ref.close,updateFavoriteItem=_ref.updateFavoriteItem;var isVisible=!!settings;var _ref2=settings||{},productId=_ref2.productId,listId=_ref2.listId,item=_ref2.item;var prevProdId=usePrevious(productId);var _useState=useState(item===null||item===void 0?void 0:item.notes),_useState2=_slicedToArray(_useState,2),value=_useState2[0],setValue=_useState2[1];// Reference to the element that triggered the dialog
|
|
11
|
+
var triggerRef=useRef(null);useEffect(function(){if(prevProdId!==productId){setValue(item===null||item===void 0?void 0:item.notes);}},[item,prevProdId,productId]);useEffect(function(){if(isVisible){triggerRef.current=document.activeElement;}},[isVisible]);var handleClose=useCallback(function(){setTimeout(function(){if(triggerRef===null||triggerRef===void 0?void 0:triggerRef.current){// Focus the element that triggered the dialog after dialog (a11y improvement)
|
|
12
|
+
triggerRef.current.focus();}if(!(item===null||item===void 0?void 0:item.notes)&&!!value){broadcastLiveMessage('favorites.comments.added');}if((item===null||item===void 0?void 0:item.notes)&&value!==item.notes){broadcastLiveMessage('favorites.comments.updated');}},300);close();},[close,item,value]);var handleSubmit=useCallback(function(){if((item===null||item===void 0?void 0:item.notes)!==value){updateFavoriteItem(productId,listId,undefined,value);}handleClose();},[handleClose,item,listId,productId,updateFavoriteItem,value]);var handleChange=useCallback(function(newValue){setValue(newValue);},[]);var attributes=useMemo(function(){return{style:{maxHeight:150,placeholder:i18n.text('favorites.comment_modal.label')},maxLength:MAX_CHARACTER_COUNT};},[]);if(!isVisible){return null;}return React.createElement(Dialog,{onConfirm:handleSubmit,onDismiss:handleClose,modal:{title:i18n.text("favorites.comment_modal.".concat(((item===null||item===void 0?void 0:item.notes)||'').length===0?'titleAdd':'titleEdit')),dismiss:i18n.text('favorites.comment_modal.dismiss'),confirm:i18n.text('favorites.comment_modal.confirm')}},React.createElement("div",{className:styles.root},React.createElement(TextField,_extends({name:"name"},isIos?{placeholder:i18n.text('favorites.comment_modal.label')}:{label:i18n.text('favorites.comment_modal.label')},{onChange:handleChange,value:value,className:styles.input,attributes:attributes,multiLine:true,tabIndex:0})),React.createElement(I18n.Text,{className:styles.characterCount,string:"favorites.comment_modal.characterCount","aria-hidden":true,params:{maxCount:MAX_CHARACTER_COUNT,count:(value===null||value===void 0?void 0:value.length)||0}})));};CommentDialog.defaultProps={settings:null};export default connect(mapStateToProps,mapDispatchToProps)(CommentDialog);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _css;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;}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,{useCallback,useMemo,useLayoutEffect,useState,useEffect}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{MODAL_VARIANT_SELECT}from'@shopgate/pwa-ui-shared/Dialog/constants';import{ProductImage,ITEM_PATH,PriceInfo,isBaseProduct as isBaseProductSelector,isProductOrderable,hasProductVariants}from'@shopgate/engage/product';import{bin2hex,showModal as showModalAction,historyPush as historyPushAction,getThemeSettings,i18n}from'@shopgate/engage/core';import{Link,TextLink,SurroundPortals}from'@shopgate/engage/components';import{makeIsRopeProductOrderable,getPreferredLocation,StockInfoLists}from'@shopgate/engage/locations';import{FAVORITES_PRODUCT_NAME,FAVORITES_PRODUCT_PRICE,FAVORITES_ADD_TO_CART}from'@shopgate/engage/favorites';import{responsiveMediaQuery}from'@shopgate/engage/styles';import Price from'@shopgate/pwa-ui-shared/Price';import PriceStriked from'@shopgate/pwa-ui-shared/PriceStriked';import AddToCart from'@shopgate/pwa-ui-shared/AddToCartButton';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{updateFavorite}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import{openFavoritesCommentDialog}from'@shopgate/pwa-common-commerce/favorites/action-creators';import classNames from'classnames';import Remove from"../RemoveButton";import ItemCharacteristics from"./ItemCharacteristics";import ItemQuantity from"./ItemQuantity";import ItemNotes from"./ItemNotes";import{FAVORITES_LIST_ITEM,FAVORITES_NOTES,FAVORITES_QUANTITY}from"../../constants/Portals";var variables=themeConfig.variables;/**
|
|
1
|
+
var _css;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;}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,{useCallback,useMemo,useLayoutEffect,useState,useEffect,useRef}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{MODAL_VARIANT_SELECT}from'@shopgate/pwa-ui-shared/Dialog/constants';import{ProductImage,ITEM_PATH,PriceInfo,isBaseProduct as isBaseProductSelector,isProductOrderable,hasProductVariants}from'@shopgate/engage/product';import{bin2hex,showModal as showModalAction,historyPush as historyPushAction,getThemeSettings,i18n}from'@shopgate/engage/core';import{Link,TextLink,SurroundPortals}from'@shopgate/engage/components';import{makeIsRopeProductOrderable,getPreferredLocation,StockInfoLists}from'@shopgate/engage/locations';import{FAVORITES_PRODUCT_NAME,FAVORITES_PRODUCT_PRICE,FAVORITES_ADD_TO_CART}from'@shopgate/engage/favorites';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{responsiveMediaQuery}from'@shopgate/engage/styles';import Price from'@shopgate/pwa-ui-shared/Price';import PriceStriked from'@shopgate/pwa-ui-shared/PriceStriked';import AddToCart from'@shopgate/pwa-ui-shared/AddToCartButton';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{updateFavorite}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import{openFavoritesCommentDialog}from'@shopgate/pwa-common-commerce/favorites/action-creators';import classNames from'classnames';import Remove from"../RemoveButton";import ItemCharacteristics from"./ItemCharacteristics";import ItemQuantity from"./ItemQuantity";import ItemNotes from"./ItemNotes";import{FAVORITES_LIST_ITEM,FAVORITES_NOTES,FAVORITES_QUANTITY}from"../../constants/Portals";var variables=themeConfig.variables;/**
|
|
2
2
|
* @return {Function} The extended component props.
|
|
3
3
|
*/var makeMapStateToProps=function makeMapStateToProps(){var isRopeProductOrderable=makeIsRopeProductOrderable(function(state,props){var _getPreferredLocation;return(_getPreferredLocation=getPreferredLocation(state,props))===null||_getPreferredLocation===void 0?void 0:_getPreferredLocation.code;},function(state,props){return props.variantId||props.productId||null;});return function(state,props){return{isBaseProduct:isBaseProductSelector(state,props),hasVariants:hasProductVariants(state,props),isOrderable:isProductOrderable(state,props),isRopeProductOrderable:isRopeProductOrderable(state,props)};};};/**
|
|
4
4
|
* @param {Function} dispatch Dispatch.
|
|
@@ -6,7 +6,8 @@ var _css;function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableTo
|
|
|
6
6
|
*/var mapDispatchToProps=function mapDispatchToProps(dispatch){return{showModal:showModalAction,historyPush:historyPushAction,updateFavoriteItem:function updateFavoriteItem(productId,listId,quantity,notes){dispatch(updateFavorite(productId,listId,quantity,notes));},openCommentDialog:function openCommentDialog(productId,listId){return dispatch(openFavoritesCommentDialog(productId,listId));}};};var styles={root:css({display:'flex',position:'relative','&:not(:last-child)':{marginBottom:16}}).toString(),imageContainer:css((_css={flex:0.4,marginRight:18},_defineProperty(_css,responsiveMediaQuery('>=xs',{appAlways:true}),{maxWidth:120,minWidth:80}),_defineProperty(_css,responsiveMediaQuery('>=md',{webOnly:true}),{maxWidth:120,minWidth:80}),_defineProperty(_css,responsiveMediaQuery('>=md',{webOnly:true}),{width:120,flex:'none'}),_css)).toString(),infoContainer:css({flex:1,display:'flex',flexDirection:'column',flexWrap:'wrap',gap:8}).toString(),infoContainerRow:css({flexDirection:'row',display:'flex',justifyContent:'space-between'}).toString(),quantityContainer:css({flexDirection:'row',display:'flex',alignItems:'center',flexWrap:'wrap',gap:16}).toString(),priceContainer:css({minWidth:100}).toString(),priceInfo:css({wordBreak:'break-word',fontSize:'0.875rem',lineHeight:'0.875rem',color:'var(--color-text-low-emphasis)',padding:"".concat(variables.gap.xsmall,"px 0")}).toString(),titleWrapper:css({display:'flex',flexDirection:'column',gap:8}).toString(),titleContainer:css({marginRight:10,flex:1}).toString(),title:css({fontSize:17,fontWeight:600}).toString(),removeContainer:css({display:'flex',flexShrink:0,alignItems:'flex-start'})};/**
|
|
7
7
|
* Favorite Item component
|
|
8
8
|
* @return {JSX}
|
|
9
|
-
*/var FavoriteItem=function FavoriteItem(_ref){var _product$price,_product$price2,_product$price3;var listId=_ref.listId,product=_ref.product,notes=_ref.notes,quantity=_ref.quantity,remove=_ref.remove,addToCart=_ref.addToCart,isBaseProduct=_ref.isBaseProduct,isOrderable=_ref.isOrderable,isRopeProductOrderable=_ref.isRopeProductOrderable,hasVariants=_ref.hasVariants,showModal=_ref.showModal,historyPush=_ref.historyPush,updateFavoriteItem=_ref.updateFavoriteItem,openCommentDialog=_ref.openCommentDialog;var _ref2=getThemeSettings('AppImages')||{},gridResolutions=_ref2.ListImage;var _useState=useState(!isOrderable&&!hasVariants),_useState2=_slicedToArray(_useState,2),isDisabled=_useState2[0],setIsDisabled=_useState2[1];var currency=((_product$price=product.price)===null||_product$price===void 0?void 0:_product$price.currency)||'EUR';var defaultPrice=((_product$price2=product.price)===null||_product$price2===void 0?void 0:_product$price2.unitPrice)||0;var specialPrice=(_product$price3=product.price)===null||_product$price3===void 0?void 0:_product$price3.unitPriceStriked;var hasStrikePrice=typeof specialPrice==='number'&&specialPrice!==defaultPrice;var price=hasStrikePrice?specialPrice:defaultPrice;var characteristics=(product===null||product===void 0?void 0:product.characteristics)||[];var productLink="".concat(ITEM_PATH,"/").concat(bin2hex(product.id));var _useState3=useState(quantity),_useState4=_slicedToArray(_useState3,2),internalQuantity=_useState4[0],setInternalQuantity=_useState4[1];useEffect(function(){setInternalQuantity(quantity);},[quantity]);useLayoutEffect(function(){setIsDisabled(!isOrderable&&!hasVariants);},[hasVariants,isOrderable]);var handleOpenComment=useCallback(function(e){e.preventDefault();e.stopPropagation();openCommentDialog(product.id,listId);},[listId,openCommentDialog,product.id]);var handleAddToCart=useCallback(function(e){e.preventDefault();e.stopPropagation();if(isBaseProduct&&hasVariants){// Called for a parent product. User needs to confirm the navigation to the PDP
|
|
9
|
+
*/var FavoriteItem=function FavoriteItem(_ref){var _product$price,_product$price2,_product$price3;var listId=_ref.listId,product=_ref.product,notes=_ref.notes,quantity=_ref.quantity,remove=_ref.remove,addToCart=_ref.addToCart,isBaseProduct=_ref.isBaseProduct,isOrderable=_ref.isOrderable,isRopeProductOrderable=_ref.isRopeProductOrderable,hasVariants=_ref.hasVariants,showModal=_ref.showModal,historyPush=_ref.historyPush,updateFavoriteItem=_ref.updateFavoriteItem,openCommentDialog=_ref.openCommentDialog;var _ref2=getThemeSettings('AppImages')||{},gridResolutions=_ref2.ListImage;var _useState=useState(!isOrderable&&!hasVariants),_useState2=_slicedToArray(_useState,2),isDisabled=_useState2[0],setIsDisabled=_useState2[1];var currency=((_product$price=product.price)===null||_product$price===void 0?void 0:_product$price.currency)||'EUR';var defaultPrice=((_product$price2=product.price)===null||_product$price2===void 0?void 0:_product$price2.unitPrice)||0;var specialPrice=(_product$price3=product.price)===null||_product$price3===void 0?void 0:_product$price3.unitPriceStriked;var hasStrikePrice=typeof specialPrice==='number'&&specialPrice!==defaultPrice;var price=hasStrikePrice?specialPrice:defaultPrice;var characteristics=(product===null||product===void 0?void 0:product.characteristics)||[];var productLink="".concat(ITEM_PATH,"/").concat(bin2hex(product.id));var notesButtonRef=useRef();var _useState3=useState(quantity),_useState4=_slicedToArray(_useState3,2),internalQuantity=_useState4[0],setInternalQuantity=_useState4[1];useEffect(function(){setInternalQuantity(quantity);},[quantity]);useLayoutEffect(function(){setIsDisabled(!isOrderable&&!hasVariants);},[hasVariants,isOrderable]);var handleOpenComment=useCallback(function(e){e.preventDefault();e.stopPropagation();openCommentDialog(product.id,listId);},[listId,openCommentDialog,product.id]);var handleAddToCart=useCallback(function(e){e.preventDefault();e.stopPropagation();if(isBaseProduct&&hasVariants){// Called for a parent product. User needs to confirm the navigation to the PDP
|
|
10
10
|
showModal({title:null,type:MODAL_VARIANT_SELECT,message:'favorites.modal.message',confirm:'favorites.modal.confirm',dismiss:'common.cancel',params:{productId:product.id}});return false;}if(!isRopeProductOrderable){// Product is not orderable for ROPE. So users need to do some corrections. Just redirect.
|
|
11
|
-
historyPush({pathname:productLink});return false;}return addToCart(e);},[addToCart,hasVariants,historyPush,isBaseProduct,isRopeProductOrderable,product.id,productLink,showModal]);var commonPortalProps=useMemo(function(){var availability=product.availability,id=product.id,name=product.name;return{availability:availability,characteristics:characteristics,id:id,name:name,price:price,listId:listId};},[characteristics,listId,price,product]);var ctaPortalProps=useMemo(function(){return{isLoading:false,noShadow:false,listId:listId,isBaseProduct:isBaseProduct,isDisabled:isDisabled,productId:product.id,handleRemoveFromCart:remove,handleAddToCart:handleAddToCart};},[handleAddToCart,isBaseProduct,isDisabled,listId,product.id,remove]);var handleChangeQuantity=useCallback(function(newQuantity){updateFavoriteItem(product.id,listId,newQuantity,notes);},[listId,notes,product.id,updateFavoriteItem]);var handleDeleteComment=useCallback(function(event){event.preventDefault();event.stopPropagation();updateFavoriteItem(product.id,listId,quantity,'');
|
|
12
|
-
|
|
11
|
+
historyPush({pathname:productLink});return false;}broadcastLiveMessage('product.adding_item',{params:{count:1}});return addToCart(e);},[addToCart,hasVariants,historyPush,isBaseProduct,isRopeProductOrderable,product.id,productLink,showModal]);var commonPortalProps=useMemo(function(){var availability=product.availability,id=product.id,name=product.name;return{availability:availability,characteristics:characteristics,id:id,name:name,price:price,listId:listId};},[characteristics,listId,price,product]);var ctaPortalProps=useMemo(function(){return{isLoading:false,noShadow:false,listId:listId,isBaseProduct:isBaseProduct,isDisabled:isDisabled,productId:product.id,handleRemoveFromCart:remove,handleAddToCart:handleAddToCart};},[handleAddToCart,isBaseProduct,isDisabled,listId,product.id,remove]);var handleChangeQuantity=useCallback(function(newQuantity){updateFavoriteItem(product.id,listId,newQuantity,notes);},[listId,notes,product.id,updateFavoriteItem]);var handleDeleteComment=useCallback(function(event){event.preventDefault();event.stopPropagation();updateFavoriteItem(product.id,listId,quantity,'');setTimeout(function(){if(notesButtonRef===null||notesButtonRef===void 0?void 0:notesButtonRef.current){// Focus the add button after item deletion to improve a11y
|
|
12
|
+
notesButtonRef.current.focus();}broadcastLiveMessage('favorites.comments.removed');},300);},[listId,product.id,quantity,updateFavoriteItem]);return React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_ITEM,portalProps:product},React.createElement("div",{className:styles.root},React.createElement(Link,{className:styles.imageContainer,component:"div",href:productLink,"aria-hidden":true},React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions})),React.createElement("div",{className:styles.infoContainer},React.createElement("div",{className:classNames(styles.infoContainerRow)},React.createElement("div",{className:styles.titleWrapper},React.createElement(SurroundPortals,{portalName:FAVORITES_PRODUCT_NAME,portalProps:commonPortalProps},React.createElement(TextLink,{href:productLink,tag:"span",className:styles.titleContainer},React.createElement("span",{className:styles.title// eslint-disable-next-line react/no-danger
|
|
13
|
+
,dangerouslySetInnerHTML:{__html:"".concat(product.name)}})))),React.createElement("div",{className:styles.removeContainer},React.createElement(Remove,{onClick:remove}))),React.createElement(ItemCharacteristics,{characteristics:characteristics}),React.createElement(StockInfoLists,{product:product}),React.createElement("div",{className:styles.infoContainerRow},React.createElement("div",{className:styles.quantityContainer},React.createElement(SurroundPortals,{portalName:FAVORITES_QUANTITY,portalProps:commonPortalProps},React.createElement(ItemQuantity,{quantity:internalQuantity,onChange:handleChangeQuantity})),React.createElement(SurroundPortals,{portalName:FAVORITES_PRODUCT_PRICE,portalProps:commonPortalProps},React.createElement("div",{className:styles.priceContainer},hasStrikePrice?React.createElement(PriceStriked,{value:defaultPrice,currency:currency}):null,React.createElement(Price,{currency:currency,discounted:hasStrikePrice,taxDisclaimer:true,unitPrice:price}),React.createElement(PriceInfo,{product:product,currency:currency,className:styles.priceInfo})))),React.createElement(SurroundPortals,{portalName:FAVORITES_ADD_TO_CART,portalProps:ctaPortalProps},React.createElement(AddToCart,{onClick:handleAddToCart,isLoading:false,isDisabled:isDisabled,"aria-label":i18n.text('product.add_to_cart')}))),React.createElement(SurroundPortals,{portalName:FAVORITES_NOTES,portalProps:commonPortalProps},React.createElement(ItemNotes,{notes:notes,onClickDeleteComment:handleDeleteComment,onClickOpenComment:handleOpenComment,notesButtonRef:notesButtonRef})))));};FavoriteItem.defaultProps={isBaseProduct:true,isOrderable:true,isRopeProductOrderable:true,hasVariants:false,notes:undefined,quantity:1};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteItem);
|
|
@@ -4,4 +4,4 @@ import React from'react';import PropTypes from'prop-types';import{css}from'glamo
|
|
|
4
4
|
*
|
|
5
5
|
* @param {Object} props The component props
|
|
6
6
|
* @returns {JSX}
|
|
7
|
-
*/var ItemNotes=function ItemNotes(_ref){var wishlistItemNotesEnabled=_ref.wishlistItemNotesEnabled,notes=_ref.notes,onClickOpenComment=_ref.onClickOpenComment,onClickDeleteComment=_ref.onClickDeleteComment;if(!wishlistItemNotesEnabled){return null;}return React.createElement(
|
|
7
|
+
*/var ItemNotes=function ItemNotes(_ref){var wishlistItemNotesEnabled=_ref.wishlistItemNotesEnabled,notes=_ref.notes,onClickOpenComment=_ref.onClickOpenComment,onClickDeleteComment=_ref.onClickDeleteComment,notesButtonRef=_ref.notesButtonRef;if(!wishlistItemNotesEnabled){return null;}/* eslint-disable jsx-a11y/aria-role */return React.createElement("div",{className:styles.root},notes&&React.createElement("span",{role:"text"},React.createElement("span",{className:styles.comment},"".concat(i18n.text('favorites.comments.notes'),": ")),React.createElement("span",{className:styles.notes},"\"".concat(notes,"\""))),React.createElement("span",{className:styles.buttons},React.createElement("button",{type:"button",onClick:onClickOpenComment,className:styles.addCommentButton,ref:notesButtonRef},notes?i18n.text('favorites.comments.edit'):i18n.text('favorites.comments.add')),notes&&React.createElement(React.Fragment,null,React.createElement("span",{"aria-hidden":true}," | "),React.createElement("button",{type:"button",onClick:onClickDeleteComment,className:styles.addCommentButton},i18n.text('favorites.comments.delete')))));/* eslint-enable jsx-a11y/aria-role */};ItemNotes.defaultProps={notes:null,notesButtonRef:null};export default connect(makeMapStateToProps)(ItemNotes);
|
|
@@ -17,4 +17,4 @@ setSelection(fulfillmentMethodFallback);return;}if(newLocationData){// Update th
|
|
|
17
17
|
setSelectedLocation(newLocationData.location);}},[fulfillmentMethodFallback,usedLocation]);/**
|
|
18
18
|
* Whenever the pick-up selection is made, open the
|
|
19
19
|
* store selector sheet and use the new location.
|
|
20
|
-
*/var handleChange=useCallback(function(method){var changeOnly=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;conditioner.without('fulfillment-inventory').check().then(function(passed){if(!passed){return;}setSelection(method);storeFulfillmentMethod(method);var isValidRopeSelection=[ROPIS,BOPIS].includes(method)&&!!preferredLocation&&!!preferredLocation.code;if(!changeOnly&&(isOpen||isValidRopeSelection)){return;}if(method===DIRECT_SHIP){setSelectedLocation(null);return;}setIsOpen(true);FulfillmentSheet.open({stage:STAGE_SELECT_STORE,callback:handleClose,changeOnly:changeOnly});});},[conditioner,handleClose,isOpen,preferredLocation,storeFulfillmentMethod]);var shopHasRopeMethods=useMemo(function(){if(!Array.isArray(shopFulfillmentMethods)){return false;}return shopFulfillmentMethods.filter(function(method){return method!==DIRECT_SHIP;}).length>0;},[shopFulfillmentMethods]);if(!shopHasRopeMethods){return null;}var context={selection:selection,selectedLocation:selectedLocation,inventory:inventory,preferredLocation:preferredLocation,isDirectShipEnabled:isDirectShipEnabled,isBOPISEnabled:isBOPISEnabled,isROPISEnabled:isROPISEnabled,isReady:isReady,productId:productId,handleChange:handleChange,conditioner:conditioner,merchantSettings:merchantSettings,fulfillmentPaths:fulfillmentPaths,userFulfillmentMethod:userFulfillmentMethod,isOrderable:isOrderable,shopFulfillmentMethods:shopFulfillmentMethods,productFulfillmentMethods:productFulfillmentMethods,locationFulfillmentMethods:locationFulfillmentMethods,useLocationFulfillmentMethods:useLocationFulfillmentMethods};return React.createElement(FulfillmentSelectorContext.Provider,{value:context},React.createElement(SurroundPortals,{portalName:PRODUCT_FULFILLMENT_SELECTOR},React.createElement("div",{className:container},React.createElement(FulfillmentSelectorHeader,null),shopFulfillmentMethods.includes(DIRECT_SHIP)&&React.createElement(FulfillmentSelectorItem,{name:DIRECT_SHIP,onChange:handleChange,disabled:!isReady||!isDirectShipEnabled},React.createElement(FulfillmentSelectorDirectShip,null)),shopFulfillmentMethods.includes(BOPIS)&&React.createElement(FulfillmentSelectorItem,{name:BOPIS,onChange:handleChange,disabled:!isReady||!isBOPISEnabled},React.createElement(FulfillmentSelectorBOPIS,null)),shopFulfillmentMethods.includes(ROPIS)&&React.createElement(FulfillmentSelectorItem,{name:ROPIS,onChange:handleChange,disabled:!isReady||!isROPISEnabled},React.createElement(FulfillmentSelectorROPIS,null)))),React.createElement(FulfillmentSelectorLocation,null),React.createElement(FulfillmentSelectorAddToCart,null));}export default hot(connect(React.memo(FulfillmentSelector)));
|
|
20
|
+
*/var handleChange=useCallback(function(method){var changeOnly=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;conditioner.without('fulfillment-inventory').check().then(function(passed){if(!passed){return;}setSelection(method);storeFulfillmentMethod(method);var isValidRopeSelection=[ROPIS,BOPIS].includes(method)&&!!preferredLocation&&!!preferredLocation.code;if(!changeOnly&&(isOpen||isValidRopeSelection)){return;}if(method===DIRECT_SHIP){setSelectedLocation(null);return;}setIsOpen(true);FulfillmentSheet.open({stage:STAGE_SELECT_STORE,callback:handleClose,changeOnly:changeOnly});});},[conditioner,handleClose,isOpen,preferredLocation,storeFulfillmentMethod]);var shopHasRopeMethods=useMemo(function(){if(!Array.isArray(shopFulfillmentMethods)){return false;}return shopFulfillmentMethods.filter(function(method){return method!==DIRECT_SHIP;}).length>0;},[shopFulfillmentMethods]);if(!shopHasRopeMethods){return null;}var context={selection:selection,selectedLocation:selectedLocation,inventory:inventory,preferredLocation:preferredLocation,isDirectShipEnabled:isDirectShipEnabled,isBOPISEnabled:isBOPISEnabled,isROPISEnabled:isROPISEnabled,isReady:isReady,productId:productId,handleChange:handleChange,conditioner:conditioner,merchantSettings:merchantSettings,fulfillmentPaths:fulfillmentPaths,userFulfillmentMethod:userFulfillmentMethod,isOrderable:isOrderable,shopFulfillmentMethods:shopFulfillmentMethods,productFulfillmentMethods:productFulfillmentMethods,locationFulfillmentMethods:locationFulfillmentMethods,useLocationFulfillmentMethods:useLocationFulfillmentMethods};return React.createElement(FulfillmentSelectorContext.Provider,{value:context},React.createElement(SurroundPortals,{portalName:PRODUCT_FULFILLMENT_SELECTOR},React.createElement("div",{className:container,role:"radiogroup",tabIndex:"0"},React.createElement(FulfillmentSelectorHeader,null),shopFulfillmentMethods.includes(DIRECT_SHIP)&&React.createElement(FulfillmentSelectorItem,{name:DIRECT_SHIP,onChange:handleChange,disabled:!isReady||!isDirectShipEnabled},React.createElement(FulfillmentSelectorDirectShip,null)),shopFulfillmentMethods.includes(BOPIS)&&React.createElement(FulfillmentSelectorItem,{name:BOPIS,onChange:handleChange,disabled:!isReady||!isBOPISEnabled},React.createElement(FulfillmentSelectorBOPIS,null)),shopFulfillmentMethods.includes(ROPIS)&&React.createElement(FulfillmentSelectorItem,{name:ROPIS,onChange:handleChange,disabled:!isReady||!isROPISEnabled},React.createElement(FulfillmentSelectorROPIS,null)))),React.createElement(FulfillmentSelectorLocation,null),React.createElement(FulfillmentSelectorAddToCart,null));}export default hot(connect(React.memo(FulfillmentSelector)));
|
|
@@ -5,4 +5,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
|
|
|
5
5
|
*/function FulfillmentSelectorItemUnwrapped(props){var name=props.name,children=props.children,onChange=props.onChange,disabled=props.disabled;var _useFulfillmentSelect=useFulfillmentSelectorState(),selection=_useFulfillmentSelect.selection;var checked=selection===name;/**
|
|
6
6
|
* Handle the change to the radio item.
|
|
7
7
|
* @param {Object} event The change event.
|
|
8
|
-
*/function handleChange(event){event.preventDefault();if(disabled){return;}onChange(name);}var containerClasses=classNames(radioContainer.toString(),_defineProperty({},radioContainerDisabled.toString(),disabled));return React.createElement("label",{htmlFor:name,className:containerClasses,onClick:handleChange},checked?React.createElement(CheckedIcon,{className:disabled?activeIconDisabled:activeIcon}):React.createElement(UncheckedIcon,{className:disabled?inactiveIconDisabled:inactiveIcon}),React.createElement("input",{type:"radio",checked:checked,name:name,className:radio,readOnly:true}),React.createElement("div",{className:content},children));}FulfillmentSelectorItemUnwrapped.defaultProps={disabled:false};export var FulfillmentSelectorItem=React.memo(FulfillmentSelectorItemUnwrapped);
|
|
8
|
+
*/function handleChange(event){event.preventDefault();if(disabled){return;}onChange(name);}var containerClasses=classNames(radioContainer.toString(),_defineProperty({},radioContainerDisabled.toString(),disabled));return React.createElement("label",{htmlFor:name,className:containerClasses,onClick:handleChange,role:"radio","aria-checked":checked,tabIndex:"0"},checked?React.createElement(CheckedIcon,{className:disabled?activeIconDisabled:activeIcon}):React.createElement(UncheckedIcon,{className:disabled?inactiveIconDisabled:inactiveIcon}),React.createElement("input",{type:"radio",checked:checked,name:name,className:radio,readOnly:true}),React.createElement("div",{className:content},children));}FulfillmentSelectorItemUnwrapped.defaultProps={disabled:false};export var FulfillmentSelectorItem=React.memo(FulfillmentSelectorItemUnwrapped);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
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 from'react';import PropTypes from'prop-types';import classNames from'classnames';import{RippleButton,I18n}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import{wrapper,inner,innerStandalone,heading,name,button}from"./GlobalLocationSwitcherBar.style";/**
|
|
1
|
+
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;}/* eslint-disable jsx-a11y/aria-role */import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{RippleButton,I18n}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import{wrapper,inner,innerStandalone,heading,name,button}from"./GlobalLocationSwitcherBar.style";/**
|
|
2
2
|
* @returns {JSX}
|
|
3
|
-
*/var GlobalLocationSwitcherBar=function GlobalLocationSwitcherBar(_ref){var locationName=_ref.locationName,handleChange=_ref.handleChange,standalone=_ref.standalone;return React.createElement("div",{className:wrapper},React.createElement("div",{className:classNames(inner,_defineProperty({},innerStandalone,standalone))},React.createElement("span",{className:heading},i18n.text('locations.your_current_location.heading')),React.createElement("span",{className:name},locationName),React.createElement(RippleButton,{onClick:handleChange,type:"secondary",className:button,flat:true},React.createElement(I18n.Text,{string:"locations.your_current_location.change"}))));};GlobalLocationSwitcherBar.defaultProps={standalone:false};export default GlobalLocationSwitcherBar
|
|
3
|
+
*/var GlobalLocationSwitcherBar=function GlobalLocationSwitcherBar(_ref){var locationName=_ref.locationName,handleChange=_ref.handleChange,standalone=_ref.standalone;return React.createElement("div",{className:wrapper},React.createElement("div",{className:classNames(inner,_defineProperty({},innerStandalone,standalone))},React.createElement("span",{role:"text"},React.createElement("span",{className:heading},i18n.text('locations.your_current_location.heading')),React.createElement("span",{className:name},locationName)),React.createElement(RippleButton,{onClick:handleChange,type:"secondary",className:button,"aria-haspopup":true,flat:true},React.createElement(I18n.Text,{string:"locations.your_current_location.change"}))));};GlobalLocationSwitcherBar.defaultProps={standalone:false};export default GlobalLocationSwitcherBar;/* eslint-enable jsx-a11y/aria-role */
|
|
@@ -6,4 +6,4 @@ import React from'react';import{css}from'glamor';import{connect}from'react-redux
|
|
|
6
6
|
* Renders visible stock information based on the given location.
|
|
7
7
|
* @param {Object} props The component props.
|
|
8
8
|
* @return {JSX}
|
|
9
|
-
*/var StockInfoLists=function StockInfoLists(_ref){var preferredLocation=_ref.preferredLocation,product=_ref.product,inventory=_ref.inventory,showStockInfo=_ref.showStockInfo;if(!showStockInfo||!preferredLocation){return null;}var portalProps={inventory:inventory,location:preferredLocation,product:product}
|
|
9
|
+
*/var StockInfoLists=function StockInfoLists(_ref){var preferredLocation=_ref.preferredLocation,product=_ref.product,inventory=_ref.inventory,showStockInfo=_ref.showStockInfo;if(!showStockInfo||!preferredLocation){return null;}var portalProps={inventory:inventory,location:preferredLocation,product:product};/* eslint-disable jsx-a11y/aria-role */return React.createElement(SurroundPortals,{portalName:PRODUCT_LOCATION_STOCK_INFO_LIST,portalProps:portalProps},React.createElement("div",{className:styles.wrapper,role:"text"},React.createElement(PlaceholderLabel,{ready:!!inventory},React.createElement(StockInfo,{product:product,location:preferredLocation}),' ',React.createElement(I18n.Text,{string:"locations.stock_info.pick_up_at",params:{storeName:''},className:styles.text}),' ',React.createElement("span",{className:styles.location},preferredLocation.name))));/* eslint-enable jsx-a11y/aria-role */};StockInfoLists.defaultProps={inventory:null,preferredLocation:null};export default connect(makeMapStateToProps)(StockInfoLists);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React,{useContext}from'react';import{ProductImage}from"../../../product";import{FulfillmentContext}from"../../locations.context";import StoreListProductName from"./StoreListProductName";import StoreListProductInfo from"./StoreListProductInfo";import*as styles from"./StoreListProduct.style";import{SurroundPortals}from"../../../components";import{FULFILLMENT_SHEET_PRODUCT}from"../../constants/Portals";/**
|
|
2
2
|
* Renders the product information of the store list.
|
|
3
3
|
* @returns {JSX}
|
|
4
|
-
*/function StoreListProduct(){var _useContext=useContext(FulfillmentContext),product=_useContext.product;if(!product){return null;}return React.createElement(SurroundPortals,{portalName:FULFILLMENT_SHEET_PRODUCT,portalProps:{product:product}},React.createElement("div",{className:styles.productContainer},React.createElement("div",{className:styles.productContainerInner},React.createElement("div",{className:styles.productImage},React.createElement(ProductImage,{src:product.featuredImageBaseUrl})),React.createElement("div",{className:styles.productContent},React.createElement(StoreListProductName,null),React.createElement(StoreListProductInfo,null)))))
|
|
4
|
+
*/function StoreListProduct(){var _useContext=useContext(FulfillmentContext),product=_useContext.product;if(!product){return null;}/* eslint-disable jsx-a11y/aria-role */return React.createElement(SurroundPortals,{portalName:FULFILLMENT_SHEET_PRODUCT,portalProps:{product:product}},React.createElement("div",{className:styles.productContainer,role:"text"},React.createElement("div",{className:styles.productContainerInner},React.createElement("div",{className:styles.productImage},React.createElement(ProductImage,{src:product.featuredImageBaseUrl})),React.createElement("div",{className:styles.productContent},React.createElement(StoreListProductName,null),React.createElement(StoreListProductInfo,null)))));/* eslint-enable jsx-a11y/aria-role */}export default StoreListProduct;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/engage",
|
|
3
|
-
"version": "7.9.0-beta.
|
|
3
|
+
"version": "7.9.0-beta.7",
|
|
4
4
|
"description": "Shopgate's ENGAGE library.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Shopgate <support@shopgate.com>",
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@shopgate/native-modules": "1.0.0-beta.18",
|
|
19
|
-
"@shopgate/pwa-common": "7.9.0-beta.
|
|
20
|
-
"@shopgate/pwa-common-commerce": "7.9.0-beta.
|
|
21
|
-
"@shopgate/pwa-core": "7.9.0-beta.
|
|
22
|
-
"@shopgate/pwa-ui-ios": "7.9.0-beta.
|
|
23
|
-
"@shopgate/pwa-ui-material": "7.9.0-beta.
|
|
24
|
-
"@shopgate/pwa-ui-shared": "7.9.0-beta.
|
|
19
|
+
"@shopgate/pwa-common": "7.9.0-beta.7",
|
|
20
|
+
"@shopgate/pwa-common-commerce": "7.9.0-beta.7",
|
|
21
|
+
"@shopgate/pwa-core": "7.9.0-beta.7",
|
|
22
|
+
"@shopgate/pwa-ui-ios": "7.9.0-beta.7",
|
|
23
|
+
"@shopgate/pwa-ui-material": "7.9.0-beta.7",
|
|
24
|
+
"@shopgate/pwa-ui-shared": "7.9.0-beta.7",
|
|
25
25
|
"@stripe/react-stripe-js": "^1.1.2",
|
|
26
26
|
"@stripe/stripe-js": "^1.3.1",
|
|
27
27
|
"@virtuous/conductor": "~2.5.0",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
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;}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,{useCallback,useEffect,useState}from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/engage';import{RippleButton,QuantityInput}from'@shopgate/engage/components';var variables=themeConfig.variables,colors=themeConfig.colors;var styles={root:css({display:'flex',flexDirection:'row',position:'relative',zIndex:1000}).toString(),backdrop:css({zIndex:999,top:0,left:0,height:'100%',width:'100%',position:'fixed'}),input:css({padding:"0 ".concat(variables.gap.small,"px"),textAlign:'center',flex:1,fontSize:15,height:28,width:'100%',backgroundColor:"var(--color-background-accent, ".concat(colors.shade8,")")}).toString(),inputWrapper:css({width:'100%'}),button:css({width:28,' &&':{minWidth:28,padding:0},height:28}).toString(),buttonRipple:css({padding:0}).toString(),buttonNoRadiusLeft:css({' &&':{borderTopLeftRadius:0,borderBottomLeftRadius:0}}).toString(),buttonNoRadiusRight:css({' &&':{borderTopRightRadius:0,borderBottomRightRadius:0}}).toString(),disabled:css({' > div':{padding:0}}).toString()};/**
|
|
1
|
+
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;}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,{useCallback,useEffect,useState}from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/engage';import{RippleButton,QuantityInput}from'@shopgate/engage/components';import{broadcastLiveMessage}from'@shopgate/engage/a11y';var variables=themeConfig.variables,colors=themeConfig.colors;var styles={root:css({display:'flex',flexDirection:'row',position:'relative',zIndex:1000}).toString(),backdrop:css({zIndex:999,top:0,left:0,height:'100%',width:'100%',position:'fixed'}),input:css({padding:"0 ".concat(variables.gap.small,"px"),textAlign:'center',flex:1,fontSize:15,height:28,width:'100%',backgroundColor:"var(--color-background-accent, ".concat(colors.shade8,")")}).toString(),inputWrapper:css({width:'100%'}),button:css({width:28,' &&':{minWidth:28,padding:0},height:28}).toString(),buttonRipple:css({padding:0}).toString(),buttonNoRadiusLeft:css({' &&':{borderTopLeftRadius:0,borderBottomLeftRadius:0}}).toString(),buttonNoRadiusRight:css({' &&':{borderTopRightRadius:0,borderBottomRightRadius:0}}).toString(),disabled:css({' > div':{padding:0}}).toString()};/**
|
|
2
2
|
* A Quantity Picker with unit support.
|
|
3
3
|
* @returns {JSX.Element}
|
|
4
|
-
*/var UnitQuantityPicker=function UnitQuantityPicker(_ref){var className=_ref.className,onChange=_ref.onChange,value=_ref.value,allowDecrement=_ref.allowDecrement,allowIncrement=_ref.allowIncrement,allowZero=_ref.allowZero,decrementStep=_ref.decrementStep,incrementStep=_ref.incrementStep,maxDecimals=_ref.maxDecimals,unit=_ref.unit,disabled=_ref.disabled,minValue=_ref.minValue,maxValue=_ref.maxValue;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var handleOnFocus=useCallback(function(){setIsFocused(true);},[]);var handleOnBlur=useCallback(function(){setIsFocused(false);},[]);var handleDecrement=useCallback(function(event){var newValue=value-decrementStep;if(newValue<=0&&!allowZero||minValue&&newValue<minValue){newValue=value;}
|
|
4
|
+
*/var UnitQuantityPicker=function UnitQuantityPicker(_ref){var className=_ref.className,onChange=_ref.onChange,value=_ref.value,allowDecrement=_ref.allowDecrement,allowIncrement=_ref.allowIncrement,allowZero=_ref.allowZero,decrementStep=_ref.decrementStep,incrementStep=_ref.incrementStep,maxDecimals=_ref.maxDecimals,unit=_ref.unit,disabled=_ref.disabled,minValue=_ref.minValue,maxValue=_ref.maxValue;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var handleOnFocus=useCallback(function(){setIsFocused(true);},[]);var handleOnBlur=useCallback(function(){setIsFocused(false);},[]);var handleManualChange=useCallback(function(newValue){onChange(newValue);var message;if(newValue<value){message='product.decreased_quantity_to';}if(newValue>value){message='product.increased_quantity_to';}if(message){broadcastLiveMessage(message,{params:{quantity:newValue}});}},[onChange,value]);var handleDecrement=useCallback(function(event){var newValue=value-decrementStep;if(newValue<=0&&!allowZero||minValue&&newValue<minValue){newValue=value;}handleManualChange(newValue);event.preventDefault();event.stopPropagation();},[allowZero,decrementStep,handleManualChange,minValue,value]);var handleIncrement=useCallback(function(event){var newValue=value+incrementStep;if(maxValue&&newValue>maxValue){newValue=value;}handleManualChange(newValue);event.preventDefault();event.stopPropagation();},[handleManualChange,incrementStep,maxValue,value]);useEffect(function(){if(minValue&&value<minValue){onChange(minValue);}if(maxValue&&value>maxValue){onChange(maxValue);}/* eslint-disable react-hooks/exhaustive-deps */},[]);/* eslint-enable react-hooks/exhaustive-deps */return React.createElement(React.Fragment,null,isFocused&&// Show hidden backdrop when focused to avoid side effects when user blurs the input
|
|
5
5
|
// e.g. opening links unintended
|
|
6
6
|
React.createElement("div",{className:styles.backdrop}),React.createElement("div",{className:"".concat(styles.root," ").concat(className)},React.createElement(RippleButton,{rippleClassName:styles.buttonRipple,className:classNames(styles.button,styles.buttonNoRadiusRight,_defineProperty({},styles.disabled,disabled)),type:"secondary",disabled:!allowDecrement||disabled,onClick:handleDecrement,"aria-label":i18n.text('product.decrease_quantity')},"-"),React.createElement("span",null,React.createElement(QuantityInput,{className:styles.input,value:value,onChange:onChange,maxDecimals:maxDecimals,unit:unit,disabled:disabled,minValue:minValue,maxValue:maxValue,"aria-label":i18n.text('product.quantity'),onFocus:handleOnFocus,onBlur:handleOnBlur})),React.createElement(RippleButton,{type:"secondary",disabled:!allowIncrement||disabled,rippleClassName:styles.buttonRipple,className:classNames(styles.button,styles.buttonNoRadiusLeft,_defineProperty({},styles.disabled,disabled)),onClick:handleIncrement,"aria-label":i18n.text('product.increase_quantity')},"+")));};UnitQuantityPicker.defaultProps={className:'',allowZero:false,allowIncrement:true,allowDecrement:true,incrementStep:0.25,decrementStep:0.25,maxDecimals:2,unit:null,disabled:false,minValue:null,maxValue:null};export default UnitQuantityPicker;
|