@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.
233 lines (232 loc) • 9.05 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] = "aeba8b69-56fa-457e-97ca-74b66285ddf8", e._sentryDebugIdIdentifier = "sentry-dbid-aeba8b69-56fa-457e-97ca-74b66285ddf8");
} catch (e) {}
import { r as useTranslation } from "./translation-BYvhW5zA.js";
import { j as useToggleContext, nt as isEmpty } from "./resolveEnvironment-DNmu53Rr.js";
import { n as IconButton } from "./Button-i8I2dHP8.js";
import { t as List } from "./List-ywoRPg-q.js";
import { t as Field } from "./Field-DoXLi6EY.js";
import { t as Select } from "./Select-DUo2rOfa.js";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
import { signal } from "@preact/signals";
//#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": "_industry-codes-content_lwsuv_1",
industryCodesContent: "_industry-codes-content_lwsuv_1",
"industry-codes-selection": "_industry-codes-selection_lwsuv_15",
industryCodesSelection: "_industry-codes-selection_lwsuv_15"
};
//#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
export { businessLineTypes as a, salesChannelsWithWebData as c, shouldSignNewPci as d, industryCodeFieldMetadata as f, WEB_DATA_FIELD as i, IndustryCodeField as l, SALES_CHANNELS_FIELD as n, businessLinesConfigurations as o, SCTA_FIELD as r, businessLinesForms as s, INDUSTRY_CODE_FIELD as t, selectedBusinessLine as u };