@shopgate/engage/favorites/components/CommentDialog/CommentDialog.js

Shopgate's ENGAGE library.

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');/**
 * @param {Object} state State.
 * @returns {Object}
 */var mapStateToProps=function mapStateToProps(state){return{settings:getCommentDialogSettings(state)};};/**
 * @param {Object} dispatch Dispatch.
 * @returns {Object}
 */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;/**
 * @param {Object} props Props.
 * @returns {JSX}
 */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
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)
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);