@thefittingroom/shop-ui 4.2.1 → 4.3.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.
- package/dist/index.js +44 -48
- package/dist/index.umd.cjs +44 -48
- 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>
|
|
@@ -21634,9 +21638,9 @@ class SizeRecComponent {
|
|
|
21634
21638
|
// TODO: move perfect fit logic to CSS fit attributes
|
|
21635
21639
|
renderSizeRecTableRow(fit) {
|
|
21636
21640
|
return `<div class="tfr-size-rec-table-row">
|
|
21637
|
-
<div class="tfr-size-rec-table-cell-left">${fit.measurement_location}</div>
|
|
21641
|
+
<div class="tfr-size-rec-table-cell-left">${this.fitToTitleCase(fit.measurement_location)}</div>
|
|
21638
21642
|
<div class="tfr-size-rec-table-cell-right ${fit.isPerfectFit ? "perfect" : ""}">
|
|
21639
|
-
${fit.fit_label ||
|
|
21643
|
+
${this.fitToTitleCase(fit.fit_label || fit.fit)}
|
|
21640
21644
|
</div>
|
|
21641
21645
|
</div>`;
|
|
21642
21646
|
}
|
|
@@ -21711,13 +21715,7 @@ class SizeRecComponent {
|
|
|
21711
21715
|
<div class="tfr-flex tfr-gap tfr-mb-2 tfr-mobile-small-text">
|
|
21712
21716
|
<div>Uncertain of your size?</div>
|
|
21713
21717
|
|
|
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>
|
|
21718
|
+
|
|
21721
21719
|
|
|
21722
21720
|
<div class="tfr-toggle-open">
|
|
21723
21721
|
<div id="tfr-login-to-view" class="tfr-flex tfr-items-center">
|
|
@@ -21772,8 +21770,8 @@ class SizeRecComponent {
|
|
|
21772
21770
|
<div id="tfr-size-recommendation-error"></div>`;
|
|
21773
21771
|
sizeRecMainDiv.innerHTML = body;
|
|
21774
21772
|
}
|
|
21775
|
-
|
|
21776
|
-
return fit.split(
|
|
21773
|
+
fitToTitleCase(fit) {
|
|
21774
|
+
return fit.split(/[_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
|
|
21777
21775
|
}
|
|
21778
21776
|
}
|
|
21779
21777
|
class SizeRecommendationController {
|
|
@@ -21811,25 +21809,23 @@ class SizeRecommendationController {
|
|
|
21811
21809
|
try {
|
|
21812
21810
|
this.SetSizeRecommendationLoading(true);
|
|
21813
21811
|
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
|
-
});
|
|
21812
|
+
const sizeMeasurementLocationFits = sizeFitRecommendation.available_sizes.map((size) => {
|
|
21813
|
+
const sizeMeasurementLocationFit = {
|
|
21814
|
+
isRecommended: size.id === sizeFitRecommendation.recommended_size.id,
|
|
21815
|
+
...size,
|
|
21816
|
+
measurementLocationFits: []
|
|
21817
|
+
};
|
|
21818
|
+
const matchingFit = sizeFitRecommendation.fits.find((sizeFit) => sizeFit.size_id === size.id);
|
|
21819
|
+
if (matchingFit) {
|
|
21820
|
+
matchingFit.measurement_location_fits.forEach((measurementLocationFit) => {
|
|
21821
|
+
sizeMeasurementLocationFit.measurementLocationFits.push({
|
|
21822
|
+
...measurementLocationFit,
|
|
21823
|
+
isPerfectFit: this.perfectFits.includes(measurementLocationFit.fit)
|
|
21828
21824
|
});
|
|
21829
|
-
}
|
|
21830
|
-
return sizeMeasurementLocationFit;
|
|
21825
|
+
});
|
|
21831
21826
|
}
|
|
21832
|
-
|
|
21827
|
+
return sizeMeasurementLocationFit;
|
|
21828
|
+
}).sort((a, b) => (a.size_value?.id || 0) - (b.size_value?.id || 0));
|
|
21833
21829
|
this.sizeRecComponent.ShowLoggedIn();
|
|
21834
21830
|
this.sizeRecComponent.Show();
|
|
21835
21831
|
this.sizeRecComponent.SetRecommendedSize(sizeMeasurementLocationFits);
|
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>
|
|
@@ -21638,9 +21642,9 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21638
21642
|
// TODO: move perfect fit logic to CSS fit attributes
|
|
21639
21643
|
renderSizeRecTableRow(fit) {
|
|
21640
21644
|
return `<div class="tfr-size-rec-table-row">
|
|
21641
|
-
<div class="tfr-size-rec-table-cell-left">${fit.measurement_location}</div>
|
|
21645
|
+
<div class="tfr-size-rec-table-cell-left">${this.fitToTitleCase(fit.measurement_location)}</div>
|
|
21642
21646
|
<div class="tfr-size-rec-table-cell-right ${fit.isPerfectFit ? "perfect" : ""}">
|
|
21643
|
-
${fit.fit_label ||
|
|
21647
|
+
${this.fitToTitleCase(fit.fit_label || fit.fit)}
|
|
21644
21648
|
</div>
|
|
21645
21649
|
</div>`;
|
|
21646
21650
|
}
|
|
@@ -21715,13 +21719,7 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21715
21719
|
<div class="tfr-flex tfr-gap tfr-mb-2 tfr-mobile-small-text">
|
|
21716
21720
|
<div>Uncertain of your size?</div>
|
|
21717
21721
|
|
|
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>
|
|
21722
|
+
|
|
21725
21723
|
|
|
21726
21724
|
<div class="tfr-toggle-open">
|
|
21727
21725
|
<div id="tfr-login-to-view" class="tfr-flex tfr-items-center">
|
|
@@ -21776,8 +21774,8 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21776
21774
|
<div id="tfr-size-recommendation-error"></div>`;
|
|
21777
21775
|
sizeRecMainDiv.innerHTML = body;
|
|
21778
21776
|
}
|
|
21779
|
-
|
|
21780
|
-
return fit.split(
|
|
21777
|
+
fitToTitleCase(fit) {
|
|
21778
|
+
return fit.split(/[_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
|
|
21781
21779
|
}
|
|
21782
21780
|
}
|
|
21783
21781
|
class SizeRecommendationController {
|
|
@@ -21815,25 +21813,23 @@ This typically indicates that your device does not have a healthy Internet conne
|
|
|
21815
21813
|
try {
|
|
21816
21814
|
this.SetSizeRecommendationLoading(true);
|
|
21817
21815
|
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
|
-
});
|
|
21816
|
+
const sizeMeasurementLocationFits = sizeFitRecommendation.available_sizes.map((size) => {
|
|
21817
|
+
const sizeMeasurementLocationFit = {
|
|
21818
|
+
isRecommended: size.id === sizeFitRecommendation.recommended_size.id,
|
|
21819
|
+
...size,
|
|
21820
|
+
measurementLocationFits: []
|
|
21821
|
+
};
|
|
21822
|
+
const matchingFit = sizeFitRecommendation.fits.find((sizeFit) => sizeFit.size_id === size.id);
|
|
21823
|
+
if (matchingFit) {
|
|
21824
|
+
matchingFit.measurement_location_fits.forEach((measurementLocationFit) => {
|
|
21825
|
+
sizeMeasurementLocationFit.measurementLocationFits.push({
|
|
21826
|
+
...measurementLocationFit,
|
|
21827
|
+
isPerfectFit: this.perfectFits.includes(measurementLocationFit.fit)
|
|
21832
21828
|
});
|
|
21833
|
-
}
|
|
21834
|
-
return sizeMeasurementLocationFit;
|
|
21829
|
+
});
|
|
21835
21830
|
}
|
|
21836
|
-
|
|
21831
|
+
return sizeMeasurementLocationFit;
|
|
21832
|
+
}).sort((a, b) => (a.size_value?.id || 0) - (b.size_value?.id || 0));
|
|
21837
21833
|
this.sizeRecComponent.ShowLoggedIn();
|
|
21838
21834
|
this.sizeRecComponent.Show();
|
|
21839
21835
|
this.sizeRecComponent.SetRecommendedSize(sizeMeasurementLocationFits);
|