UNPKG

@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
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 };