@thefittingroom/shop-ui 4.3.0 → 4.3.2
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.
- package/dist/index.js +51 -50
- package/dist/index.umd.cjs +51 -50
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4,12 +4,12 @@ const generalCSS = ".tfr-home-button-container {\n display: flex;\n flex-wrap:
|
|
|
4
4
|
const inputCSS = "input {\n border: none;\n width: 100%;\n box-shadow: none !important;\n}\n\ninput:focus,\ntextarea:focus,\nselect:focus {\n outline: none;\n border: none;\n}\n\n.tfr-fieldset {\n border-color: rgba(0, 0, 0, 0.5);\n border-radius: 10px;\n border-width: 1px;\n margin-left: auto;\n margin-right: auto;\n padding: 5px 10px 10px 10px;\n text-align: left;\n width: 65%;\n}\n\n.tfr-fieldset-inline {\n border-color: rgba(0, 0, 0, 0.5);\n border-radius: 10px;\n border-width: 1px;\n margin-right: 10px;\n padding: 5px 10px 10px 10px;\n text-align: left;\n width: 250px;\n}\n\n.tfr-fieldset-err {\n border-color: red;\n}\n";
|
|
5
5
|
const loaderCSS = ".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n\n.lds-ellipsis div {\n position: absolute;\n top: 33px;\n width: 13px;\n height: 13px;\n border-radius: 50%;\n background: var(--tfr-brand-color);\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n display: block;\n}\n\n.lds-ellipsis div:nth-child(1) {\n left: 8px;\n animation: lds-ellipsis1 0.6s infinite;\n}\n\n.lds-ellipsis div:nth-child(2) {\n left: 8px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n\n.lds-ellipsis div:nth-child(3) {\n left: 32px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n\n.lds-ellipsis div:nth-child(4) {\n left: 56px;\n animation: lds-ellipsis3 0.6s infinite;\n}\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(24px, 0);\n }\n}\n";
|
|
6
6
|
const mediaCSS = "@media screen and (max-width: 702px) {\n .tfr-modal-title-logo-container {\n display: flex;\n flex-direction: column;\n }\n}\n\n@media screen and (min-width: 600px) {\n .tfr-modal-content-container {\n height: auto;\n border-radius: 10px;\n width: 100%;\n margin: auto;\n }\n}\n\n@media screen and (max-width: 599px) {\n #tfr-size-recommendations {\n width: calc(100vw - 30px) !important;\n }\n\n .tfr-mobile-small-text {\n font-size: 12px;\n }\n\n .tfr-mobile-hidden {\n display: none;\n }\n\n .tfr-modal-content {\n overflow: hidden;\n }\n\n .tfr-modal-content-container {\n min-height: 100vh;\n max-height: none;\n min-width: 100vw;\n max-width: 100vw;\n }\n\n .trf-logo-title {\n margin-bottom: 10px;\n }\n\n .tfr-modal-content-flex {\n overflow: auto;\n }\n}\n\n@media screen and (max-width: 500px) {\n .tfr-fieldset {\n width: 90%;\n }\n .tfr-how-it-works-item {\n flex-direction: column;\n }\n .tfr-try-on-content {\n margin-left: 0px;\n margin-top: 20px;\n }\n}\n\n@media screen and (max-height: 800px) {\n .tfr-video-responsive {\n height: 280px !important;\n }\n}\n";
|
|
7
|
-
const sizeRecCSS = "#tfr-size-recommendations {\n border: var(--tfr-main-border-width) solid var(--tfr-main-border-color);\n border-radius: var(--tfr-main-border-radius);\n background-color: var(--tfr-main-bg-color);\n color: var(--tfr-dark);\n padding: var(--tfr-main-v-padding) var(--tfr-main-h-padding);\n width: var(--tfr-main-width);\n font-family: var(--tfr-main-font);\n\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n#tfr-size-how-it-fits {\n opacity: 0.4;\n\n
|
|
7
|
+
const sizeRecCSS = "#tfr-size-recommendations {\n border: var(--tfr-main-border-width) solid var(--tfr-main-border-color);\n border-radius: var(--tfr-main-border-radius);\n background-color: var(--tfr-main-bg-color);\n color: var(--tfr-dark);\n padding: var(--tfr-main-v-padding) var(--tfr-main-h-padding);\n width: var(--tfr-main-width);\n font-family: var(--tfr-main-font);\n\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n#tfr-size-how-it-fits {\n opacity: 0.4;\n}\n\n#tfr-size-how-it-fits.logged-in {\n opacity: 1;\n}\n\n\n#tfr-size-recommendations-container {\n align-items: center;\n flex-direction: column;\n display: flex;\n justify-content: center;\n width: 100%;\n position: relative;\n}\n\n#tfr-size-rec-select-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: 13px;\n width: 100%;\n}\n\n#tfr-size-rec-title {\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n font-family: var(--tfr-title-font);\n}\n\n#tfr-size-rec-title-toggle {\n position: absolute;\n right: 0;\n top: 0;\n transition: all 0.3s ease;\n color: var(--tfr-grey);\n cursor: pointer;\n}\n\n.tfr-chevron-up {\n transform: rotate(180deg) scaleY(0.6);\n}\n\n.tfr-chevron-down {\n transform: rotate(0deg) scaleY(0.6);\n}\n\n#tfr-info-icon {\n cursor: pointer;\n}\n\n#tfr-size-rec-subtitle {\n border-bottom: 2px solid #000000;\n font-size: 18px;\n font-weight: 700;\n text-align: center;\n width: 100%;\n}\n\n#tfr-size-rec-title {\n font-size: 14px;\n}\n\n#tfr-size-rec-table {\n display: flex;\n flex-direction: column;\n font-size: 12px;\n padding: 0 10px;\n width: 100%;\n}\n\n.tfr-size-rec-table-row:first-of-type {\n border-top-width: 0;\n}\n\n.tfr-size-rec-table-row {\n font-family: var(--tfr-row-font);\n display: flex;\n justify-content: center;\n border-top: var(--tfr-main-border-width) solid var(--tfr-main-border-color);\n align-items: center;\n min-height: 40px;\n}\n\n.tfr-size-rec-table-cell-left,\n.tfr-size-rec-table-cell-right {\n flex: 1 1 0px;\n}\n\n.tfr-size-rec-table-cell-left {\n text-align: right;\n flex-grow: 1;\n padding-left: 8px;\n padding-right: 8px;\n}\n\n.tfr-size-rec-table-cell-right {\n text-align: left;\n flex-grow: 1;\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.tfr-size-rec-table-cell-right.perfect {\n color: var(--tfr-brand-color);\n}\n\n#tfr-size-rec-size {\n display: inline-block;\n}\n\n#tfr-size-rec-size>.tfr-size-rec-login-cta {\n font-weight: 500;\n margin-left: 10px;\n}\n\n.tfr-size-rec-login-cta,\n.tfr-size-rec-table-cell-right {\n font-size: 12px;\n}\n\n.tfr-size-rec-login-cta {\n color: var(--tfr-muted);\n display: flex;\n width: 150px;\n}\n\n#tfr-size-rec-action-login,\n#tfr-size-rec-action-logout {\n font-family: var(--tfr-cta-font);\n display: block;\n}\n\n#tfr-size-rec-action {\n font-size: 16px;\n text-decoration: underline;\n cursor: pointer;\n}\n\n#tfr-size-rec-select {\n opacity: 0.4;\n align-items: center;\n background-color: var(--tfr-size-selector-bg-color);\n border-radius: var(--tfr-size-selector-button-radius);\n border-color: var(--tfr-size-selector-border-color);\n border-style: solid;\n border-width: var(--tfr-size-selector-border-width);\n box-shadow: var(--tfr-size-selector-button-shadow);\n color: var(--tfr-size-selector-text-color);\n height: var(--tfr-size-selector-button-height);\n display: flex;\n font-size: var(--tfr-size-selector-font-size);\n font-weight: var(--tfr-size-selector-font-weight);\n justify-content: center;\n margin-bottom: 20px;\n margin-top: 10px;\n}\n\n#tfr-size-rec-select.logged-in {\n opacity: 1;\n}\n\n.tfr-size-rec-select-button {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--tfr-size-selector-button-height);\n justify-content: center;\n transition: all 150ms ease-in;\n width: 80px;\n}\n\n.tfr-size-rec-select-button:hover:not(.active):not(.tfr-disabled) {\n opacity: 0.8;\n background-color: var(--tfr-size-selector-bg-color-hover);\n}\n\n.tfr-size-rec-select-button.active {\n background-color: var(--tfr-size-selector-bg-color-active);\n height: var(--tfr-size-selector-button-active-height);\n border-width: var(--tfr-size-selector-button-active-border-width);\n border-style: solid;\n border-color: var(--tfr-size-selector-button-active-border-color);\n}\n\n.tfr-size-rec-select-button:first-of-type,\n.tfr-size-rec-select-button.active {\n border-top-left-radius: var(--tfr-size-selector-button-radius);\n border-bottom-left-radius: var(--tfr-size-selector-button-radius);\n}\n\n.tfr-size-rec-select-button:last-of-type,\n.tfr-size-rec-select-button.active {\n border-top-right-radius: var(--tfr-size-selector-button-radius);\n border-bottom-right-radius: var(--tfr-size-selector-button-radius);\n}\n\n.tfr-powered-by {\n display: flex;\n align-items: center;\n font-size: 10px;\n margin-top: 10px;\n}\n\n.tfr-powered-by-logo {\n margin: 0 4px;\n}\n\n.tfr-powered-by-logo,\n.tfr-powered-by-logo img,\n.tfr-powered-by-logo svg {\n height: 24px;\n width: 12px;\n}\n\n.tfr-powered-by-text-bold {\n font-weight: 700;\n}\n\n#tfr-size-recommendation-error {\n display: block;\n color: #8d0000;\n}\n\n#tfr-sign-in-nav {\n margin-bottom: 80px;\n}\n\n.tfr-disabled {\n cursor: default;\n}\n\n#tfr-login-to-view {\n cursor: pointer;\n}\n\n#tfr-try-on-button {\n background-color: var(--tfr-size-selector-bg-color-active);\n color: var(--tfr-size-selector-text-color);\n border-radius: var(--tfr-size-selector-button-radius);\n border-color: var(--tfr-size-selector-border-color);\n border-style: solid;\n border-width: var(--tfr-size-selector-border-width);\n box-shadow: var(--tfr-size-selector-button-shadow);\n height: var(--tfr-size-selector-button-height);\n font-size: var(--tfr-size-selector-font-size);\n font-weight: var(--tfr-size-selector-font-weight);\n cursor: pointer;\n margin-top: 20px;\n margin-bottom: 10px;\n width: 100%;\n max-width: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 150ms ease-in;\n position: relative;\n}\n\n#tfr-try-on-button:disabled,\n#tfr-try-on-button.loading {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n#tfr-try-on-button.loading::after {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border: 2px solid var(--tfr-size-selector-text-color);\n border-radius: 50%;\n border-top-color: transparent;\n animation: spin 1s linear infinite;\n margin-left: 8px;\n}\n\n#tfr-try-on-button.loading {\n color: transparent;\n}\n\n.hide {\n display: none !important;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}";
|
|
8
8
|
const spacesCSS = "/* Margin: */\n\n.tfr-mt-10 {\n margin-top: 10px;\n}\n\n.tfr-mt-20 {\n margin-top: 20px;\n}\n\n.tfr-mt-15 {\n margin-top: 15px;\n}\n\n.tfr-mt-30 {\n margin-top: 30px;\n}\n\n.mt-40 {\n margin-top: 40px;\n}\n\n.tfr-mb-40 {\n margin-bottom: 40px;\n}\n\n.tfr-mb-20 {\n margin-bottom: 20px;\n}\n\n.tfr-mr-10 {\n margin-right: 10px;\n}\n\n.tfr-mr-15 {\n margin-right: 15px;\n}\n\n.tfr-mt-50 {\n margin-top: 50px;\n}\n\n.tfr-mt-60 {\n margin-top: 60px;\n}\n\n.tfr-mb-60 {\n margin-bottom: 60px;\n}\n\n.tfr-mr-20 {\n margin-right: 20px;\n}\n\n.tfr-mt-15-p {\n margin-top: 15%;\n}\n\n.tfr-mb-13-p {\n margin-bottom: 13%;\n}\n\n.tfr-m-h-auto {\n margin-right: auto;\n margin-left: auto;\n}\n\n/* Padding */\n.tfr-pt-20 {\n padding-top: 20px;\n}\n\n.tfr-pb-50 {\n padding-bottom: 50px;\n}\n\n.tfr-p-20 {\n padding: 20px 10px;\n}\n\n.tfr-pr-20 {\n padding-right: 20px;\n}\n\n.tfr-pl-20 {\n padding-left: 20px;\n}\n\n.tfr-pb-7-p {\n padding-bottom: 7%;\n}\n";
|
|
9
9
|
const telephoneCSS = "/* International Telephone Input Css */\n.flag-container {\n top: 0;\n bottom: 0;\n right: 0;\n padding: 1px;\n right: auto;\n left: 0;\n}\n\n.flag-container:hover {\n cursor: pointer;\n}\n\n.selected-flag {\n z-index: 1;\n position: relative;\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 6px 0 8px;\n}\n\n.flag.bd {\n height: 12px;\n background-position: -418px 0;\n}\n\n.arrow {\n margin-left: 6px;\n width: 0;\n height: 0;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid #555;\n}\n\n.arrow-up {\n border-top: none;\n border-bottom: 6px solid #555;\n}\n\n.country-list {\n border-radius: 5px;\n display: none;\n cursor: pointer;\n line-height: 18px;\n font-size: 16px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n list-style: none;\n text-align: left;\n padding: 0;\n margin: 0 0 0 -1px;\n box-shadow: 0px 8px 10px 1px rgb(57 64 78 / 70%), 0px 3px 14px 2px rgb(57 64 78 / 70%),\n 0px 5px 5px -3px rgb(57 64 78 / 70%);\n background-color: #ffffff;\n width: 100%;\n width: auto;\n max-height: 500px;\n white-space: nowrap;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.country-list.active {\n display: inline-block;\n}\n\n.country {\n padding: 5px 26px 5px 15px;\n outline: 0;\n}\n\n.country-list .divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid rgb(0 0 0 / 12%);\n}\n\n.country.highlight {\n background-color: #c7cace;\n}\n\n.flag-box {\n display: inline-block;\n width: 20px;\n}\n\n.country-name,\n.flag-box {\n margin-right: 6px;\n}\n\n.country-name,\n.dial-code,\n.flag-box {\n vertical-align: middle;\n}\n";
|
|
10
10
|
const textCSS = ".tfr-title-font {\n font-family: 'Poppins', sans-serif;\n}\n\n.tfr-body-font {\n font-family: 'Roboto', sans-serif;\n}\n\n.tfr-light-24-300 {\n font-size: 24px;\n font-weight: 300;\n}\n\n.tfr-light-24-500 {\n font-size: 24px;\n font-weight: 500;\n}\n\n.tfr-light-22-300 {\n font-size: 22px;\n font-weight: 300;\n}\n\n.tfr-light-16-300 {\n font-size: 16px;\n font-weight: 300;\n}\n\n.tfr-medium-16-default {\n font-size: 16px;\n}\n\n.tfr-12-default {\n font-size: 12px;\n}\n\n.tfr-14-default {\n font-size: 14px;\n}\n\n.tfr-16-default {\n font-size: 16px;\n}\n\n.tfr-24-bold {\n font-size: 24px;\n font-weight: 700;\n}\n";
|
|
11
11
|
const variablesCSS = ":root {\n /* Colors */\n --tfr-brand-color: #209da7;\n --tfr-black: #000000;\n --tfr-red: #ff0000;\n --tfr-white: #ffffff;\n --tfr-muted: #a7a7a7;\n\n --tfr-dark: #121212;\n --tfr-grey: #878787;\n --tfr-light-grey: #dbdcdc;\n --tfr-dark-grey: #3f3f3f;\n\n /* Main */\n --tfr-main-border-color: rgba(18, 18, 18, 0.55);\n --tfr-main-border-radius: 0;\n --tfr-main-border-width: 1px;\n --tfr-main-bg-color: inherit;\n\n /* Spacing */\n --tfr-main-width: 440px;\n --tfr-main-v-padding: 14px;\n --tfr-main-h-padding: 20px;\n\n /* Typography */\n --tfr-main-font: inherit;\n --tfr-title-font: var(--tfr-main-font);\n --tfr-subtitle-font: var(--tfr-main-font);\n --tfr-row-font: var(--tfr-main-font);\n --tfr-cta-font: var(--tfr-main-font);\n\n /* Size Selector */\n --tfr-size-selector-text-color: var(--tfr-white);\n --tfr-size-selector-font-size: 14px;\n --tfr-size-selector-font-weight: 400;\n --tfr-size-selector-border-color: transparent;\n --tfr-size-selector-border-width: 0;\n --tfr-size-selector-bg-color: var(--tfr-grey);\n --tfr-size-selector-bg-color-hover: var(--tfr-dark-grey);\n --tfr-size-selector-bg-color-active: var(--tfr-dark);\n --tfr-size-selector-button-height: 35px;\n --tfr-size-selector-button-active-height: 45px;\n --tfr-size-selector-button-active-border-color: transparent;\n --tfr-size-selector-button-active-border-width: 0;\n --tfr-size-selector-button-radius: 8px;\n --tfr-size-selector-button-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);\n}\n";
|
|
12
|
-
const allCSS = colorsCSS + fitModalCSS + generalCSS + inputCSS + loaderCSS + mediaCSS + sizeRecCSS + spacesCSS + telephoneCSS + textCSS
|
|
12
|
+
const allCSS = variablesCSS + colorsCSS + fitModalCSS + generalCSS + inputCSS + loaderCSS + mediaCSS + sizeRecCSS + spacesCSS + telephoneCSS + textCSS;
|
|
13
13
|
if (typeof document !== "undefined") {
|
|
14
14
|
const styleElement = document.createElement("style");
|
|
15
15
|
styleElement.id = "thefittingroom-styles";
|
|
@@ -17,6 +17,8 @@ if (typeof document !== "undefined") {
|
|
|
17
17
|
document.head.appendChild(styleElement);
|
|
18
18
|
}
|
|
19
19
|
const TheFittingRoom = "The Fitting Room";
|
|
20
|
+
const ModalTagline = "End size uncertainty with";
|
|
21
|
+
const ModalDescription = "Our technology captures your precise measurements, and considers things like fabric stretch and your individual physique to find your perfect fit every time.";
|
|
20
22
|
const VirtualTryOnWith = "Virtual try on with";
|
|
21
23
|
const EmailAddress = "Email address";
|
|
22
24
|
const Password = "Password";
|
|
@@ -69,6 +71,8 @@ const UsernameOrPasswordEmpty = "Username or password is empty.";
|
|
|
69
71
|
const StyleNotFound = "style sku was not found";
|
|
70
72
|
const en$1 = {
|
|
71
73
|
TheFittingRoom,
|
|
74
|
+
ModalTagline,
|
|
75
|
+
ModalDescription,
|
|
72
76
|
VirtualTryOnWith,
|
|
73
77
|
EmailAddress,
|
|
74
78
|
Password,
|
|
@@ -424,20 +428,21 @@ const InitModalManager = (modalRoot) => {
|
|
|
424
428
|
const renderModalContent = (useFullModalContent) => {
|
|
425
429
|
if (!useFullModalContent) return "";
|
|
426
430
|
return `
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
431
|
+
<div class="tfr-modal-title-logo-container">
|
|
432
|
+
<div tfr-element="true" class="trf-logo-title tfr-title-font tfr-light-24-300 tfr-c-black tfr-mr-10">${L$1.ModalTagline}</div>
|
|
433
|
+
<div tfr-element="true" class="tfr-logo-container">
|
|
434
|
+
<div class="tfr-mr-15">
|
|
435
|
+
<svg width="26" height="47" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
436
|
+
<path d="M0.911938 0L67.4819 17.09V106.49L0.911938 123.51V0Z" fill="#209DA7">
|
|
437
|
+
</path>
|
|
438
|
+
<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">
|
|
439
|
+
</path>
|
|
440
|
+
</svg>
|
|
441
|
+
</div>
|
|
442
|
+
<div tfr-element="true" class="tfr-title-font tfr-light-24-500 tfr-c-black tfr-mr-10">${L$1.TheFittingRoom}</div>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
<div tfr-element="true" class="tfr-modal-description tfr-body-font tfr-16-default tfr-c-black-o7 tfr-mt-15 tfr-max-w-600">${L$1.ModalDescription}</div>
|
|
441
446
|
`;
|
|
442
447
|
};
|
|
443
448
|
const Open = (content) => {
|
|
@@ -565,7 +570,7 @@ const ScanCodeModal = (props) => {
|
|
|
565
570
|
document.getElementById("tfr-google-play")?.removeEventListener("click", onCtaClickGoogle);
|
|
566
571
|
};
|
|
567
572
|
const imageBaseUrl = "https://assets.dev.thefittingroom.xyz/images/";
|
|
568
|
-
const renderMobile = () => !isMobile ? `` : `<div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10 tfr-max-w-600">${L$1.
|
|
573
|
+
const renderMobile = () => !isMobile ? `` : `<div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10 tfr-max-w-600">${L$1.ReturnToTFR}</div>
|
|
569
574
|
|
|
570
575
|
<div tfr-element="true" class="tfr-flex tfr-space-above">
|
|
571
576
|
<img class="tfr-mobile-logo" src="${imageBaseUrl}apple.png" id="tfr-app-store" />
|
|
@@ -575,7 +580,7 @@ const ScanCodeModal = (props) => {
|
|
|
575
580
|
<div id="tfr-sign-in-nav" tfr-element="true" class="tfr-body-font tfr-mt-20 tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor">${L$1.HaveAcc}</div>
|
|
576
581
|
`;
|
|
577
582
|
const renderDesktop = () => isMobile ? `` : `<div id="tfr-qr-border-box">
|
|
578
|
-
<div tfr-element="true" class="tfr-title-font tfr-
|
|
583
|
+
<div tfr-element="true" class="tfr-title-font tfr-18-bold">${L$1.CreateAvatarSc}</div>
|
|
579
584
|
|
|
580
585
|
<img src="${imageBaseUrl}qr.png" class="tfr-qr-code" />
|
|
581
586
|
|
|
@@ -584,8 +589,7 @@ const ScanCodeModal = (props) => {
|
|
|
584
589
|
const body = () => {
|
|
585
590
|
return `
|
|
586
591
|
<div tfr-element="true">
|
|
587
|
-
|
|
588
|
-
|
|
592
|
+
|
|
589
593
|
</div>
|
|
590
594
|
<div tfr-element="true" class="tfr-logo-box">
|
|
591
595
|
<video id="tfr-video" controls loop autoplay playsinline>
|
|
@@ -21511,6 +21515,7 @@ class SizeRecComponent {
|
|
|
21511
21515
|
init(sizeRecMainDiv) {
|
|
21512
21516
|
if (!sizeRecMainDiv) throw new Error("Size rec main div not found");
|
|
21513
21517
|
this.sizeRecMainDiv = sizeRecMainDiv;
|
|
21518
|
+
this.sizeRecMainDiv.classList.add("hide");
|
|
21514
21519
|
this.render(sizeRecMainDiv);
|
|
21515
21520
|
this.setElements(sizeRecMainDiv);
|
|
21516
21521
|
this.bindEvents();
|
|
@@ -21634,9 +21639,9 @@ class SizeRecComponent {
|
|
|
21634
21639
|
// TODO: move perfect fit logic to CSS fit attributes
|
|
21635
21640
|
renderSizeRecTableRow(fit) {
|
|
21636
21641
|
return `<div class="tfr-size-rec-table-row">
|
|
21637
|
-
<div class="tfr-size-rec-table-cell-left">${fit.measurement_location}</div>
|
|
21642
|
+
<div class="tfr-size-rec-table-cell-left">${this.fitToTitleCase(fit.measurement_location)}</div>
|
|
21638
21643
|
<div class="tfr-size-rec-table-cell-right ${fit.isPerfectFit ? "perfect" : ""}">
|
|
21639
|
-
${fit.fit_label ||
|
|
21644
|
+
${this.fitToTitleCase(fit.fit_label || fit.fit)}
|
|
21640
21645
|
</div>
|
|
21641
21646
|
</div>`;
|
|
21642
21647
|
}
|
|
@@ -21696,7 +21701,7 @@ class SizeRecComponent {
|
|
|
21696
21701
|
}
|
|
21697
21702
|
render(sizeRecMainDiv) {
|
|
21698
21703
|
const body = `<div id="tfr-size-recommendations">
|
|
21699
|
-
<div id="tfr-size-rec-loading">
|
|
21704
|
+
<div id="tfr-size-rec-loading" class="hide">
|
|
21700
21705
|
<div class="lds-ellipsis">
|
|
21701
21706
|
<div></div>
|
|
21702
21707
|
<div></div>
|
|
@@ -21711,13 +21716,7 @@ class SizeRecComponent {
|
|
|
21711
21716
|
<div class="tfr-flex tfr-gap tfr-mb-2 tfr-mobile-small-text">
|
|
21712
21717
|
<div>Uncertain of your size?</div>
|
|
21713
21718
|
|
|
21714
|
-
|
|
21715
|
-
<div class="tfr-flex tfr-items-center">
|
|
21716
|
-
<div>Try</div>
|
|
21717
|
-
<div class="tfr-powered-by-logo">${tfrDoor}</div>
|
|
21718
|
-
<div class="tfr-powered-by-text-bold">The Fitting Room</div>
|
|
21719
|
-
</div>
|
|
21720
|
-
</div>
|
|
21719
|
+
|
|
21721
21720
|
|
|
21722
21721
|
<div class="tfr-toggle-open">
|
|
21723
21722
|
<div id="tfr-login-to-view" class="tfr-flex tfr-items-center">
|
|
@@ -21772,8 +21771,8 @@ class SizeRecComponent {
|
|
|
21772
21771
|
<div id="tfr-size-recommendation-error"></div>`;
|
|
21773
21772
|
sizeRecMainDiv.innerHTML = body;
|
|
21774
21773
|
}
|
|
21775
|
-
|
|
21776
|
-
return fit.split(
|
|
21774
|
+
fitToTitleCase(fit) {
|
|
21775
|
+
return fit.split(/[_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
|
|
21777
21776
|
}
|
|
21778
21777
|
}
|
|
21779
21778
|
class SizeRecommendationController {
|
|
@@ -21809,27 +21808,26 @@ class SizeRecommendationController {
|
|
|
21809
21808
|
async GetSizeRecommendationByStyleID(styleId) {
|
|
21810
21809
|
console.debug("start size recommendation", styleId);
|
|
21811
21810
|
try {
|
|
21811
|
+
this.Show();
|
|
21812
21812
|
this.SetSizeRecommendationLoading(true);
|
|
21813
21813
|
const sizeFitRecommendation = await this.fittingRoomAPI.GetRecommendedSizes(styleId);
|
|
21814
|
-
const sizeMeasurementLocationFits = sizeFitRecommendation.available_sizes.map(
|
|
21815
|
-
|
|
21816
|
-
|
|
21817
|
-
|
|
21818
|
-
|
|
21819
|
-
|
|
21820
|
-
|
|
21821
|
-
|
|
21822
|
-
|
|
21823
|
-
|
|
21824
|
-
|
|
21825
|
-
|
|
21826
|
-
isPerfectFit: this.perfectFits.includes(measurementLocationFit.fit)
|
|
21827
|
-
});
|
|
21814
|
+
const sizeMeasurementLocationFits = sizeFitRecommendation.available_sizes.map((size) => {
|
|
21815
|
+
const sizeMeasurementLocationFit = {
|
|
21816
|
+
isRecommended: size.id === sizeFitRecommendation.recommended_size.id,
|
|
21817
|
+
...size,
|
|
21818
|
+
measurementLocationFits: []
|
|
21819
|
+
};
|
|
21820
|
+
const matchingFit = sizeFitRecommendation.fits.find((sizeFit) => sizeFit.size_id === size.id);
|
|
21821
|
+
if (matchingFit) {
|
|
21822
|
+
matchingFit.measurement_location_fits.forEach((measurementLocationFit) => {
|
|
21823
|
+
sizeMeasurementLocationFit.measurementLocationFits.push({
|
|
21824
|
+
...measurementLocationFit,
|
|
21825
|
+
isPerfectFit: this.perfectFits.includes(measurementLocationFit.fit)
|
|
21828
21826
|
});
|
|
21829
|
-
}
|
|
21830
|
-
return sizeMeasurementLocationFit;
|
|
21827
|
+
});
|
|
21831
21828
|
}
|
|
21832
|
-
|
|
21829
|
+
return sizeMeasurementLocationFit;
|
|
21830
|
+
}).sort((a, b) => (a.size_value?.id || 0) - (b.size_value?.id || 0));
|
|
21833
21831
|
this.sizeRecComponent.ShowLoggedIn();
|
|
21834
21832
|
this.sizeRecComponent.Show();
|
|
21835
21833
|
this.sizeRecComponent.SetRecommendedSize(sizeMeasurementLocationFits);
|
|
@@ -22018,7 +22016,10 @@ class FittingRoomController {
|
|
|
22018
22016
|
}
|
|
22019
22017
|
this.styleMeasurementLocations = this.styleToGarmentMeasurementLocations(this.style);
|
|
22020
22018
|
const authUser = await authUserPromise;
|
|
22021
|
-
this.unsubFirestoreUserStateChange = this.firebaseAuthUserController.ListenForAuthStateChange(
|
|
22019
|
+
this.unsubFirestoreUserStateChange = this.firebaseAuthUserController.ListenForAuthStateChange(
|
|
22020
|
+
true,
|
|
22021
|
+
this.authStateChangeCallback.bind(this)
|
|
22022
|
+
);
|
|
22022
22023
|
if (!authUser) {
|
|
22023
22024
|
throw UserNotLoggedInError;
|
|
22024
22025
|
}
|
package/dist/index.umd.cjs
CHANGED
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
const inputCSS = "input {\n border: none;\n width: 100%;\n box-shadow: none !important;\n}\n\ninput:focus,\ntextarea:focus,\nselect:focus {\n outline: none;\n border: none;\n}\n\n.tfr-fieldset {\n border-color: rgba(0, 0, 0, 0.5);\n border-radius: 10px;\n border-width: 1px;\n margin-left: auto;\n margin-right: auto;\n padding: 5px 10px 10px 10px;\n text-align: left;\n width: 65%;\n}\n\n.tfr-fieldset-inline {\n border-color: rgba(0, 0, 0, 0.5);\n border-radius: 10px;\n border-width: 1px;\n margin-right: 10px;\n padding: 5px 10px 10px 10px;\n text-align: left;\n width: 250px;\n}\n\n.tfr-fieldset-err {\n border-color: red;\n}\n";
|
|
9
9
|
const loaderCSS = ".lds-ellipsis {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n\n.lds-ellipsis div {\n position: absolute;\n top: 33px;\n width: 13px;\n height: 13px;\n border-radius: 50%;\n background: var(--tfr-brand-color);\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n display: block;\n}\n\n.lds-ellipsis div:nth-child(1) {\n left: 8px;\n animation: lds-ellipsis1 0.6s infinite;\n}\n\n.lds-ellipsis div:nth-child(2) {\n left: 8px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n\n.lds-ellipsis div:nth-child(3) {\n left: 32px;\n animation: lds-ellipsis2 0.6s infinite;\n}\n\n.lds-ellipsis div:nth-child(4) {\n left: 56px;\n animation: lds-ellipsis3 0.6s infinite;\n}\n\n@keyframes lds-ellipsis1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes lds-ellipsis3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(24px, 0);\n }\n}\n";
|
|
10
10
|
const mediaCSS = "@media screen and (max-width: 702px) {\n .tfr-modal-title-logo-container {\n display: flex;\n flex-direction: column;\n }\n}\n\n@media screen and (min-width: 600px) {\n .tfr-modal-content-container {\n height: auto;\n border-radius: 10px;\n width: 100%;\n margin: auto;\n }\n}\n\n@media screen and (max-width: 599px) {\n #tfr-size-recommendations {\n width: calc(100vw - 30px) !important;\n }\n\n .tfr-mobile-small-text {\n font-size: 12px;\n }\n\n .tfr-mobile-hidden {\n display: none;\n }\n\n .tfr-modal-content {\n overflow: hidden;\n }\n\n .tfr-modal-content-container {\n min-height: 100vh;\n max-height: none;\n min-width: 100vw;\n max-width: 100vw;\n }\n\n .trf-logo-title {\n margin-bottom: 10px;\n }\n\n .tfr-modal-content-flex {\n overflow: auto;\n }\n}\n\n@media screen and (max-width: 500px) {\n .tfr-fieldset {\n width: 90%;\n }\n .tfr-how-it-works-item {\n flex-direction: column;\n }\n .tfr-try-on-content {\n margin-left: 0px;\n margin-top: 20px;\n }\n}\n\n@media screen and (max-height: 800px) {\n .tfr-video-responsive {\n height: 280px !important;\n }\n}\n";
|
|
11
|
-
const sizeRecCSS = "#tfr-size-recommendations {\n border: var(--tfr-main-border-width) solid var(--tfr-main-border-color);\n border-radius: var(--tfr-main-border-radius);\n background-color: var(--tfr-main-bg-color);\n color: var(--tfr-dark);\n padding: var(--tfr-main-v-padding) var(--tfr-main-h-padding);\n width: var(--tfr-main-width);\n font-family: var(--tfr-main-font);\n\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n#tfr-size-how-it-fits {\n opacity: 0.4;\n\n
|
|
11
|
+
const sizeRecCSS = "#tfr-size-recommendations {\n border: var(--tfr-main-border-width) solid var(--tfr-main-border-color);\n border-radius: var(--tfr-main-border-radius);\n background-color: var(--tfr-main-bg-color);\n color: var(--tfr-dark);\n padding: var(--tfr-main-v-padding) var(--tfr-main-h-padding);\n width: var(--tfr-main-width);\n font-family: var(--tfr-main-font);\n\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n#tfr-size-how-it-fits {\n opacity: 0.4;\n}\n\n#tfr-size-how-it-fits.logged-in {\n opacity: 1;\n}\n\n\n#tfr-size-recommendations-container {\n align-items: center;\n flex-direction: column;\n display: flex;\n justify-content: center;\n width: 100%;\n position: relative;\n}\n\n#tfr-size-rec-select-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: 13px;\n width: 100%;\n}\n\n#tfr-size-rec-title {\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n font-family: var(--tfr-title-font);\n}\n\n#tfr-size-rec-title-toggle {\n position: absolute;\n right: 0;\n top: 0;\n transition: all 0.3s ease;\n color: var(--tfr-grey);\n cursor: pointer;\n}\n\n.tfr-chevron-up {\n transform: rotate(180deg) scaleY(0.6);\n}\n\n.tfr-chevron-down {\n transform: rotate(0deg) scaleY(0.6);\n}\n\n#tfr-info-icon {\n cursor: pointer;\n}\n\n#tfr-size-rec-subtitle {\n border-bottom: 2px solid #000000;\n font-size: 18px;\n font-weight: 700;\n text-align: center;\n width: 100%;\n}\n\n#tfr-size-rec-title {\n font-size: 14px;\n}\n\n#tfr-size-rec-table {\n display: flex;\n flex-direction: column;\n font-size: 12px;\n padding: 0 10px;\n width: 100%;\n}\n\n.tfr-size-rec-table-row:first-of-type {\n border-top-width: 0;\n}\n\n.tfr-size-rec-table-row {\n font-family: var(--tfr-row-font);\n display: flex;\n justify-content: center;\n border-top: var(--tfr-main-border-width) solid var(--tfr-main-border-color);\n align-items: center;\n min-height: 40px;\n}\n\n.tfr-size-rec-table-cell-left,\n.tfr-size-rec-table-cell-right {\n flex: 1 1 0px;\n}\n\n.tfr-size-rec-table-cell-left {\n text-align: right;\n flex-grow: 1;\n padding-left: 8px;\n padding-right: 8px;\n}\n\n.tfr-size-rec-table-cell-right {\n text-align: left;\n flex-grow: 1;\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.tfr-size-rec-table-cell-right.perfect {\n color: var(--tfr-brand-color);\n}\n\n#tfr-size-rec-size {\n display: inline-block;\n}\n\n#tfr-size-rec-size>.tfr-size-rec-login-cta {\n font-weight: 500;\n margin-left: 10px;\n}\n\n.tfr-size-rec-login-cta,\n.tfr-size-rec-table-cell-right {\n font-size: 12px;\n}\n\n.tfr-size-rec-login-cta {\n color: var(--tfr-muted);\n display: flex;\n width: 150px;\n}\n\n#tfr-size-rec-action-login,\n#tfr-size-rec-action-logout {\n font-family: var(--tfr-cta-font);\n display: block;\n}\n\n#tfr-size-rec-action {\n font-size: 16px;\n text-decoration: underline;\n cursor: pointer;\n}\n\n#tfr-size-rec-select {\n opacity: 0.4;\n align-items: center;\n background-color: var(--tfr-size-selector-bg-color);\n border-radius: var(--tfr-size-selector-button-radius);\n border-color: var(--tfr-size-selector-border-color);\n border-style: solid;\n border-width: var(--tfr-size-selector-border-width);\n box-shadow: var(--tfr-size-selector-button-shadow);\n color: var(--tfr-size-selector-text-color);\n height: var(--tfr-size-selector-button-height);\n display: flex;\n font-size: var(--tfr-size-selector-font-size);\n font-weight: var(--tfr-size-selector-font-weight);\n justify-content: center;\n margin-bottom: 20px;\n margin-top: 10px;\n}\n\n#tfr-size-rec-select.logged-in {\n opacity: 1;\n}\n\n.tfr-size-rec-select-button {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--tfr-size-selector-button-height);\n justify-content: center;\n transition: all 150ms ease-in;\n width: 80px;\n}\n\n.tfr-size-rec-select-button:hover:not(.active):not(.tfr-disabled) {\n opacity: 0.8;\n background-color: var(--tfr-size-selector-bg-color-hover);\n}\n\n.tfr-size-rec-select-button.active {\n background-color: var(--tfr-size-selector-bg-color-active);\n height: var(--tfr-size-selector-button-active-height);\n border-width: var(--tfr-size-selector-button-active-border-width);\n border-style: solid;\n border-color: var(--tfr-size-selector-button-active-border-color);\n}\n\n.tfr-size-rec-select-button:first-of-type,\n.tfr-size-rec-select-button.active {\n border-top-left-radius: var(--tfr-size-selector-button-radius);\n border-bottom-left-radius: var(--tfr-size-selector-button-radius);\n}\n\n.tfr-size-rec-select-button:last-of-type,\n.tfr-size-rec-select-button.active {\n border-top-right-radius: var(--tfr-size-selector-button-radius);\n border-bottom-right-radius: var(--tfr-size-selector-button-radius);\n}\n\n.tfr-powered-by {\n display: flex;\n align-items: center;\n font-size: 10px;\n margin-top: 10px;\n}\n\n.tfr-powered-by-logo {\n margin: 0 4px;\n}\n\n.tfr-powered-by-logo,\n.tfr-powered-by-logo img,\n.tfr-powered-by-logo svg {\n height: 24px;\n width: 12px;\n}\n\n.tfr-powered-by-text-bold {\n font-weight: 700;\n}\n\n#tfr-size-recommendation-error {\n display: block;\n color: #8d0000;\n}\n\n#tfr-sign-in-nav {\n margin-bottom: 80px;\n}\n\n.tfr-disabled {\n cursor: default;\n}\n\n#tfr-login-to-view {\n cursor: pointer;\n}\n\n#tfr-try-on-button {\n background-color: var(--tfr-size-selector-bg-color-active);\n color: var(--tfr-size-selector-text-color);\n border-radius: var(--tfr-size-selector-button-radius);\n border-color: var(--tfr-size-selector-border-color);\n border-style: solid;\n border-width: var(--tfr-size-selector-border-width);\n box-shadow: var(--tfr-size-selector-button-shadow);\n height: var(--tfr-size-selector-button-height);\n font-size: var(--tfr-size-selector-font-size);\n font-weight: var(--tfr-size-selector-font-weight);\n cursor: pointer;\n margin-top: 20px;\n margin-bottom: 10px;\n width: 100%;\n max-width: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 150ms ease-in;\n position: relative;\n}\n\n#tfr-try-on-button:disabled,\n#tfr-try-on-button.loading {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n#tfr-try-on-button.loading::after {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border: 2px solid var(--tfr-size-selector-text-color);\n border-radius: 50%;\n border-top-color: transparent;\n animation: spin 1s linear infinite;\n margin-left: 8px;\n}\n\n#tfr-try-on-button.loading {\n color: transparent;\n}\n\n.hide {\n display: none !important;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}";
|
|
12
12
|
const spacesCSS = "/* Margin: */\n\n.tfr-mt-10 {\n margin-top: 10px;\n}\n\n.tfr-mt-20 {\n margin-top: 20px;\n}\n\n.tfr-mt-15 {\n margin-top: 15px;\n}\n\n.tfr-mt-30 {\n margin-top: 30px;\n}\n\n.mt-40 {\n margin-top: 40px;\n}\n\n.tfr-mb-40 {\n margin-bottom: 40px;\n}\n\n.tfr-mb-20 {\n margin-bottom: 20px;\n}\n\n.tfr-mr-10 {\n margin-right: 10px;\n}\n\n.tfr-mr-15 {\n margin-right: 15px;\n}\n\n.tfr-mt-50 {\n margin-top: 50px;\n}\n\n.tfr-mt-60 {\n margin-top: 60px;\n}\n\n.tfr-mb-60 {\n margin-bottom: 60px;\n}\n\n.tfr-mr-20 {\n margin-right: 20px;\n}\n\n.tfr-mt-15-p {\n margin-top: 15%;\n}\n\n.tfr-mb-13-p {\n margin-bottom: 13%;\n}\n\n.tfr-m-h-auto {\n margin-right: auto;\n margin-left: auto;\n}\n\n/* Padding */\n.tfr-pt-20 {\n padding-top: 20px;\n}\n\n.tfr-pb-50 {\n padding-bottom: 50px;\n}\n\n.tfr-p-20 {\n padding: 20px 10px;\n}\n\n.tfr-pr-20 {\n padding-right: 20px;\n}\n\n.tfr-pl-20 {\n padding-left: 20px;\n}\n\n.tfr-pb-7-p {\n padding-bottom: 7%;\n}\n";
|
|
13
13
|
const telephoneCSS = "/* International Telephone Input Css */\n.flag-container {\n top: 0;\n bottom: 0;\n right: 0;\n padding: 1px;\n right: auto;\n left: 0;\n}\n\n.flag-container:hover {\n cursor: pointer;\n}\n\n.selected-flag {\n z-index: 1;\n position: relative;\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 6px 0 8px;\n}\n\n.flag.bd {\n height: 12px;\n background-position: -418px 0;\n}\n\n.arrow {\n margin-left: 6px;\n width: 0;\n height: 0;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid #555;\n}\n\n.arrow-up {\n border-top: none;\n border-bottom: 6px solid #555;\n}\n\n.country-list {\n border-radius: 5px;\n display: none;\n cursor: pointer;\n line-height: 18px;\n font-size: 16px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 2;\n list-style: none;\n text-align: left;\n padding: 0;\n margin: 0 0 0 -1px;\n box-shadow: 0px 8px 10px 1px rgb(57 64 78 / 70%), 0px 3px 14px 2px rgb(57 64 78 / 70%),\n 0px 5px 5px -3px rgb(57 64 78 / 70%);\n background-color: #ffffff;\n width: 100%;\n width: auto;\n max-height: 500px;\n white-space: nowrap;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.country-list.active {\n display: inline-block;\n}\n\n.country {\n padding: 5px 26px 5px 15px;\n outline: 0;\n}\n\n.country-list .divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid rgb(0 0 0 / 12%);\n}\n\n.country.highlight {\n background-color: #c7cace;\n}\n\n.flag-box {\n display: inline-block;\n width: 20px;\n}\n\n.country-name,\n.flag-box {\n margin-right: 6px;\n}\n\n.country-name,\n.dial-code,\n.flag-box {\n vertical-align: middle;\n}\n";
|
|
14
14
|
const textCSS = ".tfr-title-font {\n font-family: 'Poppins', sans-serif;\n}\n\n.tfr-body-font {\n font-family: 'Roboto', sans-serif;\n}\n\n.tfr-light-24-300 {\n font-size: 24px;\n font-weight: 300;\n}\n\n.tfr-light-24-500 {\n font-size: 24px;\n font-weight: 500;\n}\n\n.tfr-light-22-300 {\n font-size: 22px;\n font-weight: 300;\n}\n\n.tfr-light-16-300 {\n font-size: 16px;\n font-weight: 300;\n}\n\n.tfr-medium-16-default {\n font-size: 16px;\n}\n\n.tfr-12-default {\n font-size: 12px;\n}\n\n.tfr-14-default {\n font-size: 14px;\n}\n\n.tfr-16-default {\n font-size: 16px;\n}\n\n.tfr-24-bold {\n font-size: 24px;\n font-weight: 700;\n}\n";
|
|
15
15
|
const variablesCSS = ":root {\n /* Colors */\n --tfr-brand-color: #209da7;\n --tfr-black: #000000;\n --tfr-red: #ff0000;\n --tfr-white: #ffffff;\n --tfr-muted: #a7a7a7;\n\n --tfr-dark: #121212;\n --tfr-grey: #878787;\n --tfr-light-grey: #dbdcdc;\n --tfr-dark-grey: #3f3f3f;\n\n /* Main */\n --tfr-main-border-color: rgba(18, 18, 18, 0.55);\n --tfr-main-border-radius: 0;\n --tfr-main-border-width: 1px;\n --tfr-main-bg-color: inherit;\n\n /* Spacing */\n --tfr-main-width: 440px;\n --tfr-main-v-padding: 14px;\n --tfr-main-h-padding: 20px;\n\n /* Typography */\n --tfr-main-font: inherit;\n --tfr-title-font: var(--tfr-main-font);\n --tfr-subtitle-font: var(--tfr-main-font);\n --tfr-row-font: var(--tfr-main-font);\n --tfr-cta-font: var(--tfr-main-font);\n\n /* Size Selector */\n --tfr-size-selector-text-color: var(--tfr-white);\n --tfr-size-selector-font-size: 14px;\n --tfr-size-selector-font-weight: 400;\n --tfr-size-selector-border-color: transparent;\n --tfr-size-selector-border-width: 0;\n --tfr-size-selector-bg-color: var(--tfr-grey);\n --tfr-size-selector-bg-color-hover: var(--tfr-dark-grey);\n --tfr-size-selector-bg-color-active: var(--tfr-dark);\n --tfr-size-selector-button-height: 35px;\n --tfr-size-selector-button-active-height: 45px;\n --tfr-size-selector-button-active-border-color: transparent;\n --tfr-size-selector-button-active-border-width: 0;\n --tfr-size-selector-button-radius: 8px;\n --tfr-size-selector-button-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);\n}\n";
|
|
16
|
-
const allCSS = colorsCSS + fitModalCSS + generalCSS + inputCSS + loaderCSS + mediaCSS + sizeRecCSS + spacesCSS + telephoneCSS + textCSS
|
|
16
|
+
const allCSS = variablesCSS + colorsCSS + fitModalCSS + generalCSS + inputCSS + loaderCSS + mediaCSS + sizeRecCSS + spacesCSS + telephoneCSS + textCSS;
|
|
17
17
|
if (typeof document !== "undefined") {
|
|
18
18
|
const styleElement = document.createElement("style");
|
|
19
19
|
styleElement.id = "thefittingroom-styles";
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
document.head.appendChild(styleElement);
|
|
22
22
|
}
|
|
23
23
|
const TheFittingRoom = "The Fitting Room";
|
|
24
|
+
const ModalTagline = "End size uncertainty with";
|
|
25
|
+
const ModalDescription = "Our technology captures your precise measurements, and considers things like fabric stretch and your individual physique to find your perfect fit every time.";
|
|
24
26
|
const VirtualTryOnWith = "Virtual try on with";
|
|
25
27
|
const EmailAddress = "Email address";
|
|
26
28
|
const Password = "Password";
|
|
@@ -73,6 +75,8 @@
|
|
|
73
75
|
const StyleNotFound = "style sku was not found";
|
|
74
76
|
const en$1 = {
|
|
75
77
|
TheFittingRoom,
|
|
78
|
+
ModalTagline,
|
|
79
|
+
ModalDescription,
|
|
76
80
|
VirtualTryOnWith,
|
|
77
81
|
EmailAddress,
|
|
78
82
|
Password,
|
|
@@ -428,20 +432,21 @@
|
|
|
428
432
|
const renderModalContent = (useFullModalContent) => {
|
|
429
433
|
if (!useFullModalContent) return "";
|
|
430
434
|
return `
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
435
|
+
<div class="tfr-modal-title-logo-container">
|
|
436
|
+
<div tfr-element="true" class="trf-logo-title tfr-title-font tfr-light-24-300 tfr-c-black tfr-mr-10">${L$1.ModalTagline}</div>
|
|
437
|
+
<div tfr-element="true" class="tfr-logo-container">
|
|
438
|
+
<div class="tfr-mr-15">
|
|
439
|
+
<svg width="26" height="47" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
440
|
+
<path d="M0.911938 0L67.4819 17.09V106.49L0.911938 123.51V0Z" fill="#209DA7">
|
|
441
|
+
</path>
|
|
442
|
+
<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">
|
|
443
|
+
</path>
|
|
444
|
+
</svg>
|
|
445
|
+
</div>
|
|
446
|
+
<div tfr-element="true" class="tfr-title-font tfr-light-24-500 tfr-c-black tfr-mr-10">${L$1.TheFittingRoom}</div>
|
|
447
|
+
</div>
|
|
448
|
+
</div>
|
|
449
|
+
<div tfr-element="true" class="tfr-modal-description tfr-body-font tfr-16-default tfr-c-black-o7 tfr-mt-15 tfr-max-w-600">${L$1.ModalDescription}</div>
|
|
445
450
|
`;
|
|
446
451
|
};
|
|
447
452
|
const Open = (content) => {
|
|
@@ -569,7 +574,7 @@
|
|
|
569
574
|
document.getElementById("tfr-google-play")?.removeEventListener("click", onCtaClickGoogle);
|
|
570
575
|
};
|
|
571
576
|
const imageBaseUrl = "https://assets.dev.thefittingroom.xyz/images/";
|
|
572
|
-
const renderMobile = () => !isMobile ? `` : `<div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10 tfr-max-w-600">${L$1.
|
|
577
|
+
const renderMobile = () => !isMobile ? `` : `<div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10 tfr-max-w-600">${L$1.ReturnToTFR}</div>
|
|
573
578
|
|
|
574
579
|
<div tfr-element="true" class="tfr-flex tfr-space-above">
|
|
575
580
|
<img class="tfr-mobile-logo" src="${imageBaseUrl}apple.png" id="tfr-app-store" />
|
|
@@ -579,7 +584,7 @@
|
|
|
579
584
|
<div id="tfr-sign-in-nav" tfr-element="true" class="tfr-body-font tfr-mt-20 tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor">${L$1.HaveAcc}</div>
|
|
580
585
|
`;
|
|
581
586
|
const renderDesktop = () => isMobile ? `` : `<div id="tfr-qr-border-box">
|
|
582
|
-
<div tfr-element="true" class="tfr-title-font tfr-
|
|
587
|
+
<div tfr-element="true" class="tfr-title-font tfr-18-bold">${L$1.CreateAvatarSc}</div>
|
|
583
588
|
|
|
584
589
|
<img src="${imageBaseUrl}qr.png" class="tfr-qr-code" />
|
|
585
590
|
|
|
@@ -588,8 +593,7 @@
|
|
|
588
593
|
const body = () => {
|
|
589
594
|
return `
|
|
590
595
|
<div tfr-element="true">
|
|
591
|
-
|
|
592
|
-
|
|
596
|
+
|
|
593
597
|
</div>
|
|
594
598
|
<div tfr-element="true" class="tfr-logo-box">
|
|
595
599
|
<video id="tfr-video" controls loop autoplay playsinline>
|
|
@@ -21515,6 +21519,7 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21515
21519
|
init(sizeRecMainDiv) {
|
|
21516
21520
|
if (!sizeRecMainDiv) throw new Error("Size rec main div not found");
|
|
21517
21521
|
this.sizeRecMainDiv = sizeRecMainDiv;
|
|
21522
|
+
this.sizeRecMainDiv.classList.add("hide");
|
|
21518
21523
|
this.render(sizeRecMainDiv);
|
|
21519
21524
|
this.setElements(sizeRecMainDiv);
|
|
21520
21525
|
this.bindEvents();
|
|
@@ -21638,9 +21643,9 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21638
21643
|
// TODO: move perfect fit logic to CSS fit attributes
|
|
21639
21644
|
renderSizeRecTableRow(fit) {
|
|
21640
21645
|
return `<div class="tfr-size-rec-table-row">
|
|
21641
|
-
<div class="tfr-size-rec-table-cell-left">${fit.measurement_location}</div>
|
|
21646
|
+
<div class="tfr-size-rec-table-cell-left">${this.fitToTitleCase(fit.measurement_location)}</div>
|
|
21642
21647
|
<div class="tfr-size-rec-table-cell-right ${fit.isPerfectFit ? "perfect" : ""}">
|
|
21643
|
-
${fit.fit_label ||
|
|
21648
|
+
${this.fitToTitleCase(fit.fit_label || fit.fit)}
|
|
21644
21649
|
</div>
|
|
21645
21650
|
</div>`;
|
|
21646
21651
|
}
|
|
@@ -21700,7 +21705,7 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21700
21705
|
}
|
|
21701
21706
|
render(sizeRecMainDiv) {
|
|
21702
21707
|
const body = `<div id="tfr-size-recommendations">
|
|
21703
|
-
<div id="tfr-size-rec-loading">
|
|
21708
|
+
<div id="tfr-size-rec-loading" class="hide">
|
|
21704
21709
|
<div class="lds-ellipsis">
|
|
21705
21710
|
<div></div>
|
|
21706
21711
|
<div></div>
|
|
@@ -21715,13 +21720,7 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21715
21720
|
<div class="tfr-flex tfr-gap tfr-mb-2 tfr-mobile-small-text">
|
|
21716
21721
|
<div>Uncertain of your size?</div>
|
|
21717
21722
|
|
|
21718
|
-
|
|
21719
|
-
<div class="tfr-flex tfr-items-center">
|
|
21720
|
-
<div>Try</div>
|
|
21721
|
-
<div class="tfr-powered-by-logo">${tfrDoor}</div>
|
|
21722
|
-
<div class="tfr-powered-by-text-bold">The Fitting Room</div>
|
|
21723
|
-
</div>
|
|
21724
|
-
</div>
|
|
21723
|
+
|
|
21725
21724
|
|
|
21726
21725
|
<div class="tfr-toggle-open">
|
|
21727
21726
|
<div id="tfr-login-to-view" class="tfr-flex tfr-items-center">
|
|
@@ -21776,8 +21775,8 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21776
21775
|
<div id="tfr-size-recommendation-error"></div>`;
|
|
21777
21776
|
sizeRecMainDiv.innerHTML = body;
|
|
21778
21777
|
}
|
|
21779
|
-
|
|
21780
|
-
return fit.split(
|
|
21778
|
+
fitToTitleCase(fit) {
|
|
21779
|
+
return fit.split(/[_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
|
|
21781
21780
|
}
|
|
21782
21781
|
}
|
|
21783
21782
|
class SizeRecommendationController {
|
|
@@ -21813,27 +21812,26 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21813
21812
|
async GetSizeRecommendationByStyleID(styleId) {
|
|
21814
21813
|
console.debug("start size recommendation", styleId);
|
|
21815
21814
|
try {
|
|
21815
|
+
this.Show();
|
|
21816
21816
|
this.SetSizeRecommendationLoading(true);
|
|
21817
21817
|
const sizeFitRecommendation = await this.fittingRoomAPI.GetRecommendedSizes(styleId);
|
|
21818
|
-
const sizeMeasurementLocationFits = sizeFitRecommendation.available_sizes.map(
|
|
21819
|
-
|
|
21820
|
-
|
|
21821
|
-
|
|
21822
|
-
|
|
21823
|
-
|
|
21824
|
-
|
|
21825
|
-
|
|
21826
|
-
|
|
21827
|
-
|
|
21828
|
-
|
|
21829
|
-
|
|
21830
|
-
isPerfectFit: this.perfectFits.includes(measurementLocationFit.fit)
|
|
21831
|
-
});
|
|
21818
|
+
const sizeMeasurementLocationFits = sizeFitRecommendation.available_sizes.map((size) => {
|
|
21819
|
+
const sizeMeasurementLocationFit = {
|
|
21820
|
+
isRecommended: size.id === sizeFitRecommendation.recommended_size.id,
|
|
21821
|
+
...size,
|
|
21822
|
+
measurementLocationFits: []
|
|
21823
|
+
};
|
|
21824
|
+
const matchingFit = sizeFitRecommendation.fits.find((sizeFit) => sizeFit.size_id === size.id);
|
|
21825
|
+
if (matchingFit) {
|
|
21826
|
+
matchingFit.measurement_location_fits.forEach((measurementLocationFit) => {
|
|
21827
|
+
sizeMeasurementLocationFit.measurementLocationFits.push({
|
|
21828
|
+
...measurementLocationFit,
|
|
21829
|
+
isPerfectFit: this.perfectFits.includes(measurementLocationFit.fit)
|
|
21832
21830
|
});
|
|
21833
|
-
}
|
|
21834
|
-
return sizeMeasurementLocationFit;
|
|
21831
|
+
});
|
|
21835
21832
|
}
|
|
21836
|
-
|
|
21833
|
+
return sizeMeasurementLocationFit;
|
|
21834
|
+
}).sort((a, b) => (a.size_value?.id || 0) - (b.size_value?.id || 0));
|
|
21837
21835
|
this.sizeRecComponent.ShowLoggedIn();
|
|
21838
21836
|
this.sizeRecComponent.Show();
|
|
21839
21837
|
this.sizeRecComponent.SetRecommendedSize(sizeMeasurementLocationFits);
|
|
@@ -22022,7 +22020,10 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
22022
22020
|
}
|
|
22023
22021
|
this.styleMeasurementLocations = this.styleToGarmentMeasurementLocations(this.style);
|
|
22024
22022
|
const authUser = await authUserPromise;
|
|
22025
|
-
this.unsubFirestoreUserStateChange = this.firebaseAuthUserController.ListenForAuthStateChange(
|
|
22023
|
+
this.unsubFirestoreUserStateChange = this.firebaseAuthUserController.ListenForAuthStateChange(
|
|
22024
|
+
true,
|
|
22025
|
+
this.authStateChangeCallback.bind(this)
|
|
22026
|
+
);
|
|
22026
22027
|
if (!authUser) {
|
|
22027
22028
|
throw UserNotLoggedInError;
|
|
22028
22029
|
}
|