astra-sdk-web 1.1.8 → 1.1.10

package/dist/components.cjs.js

@@ -14,6 +14,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 // src/components/KycFlow.tsx
 
 // src/services/kycApiService.ts
+var COMPLETED_STEPS = {
+  INITIATED: "initiated",
+  FACE: "face_scan",
+  DOCS: "document_upload",
+  COMPLETED: "completed"
+};
 var KycApiService = class {
   config;
   constructor(config) {
@@ -131,6 +137,36 @@ var KycApiService = class {
       throw new Error(`Document upload failed: ${message}`);
     }
   }
+  /**
+   * Retry session - resets the session to allow face registration again
+   */
+  async retrySession() {
+    const deviceType = this.config.deviceType || this.detectDeviceType();
+    try {
+      const response = await fetch(
+        `${this.config.apiBaseUrl}/api/v2/dashboard/merchant/onsite/session/${this.config.sessionId}/retry`,
+        {
+          method: "POST",
+          headers: {
+            "x-server-key": this.config.serverKey,
+            "device-type": deviceType,
+            "Content-Type": "application/json"
+          },
+          credentials: "include"
+        }
+      );
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const message = errorData?.message || `Retry failed with status ${response.status}`;
+        throw new Error(message);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      const message = error?.message || "Retry failed";
+      throw new Error(`Retry failed: ${message}`);
+    }
+  }
   /**
    * Check if session is active, throw error if not
    */
@@ -405,6 +441,7 @@ function DocumentUploadModal({ onComplete }) {
   const navigate = reactRouterDom.useNavigate();
   const { apiService } = useKycContext();
   const [sessionError, setSessionError] = React.useState(null);
+  const [kycCompleted, setKycCompleted] = React.useState(false);
   const {
     state,
     setState,
@@ -420,6 +457,15 @@ function DocumentUploadModal({ onComplete }) {
         throw new Error("API service not initialized");
       }
       await apiService.uploadDocument(blob, docType);
+      try {
+        const statusResponse = await apiService.getSessionStatus();
+        const { completed_steps, status } = statusResponse.data;
+        if (status === "COMPLETED" || completed_steps.includes(COMPLETED_STEPS.COMPLETED)) {
+          setKycCompleted(true);
+        }
+      } catch (error) {
+        console.error("Error checking completion status:", error);
+      }
     },
     onUpload: (file, docType) => {
       if (onComplete) {
@@ -436,7 +482,24 @@ function DocumentUploadModal({ onComplete }) {
     const checkSession = async () => {
       if (!apiService) return;
       try {
-        await apiService.checkSessionActive();
+        const statusResponse = await apiService.getSessionStatus();
+        const { completed_steps, next_step, status } = statusResponse.data;
+        if (status === "COMPLETED" || completed_steps.includes(COMPLETED_STEPS.COMPLETED)) {
+          setKycCompleted(true);
+          return;
+        }
+        if (status !== "ACTIVE") {
+          throw new Error("Session expired or inactive");
+        }
+        if (completed_steps.includes(COMPLETED_STEPS.DOCS)) {
+          if (completed_steps.includes(COMPLETED_STEPS.FACE) && completed_steps.includes(COMPLETED_STEPS.DOCS)) {
+            setKycCompleted(true);
+            return;
+          }
+        }
+        if (next_step === COMPLETED_STEPS.FACE && !completed_steps.includes(COMPLETED_STEPS.FACE)) {
+          console.warn("Face scan not completed, but in document upload modal");
+        }
         setSessionError(null);
       } catch (error) {
         const message = error.message || "Session expired or inactive";
@@ -448,6 +511,14 @@ function DocumentUploadModal({ onComplete }) {
     };
     checkSession();
   }, [apiService, navigate]);
+  if (kycCompleted) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black p-5 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-6xl", children: "\u2705" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 mb-4 text-[26px] font-bold text-green-500", children: "KYC Completed" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#e5e7eb] mb-4 text-lg", children: "All steps have been completed successfully." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#9ca3af] text-sm mb-6", children: "Please return to your desktop to continue." })
+    ] }) }) });
+  }
   if (sessionError) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black p-4 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 mb-4 text-[26px] font-bold text-red-500", children: "Session Expired" }),
