@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.
481 lines (480 loc) • 22.1 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] = "1fe689e4-40c1-49e1-b888-54e1edbb7679", e._sentryDebugIdIdentifier = "sentry-dbid-1fe689e4-40c1-49e1-b888-54e1edbb7679");
} catch (e) {}
import { a as Icon, i as Typography, n as addResourceBundles, o as createLogger, r as useTranslation, t as Trans } from "./translation-BFxyJ1c5.js";
import { n as IconButton, r as Loader, t as Button } from "./Button-oj6H8OrC.js";
import { n as httpGet, s as useApiContext } from "./http-D1NDkBxF.js";
import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-yxi9XhLi.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { y as isEmpty } from "./validatorUtils-DRapRJ6z.js";
import { t as _rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper-rq_tsyLP.js";
import { n as TASK_STATUS_POLLING_INTERVAL_MS } from "./taskStatus-C7XU4UIF.js";
import { t as Header } from "./Header-CPmJyuoP.js";
import { t as Alert } from "./Alert-C6gL3JIt.js";
import { t as useTaskStatus } from "./useTaskStatus-PqBc0I7k.js";
import { t as Card } from "./Card-vYndix5Y.js";
import { t as useInvalidateRootLegalEntity } from "./invalidateRootLegalEntity-CZr0iiji.js";
import { t as Image } from "./Image-BEzOZ1tt.js";
import { t as useUpdateLegalEntity } from "./useUpdateLegalEntity-CtaRaKZ6.js";
import { n as FormFlow, r as FormContextProvider, t as useFormContext } from "./useFormContext-Cx9-3iXR.js";
import { i as useFormComposer, n as getRequiredForms, t as addValidityToForms } from "./dropinUtils-IdasFZCU.js";
import { t as StructuredList } from "./StructuredList-w0Z2zLTk.js";
import { t as useMultiForm } from "./useMultiForm-B3e1ImN3.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-DInxWeqN.js";
import { t as Field } from "./Field-pcJkjIG_.js";
import { t as LandingLayout } from "./LandingLayout-z8j2xiqg.js";
import { n as getFormProps } from "./getProps-CkZCnNxW.js";
import { t as Link } from "./Link-6M1PZnz2.js";
import { t as RadioGroup } from "./RadioGroup-7g7Xv9rl.js";
import { t as isEmpty$1 } from "./isEmpty-Dw2W8jeR.js";
import { lazy } from "preact/compat";
import { useCallback as useCallback$1, useEffect as useEffect$1, useMemo as useMemo$1, useState as useState$1 } from "preact/hooks";
import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
import { signal } from "@preact/signals";
import { useQuery } from "@tanstack/preact-query";
//#region src/api/taxClassification/useTaxClassification.ts
var getTaxClassification = async (legalEntityId, baseUrl) => {
return httpGet({
baseUrl,
path: `legalEntities/${legalEntityId}/taxclassification`
});
};
/**
* @param options additional options passed to Tanstack Query, eg; refetchInterval for polling
*/
var useTaxClassification = (options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
return useQuery({
queryKey: ["taxClassification"],
queryFn: () => getTaxClassification(rootLegalEntityId.value, baseUrl.value),
...options
});
};
//#endregion
//#region src/components/EFP/tasks/TaxReportingDropin/taxClassificationStore.ts
var taxClassificationErrorMessage = signal(void 0);
var setTaxClassificationErrorMessage = (message) => {
taxClassificationErrorMessage.value = message;
};
var clearTaxClassificationErrorMessage = () => {
taxClassificationErrorMessage.value = void 0;
};
var TaxReporting_module_default = {
"tax-reporting-dropin": "adyen-kyc-tax-reporting-dropin",
taxReportingDropin: "adyen-kyc-tax-reporting-dropin",
"text-center": "adyen-kyc-text-center",
textCenter: "adyen-kyc-text-center",
"radio-caption": "adyen-kyc-radio-caption",
radioCaption: "adyen-kyc-radio-caption",
"tax-reporting-dropin-getting-started": "adyen-kyc-tax-reporting-dropin-getting-started",
taxReportingDropinGettingStarted: "adyen-kyc-tax-reporting-dropin-getting-started",
"tax-reporting-dropin-form-container": "adyen-kyc-tax-reporting-dropin-form-container",
taxReportingDropinFormContainer: "adyen-kyc-tax-reporting-dropin-form-container",
subtitle: "adyen-kyc-subtitle",
summary: "adyen-kyc-summary",
"summary-tax-status-card--header": "adyen-kyc-summary-tax-status-card--header",
summaryTaxStatusCardHeader: "adyen-kyc-summary-tax-status-card--header",
"summary-tax-status-card--body": "adyen-kyc-summary-tax-status-card--body",
summaryTaxStatusCardBody: "adyen-kyc-summary-tax-status-card--body"
};
//#endregion
//#region src/components/EFP/tasks/TaxReportingDropin/utils.tsx
var taxReportingForms = { taxClassification: {
formId: "taxClassification",
formName: "chooseATaxReportingClassificationOption",
fields: ["type"]
} };
var taxReportingRequiredFields = { taxClassification: ["type"] };
var taxReportingOptions = {
nonFinancialActive: "yourBusinessReceivesTheMajorityOfItsIncomeThroughActiveIncome",
nonFinancialPassive: "yourBusinessGeneratesMoreThanHalfOfItsRevenueAsPassiveIncome",
nonFinancialNonReportable: "yourBusinessIsAPublicListedEntity",
financialNonReportable: "yourBusinessIsAFinancialInstitution"
};
var getTaxStatusSummary = (t, taxReportingClassification) => {
const taxStatusDescription = taxReportingClassification?.taxClassification?.type ? taxReportingClassification.taxClassification.type : void 0;
return taxStatusDescription ? [{
term: t(($) => $["status"]),
details: t(($) => $[taxStatusDescription])
}, {
term: t(($) => $["description"]),
details: t(($) => $[taxReportingOptions[taxStatusDescription]])
}] : [];
};
var getTaxOptionsRadioItems = (t, taxRecommendationData, taxReportingClassification) => {
const businessType = taxRecommendationData?.businessType;
const allowedTaxReportingOptionKeys = getSupportedTaxClassificationTypes(businessType).filter((key) => key in taxReportingOptions);
const taxOptionsWithoutRecommendationKeys = allowedTaxReportingOptionKeys.filter((key) => key !== taxRecommendationData?.type);
return (taxRecommendationData?.type && !taxReportingClassification?.type ? taxOptionsWithoutRecommendationKeys : allowedTaxReportingOptionKeys).map((key) => {
const value = taxReportingOptions[key];
return {
id: key,
name: t(($) => $[key]),
content: /* @__PURE__ */ jsx(Typography, {
variant: "body",
color: "secondary",
className: TaxReporting_module_default.radioCaption,
children: t(($) => $[value])
})
};
});
};
var getRecommendedTaxOptionsRadioItems = (t, showRecommendation, taxRecommendationData) => {
const taxRecommendationType = taxRecommendationData?.type ? taxRecommendationData.type : void 0;
return showRecommendation && taxRecommendationType ? [{
id: taxRecommendationType,
name: t(($) => $[taxRecommendationType]),
content: /* @__PURE__ */ jsx(Typography, {
variant: "body",
color: "secondary",
className: TaxReporting_module_default.radioCaption,
children: t(($) => $[taxReportingOptions[taxRecommendationType]])
})
}] : [];
};
var getSupportedTaxClassificationTypes = (businessType) => {
const publicCompanyTypes = [
"listedPublicCompany",
"subsidiaryOfListedPublicCompany",
"governmentalOrganization",
"internationalOrganization"
];
if (!businessType) return [];
if (publicCompanyTypes.includes(businessType)) return ["nonFinancialNonReportable"];
if (businessType === "financialInstitution") return ["financialNonReportable"];
else if (businessType === "other") return ["nonFinancialActive", "nonFinancialPassive"];
else return [];
};
//#endregion
//#region src/components/EFP/tasks/TaxReportingDropin/TaxReportingClassificationForm.tsx
function TaxReportingClassificationForm({ data, taxReportingClassification, taxRecommendationData, errors }) {
const { t: taxReportingT } = useTranslation("taxReporting");
const { t: commonT } = useTranslation("common");
const { form } = useFormContext();
const { handleChangeFor } = form;
const showRecommendation = taxRecommendationData?.type && !taxReportingClassification?.type;
const taxOptionsRadioItems = getTaxOptionsRadioItems(taxReportingT, taxRecommendationData, taxReportingClassification);
const recommendedTaxOptionRadioItems = getRecommendedTaxOptionsRadioItems(taxReportingT, showRecommendation, taxRecommendationData);
const handleFieldChange = (fieldName, mode) => handleChangeFor(fieldName, "taxClassification", mode);
const typeErrorMessage = errors?.type?.errorMessage;
return /* @__PURE__ */ jsxs("form", {
className: "tax-reporting",
children: [
/* @__PURE__ */ jsx(Header, {
title: taxReportingT(($) => $["taxStatusSelfCertification"]),
children: /* @__PURE__ */ jsx(Trans, {
slot: "description",
t: commonT,
i18nKey: ($) => $["chooseTheTaxStatusWhichBestRepresentsYourBusiness"],
components: {
el1: /* @__PURE__ */ jsx(Link, {
inline: true,
external: true,
href: "https://www.irs.gov/businesses/corporations/foreign-account-tax-compliance-act-fatca#:~:text=The%20Foreign%20Account%20Tax%20Compliance,to%20withholding%20on%20withholdable%20payments.",
children: "text"
}),
el2: /* @__PURE__ */ jsx(Link, {
inline: true,
external: true,
href: "https://www.oecd.org/en/publications/standard-for-automatic-exchange-of-financial-account-information-in-tax-matters-second-edition_9789264267992-en.html",
children: "text"
})
}
})
}),
typeErrorMessage && /* @__PURE__ */ jsx(Alert, {
variant: "error",
title: commonT(($) => $[typeErrorMessage])
}),
showRecommendation ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
/* @__PURE__ */ jsx(Typography, {
variant: "body-stronger",
children: taxReportingT(($) => $["recommendedForYourBusiness"])
}),
/* @__PURE__ */ jsx(Field, {
el: "fieldset",
name: "type",
children: (childProps) => /* @__PURE__ */ jsx(RadioGroup, {
...childProps,
name: "type",
items: recommendedTaxOptionRadioItems,
value: data?.type,
onChange: handleFieldChange("type", "input")
})
}),
taxOptionsRadioItems.length ? /* @__PURE__ */ jsx(Typography, {
variant: "body-stronger",
children: commonT(($) => $[taxOptionsRadioItems.length === 1 ? "other" : "otherOptions"])
}) : null
] }) : null,
/* @__PURE__ */ jsx(Field, {
el: "fieldset",
name: "type",
children: (childProps) => /* @__PURE__ */ jsx(RadioGroup, {
...childProps,
name: "type",
items: taxOptionsRadioItems,
value: data?.type,
onChange: handleFieldChange("type", "input")
})
})
]
});
}
//#endregion
//#region src/components/EFP/tasks/TaxReportingDropin/TaxReporting.tsx
var taxClassificationFormID = taxReportingForms.taxClassification.formId;
function TaxReporting(props) {
const { form } = useFormContext();
const { errors, valid, fieldProblems: fieldValidationErrors } = form;
const { activeForm: propActiveForm, taxReportingClassification, taxRecommendationData } = props;
const classificationFormProps = getFormProps(props, taxClassificationFormID);
const renderActiveForm = (activeForm) => /* @__PURE__ */ jsx(Fragment$1, { children: activeForm?.formId === taxClassificationFormID && /* @__PURE__ */ jsx("div", {
className: TaxReporting_module_default.taxReportingDropinFormContainer,
children: /* @__PURE__ */ jsx(TaxReportingClassificationForm, {
...classificationFormProps,
taxReportingClassification,
taxRecommendationData,
errors: errors?.taxClassification,
valid: valid?.taxClassification,
fieldValidationErrors: fieldValidationErrors?.taxClassification
})
}) });
return /* @__PURE__ */ jsxs("div", {
className: "tax-reporting",
children: [taxClassificationErrorMessage.value && /* @__PURE__ */ jsxs(Typography, {
variant: "caption",
color: "critical",
"aria-live": "polite",
className: "adyen-kyc-u-justify-content-center adyen-kyc-u-display-flex",
children: [
/* @__PURE__ */ jsx(Icon, { name: "field-error" }),
" ",
/* @__PURE__ */ jsx("div", { children: taxClassificationErrorMessage.value })
]
}), renderActiveForm(propActiveForm)]
});
}
//#endregion
//#region src/components/EFP/tasks/TaxReportingDropin/TaxReportingGettingStarted.tsx
var usCheckAccount = lazy(() => import("./tax-reporting-graph-C96BPKuj.js"));
var TaxReportingGettingStarted = ({ handleToggleFormVisible, handleCancelClick, taxReportingClassification }) => {
const { t: taxReportingT } = useTranslation("taxReporting");
const { t: commonT } = useTranslation("common");
const { data: normalizedTasks } = useTaskStatus({ refetchInterval: TASK_STATUS_POLLING_INTERVAL_MS });
const hasTaxReportingClassification = !isEmpty$1(taxReportingClassification?.taxClassification?.type);
const taxStatusSummary = getTaxStatusSummary(taxReportingT, taxReportingClassification);
return /* @__PURE__ */ jsxs("div", {
className: TaxReporting_module_default.taxReportingDropinGettingStarted,
children: [!hasTaxReportingClassification && /* @__PURE__ */ jsx(LandingLayout, {
media: /* @__PURE__ */ jsx(Image, { lazyLoadedImage: usCheckAccount }),
title: taxReportingT(($) => $["taxStatusSelfCertification"]),
description: taxReportingT(($) => $["toUnderstandIfYourBankAccountDetailsAreReportable"]),
actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
fullWidth: true,
onClick: handleToggleFormVisible,
children: commonT(($) => $["getStarted"])
}), handleCancelClick && /* @__PURE__ */ jsx(Button, {
variant: "tertiary",
onClick: handleCancelClick,
fullWidth: true,
children: commonT(($) => $["backToTaskList"])
})] })
}), hasTaxReportingClassification && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Header, {
title: taxReportingT(($) => $["selfCertifiedTaxStatus"]),
description: taxReportingT(($) => $["noFurtherActionOrRecertificationIsNeeded"]),
status: normalizedTasks?.TAX_REPORTING?.status,
align: "center"
}), /* @__PURE__ */ jsx("div", {
className: TaxReporting_module_default.summary,
children: /* @__PURE__ */ jsxs(Card, {
variant: "secondary",
children: [/* @__PURE__ */ jsxs("div", {
className: TaxReporting_module_default.summaryTaxStatusCardHeader,
children: [/* @__PURE__ */ jsx(Typography, {
el: "h3",
variant: "title",
children: taxReportingT(($) => $["taxStatus"])
}), /* @__PURE__ */ jsx(IconButton, {
ariaLabel: "edit",
icon: "edit",
onClick: handleToggleFormVisible,
variant: "tertiary"
})]
}), /* @__PURE__ */ jsx("div", {
className: TaxReporting_module_default.summaryTaxStatusCardBody,
children: /* @__PURE__ */ jsx(StructuredList, {
className: TaxReporting_module_default.summaryTaxStatusCardDescription,
items: taxStatusSummary
})
})]
})
})] }), handleCancelClick && /* @__PURE__ */ jsx(Button, {
variant: "secondary",
testId: "source-of-funds-getting-return-button",
onClick: handleCancelClick,
children: commonT(($) => $["backToTaskList"])
})] })]
});
};
//#endregion
//#region src/components/EFP/tasks/TaxReportingDropin/validate.ts
var taxReportingTypeValidations = { type: {
modes: ["blur"],
validate: (type) => !isEmpty(type),
errorMessage: "chooseATaxStatusOptionToContinue"
} };
//#endregion
//#region src/components/EFP/tasks/TaxReportingDropin/TaxReportingDropin.tsx
var logger = createLogger();
function TaxReportingDropin({ problems, handleHomeClick }) {
const [loadingStatus, setLoadingStatus] = useState$1("success");
const [formVisible, setFormVisible] = useState$1(false);
const invalidateRootLegalEntity = useInvalidateRootLegalEntity();
const { i18n } = useTranslation();
const { t: taxReportingT } = useTranslation("taxReporting");
addResourceBundles(i18n, [{
ns: "taxReporting",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"./language/bg-BG.json": () => import("./bg-BG-BTLje0t8.js"),
"./language/cs-CZ.json": () => import("./cs-CZ-CKjEL0Uh.js"),
"./language/da-DK.json": () => import("./da-DK-C_3U-U_o.js"),
"./language/de-DE.json": () => import("./de-DE-BijX4bA6.js"),
"./language/el-GR.json": () => import("./el-GR-DKvfOcBT.js"),
"./language/en-US.json": () => import("./en-US-Cq8S64a_.js"),
"./language/es-ES.json": () => import("./es-ES-DadFxwkn.js"),
"./language/et-EE.json": () => import("./et-EE-BM23BrCu.js"),
"./language/fi-FI.json": () => import("./fi-FI-B78n6HpV.js"),
"./language/fr-FR.json": () => import("./fr-FR-D0u4AlOp.js"),
"./language/hr-HR.json": () => import("./hr-HR-mQCFA1Pe.js"),
"./language/hu-HU.json": () => import("./hu-HU-BcBrcjkc.js"),
"./language/it-IT.json": () => import("./it-IT-V8vgqucm.js"),
"./language/ja-JP.json": () => import("./ja-JP-D9ybdRsh.js"),
"./language/lt-LT.json": () => import("./lt-LT-DTo_g5gi.js"),
"./language/lv-LV.json": () => import("./lv-LV-C6cnH9ql.js"),
"./language/nl-NL.json": () => import("./nl-NL-QXgi4Sal.js"),
"./language/no-NO.json": () => import("./no-NO-A94R5Tff.js"),
"./language/pl-PL.json": () => import("./pl-PL-AswdD27E.js"),
"./language/pt-BR.json": () => import("./pt-BR-1V6vMfTg.js"),
"./language/pt-PT.json": () => import("./pt-PT-B9BU6WeF.js"),
"./language/ro-RO.json": () => import("./ro-RO-0Q2YJfJD.js"),
"./language/sk-SK.json": () => import("./sk-SK-CCluvyNF.js"),
"./language/sl-SI.json": () => import("./sl-SI-Bm_KKlP6.js"),
"./language/sv-SE.json": () => import("./sv-SE-BKeJolFs.js")
}), `./language/${lang}.json`, 3)
}]);
const { data: taxRecommendationData, isLoading: isLoadingTaxRecommendationData } = useTaxClassification();
const userEvents = useAnalyticsContext();
const { data: legalEntityData, isLoading } = useLegalEntity(ROOT_LE);
const { mutateAsync: updateLegalEntityMutation } = useUpdateLegalEntity();
useEffect$1(() => {
clearTaxClassificationErrorMessage();
}, []);
/**
* Analytics
*/
useTaskLandedEvent("TAX_REPORTING");
const taxReportingClassification = useMemo$1(() => ({ taxClassification: { type: legalEntityData?.organization?.taxReportingClassification?.type } }), [legalEntityData?.organization?.taxReportingClassification?.type]);
const defaultData = useMemo$1(() => ({ ...taxReportingClassification }), [taxReportingClassification]);
const form = useMultiForm({
requiredFields: taxReportingRequiredFields,
rules: { taxClassification: taxReportingTypeValidations },
defaultData
});
const { data = taxReportingClassification, setData, triggerValidation } = form;
useEffect$1(() => {
if (!data?.taxClassification?.type && taxReportingClassification?.taxClassification?.type) {
setData("type", taxReportingClassification?.taxClassification?.type, "taxClassification");
(async () => {
await triggerValidation("taxClassification");
})().catch(() => console.error("Error triggering validation"));
}
}, [
data?.taxClassification?.type,
taxReportingClassification?.taxClassification?.type,
setData,
triggerValidation
]);
const forms = useMemo$1(() => {
return addValidityToForms(getRequiredForms(taxReportingForms, taxReportingRequiredFields, void 0).filter((form) => form.formId !== "summary"), form.isValid, problems);
}, [form.isValid, problems]);
const handleSubmit = useCallback$1(async () => {
if (!legalEntityData) return;
setLoadingStatus("loading");
const taxReportingPayload = {
businessType: taxRecommendationData?.businessType,
financialInstitutionNumber: taxRecommendationData?.financialInstitutionNumber,
mainSourceOfIncome: taxRecommendationData?.mainSourceOfIncome,
type: data?.taxClassification?.type
};
const legalEntityPayload = {
id: legalEntityData.id,
...legalEntityData?.organization && { organization: {
...legalEntityData.organization,
taxReportingClassification: taxReportingPayload
} }
};
try {
await updateLegalEntityMutation(legalEntityPayload);
await invalidateRootLegalEntity();
userEvents.addTaskEvent("Success", {
actionType: "submit",
returnValue: data?.taxClassification?.type
});
handleHomeClick?.();
setFormVisible(false);
gotoFormByFormIndex(0);
setTaxClassificationErrorMessage("");
setLoadingStatus("success");
} catch (e) {
setTaxClassificationErrorMessage(e?.message || taxReportingT(($) => $["errorUpdatingTaxClassification"]));
logger.log("Error updating tax reporting dropin", e);
setLoadingStatus("success");
}
}, [
data,
taxRecommendationData,
legalEntityData,
updateLegalEntityMutation
]);
const handleToggleFormVisible = () => {
setFormVisible(!formVisible);
};
const { handleNextClick, activeForm, gotoFormByFormIndex, gotoFormByFormId, steps } = useFormComposer({
problems,
forms,
onSubmit: handleSubmit
});
return /* @__PURE__ */ jsx("div", {
className: TaxReporting_module_default.taxReportingDropin,
children: isLoading || isLoadingTaxRecommendationData ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!formVisible && /* @__PURE__ */ jsx(TaxReportingGettingStarted, {
handleCancelClick: handleHomeClick,
handleToggleFormVisible,
taxReportingClassification,
problems: legalEntityData?.problems
}), formVisible && /* @__PURE__ */ jsx(FormContextProvider, {
form,
children: /* @__PURE__ */ jsx(FormFlow, {
forms,
activeForm,
gotoFormByFormIndex,
gotoFormByFormId,
handleBackClick: handleToggleFormVisible,
handleCancelClick: handleHomeClick,
handleNextClick,
loadingStatus,
currentStep: steps.current,
totalSteps: steps.total,
children: /* @__PURE__ */ jsx(TaxReporting, {
taxReportingClassification: taxReportingClassification?.taxClassification,
taxRecommendationData,
activeForm,
data
})
})
})] })
});
}
//#endregion
export { TaxReportingDropin };