@wewear/virtual-try-on 1.1.0 → 1.2.0

package/dist/index.js

@@ -4,12 +4,31 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WeWearVirtualTryOn = {}));
 })(this, (function (exports) { 'use strict';
 
-    /**
-     * 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",
@@ -29,335 +48,500 @@
         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) => {
+        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 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();
-            });
-            // 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"/>
-      </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);
+            }
+        };
+        // 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,
             };
-            captureButton.onclick = () => {
-                this.captureImage(video, canvas, ww_access_token, ww_user_id, ww_product_id, modal);
-            };
-            // 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
          */
@@ -378,7 +562,7 @@
                     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);
@@ -397,308 +581,84 @@
             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}`);
-        }
-        /**
-         * Starts the camera stream
-         * @param video - Video element to display camera stream
-         * @param loadingIndicator - Loading indicator element
-         * @param captureButton - Capture button element
-         */
-        async startCamera(video, loadingIndicator, captureButton) {
-            console.log("[WeWear VTO] Starting camera...");
-            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";
-                };
-            }
-            catch (error) {
-                console.error("[WeWear VTO] Camera access error:", error);
-                loadingIndicator.innerHTML =
-                    "Camera access denied. Please allow camera permissions.";
-            }
-        }
-        /**
-         * Stops the camera stream
-         * @param video - Video element with camera stream
-         */
-        stopCamera(video) {
-            const stream = video.srcObject;
-            if (stream) {
-                const tracks = stream.getTracks();
-                tracks.forEach((track) => {
-                    track.stop();
-                });
-                video.srcObject = null;
-            }
-        }
-        /**
-         * 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");
-                }
-                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.");
-            }
+        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 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
+         * Shows review modal with appropriate callbacks
+         * @private
          */
-        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);
+        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);
+                },
             };
-            // 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");
+            showReviewModal(imageBlob, callbacks);
         }
         /**
          * 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
+         * @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 this.callVirtualTryOnApiWithImage(ww_access_token, ww_user_id, ww_product_id, imageBlob);
+                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) {
-                    this.showImageModal(result.imageUrl);
+                    showImageModal(result.imageUrl);
                 }
                 else {
                     console.error("[WeWear VTO] Invalid API response:", result);
@@ -706,42 +666,6 @@
             }
             catch (error) {
                 console.error("[WeWear VTO] Error processing accepted image:", error);
-                this.showError("Failed to process image. Please try again.");
-            }
-        }
-        /**
-         * 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
-         */
-        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);
-                }
-                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;
-                }
-                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;
             }
         }
         /**
@@ -750,15 +674,9 @@
         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) {
@@ -767,17 +685,7 @@
         }
     }
 
-    /**
-     * 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
@@ -805,9 +713,6 @@
             console.error("[WeWear VTO] Initialization error:", error);
         }
     }
-    /**
-     * Destroys the current widget instance and cleans up resources
-     */
     function destroyVirtualTryOn() {
         try {
             if (widgetInstance) {
@@ -820,13 +725,16 @@
             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();
     }
 
     exports.VirtualTryOnWidget = VirtualTryOnWidget;
     exports.destroyVirtualTryOn = destroyVirtualTryOn;
+    exports.getWidgetInstance = getWidgetInstance;
     exports.initVirtualTryOn = initVirtualTryOn;
 
 }));