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

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

@@ -0,0 +1,7 @@
+export declare class VtoComponent {
+    private readonly vtoMainDivId;
+    private isInit;
+    constructor(vtoMainDivId: string);
+    init(): void;
+    onNewFramesReady(frames: string[]): void;
+}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v3.0.0-alpha-2 (2025-01-17T20:01:07.850Z)
+* thefittingroom v3.0.0-alpha-4 (2025-01-20T23:29:36.706Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -29,7 +29,7 @@ const InitImageSlider = (sliderID, onChange) => {
                 return new Error('slider has no images to load');
             }
             loadImages(imageURLs);
-            const defaultScrollValue = (imageURLs === null || imageURLs === void 0 ? void 0 : imageURLs.length) - 2;
+            const defaultScrollValue = 0;
             slider.value = defaultScrollValue.toString();
             slider.max = (imageURLs.length - 1).toString();
             const handleSliderChange = () => {
@@ -26587,6 +26587,42 @@ var index = /*#__PURE__*/Object.freeze({
     FitNames: FitNames
 });
 
+class VtoComponent {
+    constructor(vtoMainDivId) {
+        this.vtoMainDivId = vtoMainDivId;
+        this.isInit = false;
+    }
+    init() {
+        if (this.isInit)
+            return;
+        const vtoMainDiv = document.getElementById(this.vtoMainDivId);
+        if (!vtoMainDiv)
+            throw new Error(`Element with id ${this.vtoMainDivId} not found`);
+        vtoMainDiv.innerHTML = `
+        <div class="tfr-slider-wrapper">
+          <img id="tfr-tryon-image" src="" />
+          <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;
+        };
+        const slider = InitImageSlider('tfr-slider', onChange);
+        if (Array.isArray(frames) && frames.length > 0) {
+            const e = slider.Load(frames);
+            if (e instanceof Error) {
+                console.error(e);
+                return;
+            }
+        }
+    }
+}
+
 var L = {
     AssociatedEmail: 'If there is an account associated with that email, We have sent a link to reset your password.',
     BackToSignIn: 'Back to sign in',
@@ -26649,7 +26685,7 @@ n(css$a,{});
 var css$9 = "#fit-title{margin-bottom:20px;margin-top:-30px}#fit-subtitle,#fit-title{color:#209da7;font-size:24px;font-weight:700}#fit-subtitle{position:absolute;right:17px;top:100px}#fit-subtitle-mobile{color:#7d7d7d;font-size:24px;font-weight:700;margin-top:20px}#fit-outline-container{display:flex;justify-content:center}#fit-outline-inner{position:relative}#fit-outline-inner,#tfr-fit-outline-img{width:184px}#fit-outline-inner,#fit-outline-inner-left,#fit-outline-inner-right,#tfr-fit-outline-img{height:701px}#fit-outline-inner-left,#fit-outline-inner-right{position:relative;width:260px}#fit-outline-container .fit-outline-line{display:block}.fit-outline-line{background:#000;height:1px;position:absolute}.fit-outline-line-text{border-bottom:1px solid #000;font-size:24px;position:absolute}.fit-outline-line-chest-text{left:-11px;text-align:right;top:163px;width:254px}.fit-outline-line-n-waist-text{left:-11px;text-align:right;top:208px;width:254px}.fit-outline-line-p-waist-text{right:-10px;text-align:left;top:233px;width:253px}.fit-outline-line-h-hip-text{left:-3px;text-align:right;top:255px;width:246px}.fit-outline-line-l-hip-text{left:-3px;text-align:right;top:302px;width:246px}.fit-outline-line-thigh-text{right:3px;text-align:left;top:341px;width:240px}.fit-outline-line-chest{left:42px;top:194px;width:99px}.fit-outline-line-n-waist{left:50px;top:239px;width:83px}.fit-outline-line-p-waist{left:45px;top:264px;width:93px}.fit-outline-line-h-hip{left:30px;top:286px;width:122px}.fit-outline-line-l-hip{left:21px;top:333px;width:141px}.fit-outline-line-thigh-l{left:27px;top:372px;width:60px}.fit-outline-line-thigh-r{left:95px;top:372px;width:61px}#fit-line-container{position:relative;width:100%}#fit-line-text-container{align-items:center;display:flex;justify-content:space-between}.fit-line-item{font-weight:700;width:110px}.fit-line-item .light-text{font-weight:500}.fit-line-item-green{color:#209da7}#fit-line{display:flex;justify-content:space-around;margin-bottom:4px;margin-top:30px}#fit-line-1,#fit-line-2,#fit-line-3,#fit-line-4,#fit-line-5,#fit-line-6,#fit-line-7{background:#000;height:2px;position:relative;width:110px}#fit-line-3,#fit-line-4,#fit-line-5{background:#209da7}#fit-line-1:before,#fit-line-2:before,#fit-line-3:before,#fit-line-5:before,#fit-line-6:before,#fit-line-7:before{background:#000;border-radius:50%;content:\"\";height:12px;position:absolute;top:-5px;width:12px}#fit-line-1:before,#fit-line-2:before,#fit-line-3:before{left:0}#fit-line-5:before,#fit-line-6:before,#fit-line-7:before{right:0}#fit-line-1:before,#fit-line-2:before,#fit-line-6:before,#fit-line-7:before{background:#000}#fit-line-3:before,#fit-line-5:before{background:#209da7}#fit-line-2:before,#fit-line-6:before{display:none}#fit-line-1:after,#fit-line-2:after,#fit-line-3:after,#fit-line-4:after,#fit-line-5:after,#fit-line-6:after,#fit-line-7:after{border-left:2px dashed #000;content:\"\";display:block;height:20px;left:50%;position:absolute;top:-20px}#fit-line-3:after,#fit-line-4:after,#fit-line-5:after{border-left:2px dashed #209da7}#fit-line-texts{display:flex;justify-content:space-between;padding:0 70px}#fit-line-texts div:nth-of-type(2){color:#209da7}.margin-top-10{margin-top:10px}.desktop-hidden{display:none}#cta-link{cursor:pointer;font-size:20px;margin:auto;text-decoration:underline;width:150px}.powered-by{align-items:center;display:flex;justify-content:center;margin-top:10px}@media screen and (max-width:599px){#fit-outline-inner,#fit-outline-inner-left,#fit-outline-inner-right{height:400px}#fit-outline-inner{flex-shrink:0;overflow:hidden}#fit-title{margin-top:0}#fit-outline-container{margin-top:-50px;transform:scale(.7)}.fit-line-item{font-size:10px;font-weight:500}.fit-outline-line-text{font-size:16px;line-height:31px}.fit-outline-line-chest-text,.fit-outline-line-n-waist-text{left:-11px;width:auto}.fit-outline-line-p-waist-text{right:-10px;width:auto}.fit-outline-line-h-hip-text,.fit-outline-line-l-hip-text{left:-3px;width:auto}.fit-outline-line-thigh-text{right:3px;width:auto}#fit-line{margin-top:10px}#fit-line-texts{font-size:12px;padding:0 15px}#cta-section{margin-top:-30px}#fit-line-2:before,#fit-line-6:before,.desktop-hidden{display:block}#fit-line-1:after,#fit-line-2:after,#fit-line-3:after,#fit-line-4:after,#fit-line-5:after,#fit-line-6:after,#fit-line-7:after,.mobile-hidden{display:none}}";
 n(css$9,{});
 
-var css$8 = ".tfr-home-button-container{display:flex;flex-wrap:wrap;margin:20px}.tfr-home-button-container>button{border:0;cursor:pointer;height:60px;margin:20px;width:200px}.tfr-home-button-container>button:hover{background-color:#e6e6e6}[data-tfr=hidden]{display:none}.tfr-modal{background-color:rgba(0,0,0,.53);display:flex;height:100%;left:0;position:fixed;top:0;width:100%;z-index:10000}.tfr-modal-content{margin:0 auto;text-align:center;width:90%}.tfr-modal-content-flex{align-items:center;display:flex}.tfr-modal-content-container{background-color:#fff;border:1px solid #434343;border-radius:0;box-shadow:0 6px 6px #00000029;line-height:normal;max-height:100vh;max-width:850px;overflow:auto;width:100%}#tfr-close-container{padding-right:10px}.tfr-close-container{text-align:end}.tfr-close{color:#aaa;font-size:28px;font-weight:700;height:50px;width:50px}.tfr-close:focus,.tfr-close:hover{color:#000;text-decoration:none}.tfr-cursor:hover{cursor:pointer}.tfr-underline{text-decoration:underline}.tfr-standard-button{border:0;border-radius:3px;color:#fff;height:43px;width:138px}.tfr-logo-container{align-items:center;display:flex}.tfr-modal-title-logo-container{align-items:center;display:flex;justify-content:center}.tfr-girl-clothes{display:inline-block;height:316px;width:253px}.tfr-t-a-center{text-align:center}.tfr-w-70-p{width:70%}.tfr-w-80-p{width:80%}.tfr-w-85-p{width:85%}.tfr-w-150{width:150px}.tfr-h-150{height:150px}.tfr-d-none{display:none}.tfr-d-block{display:block}.tfr-d-flex{display:flex}.tfr-how-it-works-item{align-items:center;display:flex;justify-items:center}.tfr-try-on-content{margin-left:60px}#tfr-tryon-image{max-width:30vw}.progress-bar{background-color:#fff;border:1px solid #bdbdbd;height:10px;margin:15px auto 0;width:55%}.progress-bar-fill{animation-duration:120s;animation-name:progress;background-color:#209da7;color:#fff;display:block;font-size:16px;height:100%;text-align:center;transition:width .6s linear}#tfr-video{height:100%;max-height:350px;max-width:350px}.tfr-logo-box{display:flex;margin:auto;max-height:400px;max-width:860px;padding:20px}.tfr-flex,.tfr-logo-box{align-items:center;justify-content:center}.tfr-qr-code{width:200px}.tfr-space-above{margin-top:10px}.tfr-max-w-600{margin:auto;max-width:600px}#tfr-qr-border-box{align-items:center;border:2px solid var(--tfr-brand-color);border-radius:16px;display:flex;flex-direction:column;height:350px;justify-content:center;margin-left:20px;padding:0 30px;width:300px}.tfr-mobile-logo{height:60px}#email-input,#password-input{font-size:16px}.tfr-door-icon,.tfr-user-icon{color:#209da7}.tfr-logged-in,.tfr-toggle-closed{display:none}.tfr-flex{display:flex}.tfr-gap{gap:4px}.tfr-items-center{align-items:center}.tfr-mb-2{margin-bottom:8px}#tfr-logged-out-overlay-container{position:relative}#tfr-logged-out-overlay{align-items:center;background:hsla(0,0%,100%,.8);bottom:0;display:flex;font-size:16px;font-weight:700;justify-content:center;left:0;line-height:16px;position:absolute;right:0;text-align:center;top:0}";
+var css$8 = ".tfr-home-button-container{display:flex;flex-wrap:wrap;margin:20px}.tfr-home-button-container>button{border:0;cursor:pointer;height:60px;margin:20px;width:200px}.tfr-home-button-container>button:hover{background-color:#e6e6e6}[data-tfr=hidden]{display:none}.tfr-modal{background-color:rgba(0,0,0,.53);display:flex;height:100%;left:0;position:fixed;top:0;width:100%;z-index:10000}.tfr-modal-content{margin:0 auto;text-align:center;width:90%}.tfr-modal-content-flex{align-items:center;display:flex}.tfr-modal-content-container{background-color:#fff;border:1px solid #434343;border-radius:0;box-shadow:0 6px 6px #00000029;line-height:normal;max-height:100vh;max-width:850px;overflow:auto;width:100%}#tfr-close-container{padding-right:10px}.tfr-close-container{text-align:end}.tfr-close{color:#aaa;font-size:28px;font-weight:700;height:50px;width:50px}.tfr-close:focus,.tfr-close:hover{color:#000;text-decoration:none}.tfr-cursor:hover{cursor:pointer}.tfr-underline{text-decoration:underline}.tfr-standard-button{border:0;border-radius:3px;color:#fff;height:43px;width:138px}.tfr-logo-container{align-items:center;display:flex}.tfr-modal-title-logo-container{align-items:center;display:flex;justify-content:center}.tfr-girl-clothes{display:inline-block;height:316px;width:253px}.tfr-t-a-center{text-align:center}.tfr-w-70-p{width:70%}.tfr-w-80-p{width:80%}.tfr-w-85-p{width:85%}.tfr-w-150{width:150px}.tfr-h-150{height:150px}.tfr-d-none{display:none}.tfr-d-block{display:block}.tfr-d-flex{display:flex}.tfr-how-it-works-item{align-items:center;display:flex;justify-items:center}.tfr-try-on-content{margin-left:60px}#tfr-tryon-image{max-width:30vw}.progress-bar{background-color:#fff;border:1px solid #bdbdbd;height:10px;margin:15px auto 0;width:55%}.progress-bar-fill{animation-duration:120s;animation-name:progress;background-color:#209da7;color:#fff;display:block;font-size:16px;height:100%;text-align:center;transition:width .6s linear}#tfr-video{height:100%;max-height:350px;max-width:350px}.tfr-logo-box{display:flex;margin:auto;max-height:400px;max-width:860px;padding:20px}.tfr-flex,.tfr-logo-box{align-items:center;justify-content:center}.tfr-qr-code{width:200px}.tfr-space-above{margin-top:10px}.tfr-max-w-600{margin:auto;max-width:600px}#tfr-qr-border-box{align-items:center;border:2px solid var(--tfr-brand-color);border-radius:16px;display:flex;flex-direction:column;height:350px;justify-content:center;margin-left:20px;padding:0 30px;width:300px}.tfr-mobile-logo{height:60px}#email-input,#password-input{font-size:16px}.tfr-door-icon,.tfr-user-icon{color:#209da7}.tfr-logged-in,.tfr-toggle-closed{display:none}.tfr-flex{display:flex}.tfr-gap{gap:4px}.tfr-items-center{align-items:center}.tfr-mb-2{margin-bottom:8px}#tfr-logged-out-overlay-container{position:relative}#tfr-logged-out-overlay{align-items:center;background:hsla(0,0%,100%,.8);bottom:0;display:flex;font-size:16px;font-weight:700;justify-content:center;left:0;line-height:16px;position:absolute;right:0;text-align:center;top:0}.tfr-slider-wrapper{align-items:center;display:flex;flex-direction:column}#tfr-slider{accent-color:var(--tfr-brand-color)}";
 n(css$8,{});
 
 var css$7 = "input{border:none;box-shadow:none!important;width:100%}input:focus,select:focus,textarea:focus{border:none;outline:none}.tfr-fieldset{margin-left:auto;margin-right:auto;width:65%}.tfr-fieldset,.tfr-fieldset-inline{border-color:rgba(0,0,0,.5);border-radius:10px;border-width:1px;padding:5px 10px 10px;text-align:left}.tfr-fieldset-inline{margin-right:10px;width:250px}.tfr-fieldset-err{border-color:red}";
@@ -27800,10 +27836,10 @@ class TfrSizeRec {
         if (!sizeRec)
             return null;
         return {
-            recommended: sizeRec.recommended_size.label,
+            recommended: sizeRec.recommended_size.size_value.size,
             sizes: sizeRec.fits.map((fit) => {
                 return {
-                    size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).label,
+                    size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).size_value.size,
                     size_id: fit.size_id,
                     locations: fit.measurement_location_fits
                         .map((locationFit) => {
@@ -27904,7 +27940,7 @@ var AvatarState;
 })(AvatarState || (AvatarState = {}));
 
 class FittingRoom {
-    constructor(shopId, modalDivId, sizeRecMainDivId, hooks = {}, cssVariables, _env) {
+    constructor(shopId, modalDivId, sizeRecMainDivId, vtoMainDivId, hooks = {}, cssVariables, _env) {
         this.shopId = shopId;
         this.hooks = hooks;
         this.isLoggedIn = false;
@@ -27919,6 +27955,10 @@ 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 {
+            this.vtoComponent = new VtoComponent(vtoMainDivId);
+        }
+        catch (_a) { }
     }
     get shop() {
         return this.tfrShop;
@@ -28019,7 +28059,8 @@ class FittingRoom {
     }
     async onTryOnClick(styleId, sizeId) {
         const frames = await this.shop.tryOn(styleId, sizeId);
-        this.tfrModal.onTryOn(frames);
+        this.vtoComponent.init();
+        this.vtoComponent.onNewFramesReady(frames);
     }
     onUserProfileChange(userProfile) {
         var _a, _b, _c, _d;
@@ -28079,8 +28120,8 @@ class FittingRoom {
     }
 }
 
-const initFittingRoom = async (shopId, modalDivId, sizeRecMainDivId, hooks = {}, cssVariables = {}, env = 'dev') => {
-    const tfr = new FittingRoom(shopId, modalDivId, sizeRecMainDivId, hooks, cssVariables, env);
+const initFittingRoom = async ({ shopId, modalDivId, sizeRecMainDivId, vtoMainDivId, hooks = {}, cssVariables = {}, env = 'dev', }) => {
+    const tfr = new FittingRoom(shopId, modalDivId, sizeRecMainDivId, vtoMainDivId, hooks, cssVariables, env);
     await tfr.onInit();
     return tfr;
 };