@wewear/virtual-try-on 1.4.0 → 1.4.1

package/dist/index.js

@@ -4,120 +4,19 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WeWearVirtualTryOn = {}));
 })(this, (function (exports) { 'use strict';
 
-    async function callVirtualTryOnApi(baseUrl, ww_access_token, ww_user_id, ww_product_image, ww_image) {
-        const formData = new FormData();
-        formData.append("ww_user_id", ww_user_id);
-        formData.append("ww_product_image", ww_product_image);
-        formData.append("ww_image", ww_image, "captured-image.jpg");
-        formData.append("ww_access_token", ww_access_token);
-        const response = await fetch(`${baseUrl}/api/virtual-try-on`, {
-            method: "POST",
-            body: formData,
-        });
-        if (!response.ok) {
-            console.error("[WeWear VTO] API request failed:", response.status, response.statusText);
-            if (response.status === 500) {
-                return { "imageUrl": null, "error": { message: `Service unavailable. Please try again later.`, type: 'error' } };
-            }
-            else if (response.status === 503) {
-                return { "imageUrl": null, "error": { message: `Service overloaded. Please try again later.`, type: 'warning' } };
-            }
-            return { "imageUrl": null, "error": { message: `${response.statusText}`, type: 'warning' } };
-        }
-        const result = await response.json();
-        console.log("[WeWear VTO] API response:", result);
-        return result;
-    }
-
     /** CSS class names for consistent styling */
     const CSS_CLASSES = {
         BUTTON_CONTAINER: "wewear-vto-button-container",
         BUTTON: "wewear-vto-button",
         MODAL: "wewear-vto-modal",
+        PREVIEW_BADGE: "ww-vto-preview-badge",
     };
     /** Z-index values for proper layering */
     const Z_INDEX = {
         BUTTON: 10,
         MODAL: 99999,
     };
-    /** Camera constraints for optimal capture */
-    const CAMERA_CONSTRAINTS = {
-        video: {
-            width: { ideal: 1280 },
-            height: { ideal: 720 },
-            facingMode: "user", // Front-facing camera
-        },
-        audio: false,
-    };
-    /** Image capture settings */
-    const IMAGE_SETTINGS = {
-        FORMAT: "image/jpeg",
-        QUALITY: 0.8,
-    };
 
-    async function startCamera(video, loadingIndicator, captureButton) {
-        console.log("[WeWear VTO] Starting camera...");
-        try {
-            console.log("[WeWear VTO] Requesting camera access...");
-            const stream = await navigator.mediaDevices.getUserMedia(CAMERA_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.";
-        }
-    }
-    function stopCamera(video) {
-        const stream = video.srcObject;
-        if (stream) {
-            const tracks = stream.getTracks();
-            tracks.forEach((track) => {
-                track.stop();
-            });
-            video.srcObject = null;
-        }
-    }
-    async function captureImageFromVideo(video, canvas) {
-        // 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
-        return new Promise((resolve, reject) => {
-            canvas.toBlob((blob) => {
-                if (blob) {
-                    resolve(blob);
-                }
-                else {
-                    reject(new Error("Failed to create blob from canvas"));
-                }
-            }, IMAGE_SETTINGS.FORMAT, IMAGE_SETTINGS.QUALITY);
-        });
-    }
-
-    function getCookie(name) {
-        var _a;
-        if (typeof document === "undefined")
-            return null;
-        const value = `; ${document.cookie}`;
-        const parts = value.split(`; ${name}=`);
-        if (parts.length === 2) {
-            const part = parts.pop();
-            return part ? ((_a = part.split(";").shift()) === null || _a === void 0 ? void 0 : _a.trim()) || null : null;
-        }
-        return null;
-    }
     function getPositionStyles(position) {
         switch (position) {
             case "bottom-left":
@@ -247,174 +146,18 @@
     }
     function createButton(buttonPosition, onClick, disabled = false) {
         const container = createButtonContainer(buttonPosition, false, onClick);
-        const cameraButton = container.querySelector('.ww-camera-btn');
+        const cameraButton = container.querySelector(".ww-camera-btn");
         if (cameraButton) {
             cameraButton.disabled = disabled;
             if (disabled) {
-                cameraButton.style.opacity = '0.5';
-                cameraButton.style.cursor = 'not-allowed';
-                cameraButton.title = 'Find your ideal size first';
+                cameraButton.style.opacity = "0.5";
+                cameraButton.style.cursor = "not-allowed";
+                cameraButton.title = "Find your ideal size first";
             }
         }
         return container;
     }
 
-    function showCameraModal(callbacks) {
-        console.log("[WeWear VTO] Opening camera modal...");
-        // Remove any existing modals first
-        removeElements(`.${CSS_CLASSES.MODAL}`);
-        // 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 face overlay
-        const faceOverlay = document.createElement("div");
-        faceOverlay.style.cssText = `
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2;
-      `;
-        // SVG face outline (simple oval)
-        faceOverlay.innerHTML = `
-        <svg width="380" height="520" viewBox="0 0 380 520" fill="none" xmlns="http://www.w3.org/2000/svg" style="opacity:0.7;">
-          <ellipse cx="190" cy="240" rx="160" ry="220" stroke="rgba(0, 0, 0, 0.7)" stroke-width="6" fill="none" />
-        </svg>
-      `;
-        // Create capture button
-        const captureButton = document.createElement("button");
-        captureButton.innerHTML = "";
-        captureButton.style.cssText = `
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 60px;
-    height: 60px;
-    border: 3px solid white;
-    background-color: rgba(0, 0, 0, 0.7);
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    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 = () => {
-            stopCamera(video);
-            modal.remove();
-        };
-        captureButton.onclick = async () => {
-            await callbacks.onCapture(video, canvas);
-        };
-        // Assemble the camera modal
-        cameraContainer.appendChild(video);
-        cameraContainer.appendChild(faceOverlay);
-        cameraContainer.appendChild(canvas);
-        cameraContainer.appendChild(captureButton);
-        cameraContainer.appendChild(closeButton);
-        modal.appendChild(cameraContainer);
-        // Add instruction text outside the camera box
-        const instructionText = document.createElement("div");
-        instructionText.style.cssText = `
-      width: 100%;
-      max-width: 500px;
-      margin: 18px auto 0 auto;
-      text-align: center;
-      color: #fff;
-      font-size: 18px;
-      font-weight: bold;
-      text-shadow: 0 2px 8px #000;
-    `;
-        instructionText.innerText = "Please align your face inside the outline for better results.";
-        modal.appendChild(instructionText);
-        document.body.appendChild(modal);
-        console.log("[WeWear VTO] Camera modal added to DOM");
-        // Start camera
-        startCamera(video, loadingIndicator, captureButton);
-    }
-
     /**
      * Creates a loading overlay that can be shown in different containers
      */
@@ -467,24 +210,6 @@
   `;
         return overlay;
     }
-    /**
-     * Shows a loading overlay in a modal container
-     */
-    function showModalLoading(container) {
-        // Remove any existing loading overlays
-        removeModalLoading();
-        // Show loading in the product area
-        showProductLoading(container);
-    }
-    /**
-     * Removes loading overlay from modal
-     */
-    function removeModalLoading() {
-        const existingOverlay = document.body.querySelector(".ww-loading-overlay");
-        if (existingOverlay) {
-            existingOverlay.remove();
-        }
-    }
     /**
      * Shows a loading overlay in the product gallery container
      */
@@ -509,202 +234,115 @@
         }
     }
 
-    function showReviewModal(imageBlob, callbacks) {
-        console.log("[WeWear VTO] Opening review modal...");
-        // Remove any existing modals first
-        removeElements(`.${CSS_CLASSES.MODAL}`);
-        // Create image URL for preview
-        const imageUrl = URL.createObjectURL(imageBlob);
-        // 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;
-    gap: 20px;
-  `;
-        // Create review container
-        const reviewContainer = document.createElement("div");
-        reviewContainer.style.cssText = `
-    position: relative;
-    width: 100%;
-    max-width: 500px;
-    height: 63vh;
-    background-color: #000;
-    border-radius: 12px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  `;
-        // Create image 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
-        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
-        const buttonContainer = document.createElement("div");
-        buttonContainer.style.cssText = `
-    display: flex;
-    gap: 15px;
-    width: 100%;
-    max-width: 500px;
-  `;
-        // Create retake button
-        const retakeButton = document.createElement("button");
-        retakeButton.textContent = "Retake";
-        retakeButton.style.cssText = `
-    flex: 1;
-    padding: 12px 24px;
-    background-color: rgba(255, 255, 255, 0.9);
-    color: black;
-    border-radius: 8px;
-    border: none;
-    font-size: 16px;
-    font-weight: normal;
-    cursor: pointer;
-  `;
-        // Create use photo button
-        const usePhotoButton = document.createElement("button");
-        usePhotoButton.textContent = "Use Photo";
-        usePhotoButton.style.cssText = `
-    flex: 1;
-    padding: 12px 24px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: white;
-    border-radius: 8px;
-    border: none;
-    font-size: 16px;
-    font-weight: normal;
-    cursor: pointer;
-  `;
-        // Add event listeners
-        closeButton.onclick = () => {
-            URL.revokeObjectURL(imageUrl); // Clean up
-            modal.remove();
-        };
-        retakeButton.onclick = () => {
-            URL.revokeObjectURL(imageUrl); // Clean up
-            modal.remove();
-            callbacks.onRetake();
-        };
-        usePhotoButton.onclick = async () => {
-            URL.revokeObjectURL(imageUrl); // Clean up
-            modal.remove();
-            await callbacks.onAccept(imageBlob);
-        };
-        // Assemble the review modal
-        buttonContainer.appendChild(retakeButton);
-        buttonContainer.appendChild(usePhotoButton);
-        reviewContainer.appendChild(image);
-        reviewContainer.appendChild(closeButton);
-        modal.appendChild(reviewContainer);
-        modal.appendChild(buttonContainer);
-        document.body.appendChild(modal);
-        console.log("[WeWear VTO] Review modal added to DOM");
+    function createPreviewBadge() {
+        const badge = document.createElement("div");
+        badge.className = CSS_CLASSES.PREVIEW_BADGE;
+        badge.innerText = "PREVIEW";
+        const styleId = "ww-vto-badge-styles";
+        if (!document.getElementById(styleId)) {
+            const styles = document.createElement("style");
+            styles.id = styleId;
+            styles.innerHTML = `
+            .${CSS_CLASSES.PREVIEW_BADGE} {
+                position: absolute;
+                top: 16px;
+                right: 16px;
+                background-color: rgba(0, 0, 0, 0.6);
+                color: white;
+                padding: 4px 8px;
+                border-radius: 4px;
+                font-size: 12px;
+                font-weight: 600;
+                z-index: 10;
+                animation: ww-vto-pulse 2s infinite;
+                pointer-events: none;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            }
+
+            @keyframes ww-vto-pulse {
+                0% {
+                    transform: scale(1);
+                    opacity: 0.9;
+                }
+                50% {
+                    transform: scale(1.05);
+                    opacity: 1;
+                }
+                100% {
+                    transform: scale(1);
+                    opacity: 0.9;
+                }
+            }
+        `;
+            document.head.appendChild(styles);
+        }
+        return badge;
     }
 
     function showAlert(container, message, type) {
         var _a;
         removeAlert(container); // Remove any existing alert
-        const alertDiv = document.createElement('div');
+        const alertDiv = document.createElement("div");
         alertDiv.className = `ww-alert ww-alert-${type}`;
-        alertDiv.setAttribute('role', type === 'error' ? 'alert' : 'status');
-        alertDiv.setAttribute('aria-live', 'assertive');
-        alertDiv.style.cssText = `
-        position: absolute;
-        top: 16px;
-        left: 50%;
-        transform: translateX(-50%) translateY(-10px);
-        background: ${type === 'error' ? '#FEE2E2' : '#FEF9C3'};
-        color: ${type === 'error' ? '#B91C1C' : '#92400E'};
-        border: 1px solid ${type === 'error' ? '#F87171' : '#FBBF24'};
-        border-radius: 8px;
-        padding: 12px 16px;
-        z-index: 9999;
-        font-size: 15px;
-        font-weight: 500;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-        display: flex;
-        align-items: center;
-        min-width: 220px;
-        max-width: 90%;
-        opacity: 0;
-        transition: opacity 0.3s ease, transform 0.3s ease;
+        alertDiv.setAttribute("role", "alert" );
+        alertDiv.setAttribute("aria-live", "assertive");
+        alertDiv.style.cssText = `
+        position: absolute;
+        top: 16px;
+        left: 50%;
+        transform: translateX(-50%) translateY(-10px);
+        background: ${"#FEE2E2" };
+        color: ${"#B91C1C" };
+        border: 1px solid ${"#F87171" };
+        border-radius: 8px;
+        padding: 12px 16px;
+        z-index: 9999;
+        font-size: 15px;
+        font-weight: 500;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        display: flex;
+        align-items: center;
+        min-width: 220px;
+        max-width: 90%;
+        opacity: 0;
+        transition: opacity 0.3s ease, transform 0.3s ease;
     `;
-        alertDiv.innerHTML = `
-        <span style="flex: 1; line-height: 1.4;">${message}</span>
-        <button type="button" aria-label="Close alert"
-            style="
-                background: none;
-                border: none;
-                font-size: 20px;
-                color: inherit;
-                cursor: pointer;
-                margin-left: 12px;
-                padding: 0;
-                line-height: 1;
-            ">
-            &times;
-        </button>
+        alertDiv.innerHTML = `
+        <span style="flex: 1; line-height: 1.4;">${message}</span>
+        <button type="button" aria-label="Close alert"
+            style="
+                background: none;
+                border: none;
+                font-size: 20px;
+                color: inherit;
+                cursor: pointer;
+                margin-left: 12px;
+                padding: 0;
+                line-height: 1;
+            ">
+            &times;
+        </button>
     `;
         // Close on button click
-        (_a = alertDiv.querySelector('button')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+        (_a = alertDiv.querySelector("button")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => {
             fadeOutAndRemove(alertDiv);
         });
         container.appendChild(alertDiv);
         // Animate in
         requestAnimationFrame(() => {
-            alertDiv.style.opacity = '1';
-            alertDiv.style.transform = 'translateX(-50%) translateY(0)';
+            alertDiv.style.opacity = "1";
+            alertDiv.style.transform = "translateX(-50%) translateY(0)";
         });
     }
     function fadeOutAndRemove(element) {
-        element.style.opacity = '0';
-        element.style.transform = 'translateX(-50%) translateY(-10px)';
+        element.style.opacity = "0";
+        element.style.transform = "translateX(-50%) translateY(-10px)";
         setTimeout(() => {
             element.remove();
         }, 300);
     }
     function removeAlert(container) {
-        const alert = container.querySelector('.ww-alert');
+        const alert = container.querySelector(".ww-alert");
         if (alert)
             fadeOutAndRemove(alert);
     }
@@ -712,10 +350,13 @@
     class VirtualTryOnWidget {
         constructor(config) {
             this.virtualTryOnImageUrl = null;
+            this.originalProductImageUrl = null;
             this.isShowingVirtualTryOn = false;
-            this.lastApiParams = null;
+            this.lastModelImage = null;
             this.cookieCheckInterval = null;
             this.cameraButton = null;
+            this.iframeMessageListener = null;
+            this.previewBadge = null;
             this.config = {
                 baseUrl: config.baseUrl,
                 productPageSelector: config.productPageSelector,
@@ -744,40 +385,18 @@
                 if (getComputedStyle(container).position === "static") {
                     container.style.position = "relative";
                 }
-                // Check required cookies
-                const ww_access_token = getCookie("ww_access_token");
-                const ww_user_id = getCookie("ww_user_id");
-                const cookiesPresent = !!ww_access_token && !!ww_user_id;
                 // Create and add the virtual try-on button
                 const button = createButton(this.config.buttonPosition, async () => {
                     if (this.cameraButton && !this.cameraButton.disabled) {
                         await this.handleTryOnClick();
                     }
-                }, !cookiesPresent);
+                });
                 // Store reference to camera button for dynamic enable/disable
-                this.cameraButton = button.querySelector('.ww-camera-btn');
+                this.cameraButton = button.querySelector(".ww-camera-btn");
                 container.appendChild(button);
                 console.log("[WeWear VTO] Widget initialized successfully");
-                // Periodically check cookies and update button state
-                this.cookieCheckInterval = window.setInterval(() => {
-                    const accessToken = getCookie("ww_access_token");
-                    const userId = getCookie("ww_user_id");
-                    const present = !!accessToken && !!userId;
-                    if (this.cameraButton) {
-                        if (present && this.cameraButton.disabled) {
-                            this.cameraButton.disabled = false;
-                            this.cameraButton.style.opacity = '1';
-                            this.cameraButton.style.cursor = 'pointer';
-                            this.cameraButton.title = '';
-                        }
-                        else if (!present && !this.cameraButton.disabled) {
-                            this.cameraButton.disabled = true;
-                            this.cameraButton.style.opacity = '0.5';
-                            this.cameraButton.style.cursor = 'not-allowed';
-                            this.cameraButton.title = 'Required cookies missing';
-                        }
-                    }
-                }, 2000); // check every 2 seconds
+                // Listen for messages from the photo upload page
+                this.setupIframeListener();
             }
             catch (error) {
                 console.error("[WeWear VTO] Initialization failed:", error);
@@ -791,152 +410,214 @@
             console.log("[WeWear VTO] Button clicked, starting try-on process...");
             try {
                 // Get required data
-                const ww_access_token = getCookie("ww_access_token");
-                const ww_user_id = getCookie("ww_user_id");
-                const productImageElement = document.querySelector(this.config.productImageSelector);
-                const ww_product_image = (productImageElement === null || productImageElement === void 0 ? void 0 : productImageElement.src) || (productImageElement === null || productImageElement === void 0 ? void 0 : productImageElement.getAttribute('data-src')) || '';
+                if (!this.originalProductImageUrl) {
+                    const productImageElement = document.querySelector(this.config.productImageSelector);
+                    this.originalProductImageUrl =
+                        (productImageElement === null || productImageElement === void 0 ? void 0 : productImageElement.src) ||
+                            (productImageElement === null || productImageElement === void 0 ? void 0 : productImageElement.getAttribute("data-src")) ||
+                            "";
+                }
+                const ww_product_image = this.originalProductImageUrl;
                 console.log("[WeWear VTO] Retrieved data:", {
-                    ww_user_id,
                     ww_product_image,
-                    ww_access_token,
                 });
-                // Validate required data
-                if (!ww_user_id) {
-                    console.warn("[WeWear VTO] Missing required cookie: ww_user_id");
-                    return;
-                }
                 if (!ww_product_image) {
                     console.warn("[WeWear VTO] Product image not found:", this.config.productImageSelector);
                     return;
                 }
-                if (!ww_access_token) {
-                    console.warn("[WeWear VTO] Missing required cookie: ww_access_token");
-                    return;
-                }
-                // Show camera capture modal
-                this.showCameraModalWithCallbacks(ww_access_token, ww_user_id, ww_product_image);
+                // Open the photo upload page in a modal
+                const photoUploadUrl = new URL(`${this.config.baseUrl}`);
+                photoUploadUrl.searchParams.append("ww_product_image", ww_product_image);
+                this.showPhotoUploadModal(photoUploadUrl.toString());
             }
             catch (error) {
                 console.error("[WeWear VTO] Try-on request failed:", error);
             }
         }
         /**
-         * Shows camera modal with appropriate callbacks
+         * Shows a modal with an iframe for the photo upload page
          * @private
          */
-        showCameraModalWithCallbacks(ww_access_token, ww_user_id, ww_product_image) {
-            const callbacks = {
-                onCapture: async (video, canvas) => {
-                    try {
-                        // Capture image from video
-                        const imageBlob = await captureImageFromVideo(video, canvas);
-                        // Stop camera and show review modal
-                        stopCamera(video);
-                        // Show review modal instead of immediately processing
-                        this.showReviewModalWithCallbacks(imageBlob, ww_access_token, ww_user_id, ww_product_image);
-                    }
-                    catch (error) {
-                        console.error("[WeWear VTO] Image capture error:", error);
-                    }
-                },
-            };
-            showCameraModal(callbacks);
-        }
-        /**
-         * Shows review modal with appropriate callbacks
-         * @private
-         */
-        showReviewModalWithCallbacks(imageBlob, ww_access_token, ww_user_id, ww_product_image) {
-            const callbacks = {
-                onRetake: () => {
-                    // Reopen camera modal
-                    this.showCameraModalWithCallbacks(ww_access_token, ww_user_id, ww_product_image);
-                },
-                onAccept: async (acceptedImageBlob) => {
-                    await this.processAcceptedImage(acceptedImageBlob, ww_access_token, ww_user_id, ww_product_image, document.querySelector(this.config.gallerySelector));
-                },
+        showPhotoUploadModal(url) {
+            // Remove existing modals
+            removeElements(`.${CSS_CLASSES.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.5);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        `;
+            const iframe = document.createElement("iframe");
+            iframe.src = url;
+            iframe.style.cssText = `
+            width: 90%;
+            height: 90%;
+            max-width: 800px;
+            max-height: 600px;
+            border: none;
+            border-radius: 8px;
+        `;
+            const closeButton = document.createElement("button");
+            closeButton.innerText = "X";
+            closeButton.style.cssText = `
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: white;
+            border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+        `;
+            closeButton.onclick = () => {
+                modal.remove();
             };
-            showReviewModal(imageBlob, callbacks);
+            modal.appendChild(iframe);
+            modal.appendChild(closeButton);
+            document.body.appendChild(modal);
         }
         /**
-         * Processes the accepted image by calling the API
+         * Sets up listener for messages from the iframe
          * @private
          */
-        async processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_image, container) {
-            try {
-                console.log("[WeWear VTO] Processing accepted image...");
-                // Show loading in the review modal first
-                showModalLoading(container);
-                // Store the API parameters for potential refresh
-                this.lastApiParams = {
-                    imageBlob,
-                    ww_access_token,
-                    ww_user_id,
-                    ww_product_image,
-                };
-                // Call the API with the accepted image
-                const result = await callVirtualTryOnApi(this.config.baseUrl, ww_access_token, ww_user_id, ww_product_image, imageBlob);
-                // Remove modal loading and close modal
-                removeModalLoading();
-                removeElements(`.${CSS_CLASSES.MODAL}`);
-                if (result === null || result === void 0 ? void 0 : result.imageUrl) {
-                    this.replaceProductImage(result.imageUrl);
+        setupIframeListener() {
+            // Remove existing listener if any
+            if (this.iframeMessageListener) {
+                window.removeEventListener("message", this.iframeMessageListener);
+            }
+            this.iframeMessageListener = (event) => {
+                if (event.origin !== new URL(this.config.baseUrl).origin) {
+                    return;
                 }
-                else if (result === null || result === void 0 ? void 0 : result.error) {
-                    showAlert(container, result.error.message, result.error.type);
+                switch (event.data.type) {
+                    case "VTO_IMAGE_SELECTED":
+                        if (event.data.image) {
+                            this.lastModelImage = event.data.image;
+                            this.startVirtualTryOn();
+                        }
+                        break;
+                    case "CLOSE_MODAL":
+                        removeElements(`.${CSS_CLASSES.MODAL}`);
+                        break;
                 }
-            }
-            catch (error) {
-                console.error("[WeWear VTO] Error processing accepted image:", error);
-                // Remove loading on error
-                removeModalLoading();
-            }
+            };
+            window.addEventListener("message", this.iframeMessageListener);
         }
-        /**
-         * Recalls the virtual try-on API with the same parameters
-         * @private
-         */
-        async refreshVirtualTryOn() {
-            if (!this.lastApiParams) {
-                console.warn("[WeWear VTO] No previous API parameters available for refresh");
+        async startVirtualTryOn(isRefresh = false) {
+            if (isRefresh) {
+                console.log("[WeWear VTO] Refreshing virtual try-on with previous parameters...");
+            }
+            if (!this.lastModelImage || !this.originalProductImageUrl) {
+                console.warn("[WeWear VTO] Missing required data to start virtual try-on.");
                 return;
             }
+            // Hide the modal and show loading indicator
+            const modal = document.querySelector(`.${CSS_CLASSES.MODAL}`);
+            if (modal && modal instanceof HTMLElement) {
+                modal.style.display = "none";
+            }
+            const container = document.querySelector(this.config.gallerySelector);
+            if (container instanceof HTMLElement) {
+                showProductLoading(container, "Generating your virtual try-on...");
+            }
             try {
-                console.log("[WeWear VTO] Refreshing virtual try-on with previous parameters...");
-                // Show loading in the product area
-                const container = document.querySelector(this.config.gallerySelector);
-                if (container instanceof HTMLElement) {
-                    showProductLoading(container, "Generating new virtual try-on...");
+                const submitResponse = await this.callVtoApi(this.lastModelImage, this.originalProductImageUrl);
+                let status = await this.fetchJobStatus(submitResponse.job_id);
+                const previews = [];
+                while (status.status !== "COMPLETED" && status.status !== "FAILED") {
+                    await new Promise((r) => setTimeout(r, 3000));
+                    status = await this.fetchJobStatus(submitResponse.job_id);
+                    for (let i = previews.length; i < status.previews_available; i++) {
+                        try {
+                            const previewUrl = await this.fetchJobImage(submitResponse.job_id, i);
+                            previews.push(previewUrl);
+                            this.replaceProductImage(previewUrl);
+                            if (!this.previewBadge && container instanceof HTMLElement) {
+                                this.previewBadge = createPreviewBadge();
+                                container.appendChild(this.previewBadge);
+                            }
+                        }
+                        catch (e) {
+                            if (!(e instanceof Error && e.message === "202_PROCESSING"))
+                                throw e;
+                        }
+                    }
                 }
-                // Call the API with the stored parameters
-                const result = await callVirtualTryOnApi(this.config.baseUrl, this.lastApiParams.ww_access_token, this.lastApiParams.ww_user_id, this.lastApiParams.ww_product_image, this.lastApiParams.imageBlob);
-                if (result === null || result === void 0 ? void 0 : result.imageUrl) {
-                    this.virtualTryOnImageUrl = result.imageUrl;
-                    // Find the gallery container and update the image
-                    const container = document.querySelector(this.config.gallerySelector);
-                    if (container instanceof HTMLElement) {
-                        removeProductLoading(container);
-                        this.showVirtualTryOnImage(container);
-                        this.updateButtonContainer(container);
+                if (status.status === "COMPLETED") {
+                    const finalImage = await this.fetchJobImage(submitResponse.job_id);
+                    if (finalImage) {
+                        this.replaceProductImage(finalImage);
+                    }
+                    if (this.previewBadge) {
+                        this.previewBadge.remove();
+                        this.previewBadge = null;
                     }
                 }
-                else if (result === null || result === void 0 ? void 0 : result.error) {
-                    const container = document.querySelector(this.config.gallerySelector);
+                if (status.status === "FAILED") {
+                    console.error("[WeWear VTO] VTO process failed:", status.message);
                     if (container instanceof HTMLElement) {
-                        removeProductLoading(container);
-                        showAlert(container, result.error.message, result.error.type);
+                        showAlert(container, status.message, "error");
                     }
                 }
             }
             catch (error) {
-                console.error("[WeWear VTO] Error refreshing virtual try-on:", error);
-                // Remove loading on error
-                const container = document.querySelector(this.config.gallerySelector);
+                console.error("[WeWear VTO] Error during virtual try-on process:", error);
+                if (container instanceof HTMLElement) {
+                    showAlert(container, "An unexpected error occurred.", "error");
+                }
+            }
+            finally {
                 if (container instanceof HTMLElement) {
                     removeProductLoading(container);
                 }
+                removeElements(`.${CSS_CLASSES.MODAL}`);
             }
         }
+        async callVtoApi(modelImage, productImage) {
+            const formData = new FormData();
+            formData.append("model_image", modelImage, "model_image.png");
+            formData.append("ww_product_image", productImage);
+            const res = await fetch(`${this.config.baseUrl}/api/vto`, {
+                method: "POST",
+                body: formData,
+            });
+            if (!res.ok) {
+                const errorText = await res.text();
+                console.error("[WeWear VTO] API submission failed:", res.status, errorText);
+                throw new Error(`API submission failed: ${res.status}`);
+            }
+            return res.json();
+        }
+        async fetchJobStatus(jobId) {
+            const res = await fetch(`${this.config.baseUrl}/api/vto/status?job_id=${jobId}`);
+            if (!res.ok)
+                throw new Error(`Status check failed: ${res.status}`);
+            return res.json();
+        }
+        async fetchJobImage(jobId, previewIndex) {
+            let url = `${this.config.baseUrl}/api/vto/image?job_id=${jobId}`;
+            if (previewIndex !== undefined)
+                url += `&preview_index=${previewIndex}`;
+            const res = await fetch(url);
+            if (res.status === 202)
+                throw new Error("202_PROCESSING");
+            if (!res.ok)
+                throw new Error(`Image fetch failed: ${res.status}`);
+            const blob = await res.blob();
+            return URL.createObjectURL(blob);
+        }
+        async refreshVirtualTryOn() {
+            await this.startVirtualTryOn(true);
+        }
         /**
          * Replaces the product image in the gallery with the virtual try-on result
          * @private
@@ -956,8 +637,9 @@
                     container.setAttribute("data-ww-original-content", container.innerHTML);
                 }
                 // Capture original image dimensions before replacement to prevent layout shift
-                const originalImg = container.querySelector('img');
-                if (originalImg && !container.hasAttribute("data-ww-original-dimensions")) {
+                const originalImg = container.querySelector("img");
+                if (originalImg &&
+                    !container.hasAttribute("data-ww-original-dimensions")) {
                     const computedStyle = window.getComputedStyle(originalImg);
                     const rect = originalImg.getBoundingClientRect();
                     container.setAttribute("data-ww-original-width", computedStyle.width);
@@ -998,6 +680,7 @@
                 else {
                     this.showVirtualTryOnImage(container);
                 }
+                removeProductLoading(container);
                 this.updateButtonContainer(container);
             }, this.isShowingVirtualTryOn);
             container.appendChild(buttonContainer);
@@ -1011,44 +694,46 @@
                 console.warn("[WeWear VTO] No virtual try-on image URL available");
                 return;
             }
-            // Clear existing content except buttons
-            const existingButtons = container.querySelectorAll(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
-            container.innerHTML = "";
+            // Remove all direct children except for the button container
+            Array.from(container.children).forEach((child) => {
+                if (!child.classList.contains(CSS_CLASSES.BUTTON_CONTAINER)) {
+                    child.remove();
+                }
+            });
             // Get stored original dimensions to prevent layout shift
-            const originalWidth = container.getAttribute("data-ww-original-width") || '';
-            const originalHeight = container.getAttribute("data-ww-original-height") || '';
-            const originalRectWidth = container.getAttribute("data-ww-original-rect-width") || '';
-            const originalRectHeight = container.getAttribute("data-ww-original-rect-height") || '';
+            const originalWidth = container.getAttribute("data-ww-original-width") || "";
+            const originalHeight = container.getAttribute("data-ww-original-height") || "";
+            const originalRectWidth = container.getAttribute("data-ww-original-rect-width") || "";
+            const originalRectHeight = container.getAttribute("data-ww-original-rect-height") || "";
             const image = document.createElement("img");
             image.src = this.virtualTryOnImageUrl;
             image.alt = "Virtual Try-On Result";
             // Use original dimensions to prevent layout shift
-            let widthStyle = '100%';
-            let heightStyle = '100%';
+            let widthStyle = "100%";
+            let heightStyle = "100%";
             // Prefer computed style dimensions, fallback to bounding rect, then container fill
-            if (originalWidth && originalWidth !== 'auto' && originalWidth !== '0px') {
+            if (originalWidth && originalWidth !== "auto" && originalWidth !== "0px") {
                 widthStyle = originalWidth;
             }
-            else if (originalRectWidth && originalRectWidth !== '0') {
+            else if (originalRectWidth && originalRectWidth !== "0") {
                 widthStyle = `${originalRectWidth}px`;
             }
-            if (originalHeight && originalHeight !== 'auto' && originalHeight !== '0px') {
+            if (originalHeight &&
+                originalHeight !== "auto" &&
+                originalHeight !== "0px") {
                 heightStyle = originalHeight;
             }
-            else if (originalRectHeight && originalRectHeight !== '0') {
+            else if (originalRectHeight && originalRectHeight !== "0") {
                 heightStyle = `${originalRectHeight}px`;
             }
-            image.style.cssText = `
-            width: ${widthStyle};
-            height: ${heightStyle};
-            object-fit: cover;
-            border-radius: 8px;
+            image.style.cssText = `
+            width: ${widthStyle};
+            height: ${heightStyle};
+            object-fit: cover;
+            border-radius: 8px;
         `;
-            container.appendChild(image);
-            // Re-add buttons
-            existingButtons.forEach((btn) => {
-                container.appendChild(btn);
-            });
+            // Prepend the image to ensure buttons are rendered on top
+            container.prepend(image);
             this.isShowingVirtualTryOn = true;
         }
         /**
@@ -1056,16 +741,18 @@
          * @private
          */
         showOriginalImage(container) {
-            const originalContent = container.getAttribute("data-ww-original-content");
-            if (originalContent) {
-                // Store existing buttons
-                const existingButtons = container.querySelectorAll(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
-                // Restore original content
-                container.innerHTML = originalContent;
-                // Re-add buttons
-                existingButtons.forEach((btn) => {
-                    container.appendChild(btn);
+            const originalContentHTML = container.getAttribute("data-ww-original-content");
+            if (originalContentHTML) {
+                // Remove all direct children except for the button container
+                Array.from(container.children).forEach((child) => {
+                    if (!child.classList.contains(CSS_CLASSES.BUTTON_CONTAINER)) {
+                        child.remove();
+                    }
                 });
+                // Parse the original content and prepend it
+                const tempDiv = document.createElement("div");
+                tempDiv.innerHTML = originalContentHTML;
+                container.prepend(...Array.from(tempDiv.children));
             }
             this.isShowingVirtualTryOn = false;
         }
@@ -1084,10 +771,20 @@
                     this.cookieCheckInterval = null;
                 }
                 this.cameraButton = null;
+                // Remove message listener
+                if (this.iframeMessageListener) {
+                    window.removeEventListener("message", this.iframeMessageListener);
+                    this.iframeMessageListener = null;
+                }
                 // Reset state
                 this.virtualTryOnImageUrl = null;
                 this.isShowingVirtualTryOn = false;
-                this.lastApiParams = null;
+                this.lastModelImage = null;
+                this.originalProductImageUrl = null;
+                if (this.previewBadge) {
+                    this.previewBadge.remove();
+                    this.previewBadge = null;
+                }
                 console.log("[WeWear VTO] Widget destroyed successfully");
             }
             catch (error) {
@@ -1129,18 +826,6 @@
             console.error("[WeWear VTO] Initialization error:", error);
         }
     }
-    function destroyVirtualTryOn() {
-        try {
-            if (widgetInstance) {
-                widgetInstance.destroy();
-                widgetInstance = null;
-                console.log("[WeWear VTO] Widget instance destroyed");
-            }
-        }
-        catch (error) {
-            console.error("[WeWear VTO] Error destroying widget:", error);
-        }
-    }
     function getWidgetInstance() {
         return widgetInstance;
     }
@@ -1149,7 +834,6 @@
     }
 
     exports.VirtualTryOnWidget = VirtualTryOnWidget;
-    exports.destroyVirtualTryOn = destroyVirtualTryOn;
     exports.getWidgetInstance = getWidgetInstance;
     exports.initVirtualTryOn = initVirtualTryOn;