@thefittingroom/shop-ui 1.5.9 → 2.0.1

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 +12 -5
  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 +296 -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.1 (2024-10-23T16:46:33.229Z)
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-outline-inner,#fit-outline-inner-left,#fit-outline-inner-right{height:586px}#fit-outline-inner{flex-shrink:0;overflow:hidden}#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}}";
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{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}";
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{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}}";
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):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}";
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</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&nbsp;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&nbsp;Waist</div>
26704
+ <div class="fit-outline-line-text fit-outline-line-h-hip-text">High&nbsp;Hip</div>
26705
+ <div class="fit-outline-line-text fit-outline-line-l-hip-text">Low&nbsp;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,29 @@ 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.tfrSizeRecSelect.style.opacity = '1';
27327
+ this.tfrLoggedInElements.forEach((element) => (element.style.display = 'block'));
27328
+ this.tfrLoggedOutElements.forEach((element) => (element.style.display = 'none'));
27179
27329
  this.tfrSizeRecActionLogin.style.display = 'none';
27180
27330
  this.tfrSizeRecActionLogout.style.display = 'block';
27181
27331
  this.tfrSizeRecTitle.style.display = 'flex';
27182
- this.tfrSizeRecSubtitle.style.display = 'block';
27183
27332
  this.isCollapsed = false;
27184
27333
  this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
27185
27334
  this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
27186
- this.tfrSizeHowItFits.style.display = 'block';
27187
27335
  }
27188
27336
  else {
27337
+ this.tfrSizeRecSelect.style.opacity = '0.4';
27338
+ this.tfrLoggedInElements.forEach((element) => (element.style.display = 'none'));
27339
+ this.tfrLoggedOutElements.forEach((element) => (element.style.display = 'block'));
27189
27340
  this.tfrSizeRecActionLogin.style.display = 'block';
27190
27341
  this.tfrSizeRecActionLogout.style.display = 'none';
27191
27342
  this.tfrSizeRecTitle.style.display = 'flex';
27192
- this.tfrSizeRecSubtitle.style.display = 'block';
27193
27343
  this.tfrSizeRecommendationError.style.display = 'none';
27194
27344
  this.tfrSizeRecommendationError.innerHTML = '';
27195
- this.tfrSizeHowItFits.style.display = 'none';
27345
+ this.renderSizeRecSelectLoggedOut();
27196
27346
  }
27197
27347
  }
