@wewear/virtual-try-on 1.4.0 → 1.4.2

package/dist/index.esm.js

@@ -1,117 +1,61 @@
-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"));
+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;
             }
-        }, 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;
+            @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 null;
+    return badge;
 }
+
 function getPositionStyles(position) {
     switch (position) {
         case "bottom-left":
@@ -241,174 +185,18 @@ function createButtonContainer(buttonPosition, hasVirtualTryOn = false, onCamera
 }
 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
  */
@@ -461,24 +249,6 @@ function createLoadingOverlay(text = "Processing...") {
   `;
     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
  */
@@ -503,202 +273,70 @@ function removeProductLoading(container) {
     }
 }
 
-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 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);
 }
@@ -706,10 +344,13 @@ function removeAlert(container) {
 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,
@@ -738,40 +379,18 @@ class VirtualTryOnWidget {
             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);
@@ -785,152 +404,214 @@ class VirtualTryOnWidget {
         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
-     * @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
+     * Shows a modal with an iframe for the photo upload page
      * @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
@@ -950,8 +631,9 @@ class VirtualTryOnWidget {
                 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);
@@ -992,6 +674,7 @@ class VirtualTryOnWidget {
             else {
                 this.showVirtualTryOnImage(container);
             }
+            removeProductLoading(container);
             this.updateButtonContainer(container);
         }, this.isShowingVirtualTryOn);
         container.appendChild(buttonContainer);
@@ -1005,44 +688,46 @@ class VirtualTryOnWidget {
             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;
     }
     /**
@@ -1050,16 +735,18 @@ class VirtualTryOnWidget {
      * @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;
     }
@@ -1078,10 +765,20 @@ class VirtualTryOnWidget {
                 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) {
@@ -1123,18 +820,6 @@ function initVirtualTryOn(config) {
         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;
 }
@@ -1142,5 +827,5 @@ if (typeof window !== "undefined") {
     initVirtualTryOn();
 }
 
-export { VirtualTryOnWidget, destroyVirtualTryOn, getWidgetInstance, initVirtualTryOn };
+export { VirtualTryOnWidget, getWidgetInstance, initVirtualTryOn };
 //# sourceMappingURL=index.esm.js.map