@adyen/adyen-web/dist/es/components/internal/PersonalDetails/PersonalDetails.js

[](https://www.npmjs.com/package/@adyen/adyen-web)

import{createElement as e,Fragment as r}from"../../../external/preact/dist/preact.js";import{useRef as a,useMemo as s,useEffect as t}from"../../../external/preact/hooks/dist/hooks.js";import l from"../FormFields/Fieldset/Fieldset.js";import i from"../FormFields/Field/Field.js";import o from"./ReadOnlyPersonalDetails.js";import{personalDetailsValidationRules as m}from"./validate.js";import{useCoreContext as n}from"../../../core/Context/CoreProvider.js";import{checkDateInputSupport as d}from"../FormFields/InputDate/utils.js";import{getFormattedData as p}from"./utils.js";import u from"../../../utils/useForm/useForm.js";import f from"../FormFields/InputText.js";import h from"../FormFields/RadioGroup/RadioGroup.js";import c from"../FormFields/InputDate/InputDate.js";import N from"../FormFields/InputEmail.js";import g from"../FormFields/InputTelephone.js";import{getErrorMessage as b}from"../../../utils/getErrorMessage.js";const F=["firstName","lastName","gender","dateOfBirth","shopperEmail","telephoneNumber"];function M(F){const{label:M="",namePrefix:E,placeholders:j,requiredFields:B,visibility:O}=F,{i18n:v}=n(),I=a({});Object.keys(I.current).length||F.setComponentRef?.(I.current);const C=s(d,[]),{handleChangeFor:q,triggerValidation:R,data:x,valid:D,errors:k,isValid:y}=u({schema:B,rules:{...m,...F.validationRules},defaultData:F.data});I.current.showValidation=()=>{R()};const P=e=>r=>{const{name:a}=r.target,s=a.split(`${E}.`).pop();q(s,e)(r)},V=e=>`${E?`${E}.`:""}${e}`;return t((()=>{const e=p(x);F.onChange({data:e,valid:D,errors:k,isValid:y})}),[x,D,k,y]),"hidden"===O?null:"readOnly"===O?e(o,{...F,data:x}):e(r,null,e(l,{classNameModifiers:["personalDetails"],label:M},B.includes("firstName")&&e(i,{label:v.get("firstName"),classNameModifiers:["col-50","firstName"],errorMessage:b(v,k.firstName,v.get("firstName")),name:"firstName",i18n:v},e(f,{name:V("firstName"),value:x.firstName,classNameModifiers:["firstName"],onInput:P("input"),onBlur:P("blur"),placeholder:j.firstName,spellCheck:!1,required:!0})),B.includes("lastName")&&e(i,{label:v.get("lastName"),classNameModifiers:["col-50","lastName"],errorMessage:b(v,k.lastName,v.get("lastName")),name:"lastName",i18n:v},e(f,{name:V("lastName"),value:x.lastName,classNameModifiers:["lastName"],onInput:P("input"),onBlur:P("blur"),placeholder:j.lastName,spellCheck:!1,required:!0})),B.includes("gender")&&e(i,{errorMessage:b(v,k.gender),classNameModifiers:["gender"],name:"gender",useLabelElement:!1},e(h,{name:V("gender"),value:x.gender,items:[{id:"MALE",name:"male"},{id:"FEMALE",name:"female"}],classNameModifiers:["gender"],onInput:P("input"),onChange:P("blur"),required:!0})),B.includes("dateOfBirth")&&e(i,{label:v.get("dateOfBirth"),classNameModifiers:["col-50","dateOfBirth"],errorMessage:b(v,k.dateOfBirth,v.get("dateOfBirth")),helper:C?null:v.get("dateOfBirth.format"),name:"dateOfBirth",i18n:v},e(c,{name:V("dateOfBirth"),value:x.dateOfBirth,classNameModifiers:["dateOfBirth"],onInput:P("input"),onBlur:P("blur"),placeholder:j.dateOfBirth,required:!0})),B.includes("shopperEmail")&&e(i,{label:v.get("shopperEmail"),classNameModifiers:["shopperEmail"],errorMessage:b(v,k.shopperEmail,v.get("shopperEmail")),dir:"ltr",name:"emailAddress",i18n:v},e(N,{name:V("shopperEmail"),value:x.shopperEmail,classNameModifiers:["shopperEmail"],onInput:P("input"),onBlur:P("blur"),placeholder:j.shopperEmail,required:!0})),B.includes("telephoneNumber")&&e(i,{label:v.get("telephoneNumber"),classNameModifiers:["telephoneNumber"],errorMessage:b(v,k.telephoneNumber,v.get("telephoneNumber")),dir:"ltr",name:"telephoneNumber",i18n:v},e(g,{name:V("telephoneNumber"),value:x.telephoneNumber,classNameModifiers:["telephoneNumber"],onInput:P("input"),onBlur:P("blur"),placeholder:j.telephoneNumber,required:!0}))))}M.defaultProps={data:{},onChange:()=>{},placeholders:{},requiredFields:F,validationRules:m,visibility:"editable"};export{F as PERSONAL_DETAILS_SCHEMA,M as default};
//# sourceMappingURL=PersonalDetails.js.map