@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.
192 lines (191 loc) • 8.25 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] = "6ade2815-f29d-4669-855f-f2fb17ef6bc9", e._sentryDebugIdIdentifier = "sentry-dbid-6ade2815-f29d-4669-855f-f2fb17ef6bc9");
} catch (e) {}
import { o as createLogger, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { n as httpGet, s as useApiContext } from "./http-D1NDkBxF.js";
import { a as drop } from "./useAnalyticsContext-BVFDMrVE.js";
import { S as isUndefinedOrNull } from "./validatorUtils-DRapRJ6z.js";
import { s as isDateOlderThanAYear } from "./Address-D5EL-3iQ.js";
import { t as Field } from "./Field-pcJkjIG_.js";
import { t as Select } from "./Select-CcSRI-H0.js";
import { r as InputBase, t as InputText } from "./InputText-C30dZxS4.js";
import { t as currencyByCountry } from "./types-qnPNJzLh.js";
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
import { jsx } from "preact/jsx-runtime";
import { useQuery } from "@tanstack/preact-query";
//#region src/components/Business/forms/FinancialInformation/mapping/mapFinancialInformationToFinancialReport.ts
var mapFinancialInformationToFinancialReport = ({ currency, financialReportingDate, numberOfEmployees, balanceSheetTotal, annualTurnover }, dateOfIncorporation) => {
if (dateOfIncorporation && !isDateOlderThanAYear(dateOfIncorporation)) return { employeeCount: typeof numberOfEmployees === "number" ? numberOfEmployees.toFixed(0) : numberOfEmployees };
return {
currencyOfFinancialData: currency,
dateOfFinancialData: financialReportingDate,
employeeCount: typeof numberOfEmployees === "number" ? numberOfEmployees.toFixed(0) : numberOfEmployees,
balanceSheetTotal: balanceSheetTotal?.toFixed(2) ?? void 0,
annualTurnover: annualTurnover?.toFixed(2) ?? void 0
};
};
//#endregion
//#region src/components/Business/forms/FinancialInformation/mapping/mapFinancialReportsToFinancialInformation.ts
var mapFinancialReportsToFinancialInformation = (financialReports, withReportedValueOption = true) => {
if (financialReports.length === 0) throw new Error("No financial reports");
const mostRecentReport = financialReports.reduce((latest, curr) => {
if (curr?.dateOfFinancialData && latest?.dateOfFinancialData && curr?.dateOfFinancialData > latest?.dateOfFinancialData) return curr;
return latest;
}, financialReports[0]);
const financialInfo = {
numberOfEmployees: mostRecentReport.employeeCount ? parseInt(mostRecentReport.employeeCount) : void 0,
financialReportingDate: mostRecentReport.dateOfFinancialData,
currency: mostRecentReport.currencyOfFinancialData
};
if (mostRecentReport.balanceSheetTotal !== void 0) {
financialInfo.reportedValueOption = "balanceSheetTotal";
financialInfo.balanceSheetTotal = parseFloat(mostRecentReport.balanceSheetTotal);
}
if (mostRecentReport.annualTurnover !== void 0) {
financialInfo.reportedValueOption = "annualTurnover";
financialInfo.annualTurnover = parseFloat(mostRecentReport.annualTurnover);
}
return withReportedValueOption ? financialInfo : drop("reportedValueOption").from(financialInfo);
};
//#endregion
//#region src/api/datasets/useLegalForms.ts
var getLegalForms = async (countryCode, baseUrl) => {
return httpGet({
baseUrl,
path: `datasets/legalForms/${countryCode}`
});
};
var useLegalForms = (countryCode, options) => {
const { baseUrl } = useApiContext();
return useQuery({
queryKey: ["legalForms", countryCode],
queryFn: () => getLegalForms(countryCode, baseUrl.value),
...options
});
};
//#endregion
//#region src/components/EFP/fields/LegalFormField/LegalFormField.tsx
function LegalFormField({ name = "legalForm", data, valid, errorMessage, label, readonly, handleChangeFor, countryCode }) {
const { t: commonT } = useTranslation("common");
const { data: legalFormsData } = useLegalForms(countryCode);
const handleChangeForRef = useRef(handleChangeFor);
useEffect(() => {
handleChangeForRef.current = handleChangeFor;
}, [handleChangeFor]);
const handleChangeForLegalForm = useCallback((e) => {
const legalFormEvent = { target: {
name: "legalForm",
value: e.target.value
} };
handleChangeFor("legalForm")(legalFormEvent);
}, [handleChangeFor]);
useEffect(() => {
const legalFormEvent = { target: {
name: "legalFormLabel",
value: legalFormsData?.find((legalForm) => legalForm.id === data.legalForm)?.name
} };
handleChangeForRef.current("legalFormLabel")(legalFormEvent);
}, [data.legalForm, legalFormsData]);
return /* @__PURE__ */ jsx(Field, {
name,
label: label || commonT(($) => $["businessStructure"]),
errorMessage,
isValid: valid.legalForm,
children: (childProps) => /* @__PURE__ */ jsx(Select, {
...childProps,
name,
placeholder: commonT(($) => $["selectOne"]),
selected: data.legalForm,
items: legalFormsData ?? [],
readonly: readonly && !!data,
onChange: handleChangeForLegalForm
})
});
}
//#endregion
//#region src/components/ui/molecules/InputCurrency/InputCurrency.tsx
var logger = createLogger();
var determineDecimalSeparator = (formatter) => formatter.formatToParts(.1).find((part) => part.type === "decimal").value;
var determineCurrencySymbol = (formatter) => formatter.formatToParts(0).find((part) => part.type === "currency").value;
var getNumberFromFormattedCurrency = (formatted, decimalSeparator) => {
const lastDecimalIndex = formatted.lastIndexOf(decimalSeparator);
const normalized = Array.from(formatted).reduce((acc, curr, i) => {
if (/[0-9]/.test(curr)) return acc + curr;
if (i === lastDecimalIndex) return `${acc}.`;
return acc;
}, "");
return parseFloat(normalized);
};
var InputCurrency = ({ locale, currency, amount, onAmountChanged, ...baseProps }) => {
const formatter = useMemo(() => new Intl.NumberFormat(locale, {
style: "currency",
currency
}), [locale, currency]);
const decimalSeparator = useMemo(() => determineDecimalSeparator(formatter), [formatter]);
const currencySymbol = useMemo(() => determineCurrencySymbol(formatter), [formatter]);
const [text, setText] = useState("");
const onInput = (e) => {
setText(e.currentTarget.value);
};
const onBlur = (e) => {
const rawValue = e.currentTarget.value;
const value = getNumberFromFormattedCurrency(rawValue, decimalSeparator);
if (Number.isNaN(value)) {
logger.warn(`Unable to get number from formatted currency: "${rawValue}"`);
setText(isUndefinedOrNull(amount) ? currencySymbol : formatter.format(amount));
return;
}
onAmountChanged(value);
};
useEffect(() => {
setText(isUndefinedOrNull(amount) ? currencySymbol : formatter.format(amount));
}, [
amount,
currencySymbol,
formatter
]);
return /* @__PURE__ */ jsx(InputText, {
...baseProps,
value: text,
onInput,
onBlur
});
};
//#endregion
//#region src/components/ui/molecules/InputNumber/InputNumber.tsx
function InputNumber(props) {
return /* @__PURE__ */ jsx(InputBase, {
...props,
type: "number"
});
}
//#endregion
//#region src/components/Shared/fields/Currency/Currency.tsx
var CURRENCY_FIELD = ["currency"];
function Currency({ data, valid, errors, labels, readonly, handleChangeFor, country }) {
const { t } = useTranslation("common");
const currenciesForCurrCountry = currencyByCountry[country];
const countryCurrenciesItems = currenciesForCurrCountry ? currenciesForCurrCountry.map((currency) => ({
id: currency,
name: currency
})) : [];
return /* @__PURE__ */ jsx(Field, {
name: "currency",
label: labels.currency,
errorMessage: errors.currency,
isValid: valid.currency,
dataTestId: "currency",
children: (childProps) => /* @__PURE__ */ jsx(Select, {
...childProps,
onChange: handleChangeFor("currency", "blur"),
name: "currency",
placeholder: t(($) => $["currencyPlaceholder"]),
selected: data.currency,
items: countryCurrenciesItems,
readonly: readonly && !!data.currency
})
});
}
//#endregion
export { LegalFormField as a, InputCurrency as i, Currency as n, mapFinancialReportsToFinancialInformation as o, InputNumber as r, mapFinancialInformationToFinancialReport as s, CURRENCY_FIELD as t };