@@ -882,7 +953,8 @@ var FaceMeshService = class {
           }
         }
       } else if (state.stage === "DONE") {
-        if (absYaw < centerThreshold && insideGuide) {
+        const reducedThreshold = 0.08;
+        if (absYaw < reducedThreshold) {
           state.centerHold += 1;
           if (state.centerHold >= holdFramesCenter && !state.snapTriggered) {
             state.snapTriggered = true;
@@ -896,11 +968,7 @@ var FaceMeshService = class {
         } else {
           state.centerHold = 0;
           if (this.callbacks.onLivenessUpdate) {
-            if (!insideGuide) {
-              this.callbacks.onLivenessUpdate(state.stage, "Center your face inside the circle");
-            } else {
-              this.callbacks.onLivenessUpdate(state.stage, "Please look straight at the camera");
-            }
+            this.callbacks.onLivenessUpdate(state.stage, "Please look straight at the camera");
           }
         }
       }
@@ -1062,7 +1130,7 @@ function useFaceScan(videoRef, canvasRef, callbacks) {
   }, []);
   const handleFaceCapture = React.useCallback(async () => {
     if (!videoRef.current) return;
-    const centerThreshold = 0.05;
+    const reducedThreshold = 0.08;
     const currentAbsYaw = livenessStateRef.current.currentAbsYaw;
     if (currentAbsYaw === null || currentAbsYaw === void 0) {
       setState((prev) => ({
@@ -1071,7 +1139,7 @@ function useFaceScan(videoRef, canvasRef, callbacks) {
       }));
       return;
     }
-    if (currentAbsYaw >= centerThreshold) {
+    if (currentAbsYaw >= reducedThreshold) {
       setState((prev) => ({
         ...prev,
         livenessInstruction: "Please look straight at the camera before capturing"
@@ -1287,6 +1355,9 @@ function FaceScanModal({ onComplete }) {
   const { apiService } = useKycContext();
   const [sessionError, setSessionError] = React.useState(null);
   const [toast, setToast] = React.useState(null);
+  const [showRetryButton, setShowRetryButton] = React.useState(false);
+  const [isRetrying, setIsRetrying] = React.useState(false);
+  const [kycCompleted, setKycCompleted] = React.useState(false);
   const { videoRef, cameraReady, stopCamera } = useCamera();
   const { state, setState, refs, handleFaceCapture } = useFaceScan(videoRef, faceCanvasRef, {
     onFaceUpload: async (blob) => {
@@ -1299,10 +1370,12 @@ function FaceScanModal({ onComplete }) {
         const errorMessage = error?.message || "";
         const errorData = error?.errorData || {};
         if (errorMessage.includes("Face already registered") || errorMessage.includes("already registered") || errorData?.message?.includes("Face already registered") || error?.statusCode === 500 && errorMessage.includes("Face")) {
+          setShowRetryButton(true);
           setToast({
-            message: "Face already registered",
+            message: "Face already registered. Click Retry to register again.",
             type: "warning"
           });
+          setState((prev) => ({ ...prev, loading: false }));
           return;
         }
         throw error;
@@ -1318,7 +1391,25 @@ function FaceScanModal({ onComplete }) {
     const checkSession = async () => {
       if (!apiService) return;
       try {
-        await apiService.checkSessionActive();
+        const statusResponse = await apiService.getSessionStatus();
+        const { completed_steps, next_step, status } = statusResponse.data;
+        if (status !== "ACTIVE") {
+          throw new Error("Session expired or inactive");
+        }
+        if (status === "COMPLETED" || completed_steps.includes(COMPLETED_STEPS.COMPLETED)) {
+          setKycCompleted(true);
+          return;
+        }
+        if (completed_steps.includes(COMPLETED_STEPS.FACE)) {
+          setState((prev) => ({ ...prev, showDocumentUpload: true }));
+          return;
+        }
+        if (next_step !== COMPLETED_STEPS.FACE && next_step !== COMPLETED_STEPS.INITIATED) {
+          if (next_step === COMPLETED_STEPS.DOCS) {
+            setState((prev) => ({ ...prev, showDocumentUpload: true }));
+            return;
+          }
+        }
         setSessionError(null);
       } catch (error) {
         const message = error.message || "Session expired or inactive";
@@ -1329,7 +1420,7 @@ function FaceScanModal({ onComplete }) {
       }
     };
     checkSession();
-  }, [apiService, navigate]);
+  }, [apiService, navigate, setState]);
   React.useEffect(() => {
     setState((prev) => ({ ...prev, cameraReady }));
   }, [cameraReady, setState]);
@@ -1356,7 +1447,47 @@ function FaceScanModal({ onComplete }) {
       }
     }
   }, [cameraReady, apiService]);
-  const handleRetry = () => {
+  const handleRetry = async () => {
+    if (!apiService || isRetrying) return;
+    setIsRetrying(true);
+    setShowRetryButton(false);
+    setToast(null);
+    try {
+      await apiService.retrySession();
+      stopCamera();
+      setState({
+        cameraReady: false,
+        livenessStage: "CENTER",
+        livenessReady: false,
+        livenessFailed: false,
+        modelLoading: true,
+        modelLoaded: false,
+        livenessInstruction: "Look straight at the camera",
+        loading: false,
+        allStepsCompleted: false,
+        capturedImage: null,
+        showDocumentUpload: false
+      });
+      refs.centerHold.current = 0;
+      refs.leftHold.current = 0;
+      refs.rightHold.current = 0;
+      refs.snapTriggered.current = false;
+      refs.lastResultsAt.current = 0;
+      refs.modelLoaded.current = false;
+      refs.livenessFailed.current = false;
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
+    } catch (error) {
+      setIsRetrying(false);
+      setShowRetryButton(true);
+      setToast({
+        message: error?.message || "Retry failed. Please try again.",
+        type: "error"
+      });
+    }
+  };
+  const handleRestart = () => {
     stopCamera();
     setState({
       cameraReady: false,
@@ -1382,6 +1513,14 @@ function FaceScanModal({ onComplete }) {
       window.location.reload();
     }, 100);
   };
+  if (kycCompleted) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black p-5 z-[1000] flex items-center justify-center font-sans overflow-y-auto custom__scrollbar", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[400px] w-full mx-auto bg-[#0b0f17] rounded-2xl p-6 shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-6xl", children: "\u2705" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 mb-4 text-[26px] font-bold text-green-500", children: "KYC Completed" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#e5e7eb] mb-4 text-lg", children: "All steps have been completed successfully." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#9ca3af] text-sm mb-6", children: "Please return to your desktop to continue." })
+    ] }) }) });
+  }
   if (state.showDocumentUpload) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DocumentUploadModal_default,
@@ -1444,13 +1583,23 @@ function FaceScanModal({ onComplete }) {
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: state.livenessStage === "DONE" ? "opacity-100" : "opacity-30", children: "3. Turn your face left" })
           ] })
         ] }),
