@shopgate/engage/account/components/ProfileContact/ProfileContact.js

Shopgate's ENGAGE library.

import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}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 _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);}import React,{useMemo,useCallback,useRef}from'react';import{connect}from'react-redux';import PropTypes from'prop-types';import{css}from'glamor';import{i18n,useRoute,historyPop,getNumberOfAddressLines}from'@shopgate/engage/core';import{convertValidationErrors,useFormState}from'@shopgate/engage/core/hooks/useFormState';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{getShopSettings}from'@shopgate/engage/core/config';import{getPreferredLocationAddress}from'@shopgate/engage/locations/selectors';import{FormBuilder,RippleButton}from'@shopgate/engage/components';import{StylePresets}from'@shopgate/engage/components/Form';import{LoadingProvider}from'@shopgate/pwa-common/providers';import{useAddressBook}from'@shopgate/engage/checkout';import{generateFormConfig}from"./ProfileContact.config";import{generateConstraints}from"./ProfileContact.constraints";import{addCustomerContacts}from"../../actions/addContacts";import{getCustomer}from"../../selectors/customer";import{updateCustomerContact}from"../../actions/updateContact";/**
 * @param {Object} state State
 * @returns {Object}
 */var mapStateToProps=function mapStateToProps(state){return{shopSettings:getShopSettings(state),userLocation:getPreferredLocationAddress(state),customer:getCustomer(state),numberOfAddressLines:getNumberOfAddressLines(state)};};/**
 * @param {Object} dispatch Dispatch
 * @returns {Object}
 */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{pop:function pop(props){return dispatch(historyPop(props));},addContact:function addContact(contact){return dispatch(addCustomerContacts({contacts:[contact]}));},updateContact:function updateContact(contactId,contact){return dispatch(updateCustomerContact({contactId:contactId,contact:contact}));}};};var styles={root:css({margin:16}),form:css(_extends({},StylePresets.OUTLINED_FORM_FIELDS,{},StylePresets.TWO_COLUMN_LAYOUT,{' .profileAddressFormRegion':_defineProperty({},responsiveMediaQuery('>=md',{webOnly:false}),{marginRight:'50%'})})).toString(),button:css({'&&':_defineProperty({marginTop:8,marginRight:16,backgroundColor:'var(--color-primary)',borderRadius:5,fontSize:14,textTransform:'none',padding:0},responsiveMediaQuery('<md',{webOnly:false}),{width:'100%',marginRight:0})}).toString(),ripple:css({padding:'8px 16px'}).toString(),actions:css(_defineProperty({display:'flex',justifyContent:'flex-end',flexDirection:'row'},responsiveMediaQuery('<md',{webOnly:false}),{flex:1})).toString()};/**
 * @param {Object} props Props.
 * @returns {JSX}
 */var ProfileContact=function ProfileContact(_ref){var shopSettings=_ref.shopSettings,userLocation=_ref.userLocation,addContact=_ref.addContact,updateContact=_ref.updateContact,pop=_ref.pop,customer=_ref.customer,numberOfAddressLines=_ref.numberOfAddressLines;var _useAddressBook=useAddressBook(),updateOrderWithContact=_useAddressBook.updateOrderWithContact,type=_useAddressBook.type,isCheckout=_useAddressBook.isCheckout;var formContainerRef=useRef(null);var _useRoute=useRoute(),pathname=_useRoute.pathname,_useRoute$state$conta=_useRoute.state.contact,contact=_useRoute$state$conta===void 0?{}:_useRoute$state$conta;var addressLines=useMemo(function(){/**
     * Determine the number of address fields with a value. Customers are supposed to edit their
     * old addresses after the numberOfAddressLines shop setting was changed.
     */var addressLinesInContact=Object.keys(contact).reduce(function(acc,key){if(key.startsWith('address')&&contact[key]){return parseInt(key.charAt(key.length-1),10);}return acc;},0);return Math.max(numberOfAddressLines,addressLinesInContact);},[contact,numberOfAddressLines]);var formConfig=useMemo(function(){return generateFormConfig({supportedCountries:shopSettings===null||shopSettings===void 0?void 0:shopSettings.supportedCountries,countrySortOrder:shopSettings===null||shopSettings===void 0?void 0:shopSettings.countrySortOrder,userLocation:userLocation,isCheckout:isCheckout,type:type,numberOfAddressLines:addressLines});},[addressLines,isCheckout,shopSettings,type,userLocation]);var constraints=useMemo(function(){return generateConstraints(isCheckout);},[isCheckout]);var handleSubmit=useCallback(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values){var contactId,finalValues,fieldsUpdated,_ref3,_ref3$contactIds;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:LoadingProvider.setLoading(pathname);contactId=contact.id;finalValues=_extends({},values,{},isCheckout&&!(contact===null||contact===void 0?void 0:contact.emailAddress)?{emailAddress:customer===null||customer===void 0?void 0:customer.emailAddress}:{});fieldsUpdated=Object.keys(values).filter(function(key){return!['isDefaultBilling','isDefaultShipping'].includes(key);}).some(function(key){return values[key]!==contact[key];});_context.prev=4;if(!(contact===null||contact===void 0?void 0:contact.id)){_context.next=10;break;}_context.next=8;return updateContact(contact.id,finalValues);case 8:_context.next=15;break;case 10:_context.next=12;return addContact(finalValues);case 12:_ref3=_context.sent;_ref3$contactIds=_slicedToArray(_ref3.contactIds,1);contactId=_ref3$contactIds[0];case 15:if(!(updateOrderWithContact&&fieldsUpdated)){_context.next=19;break;}_context.next=18;return updateOrderWithContact(contactId);case 18:return _context.abrupt("return");case 19:pop();_context.next=24;break;case 22:_context.prev=22;_context.t0=_context["catch"](4);case 24:LoadingProvider.unsetLoading(pathname);case 25:case"end":return _context.stop();}},_callee,null,[[4,22]]);}));return function(_x){return _ref2.apply(this,arguments);};}(),[addContact,contact,customer,isCheckout,pathname,pop,updateContact,updateOrderWithContact]);var formState=useFormState(contact,handleSubmit,constraints,formContainerRef);var validationErrors=useMemo(function(){return convertValidationErrors(formState.validationErrors||{});},[formState.validationErrors]);/* eslint-disable react-hooks/exhaustive-deps */var handleUpdate=useCallback(function(values){formState.setValues(values);},[formState.setValues]);/* eslint-enable react-hooks/exhaustive-deps */return React.createElement("div",{className:styles.root,ref:formContainerRef},React.createElement(FormBuilder,{name:"ProfileAddressForm",className:styles.form,config:formConfig,defaults:contact,validationErrors:validationErrors,handleUpdate:handleUpdate}),React.createElement("div",{className:styles.actions},React.createElement(RippleButton,{className:styles.button,rippleClassName:styles.ripple,type:"primary",onClick:formState.handleSubmit},i18n.text('account.profile.form.save'))));};ProfileContact.defaultProps={customer:null,numberOfAddressLines:null};export default connect(mapStateToProps,mapDispatchToProps)(ProfileContact);