@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.
128 lines (127 loc) • 5.82 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] = "8bb5895b-ffdf-4e52-bcec-78a8618a45f2", e._sentryDebugIdIdentifier = "sentry-dbid-8bb5895b-ffdf-4e52-bcec-78a8618a45f2");
} catch (e) {}
import { o as createLogger, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { r as Loader } from "./Button-oj6H8OrC.js";
import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-yxi9XhLi.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as Header } from "./Header-CPmJyuoP.js";
import { C as EntityTypes } from "./processCapabilities-DlZY9-Jc.js";
import { t as useToastContext } from "./useToastContext-CYgfHjSb.js";
import { n as useCapabilityProblems, t as getProblemsForEntity } from "./getProblemsForEntity-BLcIg3x_.js";
import { t as useUpdateLegalEntity } from "./useUpdateLegalEntity-CtaRaKZ6.js";
import { a as defaultFieldMetadata, i as contactDetailsValidationRules, l as useValidatePhoneNumberImperatively, o as fieldConfig, s as getAsyncPhoneValidationRules, t as ContactDetails } from "./ContactDetails-h7TVEsb_.js";
import { t as ErrorPanel } from "./ErrorPanel-B536hgSc.js";
import { t as createFormUtils } from "./formUtils-DCvL3uZG.js";
import { t as useMultiForm } from "./useMultiForm-B3e1ImN3.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-DInxWeqN.js";
import { t as resolveFieldMetadata } from "./fieldConfigurations-m7oWP1DZ.js";
import { t as ActionBar } from "./ActionBar-Doac020y.js";
import { useCallback, useMemo } from "preact/hooks";
import { jsx, jsxs } from "preact/jsx-runtime";
import { useQueryClient } from "@tanstack/preact-query";
//#region src/components/Shared/tasks/CustomerSupport/mapping/mapCustomerSupportSchemaToCustomerSupportType.ts
var mapCustomerSupportSchemaToCustomerSupportType = (customerSupport) => {
return {
email: customerSupport?.customerSupport?.email || "",
phone: {
number: customerSupport?.customerSupport?.phoneNumber?.number || "",
type: "mobile"
}
};
};
//#endregion
//#region src/components/Shared/tasks/CustomerSupport/CustomerSupport.tsx
var logger = createLogger();
var CustomerSupport = (props) => {
const { data, isLoading } = useLegalEntity(ROOT_LE);
if (isLoading || !data) return /* @__PURE__ */ jsx(Loader, { size: "large" });
return /* @__PURE__ */ jsx(CustomerSupportInner, {
...props,
legalEntity: data
});
};
function CustomerSupportInner({ country, onSubmit, legalEntity }) {
const capabilityProblems = useCapabilityProblems();
const problems = capabilityProblems ? getProblemsForEntity(capabilityProblems, EntityTypes.LEGAL_ENTITY, legalEntity.id) : void 0;
const { t } = useTranslation("common");
const userEvents = useAnalyticsContext();
const { showToast } = useToastContext();
const formUtils = createFormUtils({}, t);
const { mutateAsync: updateLegalEntity } = useUpdateLegalEntity();
const queryClient = useQueryClient();
const requiredFields = { customerSupport: ["email", "phoneNumber"] };
const validators = useCallback((data) => ({ customerSupport: {
...contactDetailsValidationRules,
phoneNumber: resolveFieldMetadata(fieldConfig[data?.customerSupport?.phoneNumber?.phoneCountryCode ?? country], {}, defaultFieldMetadata)?.validators
} }), [country]);
const validatePhoneNumber = useValidatePhoneNumberImperatively();
const asyncValidators = useMemo(() => ({ customerSupport: { phoneNumber: getAsyncPhoneValidationRules(validatePhoneNumber).phoneNumber } }), [validatePhoneNumber]);
const legalEntityType = legalEntity.type;
const { data, handleChangeFor, valid, errors, isValid, triggerValidation } = useMultiForm({
requiredFields,
defaultData: { customerSupport: {
phoneNumber: legalEntity[legalEntityType]?.support?.phone,
email: legalEntity[legalEntityType]?.support?.email
} },
rules: validators,
asyncRules: asyncValidators
});
/**
* Analytics
*/
useTaskLandedEvent("CUSTOMER_SUPPORT");
const submitForm = async () => {
const isAsyncValidationValid = await triggerValidation("customerSupport");
if (!isValid?.customerSupport || !isAsyncValidationValid) return;
const support = mapCustomerSupportSchemaToCustomerSupportType(data);
const payload = { [legalEntityType]: { support } };
try {
await updateLegalEntity({
...payload,
id: legalEntity.id
});
queryClient.invalidateQueries({ queryKey: ["legalEntity", legalEntity?.id] });
onSubmit();
userEvents.addTaskEvent("Success", { actionType: "submit" });
} catch {
const label = t(($) => $["failedToUpdateDetails"]);
logger.error(label, payload);
showToast({
label,
variant: "error"
});
}
};
const handleFieldChange = (fieldName, mode) => handleChangeFor(fieldName, "customerSupport", mode);
return /* @__PURE__ */ jsxs("form", {
className: "adyen-kyc-individual__customer-support",
"aria-describedby": "ariaErrorField",
children: [
/* @__PURE__ */ jsx(Header, {
title: t(($) => $["customerSupport"]),
description: t(($) => $["howYourCustomersCanReachYou"])
}),
/* @__PURE__ */ jsx(ErrorPanel, {
verificationErrors: problems?.verificationErrors?.["customerSupport"],
formUtils,
id: "ariaErrorField"
}),
/* @__PURE__ */ jsx(ContactDetails, {
data: data.customerSupport,
errors: errors.customerSupport,
valid: valid.customerSupport,
country,
requiredFields: requiredFields?.customerSupport,
handleFieldChange
}),
/* @__PURE__ */ jsx(ActionBar, {
onNext: submitForm,
nextButtonLabel: t(($) => $["submit"])
})
]
});
}
//#endregion
export { CustomerSupport };