@adyen/kyc-components/dist/CustomerSupport-C8-aUKX8.js

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.

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] = "3b4c0902-b8fe-420d-a8b8-5a16aaefa5fb", e._sentryDebugIdIdentifier = "sentry-dbid-3b4c0902-b8fe-420d-a8b8-5a16aaefa5fb");
} catch (e) {}
import { o as createLogger, r as useTranslation } from "./translation-BYvhW5zA.js";
import { k as Header } from "./resolveEnvironment-DNmu53Rr.js";
import { r as Loader, t as Button } from "./Button-i8I2dHP8.js";
import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-CtlUQv_J.js";
import { C as EntityTypes } from "./processCapabilities-fPuXc9gL.js";
import { i as useAnalyticsContext } from "./Modal-BLP2aF-u.js";
import { n as useToastContext } from "./invalidateRootLegalEntity-DLpPeD5p.js";
import { n as useCapabilityProblems, t as getProblemsForEntity } from "./getProblemsForEntity-D6XC4DZ2.js";
import { t as useUpdateLegalEntity } from "./useUpdateLegalEntity-B0XYfxbB.js";
import { a as contactDetailsValidationRules, c as getAsyncPhoneValidationRules, o as defaultFieldMetadata, s as fieldConfig, t as ContactDetails, u as useValidatePhoneNumberImperatively } from "./ContactDetails-BJgD_bMt.js";
import { t as ErrorPanel } from "./ErrorPanel-DGlzO81g.js";
import { t as createFormUtils } from "./formUtils-DVc3a6gf.js";
import { t as useMultiForm } from "./useMultiForm-ducdUyQ6.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-BXtOctC4.js";
import { t as resolveFieldMetadata } from "./fieldConfigurations-CZCFghnK.js";
import { t as Spacer } from "./Spacer-CEHRO4Ml.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("customerSupport", fieldName, mode);
	return /* @__PURE__ */ jsxs("form", {
		"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__ */ jsxs("div", {
				class: "u-display-flex u-margin-top-48",
				children: [/* @__PURE__ */ jsx(Spacer, {}), /* @__PURE__ */ jsx(Button, {
					onClick: submitForm,
					children: t(($) => $["submit"])
				})]
			})
		]
	});
}
//#endregion
export { CustomerSupport };