@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.
370 lines (369 loc) • 17.5 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] = "4906c6e0-4135-4891-87d5-15006da7a4ce", e._sentryDebugIdIdentifier = "sentry-dbid-4906c6e0-4135-4891-87d5-15006da7a4ce");
} catch (e) {}
import { c as __exportAll, n as addResourceBundles, r as useTranslation } from "./translation-BYvhW5zA.js";
import { A as _rolldown_dynamic_import_helper_default, nt as isEmpty } from "./resolveEnvironment-DNmu53Rr.js";
import { r as Loader, t as Button } from "./Button-i8I2dHP8.js";
import { r as httpPost, s as useApiContext } from "./http-8qgzqVqk.js";
import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-CtlUQv_J.js";
import { t as LegalEntityTypes } from "./legal-entity-type-0MfCGzUf.js";
import { t as TaskTypes } from "./taskTypes-NawDTp5n.js";
import { r as getOwnDecisionMakers } from "./decisionMakerRoles-DIG8zo1C.js";
import { n as usePciStatus, t as useSalesChannels } from "./useSalesChannels-DW5ilTS0.js";
import { t as Card } from "./Card-BCGLpdw7.js";
import { i as useAnalyticsContext } from "./Modal-BLP2aF-u.js";
import { n as useToastContext, t as useInvalidateRootLegalEntity } from "./invalidateRootLegalEntity-DLpPeD5p.js";
import { t as EndStateLayout } from "./EndStateLayout-CBRHUXyY.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-BXtOctC4.js";
import { t as MaybeModal } from "./MaybeModal-DWfb_GRW.js";
import { t as Field } from "./Field-DoXLi6EY.js";
import { t as Select } from "./Select-DUo2rOfa.js";
import { t as Checkbox } from "./Checkbox-D7BRIoQL.js";
import { t as useForm } from "./useForm-C5EykRLY.js";
import { t as ContractViewer } from "./ContractViewer-JtnAXSDa.js";
import { t as DetailViewLayout } from "./DetailViewLayout-DNCGEd7b.js";
import { useCallback, useMemo, useState } from "preact/hooks";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
import { useMutation, useQuery } from "@tanstack/preact-query";
//#region src/api/pci/usePciTemplate.ts
var getPciTemplate = async (legalEntityId, baseUrl, data) => {
const filteredData = {
...data,
additionalSalesChannels: data.additionalSalesChannels?.filter((channel) => channel !== "payByLink")
};
return httpPost({
baseUrl,
path: `legalEntities/${legalEntityId}/pci/generatePciTemplates`
}, filteredData);
};
var usePciTemplate = (data, options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
return useQuery({
queryKey: ["pciTemplate", data],
queryFn: () => getPciTemplate(rootLegalEntityId.value, baseUrl.value, data),
...options
});
};
//#endregion
//#region src/api/pci/useSignPci.ts
var signPci = async (legalEntityId, baseUrl, data) => {
return httpPost({
baseUrl,
path: `legalEntities/${legalEntityId}/pci/signPciTemplates`
}, data);
};
var useSignPci = (options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
const invalidateRootLegalEntity = useInvalidateRootLegalEntity();
return useMutation({
mutationFn: (data) => signPci(rootLegalEntityId.value, baseUrl.value, data),
onSuccess: async () => {
await invalidateRootLegalEntity();
},
...options
});
};
//#endregion
//#region src/components/Contract/tasks/PciDropin/validate.ts
var pciValidationRules = {
signer: {
modes: ["blur"],
validate: (signer) => !isEmpty(signer),
errorMessage: "fieldIsRequired"
},
acceptPci: {
modes: ["blur"],
validate: (acceptPci) => !!acceptPci,
errorMessage: "fieldIsRequired"
}
};
//#endregion
//#region src/components/Contract/tasks/PciDropin/PciDropin.tsx
var PciFields = ["signer", "acceptPci"];
function PciDropin({ legalEntityResponse, pciTemplateResponse, handleHomeClick, handleSign, asModal = false, needsSigning = true, handleCloseClick }) {
const { t } = useTranslation(["contract", "common"]);
const userEvents = useAnalyticsContext();
const { showToast } = useToastContext();
const [isLoading, setIsLoading] = useState(false);
const { handleChangeFor, triggerValidation, data, valid, isValid, errors } = useForm({
schema: PciFields,
rules: pciValidationRules
});
const { pciTemplateReferences, content } = pciTemplateResponse;
const pciQuestionnaire = useMemo(() => JSON.parse(decodeURIComponent(escape(window.atob(content)))), [content]);
const uniqueEntityAssociations = [...new Map(getOwnDecisionMakers(legalEntityResponse).map((entityAssociation) => [entityAssociation.legalEntityId, entityAssociation])).values()];
const signers = legalEntityResponse.type === LegalEntityTypes.ORGANIZATION ? uniqueEntityAssociations.filter((ea) => Boolean(ea.legalEntityId && ea.name)).map(({ legalEntityId: id, name }) => ({
id,
name
})) : [{
id: legalEntityResponse.id,
name: `${legalEntityResponse.individual?.name.firstName ?? ""} ${legalEntityResponse.individual?.name.lastName ?? ""}`
}];
const handleSignClick = async () => {
if (isLoading) return;
const baseTracking = {
actionType: "sign",
label: "sign"
};
triggerValidation();
if (isValid) try {
setIsLoading(true);
await handleSign(legalEntityResponse.id, {
signedBy: data.signer,
pciTemplateReferences
});
setIsLoading(false);
showToast({
label: t(($) => $["pciSignedSuccessfully"]),
variant: "success"
});
userEvents.addTaskEvent("Success", baseTracking);
goHome();
} catch (e) {
setIsLoading(false);
showToast({
label: t(($) => $["signingFailed"]),
variant: "error"
});
userEvents.addTaskEvent("Encountered error", {
...baseTracking,
returnType: e?.errorCode || "backend",
returnValue: e?.title ?? e?.message
});
}
else userEvents.addTaskEvent("Encountered error", {
...baseTracking,
returnType: "validation",
returnValue: Object.entries(valid).filter(([, value]) => !value).map(([key]) => key)
});
};
const goHome = () => {
userEvents.addPageEvent("Clicked button", {
actionType: "back",
label: "finishLater"
});
handleHomeClick();
};
const handleExpandSection = useCallback((title) => {
userEvents.addFieldEvent("Clicked accordion", {
actionType: "open",
field: title
});
}, []);
/**
* Analytics
*/
useTaskLandedEvent("PCI_DSS");
const acceptPciLabel = `${t(($) => $["acknowledgePciRequirements"])} ${t(($) => $["basedOnTheAboveSignatory"])}`;
const actions = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
onClick: handleSignClick,
fullWidth: true,
disabled: isLoading,
children: t(($) => $["sign"], { ns: "common" })
}), /* @__PURE__ */ jsx(Button, {
variant: "secondary",
onClick: goHome,
fullWidth: true,
children: t(($) => $["finishLater"], { ns: "common" })
})] });
return /* @__PURE__ */ jsx(MaybeModal, {
inline: !asModal,
onClose: handleCloseClick,
inset: true,
children: !needsSigning ? /* @__PURE__ */ jsx(EndStateLayout, {
title: t(($) => $["agreementSigned"], { ns: "common" }),
description: t(($) => $["pciDssSelfServiceQuestionnaireSignedSuccessfully"]),
action: handleCloseClick && /* @__PURE__ */ jsx(Button, {
onClick: handleCloseClick,
fullWidth: true,
children: t(($) => $["finish"], { ns: "common" })
})
}) : /* @__PURE__ */ jsxs(DetailViewLayout, {
title: t(($) => $["pciDssSelfServiceQuestionnaire"]),
compact: asModal,
actions,
children: [
/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(ContractViewer, {
contract: pciQuestionnaire,
onExpandSection: handleExpandSection
}) }),
/* @__PURE__ */ jsx(Field, {
name: "signer",
label: t(($) => $["signatory"], { ns: "common" }),
errorMessage: errors.signer?.errorMessage,
isValid: valid.signer,
dataTestId: "signer",
children: (childProps) => /* @__PURE__ */ jsx(Select, {
...childProps,
onChange: handleChangeFor("signer", "blur"),
name: "signer",
placeholder: t(($) => $["selectSigner"]),
selected: data.signer,
items: signers
})
}),
/* @__PURE__ */ jsx(Field, {
name: "acceptPci",
errorMessage: errors.acceptPci?.errorMessage,
isValid: valid.acceptPci,
showErrorIconBottom: true,
children: (childProps) => /* @__PURE__ */ jsx(Checkbox, {
...childProps,
label: acceptPciLabel,
checked: data.acceptPci ?? false,
name: "acceptPci",
onChange: handleChangeFor("acceptPci")
})
})
]
})
});
}
//#endregion
//#region src/components/EmbeddedDropins/SignPCIComponent/SignPCIComponent.tsx
var SignPCIComponent_exports = /* @__PURE__ */ __exportAll({ SignPCIComponent: () => SignPCIComponent });
function SignPCIComponent({ modalView = false, onClose, onSigned, onUnmount, selectedSalesChannels }) {
const additionalSalesChannels = useSalesChannels();
const { t, i18n } = useTranslation(["contract", "common"]);
addResourceBundles(i18n, [
{
ns: "common",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../../../language/locales/bg-BG.json": () => import("./bg-BG-BcmC41vE.js"),
"../../../language/locales/cs-CZ.json": () => import("./cs-CZ-ghdW0Tc6.js"),
"../../../language/locales/da-DK.json": () => import("./da-DK-CBOVFYaa.js"),
"../../../language/locales/de-DE.json": () => import("./de-DE-CA81fzkA.js"),
"../../../language/locales/el-GR.json": () => import("./el-GR-BjOmQ_B_.js"),
"../../../language/locales/en-US.instructions.json": () => import("./en-US.instructions-FOYUYA3c.js"),
"../../../language/locales/en-US.json": () => import("./en-US-Dab7moVA.js"),
"../../../language/locales/es-ES.json": () => import("./es-ES-BEYl7Z8S.js"),
"../../../language/locales/es-LA.json": () => import("./es-LA-D741KUNg.js"),
"../../../language/locales/et-EE.json": () => import("./et-EE-CfgyGext.js"),
"../../../language/locales/fi-FI.json": () => import("./fi-FI-DFO20YZY.js"),
"../../../language/locales/fr-FR.json": () => import("./fr-FR-wvWrk_PU.js"),
"../../../language/locales/hr-HR.json": () => import("./hr-HR-D0zfmZK6.js"),
"../../../language/locales/hu-HU.json": () => import("./hu-HU-CL021irk.js"),
"../../../language/locales/it-IT.json": () => import("./it-IT-6VoxKX97.js"),
"../../../language/locales/ja-JP.json": () => import("./ja-JP-Cja4dur8.js"),
"../../../language/locales/lt-LT.json": () => import("./lt-LT-CNFgOeH4.js"),
"../../../language/locales/lv-LV.json": () => import("./lv-LV-BdSdhjTP.js"),
"../../../language/locales/nl-NL.json": () => import("./nl-NL-CclRrN3_.js"),
"../../../language/locales/no-NO.json": () => import("./no-NO-CO5xyGPh.js"),
"../../../language/locales/pl-PL.json": () => import("./pl-PL-DUH23AYC.js"),
"../../../language/locales/pt-BR.json": () => import("./pt-BR-MAQR_CUu2.js"),
"../../../language/locales/pt-PT.json": () => import("./pt-PT-CoKsjpyN.js"),
"../../../language/locales/ro-RO.json": () => import("./ro-RO-Cpv5pKod.js"),
"../../../language/locales/sk-SK.json": () => import("./sk-SK-p_p2X_aA.js"),
"../../../language/locales/sl-SI.json": () => import("./sl-SI-BpZp1MAq.js"),
"../../../language/locales/sv-SE.json": () => import("./sv-SE-BoXCPhGb.js")
}), `../../../language/locales/${lang}.json`, 6)
},
{
ns: "ui",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../../ui/language/bg-BG.json": () => import("./bg-BG-CzXoDIev.js"),
"../../ui/language/cs-CZ.json": () => import("./cs-CZ-JUprtMsH.js"),
"../../ui/language/da-DK.json": () => import("./da-DK-D2RrHm98.js"),
"../../ui/language/de-DE.json": () => import("./de-DE-o8i-cfnA.js"),
"../../ui/language/el-GR.json": () => import("./el-GR-BAhj1djs.js"),
"../../ui/language/en-US.json": () => import("./en-US-COWs58AF.js"),
"../../ui/language/es-ES.json": () => import("./es-ES-BNjxmV8Q.js"),
"../../ui/language/es-LA.json": () => import("./es-LA-BIPVrwXX.js"),
"../../ui/language/et-EE.json": () => import("./et-EE-Dl6n-Am8.js"),
"../../ui/language/fi-FI.json": () => import("./fi-FI-T33BAikx.js"),
"../../ui/language/fr-FR.json": () => import("./fr-FR-CRO4taJU.js"),
"../../ui/language/hr-HR.json": () => import("./hr-HR-CbEXwWeO.js"),
"../../ui/language/hu-HU.json": () => import("./hu-HU-B9JCbRow.js"),
"../../ui/language/it-IT.json": () => import("./it-IT-DE_Dkl_X.js"),
"../../ui/language/ja-JP.json": () => import("./ja-JP-BaD-vLXo.js"),
"../../ui/language/lt-LT.json": () => import("./lt-LT-5OY6az4F.js"),
"../../ui/language/lv-LV.json": () => import("./lv-LV-DjAUG4pi.js"),
"../../ui/language/nl-NL.json": () => import("./nl-NL-C3cXv5PD.js"),
"../../ui/language/no-NO.json": () => import("./no-NO-DyMlgewS.js"),
"../../ui/language/pl-PL.json": () => import("./pl-PL-ClUTW9pd.js"),
"../../ui/language/pt-BR.json": () => import("./pt-BR-Bk2xOhdi.js"),
"../../ui/language/pt-PT.json": () => import("./pt-PT-5O7ohkQD.js"),
"../../ui/language/ro-RO.json": () => import("./ro-RO-BOV_LMAu.js"),
"../../ui/language/sk-SK.json": () => import("./sk-SK-BUGTKkOC.js"),
"../../ui/language/sl-SI.json": () => import("./sl-SI-DffYWi9P.js"),
"../../ui/language/sv-SE.json": () => import("./sv-SE-D_bagacj.js")
}), `../../ui/language/${lang}.json`, 5)
},
{
ns: "contract",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../../Contract/language/bg-BG.json": () => import("./bg-BG-BKPnSg5G.js"),
"../../Contract/language/cs-CZ.json": () => import("./cs-CZ-BBnvx4CY.js"),
"../../Contract/language/da-DK.json": () => import("./da-DK-CRp6gV0v.js"),
"../../Contract/language/de-DE.json": () => import("./de-DE-asP1wacy.js"),
"../../Contract/language/el-GR.json": () => import("./el-GR-B18pS-T4.js"),
"../../Contract/language/en-US.json": () => import("./en-US-CmzloEL3.js"),
"../../Contract/language/es-ES.json": () => import("./es-ES-BN2YT82N.js"),
"../../Contract/language/es-LA.json": () => import("./es-LA-DK1UJyRv.js"),
"../../Contract/language/et-EE.json": () => import("./et-EE-6Fsbs-mA.js"),
"../../Contract/language/fi-FI.json": () => import("./fi-FI-C4Ta33KJ.js"),
"../../Contract/language/fr-FR.json": () => import("./fr-FR-DKTSJHnY.js"),
"../../Contract/language/hr-HR.json": () => import("./hr-HR-CII1fh9u.js"),
"../../Contract/language/hu-HU.json": () => import("./hu-HU-CAlsW_OP.js"),
"../../Contract/language/it-IT.json": () => import("./it-IT-BUwmmlzT.js"),
"../../Contract/language/ja-JP.json": () => import("./ja-JP-XWbEAz1Y.js"),
"../../Contract/language/lt-LT.json": () => import("./lt-LT-Vhhg1gZf.js"),
"../../Contract/language/lv-LV.json": () => import("./lv-LV-x-MIpGh3.js"),
"../../Contract/language/nl-NL.json": () => import("./nl-NL-CvSvFKVp.js"),
"../../Contract/language/no-NO.json": () => import("./no-NO-TyUIFxXT.js"),
"../../Contract/language/pl-PL.json": () => import("./pl-PL-BYzL4w2k.js"),
"../../Contract/language/pt-BR.json": () => import("./pt-BR-D5r3Ig2a.js"),
"../../Contract/language/pt-PT.json": () => import("./pt-PT-Dsxz9fKe.js"),
"../../Contract/language/ro-RO.json": () => import("./ro-RO-BfVd2Ps9.js"),
"../../Contract/language/sk-SK.json": () => import("./sk-SK-ID0z1rIS.js"),
"../../Contract/language/sl-SI.json": () => import("./sl-SI-hxmAPrRM.js"),
"../../Contract/language/sv-SE.json": () => import("./sv-SE-BuzHXTQj.js")
}), `../../Contract/language/${lang}.json`, 5)
}
]);
const { data: legalEntityData, isError: isLegalEntityError, isLoading: isLegalEntityLoading } = useLegalEntity(ROOT_LE);
const allSalesChannels = useMemo(() => {
return [...new Set([...additionalSalesChannels, ...selectedSalesChannels ?? []])];
}, [additionalSalesChannels, selectedSalesChannels]);
const { data: pciTemplateData, isLoading: isPciTemplateDataLoading } = usePciTemplate({
additionalSalesChannels: allSalesChannels,
language: i18n.language.substring(0, 2) ?? "en"
});
const { data: pciStatusData, isLoading: isPciStatusLoading, isError: isPciStatusError } = usePciStatus({ additionalSalesChannels: allSalesChannels });
const signPci = useSignPci();
const handleOnClose = () => {
if (modalView) onUnmount?.();
onClose?.();
};
if (isLegalEntityLoading || isPciStatusLoading || isPciTemplateDataLoading || !legalEntityData || !pciTemplateData) return /* @__PURE__ */ jsx(Loader, {});
if (isLegalEntityError || isPciStatusError) return /* @__PURE__ */ jsx(MaybeModal, {
inline: !modalView,
onClose: handleOnClose,
children: /* @__PURE__ */ jsx(EndStateLayout, {
title: t(($) => $["nothingNeedsToBeSigned"]),
description: t(($) => $["pciDoesNotNeedSigningOrHasBeenSigned"]),
action: /* @__PURE__ */ jsx(Button, {
onClick: handleOnClose,
fullWidth: true,
children: t(($) => $["finish"])
})
})
});
return /* @__PURE__ */ jsx(PciDropin, {
taskType: TaskTypes.PCI_DSS,
legalEntityResponse: legalEntityData,
pciTemplateResponse: pciTemplateData,
handleHomeClick: handleOnClose,
handleSign: async (_legalEntityId, signedBy) => {
await signPci.mutateAsync(signedBy);
onUnmount?.();
onSigned?.();
},
handleCloseClick: handleOnClose,
asModal: modalView,
needsSigning: Boolean(pciStatusData?.signingRequired)
});
}
//#endregion
export { SignPCIComponent_exports as n, SignPCIComponent as t };