@wewear/virtual-try-on 1.3.5 → 1.3.7

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

@@ -0,0 +1,2 @@
+export declare function showAlert(container: HTMLElement, message: string, type: 'error' | 'warning'): void;
+export declare function removeAlert(container: HTMLElement): void;

package/dist/components/dom-alert.d.ts

@@ -0,0 +1,2 @@
+export declare function showAlert(container: HTMLElement, message: string, type?: 'error' | 'success' | 'info' | 'warning'): void;
+export declare function removeAlert(container: HTMLElement): void;

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

@@ -5,7 +5,7 @@ export declare function createLoadingOverlay(text?: string): HTMLElement;
 /**
  * Shows a loading overlay in a modal container
  */
-export declare function showModalLoading(text?: string): void;
+export declare function showModalLoading(container: HTMLElement): void;
 /**
  * Removes loading overlay from modal
  */

package/dist/components/review-modal.d.ts

@@ -2,4 +2,4 @@ export interface ReviewModalCallbacks {
     onRetake: () => void;
     onAccept: (imageBlob: Blob) => Promise<void>;
 }
-export declare function showReviewModal(imageBlob: Blob, callbacks: ReviewModalCallbacks, gallerySelector: string): void;
+export declare function showReviewModal(imageBlob: Blob, callbacks: ReviewModalCallbacks): void;

package/dist/index.d.ts

