@thefittingroom/shop-ui 1.5.9 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/esm/components/Modals/ErrorModal.d.ts +1 -0
  2. package/dist/esm/components/Modals/FitModal.d.ts +3 -0
  3. package/dist/esm/components/SizeRec.d.ts +9 -3
  4. package/dist/esm/components/index.d.ts +2 -1
  5. package/dist/esm/components/svgs.d.ts +1 -0
  6. package/dist/esm/index.js +290 -90
  7. package/dist/esm/index.js.map +1 -1
  8. package/dist/esm/index.min.js +153 -153
  9. package/dist/esm/styles/index.d.ts +1 -0
  10. package/dist/esm/tfr-modal.d.ts +1 -0
  11. package/dist/esm/tfr-size-rec.d.ts +2 -1
  12. package/dist/esm/tfr.d.ts +1 -0
  13. package/dist/esm/types/index.d.ts +5 -0
  14. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * thefittingroom v1.5.9 (2024-09-10T20:53:03.850Z)
2
+ * thefittingroom v2.0.0 (2024-10-23T03:37:20.685Z)
3
3
  * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
4
4
  */
5
5
  function loadImageRecursive(imageURL, imageURLs) {
@@ -26515,10 +26515,13 @@ const validatePassword = (password) => {
26515
26515
 
26516
26516
  var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
26517
26517
 
26518
- var css$9 = ".tfr-c-white{color:var(--tfr-white)}.tfr-c-brand{color:var(--tfr-brand-color)}.tfr-c-brand-bg{background-color:var(--tfr-brand-color)}.tfr-c-black{color:var(--tfr-black)}.tfr-c-black-o5{color:rgba(0,0,0,.5)}.tfr-c-red{color:var(--tfr-red)}";
26518
+ var css$a = ".tfr-c-white{color:var(--tfr-white)}.tfr-c-brand{color:var(--tfr-brand-color)}.tfr-c-brand-bg{background-color:var(--tfr-brand-color)}.tfr-c-black{color:var(--tfr-black)}.tfr-c-black-o5{color:rgba(0,0,0,.5)}.tfr-c-red{color:var(--tfr-red)}";
26519
+ n(css$a,{});
26520
+
26521
+ 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-title{margin-top:0}#fit-outline-container{margin-top:-50px;transform:scale(.85)}.fit-line-item{font-size:11px}.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}#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}#cta-section{margin-top:-40px}}";
26519
26522
  n(css$9,{});
26520
26523
 
26521
- 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{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{margin:auto;max-height:400px;max-width:860px;padding:20px}.tfr-flex,.tfr-logo-box{align-items:center;display:flex;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}";
26524
+ 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-2{gap:8px}.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}";
26522
26525
  n(css$8,{});
26523
26526
 
26524
26527
  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}";
@@ -26527,10 +26530,10 @@ n(css$7,{});
26527
26530
  var css$6 = ".lds-ellipsis{display:inline-block;height:80px;position:relative;width:80px}.lds-ellipsis div{animation-timing-function:cubic-bezier(0,1,1,0);background:var(--tfr-brand-color);border-radius:50%;display:block;height:13px;position:absolute;top:33px;width:13px}.lds-ellipsis div:first-child{animation:lds-ellipsis1 .6s infinite;left:8px}.lds-ellipsis div:nth-child(2){animation:lds-ellipsis2 .6s infinite;left:8px}.lds-ellipsis div:nth-child(3){animation:lds-ellipsis2 .6s infinite;left:32px}.lds-ellipsis div:nth-child(4){animation:lds-ellipsis3 .6s infinite;left:56px}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}";
26528
26531
  n(css$6,{});
26529
26532
 
26530
- 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-hidden{display:none}.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-width:380){#tfr-size-rec-subtitle{min-width:none}}@media screen and (max-height:800px){.tfr-video-responsive{height:280px!important}}";
26533
+ 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-hidden{display:none}.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}}";
26531
26534
  n(css$5,{});
26532
26535
 
26533
- 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-size-rec-subtitle{background-color:var(--tfr-grey);border-radius:4px;color:var(--tfr-white);font-family:var(--tfr-subtitle-font);min-width:318px;padding:8px;text-align:center;width:100%}#tfr-size-rec-subtitle,#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){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:24px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}#tfr-sign-in-nav{margin-bottom:80px}";
26536
+ 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){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:24px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}#tfr-sign-in-nav{margin-bottom:80px}";
26534
26537
  n(css$4,{});
26535
26538
 
26536
26539
  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%}";
