@wewear/virtual-try-on 1.0.0 → 1.2.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,249 +42,498 @@ 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
-     * @param ww_product_id - Product identifier
-     * @returns Promise with virtual try-on result or null if failed
-     */
-    async callVirtualTryOnApi(ww_access_token, ww_user_id, ww_product_id) {
-        try {
-            const response = await fetch(`${this.config.baseUrl}/api/virtual-try-on`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Accept: "application/json",
-                },
-                body: JSON.stringify({
-                    ww_access_token,
-                    ww_user_id,
-                    ww_product_id,
-                }),
-            });
-            if (!response.ok) {
-                throw new Error(`API responded with status ${response.status}: ${response.statusText}`);
+}
+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);
             }
-            const result = await response.json();
-            if (!result.imageUrl) {
-                throw new Error("API response missing imageUrl");
+            else {
+                reject(new Error("Failed to create blob from canvas"));
             }
-            return result;
-        }
-        catch (error) {
-            console.error("[WeWear VTO] API call failed:", error);
-            return null;
-        }
-    }
-    /**
-     * Creates the virtual try-on button element
-     * @param onClick - Click handler function
-     * @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)";
-        });
-        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;
+        }, 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;
     }
-    /**
-     * 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;";
-        }
+    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;";
     }
-    /**
-     * 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) => {
+}
+function removeElements(selector) {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach((element) => {
+        element.remove();
+    });
+}
+
+function createButton(buttonPosition, onClick) {
+    const container = document.createElement("div");
+    container.className = CSS_CLASSES.BUTTON_CONTAINER;
+    const positionStyles = getPositionStyles(buttonPosition);
+    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};
+  `;
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = CSS_CLASSES.BUTTON;
+    button.setAttribute("aria-label", "Virtual Try-On");
+    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;
+  `;
+    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>
+  `;
+    button.onclick = onClick;
+    container.appendChild(button);
+    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 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);
+}
+
+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;
+    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;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  `;
+    // 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();
-        });
-        const modal = document.createElement("div");
-        modal.className = CSS_CLASSES.MODAL;
-        modal.setAttribute("role", "dialog");
-        modal.setAttribute("aria-modal", "true");
-        modal.setAttribute("aria-label", "Virtual Try-On Result");
-        modal.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: ${Z_INDEX.MODAL};
-      animation: fadeIn 0.3s ease;
-    `;
-        modal.innerHTML = `
-      <div style="
-        background: #ffffff;
-        padding: 20px;
-        border-radius: 12px;
-        max-width: 90vw;
-        max-height: 90vh;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-        animation: slideIn 0.3s ease;
-      ">
-        <img 
-          src="${imageUrl}" 
-          alt="Virtual Try-On Result"
-          style="
-            max-width: 100%;
-            max-height: 80vh;
-            border-radius: 8px;
-            display: block;
-          " 
-        />
-        <div style="
-          text-align: right;
-          margin-top: 15px;
-        ">
-          <button 
-            type="button"
-            style="
-              padding: 8px 16px;
-              border: none;
-              background: #000000;
-              color: #ffffff;
-              border-radius: 6px;
-              cursor: pointer;
-              font-size: 14px;
-              font-weight: 500;
-              transition: background-color 0.2s ease;
-            "
-            onmouseover="this.style.backgroundColor='#333333'"
-            onmouseout="this.style.backgroundColor='#000000'"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-      <style>
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-        @keyframes slideIn {
-          from { transform: scale(0.9) translateY(20px); opacity: 0; }
-          to { transform: scale(1) translateY(0); opacity: 1; }
         }
-      </style>
-    `;
-        const closeButton = modal.querySelector("button");
-        const modalContent = modal.querySelector("div");
-        // Close on button click
-        if (closeButton) {
-            closeButton.onclick = () => modal.remove();
-        }
-        // Close on backdrop click
-        modal.onclick = (e) => {
-            if (e.target === modal) {
-                modal.remove();
-            }
-        };
-        // Prevent content clicks from closing modal
-        if (modalContent) {
-            modalContent.onclick = (e) => e.stopPropagation();
+    };
+    // Close on Escape key
+    const handleEscape = (e) => {
+        if (e.key === "Escape") {
+            modal.remove();
+            document.removeEventListener("keydown", handleEscape);
         }
-        // Close on Escape key
-        const handleEscape = (e) => {
-            if (e.key === "Escape") {
-                modal.remove();
-                document.removeEventListener("keydown", handleEscape);
-            }
+    };
+    document.addEventListener("keydown", handleEscape);
+    imageContainer.appendChild(image);
+    imageContainer.appendChild(closeButton);
+    modal.appendChild(imageContainer);
+    document.body.appendChild(modal);
+}
+
+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;
+  `;
+    // Create review 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
+    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 = `
+    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: rgba(0, 0, 0, 0.7);
+    color: white;
+    border-radius: 8px;
+    border: none;
+    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: rgba(0, 0, 0, 0.7);
+    color: white;
+    border-radius: 8px;
+    border: none;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  `;
+    // 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);
+    reviewContainer.appendChild(buttonContainer);
+    modal.appendChild(reviewContainer);
+    document.body.appendChild(modal);
+    console.log("[WeWear VTO] Review modal added to DOM");
+}
+
+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,
         };
-        document.addEventListener("keydown", handleEscape);
-        document.body.appendChild(modal);
     }
     /**
      * Initializes the virtual try-on widget on the current page
@@ -288,7 +556,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);
@@ -304,47 +572,95 @@ class VirtualTryOnWidget {
      */
     async handleTryOnClick() {
         var _a;
+        console.log("[WeWear VTO] Button clicked, starting try-on process...");
         try {
             // Get required data
-            const ww_access_token = this.getCookie("ww_access_token");
-            const ww_user_id = this.getCookie("ww_user_id");
+            const 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,
+            });
             // 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;
             }
-            // Show loading state (could be implemented)
-            console.log("[WeWear VTO] Processing virtual try-on request...");
-            // Make API call
-            const result = await this.callVirtualTryOnApi(ww_access_token, ww_user_id, ww_product_id);
-            if (result === null || result === void 0 ? void 0 : result.imageUrl) {
-                this.showImageModal(result.imageUrl);
-            }
-            else {
-                this.showError("Virtual try-on service is currently unavailable. Please try again later.");
+            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_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
+     */
+    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);
+    }
+    /**
+     * Shows review modal with appropriate callbacks
      * @private
      */
-    showError(message) {
-        // Simple alert for now - could be enhanced with a custom modal
-        alert(`WeWear Virtual Try-On: ${message}`);
+    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 {
+            console.log("[WeWear VTO] Processing accepted image...");
+            // Call the API with the accepted image
+            const result = await callVirtualTryOnApi(this.config.baseUrl, ww_access_token, ww_user_id, ww_product_id, imageBlob);
+            if (result === null || result === void 0 ? void 0 : result.imageUrl) {
+                showImageModal(result.imageUrl);
+            }
+            else {
+                console.error("[WeWear VTO] Invalid API response:", result);
+            }
+        }
+        catch (error) {
+            console.error("[WeWear VTO] Error processing accepted image:", error);
+        }
     }
     /**
      * Destroys the widget and cleans up resources
@@ -352,15 +668,9 @@ 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}`);
             console.log("[WeWear VTO] Widget destroyed successfully");
         }
         catch (error) {
@@ -369,17 +679,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
@@ -407,9 +707,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) {
@@ -422,10 +719,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