@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.
179 lines (178 loc) • 6.99 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] = "00f73e51-9dd2-4e84-9f42-32c11149e0b3", e._sentryDebugIdIdentifier = "sentry-dbid-00f73e51-9dd2-4e84-9f42-32c11149e0b3");
} 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 LoaderWrapper } from "./LoaderWrapper-Dq8TNJCi.js";
import { t as Confirm } from "./Confirm-B6TWSuab.js";
import { r as FormRouterContextProvider } from "./dropinUtils-IdasFZCU.js";
import { t as Summary } from "./Summary-B5IkOGJV.js";
import { t as MaybeModal } from "./MaybeModal-CeTBIah3.js";
import { t as ProgressBar } from "./ProgressBar-BlxQvN7D.js";
import { useContext, useMemo, useRef, useState } from "preact/hooks";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
import { createContext } from "preact";
//#region src/context/FormContext/FormContext.ts
var FormContext = createContext(null);
//#endregion
//#region src/context/FormContext/FormContextProvider.tsx
function FormContextProvider({ children, form }) {
const contextValue = useMemo(() => ({ form }), [form]);
return /* @__PURE__ */ jsx(FormContext.Provider, {
value: contextValue,
children
});
}
var FormFlow_module_default = {
"form-flow": "adyen-kyc-form-flow",
formFlow: "adyen-kyc-form-flow",
"form-flow-content": "adyen-kyc-form-flow-content",
formFlowContent: "adyen-kyc-form-flow-content",
"form-flow-footer": "adyen-kyc-form-flow-footer",
formFlowFooter: "adyen-kyc-form-flow-footer",
"form-flow-footer-border": "adyen-kyc-form-flow-footer-border",
formFlowFooterBorder: "adyen-kyc-form-flow-footer-border",
"form-flow-actions": "adyen-kyc-form-flow-actions",
formFlowActions: "adyen-kyc-form-flow-actions",
"form-flow-primary-actions": "adyen-kyc-form-flow-primary-actions",
formFlowPrimaryActions: "adyen-kyc-form-flow-primary-actions"
};
//#endregion
//#region src/components/Shared/FormFlow/FormFlow.tsx
var FormFlow = ({ asModal = false, children, currentStep = 0, disableBackButton, disableNextButton, nextButtonLoading = false, forms, activeForm, gotoFormByFormIndex, gotoFormByFormId, handleBackClick, handleCancelClick, handleNextClick, loadingStatus, summary, summaryComponent, totalSteps = 1 }) => {
const contentRef = useRef(null);
const userEvents = useAnalyticsContext();
const { t } = useTranslation("common");
const [isConfirmPresented, setIsConfirmPresented] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const isActionDisabled = isSubmitting || isConfirmPresented || loadingStatus === "loading";
const hasBackButton = !!handleBackClick;
const hasCancelButton = !!handleCancelClick;
const isFirstStep = currentStep === 0;
const isLastStep = currentStep === totalSteps - 1;
const isSingleStepForm = totalSteps < 2;
const progress = Math.floor(currentStep / (totalSteps - 1) * 100);
const scrollToTop = () => {
if (contentRef.current) contentRef.current.scroll({
top: 0,
behavior: "smooth"
});
};
const handleSubmit = () => {
setIsSubmitting(true);
Promise.resolve(handleNextClick()).then(() => {
setIsSubmitting(false);
scrollToTop();
});
};
const handleNext = () => {
scrollToTop();
handleNextClick();
};
const handleBack = () => {
scrollToTop();
handleBackClick?.();
};
const handleDismiss = () => {
if (!hasCancelButton) return;
setIsConfirmPresented(true);
};
const handleCancelDismiss = () => {
userEvents.addPageEvent("Closed modal", {
actionType: "close",
label: "cancel"
});
setIsConfirmPresented(false);
};
const handleConfirmDismiss = () => {
userEvents.addPageEvent("Clicked button", {
actionType: "navigate",
label: "leave"
});
setIsConfirmPresented(false);
handleCancelClick?.();
};
const footerClassName = cx(FormFlow_module_default.formFlowFooter, { [FormFlow_module_default.formFlowFooterBorder]: isSingleStepForm });
return /* @__PURE__ */ jsxs(MaybeModal, {
inline: !asModal,
onClose: handleDismiss,
size: "large",
showCloseButton: hasCancelButton,
children: [/* @__PURE__ */ jsxs("div", {
ref: contentRef,
className: FormFlow_module_default.formFlow,
"data-form-valid": activeForm.isValid,
"data-testid": "form-flow",
children: [/* @__PURE__ */ jsx("div", {
className: FormFlow_module_default.formFlowContent,
children: /* @__PURE__ */ jsx(LoaderWrapper, {
status: loadingStatus,
formOpacityWhenLoading: 0,
loaderSize: "large",
children: /* @__PURE__ */ jsx(FormRouterContextProvider, {
forms,
setFormIndex: gotoFormByFormIndex,
goToFormByFormId: gotoFormByFormId,
children: isLastStep ? summaryComponent ? summaryComponent : summary !== void 0 ? /* @__PURE__ */ jsx(Summary, {
...summary,
forms,
gotoForm: gotoFormByFormIndex
}) : children : children
})
})
}), /* @__PURE__ */ jsxs("div", {
className: footerClassName,
children: [!isSingleStepForm && /* @__PURE__ */ jsx(ProgressBar, {
ariaLabel: t(($) => $["progress"]),
progress
}), /* @__PURE__ */ jsxs("div", {
className: FormFlow_module_default.formFlowActions,
children: [
isFirstStep && hasCancelButton && /* @__PURE__ */ jsx(Button, {
disabled: isActionDisabled || disableBackButton,
onClick: handleDismiss,
variant: "secondary",
children: t(($) => $["cancel"])
}),
!isFirstStep && hasBackButton && /* @__PURE__ */ jsx(Button, {
disabled: isActionDisabled || disableBackButton,
icon: "chevron-left",
onClick: handleBack,
variant: "secondary",
children: t(($) => $["back"])
}),
/* @__PURE__ */ jsx("div", {
className: FormFlow_module_default.formFlowPrimaryActions,
children: isLastStep ? /* @__PURE__ */ jsx(Button, {
onClick: handleSubmit,
loading: isSubmitting,
children: t(($) => $["submit"])
}) : /* @__PURE__ */ jsx(Button, {
onClick: handleNext,
disabled: isActionDisabled || disableNextButton,
loading: nextButtonLoading,
children: t(($) => $["continue"])
})
})
]
})]
})]
}), isConfirmPresented && /* @__PURE__ */ jsx(Confirm, {
confirmText: t(($) => $["leave"]),
description: t(($) => $["unsavedChangesDescription"]),
onCancel: handleCancelDismiss,
onConfirm: handleConfirmDismiss,
title: t(($) => $["unsavedChanges"])
})]
});
};
//#endregion
//#region src/context/FormContext/useFormContext.ts
function useFormContext() {
return useContext(FormContext);
}
//#endregion
export { FormFlow as n, FormContextProvider as r, useFormContext as t };