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

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

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