27198
27348
  setLoading(isLoading) {
@@ -27208,19 +27358,15 @@ class SizeRecComponent {
27208
27358
  setGarmentLocations(locations) {
27209
27359
  if (!locations || !locations.length) {
27210
27360
  this.tfrSizeRecTitle.style.display = 'none';
27211
- this.tfrSizeRecSubtitle.style.display = 'none';
27212
27361
  return;
27213
27362
  }
27214
27363
  this.renderGarmentLocations(locations);
27215
- this.tfrSizeRecSelect.style.display = 'none';
27216
27364
  }
27217
27365
  setRecommendedSize({ recommended, sizes }) {
27218
27366
  this.renderSizeRec(recommended, sizes);
27219
- this.tfrSizeRecSelect.style.display = 'flex';
27220
27367
  }
27221
27368
  setError() {
27222
27369
  this.tfrSizeRecTitle.style.display = 'none';
27223
- this.tfrSizeRecSubtitle.style.display = 'none';
27224
27370
  if (!this.isLoggedIn)
27225
27371
  return;
27226
27372
  this.tfrSizeRecommendationError.style.display = 'block';
@@ -27237,7 +27383,8 @@ class SizeRecComponent {
27237
27383
  setElements() {
27238
27384
  this.tfrSizeHowItFits = document.getElementById('tfr-size-how-it-fits');
27239
27385
  this.tfrSizeRecTitle = document.getElementById('tfr-size-rec-title');
27240
- this.tfrSizeRecSubtitle = document.getElementById('tfr-size-rec-subtitle');
27386
+ this.tfrInfoIcon = document.getElementById('tfr-info-icon');
27387
+ this.tfrLoginToView = document.getElementById('tfr-login-to-view');
27241
27388
  this.tfrSizeRecActionLogin = document.getElementById('tfr-size-rec-action-login');
27242
27389
  this.tfrSizeRecActionLogout = document.getElementById('tfr-size-rec-action-logout');
27243
27390
  this.tfrSizeRecTable = document.getElementById('tfr-size-rec-table');
@@ -27248,16 +27395,22 @@ class SizeRecComponent {
27248
27395
  this.tfrSizeRecTitleToggle = document.getElementById('tfr-size-rec-title-toggle');
27249
27396
  this.tfrSizeRecSelectContainer = document.getElementById('tfr-size-rec-select-container');
27250
27397
  this.tfrSizeRecommendationsContainer = document.getElementById('tfr-size-recommendations-container');
27398
+ this.tfrLoggedInElements = document.querySelectorAll('.tfr-logged-in');
27399
+ this.tfrLoggedOutElements = document.querySelectorAll('.tfr-logged-out');
27400
+ this.tfrToggleOpenElements = document.querySelectorAll('.tfr-toggle-open');
27401
+ this.tfrToggleClosedElements = document.querySelectorAll('.tfr-toggle-closed');
27251
27402
  }
27252
27403
  bindEvents() {
27253
27404
  this.tfrSizeRecActionLogin.addEventListener('click', this.onSignInClick);
27254
27405
  this.tfrSizeRecActionLogout.addEventListener('click', this.onSignOutClick);
27255
27406
  this.tfrSizeRecSelect.addEventListener('click', this.onSizeRecSelectClick.bind(this));
27256
27407
  this.tfrSizeRecTitleToggle.addEventListener('click', this.toggletSizeRecSelectContainer.bind(this));
27408
+ this.tfrInfoIcon.addEventListener('click', this.onFitInfoClick);
27409
+ this.tfrLoginToView.addEventListener('click', this.onSignInClick);
27257
27410
  }
27258
27411
  onSizeRecSelectClick(e) {
27259
27412
  const target = e.target;
27260
- if (!target.classList.contains('tfr-size-rec-select-button'))
27413
+ if (!target.classList.contains('tfr-size-rec-select-button') || target.classList.contains('tfr-disabled'))
27261
27414
  return;
27262
27415
  e.preventDefault();
27263
27416
  const selectedIndex = Number(target.getAttribute('data-index'));
@@ -27289,6 +27442,14 @@ class SizeRecComponent {
27289
27442
  .join('');
27290
27443
  this.tfrSizeRecSelect.innerHTML = html;
27291
27444
  }
27445
+ renderSizeRecSelectLoggedOut() {
27446
+ const html = [
27447
+ `<div class="tfr-size-rec-select-button tfr-disabled">M</div>`,
27448
+ `<div class="tfr-size-rec-select-button tfr-disabled active">L</div>`,
27449
+ `<div class="tfr-size-rec-select-button tfr-disabled">XL</div>`,
27450
+ ].join('');
27451
+ this.tfrSizeRecSelect.innerHTML = html;
27452
+ }
27292
27453
  renderSizeRecTableRow(location, fit, isPerfect = false) {
27293
27454
  return `<div class="tfr-size-rec-table-row">
27294
27455
  <div class="tfr-size-rec-table-cell-left">${location}</div>
@@ -27297,26 +27458,38 @@ class SizeRecComponent {
27297
27458
  </div>
27298
27459
  </div>`;
27299
27460
  }
27300
- renderLoginCta() {
27301
- return `<div class="tfr-size-rec-login-cta">${userIcon} Sign up to view</div>`;
27302
- }
27303
27461
  renderGarmentLocations(locations) {
27304
- const html = locations.map((location) => this.renderSizeRecTableRow(location, this.renderLoginCta())).join('');
27462
+ const innerHtml = locations
27463
+ .map((location, index) => this.renderSizeRecTableRow(location, this.randomFit(index), true))
27464
+ .join('');
27465
+ const html = `<div id="tfr-logged-out-overlay-container">
27466
+ <div id="tfr-logged-out-overlay">
27467
+ Login to reveal how this item will fit specifically at each area of your body in different sizes
27468
+ </div>
27469
+ <div>
27470
+ ${innerHtml}
27471
+ </div>
27472
+ </div>`;
27305
27473
  this.tfrSizeRecTable.innerHTML = html;
27306
- this.tfrSizeRecSize.innerHTML = this.renderLoginCta();
27474
+ }
27475
+ randomFit(index) {
27476
+ const choices = ['Slightly Tight', 'Perfect Fit', 'Perfect Fit', 'Slightly Loose', 'Perfect Fit'];
27477
+ return choices[index % choices.length];
27307
27478
  }
27308
27479
  toggletSizeRecSelectContainer() {
27309
27480
  if (this.isCollapsed) {
27310
27481
  this.isCollapsed = false;
27311
27482
  this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
27312
27483
  this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
27313
- this.tfrSizeRecSelectContainer.style.display = 'flex';
27484
+ this.tfrToggleOpenElements.forEach((element) => (element.style.display = 'block'));
27485
+ this.tfrToggleClosedElements.forEach((element) => (element.style.display = 'none'));
27314
27486
  }
27315
27487
  else {
27316
27488
  this.isCollapsed = true;
27317
27489
  this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-up');
27318
27490
  this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-down');
27319
- this.tfrSizeRecSelectContainer.style.display = 'none';
27491
+ this.tfrToggleOpenElements.forEach((element) => (element.style.display = 'none'));
27492
+ this.tfrToggleClosedElements.forEach((element) => (element.style.display = 'block'));
27320
27493
  }
27321
27494
  }
27322
27495
  render(sizeRecMainDiv) {
@@ -27332,34 +27505,63 @@ class SizeRecComponent {
27332
27505
  <div id="tfr-size-recommendations-container">
27333
27506
  <div id="tfr-size-rec-title-toggle" class="tfr-chevron-up">v</div>
27334
27507
 
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
27508
+ <div class="tfr-logged-out">
27509
+ <div class="tfr-flex tfr-gap tfr-mb-2">
27510
+ <div>Uncertain of your size?</div>
27511
+
27512
+ <div class="tfr-toggle-closed">
27513
+ <div class="tfr-flex tfr-items-center">
27514
+ <div>Try</div>
27515
+ <div class="tfr-powered-by-logo">${tfrDoor}</div>
27516
+ <div class="tfr-powered-by-text-bold">The Fitting Room</div>
27517
+ </div>
27518
+ </div>
27519
+
27520
+ <div class="tfr-toggle-open">
27521
+ <div id="tfr-login-to-view" class="tfr-flex tfr-items-center">
27522
+ ${userIcon} Login to view
27523
+ </div>
27524
+ </div>
27525
+ </div>
27526
+ </div>
27527
+
27528
+ <div class="tfr-logged-in">
27529
+ <div id="tfr-size-rec-title">
27530
+ Recommended Size:
27531
+ <div id="tfr-size-rec-size">
27532
+ <div class="tfr-size-rec-login-cta">
27533
+ ${userIcon} Sign up to view
27534
+ </div>
27340
27535
  </div>
27341
27536
  </div>
27342
27537
  </div>
27343
27538
 
27344
- <div id="tfr-size-rec-select-container">
27345
- <div id="tfr-size-how-it-fits">Select size to see how it fits:</div>
27539
+ <div class="tfr-toggle-open" style="width: 100%">
27540
+ <div id="tfr-size-rec-select-container">
27541
+ <div id="tfr-size-how-it-fits">Select size to see how it fits:</div>
27346
27542
 
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>
27543
+ <div id="tfr-size-rec-select"></div>
27544
+
27545
+ <div id="tfr-size-rec-subtitle">
27546
+ How it fits
27547
+ <span id="tfr-info-icon">${infoIcon}</span>
27548
+ </div>
27549
+
27550
+ <div id="tfr-size-rec-table"></div>
27551
+ </div>
27352
27552
  </div>
27353
-
27553
+
27354
27554
  <div id="tfr-size-rec-action">
27355
27555
  <div id="tfr-size-rec-action-login">Sign up or login</div>
27356
27556
  <div id="tfr-size-rec-action-logout">Log out</div>
27357
27557
  </div>
27358
27558
 
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>
27559
+ <div class="tfr-toggle-open">
27560
+ <div class="tfr-powered-by">
27561
+ <div>Powered by</div>
27562
+ <div class="tfr-powered-by-logo">${tfrDoor}</div>
27563
+ <div class="tfr-powered-by-text-bold">The Fitting Room</div>
27564
+ </div>
27363
27565
  </div>
27364
27566
  </div>
27365
27567
  </div>
@@ -27369,13 +27571,14 @@ class SizeRecComponent {
27369
27571
  }
27370
27572
 
27371
27573
  class TfrSizeRec {
27372
- constructor(sizeRecMainDivId, cssVariables, tfrShop, onSignInClick, onSignOutClick) {
27574
+ constructor(sizeRecMainDivId, cssVariables, tfrShop, onSignInClick, onSignOutClick, onFitInfoClick) {
27373
27575
  this.tfrShop = tfrShop;
27374
27576
  this.onSignInClick = onSignInClick;
27375
27577
  this.onSignOutClick = onSignOutClick;
27578
+ this.onFitInfoClick = onFitInfoClick;
27376
27579
  this.perfectFits = [index.Fit.PERFECT_FIT, index.Fit.SLIGHTLY_LOOSE, index.Fit.SLIGHTLY_TIGHT];
27377
27580
  this.setCssVariables(cssVariables);
27378
- this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick);
27581
+ this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick, this.onFitInfoClick);
27379
27582
  }
27380
27583
  get sku() {
27381
27584
  return this.sizeRecComponent.sku;
@@ -27565,7 +27768,7 @@ class FittingRoom {
27565
27768
  console.log('tfr-env', env);
27566
27769
  this.tfrModal = new TfrModal(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
27567
27770
  this.tfrShop = initShop(Number(this.shopId), env);
27568
- this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this));
27771
+ this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this), this.onFitInfoClick.bind(this));
27569
27772
  }
27570
27773
  get shop() {
27571
27774
  return this.tfrShop;
@@ -27661,6 +27864,9 @@ class FittingRoom {
27661
27864
  onSignInClick() {
27662
27865
  this.tfrModal.toScan();
27663
27866
  }
27867
+ onFitInfoClick() {
27868
+ this.tfrModal.toFitInfo();
27869
+ }
27664
27870
  onUserProfileChange(userProfile) {
27665
27871
  var _a, _b, _c, _d;
27666
27872
  switch (userProfile.avatar_status) {