@thefittingroom/shop-ui 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +6 -8
  2. package/dist/esm/index.js +36 -24
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/esm/index.min.js +53 -53
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -23,10 +23,10 @@ import { initFittingRoom } from '@thefittingroom/shop-ui'
23
23
  const shopId: number = 9001
24
24
 
25
25
  // UI Hooks
26
+ // These are used to hook into the lifecycle methods within the shop UI
26
27
  const hooks: TfrHooks = {
27
28
  onLoading: () => {},
28
29
  onLoadingComplete: () => {},
29
- onVtoReady: (frames: string[]) => {},
30
30
  onError: (error: string) => {},
31
31
  onLogin: () => {},
32
32
  onLogout: () => {},
@@ -35,20 +35,18 @@ const hooks: TfrHooks = {
35
35
  // the div id to contain the modal elements
36
36
  const modalDivId: string = 'tfr-modal'
37
37
 
38
+ // The div id to contain the size recommendation UI
39
+ const sizeRecDivId: string = 'tfr-size-rec'
40
+
38
41
  // initFittingRoom is an async function and must be awaited
39
- const tfr = await initFittingRoom(shopId, modalDivId, hooks)
42
+ const tfr = await initFittingRoom(shopId, modalDivId, sizeRecDivId, hooks, 'prod')
40
43
 
41
44
  // on page nav to new product
42
- // * Required for VTO
43
45
  tfr.setSku(sku)
44
46
 
45
47
  // on user login to brand site
46
- // * Required for VTO
47
48
  // e.g. uuid, email address, username, internal database Id
48
- tft.setBrandUserId(brandUserId)
49
-
50
- // close the modal
51
- tfr.close()
49
+ tfr.setBrandUserId(brandUserId)
52
50
  ```
53
51
 
54
52
  Several low level methods are exposed via `tfr.shop`
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * thefittingroom v1.1.2 (2024-02-27T19:30:19.045Z)
2
+ * thefittingroom v1.1.4 (2024-04-05T18:35:47.301Z)
3
3
  * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
4
4
  */
5
5
  function loadImageRecursive(imageURL, imageURLs) {
@@ -23494,7 +23494,7 @@ n(css$5,{});
23494
23494
  var css$4 = "@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}}";
23495
23495
  n(css$4,{});
23496
23496
 
23497
- var css$3 = "#tfr-size-recommendations{border:1px solid hsla(0,0%,7%,.55);color:#121212;display:flex;padding:14px 20px;width:440px}#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;margin-bottom:8px}#tfr-size-rec-subtitle{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:1px solid hsla(0,0%,7%,.55);display:flex;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:#209da7}#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:#a7a7a7;display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none}#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:#fff;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}";
23497
+ var css$3 = "#tfr-size-recommendations{border:1px solid hsla(0,0%,7%,.55);color:#121212;display:flex;padding:14px 20px;width:440px}#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;margin-bottom:8px}#tfr-size-rec-subtitle{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:1px solid hsla(0,0%,7%,.55);display:flex;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:#209da7}#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:#a7a7a7;display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none}#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:#fff;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}";
23498
23498
  n(css$3,{});
23499
23499
 
23500
23500
  var css$2 = ".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%}";
@@ -36146,7 +36146,7 @@ const ScanCodeModal = (props) => {
36146
36146
  <div tfr-element="true" class="tfr-title-font tfr-light-16-300 tfr-mt-10">${L.ModalText}</div>
36147
36147
  </div>
36148
36148
  <div tfr-element="true" class="tfr-logo-box">
36149
- <video id="tfr-video" controls>
36149
+ <video id="tfr-video" controls autoplay loop>
36150
36150
  <source src="https://assets.dev.thefittingroom.xyz/videos/the-fitting-room.mp4" />
36151
36151
  </video>
36152
36152
  </div>
@@ -36177,7 +36177,8 @@ const ScanCodeModal = (props) => {
36177
36177
 
36178
36178
  const SignInModal = (props) => {
36179
36179
  const { email } = props;
36180
- const onSignIn = () => {
36180
+ const onSignIn = (e) => {
36181
+ e.preventDefault();
36181
36182
  const email = document.getElementById('email-input').value;
36182
36183
  const password = document.getElementById('password-input').value;
36183
36184
  resetValidation();
@@ -36191,11 +36192,13 @@ const SignInModal = (props) => {
36191
36192
  props.onNavScanCode();
36192
36193
  };
36193
36194
  const onHook = () => {
36195
+ document.getElementById('tfr-sign-in-form').addEventListener('submit', onSignIn);
36194
36196
  document.getElementById('tfr-sign-in').addEventListener('click', onSignIn);
36195
36197
  document.getElementById('tfr-forgot-password').addEventListener('click', onNavForgotPassword);
36196
36198
  document.getElementById('tfr-scan-code').addEventListener('click', onNavScanCode);
36197
36199
  };
36198
36200
  const onUnhook = () => {
36201
+ document.getElementById('tfr-sign-in-form').removeEventListener('submit', onSignIn);
36199
36202
  document.getElementById('tfr-sign-in').removeEventListener('click', onSignIn);
36200
36203
  document.getElementById('tfr-forgot-password').removeEventListener('click', onNavForgotPassword);
36201
36204
  document.getElementById('tfr-scan-code').removeEventListener('click', onNavScanCode);
@@ -36228,28 +36231,30 @@ const SignInModal = (props) => {
36228
36231
  };
36229
36232
  const body = () => {
36230
36233
  return `
36231
- <div class="tfr-title-font tfr-light-22-300 tfr-mt-10">${L.SignIn}</div>
36234
+ <form id="tfr-sign-in-form">
36235
+ <div class="tfr-title-font tfr-light-22-300 tfr-mt-10">${L.SignIn}</div>
36232
36236
 
36233
- <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
36234
- <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-dark-o5">${L.EmailAddress}</legend>
36235
- <input tfr-element="true" type="email" id="email-input" value="${email || ''}" />
36236
- </fieldset>
36237
+ <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
36238
+ <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-dark-o5">${L.EmailAddress}</legend>
36239
+ <input tfr-element="true" type="email" id="email-input" value="${email || ''}" />
36240
+ </fieldset>
36237
36241
 
36238
- <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
36239
- <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-dark-o5">${L.Password}</legend>
36240
- <input tfr-element="true" type="password" id="password-input" />
36241
- </fieldset>
36242
+ <fieldset class="tfr-fieldset-element tfr-fieldset tfr-mt-20">
36243
+ <legend tfr-element="true" class="tfr-label-element tfr-body-font tfr-14-default tfr-c-dark-o5">${L.Password}</legend>
36244
+ <input tfr-element="true" type="password" id="password-input" />
36245
+ </fieldset>
36242
36246
 
36243
- <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>
36247
+ <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>
36244
36248
 
36245
- <div class="tfr-mt-20">
36246
- <span id="tfr-forgot-password" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-dark-o5 tfr-underline tfr-cursor tfr-mr-15">${L.ForgotPasswordWithSymbol}</span>
36247
- <span id="tfr-scan-code" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-dark-o5 tfr-underline tfr-cursor">${L.DontHaveAcc}</span>
36248
- </div>
36249
+ <div class="tfr-mt-20">
36250
+ <span id="tfr-forgot-password" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-dark-o5 tfr-underline tfr-cursor tfr-mr-15">${L.ForgotPasswordWithSymbol}</span>
36251
+ <span id="tfr-scan-code" tfr-element="true" class="tfr-body-font tfr-14-default tfr-c-dark-o5 tfr-underline tfr-cursor">${L.DontHaveAcc}</span>
36252
+ </div>
36249
36253
 
36250
- <button id="tfr-sign-in" tfr-element="true" class="tfr-standard-button tfr-bg-aquamarina-strong tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30" id="sign-in-button">
36251
- ${L.SignIn}
36252
- </button>
36254
+ <button id="tfr-sign-in" tfr-element="true" class="tfr-standard-button tfr-bg-aquamarina-strong tfr-c-whitetfr-title-font tfr-medium-16-default tfr-cursor tfr-mt-30" id="sign-in-button" type="submit">
36255
+ ${L.SignIn}
36256
+ </button>
36257
+ </form>
36253
36258
  `;
36254
36259
  };
36255
36260
  return {
@@ -36417,7 +36422,8 @@ class TfrModal {
36417
36422
  }
36418
36423
  }
36419
36424
 
36420
- const svgSrc = 'https://assets.dev.thefittingroom.xyz/shop-sdk/assets/login-icon.svg';
36425
+ const loginIconSrc = 'https://assets.dev.thefittingroom.xyz/shop-sdk/assets/login-icon.svg';
36426
+ const doorLogoSrc = 'https://assets.dev.thefittingroom.xyz/shop-sdk/assets/tfr-door-brand.svg';
36421
36427
  class SizeRecComponent {
36422
36428
  constructor(sizeRecMainDivId, tfrShop, onSignInClick, onSignOutClick) {
36423
36429
  this.tfrShop = tfrShop;
@@ -36531,7 +36537,7 @@ class SizeRecComponent {
36531
36537
  </div>`;
36532
36538
  }
36533
36539
  renderLoginCta() {
36534
- return `<div class="tfr-size-rec-login-cta"><img src="${svgSrc}" /> Login to view</div>`;
36540
+ return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" /> Login to view</div>`;
36535
36541
  }
36536
36542
  renderGarmentLocations(locations) {
36537
36543
  const html = locations
@@ -36554,7 +36560,7 @@ class SizeRecComponent {
36554
36560
  <div id="tfr-size-recommendations-container">
36555
36561
  <img id="tfr-size-rec-login-svg" src="{{ 'login-icon.svg' | asset_url }}" />
36556
36562
  <div id="tfr-size-rec-title">
36557
- Recommend Size:
36563
+ Recommended Size:
36558
36564
  <div id="tfr-size-rec-size">
36559
36565
  <div class="tfr-size-rec-login-cta">
36560
36566
  <img src="{{ 'login-icon.svg' | asset_url }}" /> Login to view
@@ -36572,6 +36578,12 @@ class SizeRecComponent {
36572
36578
  <div id="tfr-size-rec-action-login">Login to see your recommended size</div>
36573
36579
  <div id="tfr-size-rec-action-logout">Sign out of the Fitting Room</div>
36574
36580
  </div>
36581
+
36582
+ <div class="tfr-powered-by">
36583
+ <div>Powered by</div>
36584
+ <div class="tfr-powered-by-logo"><img src="${doorLogoSrc}" /></div>
36585
+ <div class="tfr-powered-by-text-bold">The Fitting Room</div>
36586
+ </div>
36575
36587
  </div>
36576
36588
  </div>`;
36577
36589
  sizeRecMainDiv.innerHTML = body;