astra-sdk-web 1.1.9 → 1.1.11

package/dist/components.cjs.js

@@ -89,15 +89,21 @@ var KycApiService = class {
       );
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        const message = errorData?.message || `Face upload failed with status ${response.status}`;
+        const message = errorData?.message || errorData?.errorData?.message || `Face upload failed with status ${response.status}`;
         const error = new Error(message);
         error.statusCode = response.status;
         error.errorData = errorData;
+        if (errorData.statusCode) {
+          error.statusCode = errorData.statusCode;
+        }
         throw error;
       }
       const data = await response.json();
       return data;
     } catch (error) {
+      if (error.message && !error.message.includes("Face upload failed")) {
+        throw error;
+      }
       const message = error?.message || "Face upload failed";
       throw new Error(`Face upload failed: ${message}`);
     }
@@ -137,6 +143,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
    */
@@ -411,6 +447,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,
@@ -426,6 +463,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) {
@@ -444,11 +490,18 @@ function DocumentUploadModal({ onComplete }) {
       try {
         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)) {
-          console.log("Document already uploaded");
+          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");
@@ -464,6 +517,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" }),
@@ -1114,8 +1175,29 @@ function useFaceScan(videoRef, canvasRef, callbacks) {
             livenessInstruction: "Face captured and uploaded successfully!",
             loading: false
           }));
+          if (callbacks?.onFaceCaptureComplete) {
+            callbacks.onFaceCaptureComplete(dataUrl);
+          }
+          setTimeout(() => {
+            setState((prev) => ({ ...prev, showDocumentUpload: true }));
+          }, 500);
         } catch (uploadError) {
-          throw new Error(uploadError.message || "Failed to upload face scan");
+          if (uploadError.message === "FACE_ALREADY_REGISTERED" || uploadError.isFaceAlreadyRegistered) {
+            setState((prev) => ({
+              ...prev,
+              loading: false,
+              allStepsCompleted: false,
+              showDocumentUpload: false,
+              livenessInstruction: "Face already registered. Please click Retry to register again."
+            }));
+            return;
+          }
+          setState((prev) => ({
+            ...prev,
+            livenessInstruction: uploadError.message || "Error capturing image. Please try again.",
+            loading: false
+          }));
+          throw uploadError;
         }
       } else {
         setState((prev) => ({
@@ -1125,13 +1207,13 @@ function useFaceScan(videoRef, canvasRef, callbacks) {
           livenessInstruction: "Face captured successfully!",
           loading: false
         }));
+        if (callbacks?.onFaceCaptureComplete) {
+          callbacks.onFaceCaptureComplete(dataUrl);
+        }
+        setTimeout(() => {
+          setState((prev) => ({ ...prev, showDocumentUpload: true }));
+        }, 500);
       }
-      if (callbacks?.onFaceCaptureComplete) {
-        callbacks.onFaceCaptureComplete(dataUrl);
-      }
-      setTimeout(() => {
-        setState((prev) => ({ ...prev, showDocumentUpload: true }));
-      }, 500);
     } catch (err) {
       console.error("Error capturing image:", err);
       setState((prev) => ({
@@ -1300,6 +1382,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) => {
@@ -1311,12 +1396,18 @@ function FaceScanModal({ onComplete }) {
       } catch (error) {
         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")) {
+        const statusCode = error?.statusCode;
+        const isFaceAlreadyRegistered = errorMessage.includes("Face already registered") || errorMessage.includes("already registered") || errorData?.message?.includes("Face already registered") || statusCode === 500 && errorMessage.includes("Face already registered");
+        if (isFaceAlreadyRegistered) {
+          setShowRetryButton(true);
           setToast({
-            message: "Face already registered",
+            message: "Face already registered. Click Retry to register again.",
             type: "warning"
           });
-          return;
+          setState((prev) => ({ ...prev, loading: false, allStepsCompleted: false, showDocumentUpload: false }));
+          const faceRegisteredError = new Error("FACE_ALREADY_REGISTERED");
+          faceRegisteredError.isFaceAlreadyRegistered = true;
+          throw faceRegisteredError;
         }
         throw error;
       }
@@ -1336,6 +1427,10 @@ function FaceScanModal({ onComplete }) {
         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;
@@ -1383,7 +1478,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,
@@ -1409,6 +1544,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,
@@ -1471,13 +1614,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"
           }
         ),
@@ -1485,9 +1638,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"
           }
         )