vesant-sdk 1.2.0 → 1.3.1

package/dist/react.mjs

@@ -1,9 +1,10 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect, createElement } from 'react';
+import { createRoot } from 'react-dom/client';
 
 // src/geolocation/hooks.ts
 
 // src/core/version.ts
-var SDK_VERSION = "1.2.0";
+var SDK_VERSION = "1.3.0";
 
 // src/shared/browser-utils.ts
 function generateUUID() {
@@ -847,6 +848,288 @@ function useCustomerProfile(client, customerId, options = {}) {
     refresh: fetchProfile
   };
 }
+
+// src/kyc/images.ts
+var Camera = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjAvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQiPg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgDQoJIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNNjAsMTBINDkuNjU2bC02LjgyOC02LjgyOEM0Mi4wNzgsMi40MjIsNDEuMDYyLDIsNDAsMkgyNGMtMS4wNjIsMC0yLjA3OCwwLjQyMi0yLjgyOCwxLjE3MkwxNC4zNDQsMTBINA0KCQljLTIuMjExLDAtNCwxLjc4OS00LDR2NDRjMCwyLjIxMSwxLjc4OSw0LDQsNGg1NmMyLjIxMSwwLDQtMS43ODksNC00VjE0QzY0LDExLjc4OSw2Mi4yMTEsMTAsNjAsMTB6IE0zMiw1MA0KCQljLTguODM2LDAtMTYtNy4xNjQtMTYtMTZzNy4xNjQtMTYsMTYtMTZzMTYsNy4xNjQsMTYsMTZTNDAuODM2LDUwLDMyLDUweiIvPg0KCTxjaXJjbGUgZmlsbD0iIzIzMUYyMCIgY3g9IjMyIiBjeT0iMzQiIHI9IjgiLz4NCjwvZz4NCjwvc3ZnPg==";
+var Done = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik04LjUgMTIuNUwxMC41IDE0LjVMMTUuNSA5LjUiIHN0cm9rZT0iIzFDMjc0QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTcgMy4zMzc4MkM4LjQ3MDg3IDIuNDg2OTcgMTAuMTc4NiAyIDEyIDJDMTcuNTIyOCAyIDIyIDYuNDc3MTUgMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiAxMC4xNzg2IDIuNDg2OTcgOC40NzA4NyAzLjMzNzgyIDciIHN0cm9rZT0iIzFDMjc0QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPg0KPC9zdmc+";
+var Close = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xNC41IDkuNTAwMDJMOS41IDE0LjVNOS40OTk5OCA5LjVMMTQuNSAxNC41IiBzdHJva2U9IiMxQzI3NEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjxwYXRoIGQ9Ik03IDMuMzM3ODJDOC40NzA4NyAyLjQ4Njk3IDEwLjE3ODYgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyQzIyIDE3LjUyMjggMTcuNTIyOCAyMiAxMiAyMkM2LjQ3NzE1IDIyIDIgMTcuNTIyOCAyIDEyQzIgMTAuMTc4NiAyLjQ4Njk3IDguNDcwODcgMy4zMzc4MiA3IiBzdHJva2U9IiMxQzI3NEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjwvc3ZnPg==";
+var Upload = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xNyAxN0gxNy4wMU0xNS42IDE0SDE4QzE4LjkzMTkgMTQgMTkuMzk3OCAxNCAxOS43NjU0IDE0LjE1MjJDMjAuMjU1NCAxNC4zNTUyIDIwLjY0NDggMTQuNzQ0NiAyMC44NDc4IDE1LjIzNDZDMjEgMTUuNjAyMiAyMSAxNi4wNjgxIDIxIDE3QzIxIDE3LjkzMTkgMjEgMTguMzk3OCAyMC44NDc4IDE4Ljc2NTRDMjAuNjQ0OCAxOS4yNTU0IDIwLjI1NTQgMTkuNjQ0OCAxOS43NjU0IDE5Ljg0NzhDMTkuMzk3OCAyMCAxOC45MzE5IDIwIDE4IDIwSDZDNS4wNjgxMiAyMCA0LjYwMjE4IDIwIDQuMjM0NjMgMTkuODQ3OEMzLjc0NDU4IDE5LjY0NDggMy4zNTUyMyAxOS4yNTU0IDMuMTUyMjQgMTguNzY1NEMzIDE4LjM5NzggMyAxNy45MzE5IDMgMTdDMyAxNi4wNjgxIDMgMTUuNjAyMiAzLjE1MjI0IDE1LjIzNDZDMy4zNTUyMyAxNC43NDQ2IDMuNzQ0NTggMTQuMzU1MiA0LjIzNDYzIDE0LjE1MjJDNC42MDIxOCAxNCA1LjA2ODEyIDE0IDYgMTRIOC40TTEyIDE1VjRNMTIgNEwxNSA3TTEyIDRMOSA3IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=";
+
+// src/kyc/FaceCaptureModal.tsx
+var fileToBase64 = (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject(error);
+  });
+};
+function FaceCaptureModal({
+  onCapture,
+  onCancel
+}) {
+  const inputRef = useRef(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isHoveringPrimary, setIsHoveringPrimary] = useState(false);
+  const [isHoveringCancel, setIsHoveringCancel] = useState(false);
+  const [isHoveringClose, setIsHoveringClose] = useState(false);
+  const isMobile = /Mobi|Android/i.test(navigator.userAgent);
+  const handleFileChange = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setIsProcessing(true);
+    try {
+      const base64 = await fileToBase64(file);
+      setTimeout(() => {
+        onCapture(base64);
+      }, 300);
+    } catch (error) {
+      console.error("Error processing image:", error);
+      setIsProcessing(false);
+    }
+  };
+  const overlayStyle = {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0, 0, 0, 0.6)",
+    backdropFilter: "blur(4px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 999999,
+    padding: "16px",
+    animation: "fadeIn 0.2s ease-out"
+  };
+  const modalStyle = {
+    background: "#ffffff",
+    borderRadius: "16px",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    width: "100%",
+    maxWidth: "448px",
+    animation: "zoomIn 0.2s ease-out"
+  };
+  const headerStyle = {
+    position: "relative",
+    padding: "24px 24px 16px",
+    borderBottom: "1px solid #f3f4f6"
+  };
+  const closeButtonStyle = {
+    position: "absolute",
+    top: "16px",
+    right: "16px",
+    padding: "8px",
+    background: isHoveringClose ? "#f3f4f6" : "transparent",
+    border: "none",
+    borderRadius: "9999px",
+    cursor: "pointer",
+    transition: "background-color 0.2s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const titleStyle = {
+    fontSize: "24px",
+    fontWeight: 600,
+    color: "#111827",
+    margin: 0
+  };
+  const subtitleStyle = {
+    fontSize: "14px",
+    color: "#6b7280",
+    marginTop: "4px"
+  };
+  const contentStyle = {
+    padding: "32px 24px"
+  };
+  const visualGuideContainerStyle = {
+    marginBottom: "32px",
+    display: "flex",
+    justifyContent: "center"
+  };
+  const visualGuideStyle = {
+    position: "relative"
+  };
+  const circleStyle = {
+    width: "128px",
+    height: "128px",
+    borderRadius: "50%",
+    background: "linear-gradient(135deg, rgba(0, 188, 125, 0.2) 0%, rgba(0, 188, 125, 0.05) 100%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const badgeStyle = {
+    position: "absolute",
+    top: "-4px",
+    right: "-4px",
+    width: "32px",
+    height: "32px",
+    background: "#ffffff",
+    borderRadius: "50%",
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const instructionsBoxStyle = {
+    background: "linear-gradient(135deg, #f9fafb 0%, rgba(243, 244, 246, 0.5) 100%)",
+    borderRadius: "12px",
+    padding: "16px",
+    marginBottom: "24px"
+  };
+  const instructionsTitleStyle = {
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#111827",
+    marginBottom: "8px"
+  };
+  const instructionsListStyle = {
+    fontSize: "12px",
+    color: "#6b7280",
+    listStyle: "none",
+    padding: 0,
+    margin: 0
+  };
+  const instructionItemStyle = {
+    display: "flex",
+    alignItems: "flex-start",
+    marginBottom: "6px"
+  };
+  const bulletStyle = {
+    color: "#00bc7d",
+    marginRight: "8px",
+    flexShrink: 0
+  };
+  const buttonsContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  };
+  const primaryButtonStyle = {
+    width: "100%",
+    background: isProcessing ? "#d1d5db" : isHoveringPrimary ? "#00a86d" : "#00bc7d",
+    color: "#ffffff",
+    fontWeight: 500,
+    padding: "14px 24px",
+    borderRadius: "12px",
+    border: "none",
+    cursor: isProcessing ? "not-allowed" : "pointer",
+    transition: "all 0.2s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px",
+    boxShadow: isProcessing ? "none" : isHoveringPrimary ? "0 20px 25px -5px rgba(0, 188, 125, 0.3)" : "0 10px 15px -3px rgba(0, 188, 125, 0.2)",
+    fontSize: "16px"
+  };
+  const cancelButtonStyle = {
+    width: "100%",
+    background: isProcessing ? "#f3f4f6" : isHoveringCancel ? "#f9fafb" : "#ffffff",
+    color: "#374151",
+    fontWeight: 500,
+    padding: "14px 24px",
+    borderRadius: "12px",
+    border: "2px solid #e5e7eb",
+    cursor: isProcessing ? "not-allowed" : "pointer",
+    transition: "all 0.2s",
+    fontSize: "16px"
+  };
+  const footerStyle = {
+    padding: "0 24px 24px"
+  };
+  const footerTextStyle = {
+    fontSize: "12px",
+    textAlign: "center",
+    color: "#9ca3af",
+    margin: 0
+  };
+  const spinnerStyle = {
+    width: "20px",
+    height: "20px",
+    border: "2px solid rgba(255, 255, 255, 0.3)",
+    borderTopColor: "#ffffff",
+    borderRadius: "50%",
+    animation: "spin 0.6s linear infinite"
+  };
+  const hiddenInputStyle = {
+    display: "none"
+  };
+  const styleTag = /* @__PURE__ */ React.createElement("style", null, `
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+        
+        @keyframes zoomIn {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        
+        @keyframes spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, styleTag, /* @__PURE__ */ React.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React.createElement("div", { style: modalStyle }, /* @__PURE__ */ React.createElement("div", { style: headerStyle }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: onCancel,
+      onMouseEnter: () => setIsHoveringClose(true),
+      onMouseLeave: () => setIsHoveringClose(false),
+      style: closeButtonStyle,
+      "aria-label": "Close"
+    },
+    /* @__PURE__ */ React.createElement("img", { src: Close, alt: "Close Icon", width: 16, height: 16 })
+  ), /* @__PURE__ */ React.createElement("h2", { style: titleStyle }, "Face Verification"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Please capture or upload a clear photo of your face")), /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React.createElement("div", { style: circleStyle }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "Camera Icon", width: 48, height: 48 })), /* @__PURE__ */ React.createElement("div", { style: badgeStyle }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "Check Icon", width: 16, height: 16 })))), /* @__PURE__ */ React.createElement("div", { style: instructionsBoxStyle }, /* @__PURE__ */ React.createElement("h3", { style: instructionsTitleStyle }, "Tips for best results:"), /* @__PURE__ */ React.createElement("ul", { style: instructionsListStyle }, /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Ensure good lighting on your face")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Remove glasses or accessories if possible")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Look directly at the camera")))), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "file",
+      accept: "image/*",
+      capture: isMobile ? "user" : void 0,
+      style: hiddenInputStyle,
+      onChange: handleFileChange,
+      disabled: isProcessing
+    }
+  ), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => inputRef.current?.click(),
+      onMouseEnter: () => setIsHoveringPrimary(true),
+      onMouseLeave: () => setIsHoveringPrimary(false),
+      disabled: isProcessing,
+      style: primaryButtonStyle
+    },
+    isProcessing ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: spinnerStyle }), /* @__PURE__ */ React.createElement("span", null, "Processing...")) : /* @__PURE__ */ React.createElement(React.Fragment, null, isMobile ? /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "Camera Icon", width: 20, height: 20 }) : /* @__PURE__ */ React.createElement("img", { src: Upload, alt: "Upload Icon", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, isMobile ? "Capture Photo" : "Upload Photo"))
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: onCancel,
+      onMouseEnter: () => setIsHoveringCancel(true),
+      onMouseLeave: () => setIsHoveringCancel(false),
+      disabled: isProcessing,
+      style: cancelButtonStyle
+    },
+    "Cancel"
+  ))), /* @__PURE__ */ React.createElement("div", { style: footerStyle }, /* @__PURE__ */ React.createElement("p", { style: footerTextStyle }, "Your photo will be securely processed and used only for verification purposes")))));
+}
+var FaceCaptureModal_default = FaceCaptureModal;
+
+// src/kyc/hooks.ts
 function useAutoFetch(autoFetch, fetchFn) {
   useEffect(() => {
     if (autoFetch) {
@@ -1127,7 +1410,7 @@ function useKycPreferences(client, autoFetch = true) {
     refresh: fetchPreferences
   };
 }
-function fileToBase64(file) {
+function fileToBase642(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
@@ -1183,7 +1466,42 @@ function getRiskColor(risk) {
   };
   return colorMap[risk] || "#6b7280";
 }
+function useReuseKYCSubmission(client) {
+  const verifyFace = (reference, token) => {
+    return new Promise((resolve, reject) => {
+      const container = document.createElement("div");
+      document.body.appendChild(container);
+      const root = createRoot(container);
+      const cleanup = () => {
+        root.unmount();
+        document.body.removeChild(container);
+      };
+      const modal = createElement(FaceCaptureModal_default, {
+        onCapture: async (base64) => {
+          try {
+            const resp = await client.submitReuseKycSession({
+              proof: base64,
+              reference,
+              token
+            });
+            resolve(resp);
+          } catch (error) {
+            reject(error instanceof Error ? error : new Error("Face verification failed"));
+          } finally {
+            cleanup();
+          }
+        },
+        onCancel: () => {
+          cleanup();
+          resolve(null);
+        }
+      });
+      root.render(modal);
+    });
+  };
+  return { verifyFace };
+}
 
-export { createDeviceFingerprint, fileToBase64, formatKycStatus, getBrowserInfo, getRiskColor, getStatusColor, isValidFileSize, isValidFileType, useCipherText, useCustomerProfile, useGeolocation, useKycAlerts, useKycOverview, useKycPreferences, useKycRequests, useKycSubmission, useLocationCapture, useLocationRequests, useLoginVerification, useRegistration, useTransactionVerification };
+export { createDeviceFingerprint, fileToBase642 as fileToBase64, formatKycStatus, getBrowserInfo, getRiskColor, getStatusColor, isValidFileSize, isValidFileType, useCipherText, useCustomerProfile, useGeolocation, useKycAlerts, useKycOverview, useKycPreferences, useKycRequests, useKycSubmission, useLocationCapture, useLocationRequests, useLoginVerification, useRegistration, useReuseKYCSubmission, useTransactionVerification };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map