@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.
475 lines (474 loc) • 22.3 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] = "dd5037f6-4eb7-4247-8bec-b9e7ec3ab596", e._sentryDebugIdIdentifier = "sentry-dbid-dd5037f6-4eb7-4247-8bec-b9e7ec3ab596");
} catch (e) {}
import { a as Icon, c as __exportAll, i as Typography, n as addResourceBundles, o as createLogger, r as useTranslation, t as Trans } from "./translation-BYvhW5zA.js";
import { A as _rolldown_dynamic_import_helper_default, k as Header, nt as isEmpty, x as Alert } from "./resolveEnvironment-DNmu53Rr.js";
import { n as IconButton, r as Loader, t as Button } from "./Button-i8I2dHP8.js";
import { n as httpGet, s as useApiContext } from "./http-8qgzqVqk.js";
import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-CtlUQv_J.js";
import { n as TASK_STATUS_POLLING_INTERVAL_MS } from "./taskStatus-BtekPA8E.js";
import { t as TaskTypes } from "./taskTypes-NawDTp5n.js";
import { t as Card } from "./Card-BCGLpdw7.js";
import { i as useAnalyticsContext } from "./Modal-BLP2aF-u.js";
import { t as useInvalidateRootLegalEntity } from "./invalidateRootLegalEntity-DLpPeD5p.js";
import { n as Image } from "./unincorporated-partnership-nnTW3FnG.js";
import { t as useUpdateLegalEntity } from "./useUpdateLegalEntity-B0XYfxbB.js";
import { i as FormFlow, n as addValidityToForms, o as useFormComposer, r as getRequiredForms, s as FormContextProvider, t as useFormContext } from "./useFormContext-CYHfY4k5.js";
import { t as StructuredList } from "./StructuredList-CUyo9-3i.js";
import { t as useMultiForm } from "./useMultiForm-ducdUyQ6.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-BXtOctC4.js";
import { t as Field } from "./Field-DoXLi6EY.js";
import { t as LandingLayout } from "./LandingLayout-CUAkXrpL.js";
import { n as getFormProps } from "./getProps-1L-urpfA.js";
import { t as Link } from "./Link-JFzfaUOa.js";
import { t as RadioGroup } from "./RadioGroup-qV8mGGwm.js";
import { t as isEmpty$1 } from "./isEmpty-BVlBH98t.js";
import { t as useTaskStatus } from "./useTaskStatus-wrAxqtIR.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": "_tax-reporting-dropin_19lpk_1",
taxReportingDropin: "_tax-reporting-dropin_19lpk_1",
"radio-caption": "_radio-caption_19lpk_7",
radioCaption: "_radio-caption_19lpk_7",
"tax-reporting-dropin-getting-started": "_tax-reporting-dropin-getting-started_19lpk_11",
taxReportingDropinGettingStarted: "_tax-reporting-dropin-getting-started_19lpk_11",
"tax-reporting-dropin-getting-started-awe": "_tax-reporting-dropin-getting-started-awe_19lpk_16",
taxReportingDropinGettingStartedAwe: "_tax-reporting-dropin-getting-started-awe_19lpk_16",
"tax-reporting-dropin-form-container": "_tax-reporting-dropin-form-container_19lpk_22",
taxReportingDropinFormContainer: "_tax-reporting-dropin-form-container_19lpk_22",
summary: "_summary_19lpk_26",
"summary-tax-status-card--header": "_summary-tax-status-card--header_19lpk_31",
summaryTaxStatusCardHeader: "_summary-tax-status-card--header_19lpk_31",
"summary-tax-status-card--body": "_summary-tax-status-card--body_19lpk_37",
summaryTaxStatusCardBody: "_summary-tax-status-card--body_19lpk_37"
};
//#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("taxClassification", fieldName, mode);
const typeErrorMessage = errors?.type?.errorMessage;
return /* @__PURE__ */ jsxs("form", { 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: (e) => handleFieldChange("type", "input")(e)
})
}),
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: (e) => handleFieldChange("type", "input")(e)
})
})
] });
}
//#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", { children: [taxClassificationErrorMessage.value && /* @__PURE__ */ jsxs(Typography, {
variant: "caption",
color: "critical",
"aria-live": "polite",
className: "u-justify-content-center 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-B-x6VG09.js"));
var TaxReportingGettingStarted = ({ handleToggleFormVisible, handleCancelClick, taxReportingClassification, asAwe }) => {
const { t: taxReportingT } = useTranslation("taxReporting");
const { t: commonT } = useTranslation("common");
const { data: taskStatusResponse } = useTaskStatus(TaskTypes.TAX_REPORTING, { refetchInterval: TASK_STATUS_POLLING_INTERVAL_MS });
const hasTaxReportingClassification = !isEmpty$1(taxReportingClassification?.taxClassification?.type);
const taxStatusSummary = getTaxStatusSummary(taxReportingT, taxReportingClassification);
return /* @__PURE__ */ jsxs("div", {
className: asAwe ? TaxReporting_module_default.taxReportingDropinGettingStartedAwe : 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: asAwe ? void 0 : taskStatusResponse?.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 TaxReportingDropin_exports = /* @__PURE__ */ __exportAll({ TaxReportingDropin: () => TaxReportingDropin });
var logger = createLogger();
function TaxReportingDropin({ problems, handleHomeClick, onSubmit, asAwe }) {
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-DUIc4CjB.js"),
"./language/cs-CZ.json": () => import("./cs-CZ-Cl6WgrU6.js"),
"./language/da-DK.json": () => import("./da-DK-ANBIxDco.js"),
"./language/de-DE.json": () => import("./de-DE-HdJ5vlQN.js"),
"./language/el-GR.json": () => import("./el-GR-D_JXywE0.js"),
"./language/en-US.json": () => import("./en-US-C2htqfkP.js"),
"./language/es-ES.json": () => import("./es-ES-DcPwPUlZ.js"),
"./language/es-LA.json": () => import("./es-LA-C8U1qPSu.js"),
"./language/et-EE.json": () => import("./et-EE-TIKP7Ec9.js"),
"./language/fi-FI.json": () => import("./fi-FI-DJ6-TAV9.js"),
"./language/fr-FR.json": () => import("./fr-FR-B7mkWyab.js"),
"./language/hr-HR.json": () => import("./hr-HR-CTVtZrP9.js"),
"./language/hu-HU.json": () => import("./hu-HU-BsyElEv0.js"),
"./language/it-IT.json": () => import("./it-IT-DGgRrlgT.js"),
"./language/ja-JP.json": () => import("./ja-JP-Bgo52-T0.js"),
"./language/lt-LT.json": () => import("./lt-LT-DdXY3cAX.js"),
"./language/lv-LV.json": () => import("./lv-LV-Fz2z__sN.js"),
"./language/nl-NL.json": () => import("./nl-NL-Xubp239B.js"),
"./language/no-NO.json": () => import("./no-NO-CFu9XENI.js"),
"./language/pl-PL.json": () => import("./pl-PL-B5FSKIny.js"),
"./language/pt-BR.json": () => import("./pt-BR-BBIWB923.js"),
"./language/pt-PT.json": () => import("./pt-PT-D1Mnwi3B.js"),
"./language/ro-RO.json": () => import("./ro-RO-B72I1ycf.js"),
"./language/sk-SK.json": () => import("./sk-SK-BFh-bgKq.js"),
"./language/sl-SI.json": () => import("./sl-SI-Bc7dEjcH.js"),
"./language/sv-SE.json": () => import("./sv-SE-Cor3sNy0.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("taxClassification", "type", taxReportingClassification?.taxClassification?.type);
(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");
if (asAwe) onSubmit?.(taxReportingPayload);
} 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, {
asAwe,
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_exports as n, TaxReportingDropin as t };