@thefittingroom/shop-ui 3.0.0-alpha-4 → 3.0.0-alpha-6

package/dist/esm/components/SizeRec.d.ts

@@ -38,7 +38,7 @@ export declare class SizeRecComponent {
     private tfrToggleClosedElements;
     private isCollapsed;
     private redraw;
-    constructor(sizeRecMainDivId: string, onSignInClick: () => void, onSignOutClick: () => void, onFitInfoClick: () => void, onTryOnClick: (styleId: number, sizeId: number) => void);
+    constructor(sizeRecMainDivId: string, onSignInClick: () => void, onSignOutClick: () => void, onFitInfoClick: () => void, onTryOnClick: (styleId: number, sizeId: number, shouldDisplay: boolean) => Promise<void>);
     get sku(): string;
     setSku(sku: string): void;
     get styleId(): number;

package/dist/esm/components/Vto.d.ts

@@ -1,6 +1,8 @@
 export declare class VtoComponent {
     private readonly vtoMainDivId;
     private isInit;
+    private currentSliderValue;
+    private slider;
     constructor(vtoMainDivId: string);
     init(): void;
     onNewFramesReady(frames: string[]): void;

package/dist/esm/components/slider.d.ts

@@ -1,3 +1,3 @@
 export declare const InitImageSlider: (sliderID: string, onChange: (slider: HTMLInputElement, imageUrl: string) => void) => {
-    Load(imageURLs: string[]): Error | (() => void);
+    Load(imageURLs: string[], initialValue?: number): Error | (() => void);
 };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v3.0.0-alpha-4 (2025-01-20T23:29:36.706Z)
+* thefittingroom v3.0.0-alpha-6 (2025-04-18T16:48:31.249Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -23,13 +23,13 @@ const InitImageSlider = (sliderID, onChange) => {
         throw new Error(`Slider with id ${sliderID} not found`);
     }
     return {
-        Load(imageURLs) {
+        Load(imageURLs, initialValue) {
             if (!Array.isArray(imageURLs) || !imageURLs.length) {
                 console.debug('slider has no images to load');
                 return new Error('slider has no images to load');
             }
             loadImages(imageURLs);
-            const defaultScrollValue = 0;
+            const defaultScrollValue = initialValue !== undefined ? initialValue : 0;
             slider.value = defaultScrollValue.toString();
             slider.max = (imageURLs.length - 1).toString();
             const handleSliderChange = () => {
@@ -26591,6 +26591,8 @@ class VtoComponent {
     constructor(vtoMainDivId) {
         this.vtoMainDivId = vtoMainDivId;
         this.isInit = false;
+        this.currentSliderValue = 0;
+        this.slider = null;
     }
     init() {
         if (this.isInit)
@@ -26604,21 +26606,34 @@ class VtoComponent {
           <input type="range" id="tfr-slider" />
         </div>
     `;
-        this.isInit = true;
-    }
-    onNewFramesReady(frames) {
         const tryOnImage = document.getElementById('tfr-tryon-image');
         const onChange = (slider, imageUrl) => {
             console.debug('slider change', slider, imageUrl);
             tryOnImage.src = imageUrl;
+            this.currentSliderValue = parseInt(slider.value);
         };
-        const slider = InitImageSlider('tfr-slider', onChange);
+        this.slider = InitImageSlider('tfr-slider', onChange);
+        this.isInit = true;
+    }
+    onNewFramesReady(frames) {
+        if (!this.isInit) {
+            this.init();
+        }
         if (Array.isArray(frames) && frames.length > 0) {
-            const e = slider.Load(frames);
+            // Ensure the current slider value is within bounds of the new frames array
+            const boundedValue = Math.min(this.currentSliderValue, frames.length - 1);
+            const e = this.slider.Load(frames, boundedValue);
             if (e instanceof Error) {
                 console.error(e);
                 return;
             }
+            // Restore previous slider position if it's within bounds
+            const sliderElement = document.getElementById('tfr-slider');
+            if (sliderElement && this.currentSliderValue < frames.length) {
+                sliderElement.value = this.currentSliderValue.toString();
+                const tryOnImage = document.getElementById('tfr-tryon-image');
+                tryOnImage.src = frames[this.currentSliderValue];
+            }
         }
     }
 }
@@ -26697,7 +26712,7 @@ n(css$6,{});
 var css$5 = "@media screen and (max-width:702px){.tfr-modal-title-logo-container{display:flex;flex-direction:column}}@media screen and (min-width:600px){.tfr-modal-content-container{border-radius:10px;height:auto;margin:auto;width:100%}}@media screen and (max-width:599px){#tfr-size-recommendations{width:calc(100vw - 30px)!important}.tfr-mobile-small-text{font-size:12px}.tfr-mobile-hidden{display:none}.tfr-modal-content{overflow:hidden}.tfr-modal-content-container{max-height:none;max-width:100vw;min-height:100vh;min-width:100vw}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{overflow:auto}}@media screen and (max-width:500px){.tfr-fieldset{width:90%}.tfr-how-it-works-item{flex-direction:column}.tfr-try-on-content{margin-left:0;margin-top:20px}}@media screen and (max-height:800px){.tfr-video-responsive{height:280px!important}}";
 n(css$5,{});
 
-var css$4 = "#tfr-size-recommendations{align-items:center;background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;flex-direction:column;font-family:var(--tfr-main-font);justify-content:center;padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations-container{align-items:center;display:none;flex-direction:column;justify-content:center;position:relative;width:100%}#tfr-size-rec-select-container{align-items:center;display:none;flex-direction:column;font-size:13px;width:100%}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-title-toggle{color:var(--tfr-grey);cursor:pointer;position:absolute;right:0;top:0;transition:all .3s ease}.tfr-chevron-up{transform:rotate(180deg) scaleY(.6)}.tfr-chevron-down{transform:rotate(0deg) scaleY(.6)}#tfr-info-icon{cursor:pointer}#tfr-size-rec-subtitle{border-bottom:2px solid #000;font-size:18px;font-weight:700;text-align:center;width:100%}#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;padding:0 10px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);justify-content:center;min-height:40px}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{flex-grow:1;padding-left:8px;text-align:right}.tfr-size-rec-table-cell-right{margin-left:16px;padding-right:8px;text-align:left}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex;width:150px}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);display:none;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:var(--tfr-size-selector-button-height);justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active):not(.tfr-disabled){background-color:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-button-active-border-color);border-style:solid;border-width:var(--tfr-size-selector-button-active-border-width);height:var(--tfr-size-selector-button-active-height)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:var(--tfr-size-selector-button-radius);border-top-left-radius:var(--tfr-size-selector-button-radius)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:var(--tfr-size-selector-button-radius);border-top-right-radius:var(--tfr-size-selector-button-radius)}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img,.tfr-powered-by-logo svg{height:24px;width:12px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}#tfr-sign-in-nav{margin-bottom:80px}.tfr-disabled{cursor:default}#tfr-login-to-view{cursor:pointer}";
+var css$4 = "#tfr-size-recommendations{align-items:center;background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;flex-direction:column;font-family:var(--tfr-main-font);justify-content:center;padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations-container{align-items:center;display:none;flex-direction:column;justify-content:center;position:relative;width:100%}#tfr-size-rec-select-container{align-items:center;display:none;flex-direction:column;font-size:13px;width:100%}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-title-toggle{color:var(--tfr-grey);cursor:pointer;position:absolute;right:0;top:0;transition:all .3s ease}.tfr-chevron-up{transform:rotate(180deg) scaleY(.6)}.tfr-chevron-down{transform:rotate(0deg) scaleY(.6)}#tfr-info-icon{cursor:pointer}#tfr-size-rec-subtitle{border-bottom:2px solid #000;font-size:18px;font-weight:700;text-align:center;width:100%}#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;padding:0 10px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);justify-content:center;min-height:40px}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{flex-grow:1;padding-left:8px;padding-right:8px;text-align:right}.tfr-size-rec-table-cell-right{flex-grow:1;padding-left:8px;padding-right:8px;text-align:left}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex;width:150px}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);display:none;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:var(--tfr-size-selector-button-height);justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active):not(.tfr-disabled){background-color:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-button-active-border-color);border-style:solid;border-width:var(--tfr-size-selector-button-active-border-width);height:var(--tfr-size-selector-button-active-height)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:var(--tfr-size-selector-button-radius);border-top-left-radius:var(--tfr-size-selector-button-radius)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:var(--tfr-size-selector-button-radius);border-top-right-radius:var(--tfr-size-selector-button-radius)}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img,.tfr-powered-by-logo svg{height:24px;width:12px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}#tfr-sign-in-nav{margin-bottom:80px}.tfr-disabled{cursor:default}#tfr-login-to-view{cursor:pointer}.tfr-try-on-button{align-items:center;background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);cursor:pointer;display:flex;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);height:var(--tfr-size-selector-button-height);justify-content:center;margin-bottom:10px;margin-top:20px;max-width:200px;position:relative;transition:all .15s ease-in;width:100%}.tfr-try-on-button.loading,.tfr-try-on-button:disabled{cursor:not-allowed;opacity:.7}.tfr-try-on-button.loading:after{animation:spin 1s linear infinite;border:2px solid var(--tfr-size-selector-text-color);border-radius:50%;border-top:2px solid transparent;content:\"\";height:16px;margin-left:8px;position:absolute;width:16px}@keyframes spin{to{transform:rotate(1turn)}}";
 n(css$4,{});
 
 var css$3 = ".tfr-mt-10{margin-top:10px}.tfr-mt-20{margin-top:20px}.tfr-mt-15{margin-top:15px}.tfr-mt-30{margin-top:30px}.mt-40{margin-top:40px}.tfr-mb-40{margin-bottom:40px}.tfr-mb-20{margin-bottom:20px}.tfr-mr-10{margin-right:10px}.tfr-mr-15{margin-right:15px}.tfr-mt-50{margin-top:50px}.tfr-mt-60{margin-top:60px}.tfr-mb-60{margin-bottom:60px}.tfr-mr-20{margin-right:20px}.tfr-mt-15-p{margin-top:15%}.tfr-mb-13-p{margin-bottom:13%}.tfr-m-h-auto{margin-left:auto;margin-right:auto}.tfr-pt-20{padding-top:20px}.tfr-pb-50{padding-bottom:50px}.tfr-p-20{padding:20px 10px}.tfr-pr-20{padding-right:20px}.tfr-pl-20{padding-left:20px}.tfr-pb-7-p{padding-bottom:7%}";
@@ -27501,6 +27516,9 @@ class SizeRecComponent {
             this.isCollapsed = false;
             this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
             this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
+            // Ensure the container is visible
+            this.tfrSizeRecSelectContainer.style.display = 'flex';
+            this.tfrSizeRecSelectContainer.style.opacity = '1';
         }
         else {
             this.tfrSizeHowItFits.style.opacity = '0.4';
@@ -27577,6 +27595,48 @@ class SizeRecComponent {
         this.tfrSizeRecTitleToggle.addEventListener('click', this.toggletSizeRecSelectContainer.bind(this));
         this.tfrInfoIcon.addEventListener('click', this.onFitInfoClick);
         this.tfrLoginToView.addEventListener('click', this.onSignInClick);
+        const tryOnButton = document.getElementById('tfr-try-on-button');
+        if (!tryOnButton)
+            return;
+        tryOnButton.addEventListener('click', async () => {
+            // Prevent multiple clicks while loading
+            if (tryOnButton.classList.contains('loading')) {
+                return;
+            }
+            const activeButton = document.querySelector('.tfr-size-rec-select-button.active');
+            if (!activeButton)
+                return;
+            const selectedSizeId = Number(activeButton.getAttribute('data-size-id'));
+            if (Number.isNaN(selectedSizeId))
+                return;
+            // Set loading state
+            tryOnButton.classList.add('loading');
+            const originalText = tryOnButton.textContent;
+            tryOnButton.textContent = ' ';
+            tryOnButton.setAttribute('disabled', 'true');
+            try {
+                // Get all size buttons
+                const allSizeButtons = Array.from(document.querySelectorAll('.tfr-size-rec-select-button'));
+                // Request frames for all sizes concurrently
+                await Promise.all(allSizeButtons.map(async (button) => {
+                    const sizeId = Number(button.getAttribute('data-size-id'));
+                    if (Number.isNaN(sizeId))
+                        return;
+                    // Only display the active size, others are just requested
+                    const shouldDisplay = button === activeButton;
+                    await this.onTryOnClick(this.styleId, sizeId, shouldDisplay);
+                }));
+            }
+            catch (error) {
+                console.error('Error during try-on:', error);
+            }
+            finally {
+                // Reset loading state
+                tryOnButton.classList.remove('loading');
+                tryOnButton.textContent = originalText;
+                tryOnButton.removeAttribute('disabled');
+            }
+        });
     }
     onSizeRecSelectClick(e) {
         const target = e.target;
@@ -27593,7 +27653,7 @@ class SizeRecComponent {
         const selectedSizeId = Number(target.getAttribute('data-size-id'));
         if (Number.isNaN(selectedSizeId))
             return;
-        this.onTryOnClick(this.styleId, selectedSizeId);
+        this.onTryOnClick(this.styleId, selectedSizeId, true);
     }
     renderSizeRec(recommended, sizes) {
         this.tfrSizeRecSize.innerHTML = `&nbsp;${recommended}`;
@@ -27601,8 +27661,6 @@ class SizeRecComponent {
         this.redraw = (index) => this.renderSizeRecTable(sizes, index);
         this.redraw(selectedSizeIndex);
         this.renderSizeRecSelect(sizes, selectedSizeIndex);
-        const selectedSizeId = sizes[selectedSizeIndex].size_id;
-        this.onTryOnClick(this.styleId, selectedSizeId);
     }
     renderSizeRecTable(sizes, index) {
         const { locations } = sizes[index];
@@ -27724,6 +27782,8 @@ class SizeRecComponent {
                           </div>
 
                           <div id="tfr-size-rec-table"></div>
+
+                          <div id="tfr-try-on-button" class="tfr-try-on-button">Try On</div>
                         </div>
                       </div>
 
@@ -27955,10 +28015,8 @@ class FittingRoom {
         this.tfrModal = new TfrModal(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
         this.tfrShop = initShop(Number(this.shopId), env);
         this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this), this.onFitInfoClick.bind(this), this.onTryOnClick.bind(this));
-        try {
+        if (vtoMainDivId)
             this.vtoComponent = new VtoComponent(vtoMainDivId);
-        }
-        catch (_a) { }
     }
     get shop() {
         return this.tfrShop;
@@ -28057,10 +28115,19 @@ class FittingRoom {
     onFitInfoClick() {
         this.tfrModal.toFitInfo();
     }
-    async onTryOnClick(styleId, sizeId) {
+    async onTryOnClick(styleId, sizeId, shouldDisplay = true) {
+        if (!this.vtoComponent)
+            return console.error('VtoComponent is not initialized');
         const frames = await this.shop.tryOn(styleId, sizeId);
-        this.vtoComponent.init();
-        this.vtoComponent.onNewFramesReady(frames);
+        if (shouldDisplay) {
+            try {
+                this.vtoComponent.init();
+                this.vtoComponent.onNewFramesReady(frames);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
     }
     onUserProfileChange(userProfile) {
         var _a, _b, _c, _d;