@wewear/virtual-try-on 1.1.0 → 1.3.0

package/dist/index.esm.js

@@ -1,9 +1,28 @@
-/**
- * WeWear Virtual Try-On Widget Implementation
- *
- * Core widget class that handles virtual try-on functionality integration.
- * Manages button creation, API communication, and modal display.
- */
+async function callVirtualTryOnApi(baseUrl, ww_access_token, ww_user_id, ww_product_id, ww_image) {
+    try {
+        const formData = new FormData();
+        formData.append("ww_user_id", ww_user_id);
+        formData.append("ww_product_id", ww_product_id);
+        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);
+            return null;
+        }
+        const result = await response.json();
+        console.log("[WeWear VTO] API response:", result);
+        return result;
+    }
+    catch (error) {
+        console.error("[WeWear VTO] API call failed:", error);
+        return null;
+    }
+}
+
 /** Default configuration constants */
 const DEFAULT_CONFIG = {
     BASE_URL: "https://virtual-try-on-widget.vercel.app",
@@ -23,335 +42,583 @@ const Z_INDEX = {
     BUTTON: 10,
     MODAL: 99999,
 };
-class VirtualTryOnWidget {
-    constructor(config = {}) {
-        this.config = {
-            baseUrl: config.baseUrl || DEFAULT_CONFIG.BASE_URL,
-            productPageSelector: config.productPageSelector || DEFAULT_CONFIG.PRODUCT_PAGE_SELECTOR,
-            gallerySelector: config.gallerySelector || DEFAULT_CONFIG.GALLERY_SELECTOR,
-            skuSelector: config.skuSelector || DEFAULT_CONFIG.SKU_SELECTOR,
-            buttonPosition: config.buttonPosition || DEFAULT_CONFIG.BUTTON_POSITION,
+/** 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";
         };
     }
-    /**
-     * Retrieves a cookie value by name
-     * @param name - Cookie name to retrieve
-     * @returns Cookie value or null if not found
-     */
-    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;
+    catch (error) {
+        console.error("[WeWear VTO] Camera access error:", error);
+        loadingIndicator.innerHTML =
+            "Camera access denied. Please allow camera permissions.";
     }
-    /**
-     * Makes API call to virtual try-on service
-     * @param ww_access_token - Optional authentication token
-     * @param ww_user_id - User identifier
-    /**
-     * Creates the virtual try-on button element
-     * @param onClick - Click handler function
-     * @returns Button container element
-     */
-    createButton(onClick) {
-        const container = document.createElement("div");
-        container.className = CSS_CLASSES.BUTTON_CONTAINER;
-        const positionStyles = this.getPositionStyles();
-        container.style.cssText = `
-      position: absolute;
-      ${positionStyles}
-      display: flex;
-      border-radius: 50%;
-      background: #000000;
-      padding: 4px;
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-      z-index: ${Z_INDEX.BUTTON};
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-    `;
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = CSS_CLASSES.BUTTON;
-        button.setAttribute("aria-label", "Virtual Try-On");
-        button.setAttribute("title", "Try this product virtually");
-        button.style.cssText = `
-      display: flex;
-      width: 36px;
-      height: 36px;
-      cursor: pointer;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      padding: 10px;
-      border: none;
-      background: transparent;
-      color: #ffffff;
-    `;
-        // Add hover effects
-        container.addEventListener("mouseenter", () => {
-            container.style.transform = "scale(1.05)";
-            container.style.boxShadow = "0 30px 60px -12px rgba(0, 0, 0, 0.35)";
-        });
-        container.addEventListener("mouseleave", () => {
-            container.style.transform = "scale(1)";
-            container.style.boxShadow = "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+}
+function stopCamera(video) {
+    const stream = video.srcObject;
+    if (stream) {
+        const tracks = stream.getTracks();
+        tracks.forEach((track) => {
+            track.stop();
         });
-        button.innerHTML = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path>
-        <circle cx="12" cy="13" r="3"></circle>
-      </svg>
-    `;
-        button.onclick = onClick;
-        container.appendChild(button);
-        return container;
+        video.srcObject = null;
     }
-    /**
-     * Gets CSS position styles based on button position configuration
-     * @returns CSS position string
-     */
-    getPositionStyles() {
-        switch (this.config.buttonPosition) {
-            case "bottom-left":
-                return "left: 20px; bottom: 20px;";
-            case "top-right":
-                return "right: 20px; top: 20px;";
-            case "top-left":
-                return "left: 20px; top: 20px;";
-            default:
-                return "right: 20px; bottom: 20px;";
-        }
+}
+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");
     }
-    /**
-     * Displays the virtual try-on result in a modal
-     * @param imageUrl - URL of the virtual try-on image
-     */
-    showImageModal(imageUrl) {
-        // Remove any existing modals first
-        const existingModals = document.querySelectorAll(`.${CSS_CLASSES.MODAL}`);
-        existingModals.forEach((modal) => {
-            modal.remove();
-        });
-        // Create modal container
-        const modal = document.createElement("div");
-        modal.className = CSS_CLASSES.MODAL;
-        modal.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.9);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: ${Z_INDEX.MODAL};
-      padding: 20px;
-      box-sizing: border-box;
-    `;
-        // Create image container
-        const imageContainer = document.createElement("div");
-        imageContainer.style.cssText = `
-      position: relative;
-      max-width: 90%;
-      max-height: 90%;
-      background-color: white;
-      border-radius: 8px;
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-      overflow: hidden;
-    `;
-        // Create image element
-        const image = document.createElement("img");
-        image.src = imageUrl;
-        image.alt = "Virtual Try-On Result";
-        image.style.cssText = `
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      display: block;
-    `;
-        // Create close button
-        const closeButton = document.createElement("button");
-        closeButton.innerHTML = "×";
-        closeButton.style.cssText = `
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      width: 30px;
-      height: 30px;
-      border: none;
-      background-color: rgba(0, 0, 0, 0.7);
-      color: white;
-      font-size: 20px;
-      font-weight: bold;
-      cursor: pointer;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `;
-        closeButton.onclick = () => {
-            modal.remove();
-        };
-        // Close on backdrop click
-        modal.onclick = (e) => {
-            if (e.target === modal) {
-                modal.remove();
+    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);
             }
-        };
-        // Close on Escape key
-        const handleEscape = (e) => {
-            if (e.key === "Escape") {
-                modal.remove();
-                document.removeEventListener("keydown", handleEscape);
+            else {
+                reject(new Error("Failed to create blob from canvas"));
             }
-        };
-        document.addEventListener("keydown", handleEscape);
-        imageContainer.appendChild(image);
-        imageContainer.appendChild(closeButton);
-        modal.appendChild(imageContainer);
-        document.body.appendChild(modal);
+        }, 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;
     }
-    /**
-     * Shows the camera capture modal
-     * @param ww_access_token - Access token for API
-     * @param ww_user_id - User identifier
-     * @param ww_product_id - Product identifier
-     */
-    showCameraModal(ww_access_token, ww_user_id, ww_product_id) {
-        console.log("[WeWear VTO] Opening camera modal...");
-        // Remove any existing modals first
-        const existingModals = document.querySelectorAll(`.${CSS_CLASSES.MODAL}`);
-        existingModals.forEach((modal) => {
-            modal.remove();
-        });
-        // Create modal container
-        const modal = document.createElement("div");
-        modal.className = CSS_CLASSES.MODAL;
-        modal.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.95);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      z-index: ${Z_INDEX.MODAL};
-      padding: 20px;
-      box-sizing: border-box;
-    `;
-        // Create camera container
-        const cameraContainer = document.createElement("div");
-        cameraContainer.style.cssText = `
-      position: relative;
-      width: 100%;
-      max-width: 500px;
-      height: 70vh;
-      background-color: #000;
-      border-radius: 12px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    `;
-        // Create video element
-        const video = document.createElement("video");
-        video.autoplay = true;
-        video.playsInline = true;
-        video.muted = true;
-        video.style.cssText = `
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 12px;
-    `;
-        // Create canvas for capturing
-        const canvas = document.createElement("canvas");
-        canvas.style.display = "none";
-        // Create capture button
-        const captureButton = document.createElement("button");
-        captureButton.innerHTML = `
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
-        <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2" fill="none"/>
-        <circle cx="12" cy="12" r="6" fill="white"/>
+    return null;
+}
+function getPositionStyles(position) {
+    switch (position) {
+        case "bottom-left":
+            return "left: 20px; bottom: 20px;";
+        case "top-right":
+            return "right: 20px; top: 20px;";
+        case "top-left":
+            return "left: 20px; top: 20px;";
+        default:
+            return "right: 20px; bottom: 20px;";
+    }
+}
+function removeElements(selector) {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach((element) => {
+        element.remove();
+    });
+}
+
+function createButtonContainer(buttonPosition, hasVirtualTryOn = false, onCameraClick, onRefreshClick, onToggleClick, isShowingVirtualTryOn = false) {
+    const container = document.createElement("div");
+    container.className = `${CSS_CLASSES.BUTTON_CONTAINER} ww-button-group`;
+    const positionStyles = getPositionStyles(buttonPosition);
+    container.style.cssText = `
+    position: absolute;
+    ${positionStyles}
+    display: flex;
+    border-radius: 9999px;
+    background: white;
+    padding: 4px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    z-index: ${Z_INDEX.BUTTON};
+  `;
+    // Camera button
+    const cameraButton = document.createElement("button");
+    cameraButton.type = "button";
+    cameraButton.className = `${CSS_CLASSES.BUTTON} ww-camera-btn`;
+    cameraButton.setAttribute("aria-label", "Virtual Try-On");
+    cameraButton.style.cssText = `
+    display: flex;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    padding: 8px;
+    border: none;
+    background: transparent;
+    color: currentColor;
+  `;
+    cameraButton.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera">
+      <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path>
+      <circle cx="12" cy="13" r="3"></circle>
+    </svg>
+  `;
+    cameraButton.onclick = onCameraClick;
+    container.appendChild(cameraButton);
+    // Add refresh and toggle buttons if we have a virtual try-on
+    if (hasVirtualTryOn) {
+        // Refresh button - calls API again
+        if (onRefreshClick) {
+            const refreshButton = document.createElement("button");
+            refreshButton.type = "button";
+            refreshButton.className = "ww-refresh-btn";
+            refreshButton.setAttribute("aria-label", "Refresh virtual try-on");
+            refreshButton.style.cssText = `
+        display: flex;
+        width: 36px;
+        height: 36px;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        border-radius: 9999px;
+        padding: 8px;
+        border: none;
+        background: transparent;
+        color: currentColor;
+      `;
+            refreshButton.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-ccw">
+          <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
+          <path d="M3 3v5h5"></path>
+          <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path>
+          <path d="M16 16h5v5"></path>
+        </svg>
+      `;
+            refreshButton.onclick = onRefreshClick;
+            container.appendChild(refreshButton);
+        }
+        // Toggle button (scan-face) - switches between original and virtual try-on
+        if (onToggleClick) {
+            const toggleButton = document.createElement("button");
+            toggleButton.type = "button";
+            toggleButton.className = "ww-toggle-btn";
+            toggleButton.setAttribute("aria-label", isShowingVirtualTryOn ? "Show Original Image" : "Show Virtual Try-On");
+            toggleButton.style.cssText = `
+        display: flex;
+        width: 36px;
+        height: 36px;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        border-radius: 9999px;
+        padding: 8px;
+        border: none;
+        background: ${isShowingVirtualTryOn ? "rgba(0, 0, 0)" : "none"};
+        color: ${isShowingVirtualTryOn ? "white" : "currentColor"};
+      `;
+            toggleButton.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scan-face">
+          <path d="M3 7V5a2 2 0 0 1 2-2h2"></path>
+          <path d="M17 3h2a2 2 0 0 1 2 2v2"></path>
+          <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path>
+          <path d="M7 21H5a2 2 0 0 1-2-2v-2"></path>
+          <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+          <path d="M9 9h.01"></path>
+          <path d="M15 9h.01"></path>
+        </svg>
+      `;
+            toggleButton.onclick = onToggleClick;
+            container.appendChild(toggleButton);
+        }
+    }
+    return container;
+}
+function createButton(buttonPosition, onClick) {
+    return createButtonContainer(buttonPosition, false, onClick);
+}
+
+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 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: none;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+  `;
+    // Create close button
+    const closeButton = document.createElement("button");
+    closeButton.innerHTML = "×";
+    closeButton.style.cssText = `
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+    // Create loading indicator
+    const loadingIndicator = document.createElement("div");
+    loadingIndicator.innerHTML = "Initializing camera...";
+    loadingIndicator.style.cssText = `
+    color: white;
+    font-size: 16px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  `;
+    // Add event listeners
+    closeButton.onclick = () => {
+        stopCamera(video);
+        modal.remove();
+    };
+    captureButton.onclick = async () => {
+        await callbacks.onCapture(video, canvas);
+    };
+    // Assemble the camera modal
+    cameraContainer.appendChild(video);
+    cameraContainer.appendChild(canvas);
+    cameraContainer.appendChild(captureButton);
+    cameraContainer.appendChild(closeButton);
+    cameraContainer.appendChild(loadingIndicator);
+    modal.appendChild(cameraContainer);
+    document.body.appendChild(modal);
+    console.log("[WeWear VTO] Camera modal added to DOM");
+    // Start camera
+    startCamera(video, loadingIndicator, captureButton);
+}
+
+/**
+ * Creates a loading overlay that can be shown in different containers
+ */
+function createLoadingOverlay(text = "Processing...") {
+    const overlay = document.createElement("div");
+    overlay.className = "ww-loading-overlay";
+    overlay.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: ${Z_INDEX.MODAL + 1};
+    border-radius: inherit;
+  `;
+    // Add CSS animation to the document if not already added
+    if (!document.getElementById("ww-loading-animation")) {
+        const style = document.createElement("style");
+        style.id = "ww-loading-animation";
+        style.textContent = `
+        @keyframes ww-pulse {
+          0%, 100% { opacity: 0.7; transform: scale(1); }
+          50% { opacity: 1; transform: scale(1.05); }
+        }
+        .ww-loading-overlay .ww-logo {
+          animation: ww-pulse 2s ease-in-out infinite;
+        }
+      `;
+        document.head.appendChild(style);
+    }
+    overlay.innerHTML = `
+    <div style="display: flex; flex-direction: column; align-items: center; gap: 24px; color: white;">
+      <svg class="ww-logo" width="80" height="50" viewBox="0 0 214 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_3624_12755)">
+          <path d="M102.906 74.8679C102.906 77.9717 101.574 80.7453 98.9104 83.1887C96.6871 85.1918 93.9025 86.6997 90.5566 87.7123C87.695 88.5708 84.6462 89 81.4104 89C73.8821 89 68.0047 87.0189 63.7783 83.0566C59.5519 87.0189 53.6855 89 46.1792 89C42.9434 89 39.9057 88.5708 37.066 87.7123C33.7201 86.6997 30.9245 85.1918 28.6792 83.1887C26.0157 80.7453 24.684 77.9717 24.684 74.8679V41.6509H32.3774V74.8679C32.3774 76.2547 33.489 77.5645 35.7123 78.7972C37.3632 79.7217 39.0692 80.3711 40.8302 80.7453C42.5252 81.1195 44.3082 81.3066 46.1792 81.3066C48.0063 81.3066 49.7673 81.1195 51.4623 80.7453C53.2453 80.3711 54.9623 79.7217 56.6132 78.7972C58.8585 77.5645 59.9811 76.2547 59.9811 74.8679V41.6509H67.6085V74.8679C67.6085 76.2547 68.7311 77.5645 70.9764 78.7972C72.6274 79.7217 74.3443 80.3711 76.1274 80.7453C77.8223 81.1195 79.5833 81.3066 81.4104 81.3066C83.2814 81.3066 85.0755 81.1195 86.7925 80.7453C88.5314 80.3711 90.2264 79.7217 91.8774 78.7972C94.1006 77.5645 95.2123 76.2547 95.2123 74.8679V41.6509H102.906V74.8679ZM189.283 74.8679C189.283 77.9717 187.951 80.7453 185.288 83.1887C183.064 85.1918 180.28 86.6997 176.934 87.7123C174.072 88.5708 171.024 89 167.788 89C160.259 89 154.382 87.0189 150.156 83.0566C145.929 87.0189 140.063 89 132.557 89C129.321 89 126.283 88.5708 123.443 87.7123C120.097 86.6997 117.302 85.1918 115.057 83.1887C112.393 80.7453 111.061 77.9717 111.061 74.8679V41.6509H118.755V74.8679C118.755 76.2547 119.866 77.5645 122.09 78.7972C123.741 79.7217 125.447 80.3711 127.208 80.7453C128.903 81.1195 130.686 81.3066 132.557 81.3066C134.384 81.3066 136.145 81.1195 137.84 80.7453C139.623 80.3711 141.34 79.7217 142.991 78.7972C145.236 77.5645 146.358 76.2547 146.358 74.8679V41.6509H153.986V74.8679C153.986 76.2547 155.108 77.5645 157.354 78.7972C159.005 79.7217 160.722 80.3711 162.505 80.7453C164.2 81.1195 165.961 81.3066 167.788 81.3066C169.659 81.3066 171.453 81.1195 173.17 80.7453C174.909 80.3711 176.604 79.7217 178.255 78.7972C180.478 77.5645 181.59 76.2547 181.59 74.8679V41.6509H189.283V74.8679Z" fill="white"/>
+        </g>
+        <defs>
+          <clipPath id="clip0_3624_12755">
+            <rect width="214" height="135" fill="white"/>
+          </clipPath>
+        </defs>
       </svg>
-    `;
-        captureButton.style.cssText = `
-      position: absolute;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 60px;
-      height: 60px;
-      border: 3px solid white;
-      background-color: transparent;
-      border-radius: 50%;
-      cursor: pointer;
-      display: none;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s ease;
-    `;
-        // Create close button
-        const closeButton = document.createElement("button");
-        closeButton.innerHTML = "×";
-        closeButton.style.cssText = `
-      position: absolute;
-      top: 15px;
-      right: 15px;
-      width: 40px;
-      height: 40px;
-      border: none;
-      background-color: rgba(0, 0, 0, 0.7);
-      color: white;
-      font-size: 24px;
-      font-weight: bold;
-      cursor: pointer;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `;
-        // Create loading indicator
-        const loadingIndicator = document.createElement("div");
-        loadingIndicator.innerHTML = "Initializing camera...";
-        loadingIndicator.style.cssText = `
-      color: white;
-      font-size: 16px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    `;
-        // Add event listeners
-        closeButton.onclick = () => {
-            this.stopCamera(video);
-            modal.remove();
-        };
-        captureButton.onclick = () => {
-            this.captureImage(video, canvas, ww_access_token, ww_user_id, ww_product_id, modal);
+      <div style="font-size: 16px; font-weight: 500; text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">${text}</div>
+    </div>
+  `;
+    return overlay;
+}
+/**
+ * Shows a loading overlay in a modal container
+ */
+function showModalLoading(text = "Processing...") {
+    const modal = document.querySelector(`.${CSS_CLASSES.MODAL}`);
+    if (!modal)
+        return;
+    // Remove any existing loading overlays
+    removeModalLoading();
+    const loadingOverlay = createLoadingOverlay(text);
+    modal.appendChild(loadingOverlay);
+}
+/**
+ * Removes loading overlay from modal
+ */
+function removeModalLoading() {
+    const modal = document.querySelector(`.${CSS_CLASSES.MODAL}`);
+    if (!modal)
+        return;
+    const existingOverlay = modal.querySelector(".ww-loading-overlay");
+    if (existingOverlay) {
+        existingOverlay.remove();
+    }
+}
+/**
+ * Shows a loading overlay in the product gallery container
+ */
+function showProductLoading(container, text = "Generating virtual try-on...") {
+    // Remove any existing loading overlays
+    removeProductLoading(container);
+    // Make container relative if it's not already positioned
+    const computedStyle = window.getComputedStyle(container);
+    if (computedStyle.position === "static") {
+        container.style.position = "relative";
+    }
+    const loadingOverlay = createLoadingOverlay(text);
+    container.appendChild(loadingOverlay);
+}
+/**
+ * Removes loading overlay from product container
+ */
+function removeProductLoading(container) {
+    const existingOverlay = container.querySelector(".ww-loading-overlay");
+    if (existingOverlay) {
+        existingOverlay.remove();
+    }
+}
+
+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");
+}
+
+class VirtualTryOnWidget {
+    constructor(config = {}) {
+        this.virtualTryOnImageUrl = null;
+        this.isShowingVirtualTryOn = false;
+        this.lastApiParams = null;
+        this.config = {
+            baseUrl: config.baseUrl || DEFAULT_CONFIG.BASE_URL,
+            productPageSelector: config.productPageSelector || DEFAULT_CONFIG.PRODUCT_PAGE_SELECTOR,
+            gallerySelector: config.gallerySelector || DEFAULT_CONFIG.GALLERY_SELECTOR,
+            skuSelector: config.skuSelector || DEFAULT_CONFIG.SKU_SELECTOR,
+            buttonPosition: config.buttonPosition || DEFAULT_CONFIG.BUTTON_POSITION,
         };
-        // Assemble the camera modal
-        cameraContainer.appendChild(video);
-        cameraContainer.appendChild(canvas);
-        cameraContainer.appendChild(captureButton);
-        cameraContainer.appendChild(closeButton);
-        cameraContainer.appendChild(loadingIndicator);
-        modal.appendChild(cameraContainer);
-        document.body.appendChild(modal);
-        console.log("[WeWear VTO] Camera modal added to DOM");
-        // Start camera
-        this.startCamera(video, loadingIndicator, captureButton);
-    } /**
+    }
+    /**
      * Initializes the virtual try-on widget on the current page
      * @returns Promise that resolves when initialization is complete
      */
@@ -372,7 +639,7 @@ class VirtualTryOnWidget {
                 container.style.position = "relative";
             }
             // Create and add the virtual try-on button
-            const button = this.createButton(async () => {
+            const button = createButton(this.config.buttonPosition, async () => {
                 await this.handleTryOnClick();
             });
             container.appendChild(button);
@@ -391,352 +658,252 @@ class VirtualTryOnWidget {
         console.log("[WeWear VTO] Button clicked, starting try-on process...");
         try {
             // Get required data
-            const ww_access_token = this.getCookie("ww_access_token");
-            const ww_user_id = this.getCookie("ww_user_id");
+            const ww_access_token = getCookie("ww_access_token");
+            const ww_user_id = getCookie("ww_user_id");
             const skuElement = document.querySelector(this.config.skuSelector);
             const ww_product_id = (_a = skuElement === null || skuElement === void 0 ? void 0 : skuElement.textContent) === null || _a === void 0 ? void 0 : _a.trim();
             console.log("[WeWear VTO] Retrieved data:", {
                 ww_user_id,
                 ww_product_id,
-                ww_access_token: !!ww_access_token,
+                ww_access_token,
             });
             // Validate required data
             if (!ww_user_id) {
                 console.warn("[WeWear VTO] Missing required cookie: ww_user_id");
-                this.showError("Please sign in to use virtual try-on");
                 return;
             }
             if (!ww_product_id) {
                 console.warn("[WeWear VTO] Product SKU not found:", this.config.skuSelector);
-                this.showError("Product information not available");
+                return;
+            }
+            if (!ww_access_token) {
+                console.warn("[WeWear VTO] Missing required cookie: ww_access_token");
                 return;
             }
             // Show camera capture modal
-            this.showCameraModal(ww_access_token, ww_user_id, ww_product_id);
+            this.showCameraModalWithCallbacks(ww_access_token, ww_user_id, ww_product_id);
         }
         catch (error) {
             console.error("[WeWear VTO] Try-on request failed:", error);
-            this.showError("An unexpected error occurred. Please try again.");
         }
     }
     /**
-     * Shows an error message to the user
-     * @param message - Error message to display
+     * Shows camera modal with appropriate callbacks
      * @private
      */
-    showError(message) {
-        // Simple alert for now - could be enhanced with a custom modal
-        alert(`WeWear Virtual Try-On: ${message}`);
+    showCameraModalWithCallbacks(ww_access_token, ww_user_id, ww_product_id) {
+        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_id);
+                }
+                catch (error) {
+                    console.error("[WeWear VTO] Image capture error:", error);
+                }
+            },
+        };
+        showCameraModal(callbacks);
     }
     /**
-     * Starts the camera stream
-     * @param video - Video element to display camera stream
-     * @param loadingIndicator - Loading indicator element
-     * @param captureButton - Capture button element
+     * Shows review modal with appropriate callbacks
+     * @private
      */
-    async startCamera(video, loadingIndicator, captureButton) {
-        console.log("[WeWear VTO] Starting camera...");
+    showReviewModalWithCallbacks(imageBlob, ww_access_token, ww_user_id, ww_product_id) {
+        const callbacks = {
+            onRetake: () => {
+                // Reopen camera modal
+                this.showCameraModalWithCallbacks(ww_access_token, ww_user_id, ww_product_id);
+            },
+            onAccept: async (acceptedImageBlob) => {
+                await this.processAcceptedImage(acceptedImageBlob, ww_access_token, ww_user_id, ww_product_id);
+            },
+        };
+        showReviewModal(imageBlob, callbacks);
+    }
+    /**
+     * Processes the accepted image by calling the API
+     * @private
+     */
+    async processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_id) {
         try {
-            const constraints = {
-                video: {
-                    width: { ideal: 1280 },
-                    height: { ideal: 720 },
-                    facingMode: "user", // Front-facing camera
-                },
-                audio: false,
-            };
-            console.log("[WeWear VTO] Requesting camera access...");
-            const stream = await navigator.mediaDevices.getUserMedia(constraints);
-            video.srcObject = stream;
-            video.onloadedmetadata = () => {
-                console.log("[WeWear VTO] Camera stream loaded successfully");
-                loadingIndicator.style.display = "none";
-                captureButton.style.display = "flex";
+            console.log("[WeWear VTO] Processing accepted image...");
+            // Show loading in the review modal first
+            showModalLoading("Processing image...");
+            // Store the API parameters for potential refresh
+            this.lastApiParams = {
+                imageBlob,
+                ww_access_token,
+                ww_user_id,
+                ww_product_id,
             };
+            // Call the API with the accepted image
+            const result = await callVirtualTryOnApi(this.config.baseUrl, ww_access_token, ww_user_id, ww_product_id, 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);
+            }
+            else {
+                console.error("[WeWear VTO] Invalid API response:", result);
+            }
         }
         catch (error) {
-            console.error("[WeWear VTO] Camera access error:", error);
-            loadingIndicator.innerHTML =
-                "Camera access denied. Please allow camera permissions.";
+            console.error("[WeWear VTO] Error processing accepted image:", error);
+            // Remove loading on error
+            removeModalLoading();
         }
     }
     /**
-     * Stops the camera stream
-     * @param video - Video element with camera stream
+     * Recalls the virtual try-on API with the same parameters
+     * @private
      */
-    stopCamera(video) {
-        const stream = video.srcObject;
-        if (stream) {
-            const tracks = stream.getTracks();
-            tracks.forEach((track) => {
-                track.stop();
-            });
-            video.srcObject = null;
+    async refreshVirtualTryOn() {
+        if (!this.lastApiParams) {
+            console.warn("[WeWear VTO] No previous API parameters available for refresh");
+            return;
         }
-    }
-    /**
-     * Captures an image from the video stream
-     * @param video - Video element with camera stream
-     * @param canvas - Canvas element for capturing
-     * @param ww_access_token - Access token for API
-     * @param ww_user_id - User identifier
-     * @param ww_product_id - Product identifier
-     * @param modal - Modal element to close after processing
-     */
-    async captureImage(video, canvas, ww_access_token, ww_user_id, ww_product_id, modal) {
         try {
-            // Set canvas dimensions to match video
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            // Draw video frame to canvas
-            const ctx = canvas.getContext("2d");
-            if (!ctx) {
-                throw new Error("Could not get canvas context");
+            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...");
+            }
+            // 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_id, 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);
+                }
+            }
+            else {
+                console.error("[WeWear VTO] Invalid API response on refresh:", result);
+                // Remove loading on error
+                const container = document.querySelector(this.config.gallerySelector);
+                if (container instanceof HTMLElement) {
+                    removeProductLoading(container);
+                }
             }
-            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            // Convert canvas to blob
-            const blob = await new Promise((resolve, reject) => {
-                canvas.toBlob((blob) => {
-                    if (blob) {
-                        resolve(blob);
-                    }
-                    else {
-                        reject(new Error("Failed to create blob from canvas"));
-                    }
-                }, "image/jpeg", 0.8);
-            });
-            // Stop camera and close camera modal
-            this.stopCamera(video);
-            modal.remove();
-            // Show review modal instead of immediately processing
-            this.showReviewModal(blob, ww_access_token, ww_user_id, ww_product_id);
         }
         catch (error) {
-            console.error("[WeWear VTO] Image capture error:", error);
-            this.showError("Failed to capture image. Please try again.");
+            console.error("[WeWear VTO] Error refreshing virtual try-on:", error);
+            // Remove loading on error
+            const container = document.querySelector(this.config.gallerySelector);
+            if (container instanceof HTMLElement) {
+                removeProductLoading(container);
+            }
         }
     }
     /**
-     * Shows the review modal for captured image
-     * @param imageBlob - Captured image blob
-     * @param ww_access_token - Access token for API
-     * @param ww_user_id - User identifier
-     * @param ww_product_id - Product identifier
-     */
-    showReviewModal(imageBlob, ww_access_token, ww_user_id, ww_product_id) {
-        console.log("[WeWear VTO] Opening review modal...");
-        // Remove any existing modals first
-        const existingModals = document.querySelectorAll(`.${CSS_CLASSES.MODAL}`);
-        existingModals.forEach((modal) => {
-            modal.remove();
-        });
-        // Create image URL for preview
-        const imageUrl = URL.createObjectURL(imageBlob);
-        // Create modal container (same as camera modal)
-        const modal = document.createElement("div");
-        modal.className = CSS_CLASSES.MODAL;
-        modal.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.95);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      z-index: ${Z_INDEX.MODAL};
-      padding: 20px;
-      box-sizing: border-box;
-    `;
-        // Create review container (similar to camera container)
-        const reviewContainer = document.createElement("div");
-        reviewContainer.style.cssText = `
-      position: relative;
-      width: 100%;
-      max-width: 500px;
-      height: 70vh;
-      background-color: #000;
-      border-radius: 12px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    `;
-        // Create image element (replaces video element)
-        const image = document.createElement("img");
-        image.src = imageUrl;
-        image.alt = "Review your photo";
-        image.style.cssText = `
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 12px;
-    `;
-        // Create close button (same as camera modal)
-        const closeButton = document.createElement("button");
-        closeButton.innerHTML = "×";
-        closeButton.style.cssText = `
-      position: absolute;
-      top: 15px;
-      right: 15px;
-      width: 40px;
-      height: 40px;
-      border: none;
-      background-color: rgba(0, 0, 0, 0.7);
-      color: white;
-      font-size: 24px;
-      font-weight: bold;
-      cursor: pointer;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `;
-        // Create button container positioned at bottom (similar to capture button position)
-        const buttonContainer = document.createElement("div");
-        buttonContainer.style.cssText = `
-      position: absolute;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 15px;
-      width: calc(100% - 40px);
-      max-width: 300px;
-    `;
-        // Create retake button
-        const retakeButton = document.createElement("button");
-        retakeButton.textContent = "Retake";
-        retakeButton.style.cssText = `
-      flex: 1;
-      padding: 12px 24px;
-      background-color: transparent;
-      color: white;
-      border: 2px solid white;
-      border-radius: 8px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    `;
-        // Create use photo button
-        const usePhotoButton = document.createElement("button");
-        usePhotoButton.textContent = "Use Photo";
-        usePhotoButton.style.cssText = `
-      flex: 1;
-      padding: 12px 24px;
-      background-color: white;
-      color: black;
-      border: 2px solid white;
-      border-radius: 8px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    `;
-        // Add hover effects
-        retakeButton.addEventListener("mouseenter", () => {
-            retakeButton.style.backgroundColor = "white";
-            retakeButton.style.color = "black";
-        });
-        retakeButton.addEventListener("mouseleave", () => {
-            retakeButton.style.backgroundColor = "transparent";
-            retakeButton.style.color = "white";
-        });
-        usePhotoButton.addEventListener("mouseenter", () => {
-            usePhotoButton.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
-        });
-        usePhotoButton.addEventListener("mouseleave", () => {
-            usePhotoButton.style.backgroundColor = "white";
-        });
-        // Add event listeners
-        closeButton.onclick = () => {
-            URL.revokeObjectURL(imageUrl); // Clean up
-            modal.remove();
-        };
-        retakeButton.onclick = () => {
-            URL.revokeObjectURL(imageUrl); // Clean up
-            modal.remove();
-            // Reopen camera modal
-            this.showCameraModal(ww_access_token, ww_user_id, ww_product_id);
-        };
-        usePhotoButton.onclick = async () => {
-            URL.revokeObjectURL(imageUrl); // Clean up
-            modal.remove();
-            // Process the image
-            await this.processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_id);
-        };
-        // Assemble the review modal (similar to camera modal)
-        buttonContainer.appendChild(retakeButton);
-        buttonContainer.appendChild(usePhotoButton);
-        reviewContainer.appendChild(image);
-        reviewContainer.appendChild(closeButton);
-        reviewContainer.appendChild(buttonContainer);
-        modal.appendChild(reviewContainer);
-        document.body.appendChild(modal);
-        console.log("[WeWear VTO] Review modal added to DOM");
-    }
-    /**
-     * Processes the accepted image by calling the API
-     * @param imageBlob - Accepted image blob
-     * @param ww_access_token - Access token for API
-     * @param ww_user_id - User identifier
-     * @param ww_product_id - Product identifier
+     * Replaces the product image in the gallery with the virtual try-on result
+     * @private
      */
-    async processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_id) {
+    replaceProductImage(imageUrl) {
         try {
-            console.log("[WeWear VTO] Processing accepted image...");
-            // Call the API with the accepted image
-            const result = await this.callVirtualTryOnApiWithImage(ww_access_token, ww_user_id, ww_product_id, imageBlob);
-            if (result === null || result === void 0 ? void 0 : result.imageUrl) {
-                this.showImageModal(result.imageUrl);
+            // Store the virtual try-on image URL
+            this.virtualTryOnImageUrl = imageUrl;
+            // Find the gallery container
+            const container = document.querySelector(this.config.gallerySelector);
+            if (!container || !(container instanceof HTMLElement)) {
+                console.warn("[WeWear VTO] Gallery container not found for image replacement:", this.config.gallerySelector);
+                return;
             }
-            else {
-                console.error("[WeWear VTO] Invalid API response:", result);
+            // Store the original content if not already stored
+            if (!container.hasAttribute("data-ww-original-content")) {
+                container.setAttribute("data-ww-original-content", container.innerHTML);
             }
+            // Show the virtual try-on image initially
+            this.showVirtualTryOnImage(container);
+            // Replace the button container with the new multi-button version
+            this.updateButtonContainer(container);
+            console.log("[WeWear VTO] Product image replaced with virtual try-on result");
         }
         catch (error) {
-            console.error("[WeWear VTO] Error processing accepted image:", error);
-            this.showError("Failed to process image. Please try again.");
+            console.error("[WeWear VTO] Error replacing product image:", error);
         }
     }
     /**
-     * Makes API call to virtual try-on service with captured image
-     * @param ww_access_token - Optional authentication token
-     * @param ww_user_id - User identifier
-     * @param ww_product_id - Product identifier
-     * @param imageBlob - Captured image blob
-     * @returns Promise with virtual try-on result or null if failed
+     * Updates the button container to show all available buttons
+     * @private
      */
-    async callVirtualTryOnApiWithImage(ww_access_token, ww_user_id, ww_product_id, imageBlob) {
-        try {
-            // Create form data for multipart upload
-            const formData = new FormData();
-            formData.append("ww_user_id", ww_user_id);
-            formData.append("ww_product_id", ww_product_id);
-            formData.append("image", imageBlob, "captured-image.jpg");
-            if (ww_access_token) {
-                formData.append("ww_access_token", ww_access_token);
+    updateButtonContainer(container) {
+        // Remove existing button containers
+        const existingButtons = container.querySelectorAll(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
+        existingButtons.forEach((btn) => {
+            btn.remove();
+        });
+        // Create new button container with all buttons
+        const buttonContainer = createButtonContainer(this.config.buttonPosition, this.virtualTryOnImageUrl !== null, async () => {
+            await this.handleTryOnClick();
+        }, async () => {
+            await this.refreshVirtualTryOn();
+        }, () => {
+            if (this.isShowingVirtualTryOn) {
+                this.showOriginalImage(container);
             }
-            const response = await fetch(`${this.config.baseUrl}/api/virtual-try-on`, {
-                method: "POST",
-                body: formData,
-            });
-            if (!response.ok) {
-                console.error("[WeWear VTO] API request failed:", response.status, response.statusText);
-                return null;
+            else {
+                this.showVirtualTryOnImage(container);
             }
-            const result = await response.json();
-            console.log("[WeWear VTO] API response:", result);
-            return result;
+            this.updateButtonContainer(container);
+        }, this.isShowingVirtualTryOn);
+        container.appendChild(buttonContainer);
+    }
+    /**
+     * Shows the virtual try-on image in the container
+     * @private
+     */
+    showVirtualTryOnImage(container) {
+        if (!this.virtualTryOnImageUrl) {
+            console.warn("[WeWear VTO] No virtual try-on image URL available");
+            return;
         }
-        catch (error) {
-            console.error("[WeWear VTO] API call failed:", error);
-            return null;
+        // Clear existing content except buttons
+        const existingButtons = container.querySelectorAll(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
+        container.innerHTML = "";
+        const image = document.createElement("img");
+        image.src = this.virtualTryOnImageUrl;
+        image.alt = "Virtual Try-On Result";
+        image.style.cssText = `
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+        `;
+        container.appendChild(image);
+        // Re-add buttons
+        existingButtons.forEach((btn) => {
+            container.appendChild(btn);
+        });
+        this.isShowingVirtualTryOn = true;
+    }
+    /**
+     * Shows the original product image in the container
+     * @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);
+            });
         }
+        this.isShowingVirtualTryOn = false;
     }
     /**
      * Destroys the widget and cleans up resources
@@ -744,15 +911,13 @@ class VirtualTryOnWidget {
     destroy() {
         try {
             // Remove all buttons
-            const buttons = document.querySelectorAll(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
-            buttons.forEach((button) => {
-                button.remove();
-            });
+            removeElements(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
             // Remove all modals
-            const modals = document.querySelectorAll(`.${CSS_CLASSES.MODAL}`);
-            modals.forEach((modal) => {
-                modal.remove();
-            });
+            removeElements(`.${CSS_CLASSES.MODAL}`);
+            // Reset state
+            this.virtualTryOnImageUrl = null;
+            this.isShowingVirtualTryOn = false;
+            this.lastApiParams = null;
             console.log("[WeWear VTO] Widget destroyed successfully");
         }
         catch (error) {
@@ -761,17 +926,7 @@ class VirtualTryOnWidget {
     }
 }
 
-/**
- * WeWear Virtual Try-On Widget Auto-Installer
- *
- * Provides automatic initialization and management of the virtual try-on widget.
- * Handles DOM ready states and widget lifecycle management.
- */
 let widgetInstance = null;
-/**
- * Initializes the virtual try-on widget with optional configuration
- * @param config - Widget configuration options
- */
 function initVirtualTryOn(config) {
     try {
         // Clean up any existing instance
@@ -799,9 +954,6 @@ function initVirtualTryOn(config) {
         console.error("[WeWear VTO] Initialization error:", error);
     }
 }
-/**
- * Destroys the current widget instance and cleans up resources
- */
 function destroyVirtualTryOn() {
     try {
         if (widgetInstance) {
@@ -814,10 +966,12 @@ function destroyVirtualTryOn() {
         console.error("[WeWear VTO] Error destroying widget:", error);
     }
 }
-// Auto-initialize if window object exists (browser environment)
+function getWidgetInstance() {
+    return widgetInstance;
+}
 if (typeof window !== "undefined") {
     initVirtualTryOn();
 }
 
-export { VirtualTryOnWidget, destroyVirtualTryOn, initVirtualTryOn };
+export { VirtualTryOnWidget, destroyVirtualTryOn, getWidgetInstance, initVirtualTryOn };
 //# sourceMappingURL=index.esm.js.map