@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.
165 lines (164 loc) • 6.58 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] = "bce0a745-7488-4356-8b92-15e298b8a322", e._sentryDebugIdIdentifier = "sentry-dbid-bce0a745-7488-4356-8b92-15e298b8a322");
} catch (e) {}
import { r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as Button } from "./Button-oj6H8OrC.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as useToggleContext } from "./useToggleContext-DaQUBF8O.js";
import { t as StateContext } from "./StateContext-BToC3V53.js";
import { t as LoaderWrapper } from "./LoaderWrapper-Dq8TNJCi.js";
import { i as ModalHeader, n as ModalContent, r as ModalFooter } from "./Modal-CioQJ7Q7.js";
import { r as FormRouterContextProvider } from "./dropinUtils-IdasFZCU.js";
import { n as summaryStep, t as Summary } from "./Summary-B5IkOGJV.js";
import { t as MaybeModal } from "./MaybeModal-CeTBIah3.js";
import { n as debounce } from "./debouncedInputEvent-Dxv4-RAv.js";
import { t as Spacer } from "./Spacer-CvT0ELty.js";
import { t as FormNavigation } from "./FormNavigation-ikhirSjM.js";
import { t as StepProgressIndicator } from "./StepProgressIndicator-DWJ9eS5a.js";
import { useCallback, useContext, useMemo, useState } from "preact/hooks";
import { jsx, jsxs } from "preact/jsx-runtime";
//#region src/context/StateContext/useStateContext.ts
function useStateContext() {
return useContext(StateContext);
}
//#endregion
//#region src/components/Shared/FormWrapper/FormWrapper.tsx
/** @deprecated migrate to useMultiForm hook and FormFlow ui component*/
var FormWrapper = ({ asModal = false, summary, taskName, children, handleNextClick, handleBackClick, handleCloseClick, handleHomeClick, loadingStatus, gotoFormByFormIndex, gotoFormByFormId, forms, activeForm, validateForm, hideSidebar, hideFooter, canSubmit, onSubmit, problems, steps, showBackButton, hideNextButton, hideHomeButton }) => {
const { t } = useTranslation("common");
const userEvents = useAnalyticsContext();
const { data: summaryData, omitted, labels } = summary || {};
const [finishLaterLoading, setFinishLaterLoading] = useState(false);
const showLegalCaption = [
"solePropDetails",
"companyDetails",
"businessDetails"
].includes(taskName);
const { isFeatureEnabled } = useToggleContext();
const summaryContent = /* @__PURE__ */ jsx("div", {
className: "adyen-kyc-form-wrapper",
children: /* @__PURE__ */ jsx(Summary, {
data: summaryData,
omitted,
forms,
gotoForm: gotoFormByFormIndex,
labels,
problems,
showLegalCaption,
showTaxExemptedLegalCaption: isFeatureEnabled("ShowExtraTaxExemptionReasons") && summaryData?.companyRegistrationDetails?.vatAbsenceReason && ["companyDetails", "businessDetails"].includes(taskName)
})
});
const onHomeClick = () => {
setFinishLaterLoading(true);
userEvents.addPageEvent("Clicked button", {
actionType: "save",
label: "finishLater"
});
if (canSubmit) onSubmit().then(() => {
setFinishLaterLoading(false);
});
else {
handleHomeClick?.();
setFinishLaterLoading(false);
}
};
const isFirstStep = steps.current === 0;
const isFinalStep = steps.current === steps.total - 1;
return /* @__PURE__ */ jsxs(MaybeModal, {
inline: !asModal,
onClose: handleCloseClick,
size: "large",
children: [/* @__PURE__ */ jsxs(ModalContent, { children: [/* @__PURE__ */ jsx(ModalHeader, {}), /* @__PURE__ */ jsx(LoaderWrapper, {
status: loadingStatus,
formOpacityWhenLoading: .3,
loaderSize: "large",
children: /* @__PURE__ */ jsxs("div", {
className: !hideSidebar ? "adyen-kyc-form-with-sidebar" : "",
children: [!asModal && !hideSidebar && /* @__PURE__ */ jsx("div", {
className: "adyen-kyc-dropin__sidebar-wrapper",
children: /* @__PURE__ */ jsx(FormNavigation, {
forms,
activeForm,
gotoForm: gotoFormByFormIndex,
validateForm,
taskName,
verificationErrors: problems?.verificationErrors
})
}), /* @__PURE__ */ jsxs(FormRouterContextProvider, {
setFormIndex: gotoFormByFormIndex,
goToFormByFormId: gotoFormByFormId,
forms,
children: [children, activeForm.formId === summaryStep.formId && summary && summaryContent]
})]
})
})] }), !hideFooter && /* @__PURE__ */ jsxs(ModalFooter, { children: [
/* @__PURE__ */ jsx("div", {
style: {
width: "30%",
display: asModal ? "unset" : "none"
},
children: /* @__PURE__ */ jsx(StepProgressIndicator, {
activeStepIndex: steps.current ?? 0,
stepsCount: steps.total,
fillBefore: true,
thick: true
})
}),
(!isFirstStep || showBackButton) && handleBackClick && /* @__PURE__ */ jsx(Button, {
icon: "chevron-left",
variant: "secondary",
onClick: handleBackClick,
children: t(($) => $["back"])
}),
/* @__PURE__ */ jsx(Spacer, {}),
!isFirstStep && !isFinalStep && !hideHomeButton && /* @__PURE__ */ jsx(Button, {
variant: "secondary",
icon: "save",
onClick: onHomeClick,
loading: finishLaterLoading,
children: t(($) => $["finishLater"])
}),
!isFinalStep && !hideNextButton && /* @__PURE__ */ jsx(Button, {
onClick: handleNextClick,
children: t(($) => $["continue"])
}),
isFinalStep && /* @__PURE__ */ jsx(Button, {
onClick: handleNextClick,
children: t(($) => $["submit"])
})
] })]
});
};
//#endregion
//#region src/context/StateContext/useGlobalData.ts
function useGlobalData() {
const { getData } = useStateContext();
return getData();
}
function useGlobalDataSlice(sliceId) {
const { dispatch, getData } = useStateContext();
const sliceData = getData()[sliceId];
const updateState = useCallback((updatedSlice) => dispatch({
type: "addToState",
value: {
...updatedSlice,
dataStoreId: sliceId
}
}), [sliceId]);
const clearState = useCallback(() => dispatch({
type: "removeFromState",
value: { dataStoreId: sliceId }
}), [sliceId]);
return {
sliceData,
updateStateSlice: useMemo(() => debounce(updateState, 200), [updateState]),
clearStateSlice: useMemo(() => debounce(clearState, 200), [clearState])
};
}
function useResetGlobalData() {
const { dispatch } = useStateContext();
return useCallback(() => dispatch({ type: "resetState" }), [dispatch]);
}
//#endregion
export { useStateContext as a, FormWrapper as i, useGlobalDataSlice as n, useResetGlobalData as r, useGlobalData as t };