@shopgate/engage/locations/components/ReserveForm/ReserveForm.js

Shopgate's ENGAGE library.

import _regeneratorRuntime from"@babel/runtime/regenerator";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 _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{hot}from'react-hot-loader/root';import'react-phone-number-input/style.css';import React,{useState,useContext,useMemo,useRef,useLayoutEffect,useCallback,Fragment}from'react';import{TextField,RippleButton,RadioGroup,RadioGroupItem,ProgressBar}from'@shopgate/engage/components';import{useFormState}from"../../../core/hooks/useFormState";import{i18n}from"../../../core/helpers/i18n";import{FulfillmentContext}from"../../locations.context";import{ReserveFormPhone}from"./ReserveFormPhone";import{constraints}from"./ReserveForm.constraints";import{form,fieldset,formField,formHeading,pickerSwitch,pickerItem,button,progressBar}from"./ReserveForm.style";var PICKUP_PERSON_ME='me';var PICKUP_PERSON_OTHER='someoneelse';/**
 * Determines the pick up person.
 * @param {Object} userInput The current user input
 * @return {string}
 */var determinePickupPerson=function determinePickupPerson(userInput){if(!userInput){return PICKUP_PERSON_ME;}var meFields=['firstName','lastName','email','cellPhone'];var otherFields=['firstName2','lastName2','email2','cellPhone2'];var hasMeFields=meFields.every(function(field){return typeof userInput[field]!=='undefined';});var hasOtherFields=otherFields.every(function(field){return typeof userInput[field]!=='undefined';});if(!hasOtherFields||!hasMeFields){return PICKUP_PERSON_ME;}var valuesEqual=meFields.every(function(field,index){return userInput[field]===userInput[otherFields[index]];});return valuesEqual?PICKUP_PERSON_ME:PICKUP_PERSON_OTHER;};/**
 * Renders the quick reservation form.
 * @returns {JSX}
 */function ReserveFormUnwrapped(){var _useContext=useContext(FulfillmentContext),sendReservation=_useContext.sendReservation,userInput=_useContext.userInput;var _useState=useState(determinePickupPerson(userInput)),_useState2=_slicedToArray(_useState,2),picker=_useState2[0],setPicker=_useState2[1];var defaultState={firstName:'',lastName:'',cellPhone:'',email:'',firstName2:'',lastName2:'',cellPhone2:'',email2:''};var validationConstraints=useMemo(function(){return _extends({},constraints,{},picker===PICKUP_PERSON_OTHER&&{firstName2:constraints.firstName,lastName2:constraints.lastName,cellPhone2:constraints.cellPhone,email2:constraints.email});},[picker]);var initialState=userInput?_extends({},defaultState,{},userInput):defaultState;/**
   * @param {Object} values The form values.
   */var complete=useCallback(/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values){var response;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:response=values;if(picker===PICKUP_PERSON_ME){response.firstName2=response.firstName;response.lastName2=response.lastName;response.cellPhone2=response.cellPhone;response.email2=response.email;}else{response.firstName2=response.firstName2||response.firstName;response.lastName2=response.lastName2||response.lastName;response.cellPhone2=response.cellPhone2||response.cellPhone;response.email2=response.email2||response.email;}_context.next=4;return sendReservation(response);case 4:case"end":return _context.stop();}},_callee);}));return function(_x){return _ref.apply(this,arguments);};}(),[picker,sendReservation]);var _useFormState=useFormState(initialState,complete,validationConstraints),values=_useFormState.values,handleChange=_useFormState.handleChange,handleSubmit=_useFormState.handleSubmit,changed=_useFormState.changed,valid=_useFormState.valid,_useFormState$validat=_useFormState.validationErrors,validationErrors=_useFormState$validat===void 0?{}:_useFormState$validat,isSubmitting=_useFormState.isSubmitting;var someoneElseRef=useRef(null);useLayoutEffect(function(){if(someoneElseRef.current&&picker===PICKUP_PERSON_OTHER){someoneElseRef.current.scrollIntoView({behavior:'smooth'});}},[picker,someoneElseRef]);return React.createElement(Fragment,null,React.createElement("div",{className:progressBar},React.createElement(ProgressBar,{isVisible:isSubmitting})),React.createElement("form",{onSubmit:handleSubmit,className:form},React.createElement("fieldset",{className:fieldset},React.createElement(TextField,{name:"firstName",value:values.firstName,onChange:handleChange,label:i18n.text('locations.firstName'),className:formField,errorText:i18n.text(validationErrors.firstName)}),React.createElement(TextField,{name:"lastName",value:values.lastName,onChange:handleChange,label:i18n.text('locations.lastName'),className:formField,errorText:i18n.text(validationErrors.lastName)}),React.createElement(ReserveFormPhone,{name:"cellPhone",value:values.cellPhone,onChange:handleChange,label:i18n.text('locations.cellPhone'),errorText:i18n.text(validationErrors.cellPhone)}),React.createElement(TextField,{name:"email",value:values.email,onChange:handleChange,label:i18n.text('locations.emailAddress'),className:formField,errorText:i18n.text(validationErrors.email)})),React.createElement("p",{className:formHeading},i18n.text('locations.who_will_pickup')),React.createElement("div",{className:pickerSwitch},React.createElement(RadioGroup,{name:"picker",direction:"row",value:picker,onChange:setPicker},React.createElement(RadioGroupItem,{label:i18n.text('locations.me'),name:PICKUP_PERSON_ME,className:pickerItem}),React.createElement(RadioGroupItem,{label:i18n.text('locations.someone_else'),name:PICKUP_PERSON_OTHER,className:pickerItem}))),picker===PICKUP_PERSON_OTHER&&React.createElement("fieldset",{className:fieldset,ref:someoneElseRef},React.createElement(TextField,{name:"firstName2",value:values.firstName2,onChange:handleChange,label:i18n.text('locations.firstName'),className:formField,errorText:i18n.text(validationErrors.firstName2)}),React.createElement(TextField,{name:"lastName2",value:values.lastName2,onChange:handleChange,label:i18n.text('locations.lastName'),className:formField,errorText:i18n.text(validationErrors.lastName2)}),React.createElement(ReserveFormPhone,{name:"cellPhone2",value:values.cellPhone2,onChange:handleChange,label:i18n.text('locations.cellPhone'),errorText:i18n.text(validationErrors.cellPhone2)}),React.createElement(TextField,{name:"email2",value:values.email2,onChange:handleChange,label:i18n.text('locations.emailAddress'),className:formField,errorText:i18n.text(validationErrors.email2)})),React.createElement(RippleButton,{type:"secondary",disabled:changed||valid===false||isSubmitting,className:button},i18n.text('locations.place_reservation'))));}export var ReserveForm=hot(ReserveFormUnwrapped);