@adyen/kyc-components/dist/CustomerSupport-CJNWyhvH.js

`adyen-kyc-components` provides the required pieces to build an onboarding flow based on a legal entity. To onboard and verify users, you need to create a user interface (UI) to collect user data. To speed up building your integration, Adyen offers onboar

;
{
  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] = "f73a4d1c-17d4-4fcc-9b0a-6d1bd6d69bf0", e._sentryDebugIdIdentifier = "sentry-dbid-f73a4d1c-17d4-4fcc-9b0a-6d1bd6d69bf0");
  } catch (e) {
  }
}
;
import { jsx, jsxs } from "preact/jsx-runtime";
import { p as useLegalEntity, q as Loader, u as useI18nContext, n as useAnalyticsContext, r as useToastContext, aa as useConfigurationApi, Z as useUpdateLegalEntity, ab as useQueryClient, ac as resolveFieldMetadata, ad as contactDetailsValidationRules, ae as defaultFieldMetadata, af as fieldConfig, ag as getAsyncPhoneValidationRules, ah as useMultiForm, W as FormHeader, ai as ContactDetails, a9 as ActionBar, g as createLogger } from "./core-B_WrZP-J.js";
import { useCallback, useMemo, useEffect } from "preact/hooks";
const mapCustomerSupportSchemaToCustomerSupportType = (customerSupport) => {
  var _a, _b, _c;
  return {
    email: ((_a = customerSupport == null ? void 0 : customerSupport.customerSupport) == null ? void 0 : _a.email) || "",
    phone: {
      number: ((_c = (_b = customerSupport == null ? void 0 : customerSupport.customerSupport) == null ? void 0 : _b.phoneNumber) == null ? void 0 : _c.number) || "",
      type: "mobile"
    }
  };
};
const logger = createLogger();
const CustomerSupport = (props) => {
  const { data, isLoading } = useLegalEntity();
  if (isLoading || !data) {
    return /* @__PURE__ */ jsx(Loader, {});
  }
  return /* @__PURE__ */ jsx(CustomerSupportInner, { ...props, legalEntity: data });
};
function CustomerSupportInner({
  country,
  onSubmit,
  legalEntity
}) {
  var _a, _b, _c, _d;
  const { i18n } = useI18nContext();
  const userEvents = useAnalyticsContext();
  const { showToast } = useToastContext();
  const { validatePhoneNumber } = useConfigurationApi();
  const { mutateAsync: updateLegalEntity } = useUpdateLegalEntity();
  const queryClient = useQueryClient();
  const requiredFields = {
    customerSupport: ["email", "phoneNumber"]
  };
  const validators = useCallback(
    (data2) => {
      var _a2, _b2, _c2;
      return {
        customerSupport: {
          ...contactDetailsValidationRules,
          phoneNumber: (_c2 = resolveFieldMetadata(
            fieldConfig[((_b2 = (_a2 = data2 == null ? void 0 : data2.customerSupport) == null ? void 0 : _a2.phoneNumber) == null ? void 0 : _b2.phoneCountryCode) ?? country],
            {},
            defaultFieldMetadata
          )) == null ? void 0 : _c2.validators
        }
      };
    },
    [country]
  );
  const asyncValidators = useMemo(
    () => ({
      customerSupport: {
        phoneNumber: getAsyncPhoneValidationRules(validatePhoneNumber).phoneNumber
      }
    }),
    [validatePhoneNumber]
  );
  const legalEntityType = legalEntity.type;
  const defaultCustomerSupportData = {
    customerSupport: {
      phoneNumber: (_b = (_a = legalEntity[legalEntityType]) == null ? void 0 : _a.support) == null ? void 0 : _b.phone,
      email: (_d = (_c = legalEntity[legalEntityType]) == null ? void 0 : _c.support) == null ? void 0 : _d.email
    }
  };
  const { data, handleChangeFor, valid, errors, isValid, triggerValidation } = useMultiForm({
    requiredFields,
    defaultData: defaultCustomerSupportData,
    rules: validators,
    asyncRules: asyncValidators
  });
  useEffect(() => {
    userEvents.addTaskEvent("Landed on page", {
      actionType: "start"
    });
  }, [userEvents]);
  const submitForm = async () => {
    const isAsyncValidationValid = await triggerValidation("customerSupport");
    if (!(isValid == null ? void 0 : isValid.customerSupport) || !isAsyncValidationValid) {
      return;
    }
    const support = mapCustomerSupportSchemaToCustomerSupportType(data);
    const payload = {
      [legalEntityType]: { support }
    };
    try {
      const patchLegalEntity = {
        ...payload,
        id: legalEntity.id
      };
      await updateLegalEntity(patchLegalEntity);
      queryClient.invalidateQueries({ queryKey: ["legalEntity", legalEntity == null ? void 0 : legalEntity.id] });
      onSubmit();
      userEvents.addTaskEvent("Success", {
        actionType: "submit"
      });
    } catch {
      const label = i18n.get("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(
      FormHeader,
      {
        heading: i18n.get("customerSupport"),
        description: i18n.get("howYourCustomersCanReachYou")
      }
    ),
    /* @__PURE__ */ jsx(
      ContactDetails,
      {
        data: data.customerSupport,
        errors: errors.customerSupport,
        valid: valid.customerSupport,
        country,
        requiredFields: requiredFields == null ? void 0 : requiredFields.customerSupport,
        handleFieldChange
      }
    ),
    /* @__PURE__ */ jsx(ActionBar, { onNext: submitForm, nextButtonLabel: i18n.get("submit") })
  ] });
}
export {
  CustomerSupport
};