@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.
368 lines (367 loc) • 17.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] = "2b0adc0d-f207-4a9b-a3dd-e67d77bc1a0a", e._sentryDebugIdIdentifier = "sentry-dbid-2b0adc0d-f207-4a9b-a3dd-e67d77bc1a0a");
} catch (e) {}
import { n as addResourceBundles, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { r as Loader, t as Button } from "./Button-oj6H8OrC.js";
import { r as httpPost, s as useApiContext } from "./http-D1NDkBxF.js";
import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-yxi9XhLi.js";
import { t as LegalEntityTypes } from "./legal-entity-type-VIfNYnJP.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 { p as TaskTypes } from "./entityAssociationUtil-BEzUdPbm.js";
import { r as getOwnDecisionMakers } from "./decisionMakerRoles-CAy-eeNV.js";
import { n as usePciStatus, t as useSalesChannels } from "./useSalesChannels-pzps3cvY.js";
import { t as Card } from "./Card-vYndix5Y.js";
import { t as useToastContext } from "./useToastContext-CYgfHjSb.js";
import { t as EndStateLayout } from "./EndStateLayout-ChS-vdMt.js";
import { t as useInvalidateRootLegalEntity } from "./invalidateRootLegalEntity-CZr0iiji.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-DInxWeqN.js";
import { t as MaybeModal } from "./MaybeModal-CeTBIah3.js";
import { t as Field } from "./Field-pcJkjIG_.js";
import { t as Select } from "./Select-CcSRI-H0.js";
import { t as Checkbox } from "./Checkbox-BCYjFPa4.js";
import { t as useForm } from "./useForm-pUkvCLc9.js";
import { t as ContractViewer } from "./ContractViewer-Bm8_7yzG.js";
import { t as DetailViewLayout } from "./DetailViewLayout-Dd5YzmcW.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
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-COHRuTI-.js"),
"../../../language/locales/cs-CZ.json": () => import("./cs-CZ-CmcYZLZp.js"),
"../../../language/locales/da-DK.json": () => import("./da-DK-C_oe1bpM.js"),
"../../../language/locales/de-DE.json": () => import("./de-DE-CMc1Fpfl.js"),
"../../../language/locales/el-GR.json": () => import("./el-GR-Bv2QgmVV.js"),
"../../../language/locales/en-US.instructions.json": () => import("./en-US.instructions-DJharl6b.js"),
"../../../language/locales/en-US.json": () => import("./en-US-cJAmQhFR.js").then((n) => n.n),
"../../../language/locales/es-ES.json": () => import("./es-ES-DtlXpZ_5.js"),
"../../../language/locales/et-EE.json": () => import("./et-EE-PTcJ2hRW.js"),
"../../../language/locales/fi-FI.json": () => import("./fi-FI-C1Ns3CEo.js"),
"../../../language/locales/fr-FR.json": () => import("./fr-FR-DgPRYmmJ.js"),
"../../../language/locales/hr-HR.json": () => import("./hr-HR-BQfjrcPC.js"),
"../../../language/locales/hu-HU.json": () => import("./hu-HU-DfYPelYo.js"),
"../../../language/locales/it-IT.json": () => import("./it-IT-cnETv3Cg.js"),
"../../../language/locales/ja-JP.json": () => import("./ja-JP-D0gz56Ni.js"),
"../../../language/locales/lt-LT.json": () => import("./lt-LT-Bbh9MWxc.js"),
"../../../language/locales/lv-LV.json": () => import("./lv-LV-C8fqHR2g.js"),
"../../../language/locales/nl-NL.json": () => import("./nl-NL-CQSu4iNn.js"),
"../../../language/locales/no-NO.json": () => import("./no-NO-C0DXekH-.js"),
"../../../language/locales/pl-PL.json": () => import("./pl-PL-10KUcobm.js"),
"../../../language/locales/pt-BR.json": () => import("./pt-BR-DWKF33yP.js"),
"../../../language/locales/pt-PT.json": () => import("./pt-PT-CjIFIi4R.js"),
"../../../language/locales/ro-RO.json": () => import("./ro-RO-DQFRJwp8.js"),
"../../../language/locales/sk-SK.json": () => import("./sk-SK-BfoXFhAL.js"),
"../../../language/locales/sl-SI.json": () => import("./sl-SI-CyIN1sc5.js"),
"../../../language/locales/sv-SE.json": () => import("./sv-SE-Xh17T6yC.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-BUBUyZgz.js"),
"../../ui/language/cs-CZ.json": () => import("./cs-CZ-BFJyFYpX.js"),
"../../ui/language/da-DK.json": () => import("./da-DK-BNvIcL59.js"),
"../../ui/language/de-DE.json": () => import("./de-DE-B8Eby_UK.js"),
"../../ui/language/el-GR.json": () => import("./el-GR-DYmDnzZe.js"),
"../../ui/language/en-US.json": () => import("./en-US-Mma5wIWL.js"),
"../../ui/language/es-ES.json": () => import("./es-ES-DLBRDQJZ.js"),
"../../ui/language/et-EE.json": () => import("./et-EE-C_Z4PWda.js"),
"../../ui/language/fi-FI.json": () => import("./fi-FI-azwPyx-k.js"),
"../../ui/language/fr-FR.json": () => import("./fr-FR-CzdHSH04.js"),
"../../ui/language/hr-HR.json": () => import("./hr-HR-C7Hp8OgD.js"),
"../../ui/language/hu-HU.json": () => import("./hu-HU-B34uBEZ9.js"),
"../../ui/language/it-IT.json": () => import("./it-IT-BCqVu72_.js"),
"../../ui/language/ja-JP.json": () => import("./ja-JP-C7_6K98B.js"),
"../../ui/language/lt-LT.json": () => import("./lt-LT-BhzsTniu.js"),
"../../ui/language/lv-LV.json": () => import("./lv-LV-B6yxwa6Z.js"),
"../../ui/language/nl-NL.json": () => import("./nl-NL-4iZ44kzK.js"),
"../../ui/language/no-NO.json": () => import("./no-NO-BSJ1rjY4.js"),
"../../ui/language/pl-PL.json": () => import("./pl-PL-BHjlKdWC.js"),
"../../ui/language/pt-BR.json": () => import("./pt-BR-BMIZHo3V.js"),
"../../ui/language/pt-PT.json": () => import("./pt-PT-s_KcBKav.js"),
"../../ui/language/ro-RO.json": () => import("./ro-RO-DsFmqo3p.js"),
"../../ui/language/sk-SK.json": () => import("./sk-SK-BspZv60l.js"),
"../../ui/language/sl-SI.json": () => import("./sl-SI-D26FDPwq.js"),
"../../ui/language/sv-SE.json": () => import("./sv-SE-JKGeqd9J.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-DaiKPUAP.js"),
"../../Contract/language/cs-CZ.json": () => import("./cs-CZ-Dit1sTZS.js"),
"../../Contract/language/da-DK.json": () => import("./da-DK-CSuIOYvv.js"),
"../../Contract/language/de-DE.json": () => import("./de-DE-UxQXcw2Z.js"),
"../../Contract/language/el-GR.json": () => import("./el-GR-JdIfiWWD.js"),
"../../Contract/language/en-US.json": () => import("./en-US-DtWDVC_l.js"),
"../../Contract/language/es-ES.json": () => import("./es-ES-CgcvvmLv.js"),
"../../Contract/language/et-EE.json": () => import("./et-EE-BtoIECkX.js"),
"../../Contract/language/fi-FI.json": () => import("./fi-FI-CUapPvf9.js"),
"../../Contract/language/fr-FR.json": () => import("./fr-FR-D34baGa-.js"),
"../../Contract/language/hr-HR.json": () => import("./hr-HR-C4sBzG1i.js"),
"../../Contract/language/hu-HU.json": () => import("./hu-HU-DgjvclPA.js"),
"../../Contract/language/it-IT.json": () => import("./it-IT-BZrpE0qK.js"),
"../../Contract/language/ja-JP.json": () => import("./ja-JP-DB56llc7.js"),
"../../Contract/language/lt-LT.json": () => import("./lt-LT-DFZD-gis.js"),
"../../Contract/language/lv-LV.json": () => import("./lv-LV-BJgLY-OW.js"),
"../../Contract/language/nl-NL.json": () => import("./nl-NL-CBBxSKzB.js"),
"../../Contract/language/no-NO.json": () => import("./no-NO-3PlX_ro5.js"),
"../../Contract/language/pl-PL.json": () => import("./pl-PL-ComkJGTw.js"),
"../../Contract/language/pt-BR.json": () => import("./pt-BR-Ct1Nhi9U.js"),
"../../Contract/language/pt-PT.json": () => import("./pt-PT-BhEGejvl.js"),
"../../Contract/language/ro-RO.json": () => import("./ro-RO-QlHjtTpP.js"),
"../../Contract/language/sk-SK.json": () => import("./sk-SK-CxisoTfT.js"),
"../../Contract/language/sl-SI.json": () => import("./sl-SI-CG07y9Cp.js"),
"../../Contract/language/sv-SE.json": () => import("./sv-SE-C2lw5FJ7.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"], { ns: "common" }),
action: /* @__PURE__ */ jsx(Button, {
onClick: handleOnClose,
fullWidth: true,
children: t(($) => $["finish"], { ns: "common" })
})
})
});
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 as t };