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

Shopgate's ENGAGE library.

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*as React from'react';import classnames from'classnames';import{i18n}from'@shopgate/engage/core';import{parsePhoneNumber}from'react-phone-number-input';import PhoneInput from'react-phone-number-input/mobile';import{getCountries}from'react-phone-number-input/input';import en from'react-phone-number-input/locale/en';import de from'react-phone-number-input/locale/de';import es from'react-phone-number-input/locale/es';import fr from'react-phone-number-input/locale/fr';import pt from'react-phone-number-input/locale/pt';import flags from'react-phone-number-input/flags';import TextField from'@shopgate/pwa-ui-shared/TextField';import{useCountriesNames}from'@shopgate/engage/i18n';import{FulfillmentContext}from"../../locations.context";import{formField,phoneField,phoneFieldError,phoneFieldErrorText}from"./ReserveForm.style";import connect from"./ReserveFormPhone.connector";var builtInCountries=getCountries();var locales={en:en,de:de,es:es,fr:fr,pt:pt};/**
 * Renders the reserve form phone input maybe with country selection.
 * @param {Object} props The component props.
 * @returns {JSX.Element}
 */var ReserveFormPhoneUnwrapped=React.memo(function(props){var name=props.name,value=props.value,onChange=props.onChange,label=props.label,errorText=props.errorText,userLocation=props.userLocation;var _React$useContext=React.useContext(FulfillmentContext),shopSettings=_React$useContext.shopSettings,userInput=_React$useContext.userInput;var initialValue=React.useMemo(function(){return userInput&&userInput[name]?userInput[name]:'';},[name,userInput]);var supportedCountries=React.useMemo(function(){return shopSettings?shopSettings.supportedCountries:[];},[shopSettings]);var countries=React.useMemo(function(){if(!supportedCountries){return builtInCountries;}var sortedCountries=[].concat(builtInCountries);var sanitizedSupportedCountries=supportedCountries.map(function(country){var pieces=country.split('_');return pieces[0];});sanitizedSupportedCountries.forEach(function(country){sortedCountries.splice(sortedCountries.indexOf(country),1);});return[].concat(sanitizedSupportedCountries,sortedCountries);},[supportedCountries]);var countriesNames=useCountriesNames(supportedCountries,locales);var labels=React.useMemo(function(){var output={};if(!countries){return output;}countries.forEach(function(key){var pieces=key.split('_');output[pieces[0]]=countriesNames[key];});return output;},[countries,countriesNames]);var defaultCountry=React.useMemo(function(){if(!initialValue&&!value&&userLocation){return userLocation.country;}var phoneNumber=parsePhoneNumber(value||'');if(phoneNumber&&phoneNumber.country){return phoneNumber.country;}if(userLocation){return userLocation.country;}return i18n.getLang().split('-')[1];},[initialValue,userLocation,value]);var handleChange=React.useCallback(function(phoneValue){onChange(phoneValue,{target:{name:name}});},[name,onChange]);var phoneClasses=classnames(_defineProperty(_defineProperty({},phoneField,true),phoneFieldError,!!errorText));if(!countries||countries.length===0){return React.createElement(TextField,{name:name,value:value,onChange:onChange,label:label,className:formField,errorText:errorText});}return React.createElement("div",{className:phoneClasses},React.createElement(PhoneInput,{defaultCountry:defaultCountry,addInternationalOption:false,flags:flags,name:name,value:value||'',onChange:handleChange,placeholder:label,countries:countries,labels:labels}),!!errorText&&React.createElement("div",{className:phoneFieldErrorText},errorText));});export var ReserveFormPhone=connect(ReserveFormPhoneUnwrapped);