npm - @thefittingroom/shop-ui - Versions diffs - 3.2.3 → 4.1.0 - Mend

@thefittingroom/shop-ui 3.2.3 → 4.1.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.

Files changed (74) hide show

package/index.html CHANGED Viewed

@@ -1,126 +1,274 @@
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>TheFittingRoom</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://fonts.googleapis.com" rel="preconnect" />
-    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Roboto&display=swap"
-      rel="stylesheet"
-    />
-    <script type="module">
-      import { InitFittingRoom, InitLocale, comps } from 'http://localhost:3030/dist/esm/index.js?language=en'
-      InitLocale()
-      window.mm = comps.InitModalManager('tfr-manual-modal')
-      window.comps = comps
-      window.onSignout = (colorwaySizeAssetSKU) => {
-        console.log('signout', colorwaySizeAssetSKU)
-      }
-      window.onClose = () => {
-        console.log('close')
-      }
-      window.onNavBack = () => {
-        console.log('back')
-      }
-      window.onTryOn = (colorwaySizeAssetSKU) => {
-        console.log('try on', colorwaySizeAssetSKU)
-      }
-      window.whenSignedIn = (user, colorwaySizeAssetSKU) => {
-        console.log('after sign in', user, colorwaySizeAssetSKU)
-      }
-      window.onSignIn = (colorwaySizeAssetSKU) => (username, password, validationError) => {
-        if (username.length == 0 || password.length == 0) {
-          validationError('Username or password is empty')
+<head>
+  <title>TheFittingRoom Widget Demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="https://fonts.googleapis.com" rel="preconnect" />
+  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Roboto&display=swap"
+    rel="stylesheet" />
+  <!-- CSS is generated during build to dist/ directory -->
+  <!-- <link href="/dist/index.css" rel="stylesheet" /> -->
+  <style>
+    body {
+      font-family: 'Roboto', sans-serif;
+      margin: 0;
+      padding: 20px;
+      background-color: #f5f5f5;
+    }
+    .demo-container {
+      max-width: 800px;
+      margin: 0 auto;
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+    .product-selector {
+      margin-bottom: 20px;
+      padding: 15px;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+    }
+    .product-selector h3 {
+      margin-top: 0;
+      color: #333;
+    }
+    select {
+      width: 100%;
+      padding: 8px;
+      margin: 10px 0;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    .tfr-widget-container {
+      margin-top: 20px;
+    }
+    .tfr-home-button-container {
+      margin-top: 20px;
+      text-align: center;
+    }
+    .tfr-home-button-container button {
+      margin: 5px;
+      padding: 10px 15px;
+      background-color: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .tfr-home-button-container button:hover {
+      background-color: #0056b3;
+    }
+    #tfr-tryon-image {
+      max-width: 100%;
+      height: auto;
+      margin: 20px 0;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+    #tfr-slider {
+      width: 100%;
+      margin: 10px 0;
+    }
+  </style>
+  <script type="module">
+    import { comps, initFittingRoom } from '/src/index.js'
+    const ENV = 'development'
+    const brandID = 1
+    const productSKU = 'TFR_FITTED-DRESS_178cm_BlackBa'
+    const variantSKUs = [
+      'TFR_Fitted-Dress_178_BlackBandana_2',
+      'TFR_Fitted-Dress_178_BlackBandana_4',
+      'TFR_Fitted-Dress_178_BlackBandana_6',
+      'TFR_Fitted-Dress_178_BlackBandana_8',
+      'TFR_Fitted-Dress_178_BlackBandana_10',
+    ]
+    // Mock product variants for demonstration
+    const productVariants = [
+      { option1: '2', option2: 'BlackBandana', sku: 'TFR_Fitted-Dress_178_BlackBandana_2' },
+      { option1: '4', option2: 'BlackBandana', sku: 'TFR_Fitted-Dress_178_BlackBandana_4' },
+      { option1: '6', option2: 'BlackBandana', sku: 'TFR_Fitted-Dress_178_BlackBandana_6' },
+      { option1: '8', option2: 'BlackBandana', sku: 'TFR_Fitted-Dress_178_BlackBandana_8' },
+      { option1: '10', option2: 'BlackBandana', sku: 'TFR_Fitted-Dress_178_BlackBandana_10' },
+    ]
+    const getSku = () => {
+      try {
+        if (typeof productVariants === 'undefined' || !Array.isArray(productVariants)) {
+          throw new Error(
+            'productVariants is not defined or is not an array. The Fitting Room cannot determine product SKUs without this data.',
+          )
         }
+        const colorInput = document.getElementsByName(`options[Color]`)?.[0]
+        const sizeInput = document.getElementsByName(`options[Size]`)?.[0]
+        const color = colorInput ? colorInput.value : undefined
+        const size = sizeInput ? sizeInput.value : undefined
+        if (!colorInput) {
+          console.error('Error in getSku: Color input element (options[Color]) not found on the page.')
+        }
+        if (!sizeInput) {
+          console.error('Error in getSku: Size input element (options[Size]) not found on the page.')
+        }
+        const activeVariant = productVariants.find((item) => {
+          const hasSizeMatch = !size || item.option1 === size || item.option2 === size
+          const hasColorMatch = !color || item.option1 === color || item.option2 === color
+          return hasSizeMatch && hasColorMatch
+        })
+        if (!activeVariant) {
+          throw new Error(
+            'No product variant found for the selected color and size combination. Please check product data.',
+          )
+        }
+        return activeVariant?.sku
+      } catch (error) {
+        console.error(`Error in getSku: ${error.message}. SKU retrieval failed.`)
+        return null
       }
-      window.onNavSignIn = (colorwaySizeAssetSKU) => (email) => {
-        console.log('nav sign in', colorwaySizeAssetSKU, email)
-      }
-      window.onPasswordReset = (colorwaySizeAssetSKU) => (email) => {
-        console.log('password reset', colorwaySizeAssetSKU, email)
-      }
-      window.onNavForgotPassword = (colorwaySizeAssetSKU) => (email) => {
-        console.log('nav forgot password', colorwaySizeAssetSKU, email)
-      }
-      window.onNavScanCode = () => {
-        console.log('nav scan code')
-      }
+    }
-      window.addEventListener('load', (e) => {
-        let tryOnImage = document.getElementById('tfr-tryon-image')
-        let signout = document.getElementById('signout')
-        let onChange = (slider, imageUrl) => {
-          tryOnImage.src = imageUrl
+    window.addEventListener('DOMContentLoaded', async (e) => {
+      let tfr = null
+      try {
+        const config = {
+          shopId: brandID,
+          styleSKU: productSKU,
+          modalDivId: 'thefittingroom-modal',
+          sizeRecMainDivId: 'tfr-size-recommendation-main',
+          vtoMainDivId: 'tfr-vto',
+          noCacheOnRetry: true,
+          env: typeof ENV !== 'undefined' ? ENV : 'development',
         }
-        let slider = comps.InitImageSlider('tfr-slider', onChange)
-        let tfr = InitFittingRoom(1, 'tfr-tryon-modal')
-        tfr.whenFramesReady = (sku, frames) => {
-          console.log('frames ready', sku, frames)
-          slider.Load(frames)
+        const sku = getSku()
+        if (!sku) {
+          console.warn('SKU not retrieved. The Fitting Room will initialize but may not function optimally without a specific SKU.')
         }
+        const tfr = await initFittingRoom(config)
-        signout.addEventListener('click', () => {
-          tfr
-            .onSignout('')()
-            .then(() => {
-              console.log('signout')
-            })
-        })
+        if (sku) {
+          tfr.SetColorwaySizeAssetBySKU(sku, variantSKUs, true)
+        }
-        document.getElementById('tryon').addEventListener('click', (e) => {
-          tfr.TryOn('5003-007-08')
-        })
-      })
-    </script>
-  </head>
+        // Add event listeners for product selection changes
+        const sizeSelect = document.querySelector('select[name="options[Size]"]')
+        const colorSelect = document.querySelector('select[name="options[Color]"]')
+        if (sizeSelect) {
+          sizeSelect.addEventListener('change', () => {
+            const newSku = getSku()
+            if (newSku && tfr) {
+              tfr.SetColorwaySizeAssetBySKU(newSku, false)
+              console.debug('SKU updated to:', newSku)
+            }
+          })
+        }
+        if (colorSelect) {
+          colorSelect.addEventListener('change', () => {
+            const newSku = getSku()
+            if (newSku && tfr) {
+              tfr.SetColorwaySizeAssetBySKU(newSku, false)
+              console.debug('SKU updated to:', newSku)
+            }
+          })
+        }
+      } catch (error) {
+        console.error(
+          `Error during window load event for The Fitting Room: ${error.message}. The functionality might be impacted or disabled.`,
+        )
+      }
+    })
+  </script>
+</head>
+<body>
+  <div class="demo-container">
+    <h1>TheFittingRoom Widget Demo</h1>
+    <p>This demo showcases a fully functioning widget with brand_id 1 and hardcoded SKUs.</p>
+    <div class="product-selector">
+      <h3>Product Options</h3>
+      <label for="size-select">Size:</label>
+      <select name="options[Size]" id="size-select">
+        <option value="">Select Size</option>
+        <option value="2">Size 2</option>
+        <option value="4">Size 4</option>
+        <option value="6">Size 6</option>
+        <option value="8">Size 8</option>
+        <option value="10">Size 10</option>
+      </select>
+      <label for="color-select">Color:</label>
+      <select name="options[Color]" id="color-select">
+        <option value="">Select Color</option>
+        <option value="BlackBandana">Black Bandana</option>
+      </select>
+    </div>
+    <div class="tfr-widget-container">
+      <h3>TheFittingRoom Widget</h3>
+      <div id="thefittingroom-modal"></div>
+      <div id="tfr-size-recommendation-main"></div>
+      <div id="tfr-vto"></div>
+    </div>
+    <!-- Hidden modal container for manual modal triggers -->
+    <div id="tfr-manual-modal" style="display: none"></div>
-  <body>
     <div class="tfr-home-button-container">
       <button
-        onclick="window.mm.Open(window.comps.ErrorModal({error: 'custom error message', onNavBack: window.onNavBack, onClose: window.onClose}))"
-      >
+        onclick="window.mm.open(window.comps.ErrorModal({error: 'custom error message', onNavBack: window.onNavBack, onClose: window.onClose}))">
         Error Modal
       </button>
-      <br />
-      <button onclick="window.mm.Open(window.comps.ScanCodeModal())">Scan Code Modal</button>
-      <br />
+      <button onclick="window.mm.open(window.comps.ScanCodeModal())">Scan Code Modal</button>
       <button
-        onclick="window.mm.Open(window.comps.SignInModal({email:'email@mail.com', onSignIn: window.onSignIn('abc'), onNavForgotPassword: window.onNavForgotPassword('123'), onNavScanCode: window.onNavScanCode}))"
-      >
+        onclick="window.mm.open(window.comps.SignInModal({email:'email@mail.com', onSignIn: window.onSignIn('abc'), onNavForgotPassword: window.onNavForgotPassword('123'), onNavScanCode: window.onNavScanCode}))">
         Sign In Modal
       </button>
-      <br />
       <button
-        onclick="window.mm.Open(window.comps.ForgotPasswordModal({email: 'email@mail.com', onNavSignIn: window.onNavSignIn('123'), onPasswordReset: window.onPasswordReset('123')}))"
-      >
+        onclick="window.mm.open(window.comps.ForgotPasswordModal({email: 'email@mail.com', onNavSignIn: window.onNavSignIn('123'), onPasswordReset: window.onPasswordReset('123')}))">
         Forgot Password Modal
       </button>
-      <br />
-      <button onclick="window.mm.Open(window.comps.NoAvatarModal({}))">No Avatar Modal</button>
-      <br />
-      <button onclick="window.mm.Open(window.comps.LoadingAvatarModal({timeoutMS: 12000}))">
+      <button onclick="window.mm.open(window.comps.NoAvatarModal({}))">No Avatar Modal</button>
+      <button onclick="window.mm.open(window.comps.LoadingAvatarModal({timeoutMS: 12000}))">
         Loading Avatar Modal
       </button>
-      <br />
       <button
-        onclick="window.mm.Open(window.comps.SizeErrorModal({onNavBack: window.onNavBack, onClose: window.onClose, sizes: {recommended: 'large', avaliable: ['small', 'medium', 'large']}}))"
-      >
+        onclick="window.mm.open(window.comps.SizeErrorModal({onNavBack: window.onNavBack, onClose: window.onClose, sizes: {recommended: 'large', avaliable: ['small', 'medium', 'large']}}))">
         Size Error Modal
       </button>
-      <br />
-      <button onclick="window.mm.Open(window.comps.ResetLinkModal({onNavSignIn: window.onNavSignIn('abc')}))">
+      <button onclick="window.mm.open(window.comps.ResetLinkModal({onNavSignIn: window.onNavSignIn('abc')}))">
         Reset Link Modal
       </button>
-      <button id="tryon">Try On</button>
-      <button id="signout">Sign Out</button>
     </div>
-    <div id="tfr-manual-modal"></div>
-    <div id="tfr-tryon-modal"></div>
-    <input type="range" id="tfr-slider" />
-    <img id="tfr-tryon-image" src="" />
-  </body>
-</html>
+  </div>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,38 +1,33 @@
 {
   "name": "@thefittingroom/shop-ui",
-  "version": "3.2.3",
+  "version": "4.1.0",
   "description": "the fitting room UI library",
   "type": "module",
-  "main": "./dist/esm/index.js",
+  "main": "./dist/index.js",
   "scripts": {
     "clean": "rm -rf dist",
-    "clean:all": "rm -rf dist build .rollup.cache",
-    "build:prod": "npm run clean && NODE_ENV=prod rollup --config",
-    "build:dev": "npm run clean && NODE_ENV=dev rollup --config",
-    "watch:prod": "npm run clean && NODE_ENV=prod rollup --config -w",
-    "watch:dev": "npm run clean && NODE_ENV=dev rollup --config -w",
-    "serve": "live-server --host=localhost --port=3030 --cors",
-    "pub": "npm run build:prod && npm publish --access public"
+    "clean:all": "rm -rf dist build",
+    "build:prod": "npm run clean && vite build --mode production",
+    "build:dev": "npm run clean && vite build --mode development",
+    "dev": "vite --mode development",
+    "watch:prod": "vite build --mode production --watch",
+    "watch:dev": "vite build --mode development --watch",
+    "serve": "vite preview",
+    "prune": "ts-prune"
   },
   "engines": {
     "node": ">=20"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "live-server": "^1.2.0",
-    "postcss": "^8.5.6",
+    "@biomejs/biome": "2.3.5",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
     "prettier": "^3.6.2",
-    "rollup": "^4.18.1",
-    "rollup-plugin-dotenv": "^0.5.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "ts-node": "^10.9.2",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4"
+    "ts-prune": "^0.10.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2"
   },
   "dependencies": {
-    "@thefittingroom/sdk": "2.0.8"
+    "dayjs": "^1.11.19",
+    "firebase": "^12.5.0"
   }
 }

package/vite.config.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+const server = {
+  port: 5173,
+  host: true,
+  cors: true,
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+    'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+  },
+}
+const lib = {
+  lib: {
+    entry: resolve('src/index.ts'),
+    name: 'TheFittingRoom',
+    fileName: 'index',
+  },
+  minify: false,
+}
+export default defineConfig(({ mode, command }) => {
+  if (command === 'serve') {
+    return {
+      server: {
+        ...server,
+        watch: { usePolling: true },
+      },
+    }
+  }
+  if (mode === 'production' || process.env.CI) {
+    return { build: lib, server }
+  }
+  return { build: { minify: false }, server }
+})

package/.env.dev DELETED Viewed

	@@ -1,2 +0,0 @@
1	- LANGUAGE_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/${GITHUB_SHA_7}/languages
2	- ASSETS_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/assets

package/.env.prod DELETED Viewed

	@@ -1,2 +0,0 @@
1	- LANGUAGE_URL=https://assets.p.thefittingroom.xyz/shop-sdk/${GITHUB_REF}/languages
2	- ASSETS_URL=https://assets.p.thefittingroom.xyz/shop-sdk/assets

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/ErrorModal.js DELETED Viewed

@@ -1,43 +0,0 @@
-import { L } from '../locale';
-const ErrorModal = (props) => {
-    const { error } = props;
-    const onNavBack = () => {
-        props.onNavBack();
-    };
-    const onClose = () => {
-        props.onClose();
-    };
-    const Hook = () => {
-        var _a, _b;
-        (_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', onNavBack);
-        (_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', onClose);
-    };
-    const Unhook = () => {
-        var _a, _b;
-        (_a = document.getElementById('tfr-back')) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', onNavBack);
-        (_b = document.getElementById('tfr-close')) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', onClose);
-    };
-    const Body = () => {
-        if (!error) {
-            console.error('ErrorModal: No error provided');
-        }
-        return `
-        <div class="tfr-mt-15-p tfr-mb-13-p">
-            <div tfr-element="true" class="tfr-title-font tfr-light-22-300 tfr-c-black">${error || L.SomethingWentWrong}</div>
-        </div>
-        <div class="tfr-t-a-center">
-            <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 || 'Return to Catalog Page'}</span>
-            <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 || 'Return to Product Page'}</span>
-        </div>
-        `;
-    };
-    return {
-        Hook,
-        Unhook,
-        Body,
-        useFullModalContent: true,
-    };
-};
-export default ErrorModal;
-//# sourceMappingURL=ErrorModal.js.map

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/ErrorModal.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ErrorModal.js","sourceRoot":"","sources":["../../../../src/components/Modals/ErrorModal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,WAAW,CAAA;AAE7B,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC5C,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEvB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,KAAK,CAAC,SAAS,EAAE,CAAA;IACnB,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,KAAK,CAAC,OAAO,EAAE,CAAA;IACjB,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,GAAG,EAAE;;QAChB,MAAA,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QACzE,MAAA,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,0CAAE,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAC1E,CAAC,CAAA;IAED,MAAM,MAAM,GAAG,GAAG,EAAE;;QAClB,MAAA,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,0CAAE,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAC5E,MAAA,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,0CAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAC7E,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAA;QAChD,CAAC;QACD,OAAO;;0FAGG,KAAK,IAAI,CAAC,CAAC,kBACb;;;;4IAKE,CAAC,CAAC,mBAAmB,IAAI,wBAC3B;qJAEE,CAAC,CAAC,mBAAmB,IAAI,wBAC3B;;SAEH,CAAA;IACP,CAAC,CAAA;IAED,OAAO;QACL,IAAI;QACJ,MAAM;QACN,IAAI;QACJ,mBAAmB,EAAE,IAAI;KAC1B,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA","sourcesContent":["import { ErrorModalProps } from '../../types'\nimport { L } from '../locale'\n\nconst ErrorModal = (props: ErrorModalProps) => {\n const { error } = props\n\n const onNavBack = () => {\n props.onNavBack()\n }\n\n const onClose = () => {\n props.onClose()\n }\n\n const Hook = () => {\n document.getElementById('tfr-back')?.addEventListener('click', onNavBack)\n document.getElementById('tfr-close')?.addEventListener('click', onClose)\n }\n\n const Unhook = () => {\n document.getElementById('tfr-back')?.removeEventListener('click', onNavBack)\n document.getElementById('tfr-close')?.removeEventListener('click', onClose)\n }\n\n const Body = () => {\n if (!error) {\n console.error('ErrorModal: No error provided')\n }\n return `\n <div class=\"tfr-mt-15-p tfr-mb-13-p\">\n <div tfr-element=\"true\" class=\"tfr-title-font tfr-light-22-300 tfr-c-black\">${\n error || L.SomethingWentWrong\n }</div>\n </div>\n\n <div class=\"tfr-t-a-center\">\n <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\">${\n L.ReturnToCatalogPage || 'Return to Catalog Page'\n }</span>\n <span id=\"tfr-close\" tfr-element=\"true\" class=\"tfr-body-font tfr-16-default tfr-c-black-o5 tfr-underline tfr-cursor\" id=\"returnToSite\">${\n L.ReturnToProductPage || 'Return to Product Page'\n }</span>\n </div>\n `\n }\n\n return {\n Hook,\n Unhook,\n Body,\n useFullModalContent: true,\n }\n}\n\nexport default ErrorModal\n"]}

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/FitModal.js DELETED Viewed

@@ -1,106 +0,0 @@
-import { tfrDoor } from '../svgs';
-const FitModal = (props) => {
-    const imageBaseUrl = 'https://assets.dev.thefittingroom.xyz/images/';
-    const onSignInNav = () => props.onSignInNav();
-    const Hook = () => {
-        document.getElementById('cta-link').addEventListener('click', onSignInNav);
-    };
-    const Unhook = () => {
-        document.getElementById('cta-link').removeEventListener('click', onSignInNav);
-    };
-    const Body = () => {
-        return `
-      <div>
-        <div id="fit-title">Fit Scale</div>
-        <div id="fit-line-container">
-          <div id="fit-line-text-container">
-            <div class="fit-line-item mobile-hidden">Too Tight</div>
-            <div class="fit-line-item">
-              <div>Tight <span class="light-text">or</span><br /> More fitted</div>
-              <div class="desktop-hidden margin-top-10">Too Tight</div>
-            </div>
-            <div class="fit-line-item fit-line-item-green">Slightly tight <br /><span class="light-text">or</span> Fitted</div>
-            <div class="fit-line-item fit-line-item-green">Perfect Fit</div>
-            <div class="fit-line-item fit-line-item-green">Slightly loose <br /><span class="light-text">or</span> Less fitted</div>
-            <div class="fit-line-item">
-              <div>Loose <span class="light-text">or</span><br /> Not fitted</div>
-              <div class="desktop-hidden margin-top-10">Oversized</div>
-            </div>
-            <div class="fit-line-item mobile-hidden">Oversized</div>
-          </div>
-          <div id="fit-line">
-            <div id="fit-line-1" class="mobile-hidden">&nbsp;</div>
-            <div id="fit-line-2">&nbsp;</div>
-            <div id="fit-line-3">&nbsp;</div>
-            <div id="fit-line-4">&nbsp;</div>
-            <div id="fit-line-5">&nbsp;</div>
-            <div id="fit-line-6">&nbsp;</div>
-            <div id="fit-line-7" class="mobile-hidden">&nbsp;</div>
-          </div>
-          <div id="fit-line-texts">
-            <div>Poor Fit</div>
-            <div>Acceptable Fit</div>
-            <div>Poor Fit</div>
-          </div>
-        </div>
-        <div id="fit-subtitle-mobile" class="desktop-hidden">Measurement&nbsp;Points</div>
-        <div id="fit-outline-container">
-          <div id="fit-outline-inner-left">
-            <div class="fit-outline-line-text fit-outline-line-p-waist-text">Pant&nbsp;Waist</div>
-            <div class="fit-outline-line-text fit-outline-line-thigh-text">Thigh</div>
-          </div>
-          <div id="fit-outline-inner">
-            <div class="fit-outline-line fit-outline-line-chest"></div>
-            <div class="fit-outline-line fit-outline-line-n-waist"></div>
-            <div class="fit-outline-line fit-outline-line-p-waist"></div>
-            <div class="fit-outline-line fit-outline-line-h-hip"></div>
-            <div class="fit-outline-line fit-outline-line-l-hip"></div>
-            <div class="fit-outline-line fit-outline-line-thigh-l"></div>
-            <div class="fit-outline-line fit-outline-line-thigh-r"></div>
-            <img id="tfr-fit-outline-img" src="${imageBaseUrl}fit-outline.png" />
-          </div>
-          <div id="fit-outline-inner-right">
-            <div id="fit-subtitle" class="mobile-hidden">Measurement&nbsp;Points</div>
-            <div class="fit-outline-line-text fit-outline-line-chest-text">Chest/Bust</div>
-            <div class="fit-outline-line-text fit-outline-line-n-waist-text">Natural&nbsp;Waist</div>
-            <div class="fit-outline-line-text fit-outline-line-h-hip-text">High&nbsp;Hip</div>
-            <div class="fit-outline-line-text fit-outline-line-l-hip-text">Low&nbsp;Hip</div>
-          </div>
-        </div>
-      </div>
-      <div id="cta-section">
-        <div id="cta-link">Sign Up or Login</div>
-        <div class="powered-by">
-          <div>Powered by</div>
-          <div class="tfr-powered-by-logo">${tfrDoor}</div>
-          <div class="tfr-powered-by-text-bold">The Fitting Room</div>
-        </div>
-      </div>
-    `;
-    };
-    return {
-        Hook,
-        Unhook,
-        Body,
-        useFullModalContent: false,
-    };
-};
-export default FitModal;
-//# sourceMappingURL=FitModal.js.map

package/.rollup.cache/home/runner/work/shop-sdk-ui/shop-sdk-ui/dist/esm/components/Modals/FitModal.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"FitModal.js","sourceRoot":"","sources":["../../../../src/components/Modals/FitModal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEjC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAgB,EAAE;IACtD,MAAM,YAAY,GAAG,+CAA+C,CAAA;IACpE,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAA;IAE7C,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;IAC5E,CAAC,CAAA;IAED,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;IAC/E,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA6DsC,YAAY;;;;;;;;;;;;;;;;;;;6CAmBhB,OAAO;;;;KAI/C,CAAA;IACH,CAAC,CAAA;IAED,OAAO;QACL,IAAI;QACJ,MAAM;QACN,IAAI;QACJ,mBAAmB,EAAE,KAAK;KAC3B,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA","sourcesContent":["import { FitModalProps, ModalContent } from '../../types'\nimport { tfrDoor } from '../svgs'\n\nconst FitModal = (props: FitModalProps): ModalContent => {\n const imageBaseUrl = 'https://assets.dev.thefittingroom.xyz/images/'\n const onSignInNav = () => props.onSignInNav()\n\n const Hook = () => {\n document.getElementById('cta-link').addEventListener('click', onSignInNav)\n }\n\n const Unhook = () => {\n document.getElementById('cta-link').removeEventListener('click', onSignInNav)\n }\n\n const Body = () => {\n return `\n <div>\n <div id=\"fit-title\">Fit Scale</div>\n\n <div id=\"fit-line-container\">\n <div id=\"fit-line-text-container\">\n <div class=\"fit-line-item mobile-hidden\">Too Tight</div>\n\n <div class=\"fit-line-item\">\n <div>Tight <span class=\"light-text\">or</span><br /> More fitted</div>\n\n <div class=\"desktop-hidden margin-top-10\">Too Tight</div>\n </div>\n\n <div class=\"fit-line-item fit-line-item-green\">Slightly tight <br /><span class=\"light-text\">or</span> Fitted</div>\n <div class=\"fit-line-item fit-line-item-green\">Perfect Fit</div>\n <div class=\"fit-line-item fit-line-item-green\">Slightly loose <br /><span class=\"light-text\">or</span> Less fitted</div>\n\n <div class=\"fit-line-item\">\n <div>Loose <span class=\"light-text\">or</span><br /> Not fitted</div>\n\n <div class=\"desktop-hidden margin-top-10\">Oversized</div>\n </div>\n\n <div class=\"fit-line-item mobile-hidden\">Oversized</div>\n </div>\n\n <div id=\"fit-line\">\n <div id=\"fit-line-1\" class=\"mobile-hidden\"> </div>\n <div id=\"fit-line-2\"> </div>\n <div id=\"fit-line-3\"> </div>\n <div id=\"fit-line-4\"> </div>\n <div id=\"fit-line-5\"> </div>\n <div id=\"fit-line-6\"> </div>\n <div id=\"fit-line-7\" class=\"mobile-hidden\"> </div>\n </div>\n\n <div id=\"fit-line-texts\">\n <div>Poor Fit</div>\n <div>Acceptable Fit</div>\n <div>Poor Fit</div>\n </div>\n </div>\n\n <div id=\"fit-subtitle-mobile\" class=\"desktop-hidden\">Measurement Points</div>\n\n <div id=\"fit-outline-container\">\n <div id=\"fit-outline-inner-left\">\n <div class=\"fit-outline-line-text fit-outline-line-p-waist-text\">Pant Waist</div>\n <div class=\"fit-outline-line-text fit-outline-line-thigh-text\">Thigh</div>\n </div>\n\n <div id=\"fit-outline-inner\">\n <div class=\"fit-outline-line fit-outline-line-chest\"></div>\n <div class=\"fit-outline-line fit-outline-line-n-waist\"></div>\n <div class=\"fit-outline-line fit-outline-line-p-waist\"></div>\n <div class=\"fit-outline-line fit-outline-line-h-hip\"></div>\n <div class=\"fit-outline-line fit-outline-line-l-hip\"></div>\n <div class=\"fit-outline-line fit-outline-line-thigh-l\"></div>\n <div class=\"fit-outline-line fit-outline-line-thigh-r\"></div>\n\n <img id=\"tfr-fit-outline-img\" src=\"${imageBaseUrl}fit-outline.png\" />\n </div>\n\n <div id=\"fit-outline-inner-right\">\n <div id=\"fit-subtitle\" class=\"mobile-hidden\">Measurement Points</div>\n\n <div class=\"fit-outline-line-text fit-outline-line-chest-text\">Chest/Bust</div>\n <div class=\"fit-outline-line-text fit-outline-line-n-waist-text\">Natural Waist</div>\n <div class=\"fit-outline-line-text fit-outline-line-h-hip-text\">High Hip</div>\n <div class=\"fit-outline-line-text fit-outline-line-l-hip-text\">Low Hip</div>\n </div>\n </div>\n </div>\n\n <div id=\"cta-section\">\n <div id=\"cta-link\">Sign Up or Login</div>\n\n <div class=\"powered-by\">\n <div>Powered by</div>\n <div class=\"tfr-powered-by-logo\">${tfrDoor}</div>\n <div class=\"tfr-powered-by-text-bold\">The Fitting Room</div>\n </div>\n </div>\n `\n }\n\n return {\n Hook,\n Unhook,\n Body,\n useFullModalContent: false,\n }\n}\n\nexport default FitModal\n"]}