@wewear/virtual-try-on 1.2.0 → 1.3.1

package/dist/components/button.d.ts

@@ -1 +1,2 @@
+export declare function createButtonContainer(buttonPosition: string, hasVirtualTryOn: boolean | undefined, onCameraClick: () => void, onRefreshClick?: () => void, onToggleClick?: () => void, isShowingVirtualTryOn?: boolean): HTMLElement;
 export declare function createButton(buttonPosition: string, onClick: () => void): HTMLElement;

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export { createButton } from "./button.js";
+export { createButton, createButtonContainer } from "./button.js";
 export { type CameraModalCallbacks, showCameraModal } from "./camera-modal.js";
-export { showImageModal } from "./image-modal.js";
+export { createLoadingOverlay, removeModalLoading, removeProductLoading, showModalLoading, showProductLoading, } from "./loading-overlay.js";
 export { type ReviewModalCallbacks, showReviewModal } from "./review-modal.js";

package/dist/components/loading-overlay.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Creates a loading overlay that can be shown in different containers
+ */
+export declare function createLoadingOverlay(text?: string): HTMLElement;
+/**
+ * Shows a loading overlay in a modal container
+ */
+export declare function showModalLoading(text?: string): void;
+/**
+ * Removes loading overlay from modal
+ */
+export declare function removeModalLoading(): void;
+/**
+ * Shows a loading overlay in the product gallery container
+ */
+export declare function showProductLoading(container: HTMLElement, text?: string): void;
+/**
+ * Removes loading overlay from product container
+ */
+export declare function removeProductLoading(container: HTMLElement): void;

package/dist/index.d.ts

@@ -14,5 +14,5 @@ export interface VirtualTryOnAPIRequest {
     ww_product_id: string;
     ww_image: Blob;
 }
-export { destroyVirtualTryOn, getWidgetInstance, initVirtualTryOn } from "./installer.js";
+export { destroyVirtualTryOn, getWidgetInstance, initVirtualTryOn, } from "./installer.js";
 export { VirtualTryOnWidget } from "./widget.js";

package/dist/index.esm.js

@@ -139,44 +139,117 @@ function removeElements(selector) {
     });
 }
 
