@wewear/virtual-try-on 1.0.0 → 1.1.0

package/dist/index.esm.js

@@ -54,37 +54,6 @@ class VirtualTryOnWidget {
      * Makes API call to virtual try-on service
      * @param ww_access_token - Optional authentication token
      * @param ww_user_id - User identifier
-     * @param ww_product_id - Product identifier
-     * @returns Promise with virtual try-on result or null if failed
-     */
-    async callVirtualTryOnApi(ww_access_token, ww_user_id, ww_product_id) {
-        try {
-            const response = await fetch(`${this.config.baseUrl}/api/virtual-try-on`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Accept: "application/json",
-                },
-                body: JSON.stringify({
-                    ww_access_token,
-                    ww_user_id,
-                    ww_product_id,
-                }),
-            });
-            if (!response.ok) {
-                throw new Error(`API responded with status ${response.status}: ${response.statusText}`);
-            }
-            const result = await response.json();
-            if (!result.imageUrl) {
-                throw new Error("API response missing imageUrl");
-            }
-            return result;
-        }
-        catch (error) {
-            console.error("[WeWear VTO] API call failed:", error);
-            return null;
-        }
-    }
     /**
      * Creates the virtual try-on button element
      * @param onClick - Click handler function
@@ -168,95 +137,73 @@ class VirtualTryOnWidget {
         existingModals.forEach((modal) => {
             modal.remove();
         });
+        // Create modal container
         const modal = document.createElement("div");
         modal.className = CSS_CLASSES.MODAL;
-        modal.setAttribute("role", "dialog");
-        modal.setAttribute("aria-modal", "true");
-        modal.setAttribute("aria-label", "Virtual Try-On Result");
         modal.style.cssText = `
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      background: rgba(0, 0, 0, 0.8);
+      background-color: rgba(0, 0, 0, 0.9);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: ${Z_INDEX.MODAL};
-      animation: fadeIn 0.3s ease;
+      padding: 20px;
+      box-sizing: border-box;
     `;
-        modal.innerHTML = `
-      <div style="
-        background: #ffffff;
-        padding: 20px;
-        border-radius: 12px;
-        max-width: 90vw;
-        max-height: 90vh;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-        animation: slideIn 0.3s ease;
-      ">
-        <img 
-          src="${imageUrl}" 
-          alt="Virtual Try-On Result"
-          style="
-            max-width: 100%;
-            max-height: 80vh;
-            border-radius: 8px;
-            display: block;
-          " 
-        />
-        <div style="
-          text-align: right;
-          margin-top: 15px;
-        ">
-          <button 
-            type="button"
-            style="
-              padding: 8px 16px;
-              border: none;
-              background: #000000;
-              color: #ffffff;
-              border-radius: 6px;
-              cursor: pointer;
-              font-size: 14px;
-              font-weight: 500;
-              transition: background-color 0.2s ease;
-            "
-            onmouseover="this.style.backgroundColor='#333333'"
-            onmouseout="this.style.backgroundColor='#000000'"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-      <style>
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-        @keyframes slideIn {
-          from { transform: scale(0.9) translateY(20px); opacity: 0; }
-          to { transform: scale(1) translateY(0); opacity: 1; }
-        }
-      </style>
+        // Create image container
+        const imageContainer = document.createElement("div");
+        imageContainer.style.cssText = `
+      position: relative;
+      max-width: 90%;
+      max-height: 90%;
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      overflow: hidden;
     `;
-        const closeButton = modal.querySelector("button");
-        const modalContent = modal.querySelector("div");
-        // Close on button click
-        if (closeButton) {
-            closeButton.onclick = () => modal.remove();
-        }
+        // Create image element
+        const image = document.createElement("img");
+        image.src = imageUrl;
+        image.alt = "Virtual Try-On Result";
+        image.style.cssText = `
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      display: block;
+    `;
+        // Create close button
+        const closeButton = document.createElement("button");
+        closeButton.innerHTML = "×";
+        closeButton.style.cssText = `
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 30px;
+      height: 30px;
+      border: none;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: white;
+      font-size: 20px;
+      font-weight: bold;
+      cursor: pointer;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+        closeButton.onclick = () => {
+            modal.remove();
+        };
         // Close on backdrop click
         modal.onclick = (e) => {
             if (e.target === modal) {
                 modal.remove();
             }
         };
-        // Prevent content clicks from closing modal
-        if (modalContent) {
-            modalContent.onclick = (e) => e.stopPropagation();
-        }
         // Close on Escape key
         const handleEscape = (e) => {
             if (e.key === "Escape") {
@@ -265,9 +212,146 @@ class VirtualTryOnWidget {
             }
         };
         document.addEventListener("keydown", handleEscape);
+        imageContainer.appendChild(image);
+        imageContainer.appendChild(closeButton);
+        modal.appendChild(imageContainer);
         document.body.appendChild(modal);
     }
     /**
+     * Shows the camera capture modal
+     * @param ww_access_token - Access token for API
+     * @param ww_user_id - User identifier
+     * @param ww_product_id - Product identifier
+     */
+    showCameraModal(ww_access_token, ww_user_id, ww_product_id) {
+        console.log("[WeWear VTO] Opening camera modal...");
+        // Remove any existing modals first
+        const existingModals = document.querySelectorAll(`.${CSS_CLASSES.MODAL}`);
+        existingModals.forEach((modal) => {
+            modal.remove();
+        });
+        // Create modal container
+        const modal = document.createElement("div");
+        modal.className = CSS_CLASSES.MODAL;
+        modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.95);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: ${Z_INDEX.MODAL};
+      padding: 20px;
+      box-sizing: border-box;
+    `;
+        // Create camera container
+        const cameraContainer = document.createElement("div");
+        cameraContainer.style.cssText = `
+      position: relative;
+      width: 100%;
+      max-width: 500px;
+      height: 70vh;
+      background-color: #000;
+      border-radius: 12px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    `;
+        // Create video element
+        const video = document.createElement("video");
+        video.autoplay = true;
+        video.playsInline = true;
+        video.muted = true;
+        video.style.cssText = `
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 12px;
+    `;
+        // Create canvas for capturing
+        const canvas = document.createElement("canvas");
+        canvas.style.display = "none";
+        // Create capture button
+        const captureButton = document.createElement("button");
+        captureButton.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+        <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2" fill="none"/>
+        <circle cx="12" cy="12" r="6" fill="white"/>
+      </svg>
+    `;
+        captureButton.style.cssText = `
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60px;
+      height: 60px;
+      border: 3px solid white;
+      background-color: transparent;
+      border-radius: 50%;
+      cursor: pointer;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+    `;
+        // Create close button
+        const closeButton = document.createElement("button");
+        closeButton.innerHTML = "×";
+        closeButton.style.cssText = `
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      width: 40px;
+      height: 40px;
+      border: none;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: white;
+      font-size: 24px;
+      font-weight: bold;
+      cursor: pointer;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+        // Create loading indicator
+        const loadingIndicator = document.createElement("div");
+        loadingIndicator.innerHTML = "Initializing camera...";
+        loadingIndicator.style.cssText = `
+      color: white;
+      font-size: 16px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    `;
+        // Add event listeners
+        closeButton.onclick = () => {
+            this.stopCamera(video);
+            modal.remove();
+        };
+        captureButton.onclick = () => {
+            this.captureImage(video, canvas, ww_access_token, ww_user_id, ww_product_id, modal);
+        };
+        // Assemble the camera modal
+        cameraContainer.appendChild(video);
+        cameraContainer.appendChild(canvas);
+        cameraContainer.appendChild(captureButton);
+        cameraContainer.appendChild(closeButton);
+        cameraContainer.appendChild(loadingIndicator);
+        modal.appendChild(cameraContainer);
+        document.body.appendChild(modal);
+        console.log("[WeWear VTO] Camera modal added to DOM");
+        // Start camera
+        this.startCamera(video, loadingIndicator, captureButton);
+    } /**
      * Initializes the virtual try-on widget on the current page
      * @returns Promise that resolves when initialization is complete
      */
@@ -304,12 +388,18 @@ class VirtualTryOnWidget {
      */
     async handleTryOnClick() {
         var _a;
+        console.log("[WeWear VTO] Button clicked, starting try-on process...");
         try {
             // Get required data
             const ww_access_token = this.getCookie("ww_access_token");
             const ww_user_id = this.getCookie("ww_user_id");
             const skuElement = document.querySelector(this.config.skuSelector);
             const ww_product_id = (_a = skuElement === null || skuElement === void 0 ? void 0 : skuElement.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+            console.log("[WeWear VTO] Retrieved data:", {
+                ww_user_id,
+                ww_product_id,
+                ww_access_token: !!ww_access_token,
+            });
             // Validate required data
             if (!ww_user_id) {
                 console.warn("[WeWear VTO] Missing required cookie: ww_user_id");
@@ -321,16 +411,8 @@ class VirtualTryOnWidget {
                 this.showError("Product information not available");
                 return;
             }
-            // Show loading state (could be implemented)
-            console.log("[WeWear VTO] Processing virtual try-on request...");
-            // Make API call
-            const result = await this.callVirtualTryOnApi(ww_access_token, ww_user_id, ww_product_id);
-            if (result === null || result === void 0 ? void 0 : result.imageUrl) {
-                this.showImageModal(result.imageUrl);
-            }
-            else {
-                this.showError("Virtual try-on service is currently unavailable. Please try again later.");
-            }
+            // Show camera capture modal
+            this.showCameraModal(ww_access_token, ww_user_id, ww_product_id);
         }
         catch (error) {
             console.error("[WeWear VTO] Try-on request failed:", error);
@@ -346,6 +428,316 @@ class VirtualTryOnWidget {
         // Simple alert for now - could be enhanced with a custom modal
         alert(`WeWear Virtual Try-On: ${message}`);
     }
+    /**
+     * Starts the camera stream
+     * @param video - Video element to display camera stream
+     * @param loadingIndicator - Loading indicator element
+     * @param captureButton - Capture button element
+     */
+    async startCamera(video, loadingIndicator, captureButton) {
+        console.log("[WeWear VTO] Starting camera...");
+        try {
+            const constraints = {
+                video: {
+                    width: { ideal: 1280 },
+                    height: { ideal: 720 },
+                    facingMode: "user", // Front-facing camera
+                },
+                audio: false,
+            };
+            console.log("[WeWear VTO] Requesting camera access...");
+            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            video.srcObject = stream;
+            video.onloadedmetadata = () => {
+                console.log("[WeWear VTO] Camera stream loaded successfully");
+                loadingIndicator.style.display = "none";
+                captureButton.style.display = "flex";
+            };
+        }
+        catch (error) {
+            console.error("[WeWear VTO] Camera access error:", error);
+            loadingIndicator.innerHTML =
+                "Camera access denied. Please allow camera permissions.";
+        }
+    }
+    /**
+     * Stops the camera stream
+     * @param video - Video element with camera stream
+     */
+    stopCamera(video) {
+        const stream = video.srcObject;
+        if (stream) {
+            const tracks = stream.getTracks();
+            tracks.forEach((track) => {
+                track.stop();
+            });
+            video.srcObject = null;
+        }
+    }
+    /**
+     * Captures an image from the video stream
+     * @param video - Video element with camera stream
+     * @param canvas - Canvas element for capturing
+     * @param ww_access_token - Access token for API
+     * @param ww_user_id - User identifier
+     * @param ww_product_id - Product identifier
+     * @param modal - Modal element to close after processing
+     */
+    async captureImage(video, canvas, ww_access_token, ww_user_id, ww_product_id, modal) {
+        try {
+            // Set canvas dimensions to match video
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            // Draw video frame to canvas
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+                throw new Error("Could not get canvas context");
+            }
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            // Convert canvas to blob
+            const blob = await new Promise((resolve, reject) => {
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        resolve(blob);
+                    }
+                    else {
+                        reject(new Error("Failed to create blob from canvas"));
+                    }
+                }, "image/jpeg", 0.8);
+            });
+            // Stop camera and close camera modal
+            this.stopCamera(video);
+            modal.remove();
+            // Show review modal instead of immediately processing
+            this.showReviewModal(blob, ww_access_token, ww_user_id, ww_product_id);
+        }
+        catch (error) {
+            console.error("[WeWear VTO] Image capture error:", error);
+            this.showError("Failed to capture image. Please try again.");
+        }
+    }
+    /**
+     * Shows the review modal for captured image
+     * @param imageBlob - Captured image blob
+     * @param ww_access_token - Access token for API
+     * @param ww_user_id - User identifier
+     * @param ww_product_id - Product identifier
+     */
+    showReviewModal(imageBlob, ww_access_token, ww_user_id, ww_product_id) {
+        console.log("[WeWear VTO] Opening review modal...");
+        // Remove any existing modals first
+        const existingModals = document.querySelectorAll(`.${CSS_CLASSES.MODAL}`);
+        existingModals.forEach((modal) => {
+            modal.remove();
+        });
+        // Create image URL for preview
+        const imageUrl = URL.createObjectURL(imageBlob);
+        // Create modal container (same as camera modal)
+        const modal = document.createElement("div");
+        modal.className = CSS_CLASSES.MODAL;
+        modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.95);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: ${Z_INDEX.MODAL};
+      padding: 20px;
+      box-sizing: border-box;
+    `;
+        // Create review container (similar to camera container)
+        const reviewContainer = document.createElement("div");
+        reviewContainer.style.cssText = `
+      position: relative;
+      width: 100%;
+      max-width: 500px;
+      height: 70vh;
+      background-color: #000;
+      border-radius: 12px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    `;
+        // Create image element (replaces video element)
+        const image = document.createElement("img");
+        image.src = imageUrl;
+        image.alt = "Review your photo";
+        image.style.cssText = `
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 12px;
+    `;
+        // Create close button (same as camera modal)
+        const closeButton = document.createElement("button");
+        closeButton.innerHTML = "×";
+        closeButton.style.cssText = `
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      width: 40px;
+      height: 40px;
+      border: none;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: white;
+      font-size: 24px;
+      font-weight: bold;
+      cursor: pointer;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+        // Create button container positioned at bottom (similar to capture button position)
+        const buttonContainer = document.createElement("div");
+        buttonContainer.style.cssText = `
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 15px;
+      width: calc(100% - 40px);
+      max-width: 300px;
+    `;
+        // Create retake button
+        const retakeButton = document.createElement("button");
+        retakeButton.textContent = "Retake";
+        retakeButton.style.cssText = `
+      flex: 1;
+      padding: 12px 24px;
+      background-color: transparent;
+      color: white;
+      border: 2px solid white;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    `;
+        // Create use photo button
+        const usePhotoButton = document.createElement("button");
+        usePhotoButton.textContent = "Use Photo";
+        usePhotoButton.style.cssText = `
+      flex: 1;
+      padding: 12px 24px;
+      background-color: white;
+      color: black;
+      border: 2px solid white;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    `;
+        // Add hover effects
+        retakeButton.addEventListener("mouseenter", () => {
+            retakeButton.style.backgroundColor = "white";
+            retakeButton.style.color = "black";
+        });
+        retakeButton.addEventListener("mouseleave", () => {
+            retakeButton.style.backgroundColor = "transparent";
+            retakeButton.style.color = "white";
+        });
+        usePhotoButton.addEventListener("mouseenter", () => {
+            usePhotoButton.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
+        });
+        usePhotoButton.addEventListener("mouseleave", () => {
+            usePhotoButton.style.backgroundColor = "white";
+        });
+        // Add event listeners
+        closeButton.onclick = () => {
+            URL.revokeObjectURL(imageUrl); // Clean up
+            modal.remove();
+        };
+        retakeButton.onclick = () => {
+            URL.revokeObjectURL(imageUrl); // Clean up
+            modal.remove();
+            // Reopen camera modal
+            this.showCameraModal(ww_access_token, ww_user_id, ww_product_id);
+        };
+        usePhotoButton.onclick = async () => {
+            URL.revokeObjectURL(imageUrl); // Clean up
+            modal.remove();
+            // Process the image
+            await this.processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_id);
+        };
+        // Assemble the review modal (similar to camera modal)
+        buttonContainer.appendChild(retakeButton);
+        buttonContainer.appendChild(usePhotoButton);
+        reviewContainer.appendChild(image);
+        reviewContainer.appendChild(closeButton);
+        reviewContainer.appendChild(buttonContainer);
+        modal.appendChild(reviewContainer);
+        document.body.appendChild(modal);
+        console.log("[WeWear VTO] Review modal added to DOM");
+    }
+    /**
+     * Processes the accepted image by calling the API
+     * @param imageBlob - Accepted image blob
+     * @param ww_access_token - Access token for API
+     * @param ww_user_id - User identifier
+     * @param ww_product_id - Product identifier
+     */
+    async processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_id) {
+        try {
+            console.log("[WeWear VTO] Processing accepted image...");
+            // Call the API with the accepted image
+            const result = await this.callVirtualTryOnApiWithImage(ww_access_token, ww_user_id, ww_product_id, imageBlob);
+            if (result === null || result === void 0 ? void 0 : result.imageUrl) {
+                this.showImageModal(result.imageUrl);
+            }
+            else {
+                console.error("[WeWear VTO] Invalid API response:", result);
+            }
+        }
+        catch (error) {
+            console.error("[WeWear VTO] Error processing accepted image:", error);
+            this.showError("Failed to process image. Please try again.");
+        }
+    }
+    /**
+     * Makes API call to virtual try-on service with captured image
+     * @param ww_access_token - Optional authentication token
+     * @param ww_user_id - User identifier
+     * @param ww_product_id - Product identifier
+     * @param imageBlob - Captured image blob
+     * @returns Promise with virtual try-on result or null if failed
+     */
+    async callVirtualTryOnApiWithImage(ww_access_token, ww_user_id, ww_product_id, imageBlob) {
+        try {
+            // Create form data for multipart upload
+            const formData = new FormData();
+            formData.append("ww_user_id", ww_user_id);
+            formData.append("ww_product_id", ww_product_id);
+            formData.append("image", imageBlob, "captured-image.jpg");
+            if (ww_access_token) {
+                formData.append("ww_access_token", ww_access_token);
+            }
+            const response = await fetch(`${this.config.baseUrl}/api/virtual-try-on`, {
+                method: "POST",
+                body: formData,
+            });
+            if (!response.ok) {
+                console.error("[WeWear VTO] API request failed:", response.status, response.statusText);
+                return null;
+            }
+            const result = await response.json();
+            console.log("[WeWear VTO] API response:", result);
+            return result;
+        }
+        catch (error) {
+            console.error("[WeWear VTO] API call failed:", error);
+            return null;
+        }
+    }
     /**
      * Destroys the widget and cleans up resources
      */