@thefittingroom/shop-ui 1.2.5 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -2
- package/dist/esm/index.js +96 -46
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.min.js +36 -36
- package/dist/esm/init.d.ts +2 -1
- package/dist/esm/styles/index.d.ts +1 -0
- package/dist/esm/tfr-size-rec.d.ts +22 -1
- package/dist/esm/tfr.d.ts +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,6 +22,35 @@ import { initFittingRoom } from '@thefittingroom/shop-ui'
|
|
|
22
22
|
// Your brandId: Number
|
|
23
23
|
const shopId: number = 9001
|
|
24
24
|
|
|
25
|
+
// CSS Variable
|
|
26
|
+
|
|
27
|
+
export type TfrCssVariables = {
|
|
28
|
+
// Colors
|
|
29
|
+
brandColor?: string
|
|
30
|
+
black?: string
|
|
31
|
+
red?: string
|
|
32
|
+
white?: string
|
|
33
|
+
muted?: string
|
|
34
|
+
dark?: string
|
|
35
|
+
|
|
36
|
+
// Main div stlyes
|
|
37
|
+
mainBorderColor?: string
|
|
38
|
+
mainBorderRadius?: string
|
|
39
|
+
mainBorderWidth?: string
|
|
40
|
+
mainBgColor?: string
|
|
41
|
+
mainWidth?: string
|
|
42
|
+
mainVPadding?: string
|
|
43
|
+
mainHPadding?: string
|
|
44
|
+
|
|
45
|
+
// Typography
|
|
46
|
+
// All others will inherit fron mainFont if not set
|
|
47
|
+
mainFont?: string
|
|
48
|
+
titleFont?: string
|
|
49
|
+
subtitleFont?: string
|
|
50
|
+
rowFont?: string
|
|
51
|
+
ctaFont?: string
|
|
52
|
+
}
|
|
53
|
+
|
|
25
54
|
// UI Hooks
|
|
26
55
|
// These are used to hook into the lifecycle methods within the shop UI
|
|
27
56
|
const hooks: TfrHooks = {
|
|
@@ -32,6 +61,8 @@ const hooks: TfrHooks = {
|
|
|
32
61
|
onLogout: () => {},
|
|
33
62
|
}
|
|
34
63
|
|
|
64
|
+
const cssVariables = {}
|
|
65
|
+
|
|
35
66
|
// the div id to contain the modal elements
|
|
36
67
|
const modalDivId: string = 'tfr-modal'
|
|
37
68
|
|
|
@@ -39,16 +70,49 @@ const modalDivId: string = 'tfr-modal'
|
|
|
39
70
|
const sizeRecDivId: string = 'tfr-size-rec'
|
|
40
71
|
|
|
41
72
|
// initFittingRoom is an async function and must be awaited
|
|
42
|
-
const tfr = await initFittingRoom(shopId, modalDivId, sizeRecDivId, hooks, 'prod')
|
|
73
|
+
const tfr = await initFittingRoom(shopId, modalDivId, sizeRecDivId, hooks, cssVariables, 'prod')
|
|
43
74
|
|
|
44
75
|
// on page nav to new product
|
|
45
76
|
tfr.setSku(sku)
|
|
46
77
|
|
|
47
|
-
// on user login to brand site
|
|
78
|
+
// on user login to brand site or after initFittingRoom
|
|
48
79
|
// e.g. uuid, email address, username, internal database Id
|
|
49
80
|
tfr.setBrandUserId(brandUserId)
|
|
50
81
|
```
|
|
51
82
|
|
|
83
|
+
### CSS variable defaults
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
:root {
|
|
87
|
+
/* Colors */
|
|
88
|
+
--tfr-brand-color: #209da7;
|
|
89
|
+
--tfr-black: #000000;
|
|
90
|
+
--tfr-red: #ff0000;
|
|
91
|
+
--tfr-white: #ffffff;
|
|
92
|
+
--tfr-muted: #a7a7a7;
|
|
93
|
+
|
|
94
|
+
--tfr-dark: #121212;
|
|
95
|
+
|
|
96
|
+
/* Main */
|
|
97
|
+
--tfr-main-border-color: rgba(18, 18, 18, 0.55);
|
|
98
|
+
--tfr-main-border-radius: 0;
|
|
99
|
+
--tfr-main-border-width: 1px;
|
|
100
|
+
--tfr-main-bg-color: inherit;
|
|
101
|
+
|
|
102
|
+
/* Spacing */
|
|
103
|
+
--tfr-main-width: 440px;
|
|
104
|
+
--tfr-main-v-padding: 14px;
|
|
105
|
+
--tfr-main-h-padding: 20px;
|
|
106
|
+
|
|
107
|
+
/* Typography */
|
|
108
|
+
--tfr-main-font: inherit;
|
|
109
|
+
--tfr-title-font: var(--tfr-main-font);
|
|
110
|
+
--tfr-subtitle-font: var(--tfr-main-font);
|
|
111
|
+
--tfr-row-font: var(--tfr-main-font);
|
|
112
|
+
--tfr-cta-font: var(--tfr-main-font);
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
52
116
|
Several low level methods are exposed via `tfr.shop`
|
|
53
117
|
|
|
54
118
|
See [@thefittingroom/sdk](https://github.com/TheFittingRoom/shop-sdk/tree/main)
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* thefittingroom v1.
|
|
2
|
+
* thefittingroom v1.3.0 (2024-06-25T18:03:17.572Z)
|
|
3
3
|
* Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
|
|
4
4
|
*/
|
|
5
5
|
function loadImageRecursive(imageURL, imageURLs) {
|
|
@@ -23534,31 +23534,34 @@ const validatePassword = (password) => {
|
|
|
23534
23534
|
|
|
23535
23535
|
var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
|
|
23536
23536
|
|
|
23537
|
-
var css$
|
|
23537
|
+
var css$9 = ".tfr-c-white{color:var(--tfr-white)}.tfr-c-brand{color:var(--tfr-brand-color)}.tfr-c-brand-bg{background-color:var(--tfr-brand-color)}.tfr-c-black{color:var(--tfr-black)}.tfr-c-black-o5{color:rgba(0,0,0,.5)}.tfr-c-red{color:var(--tfr-red)}";
|
|
23538
|
+
n(css$9,{});
|
|
23539
|
+
|
|
23540
|
+
var css$8 = ".tfr-home-button-container{display:flex;flex-wrap:wrap;margin:20px}.tfr-home-button-container>button{border:0;cursor:pointer;height:60px;margin:20px;width:200px}.tfr-home-button-container>button:hover{background-color:#e6e6e6}[data-tfr=hidden]{display:none}.tfr-modal{background-color:rgba(0,0,0,.53);display:flex;height:100%;left:0;position:fixed;top:0;width:100%;z-index:10000}.tfr-modal-content{margin:auto;text-align:center;width:90%}.tfr-modal-content-flex{align-items:center;display:flex}.tfr-modal-content-container{background-color:#fff;border:1px solid #434343;border-radius:0;box-shadow:0 6px 6px #00000029;line-height:normal;margin:auto;max-height:100vh;max-width:709px;overflow:auto;width:100%}.tfr-close-container{text-align:end}.tfr-close{color:#aaa;font-size:28px;font-weight:700;height:50px;width:50px}.tfr-close:focus,.tfr-close:hover{color:#000;text-decoration:none}.tfr-cursor:hover{cursor:pointer}.tfr-underline{text-decoration:underline}.tfr-standard-button{border:0;border-radius:3px;color:#fff;height:43px;width:138px}.tfr-logo-container{align-items:center;display:flex}.tfr-modal-title-logo-container{align-items:center;display:flex;justify-content:center}.tfr-girl-clothes{display:inline-block;height:316px;width:253px}.tfr-t-a-center{text-align:center}.tfr-w-70-p{width:70%}.tfr-w-80-p{width:80%}.tfr-w-85-p{width:85%}.tfr-w-150{width:150px}.tfr-h-150{height:150px}.tfr-d-none{display:none}.tfr-d-block{display:block}.tfr-d-flex{display:flex}.tfr-how-it-works-item{align-items:center;display:flex;justify-items:center}.tfr-try-on-content{margin-left:60px}#tfr-tryon-image{max-width:30vw}.progress-bar{background-color:#fff;border:1px solid #bdbdbd;height:10px;margin:15px auto 0;width:55%}.progress-bar-fill{animation-duration:120s;animation-name:progress;background-color:#209da7;color:#fff;display:block;font-size:16px;height:100%;text-align:center;transition:width .6s linear}#tfr-video{height:100%;max-height:390px;max-width:390px}.tfr-logo-box{aspect-ratio:1;margin:auto;max-height:430px;max-width:430px;padding:20px}.tfr-flex,.tfr-logo-box{align-items:center;display:flex;justify-content:center}";
|
|
23538
23541
|
n(css$8,{});
|
|
23539
23542
|
|
|
23540
|
-
var css$7 = "
|
|
23543
|
+
var css$7 = "input{border:none;box-shadow:none!important;width:100%}input:focus,select:focus,textarea:focus{border:none;outline:none}.tfr-fieldset{margin-left:auto;margin-right:auto;width:65%}.tfr-fieldset,.tfr-fieldset-inline{border-color:rgba(0,0,0,.5);border-radius:10px;border-width:1px;padding:5px 10px 10px;text-align:left}.tfr-fieldset-inline{margin-right:10px;width:250px}.tfr-fieldset-err{border-color:red}";
|
|
23541
23544
|
n(css$7,{});
|
|
23542
23545
|
|
|
23543
|
-
var css$6 = "
|
|
23546
|
+
var css$6 = ".lds-ellipsis{display:inline-block;height:80px;position:relative;width:80px}.lds-ellipsis div{animation-timing-function:cubic-bezier(0,1,1,0);background:var(--tfr-brand-color);border-radius:50%;display:block;height:13px;position:absolute;top:33px;width:13px}.lds-ellipsis div:first-child{animation:lds-ellipsis1 .6s infinite;left:8px}.lds-ellipsis div:nth-child(2){animation:lds-ellipsis2 .6s infinite;left:8px}.lds-ellipsis div:nth-child(3){animation:lds-ellipsis2 .6s infinite;left:32px}.lds-ellipsis div:nth-child(4){animation:lds-ellipsis3 .6s infinite;left:56px}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}";
|
|
23544
23547
|
n(css$6,{});
|
|
23545
23548
|
|
|
23546
|
-
var css$5 = ".
|
|
23549
|
+
var css$5 = "@media screen and (max-width:702px){.tfr-modal-title-logo-container{display:flex;flex-direction:column}}@media screen and (min-width:600px){.tfr-modal-content-container{border-radius:10px;height:auto}}@media screen and (max-width:599px){.tfr-mobile-hidden{display:none}.tfr-modal-content-container{min-height:100vh}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{height:calc(100vh - 76px)}}@media screen and (max-width:500px){.tfr-fieldset{width:90%}.tfr-how-it-works-item{flex-direction:column}.tfr-try-on-content{margin-left:0;margin-top:20px}}";
|
|
23547
23550
|
n(css$5,{});
|
|
23548
23551
|
|
|
23549
|
-
var css$4 = "
|
|
23552
|
+
var css$4 = "#tfr-size-recommendations{background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;font-family:var(--tfr-main-font);padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-subtitle{font-family:var(--tfr-subtitle-font);margin-bottom:6px}#tfr-size-rec-subtitle,#tfr-size-rec-title{font-size:16px;font-weight:700}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:2px}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);height:40px;justify-content:center}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{font-weight:700;margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{margin-left:16px}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;margin-top:14px;text-decoration:underline}#tfr-size-rec-select{background-color:#878787;border-radius:8px;box-shadow:0 4px 4px 0 rgba(0,0,0,.3);color:var(--tfr-white);display:none;font-size:14px;margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:35px;justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active){background-color:hsla(0,0%,100%,.3);opacity:.7}.tfr-size-rec-select-button.active{background-color:#212121;height:45px}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:8px;border-top-left-radius:8px}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:8px;border-top-right-radius:8px}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img{height:24px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}";
|
|
23550
23553
|
n(css$4,{});
|
|
23551
23554
|
|
|
23552
|
-
var css$3 = "
|
|
23555
|
+
var css$3 = ".tfr-mt-10{margin-top:10px}.tfr-mt-20{margin-top:20px}.tfr-mt-15{margin-top:15px}.tfr-mt-30{margin-top:30px}.mt-40{margin-top:40px}.tfr-mb-40{margin-bottom:40px}.tfr-mb-20{margin-bottom:20px}.tfr-mr-10{margin-right:10px}.tfr-mr-15{margin-right:15px}.tfr-mt-50{margin-top:50px}.tfr-mt-60{margin-top:60px}.tfr-mb-60{margin-bottom:60px}.tfr-mr-20{margin-right:20px}.tfr-mt-15-p{margin-top:15%}.tfr-mb-13-p{margin-bottom:13%}.tfr-m-h-auto{margin-left:auto;margin-right:auto}.tfr-pt-20{padding-top:20px}.tfr-pb-50{padding-bottom:50px}.tfr-p-20{padding:20px}.tfr-pr-20{padding-right:20px}.tfr-pl-20{padding-left:20px}.tfr-pb-7-p{padding-bottom:7%}";
|
|
23553
23556
|
n(css$3,{});
|
|
23554
23557
|
|
|
23555
|
-
var css$2 = ".
|
|
23558
|
+
var css$2 = ".flag-container{bottom:0;left:0;padding:1px;right:0;right:auto;top:0}.flag-container:hover{cursor:pointer}.selected-flag{align-items:center;display:flex;height:100%;padding:0 6px 0 8px;position:relative;z-index:1}.flag.bd{background-position:-418px 0;height:12px}.arrow{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #555;height:0;margin-left:6px;width:0}.arrow-up{border-bottom:6px solid #555;border-top:none}.country-list{-webkit-overflow-scrolling:touch;background-color:#fff;border-radius:5px;box-shadow:0 8px 10px 1px rgba(57,64,78,.7),0 3px 14px 2px rgba(57,64,78,.7),0 5px 5px -3px rgba(57,64,78,.7);cursor:pointer;display:none;font-size:16px;line-height:18px;list-style:none;margin:0 0 0 -1px;max-height:500px;overflow:auto;padding:0;position:absolute;text-align:left;top:50%;transform:translateY(-50%);white-space:nowrap;width:100%;width:auto;z-index:2}.country-list.active{display:inline-block}.country{outline:0;padding:5px 26px 5px 15px}.country-list .divider{border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:5px;padding-bottom:5px}.country.highlight{background-color:#c7cace}.flag-box{display:inline-block;width:20px}.country-name,.flag-box{margin-right:6px}.country-name,.dial-code,.flag-box{vertical-align:middle}";
|
|
23556
23559
|
n(css$2,{});
|
|
23557
23560
|
|
|
23558
|
-
var css$1 = ".
|
|
23561
|
+
var css$1 = ".tfr-title-font{font-family:Poppins,sans-serif}.tfr-body-font{font-family:Roboto,sans-serif}.tfr-light-24-300{font-size:24px;font-weight:300}.tfr-light-24-500{font-size:24px;font-weight:500}.tfr-light-22-300{font-size:22px;font-weight:300}.tfr-light-16-300{font-size:16px;font-weight:300}.tfr-medium-16-default{font-size:16px}.tfr-12-default{font-size:12px}.tfr-14-default{font-size:14px}.tfr-16-default{font-size:16px}";
|
|
23559
23562
|
n(css$1,{});
|
|
23560
23563
|
|
|
23561
|
-
var css = "
|
|
23564
|
+
var css = ":root{--tfr-brand-color:#209da7;--tfr-black:#000;--tfr-red:red;--tfr-white:#fff;--tfr-muted:#a7a7a7;--tfr-dark:#121212;--tfr-main-border-color:hsla(0,0%,7%,.55);--tfr-main-border-radius:0;--tfr-main-border-width:1px;--tfr-main-bg-color:inherit;--tfr-main-width:440px;--tfr-main-v-padding:14px;--tfr-main-h-padding:20px;--tfr-main-font:inherit;--tfr-title-font:var(--tfr-main-font);--tfr-subtitle-font:var(--tfr-main-font);--tfr-row-font:var(--tfr-main-font);--tfr-cta-font:var(--tfr-main-font)}";
|
|
23562
23565
|
n(css,{});
|
|
23563
23566
|
|
|
23564
23567
|
const ErrorModal = (props) => {
|
|
@@ -23583,12 +23586,12 @@ const ErrorModal = (props) => {
|
|
|
23583
23586
|
}
|
|
23584
23587
|
return `
|
|
23585
23588
|
<div class="tfr-mt-15-p tfr-mb-13-p">
|
|
23586
|
-
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-
|
|
23589
|
+
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-black">${error || L.SomethingWentWrong}</div>
|
|
23587
23590
|
</div>
|
|
23588
23591
|
|
|
23589
23592
|
<div class="tfr-t-a-center">
|
|
23590
|
-
<span id="tfr-back" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-
|
|
23591
|
-
<span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-
|
|
23593
|
+
<span id="tfr-back" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-20">${L.ReturnToCatalogPage }</span>
|
|
23594
|
+
<span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor" id="returnToSite">${L.ReturnToProductPage }</span>
|
|
23592
23595
|
</div>
|
|
23593
23596
|
`;
|
|
23594
23597
|
};
|
|
@@ -23620,12 +23623,12 @@ const ForgotPasswordModal = (props) => {
|
|
|
23620
23623
|
return `
|
|
23621
23624
|
<div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-20 tfr-w-70-p tfr-m-h-auto">${L.EnterEmailAddress}</div>
|
|
23622
23625
|
<fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-30">
|
|
23623
|
-
<legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-
|
|
23626
|
+
<legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-black-o5">${L.EmailAddress}</legend>
|
|
23624
23627
|
<input tfr-element="true" type="email" id="tfr-email" />
|
|
23625
23628
|
</fieldset>
|
|
23626
23629
|
<div tfr-element="true" class="tfr-body-font tfr-12-default tfr-c-red tfr-mt-10 tfr-d-none" id="error-msg"></div>
|
|
23627
|
-
<div id="tfr-back-to-signin" tfr-element="true" class="tfr-body-font tfr-12-default tfr-c-
|
|
23628
|
-
<button id="tfr-send-password-reset" tfr-element="true" class="tfr-standard-button tfr-
|
|
23630
|
+
<div id="tfr-back-to-signin" tfr-element="true" class="tfr-body-font tfr-12-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mt-30">${L.BackToSignIn}</div>
|
|
23631
|
+
<button id="tfr-send-password-reset" tfr-element="true" class="tfr-standard-button tfr-c-brand-bg tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30">
|
|
23629
23632
|
${L.Send}
|
|
23630
23633
|
</button>
|
|
23631
23634
|
`;
|
|
@@ -23659,7 +23662,7 @@ const LoadingAvatarModal = (props) => {
|
|
|
23659
23662
|
const Unhook = () => void 0;
|
|
23660
23663
|
const Body = () => {
|
|
23661
23664
|
return `
|
|
23662
|
-
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-
|
|
23665
|
+
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-black tfr-mt-60" > ${L.LoadingAvatar} </div>
|
|
23663
23666
|
<div class="progress-bar">
|
|
23664
23667
|
<span class="progress-bar-fill"></span>
|
|
23665
23668
|
</div>
|
|
@@ -23691,8 +23694,8 @@ const LoggedOutModal = (props) => {
|
|
|
23691
23694
|
return `
|
|
23692
23695
|
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-mt-15-p tfr-mb-13-p">${L.SuccessfullyLoggedOut}</div>
|
|
23693
23696
|
<div class="tfr-t-a-center">
|
|
23694
|
-
<span id="tfr-sign-in" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-
|
|
23695
|
-
<span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-
|
|
23697
|
+
<span id="tfr-sign-in" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-20">${L.SignBackIn}</span>
|
|
23698
|
+
<span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor" >${L.ReturnToSite}</span>
|
|
23696
23699
|
</div>
|
|
23697
23700
|
`;
|
|
23698
23701
|
};
|
|
@@ -23720,7 +23723,7 @@ const InitModalManager = (elementID) => {
|
|
|
23720
23723
|
<div class="tfr-modal-content-flex">
|
|
23721
23724
|
<div class="tfr-modal-content tfr-pt-20 tfr-pb-50">
|
|
23722
23725
|
<div class="tfr-modal-title-logo-container">
|
|
23723
|
-
<div tfr-element="true" class="trf-logo-title tfr-title-font tfr-light-24-300 tfr-c-
|
|
23726
|
+
<div tfr-element="true" class="trf-logo-title tfr-title-font tfr-light-24-300 tfr-c-black tfr-mr-10">${L.ModalTagline}</div>
|
|
23724
23727
|
<div tfr-element="true" class="tfr-logo-container">
|
|
23725
23728
|
<div class="tfr-mr-15">
|
|
23726
23729
|
<svg width="26" height="47" viewBox="0 0 68 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -23730,7 +23733,7 @@ const InitModalManager = (elementID) => {
|
|
|
23730
23733
|
</path>
|
|
23731
23734
|
</svg>
|
|
23732
23735
|
</div>
|
|
23733
|
-
<div tfr-element="true" class="tfr-title-font tfr-light-24-500 tfr-c-
|
|
23736
|
+
<div tfr-element="true" class="tfr-title-font tfr-light-24-500 tfr-c-black tfr-mr-10">${L.TheFittingRoom}</div>
|
|
23734
23737
|
</div>
|
|
23735
23738
|
</div>
|
|
23736
23739
|
${modalBody}
|
|
@@ -23802,8 +23805,8 @@ const NoAvatarModal = () => {
|
|
|
23802
23805
|
const Unhook = () => void 0;
|
|
23803
23806
|
const Body = () => {
|
|
23804
23807
|
return `
|
|
23805
|
-
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-
|
|
23806
|
-
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-
|
|
23808
|
+
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-black tfr-mt-60">${L.DontHaveAvatar}</div>
|
|
23809
|
+
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-black tfr-mb-60">${L.ReturnToTfr}</div>
|
|
23807
23810
|
`;
|
|
23808
23811
|
};
|
|
23809
23812
|
return {
|
|
@@ -36210,17 +36213,17 @@ const ScanCodeModal = (props) => {
|
|
|
36210
36213
|
|
|
36211
36214
|
<div tfr-element="true" class="tfr-flex">
|
|
36212
36215
|
<fieldset class="tfr-fieldset-element tfr-fieldset-inline tfr-mt-20">
|
|
36213
|
-
<legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-
|
|
36216
|
+
<legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-black-o5">${L.PhoneNumber}</legend>
|
|
36214
36217
|
<div tfr-element="true" class="tfr-flex">
|
|
36215
36218
|
<input tfr-element="true" type="tel" id="tel-input" />
|
|
36216
36219
|
</div>
|
|
36217
36220
|
</fieldset>
|
|
36218
|
-
<button tfr-element="true" class="tfr-standard-button tfr-
|
|
36221
|
+
<button tfr-element="true" class="tfr-standard-button tfr-c-brand-bg tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30" id="tel-button">
|
|
36219
36222
|
${L.Send}
|
|
36220
36223
|
</button>
|
|
36221
36224
|
</div>
|
|
36222
36225
|
|
|
36223
|
-
<div id="tfr-sign-in-nav" tfr-element="true" class="tfr-body-font tfr-mt-20 tfr-16-default tfr-c-
|
|
36226
|
+
<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.HaveAcc}</div>
|
|
36224
36227
|
`;
|
|
36225
36228
|
};
|
|
36226
36229
|
return {
|
|
@@ -36290,23 +36293,23 @@ const SignInModal = (props) => {
|
|
|
36290
36293
|
<div class="tfr-title-font tfr-light-22-300 tfr-mt-10">${L.SignIn}</div>
|
|
36291
36294
|
|
|
36292
36295
|
<fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
|
|
36293
|
-
<legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-
|
|
36296
|
+
<legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-black-o5">${L.EmailAddress}</legend>
|
|
36294
36297
|
<input tfr-element="true" type="email" id="email-input" value="${email || ''}" />
|
|
36295
36298
|
</fieldset>
|
|
36296
36299
|
|
|
36297
36300
|
<fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
|
|
36298
|
-
<legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-
|
|
36301
|
+
<legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-black-o5">${L.Password}</legend>
|
|
36299
36302
|
<input tfr-element="true" type="password" id="password-input" />
|
|
36300
36303
|
</fieldset>
|
|
36301
36304
|
|
|
36302
36305
|
<div tfr-element="true" class="tfr-body-font tfr-12-default tfr-c-red tfr-mt-10 tfr-d-none" id="tfr-form-error"></div>
|
|
36303
36306
|
|
|
36304
36307
|
<div class="tfr-mt-20">
|
|
36305
|
-
<span id="tfr-forgot-password" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-
|
|
36306
|
-
<span id="tfr-scan-code" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-
|
|
36308
|
+
<span id="tfr-forgot-password" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-15">${L.ForgotPasswordWithSymbol}</span>
|
|
36309
|
+
<span id="tfr-scan-code" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-black-o5 tfr-underline tfr-cursor">${L.DontHaveAcc}</span>
|
|
36307
36310
|
</div>
|
|
36308
36311
|
|
|
36309
|
-
<button id="tfr-sign-in" tfr-element="true" class="tfr-standard-button tfr-
|
|
36312
|
+
<button id="tfr-sign-in" tfr-element="true" class="tfr-standard-button tfr-c-brand-bg tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30" id="sign-in-button" type="submit">
|
|
36310
36313
|
${L.SignIn}
|
|
36311
36314
|
</button>
|
|
36312
36315
|
</form>
|
|
@@ -36339,14 +36342,14 @@ const SizeErrorModal = (props) => {
|
|
|
36339
36342
|
console.debug('rendering size error modal', props);
|
|
36340
36343
|
return `
|
|
36341
36344
|
<div class="tfr-mt-15-p tfr-mb-13-p">
|
|
36342
|
-
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-
|
|
36345
|
+
<div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-black">
|
|
36343
36346
|
${L.NoSizeAvailable} ${(_a = props.sizes) === null || _a === void 0 ? void 0 : _a.recommended} ${L.OrSize} ${(_c = (_b = props.sizes) === null || _b === void 0 ? void 0 : _b.available) === null || _c === void 0 ? void 0 : _c.join(' or ')}
|
|
36344
36347
|
</div>
|
|
36345
36348
|
</div>
|
|
36346
36349
|
|
|
36347
36350
|
<div class="tfr-t-a-center">
|
|
36348
|
-
<span id="tfr-back" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-
|
|
36349
|
-
<span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-
|
|
36351
|
+
<span id="tfr-back" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-20">${L.ReturnToCatalogPage }</span>
|
|
36352
|
+
<span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor">${L.ReturnToProductPage }</span>
|
|
36350
36353
|
</div>
|
|
36351
36354
|
`;
|
|
36352
36355
|
};
|
|
@@ -36395,8 +36398,8 @@ const TryOnModal = (props) => {
|
|
|
36395
36398
|
<input type="range" id="tfr-slider" />
|
|
36396
36399
|
</div>
|
|
36397
36400
|
<div class="tfr-t-a-center">
|
|
36398
|
-
<span id="tfr-back" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-
|
|
36399
|
-
<span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-
|
|
36401
|
+
<span id="tfr-back" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor tfr-mr-20">${L.ReturnToCatalogPage }</span>
|
|
36402
|
+
<span id="tfr-close" tfr-element="true" class="tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor" id="returnToSite">${L.ReturnToProductPage }</span>
|
|
36400
36403
|
</div>
|
|
36401
36404
|
`;
|
|
36402
36405
|
};
|
|
@@ -36607,7 +36610,7 @@ class SizeRecComponent {
|
|
|
36607
36610
|
</div>`;
|
|
36608
36611
|
}
|
|
36609
36612
|
renderLoginCta() {
|
|
36610
|
-
return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" /> Login to view</div>`;
|
|
36613
|
+
return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" /> Login/Sign In to view</div>`;
|
|
36611
36614
|
}
|
|
36612
36615
|
renderGarmentLocations(locations) {
|
|
36613
36616
|
const html = locations
|
|
@@ -36633,7 +36636,7 @@ class SizeRecComponent {
|
|
|
36633
36636
|
Recommended Size:
|
|
36634
36637
|
<div id="tfr-size-rec-size">
|
|
36635
36638
|
<div class="tfr-size-rec-login-cta">
|
|
36636
|
-
<img src="${loginIconSrc}" /> Login to view
|
|
36639
|
+
<img src="${loginIconSrc}" /> Login/Sign In to view
|
|
36637
36640
|
</div>
|
|
36638
36641
|
</div>
|
|
36639
36642
|
</div>
|
|
@@ -36662,11 +36665,12 @@ class SizeRecComponent {
|
|
|
36662
36665
|
}
|
|
36663
36666
|
|
|
36664
36667
|
class TfrSizeRec {
|
|
36665
|
-
constructor(sizeRecMainDivId, tfrShop, onSignInClick, onSignOutClick) {
|
|
36668
|
+
constructor(sizeRecMainDivId, cssVariables, tfrShop, onSignInClick, onSignOutClick) {
|
|
36666
36669
|
this.tfrShop = tfrShop;
|
|
36667
36670
|
this.onSignInClick = onSignInClick;
|
|
36668
36671
|
this.onSignOutClick = onSignOutClick;
|
|
36669
36672
|
this.perfectFits = [index.Fit.PERFECT_FIT, index.Fit.SLIGHTLY_LOOSE, index.Fit.SLIGHTLY_TIGHT];
|
|
36673
|
+
this.setCssVariables(cssVariables);
|
|
36670
36674
|
this.sizeRecComponent = new SizeRecComponent(sizeRecMainDivId, this.onSignInClick, this.onSignOutClick);
|
|
36671
36675
|
}
|
|
36672
36676
|
get sku() {
|
|
@@ -36747,6 +36751,45 @@ class TfrSizeRec {
|
|
|
36747
36751
|
}),
|
|
36748
36752
|
};
|
|
36749
36753
|
}
|
|
36754
|
+
setCssVariables(cssVariables) {
|
|
36755
|
+
const r = document.querySelector(':root');
|
|
36756
|
+
if (cssVariables.brandColor)
|
|
36757
|
+
r.style.setProperty('--tfr-brand-color', cssVariables.brandColor);
|
|
36758
|
+
if (cssVariables.black)
|
|
36759
|
+
r.style.setProperty('--tfr-black', cssVariables.black);
|
|
36760
|
+
if (cssVariables.red)
|
|
36761
|
+
r.style.setProperty('--tfr-red', cssVariables.red);
|
|
36762
|
+
if (cssVariables.white)
|
|
36763
|
+
r.style.setProperty('--tfr-white', cssVariables.white);
|
|
36764
|
+
if (cssVariables.muted)
|
|
36765
|
+
r.style.setProperty('--tfr-muted', cssVariables.muted);
|
|
36766
|
+
if (cssVariables.dark)
|
|
36767
|
+
r.style.setProperty('--tfr-dark', cssVariables.dark);
|
|
36768
|
+
if (cssVariables.mainBorderColor)
|
|
36769
|
+
r.style.setProperty('--tfr-main-border-color', cssVariables.mainBorderColor);
|
|
36770
|
+
if (cssVariables.mainBorderRadius)
|
|
36771
|
+
r.style.setProperty('--tfr-main-border-radius', cssVariables.mainBorderRadius);
|
|
36772
|
+
if (cssVariables.mainBorderWidth)
|
|
36773
|
+
r.style.setProperty('--tfr-main-border-width', cssVariables.mainBorderWidth);
|
|
36774
|
+
if (cssVariables.mainBgColor)
|
|
36775
|
+
r.style.setProperty('--tfr-main-bg-color', cssVariables.mainBgColor);
|
|
36776
|
+
if (cssVariables.mainWidth)
|
|
36777
|
+
r.style.setProperty('--tfr-main-width', cssVariables.mainWidth);
|
|
36778
|
+
if (cssVariables.mainVPadding)
|
|
36779
|
+
r.style.setProperty('--tfr-main-v-padding', cssVariables.mainVPadding);
|
|
36780
|
+
if (cssVariables.mainHPadding)
|
|
36781
|
+
r.style.setProperty('--tfr-main-h-padding', cssVariables.mainHPadding);
|
|
36782
|
+
if (cssVariables.mainFont)
|
|
36783
|
+
r.style.setProperty('--tfr-main-font', cssVariables.mainFont);
|
|
36784
|
+
if (cssVariables.titleFont)
|
|
36785
|
+
r.style.setProperty('--tfr-title-font', cssVariables.titleFont);
|
|
36786
|
+
if (cssVariables.subtitleFont)
|
|
36787
|
+
r.style.setProperty('--tfr-subtitle-font', cssVariables.subtitleFont);
|
|
36788
|
+
if (cssVariables.rowFont)
|
|
36789
|
+
r.style.setProperty('--tfr-row-font', cssVariables.rowFont);
|
|
36790
|
+
if (cssVariables.ctaFont)
|
|
36791
|
+
r.style.setProperty('--tfr-cta-font', cssVariables.ctaFont);
|
|
36792
|
+
}
|
|
36750
36793
|
}
|
|
36751
36794
|
|
|
36752
36795
|
var AvatarState;
|
|
@@ -36757,7 +36800,7 @@ var AvatarState;
|
|
|
36757
36800
|
})(AvatarState || (AvatarState = {}));
|
|
36758
36801
|
|
|
36759
36802
|
class FittingRoom {
|
|
36760
|
-
constructor(shopId, modalDivId, sizeRecMainDivId, hooks = {}, _env) {
|
|
36803
|
+
constructor(shopId, modalDivId, sizeRecMainDivId, hooks = {}, cssVariables, _env) {
|
|
36761
36804
|
this.shopId = shopId;
|
|
36762
36805
|
this.hooks = hooks;
|
|
36763
36806
|
this.isLoggedIn = false;
|
|
@@ -36770,7 +36813,7 @@ class FittingRoom {
|
|
|
36770
36813
|
: 'dev';
|
|
36771
36814
|
this.tfrModal = new TfrModal(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
|
|
36772
36815
|
this.tfrShop = initShop(Number(this.shopId), env);
|
|
36773
|
-
this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this));
|
|
36816
|
+
this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this));
|
|
36774
36817
|
}
|
|
36775
36818
|
get shop() {
|
|
36776
36819
|
return this.tfrShop;
|
|
@@ -36778,9 +36821,16 @@ class FittingRoom {
|
|
|
36778
36821
|
get sku() {
|
|
36779
36822
|
return this.tfrSizeRec.sku;
|
|
36780
36823
|
}
|
|
36781
|
-
async checkIfPublished(
|
|
36782
|
-
|
|
36783
|
-
|
|
36824
|
+
async checkIfPublished(brandStyleIdOrSku) {
|
|
36825
|
+
try {
|
|
36826
|
+
const colorwaySizeAsset = await this.tfrShop.getColorwaySizeAssetFromSku(brandStyleIdOrSku);
|
|
36827
|
+
const style = await this.tfrShop.getStyle(colorwaySizeAsset.style_id);
|
|
36828
|
+
return Boolean(style === null || style === void 0 ? void 0 : style.is_published);
|
|
36829
|
+
}
|
|
36830
|
+
catch (_a) {
|
|
36831
|
+
const style = await this.tfrShop.getStyleByBrandStyleId(brandStyleIdOrSku);
|
|
36832
|
+
return Boolean(style === null || style === void 0 ? void 0 : style.is_published);
|
|
36833
|
+
}
|
|
36784
36834
|
}
|
|
36785
36835
|
setSku(sku) {
|
|
36786
36836
|
this.tfrSizeRec.setSku(sku);
|
|
@@ -36902,8 +36952,8 @@ class FittingRoom {
|
|
|
36902
36952
|
}
|
|
36903
36953
|
}
|
|
36904
36954
|
|
|
36905
|
-
const initFittingRoom = async (shopId, modalDivId, sizeRecMainDivId, hooks, env = 'dev') => {
|
|
36906
|
-
const tfr = new FittingRoom(shopId, modalDivId, sizeRecMainDivId, hooks, env);
|
|
36955
|
+
const initFittingRoom = async (shopId, modalDivId, sizeRecMainDivId, hooks = {}, cssVariables = {}, env = 'dev') => {
|
|
36956
|
+
const tfr = new FittingRoom(shopId, modalDivId, sizeRecMainDivId, hooks, cssVariables, env);
|
|
36907
36957
|
await tfr.onInit();
|
|
36908
36958
|
return tfr;
|
|
36909
36959
|
};
|