@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.
297 lines (296 loc) • 11.4 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] = "c48cb058-ecc5-4cb3-a794-f9930d3419b7", e._sentryDebugIdIdentifier = "sentry-dbid-c48cb058-ecc5-4cb3-a794-f9930d3419b7");
} catch (e) {}
import { r as useTranslation } from "./translation-BFxyJ1c5.js";
import { n as IconButton } from "./Button-oj6H8OrC.js";
import { n as httpGet, r as httpPost, s as useApiContext } from "./http-D1NDkBxF.js";
import { t as useToggleContext } from "./useToggleContext-DaQUBF8O.js";
import { y as isEmpty } from "./validatorUtils-DRapRJ6z.js";
import { t as List } from "./List-DLrcpMVd.js";
import { t as Field } from "./Field-pcJkjIG_.js";
import { t as Select } from "./Select-CcSRI-H0.js";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
import { signal } from "@preact/signals";
import { useMutation, useQuery } from "@tanstack/preact-query";
//#region src/api/industryCodes/useIndustryCodes.ts
var fetchIndustryCodes = async (legalEntityId, baseUrl, businessLineTypes, locale) => {
const results = await Promise.all(businessLineTypes.map((businessLineType) => {
return httpGet({
baseUrl,
path: `legalEntities/${legalEntityId}/businessLines/${businessLineType}/industryCodes?locale=${locale}`
});
}));
const deduped = [];
for (const result of results) for (const industryCodeDTO of result) if (!deduped.find((item) => item.code === industryCodeDTO.code)) deduped.push(industryCodeDTO);
return deduped;
};
var useIndustryCodes = (businessLineTypes, locale, options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
return useQuery({
queryKey: [
"industryCodes",
businessLineTypes.join(","),
locale
],
queryFn: () => fetchIndustryCodes(rootLegalEntityId.value, baseUrl.value, businessLineTypes, locale),
...options
});
};
//#endregion
//#region src/components/Shared/fields/IndustryCodeField/validate.ts
var industryCodeFieldValidation = () => ({ industryCodes: {
modes: ["blur"],
validate: (industryCode) => !isEmpty(industryCode),
errorMessage: "fieldIsRequired"
} });
//#endregion
//#region src/components/Shared/fields/IndustryCodeField/fieldConfig.ts
var industryCodeFieldMetadata = { validators: [industryCodeFieldValidation().industryCodes] };
//#endregion
//#region src/components/BusinessLines/tasks/BusinessLines/BusinessLinesStore.ts
var selectedBusinessLine = signal(void 0);
var shouldSignNewPci = signal(false);
var IndustryCodeField_module_default = {
"industry-codes-content": "adyen-kyc-industry-codes-content",
industryCodesContent: "adyen-kyc-industry-codes-content",
"industry-codes-selection": "adyen-kyc-industry-codes-selection",
industryCodesSelection: "adyen-kyc-industry-codes-selection"
};
//#endregion
//#region src/components/Shared/fields/IndustryCodeField/IndustryCodeField.tsx
var mapSelectedCodes = (selectedCodes) => {
return selectedCodes && selectedCodes.length > 0 ? selectedCodes.map((i) => {
return {
value: i,
touched: !!i.id
};
}) : [{
value: {
id: "",
name: ""
},
touched: false
}];
};
function IndustryCodeField({ data, valid, errors, readonly, handleChangeFor, guidanceText, setErrors, setValid, businessLineTypes, single = false, industryCodes, existingBusinessLines }) {
const { t } = useTranslation("ui");
const industryCodesRef = useRef(null);
const { isFeatureEnabled } = useToggleContext();
const singleIndustryCode = single || !!selectedBusinessLine.value || isFeatureEnabled("EnableLimitToSingleBusinessLine");
const allIndustryCodeSelectItems = useMemo(() => industryCodes?.map((entry) => ({
id: entry.code,
name: `${entry.code} - ${entry.description}`
})) ?? [], [industryCodes]);
/** Not allowing business lines with duplicate industry codes in HO */
const selectableIndustryCodes = useMemo(() => {
if (!businessLineTypes.includes("acquiring")) return allIndustryCodeSelectItems;
const selectedIds = data.industryCodes?.map((c) => c.id);
const existingIds = (existingBusinessLines ?? []).map((b) => b.industryCode);
return allIndustryCodeSelectItems.filter((item) => {
return !(selectedIds?.includes(item.id) || existingIds?.includes(item.id));
});
}, [
allIndustryCodeSelectItems,
businessLineTypes,
data.industryCodes,
existingBusinessLines
]);
const selectedCodes = data.industryCodes;
const [items, setItems] = useState(mapSelectedCodes(selectedCodes));
useEffect(() => {
setItems(mapSelectedCodes(selectedCodes));
}, [selectedCodes]);
const updateIndustryCodes = (value) => {
handleChangeFor("industryCodes")(value);
};
const addIndustryCodeField = (e) => {
if (items[items.length - 1].value.id === "") {
handleIndustryCodeFocusOut(e, items.length - 1);
return;
}
const newItems = [...items, {
value: {
id: "",
name: ""
},
touched: false
}];
setItems(newItems);
updateIndustryCodes(newItems.map((item) => item.value));
};
const removeField = (indexToRemove) => {
const newItems = items.filter((_, index) => index !== indexToRemove);
setItems(newItems);
updateIndustryCodes(newItems.map((item) => item.value));
};
const handleSelectIndustryCode = (indexToUpdate, selectedItem) => {
setItems((prevItems) => {
const newItems = [...prevItems];
newItems[indexToUpdate] = {
value: {
id: selectedItem.id,
name: selectedItem.name
},
touched: true
};
updateIndustryCodes(newItems.map((item) => {
return {
id: item.value.id,
name: item.value.name
};
}));
return newItems;
});
};
const handleIndustryCodeFocusOut = (e, index) => {
if (industryCodesRef.current && !industryCodesRef.current.contains(e.relatedTarget)) setItems((prevItems) => {
if (prevItems[index].value.id || prevItems[index].touched) return prevItems;
const newItems = [...prevItems];
newItems[index] = {
...newItems[index],
touched: true
};
if (newItems.some((item) => item.value.id === "")) {
setErrors?.("industryCodes", {
isValid: false,
errorMessage: "fieldIsRequired",
hasError: true
}, "industryCodesForm");
setValid?.("industryCodes", false, "industryCodesForm");
} else {
setErrors?.("industryCodes", null, "industryCodesForm");
setValid?.("industryCodes", true, "industryCodesForm");
}
return newItems;
});
};
return /* @__PURE__ */ jsx(Field, {
name: "industryCodes",
label: t(($) => $["industry"]),
errorMessage: errors.industryCodes,
isValid: valid.industryCodes,
formatGuidance: guidanceText,
showErrorIcon: false,
children: (childProps) => /* @__PURE__ */ jsx(Wrapper, {
single: singleIndustryCode,
children: /* @__PURE__ */ jsx("div", {
className: IndustryCodeField_module_default.industryCodesContent,
ref: industryCodesRef,
"data-testid": "industryCode",
children: items.map((code, index) => {
const isInvalid = code.touched && code.value.id === "";
return /* @__PURE__ */ jsxs("div", {
className: IndustryCodeField_module_default.industryCodesSelection,
children: [/* @__PURE__ */ jsx(Select, {
...childProps,
id: `industryCodeSelection-${index}`,
name: `industryCodeSelection-${index}`,
selected: code.value,
placeholder: t(($) => $["industryCode__placeholder"]),
items: allIndustryCodeSelectItems,
excludedValues: allIndustryCodeSelectItems.filter((i) => !selectableIndustryCodes.includes(i)),
readonly: !!data.industryCodes && readonly || !!industryCodes && selectableIndustryCodes.length === 0,
onSelect: (selectedItem) => handleSelectIndustryCode(index, selectedItem),
isInvalid,
onBlur: (e) => handleIndustryCodeFocusOut(e, index)
}), !singleIndustryCode && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
ariaLabel: t(($) => $["removeIndustryCode"]),
variant: "tertiary",
icon: "minusCircleFilled",
circle: true,
onClick: () => removeField(index),
disabled: items.length === 1 || readonly
}), /* @__PURE__ */ jsx(IconButton, {
ariaLabel: t(($) => $["addIndustryCode"]),
variant: "tertiary",
icon: "plusCircleFilled",
circle: true,
onClick: addIndustryCodeField,
disabled: readonly || code.value.id === "" || code.value.id !== "" && index !== items.length - 1 || selectableIndustryCodes.length === 0
})] })]
}, code.value.id);
})
})
})
});
}
function Wrapper({ single, children }) {
return single ? children : /* @__PURE__ */ jsx(List, {
dividers: false,
variant: "grouped-primary",
children
});
}
//#endregion
//#region src/components/BusinessLines/constants.ts
var salesChannelsWithWebData = ["eCommerce", "ecomMoto"];
var SALES_CHANNELS_FIELD = ["salesChannels"];
var WEB_DATA_FIELD = ["webAddress", "webExempt"];
var INDUSTRY_CODE_FIELD = ["industryCodes"];
var SCTA_FIELD = ["sctaUrl", "sctaExempt"];
var businessLinesConfigurations = {
industryCodes: { rule: "REQUIRED" },
salesChannels: { rule: "REQUIRED" },
webAddress: { rule: "webAddressRequired" },
webExempt: { rule: "OPTIONAL" },
sctaUrl: { rule: "sctaUrlRequired" },
sctaExempt: { rule: "OPTIONAL" }
};
var businessLinesForms = {
industryCodesForm: {
formId: "industryCodesForm",
formName: "industryCodesForm",
fields: INDUSTRY_CODE_FIELD
},
salesChannelsForm: {
formId: "salesChannelsForm",
formName: "paymentProcessing",
fields: [...SALES_CHANNELS_FIELD, ...WEB_DATA_FIELD]
},
sctaForm: {
formId: "sctaForm",
formName: "japaneseCommercialDisclosure",
fields: SCTA_FIELD
}
};
var businessLineTypes = ["acquiring"];
//#endregion
//#region src/api/businessLines/useCreateBusinessLine.ts
var createBusinessLine = async (legalEntityId, baseUrl, data) => {
return httpPost({
baseUrl,
path: `legalEntities/${legalEntityId}/businessLines`
}, data);
};
/**
* @param options additional options passed to Tanstack Query, eg; refetchInterval for polling
*/
var useCreateBusinessLine = (options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
return useMutation({
mutationFn: (data) => createBusinessLine(rootLegalEntityId.value, baseUrl.value, data),
...options
});
};
//#endregion
//#region src/api/businessLines/useUpdateBusinessLines.ts
var updateBusinessLine = async (legalEntityId, baseUrl, data) => {
return httpPost({
baseUrl,
path: `legalEntities/${legalEntityId}/businessLines/${data.id}`
}, data);
};
/**
* @param options additional options passed to Tanstack Query, eg; refetchInterval for polling
*/
var useUpdateBusinessLine = (options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
return useMutation({
mutationFn: (data) => updateBusinessLine(rootLegalEntityId.value, baseUrl.value, data),
...options
});
};
//#endregion
export { SCTA_FIELD as a, businessLinesConfigurations as c, IndustryCodeField as d, selectedBusinessLine as f, useIndustryCodes as h, SALES_CHANNELS_FIELD as i, businessLinesForms as l, industryCodeFieldMetadata as m, useCreateBusinessLine as n, WEB_DATA_FIELD as o, shouldSignNewPci as p, INDUSTRY_CODE_FIELD as r, businessLineTypes as s, useUpdateBusinessLine as t, salesChannelsWithWebData as u };