@commercelayer/react-components
Version:
The Official Commerce Layer React Components
2 lines • 4.36 kB
JavaScript
"use client";
import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useMemo,useState}from"react";import BaseSelect from"../utils/BaseSelect";import BillingAddressFormContext from"../../context/BillingAddressFormContext";import ShippingAddressFormContext from"../../context/ShippingAddressFormContext";import isEmpty from"lodash/isEmpty";import{getStateOfCountry,isValidState}from"../../utils/countryStateCity";import AddressesContext from"../../context/AddressContext";import BaseInput from"../utils/BaseInput";import CustomerAddressFormContext from"../../context/CustomerAddressFormContext";export function AddressStateSelector(props){const{required=!1,value,name,className="",inputClassName="",inputPlaceholder,selectClassName="",selectPlaceholder,states,...p}=props,billingAddress=useContext(BillingAddressFormContext),shippingAddress=useContext(ShippingAddressFormContext),customerAddress=useContext(CustomerAddressFormContext),{errors:addressErrors}=useContext(AddressesContext),[hasError,setHasError]=useState(!1),[countryCode,setCountryCode]=useState(""),[val,setVal]=useState(value??""),stateOptions=useMemo(()=>isEmpty(countryCode)?[]:getStateOfCountry({countryCode,states}),[states,countryCode]),isEmptyStates=useMemo(()=>()=>isEmpty(stateOptions),[stateOptions]);useEffect(()=>{const billingCountryCode=typeof billingAddress?.values?.billing_address_country_code=="string"?billingAddress?.values?.billing_address_country_code:billingAddress?.values?.billing_address_country_code?.value;billingCountryCode&&billingCountryCode!==countryCode&&setCountryCode(billingCountryCode);const shippingCountryCode=typeof shippingAddress?.values?.shipping_address_country_code=="string"?shippingAddress?.values?.shipping_address_country_code:shippingAddress?.values?.shipping_address_country_code?.value;shippingCountryCode&&shippingCountryCode!==countryCode&&setCountryCode(shippingCountryCode);const changeBillingCountry=[Object.keys(billingAddress).length>0,billingCountryCode,countryCode!==billingCountryCode].every(Boolean);!changeBillingCountry&&value!=null&&value!==""&&value!==val&&(billingAddress.setValue!=null&&billingAddress?.setValue(name,value),setVal(value)),changeBillingCountry&&billingCountryCode&&!isValidState({stateCode:val??"",countryCode:billingCountryCode,states})&&!isEmptyStates()&&(billingAddress.resetField&&billingAddress?.resetField(name),setVal(""));const changeShippingCountry=[!isEmpty(shippingAddress),shippingCountryCode,countryCode!==shippingCountryCode].every(Boolean);if(!changeShippingCountry&&value!=null&&value!==""&&value!==val&&(shippingAddress.setValue!=null&&shippingAddress?.setValue(name,value),setVal(value)),changeShippingCountry&&shippingCountryCode&&!isValidState({stateCode:val??"",countryCode:shippingCountryCode,states})&&!isEmptyStates()&&(shippingAddress.resetField&&shippingAddress?.resetField(name),setVal("")),!isEmpty(billingAddress)){const fieldError=billingAddress?.errors?.[name]?.error;setHasError(!!fieldError)}if(!isEmpty(customerAddress)){const fieldError=customerAddress?.errors?.[name]?.error;setHasError(!!fieldError)}if(!isEmpty(shippingAddress)){const fieldError=shippingAddress?.errors?.[name]?.error;setHasError(!!fieldError)}return()=>{setHasError(!1)}},[value,billingAddress?.values?.billing_address_country_code,shippingAddress?.values?.shipping_address_country_code,addressErrors,customerAddress]);const errorClassName=billingAddress?.errorClassName||shippingAddress?.errorClassName||customerAddress?.errorClassName||"",classNameComputed=isEmptyStates()?`${className} ${inputClassName} ${hasError?errorClassName:""}`:`${className} ${selectClassName} ${hasError?errorClassName:""}`;return isEmptyStates()?_jsx(BaseInput,{...p,name,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,className:classNameComputed,required,placeholder:inputPlaceholder??"",defaultValue:val,type:"text",onChange:e=>{setVal(e.target.value),billingAddress.setValue!=null&&billingAddress.setValue(name,e.target.value),shippingAddress.setValue!=null&&shippingAddress.setValue(name,e.target.value)}}):_jsx(BaseSelect,{...p,placeholder:selectPlaceholder,className:classNameComputed,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,required,options:stateOptions,name,value:val})}export default AddressStateSelector;