-function createButton(buttonPosition, onClick) {
+function createButtonContainer(buttonPosition, hasVirtualTryOn = false, onCameraClick, onRefreshClick, onToggleClick, isShowingVirtualTryOn = false) {
     const container = document.createElement("div");
-    container.className = CSS_CLASSES.BUTTON_CONTAINER;
+    container.className = `${CSS_CLASSES.BUTTON_CONTAINER} ww-button-group`;
     const positionStyles = getPositionStyles(buttonPosition);
     container.style.cssText = `
     position: absolute;
     ${positionStyles}
     display: flex;
-    border-radius: 50%;
-    background: #000000;
+    border-radius: 9999px;
+    background: white;
     padding: 4px;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     z-index: ${Z_INDEX.BUTTON};
   `;
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = CSS_CLASSES.BUTTON;
-    button.setAttribute("aria-label", "Virtual Try-On");
-    button.style.cssText = `
+    // 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: 50%;
-    padding: 10px;
+    border-radius: 9999px;
+    padding: 8px;
     border: none;
     background: transparent;
-    color: #ffffff;
+    color: currentColor;
   `;
-    button.innerHTML = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera-icon lucide-camera"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"/><circle cx="12" cy="13" r="3"/></svg>
+    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>
   `;
-    button.onclick = onClick;
-    container.appendChild(button);
+    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...");
@@ -300,92 +373,104 @@ function showCameraModal(callbacks) {
     startCamera(video, loadingIndicator, captureButton);
 }
 
-function showImageModal(imageUrl) {
-    // 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;
+/**
+ * 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.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;
-    width: 100%;
-    max-width: 500px;
-    height: 70vh;
-    background-color: #000;
-    border-radius: 12px;
-    overflow: hidden;
+    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;
   `;
-    // 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: 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;
-  `;
-    closeButton.onclick = () => {
-        modal.remove();
-    };
-    // Close on backdrop click
-    modal.onclick = (e) => {
-        if (e.target === modal) {
-            modal.remove();
+    // 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); }
         }
-    };
-    // Close on Escape key
-    const handleEscape = (e) => {
-        if (e.key === "Escape") {
-            modal.remove();
-            document.removeEventListener("keydown", handleEscape);
+        .ww-loading-overlay .ww-logo {
+          animation: ww-pulse 2s ease-in-out infinite;
         }
-    };
-    document.addEventListener("keydown", handleEscape);
-    imageContainer.appendChild(image);
-    imageContainer.appendChild(closeButton);
-    modal.appendChild(imageContainer);
-    document.body.appendChild(modal);
+      `;
+        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>
+      <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) {
@@ -411,6 +496,7 @@ function showReviewModal(imageBlob, callbacks) {
     z-index: ${Z_INDEX.MODAL};
     padding: 20px;
     box-sizing: border-box;
+    gap: 20px;
   `;
     // Create review container
     const reviewContainer = document.createElement("div");
@@ -418,7 +504,7 @@ function showReviewModal(imageBlob, callbacks) {
     position: relative;
     width: 100%;
     max-width: 500px;
-    height: 70vh;
+    height: 63vh;
     background-color: #000;
     border-radius: 12px;
     overflow: hidden;
@@ -460,14 +546,10 @@ function showReviewModal(imageBlob, callbacks) {
     // Create button container
     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;
+    width: 100%;
+    max-width: 500px;
   `;
     // Create retake button
     const retakeButton = document.createElement("button");
@@ -475,14 +557,13 @@ function showReviewModal(imageBlob, callbacks) {
     retakeButton.style.cssText = `
     flex: 1;
     padding: 12px 24px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: white;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: black;
     border-radius: 8px;
     border: none;
     font-size: 16px;
-    font-weight: 600;
+    font-weight: normal;
     cursor: pointer;
-    transition: all 0.2s ease;
   `;
     // Create use photo button
     const usePhotoButton = document.createElement("button");
@@ -495,9 +576,8 @@ function showReviewModal(imageBlob, callbacks) {
     border-radius: 8px;
     border: none;
     font-size: 16px;
-    font-weight: 600;
+    font-weight: normal;
     cursor: pointer;
-    transition: all 0.2s ease;
   `;
     // Add event listeners
     closeButton.onclick = () => {
@@ -519,14 +599,17 @@ function showReviewModal(imageBlob, callbacks) {
     buttonContainer.appendChild(usePhotoButton);
     reviewContainer.appendChild(image);
     reviewContainer.appendChild(closeButton);
-    reviewContainer.appendChild(buttonContainer);
     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,
@@ -649,10 +732,22 @@ class VirtualTryOnWidget {
     async processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_id) {
         try {
             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) {
-                showImageModal(result.imageUrl);
+                this.replaceProductImage(result.imageUrl);
             }
             else {
                 console.error("[WeWear VTO] Invalid API response:", result);
@@ -660,7 +755,187 @@ class VirtualTryOnWidget {
         }
         catch (error) {
             console.error("[WeWear VTO] Error processing accepted image:", error);
+            // Remove loading on error
+            removeModalLoading();
+        }
+    }
+    /**
+     * 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");
+            return;
+        }
+        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...");
+            }
+            // 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);
+                }
+            }
+        }
+        catch (error) {
+            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);
+            }
+        }
+    }
+    /**
+     * Replaces the product image in the gallery with the virtual try-on result
+     * @private
+     */
+    replaceProductImage(imageUrl) {
+        try {
+            // 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;
+            }
+            // Store the original content if not already stored
+            if (!container.hasAttribute("data-ww-original-content")) {
+                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 computedStyle = window.getComputedStyle(originalImg);
+                const rect = originalImg.getBoundingClientRect();
+                container.setAttribute("data-ww-original-width", computedStyle.width);
+                container.setAttribute("data-ww-original-height", computedStyle.height);
+                container.setAttribute("data-ww-original-rect-width", rect.width.toString());
+                container.setAttribute("data-ww-original-rect-height", rect.height.toString());
+                container.setAttribute("data-ww-original-dimensions", "true");
+            }
+            // 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 replacing product image:", error);
+        }
+    }
+    /**
+     * Updates the button container to show all available buttons
+     * @private
+     */
+    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);
+            }
+            else {
+                this.showVirtualTryOnImage(container);
+            }
+            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;
+        }
+        // Clear existing content except buttons
+        const existingButtons = container.querySelectorAll(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
+        container.innerHTML = "";
+        // 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 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%';
+        // Prefer computed style dimensions, fallback to bounding rect, then container fill
+        if (originalWidth && originalWidth !== 'auto' && originalWidth !== '0px') {
+            widthStyle = originalWidth;
+        }
+        else if (originalRectWidth && originalRectWidth !== '0') {
+            widthStyle = `${originalRectWidth}px`;
+        }
+        if (originalHeight && originalHeight !== 'auto' && originalHeight !== '0px') {
+            heightStyle = originalHeight;
+        }
+        else if (originalRectHeight && originalRectHeight !== '0') {
+            heightStyle = `${originalRectHeight}px`;
+        }
+        image.style.cssText = `
+            width: ${widthStyle};
+            height: ${heightStyle};
+            object-fit: contain;
+            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
@@ -671,6 +946,10 @@ class VirtualTryOnWidget {
             removeElements(`.${CSS_CLASSES.BUTTON_CONTAINER}`);
             // Remove all modals
             removeElements(`.${CSS_CLASSES.MODAL}`);
+            // Reset state
+            this.virtualTryOnImageUrl = null;
+            this.isShowingVirtualTryOn = false;
+            this.lastApiParams = null;
             console.log("[WeWear VTO] Widget destroyed successfully");
         }
         catch (error) {