+        showRetryButton && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleRetry,
+            disabled: isRetrying || state.loading,
+            className: "py-3.5 px-4 rounded-xl text-base font-bold border-none transition-colors bg-[#f59e0b] text-[#0b0f17] cursor-pointer hover:bg-[#d97706] disabled:opacity-50 disabled:cursor-not-allowed",
+            children: isRetrying ? "Retrying..." : "Retry Face Registration"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            disabled: !state.cameraReady || state.loading || !state.livenessFailed && state.livenessStage !== "DONE",
+            disabled: !state.cameraReady || state.loading || !state.livenessFailed && state.livenessStage !== "DONE" || showRetryButton,
             onClick: handleFaceCapture,
-            className: `py-3.5 px-4 rounded-xl text-base font-bold border-none transition-colors ${state.cameraReady && !state.loading && (state.livenessFailed || state.livenessStage === "DONE") ? "bg-[#22c55e] text-[#0b0f17] cursor-pointer hover:bg-[#16a34a]" : "bg-[#374151] text-[#e5e7eb] cursor-not-allowed"}`,
+            className: `py-3.5 px-4 rounded-xl text-base font-bold border-none transition-colors ${state.cameraReady && !state.loading && (state.livenessFailed || state.livenessStage === "DONE") && !showRetryButton ? "bg-[#22c55e] text-[#0b0f17] cursor-pointer hover:bg-[#16a34a]" : "bg-[#374151] text-[#e5e7eb] cursor-not-allowed"}`,
             children: state.loading ? "Capturing..." : state.livenessFailed || state.livenessStage === "DONE" ? "Capture & Continue" : "Complete steps to continue"
           }
         ),
@@ -1458,9 +1607,9 @@ function FaceScanModal({ onComplete }) {
           "button",
           {
             type: "button",
-            onClick: handleRetry,
-            disabled: state.loading,
-            className: `py-3 px-4 rounded-[10px] text-[15px] font-semibold border-none w-full transition-colors ${state.loading ? "bg-[#374151] text-[#e5e7eb] cursor-not-allowed opacity-50" : "bg-[#374151] text-[#e5e7eb] cursor-pointer hover:bg-[#4b5563]"}`,
+            onClick: handleRestart,
+            disabled: state.loading || isRetrying,
+            className: `py-3 px-4 rounded-[10px] text-[15px] font-semibold border-none w-full transition-colors ${state.loading || isRetrying ? "bg-[#374151] text-[#e5e7eb] cursor-not-allowed opacity-50" : "bg-[#374151] text-[#e5e7eb] cursor-pointer hover:bg-[#4b5563]"}`,
             children: "Restart"
           }
         )