@@ -6,7 +6,11 @@ export interface VirtualTryOnConfig {
     buttonPosition: "bottom-right" | "bottom-left" | "top-right" | "top-left";
 }
 export interface VirtualTryOnResult {
-    imageUrl: string;
+    imageUrl: string | null;
+    error?: {
+        message: string;
+        type: 'error' | 'warning';
+    };
 }
 export interface VirtualTryOnAPIRequest {
     ww_access_token: string;

package/dist/index.esm.js

@@ -1,26 +1,26 @@
 async function callVirtualTryOnApi(baseUrl, ww_access_token, ww_user_id, ww_product_image, ww_image) {
-    try {
-        const formData = new FormData();
-        formData.append("ww_user_id", ww_user_id);
-        formData.append("ww_product_image", ww_product_image);
-        formData.append("ww_image", ww_image, "captured-image.jpg");
-        formData.append("ww_access_token", ww_access_token);
-        const response = await fetch(`${baseUrl}/api/virtual-try-on`, {
-            method: "POST",
-            body: formData,
-        });
-        if (!response.ok) {
-            console.error("[WeWear VTO] API request failed:", response.status, response.statusText);
-            return null;
+    const formData = new FormData();
+    formData.append("ww_user_id", ww_user_id);
+    formData.append("ww_product_image", ww_product_image);
+    formData.append("ww_image", ww_image, "captured-image.jpg");
+    formData.append("ww_access_token", ww_access_token);
+    const response = await fetch(`${baseUrl}/api/virtual-try-on`, {
+        method: "POST",
+        body: formData,
+    });
+    if (!response.ok) {
+        console.error("[WeWear VTO] API request failed:", response.status, response.statusText);
+        if (response.status === 500) {
+            return { "imageUrl": null, "error": { message: `Service unavailable. Please try again later.`, type: 'error' } };
         }
-        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;
+        else if (response.status === 503) {
+            return { "imageUrl": null, "error": { message: `Service overloaded. Please try again later.`, type: 'warning' } };
+        }
+        return { "imageUrl": null, "error": { message: `${response.statusText}`, type: 'warning' } };
     }
+    const result = await response.json();
+    console.log("[WeWear VTO] API response:", result);
+    return result;
 }
 
 /** CSS class names for consistent styling */
@@ -430,23 +430,17 @@ function createLoadingOverlay(text = "Processing...") {
 /**
  * Shows a loading overlay in a modal container
  */
-function showModalLoading(text = "Processing...") {
-    const modal = document.querySelector(`.${CSS_CLASSES.MODAL}`);
-    if (!modal)
-        return;
+function showModalLoading(container) {
     // Remove any existing loading overlays
     removeModalLoading();
-    const loadingOverlay = createLoadingOverlay(text);
-    modal.appendChild(loadingOverlay);
+    // Show loading in the product area
+    showProductLoading(container);
 }
 /**
  * Removes loading overlay from modal
  */
 function removeModalLoading() {
-    const modal = document.querySelector(`.${CSS_CLASSES.MODAL}`);
-    if (!modal)
-        return;
-    const existingOverlay = modal.querySelector(".ww-loading-overlay");
+    const existingOverlay = document.body.querySelector(".ww-loading-overlay");
     if (existingOverlay) {
         existingOverlay.remove();
     }
@@ -475,16 +469,7 @@ function removeProductLoading(container) {
     }
 }
 
-var loadingOverlay = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    createLoadingOverlay: createLoadingOverlay,
-    removeModalLoading: removeModalLoading,
-    removeProductLoading: removeProductLoading,
-    showModalLoading: showModalLoading,
-    showProductLoading: showProductLoading
-});
-
-function showReviewModal(imageBlob, callbacks, gallerySelector) {
+function showReviewModal(imageBlob, callbacks) {
     console.log("[WeWear VTO] Opening review modal...");
     // Remove any existing modals first
     removeElements(`.${CSS_CLASSES.MODAL}`);
@@ -601,10 +586,6 @@ function showReviewModal(imageBlob, callbacks, gallerySelector) {
         callbacks.onRetake();
     };
     usePhotoButton.onclick = async () => {
-        Promise.resolve().then(function () { return loadingOverlay; }).then(({ showProductLoading }) => {
-            const container = document.querySelector(gallerySelector);
-            showProductLoading(container, "Generating new virtual try-on...");
-        });
         URL.revokeObjectURL(imageUrl); // Clean up
         modal.remove();
         await callbacks.onAccept(imageBlob);
@@ -620,6 +601,74 @@ function showReviewModal(imageBlob, callbacks, gallerySelector) {
     console.log("[WeWear VTO] Review modal added to DOM");
 }
 
+function showAlert(container, message, type) {
+    var _a;
+    removeAlert(container); // Remove any existing alert
+    const alertDiv = document.createElement('div');
+    alertDiv.className = `ww-alert ww-alert-${type}`;
+    alertDiv.setAttribute('role', type === 'error' ? 'alert' : 'status');
+    alertDiv.setAttribute('aria-live', 'assertive');
+    alertDiv.style.cssText = `
+        position: absolute;
+        top: 16px;
+        left: 50%;
+        transform: translateX(-50%) translateY(-10px);
+        background: ${type === 'error' ? '#FEE2E2' : '#FEF9C3'};
+        color: ${type === 'error' ? '#B91C1C' : '#92400E'};
+        border: 1px solid ${type === 'error' ? '#F87171' : '#FBBF24'};
+        border-radius: 8px;
+        padding: 12px 16px;
+        z-index: 9999;
+        font-size: 15px;
+        font-weight: 500;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        display: flex;
+        align-items: center;
+        min-width: 220px;
+        max-width: 90%;
+        opacity: 0;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+    `;
+    alertDiv.innerHTML = `
+        <span style="flex: 1; line-height: 1.4;">${message}</span>
+        <button type="button" aria-label="Close alert"
+            style="
+                background: none;
+                border: none;
+                font-size: 20px;
+                color: inherit;
+                cursor: pointer;
+                margin-left: 12px;
+                padding: 0;
+                line-height: 1;
+            ">
+            &times;
+        </button>
+    `;
+    // Close on button click
+    (_a = alertDiv.querySelector('button')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+        fadeOutAndRemove(alertDiv);
+    });
+    container.appendChild(alertDiv);
+    // Animate in
+    requestAnimationFrame(() => {
+        alertDiv.style.opacity = '1';
+        alertDiv.style.transform = 'translateX(-50%) translateY(0)';
+    });
+}
+function fadeOutAndRemove(element) {
+    element.style.opacity = '0';
+    element.style.transform = 'translateX(-50%) translateY(-10px)';
+    setTimeout(() => {
+        element.remove();
+    }, 300);
+}
+function removeAlert(container) {
+    const alert = container.querySelector('.ww-alert');
+    if (alert)
+        fadeOutAndRemove(alert);
+}
+
 class VirtualTryOnWidget {
     constructor(config) {
         this.virtualTryOnImageUrl = null;
@@ -764,20 +813,20 @@ class VirtualTryOnWidget {
                 this.showCameraModalWithCallbacks(ww_access_token, ww_user_id, ww_product_image);
             },
             onAccept: async (acceptedImageBlob) => {
-                await this.processAcceptedImage(acceptedImageBlob, ww_access_token, ww_user_id, ww_product_image);
+                await this.processAcceptedImage(acceptedImageBlob, ww_access_token, ww_user_id, ww_product_image, document.querySelector(this.config.gallerySelector));
             },
         };
-        showReviewModal(imageBlob, callbacks, this.config.gallerySelector);
+        showReviewModal(imageBlob, callbacks);
     }
     /**
      * Processes the accepted image by calling the API
      * @private
      */
-    async processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_image) {
+    async processAcceptedImage(imageBlob, ww_access_token, ww_user_id, ww_product_image, container) {
         try {
             console.log("[WeWear VTO] Processing accepted image...");
             // Show loading in the review modal first
-            showModalLoading("Processing image...");
+            showModalLoading(container);
             // Store the API parameters for potential refresh
             this.lastApiParams = {
                 imageBlob,
@@ -793,8 +842,8 @@ class VirtualTryOnWidget {
             if (result === null || result === void 0 ? void 0 : result.imageUrl) {
                 this.replaceProductImage(result.imageUrl);
             }
-            else {
-                console.error("[WeWear VTO] Invalid API response:", result);
+            else if (result === null || result === void 0 ? void 0 : result.error) {
+                showAlert(container, result.error.message, result.error.type);
             }
         }
         catch (error) {
@@ -831,12 +880,11 @@ class VirtualTryOnWidget {
                     this.updateButtonContainer(container);
                 }
             }
-            else {
-                console.error("[WeWear VTO] Invalid API response on refresh:", result);
-                // Remove loading on error
+            else if (result === null || result === void 0 ? void 0 : result.error) {
                 const container = document.querySelector(this.config.gallerySelector);
                 if (container instanceof HTMLElement) {
                     removeProductLoading(container);
+                    showAlert(container, result.error.message, result.error.type);
                 }
             }
         }
@@ -950,11 +998,11 @@ class VirtualTryOnWidget {
         else if (originalRectHeight && originalRectHeight !== '0') {
             heightStyle = `${originalRectHeight}px`;
         }
-        image.style.cssText = `
-            width: ${widthStyle};
-            height: ${heightStyle};
-            object-fit: cover;
-            border-radius: 8px;
+        image.style.cssText = `
+            width: ${widthStyle};
+            height: ${heightStyle};
+            object-fit: cover;
+            border-radius: 8px;
         `;
         container.appendChild(image);
         // Re-add buttons