@@ -26582,6 +26585,144 @@ const ErrorModal = (props) => {
26582
26585
  Hook,
26583
26586
  Unhook,
26584
26587
  Body,
26588
+ useFullModalContent: true,
26589
+ };
26590
+ };
26591
+
26592
+ const tfrDoor = `
26593
+ <svg class="tfr-door-icon" width="68" height="124" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
26594
+ <path d="M0.911938 0L67.4819 17.09V106.49L0.911938 123.51V0Z" fill="currentColor">
26595
+ </path>
26596
+ <path d="M52.8019 64.44C54.7791 64.44 56.3819 62.4387 56.3819 59.97C56.3819 57.5013 54.7791 55.5 52.8019 55.5C50.8248 55.5 49.2219 57.5013 49.2219 59.97C49.2219 62.4387 50.8248 64.44 52.8019 64.44Z" fill="white">
26597
+ </path>
26598
+ </svg>`;
26599
+ const userIcon = `<svg class="tfr-user-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
26600
+ <g clip-path="url(#clip0_82_11365)">
26601
+ <path fill-rule="evenodd" clip-rule="evenodd"
26602
+ d="M4.3125 4.78125C4.3125 3.02084 5.73959 1.59375 7.5 1.59375C9.26041 1.59375 10.6875 3.02084 10.6875 4.78125C10.6875 6.54166 9.26041 7.96875 7.5 7.96875C5.73959 7.96875 4.3125 6.54166 4.3125 4.78125ZM9.625 4.78125C9.625 3.60764 8.6736 2.65625 7.5 2.65625C6.32639 2.65625 5.375 3.60764 5.375 4.78125C5.375 5.95485 6.32639 6.90625 7.5 6.90625C8.6736 6.90625 9.625 5.95485 9.625 4.78125Z"
26603
+ fill="currentColor" fill-opacity="0.7" />
26604
+ <path fill-rule="evenodd" clip-rule="evenodd"
26605
+ d="M2.1875 13.1634C2.1875 10.5693 4.58181 8.5 7.5 8.5C10.4182 8.5 12.8125 10.5693 12.8125 13.1634C12.8125 16.1539 2.1875 16.1539 2.1875 13.1634ZM11.75 13.1634C11.75 11.1933 9.86303 9.5625 7.5 9.5625C5.13697 9.5625 3.25 11.1933 3.25 13.1634C3.25 13.7564 4.45689 14.126 5.96113 14.2721L6.31312 14.3019C7.08543 14.3577 7.91457 14.3577 8.68688 14.3019L9.03887 14.2721C10.5431 14.126 11.75 13.7564 11.75 13.1634Z"
26606
+ fill="currentColor" fill-opacity="0.7" />
26607
+ </g>
26608
+ <defs>
26609
+ <clipPath id="clip0_82_11365">
26610
+ <rect width="16" height="16" fill="white" />
26611
+ </clipPath>
26612
+ </defs>
26613
+ </svg>`;
26614
+ const infoIcon = `<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
26615
+ <rect width="13" height="13" fill="url(#pattern0_641_1375)"/>
26616
+ <defs>
26617
+ <pattern id="pattern0_641_1375" patternContentUnits="objectBoundingBox" width="1" height="1">
26618
+ <use xlink:href="#image0_641_1375" transform="scale(0.00793651)"/>
26619
+ </pattern>
26620
+ <image id="image0_641_1375" width="126" height="126" xlink:href="data:image/png;base64,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"/>
26621
+ </defs>
26622
+ </svg>
26623
+ `;
26624
+
26625
+ const FitModal = (props) => {
26626
+ const imageBaseUrl = 'https://assets.dev.thefittingroom.xyz/images/';
26627
+ const onSignInNav = () => props.onSignInNav();
26628
+ const Hook = () => {
26629
+ document.getElementById('cta-link').addEventListener('click', onSignInNav);
26630
+ };
26631
+ const Unhook = () => {
26632
+ document.getElementById('cta-link').removeEventListener('click', onSignInNav);
26633
+ };
26634
+ const Body = () => {
26635
+ return `
26636
+ <div>
26637
+ <div id="fit-title">Fit Scale</div>
26638
+
26639
+ <div id="fit-line-container">
26640
+ <div id="fit-line-text-container">
26641
+ <div class="fit-line-item mobile-hidden">Too Tight</div>
26642
+
26643
+ <div class="fit-line-item">
26644
+ <div>Tight <span class="light-text">or</span><br /> More fitted</div>
26645
+
26646
+ <div class="desktop-hidden margin-top-10">Too Tight</div>
26647
+ </div>
26648
+
26649
+ <div class="fit-line-item fit-line-item-green">Slightly tight <br /><span class="light-text">or</span> Fitted</div>
26650
+ <div class="fit-line-item fit-line-item-green">Perfect Fit</div>
26651
+ <div class="fit-line-item fit-line-item-green">Slightly loose <br /><span class="light-text">or</span> Less fitted</div>
26652
+
26653
+ <div class="fit-line-item">
26654
+ <div>Loose <span class="light-text">or</span><br /> Not fitted</div>
26655
+
26656
+ <div class="desktop-hidden margin-top-10">Oversized</div>
26657
+ </div>
26658
+
26659
+ <div class="fit-line-item mobile-hidden">Oversized</div>
26660
+ </div>
26661
+
26662
+ <div id="fit-line">
26663
+ <div id="fit-line-1" class="mobile-hidden">&nbsp;</div>
26664
+ <div id="fit-line-2">&nbsp;</div>
26665
+ <div id="fit-line-3">&nbsp;</div>
26666
+ <div id="fit-line-4">&nbsp;</div>
26667
+ <div id="fit-line-5">&nbsp;</div>
26668
+ <div id="fit-line-6">&nbsp;</div>
26669
+ <div id="fit-line-7" class="mobile-hidden">&nbsp;</div>
26670
+ </div>
26671
+
26672
+ <div id="fit-line-texts">
26673
+ <div>Poor Fit</div>
26674
+ <div>Acceptable Fit Fit</div>
26675
+ <div>Poor Fit</div>
26676
+ </div>
26677
+ </div>
26678
+
26679
+ <div id="fit-subtitle-mobile" class="desktop-hidden">Measurement&nbsp;Points</div>
26680
+
26681
+ <div id="fit-outline-container">
26682
+ <div id="fit-outline-inner-left">
26683
+ <div class="fit-outline-line-text fit-outline-line-p-waist-text">Pant Waist</div>
26684
+ <div class="fit-outline-line-text fit-outline-line-thigh-text">Thigh</div>
26685
+ </div>
26686
+
26687
+ <div id="fit-outline-inner">
26688
+ <div class="fit-outline-line fit-outline-line-chest"></div>
26689
+ <div class="fit-outline-line fit-outline-line-n-waist"></div>
26690
+ <div class="fit-outline-line fit-outline-line-p-waist"></div>
26691
+ <div class="fit-outline-line fit-outline-line-h-hip"></div>
26692
+ <div class="fit-outline-line fit-outline-line-l-hip"></div>
26693
+ <div class="fit-outline-line fit-outline-line-thigh-l"></div>
26694
+ <div class="fit-outline-line fit-outline-line-thigh-r"></div>
26695
+
26696
+ <img id="tfr-fit-outline-img" src="${imageBaseUrl}fit-outline.png" />
26697
+ </div>
26698
+
26699
+ <div id="fit-outline-inner-right">
26700
+ <div id="fit-subtitle" class="mobile-hidden">Measurement&nbsp;Points</div>
26701
+
26702
+ <div class="fit-outline-line-text fit-outline-line-chest-text">Chest/Bust</div>
26703
+ <div class="fit-outline-line-text fit-outline-line-n-waist-text">Natural Waist</div>
26704
+ <div class="fit-outline-line-text fit-outline-line-h-hip-text">High Hip</div>
26705
+ <div class="fit-outline-line-text fit-outline-line-l-hip-text">Low Hip</div>
26706
+ </div>
26707
+ </div>
26708
+ </div>
26709
+
26710
+ <div id="cta-section">
26711
+ <div id="cta-link">Sign Up or Login</div>
26712
+
26713
+ <div class="powered-by">
26714
+ <div>Powered by</div>
26715
+ <div class="tfr-powered-by-logo">${tfrDoor}</div>
26716
+ <div class="tfr-powered-by-text-bold">The Fitting Room</div>
26717
+ </div>
26718
+ </div>
26719
+ `;
26720
+ };
26721
+ return {
26722
+ Hook,
26723
+ Unhook,
26724
+ Body,
26725
+ useFullModalContent: false,
26585
26726
  };
26586
26727
  };
