@adyen/kyc-components
Version:
This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.
321 lines (320 loc) • 12.2 kB
JavaScript
try {
let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "4de360a1-ed1d-40db-a1de-499ad239f6eb", e._sentryDebugIdIdentifier = "sentry-dbid-4de360a1-ed1d-40db-a1de-499ad239f6eb");
} catch (e) {}
import { i as Typography, o as createLogger, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { n as httpGet, s as useApiContext } from "./http-D1NDkBxF.js";
import { s as noop, t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as useToggleContext } from "./useToggleContext-DaQUBF8O.js";
import { t as StackLayout } from "./StackLayout-Bhbj68nx.js";
import { t as CountryCodes } from "./country-code-CX5KqMBr.js";
import { t as List } from "./List-DLrcpMVd.js";
import { c as nonInputs, l as numericInputs, s as makeMask, t as MaskedInput } from "./MaskedInput-BFPSwRto.js";
import { t as JP_ADDRESS_REQUIRED_FIELDS } from "./jpAddressSchema-BQTiMBSQ.js";
import { n as addressValidationRulesV4, t as addressValidationRules } from "./validate-qd_17no4.js";
import { t as Field } from "./Field-pcJkjIG_.js";
import { r as useDebouncedCallback } from "./debouncedInputEvent-Dxv4-RAv.js";
import { t as convertFullToHalf } from "./formFieldsUtils-CR7j1k8e.js";
import { t as useForm } from "./useForm-pUkvCLc9.js";
import { t as InputText } from "./InputText-C30dZxS4.js";
import { t as toFullWidth } from "./toFullWidth-CSa3Sffs.js";
import { t as Spacer } from "./Spacer-CvT0ELty.js";
import { useEffect, useState } from "preact/hooks";
import { jsx, jsxs } from "preact/jsx-runtime";
import { useQuery } from "@tanstack/preact-query";
//#region src/api/address/useRetrieveFromPostcodeJp.ts
var retrieveFromPostcodeJp = async (legalEntityId, baseUrl, postalCode) => httpGet({
baseUrl,
path: `legalEntities/${legalEntityId}/addresses/jp/${postalCode}`
});
var useRetrieveFromPostcodeJp = (postalCode, options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
return useQuery({
queryKey: ["retrieveAddress", postalCode],
queryFn: () => retrieveFromPostcodeJp(rootLegalEntityId.value, baseUrl.value, postalCode),
retry: false,
...options
});
};
var ReadonlyTextField_module_default = { noWrap: "adyen-kyc-noWrap" };
//#endregion
//#region src/components/Shared/forms/Address/localized/jp/ReadonlyTextField.tsx
var ReadonlyTextField = ({ name, label, value }) => /* @__PURE__ */ jsx(Field, {
name,
label,
className: ReadonlyTextField_module_default.noWrap,
children: (innerProps) => /* @__PURE__ */ jsx(InputText, {
...innerProps,
name,
type: "text",
value,
onInput: noop,
readonly: true
})
});
var JpAddress_module_default = {
"side-by-side": "adyen-kyc-side-by-side",
sideBySide: "adyen-kyc-side-by-side",
"jp-field": "adyen-kyc-jp-field",
jpField: "adyen-kyc-jp-field"
};
//#endregion
//#region src/components/Shared/forms/Address/localized/jp/JpAddress.tsx
var logger = createLogger();
var JpAddress = ({ addressType, data: dataProp, handleFieldChange, errors: propErrors, valid: propValid, fieldValidationErrors: propFieldValidationErrors, onChange }) => {
const { t } = useTranslation("common");
const { isFeatureEnabled } = useToggleContext();
const userEvents = useAnalyticsContext();
const form = useForm({
schema: JP_ADDRESS_REQUIRED_FIELDS,
defaultData: dataProp,
rules: isFeatureEnabled("StrictNameAndAddressValidationV4") ? addressValidationRulesV4(CountryCodes.Japan, t, isFeatureEnabled) : addressValidationRules(CountryCodes.Japan),
fieldProblems: propFieldValidationErrors
});
let { handleChangeFor, data: formData, errors: formErrors, valid: formValid, fieldProblems: formFieldProblems } = form;
const { isValid: formIsValid } = form;
if (handleFieldChange) {
handleChangeFor = handleFieldChange;
formData = dataProp ?? {};
formErrors = propErrors;
formValid = propValid;
formFieldProblems = propFieldValidationErrors;
}
const [postcodeToSearch, setPostcodeToSearch] = useState(formData.postalCode ?? "");
const debouncedSetPostcodeToSearch = useDebouncedCallback(setPostcodeToSearch, 1e3);
const retrieveFromPostcodeQuery = useRetrieveFromPostcodeJp(postcodeToSearch, { enabled: postcodeToSearch !== "" });
useEffect(() => {
if (retrieveFromPostcodeQuery.error) {
logger.error(retrieveFromPostcodeQuery.error.message);
handleChangeFor("jaHaniStateOrProvince")(void 0);
handleChangeFor("jaHaniCity")(void 0);
handleChangeFor("jaKanaStateOrProvince")(void 0);
handleChangeFor("jaKanaCity")(void 0);
handleChangeFor("stateOrProvince")(void 0);
handleChangeFor("city")(void 0);
return;
}
if (!retrieveFromPostcodeQuery.data) return;
userEvents.addPageEvent("Success", {
actionType: "select",
actionLevel: "field",
returnType: "backend",
returnValue: "retrieveAddress"
});
const scriptResults = retrieveFromPostcodeQuery.data.multilocale;
if (!scriptResults) return;
const jaHani = scriptResults.find((script) => script.locale === "ja-Hani");
const jaKana = scriptResults.find((script) => script.locale === "ja-Kana");
const en = scriptResults.find((script) => script.locale === "en");
if (jaHani) {
handleChangeFor("jaHaniStateOrProvince")(jaHani.stateOrProvince);
handleChangeFor("jaHaniCity")(jaHani.city);
}
if (jaKana) {
handleChangeFor("jaKanaStateOrProvince")(jaKana.stateOrProvince);
handleChangeFor("jaKanaCity")(jaKana.city);
}
if (en) {
handleChangeFor("stateOrProvince")(en.stateOrProvince);
handleChangeFor("city")(en.city);
}
}, [
retrieveFromPostcodeQuery.data,
retrieveFromPostcodeQuery.error,
userEvents
]);
useEffect(() => {
onChange?.({
schema: JP_ADDRESS_REQUIRED_FIELDS,
data: {
...formData,
country: CountryCodes.Japan
},
errors: formErrors,
valid: formValid,
fieldProblems: formFieldProblems,
isValid: formIsValid
});
}, [
formData,
formErrors,
formFieldProblems,
formIsValid,
formValid
]);
const handleOtherAddressInformationFullWidth = {
input: (e) => {
handleChangeFor("otherAddressInformationFullWidth", "input")(e);
handleChangeFor("otherAddressInformation", "input")({
...e,
target: {
...e.target,
value: convertFullToHalf(e.target.value)
}
});
},
blur: (e) => {
handleChangeFor("otherAddressInformationFullWidth", "blur")(e);
handleChangeFor("otherAddressInformation", "blur")({
...e,
target: {
...e.target,
value: convertFullToHalf(e.target.value)
}
});
}
};
return /* @__PURE__ */ jsxs("fieldset", { children: [
/* @__PURE__ */ jsx(Typography, {
el: "legend",
variant: "title",
children: t(($) => $[addressType])
}),
/* @__PURE__ */ jsx(MaskedInput, {
name: "postalCode",
type: "text",
label: t(($) => $.postalCode),
value: formData.postalCode ?? "",
isValid: formValid.postalCode,
errorMessage: formErrors.postalCode?.errorMessage ?? formErrors.postalCode?.hasError,
onInput: (value) => {
handleChangeFor("postalCode", "input")(value);
debouncedSetPostcodeToSearch(value);
},
onBlur: handleChangeFor("postalCode", "blur"),
mask: makeMask(...numericInputs(3), ...nonInputs(" - "), ...numericInputs(4)),
formatGuidance: t(($) => $.enterNDigitsForExample, {
numDigits: "7",
example: "530-0001"
})
}),
/* @__PURE__ */ jsxs(StackLayout, {
gap: "medium",
children: [
/* @__PURE__ */ jsx(List, {
dividers: false,
variant: "grouped-primary",
children: /* @__PURE__ */ jsxs("fieldset", { children: [
/* @__PURE__ */ jsx(Typography, {
el: "legend",
variant: "body-strongest",
children: t(($) => $.kanjiAddress)
}),
/* @__PURE__ */ jsxs(StackLayout, {
horizontal: true,
children: [/* @__PURE__ */ jsx(ReadonlyTextField, {
name: "jaHaniStateOrProvince",
label: t(($) => $.prefecture),
value: formData.jaHaniStateOrProvince
}), /* @__PURE__ */ jsx(ReadonlyTextField, {
name: "jaHaniCity",
label: t(($) => $.districtTownAreaCityWard),
value: formData.jaHaniCity
})]
}),
/* @__PURE__ */ jsxs(StackLayout, {
horizontal: true,
children: [/* @__PURE__ */ jsx(Field, {
className: JpAddress_module_default.jpField,
name: "otherAddressInformationFullWidth",
label: t(($) => $.chomeAndBanchi),
isValid: formValid.otherAddressInformation,
errorMessage: formErrors.otherAddressInformation?.errorMessage ?? formErrors.otherAddressInformation?.hasError,
children: (childProps) => /* @__PURE__ */ jsx(InputText, {
...childProps,
value: formData.otherAddressInformationFullWidth ?? toFullWidth(formData.otherAddressInformation ?? ""),
onInput: handleOtherAddressInformationFullWidth.input,
onBlur: handleOtherAddressInformationFullWidth.blur,
transformInput: toFullWidth,
transformMode: "blur"
})
}), /* @__PURE__ */ jsx(Spacer, {})]
}),
/* @__PURE__ */ jsx(Field, {
className: JpAddress_module_default.jpField,
name: "jaHaniAddress",
label: t(($) => $.buildingNameFloorRoomNumberEtc),
isValid: formValid.jaHaniAddress,
errorMessage: formErrors.jaHaniAddress?.errorMessage ?? formErrors.jaHaniAddress?.hasError,
children: (childProps) => /* @__PURE__ */ jsx(InputText, {
...childProps,
onInput: handleChangeFor("jaHaniAddress", "input"),
value: formData.jaHaniAddress,
transformInput: toFullWidth,
transformMode: "blur"
})
})
] })
}),
/* @__PURE__ */ jsx(List, {
dividers: false,
variant: "grouped-primary",
children: /* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx(Typography, {
el: "legend",
variant: "body-strongest",
children: t(($) => $.katakanaAddress)
}), /* @__PURE__ */ jsxs(StackLayout, {
horizontal: true,
children: [/* @__PURE__ */ jsx(ReadonlyTextField, {
name: "jaKanaStateOrProvince",
label: t(($) => $.prefecture),
value: formData.jaKanaStateOrProvince
}), /* @__PURE__ */ jsx(ReadonlyTextField, {
name: "jaKanaCity",
label: t(($) => $.districtTownAreaCityWard),
value: formData.jaKanaCity
})]
})] })
}),
/* @__PURE__ */ jsx(List, {
dividers: false,
variant: "grouped-primary",
children: /* @__PURE__ */ jsxs("fieldset", { children: [
/* @__PURE__ */ jsx(Typography, {
el: "legend",
variant: "body-strongest",
children: t(($) => $.romajiAddress)
}),
/* @__PURE__ */ jsxs(StackLayout, {
horizontal: true,
children: [/* @__PURE__ */ jsx(ReadonlyTextField, {
name: "stateOrProvince",
label: t(($) => $.prefecture),
value: formData.stateOrProvince
}), /* @__PURE__ */ jsx(ReadonlyTextField, {
name: "city",
label: t(($) => $.districtTownAreaCityWard),
value: formData.city
})]
}),
/* @__PURE__ */ jsxs(StackLayout, {
horizontal: true,
children: [/* @__PURE__ */ jsx(ReadonlyTextField, {
name: "otherAddressInformation",
label: t(($) => $.chomeAndBanchi),
value: formData.otherAddressInformation
}), /* @__PURE__ */ jsx(Spacer, {})]
}),
/* @__PURE__ */ jsx(Field, {
className: JpAddress_module_default.jpField,
name: "address",
label: t(($) => $.buildingNameFloorRoomNumberEtc),
isValid: formValid.address,
errorMessage: formErrors.address?.errorMessage ?? formErrors.address?.hasError,
children: (childProps) => /* @__PURE__ */ jsx(InputText, {
...childProps,
onInput: handleChangeFor("address", "input"),
onBlur: handleChangeFor("address", "blur"),
value: formData.address,
transformInput: (value) => convertFullToHalf(value),
transformMode: "blur"
})
})
] })
})
]
})
] });
};
//#endregion
export { JpAddress };