@commercelayer/react-components
Version:
The Official Commerce Layer React Components
2 lines • 1.96 kB
JavaScript
"use client";
import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import BaseInput from"../utils/BaseInput";import{useRapidForm}from"rapid-form";import CustomerContext from"../../context/CustomerContext";import{validateValue}from"../../utils/validateFormFields";import OrderContext from"../../context/OrderContext";export function CustomerInput(props){const{name="customer_email",placeholder="",required=!0,saveOnBlur=!1,type="email",value,onBlur,className,errorClassName,...p}=props,{validation,values,errors,setError}=useRapidForm({fieldEvent:"blur"}),{saveCustomerUser,setCustomerErrors,setCustomerEmail}=useContext(CustomerContext),{setOrderErrors}=useContext(OrderContext),[hasError,setHasError]=useState(!1),handleOnBlur=async e=>{const v=e?.target?.value,checkValue=validateValue(v,name,type,"orders"),isValid=Object.keys(checkValue).length===0;if(saveOnBlur&&Object.keys(values).length>0&&saveCustomerUser!=null&&(await saveCustomerUser(values[name].value),onBlur&&onBlur(values[name].value)),!isValid){const currentError={...checkValue,name:checkValue?.field};setError(currentError)}};useEffect(()=>{if(Object.keys(errors).length>0){const formErrors=[];for(const fieldName in errors){const code=errors[fieldName]?.code,message=errors[fieldName]?.message;formErrors.push({code,message:message||"",resource:"orders",field:fieldName})}formErrors.length>0&&(setHasError(!0),setCustomerErrors&&setCustomerErrors(formErrors))}else setCustomerErrors&&setCustomerErrors([]),setOrderErrors&&setOrderErrors([]),setHasError(!1);return Object.keys(values).length>0&&setCustomerEmail&&setCustomerEmail(values[name].value),()=>{setHasError(!1)}},[errors]);const classNameComputed=`${className??""} ${hasError&&errorClassName?errorClassName:""}`;return _jsx(BaseInput,{name,type,ref:validation,required,placeholder,defaultValue:value,onBlur:e=>{handleOnBlur(e)},className:classNameComputed,...p})}export default CustomerInput;