26587
26728
 
@@ -26622,6 +26763,7 @@ const ForgotPasswordModal = (props) => {
26622
26763
  Hook,
26623
26764
  Unhook,
26624
26765
  Body,
26766
+ useFullModalContent: true,
26625
26767
  };
26626
26768
  };
26627
26769
 
@@ -26657,6 +26799,7 @@ const LoadingAvatarModal = (props) => {
26657
26799
  Hook,
26658
26800
  Unhook,
26659
26801
  Body,
26802
+ useFullModalContent: true,
26660
26803
  };
26661
26804
  };
26662
26805
 
@@ -26690,40 +26833,29 @@ const LoggedOutModal = (props) => {
26690
26833
  Hook,
26691
26834
  Unhook,
26692
26835
  Body,
26836
+ useFullModalContent: true,
26693
26837
  };
26694
26838
  };
26695
26839
 
26696
26840
  const InitModalManager = (elementID) => {
26697
- const modal = document.getElementById(elementID);
26841
+ const modalRoot = document.getElementById(elementID);
26698
26842
  const body = document.querySelector('body');
26699
- if (!modal) {
26843
+ if (!modalRoot) {
26700
26844
  throw new Error(`element with id ${elementID} not found`);
26701
26845
  }
26702
26846
  let previousContent;
26703
- const renderBody = (modalBody) => {
26847
+ const renderBody = (modalBody, useFullModalContent) => {
26848
+ console.log({ useFullModalContent });
26704
26849
  return `
26705
26850
  <div class="tfr-modal" id="tfr-modal-background">
26706
26851
  <div class="tfr-modal-content-container tfr-p-20">
26707
26852
  <div class="tfr-close-container">
26708
- <span id="tfr-close-container" class="tfr-close tfr-cursor">&times;</span>
26853
+ <span id="tfr-close-container" class="tfr-close tfr-cursor">&times;</span>
26709
26854
  </div>
26710
26855
 
26711
26856
  <div class="tfr-modal-content-flex">
26712
26857
  <div class="tfr-modal-content">
26713
- <div class="tfr-modal-title-logo-container">
26714
- <div tfr-element="true" class="trf-logo-title tfr-title-font tfr-light-24-300 tfr-c-black tfr-mr-10">${L.ModalTagline}</div>
26715
- <div tfr-element="true" class="tfr-logo-container">
26716
- <div class="tfr-mr-15">
26717
- <svg width="26" height="47" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
26718
- <path d="M0.911938 0L67.4819 17.09V106.49L0.911938 123.51V0Z" fill="#209DA7">
26719
- </path>
26720
- <path d="M52.8019 64.44C54.7791 64.44 56.3819 62.4387 56.3819 59.97C56.3819 57.5013 54.7791 55.5 52.8019 55.5C50.8248 55.5 49.2219 57.5013 49.2219 59.97C49.2219 62.4387 50.8248 64.44 52.8019 64.44Z" fill="white">
26721
- </path>
26722
- </svg>
26723
- </div>
26724
- <div tfr-element="true" class="tfr-title-font tfr-light-24-500 tfr-c-black tfr-mr-10">${L.TheFittingRoom}</div>
26725
- </div>
26726
- </div>
26858
+ ${renderModalContent(useFullModalContent)}
26727
26859
  ${modalBody}
26728
26860
  </div>
26729
26861
  </div>
@@ -26731,15 +26863,35 @@ const InitModalManager = (elementID) => {
26731
26863
  </div>
26732
26864
  `;
26733
26865
  };
26866
+ const renderModalContent = (useFullModalContent) => {
26867
+ if (!useFullModalContent)
26868
+ return '';
26869
+ return `
26870
+ <div class="tfr-modal-title-logo-container">
26871
+ <div tfr-element="true" class="trf-logo-title tfr-title-font tfr-light-24-300 tfr-c-black tfr-mr-10">${L.ModalTagline}</div>
26872
+ <div tfr-element="true" class="tfr-logo-container">
26873
+ <div class="tfr-mr-15">
26874
+ <svg width="26" height="47" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
26875
+ <path d="M0.911938 0L67.4819 17.09V106.49L0.911938 123.51V0Z" fill="#209DA7">
26876
+ </path>
26877
+ <path d="M52.8019 64.44C54.7791 64.44 56.3819 62.4387 56.3819 59.97C56.3819 57.5013 54.7791 55.5 52.8019 55.5C50.8248 55.5 49.2219 57.5013 49.2219 59.97C49.2219 62.4387 50.8248 64.44 52.8019 64.44Z" fill="white">
26878
+ </path>
26879
+ </svg>
26880
+ </div>
26881
+ <div tfr-element="true" class="tfr-title-font tfr-light-24-500 tfr-c-black tfr-mr-10">${L.TheFittingRoom}</div>
26882
+ </div>
26883
+ </div>
26884
+ `;
26885
+ };
26734
26886
  const Open = (content) => {
26735
26887
  body.style.overflow = 'hidden';
26736
26888
  if (previousContent) {
26737
26889
  previousContent.Unhook();
26738
26890
  }
26739
- modal.innerHTML = renderBody(content.Body());
26891
+ modalRoot.innerHTML = renderBody(content.Body(), content.useFullModalContent);
26740
26892
  hook();
26741
26893
  content.Hook();
26742
- modal.style.display = 'block';
26894
+ modalRoot.style.display = 'block';
26743
26895
  previousContent = content;
26744
26896
  };
26745
26897
  const Close = () => {
@@ -26748,7 +26900,7 @@ const InitModalManager = (elementID) => {
26748
26900
  previousContent.Unhook();
26749
26901
  unhook();
26750
26902
  }
26751
- modal.style.display = 'none';
26903
+ modalRoot.style.display = 'none';
26752
26904
  };
26753
26905
  const EscClose = (e) => {
26754
26906
  if (e.key === 'Escape') {
@@ -26756,20 +26908,20 @@ const InitModalManager = (elementID) => {
26756
26908
  }
26757
26909
  };
26758
26910
  const ContainerClose = (e) => {
26759
- const background = modal.querySelector('#tfr-modal-background');
26911
+ const background = modalRoot.querySelector('#tfr-modal-background');
26760
26912
  if (e.target === background) {
26761
26913
  console.debug('container close');
26762
26914
  Close();
26763
26915
  }
26764
26916
  };
26765
26917
  const hook = () => {
26766
- modal.querySelector('#tfr-close-container').addEventListener('click', Close);
26918
+ modalRoot.querySelector('#tfr-close-container').addEventListener('click', Close);
26767
26919
  document.addEventListener('keydown', EscClose);
26768
26920
  document.addEventListener('click', ContainerClose);
26769
26921
  };
26770
26922
  const unhook = () => {
26771
26923
  var _a;
26772
- const closeLink = modal.querySelector('#tfr-close-container');
26924
+ const closeLink = modalRoot.querySelector('#tfr-close-container');
26773
26925
  if (closeLink) {
26774
26926
  closeLink.removeEventListener('click', Close);
26775
26927
  }
@@ -26803,6 +26955,7 @@ const NoAvatarModal = () => {
26803
26955
  Body,
26804
26956
  Hook,
26805
26957
  Unhook,
26958
+ useFullModalContent: true,
26806
26959
  };
26807
26960
  };
26808
26961
 
@@ -26877,6 +27030,7 @@ const ScanCodeModal = (props) => {
26877
27030
  Hook: onHook,
26878
27031
  Unhook: onUnhook,
26879
27032
  Body: body,
27033
+ useFullModalContent: true,
26880
27034
  };
26881
27035
  };
26882
27036
 
@@ -26968,6 +27122,7 @@ const SignInModal = (props) => {
26968
27122
  Hook: onHook,
26969
27123
  Unhook: onUnhook,
26970
27124
  Body: body,
27125
+ useFullModalContent: true,
26971
27126
  };
26972
27127
  };
26973
27128
 
@@ -27008,6 +27163,7 @@ const SizeErrorModal = (props) => {
27008
27163
  Hook,
27009
27164
  Unhook,
27010
27165
  Body,
27166
+ useFullModalContent: true,
27011
27167
  };
27012
27168
  };
27013
27169
 
@@ -27060,6 +27216,7 @@ const TryOnModal = (props) => {
27060
27216
  Hook,
27061
27217
  Unhook,
27062
27218
  Body,
27219
+ useFullModalContent: true,
27063
27220
  };
27064
27221
  };
27065
27222
 
@@ -27128,40 +27285,28 @@ class TfrModal {
27128
27285
  onNavBack: () => this.navBack(),
27129
27286
  }));
27130
27287
  }
27288
+ toFitInfo() {
27289
+ this.manager.open(FitModal({
27290
+ onSignInNav: () => this.toScan(),
27291
+ onClose: () => this.close(),
27292
+ }));
27293
+ }
27131
27294
  navBack() {
27132
27295
  window.history.back();
27133
27296
  }
27134
27297
  }
27135
27298
 
27136
- const tfrDoor = `
27137
- <svg class="tfr-door-icon" width="68" height="124" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
27138
- <path d="M0.911938 0L67.4819 17.09V106.49L0.911938 123.51V0Z" fill="currentColor">
27139
- </path>
27140
- <path d="M52.8019 64.44C54.7791 64.44 56.3819 62.4387 56.3819 59.97C56.3819 57.5013 54.7791 55.5 52.8019 55.5C50.8248 55.5 49.2219 57.5013 49.2219 59.97C49.2219 62.4387 50.8248 64.44 52.8019 64.44Z" fill="white">
27141
- </path>
27142
- </svg>`;
27143
- const userIcon = `<svg class="tfr-user-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
27144
- <g clip-path="url(#clip0_82_11365)">
27145
- <path fill-rule="evenodd" clip-rule="evenodd"
27146
- d="M4.3125 4.78125C4.3125 3.02084 5.73959 1.59375 7.5 1.59375C9.26041 1.59375 10.6875 3.02084 10.6875 4.78125C10.6875 6.54166 9.26041 7.96875 7.5 7.96875C5.73959 7.96875 4.3125 6.54166 4.3125 4.78125ZM9.625 4.78125C9.625 3.60764 8.6736 2.65625 7.5 2.65625C6.32639 2.65625 5.375 3.60764 5.375 4.78125C5.375 5.95485 6.32639 6.90625 7.5 6.90625C8.6736 6.90625 9.625 5.95485 9.625 4.78125Z"
27147
- fill="currentColor" fill-opacity="0.7" />
27148
- <path fill-rule="evenodd" clip-rule="evenodd"
27149
- d="M2.1875 13.1634C2.1875 10.5693 4.58181 8.5 7.5 8.5C10.4182 8.5 12.8125 10.5693 12.8125 13.1634C12.8125 16.1539 2.1875 16.1539 2.1875 13.1634ZM11.75 13.1634C11.75 11.1933 9.86303 9.5625 7.5 9.5625C5.13697 9.5625 3.25 11.1933 3.25 13.1634C3.25 13.7564 4.45689 14.126 5.96113 14.2721L6.31312 14.3019C7.08543 14.3577 7.91457 14.3577 8.68688 14.3019L9.03887 14.2721C10.5431 14.126 11.75 13.7564 11.75 13.1634Z"
27150
- fill="currentColor" fill-opacity="0.7" />
27151
- </g>
27152
- <defs>
27153
- <clipPath id="clip0_82_11365">
27154
- <rect width="16" height="16" fill="white" />
27155
- </clipPath>
27156
- </defs>
27157
- </svg>`;
27158
-
27159
27299
  class SizeRecComponent {
27160
- constructor(sizeRecMainDivId, onSignInClick, onSignOutClick) {
27300
+ constructor(sizeRecMainDivId, onSignInClick, onSignOutClick, onFitInfoClick) {
27161
27301
  this.onSignInClick = onSignInClick;
27162
27302
  this.onSignOutClick = onSignOutClick;
27303
+ this.onFitInfoClick = onFitInfoClick;
27163
27304
  this._sku = '';
27164
27305
  this.isLoggedIn = false;
27306
+ this.tfrLoggedInElements = [];
27307
+ this.tfrLoggedOutElements = [];
27308
+ this.tfrToggleOpenElements = [];
27309
+ this.tfrToggleClosedElements = [];
27165
27310
  this.isCollapsed = false;
27166
27311
  this.redraw = null;
27167
27312
  this.init(sizeRecMainDivId);
@@ -27175,24 +27320,27 @@ class SizeRecComponent {
27175
27320
  setIsLoggedIn(isLoggedIn) {
27176
27321
  this.isLoggedIn = isLoggedIn;
27177
27322
  this.tfrSizeRecSelectContainer.style.display = 'flex';
27323
+ this.tfrSizeRecSelect.style.display = 'flex';
27324
+ this.tfrSizeHowItFits.style.display = 'block';
27178
27325
  if (isLoggedIn) {
27326
+ this.tfrLoggedInElements.forEach((element) => (element.style.display = 'block'));
27327
+ this.tfrLoggedOutElements.forEach((element) => (element.style.display = 'none'));
27179
27328
  this.tfrSizeRecActionLogin.style.display = 'none';
27180
27329
  this.tfrSizeRecActionLogout.style.display = 'block';
27181
27330
  this.tfrSizeRecTitle.style.display = 'flex';
27182
- this.tfrSizeRecSubtitle.style.display = 'block';
27183
27331
  this.isCollapsed = false;
27184
27332
  this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
27185
27333
  this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
27186
- this.tfrSizeHowItFits.style.display = 'block';
27187
27334
  }
27188
27335
  else {
27336
+ this.tfrLoggedInElements.forEach((element) => (element.style.display = 'none'));
27337
+ this.tfrLoggedOutElements.forEach((element) => (element.style.display = 'block'));
27189
27338
  this.tfrSizeRecActionLogin.style.display = 'block';
27190
27339
  this.tfrSizeRecActionLogout.style.display = 'none';
27191
27340
  this.tfrSizeRecTitle.style.display = 'flex';
27192
- this.tfrSizeRecSubtitle.style.display = 'block';
27193
27341
  this.tfrSizeRecommendationError.style.display = 'none';
27194
27342
  this.tfrSizeRecommendationError.innerHTML = '';
27195
- this.tfrSizeHowItFits.style.display = 'none';
27343
+ this.renderSizeRecSelectLoggedOut();
27196
27344
  }
27197
27345
  }
27198
27346
  setLoading(isLoading) {
@@ -27208,19 +27356,15 @@ class SizeRecComponent {
27208
27356
  setGarmentLocations(locations) {
27209
27357
  if (!locations || !locations.length) {
27210
27358
  this.tfrSizeRecTitle.style.display = 'none';
27211
- this.tfrSizeRecSubtitle.style.display = 'none';
27212
27359
  return;
27213
27360
  }
27214
27361
  this.renderGarmentLocations(locations);
27215
- this.tfrSizeRecSelect.style.display = 'none';
27216
27362
  }
27217
27363
  setRecommendedSize({ recommended, sizes }) {
27218
27364
  this.renderSizeRec(recommended, sizes);
27219
- this.tfrSizeRecSelect.style.display = 'flex';
27220
27365
  }
27221
27366
  setError() {
27222
27367
  this.tfrSizeRecTitle.style.display = 'none';
27223
- this.tfrSizeRecSubtitle.style.display = 'none';
27224
27368
  if (!this.isLoggedIn)
27225
27369
  return;
27226
27370
  this.tfrSizeRecommendationError.style.display = 'block';
@@ -27237,7 +27381,7 @@ class SizeRecComponent {
27237
27381
  setElements() {
27238
27382
  this.tfrSizeHowItFits = document.getElementById('tfr-size-how-it-fits');
27239
27383
  this.tfrSizeRecTitle = document.getElementById('tfr-size-rec-title');
27240
- this.tfrSizeRecSubtitle = document.getElementById('tfr-size-rec-subtitle');
27384
+ this.tfrInfoIcon = document.getElementById('tfr-info-icon');
27241
27385
  this.tfrSizeRecActionLogin = document.getElementById('tfr-size-rec-action-login');
27242
27386
  this.tfrSizeRecActionLogout = document.getElementById('tfr-size-rec-action-logout');
27243
27387
  this.tfrSizeRecTable = document.getElementById('tfr-size-rec-table');
@@ -27248,16 +27392,21 @@ class SizeRecComponent {
27248
27392
  this.tfrSizeRecTitleToggle = document.getElementById('tfr-size-rec-title-toggle');
27249
27393
  this.tfrSizeRecSelectContainer = document.getElementById('tfr-size-rec-select-container');
27250
27394
  this.tfrSizeRecommendationsContainer = document.getElementById('tfr-size-recommendations-container');
27395
+ this.tfrLoggedInElements = document.querySelectorAll('.tfr-logged-in');
27396
+ this.tfrLoggedOutElements = document.querySelectorAll('.tfr-logged-out');
27397
+ this.tfrToggleOpenElements = document.querySelectorAll('.tfr-toggle-open');
27398
+ this.tfrToggleClosedElements = document.querySelectorAll('.tfr-toggle-closed');
27251
27399
  }
27252
27400
  bindEvents() {
27253
27401
  this.tfrSizeRecActionLogin.addEventListener('click', this.onSignInClick);
27254
27402
  this.tfrSizeRecActionLogout.addEventListener('click', this.onSignOutClick);
27255
27403
  this.tfrSizeRecSelect.addEventListener('click', this.onSizeRecSelectClick.bind(this));
27256
27404
  this.tfrSizeRecTitleToggle.addEventListener('click', this.toggletSizeRecSelectContainer.bind(this));
27405
+ this.tfrInfoIcon.addEventListener('click', this.onFitInfoClick);
27257
27406
  }
27258
27407
  onSizeRecSelectClick(e) {
27259
27408
  const target = e.target;
27260
- if (!target.classList.contains('tfr-size-rec-select-button'))
27409
+ if (!target.classList.contains('tfr-size-rec-select-button') || target.classList.contains('tfr-disabled'))
27261
27410
  return;
27262
27411
  e.preventDefault();
27263
27412
  const selectedIndex = Number(target.getAttribute('data-index'));
@@ -27289,6 +27438,14 @@ class SizeRecComponent {
27289
27438
  .join('');
27290
27439
  this.tfrSizeRecSelect.innerHTML = html;
27291
27440
  }
27441
+ renderSizeRecSelectLoggedOut() {
27442
+ const html = [
27443
+ `<div class="tfr-size-rec-select-button tfr-disabled">M</div>`,
27444
+ `<div class="tfr-size-rec-select-button tfr-disabled active">L</div>`,
27445
+ `<div class="tfr-size-rec-select-button tfr-disabled">XL</div>`,
27446
+ ].join('');
27447
+ this.tfrSizeRecSelect.innerHTML = html;
27448
+ }
27292
27449
  renderSizeRecTableRow(location, fit, isPerfect = false) {
27293
27450
  return `<div class="tfr-size-rec-table-row">
27294
27451
  <div class="tfr-size-rec-table-cell-left">${location}</div>
@@ -27297,26 +27454,36 @@ class SizeRecComponent {
27297
27454
  </div>
27298
27455
  </div>`;
27299
27456
  }
27300
- renderLoginCta() {
27301
- return `<div class="tfr-size-rec-login-cta">${userIcon} Sign up to view</div>`;
27302
- }
27303
27457
  renderGarmentLocations(locations) {
27304
- const html = locations.map((location) => this.renderSizeRecTableRow(location, this.renderLoginCta())).join('');
27458
+ const innerHtml = locations.map((location) => this.renderSizeRecTableRow(location, this.randomFit(), true)).join('');
27459
+ const html = `<div id="tfr-logged-out-overlay-container">
27460
+ <div id="tfr-logged-out-overlay">
27461
+ Login to reveal how this item will fit specifically at each area of your body in different sizes
27462
+ </div>
27463
+ <div>
27464
+ ${innerHtml}
27465
+ </div>
27466
+ </div>`;
27305
27467
  this.tfrSizeRecTable.innerHTML = html;
27306
- this.tfrSizeRecSize.innerHTML = this.renderLoginCta();
27468
+ }
27469
+ randomFit() {
27470
+ const fits = ['Perfect', 'Slightly tight', 'Fitted', 'Less fitted', 'Slightly loose'];
27471
+ return fits[Math.floor(Math.random() * fits.length)];
27307
27472
  }
27308
27473
  toggletSizeRecSelectContainer() {
27309
27474
  if (this.isCollapsed) {
27310
27475
  this.isCollapsed = false;
27311
27476
  this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
27312
27477
  this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
27313
- this.tfrSizeRecSelectContainer.style.display = 'flex';
27478
+ this.tfrToggleOpenElements.forEach((element) => (element.style.display = 'block'));
27479
+ this.tfrToggleClosedElements.forEach((element) => (element.style.display = 'none'));
27314
27480
  }
27315
27481
  else {
27316
27482
  this.isCollapsed = true;
27317
27483
  this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-up');
27318
27484
  this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-down');
27319
- this.tfrSizeRecSelectContainer.style.display = 'none';
27485
+ this.tfrToggleOpenElements.forEach((element) => (element.style.display = 'none'));
27486
+ this.tfrToggleClosedElements.forEach((element) => (element.style.display = 'block'));
27320
27487
  }
27321
27488
  }
27322
27489
  render(sizeRecMainDiv) {
@@ -27332,34 +27499,63 @@ class SizeRecComponent {
27332
27499
  <div id="tfr-size-recommendations-container">
27333
27500
  <div id="tfr-size-rec-title-toggle" class="tfr-chevron-up">v</div>
27334
27501
 
27335
- <div id="tfr-size-rec-title">
27336
- Recommended Size:
27337
- <div id="tfr-size-rec-size">
27338
- <div class="tfr-size-rec-login-cta">
27339
- ${userIcon} Sign up to view
27502
+ <div class="tfr-logged-out">
27503
+ <div class="tfr-flex tfr-gap-2 tfr-mb-2">
27504
+ <div>Uncertain of your size?</div>
27505
+
27506
+ <div class="tfr-toggle-closed">
27507
+ <div class="tfr-flex tfr-items-center">
27508
+ <div>Try</div>
27509
+ <div class="tfr-powered-by-logo">${tfrDoor}</div>
27510
+ <div class="tfr-powered-by-text-bold">The Fitting Room</div>
27511
+ </div>
27512
+ </div>
27513
+
27514
+ <div class="tfr-toggle-open">
27515
+ <div class="tfr-flex tfr-items-center">
27516
+ ${userIcon} Login to view
27517
+ </div>
27340
27518
  </div>
27341
27519
  </div>
27342
27520
  </div>
27343
27521
 
27344
- <div id="tfr-size-rec-select-container">
27345
- <div id="tfr-size-how-it-fits">Select size to see how it fits:</div>
27522
+ <div class="tfr-logged-in">
27523
+ <div id="tfr-size-rec-title">
27524
+ Recommended Size:
27525
+ <div id="tfr-size-rec-size">
27526
+ <div class="tfr-size-rec-login-cta">
27527
+ ${userIcon} Sign up to view
27528
+ </div>
27529
+ </div>
27530
+ </div>
27531
+ </div>
27532
+
27533
+ <div class="tfr-toggle-open" style="width: 100%">
27534
+ <div id="tfr-size-rec-select-container">
27535
+ <div id="tfr-size-how-it-fits">Select size to see how it fits:</div>
27536
+
27537
+ <div id="tfr-size-rec-select"></div>
27346
27538
 
27347
- <div id="tfr-size-rec-select"></div>
27348
-
27349
- <div id="tfr-size-rec-subtitle">How it fits</div>
27350
-
27351
- <div id="tfr-size-rec-table"></div>
27539
+ <div id="tfr-size-rec-subtitle">
27540
+ How it fits
27541
+ <span id="tfr-info-icon">${infoIcon}</span>
27542
+ </div>
27543
+
27544
+ <div id="tfr-size-rec-table"></div>
27545
+ </div>
27352
27546
  </div>
27353
-
27547
+
27354
27548
  <div id="tfr-size-rec-action">
27355
27549
  <div id="tfr-size-rec-action-login">Sign up or login</div>
27356
27550
  <div id="tfr-size-rec-action-logout">Log out</div>
27357
27551
  </div>
27358
27552
 
27359
- <div class="tfr-powered-by">
27360
- <div>Powered by</div>
27361
- <div class="tfr-powered-by-logo">${tfrDoor}</div>
27362
- <div class="tfr-powered-by-text-bold">The Fitting Room</div>
27553
+ <div class="tfr-toggle-open">
27554
+ <div class="tfr-powered-by">
27555
+ <div>Powered by</div>
27556
+ <div class="tfr-powered-by-logo">${tfrDoor}</div>
27557
+ <div class="tfr-powered-by-text-bold">The Fitting Room</div>
27558
+ </div>
27363
27559
  </div>
27364
27560
  </div>
27365
27561
  </div>
@@ -27369,13 +27565,14 @@ class SizeRecComponent {
27369
27565
  }
27370
27566
 
27371
27567
  class TfrSizeRec {
27372
- constructor(sizeRecMainDivId, cssVariables, tfrShop, onSignInClick, onSignOutClick) {
27568
+ constructor(sizeRecMainDivId, cssVariables, tfrShop, onSignInClick, onSignOutClick, onFitInfoClick) {
27373
27569
  this.tfrShop = tfrShop;
27374
27570
  this.onSignInClick = onSignInClick;
27375
27571
  this.onSignOutClick = onSignOutClick;
27572
+ this.onFitInfoClick = onFitInfoClick;
27376
27573
  this.perfectFits = [index.Fit.PERFECT_FIT, index.Fit.SLIGHTLY_LOOSE, index.Fit.SLIGHTLY_TIGHT];
27377
27574
  this.setCssVariables(cssVariables);
27378
- this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick);
27575
+ this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick, this.onFitInfoClick);
27379
27576
  }
27380
27577
  get sku() {
27381
27578
  return this.sizeRecComponent.sku;
@@ -27565,7 +27762,7 @@ class FittingRoom {
27565
27762
  console.log('tfr-env', env);
27566
27763
  this.tfrModal = new TfrModal(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
27567
27764
  this.tfrShop = initShop(Number(this.shopId), env);
27568
- this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this));
27765
+ this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this), this.onFitInfoClick.bind(this));
27569
27766
  }
27570
27767
  get shop() {
27571
27768
  return this.tfrShop;
@@ -27661,6 +27858,9 @@ class FittingRoom {
27661
27858
  onSignInClick() {
27662
27859
  this.tfrModal.toScan();
27663
27860
  }
27861
+ onFitInfoClick() {
27862
+ this.tfrModal.toFitInfo();
27863
+ }
27664
27864
  onUserProfileChange(userProfile) {
27665
27865
  var _a, _b, _c, _d;
27666
27866
  switch (userProfile.avatar_status) {