@thefittingroom/shop-ui 4.1.0 → 4.2.0

package/dist/index.js

@@ -16,45 +16,111 @@ if (typeof document !== "undefined") {
   styleElement.textContent = allCSS;
   document.head.appendChild(styleElement);
 }
-var L$1 = {
-  AssociatedEmail: "If there is an account associated with that email, We have sent a link to reset your password.",
-  BackToSignIn: "Back to sign in",
-  ClickHereToDownload: "Click here to download the app",
-  DontHaveAcc: "Don't have an account?",
-  DontHaveAvatar: "Whoops! Looks like you don't have an avatar yet.",
-  EmailAddress: "Email address",
-  EmailError: "Please enter a valid email address.",
-  EnterEmailAddress: "Enter your email address, we will send you a link to reset your password.",
-  EnterPhoneNumber: "Enter your number for download link",
-  FailedToLoadLocale: "Something went wrong when fetching another language.",
-  ForgotPasswordWithSymbol: "Forgot password?",
-  GetVirtualTryOnFramesErrorText: "The try-on request timed out. Please try again!",
-  HaveAcc: "Have an account? Sign in",
-  Loading: "Loading...",
-  LoadingAvatar: "Your avatar is loading...",
-  NoSizeAvailable: "Unfortunately, that size is not available for try on.",
-  OrSize: "or",
-  Password: "Password",
-  PasswordError: "Please enter a valid password (at least 7 characters).",
-  PhoneNumber: "Phone number",
-  ReturnToCatalogPage: "Return to Catalog Page",
-  ReturnToProductPage: "Return to Product Page",
-  ReturnToSite: "Return to site",
-  ReturnToTFR: "Please return to The Fitting Room app to create your avatar.",
-  ScanQrToDownload: "Scan to download the app",
-  Send: "Send",
-  SignBackIn: "Sign back in",
-  SignIn: "Sign in",
-  SomethingWentWrong: "Something went wrong. Try again!",
-  SuccessfullyLoggedOut: "You have successfully logged out!",
-  TheFittingRoom: "The Fitting Room",
-  UsernameOrPasswordEmpty: "Username or password is empty.",
-  UsernameOrPasswordIncorrect: "Username or password is incorrect.",
-  StyleNotFound: "style not found",
-  // Modal
-  ModalTagline: "End size uncertainty with",
-  ModalText: "Our technology captures your precise measurements, and considers things like fabric stretch and your individual physique to find your perfect fit every time."
+const TheFittingRoom = "The Fitting Room";
+const VirtualTryOnWith = "Virtual try on with";
+const EmailAddress = "Email address";
+const Password = "Password";
+const PhoneNumber = "Phone number";
+const SignBackIn = "Sign back in";
+const SignUp = "Sign up";
+const SignOut = "Sign out";
+const SignIn = "Sign in";
+const ForgotPassword = "Forgot password";
+const BackToSignIn = "Back to sign in";
+const Send = "Send";
+const ReturnToSignIn = "Return to sign in";
+const ForgotPasswordWithSymbol = "Forgot password?";
+const DontHaveAcc = "Don't have an account?";
+const HaveAcc = "Have an account? Sign in";
+const HowItWorks = "How it works";
+const HowItWorksText = "The Fitting Room has partnered with your favourite designers to enable you to virtually try on garments, so you will know exactly how it will look before purchasing. Say good-bye to the days of dealing with returns!";
+const SimplyScan = "Simply scan,";
+const SimplyScanText = "Download The Fitting Room app, create an account, follow the easy set up steps, and then scan yourself using just your smartphone to create your personal lifelike avatar.";
+const TryOn = "and try on.";
+const TryOnText = "After creating your avatar, return here and sign in. We will use the measurements from your avatar to tell you which size will fit you best, as well as let you try the garment on - all without leaving your house!";
+const Or = "Or";
+const DontHaveAvatar = "Whoops! Looks like you don't have an avatar yet.";
+const LoadingAvatar = "Your avatar is loading...";
+const ReturnToTFR = "Please return to The Fitting Room app to create your avatar.";
+const SuccessfullyLoggedOut = "You have successfully logged out!";
+const ReturnToSite = "Return to site";
+const ModalTitle = "Enter your email address to be notified when The Fitting Room try on is offered on Google Play:";
+const EnterEmailAddress = "Enter your email address, we will send you a link to reset your password.";
+const EnterPhoneNumber = "Enter your phone number to be texted a link to download The Fitting Room app.";
+const StyleNotReadyForVTO = "This style is not ready for virtual try on yet. Please check back later.";
+const NoSizeAvailable = "Unfortunately, that size is not available for try on.";
+const TrySize = "You can try on a size";
+const OrSize = "or";
+const WeRecommendSize = "We recommend a size";
+const AssociatedEmail = "If there is an account associated with that email, We have sent a link to reset your password.";
+const CreateAvatarSc = "Scan the QR code/click link to download our app and create an avatar:";
+const SomethingWentWrong = "Something went wrong. Try again!";
+const SignOutErrorText = "Something went wrong while logging out. Try again!";
+const GetVirtualTryOnFramesErrorText = "The try-on request timed out. Please try again!";
+const GetRecommendedSizesErrorText = "Something went wrong while fetching sizes. Try again!";
+const SendPasswordResetEmailErrorText = "Something went wrong while sending password reset email. Try again!";
+const ReturnToCatalogPage = "Return to Catalog Page";
+const ReturnToProductPage = "Return to Product Page";
+const Loading = "Loading...";
+const SomethingIsWrongWithThisUser = "Something is wrong with this user. Try to re-authenticate again!";
+const FailedToLoadLocale = "Something went wrong when fetching another language.";
+const UsernameOrPasswordIncorrect = "Username or password is incorrect.";
+const UsernameOrPasswordEmpty = "Username or password is empty.";
+const StyleNotFound = "style sku was not found";
+const en$1 = {
+  TheFittingRoom,
+  VirtualTryOnWith,
+  EmailAddress,
+  Password,
+  PhoneNumber,
+  SignBackIn,
+  SignUp,
+  SignOut,
+  SignIn,
+  ForgotPassword,
+  BackToSignIn,
+  Send,
+  ReturnToSignIn,
+  ForgotPasswordWithSymbol,
+  DontHaveAcc,
+  HaveAcc,
+  HowItWorks,
+  HowItWorksText,
+  SimplyScan,
+  SimplyScanText,
+  TryOn,
+  TryOnText,
+  Or,
+  DontHaveAvatar,
+  LoadingAvatar,
+  ReturnToTFR,
+  SuccessfullyLoggedOut,
+  ReturnToSite,
+  ModalTitle,
+  EnterEmailAddress,
+  EnterPhoneNumber,
+  StyleNotReadyForVTO,
+  NoSizeAvailable,
+  TrySize,
+  OrSize,
+  WeRecommendSize,
+  AssociatedEmail,
+  CreateAvatarSc,
+  SomethingWentWrong,
+  SignOutErrorText,
+  GetVirtualTryOnFramesErrorText,
+  GetRecommendedSizesErrorText,
+  SendPasswordResetEmailErrorText,
+  ReturnToCatalogPage,
+  ReturnToProductPage,
+  Loading,
+  SomethingIsWrongWithThisUser,
+  FailedToLoadLocale,
+  UsernameOrPasswordIncorrect,
+  UsernameOrPasswordEmpty,
+  StyleNotFound
 };
+var L$1 = en$1;
 const ErrorModal = (props) => {
   const { error } = props;
   const onNavBack = () => {
@@ -20399,21 +20465,27 @@ class FittingRoomAPI {
     });
     return colorwaySizeAssets;
   }
-  // BrandStyleID is the SKU of the style
-  async GetStyleByBrandStyleID(styleSKU) {
-    console.debug("getStyleByBrandStyleID:", styleSKU);
-    if (!styleSKU) throw new Error("styleSKU is required for GetStyleByBrandStyleID");
-    const isLoggedIn = await this.IsLoggedIn();
-    console.debug("isLoggedIn", isLoggedIn, "BrandID:", this.BrandID);
+  async GetStyleByExernalID(externalID) {
+    if (!externalID) throw new Error("externalID is required for GetStyleByExernalID");
+    await this.IsLoggedIn();
     try {
       const constraints = [where("brand_id", "==", this.BrandID)];
-      constraints.push(where("brand_style_id", "==", styleSKU));
+      constraints.push(where("external_id", "==", externalID));
+      console.debug("Debug: Executing Firestore query with constraints:", {
+        brand_id: this.BrandID,
+        external_id: externalID
+      });
       const querySnapshot = await this.firebase.getDocs("styles", constraints);
+      console.debug("Debug: Firestore query result:", {
+        size: querySnapshot.size,
+        empty: querySnapshot.empty,
+        externalID
+      });
       const style = querySnapshot.docs?.[0]?.data();
       console.debug("style fetched by brand id:", style);
       return style;
     } catch (error) {
-      console.debug("getStyleByBrandStyleID error:", styleSKU, error);
+      console.debug("GetStyleByExernalID error:", externalID, error);
       return getFirebaseError(error);
     }
   }
@@ -21879,9 +21951,9 @@ const validatePassword = (password) => {
   return false;
 };
 class FittingRoomController {
-  constructor(env, shopID, styleSKU, noCacheOnRetry = false, modalDivId, sizeRecMainDivId, vtoMainDivId, cssVariables, hooks = {}) {
+  constructor(env, shopID, externalID, noCacheOnRetry = false, modalDivId, sizeRecMainDivId, vtoMainDivId, cssVariables, hooks = {}) {
     this.shopID = shopID;
-    this.styleSKU = styleSKU;
+    this.externalID = externalID;
     this.noCacheOnRetry = noCacheOnRetry;
     this.hooks = hooks;
     this.hasInitializedTryOn = false;
@@ -21929,7 +22001,7 @@ class FittingRoomController {
     console.debug("init");
     try {
       const authUserPromise = this.firebaseAuthUserController.GetUserOrNotLoggedIn();
-      const stylePromise = this.API.GetStyleByBrandStyleID(this.styleSKU);
+      const stylePromise = this.API.GetStyleByExernalID(this.externalID);
       await Promise.all([authUserPromise, stylePromise]);
       console.debug("promise all ready");
       const style = await stylePromise;
@@ -22137,7 +22209,7 @@ class FittingRoomController {
 const initFittingRoom = async ({
   env,
   shopId,
-  styleSKU,
+  externalID,
   modalDivId,
   sizeRecMainDivId,
   vtoMainDivId,
@@ -22149,7 +22221,7 @@ const initFittingRoom = async ({
     const tfr = new FittingRoomController(
       env,
       shopId,
-      styleSKU,
+      externalID,
       noCacheOnRetry,
       modalDivId,
       sizeRecMainDivId,

package/dist/index.umd.cjs

@@ -20,45 +20,111 @@
     styleElement.textContent = allCSS;
     document.head.appendChild(styleElement);
   }
-  var L$1 = {
-    AssociatedEmail: "If there is an account associated with that email, We have sent a link to reset your password.",
-    BackToSignIn: "Back to sign in",
-    ClickHereToDownload: "Click here to download the app",
-    DontHaveAcc: "Don't have an account?",
-    DontHaveAvatar: "Whoops! Looks like you don't have an avatar yet.",
-    EmailAddress: "Email address",
-    EmailError: "Please enter a valid email address.",
-    EnterEmailAddress: "Enter your email address, we will send you a link to reset your password.",
-    EnterPhoneNumber: "Enter your number for download link",
-    FailedToLoadLocale: "Something went wrong when fetching another language.",
-    ForgotPasswordWithSymbol: "Forgot password?",
-    GetVirtualTryOnFramesErrorText: "The try-on request timed out. Please try again!",
-    HaveAcc: "Have an account? Sign in",
-    Loading: "Loading...",
-    LoadingAvatar: "Your avatar is loading...",
-    NoSizeAvailable: "Unfortunately, that size is not available for try on.",
-    OrSize: "or",
-    Password: "Password",
-    PasswordError: "Please enter a valid password (at least 7 characters).",
-    PhoneNumber: "Phone number",
-    ReturnToCatalogPage: "Return to Catalog Page",
-    ReturnToProductPage: "Return to Product Page",
-    ReturnToSite: "Return to site",
-    ReturnToTFR: "Please return to The Fitting Room app to create your avatar.",
-    ScanQrToDownload: "Scan to download the app",
-    Send: "Send",
-    SignBackIn: "Sign back in",
-    SignIn: "Sign in",
-    SomethingWentWrong: "Something went wrong. Try again!",
-    SuccessfullyLoggedOut: "You have successfully logged out!",
-    TheFittingRoom: "The Fitting Room",
-    UsernameOrPasswordEmpty: "Username or password is empty.",
-    UsernameOrPasswordIncorrect: "Username or password is incorrect.",
-    StyleNotFound: "style not found",
-    // Modal
-    ModalTagline: "End size uncertainty with",
-    ModalText: "Our technology captures your precise measurements, and considers things like fabric stretch and your individual physique to find your perfect fit every time."
+  const TheFittingRoom = "The Fitting Room";
+  const VirtualTryOnWith = "Virtual try on with";
+  const EmailAddress = "Email address";
+  const Password = "Password";
+  const PhoneNumber = "Phone number";
+  const SignBackIn = "Sign back in";
+  const SignUp = "Sign up";
+  const SignOut = "Sign out";
+  const SignIn = "Sign in";
+  const ForgotPassword = "Forgot password";
+  const BackToSignIn = "Back to sign in";
+  const Send = "Send";
+  const ReturnToSignIn = "Return to sign in";
+  const ForgotPasswordWithSymbol = "Forgot password?";
+  const DontHaveAcc = "Don't have an account?";
+  const HaveAcc = "Have an account? Sign in";
+  const HowItWorks = "How it works";
+  const HowItWorksText = "The Fitting Room has partnered with your favourite designers to enable you to virtually try on garments, so you will know exactly how it will look before purchasing. Say good-bye to the days of dealing with returns!";
+  const SimplyScan = "Simply scan,";
+  const SimplyScanText = "Download The Fitting Room app, create an account, follow the easy set up steps, and then scan yourself using just your smartphone to create your personal lifelike avatar.";
+  const TryOn = "and try on.";
+  const TryOnText = "After creating your avatar, return here and sign in. We will use the measurements from your avatar to tell you which size will fit you best, as well as let you try the garment on - all without leaving your house!";
+  const Or = "Or";
+  const DontHaveAvatar = "Whoops! Looks like you don't have an avatar yet.";
+  const LoadingAvatar = "Your avatar is loading...";
+  const ReturnToTFR = "Please return to The Fitting Room app to create your avatar.";
+  const SuccessfullyLoggedOut = "You have successfully logged out!";
+  const ReturnToSite = "Return to site";
+  const ModalTitle = "Enter your email address to be notified when The Fitting Room try on is offered on Google Play:";
+  const EnterEmailAddress = "Enter your email address, we will send you a link to reset your password.";
+  const EnterPhoneNumber = "Enter your phone number to be texted a link to download The Fitting Room app.";
+  const StyleNotReadyForVTO = "This style is not ready for virtual try on yet. Please check back later.";
+  const NoSizeAvailable = "Unfortunately, that size is not available for try on.";
+  const TrySize = "You can try on a size";
+  const OrSize = "or";
+  const WeRecommendSize = "We recommend a size";
+  const AssociatedEmail = "If there is an account associated with that email, We have sent a link to reset your password.";
+  const CreateAvatarSc = "Scan the QR code/click link to download our app and create an avatar:";
+  const SomethingWentWrong = "Something went wrong. Try again!";
+  const SignOutErrorText = "Something went wrong while logging out. Try again!";
+  const GetVirtualTryOnFramesErrorText = "The try-on request timed out. Please try again!";
+  const GetRecommendedSizesErrorText = "Something went wrong while fetching sizes. Try again!";
+  const SendPasswordResetEmailErrorText = "Something went wrong while sending password reset email. Try again!";
+  const ReturnToCatalogPage = "Return to Catalog Page";
+  const ReturnToProductPage = "Return to Product Page";
+  const Loading = "Loading...";
+  const SomethingIsWrongWithThisUser = "Something is wrong with this user. Try to re-authenticate again!";
+  const FailedToLoadLocale = "Something went wrong when fetching another language.";
+  const UsernameOrPasswordIncorrect = "Username or password is incorrect.";
+  const UsernameOrPasswordEmpty = "Username or password is empty.";
+  const StyleNotFound = "style sku was not found";
+  const en$1 = {
+    TheFittingRoom,
+    VirtualTryOnWith,
+    EmailAddress,
+    Password,
+    PhoneNumber,
+    SignBackIn,
+    SignUp,
+    SignOut,
+    SignIn,
+    ForgotPassword,
+    BackToSignIn,
+    Send,
+    ReturnToSignIn,
+    ForgotPasswordWithSymbol,
+    DontHaveAcc,
+    HaveAcc,
+    HowItWorks,
+    HowItWorksText,
+    SimplyScan,
+    SimplyScanText,
+    TryOn,
+    TryOnText,
+    Or,
+    DontHaveAvatar,
+    LoadingAvatar,
+    ReturnToTFR,
+    SuccessfullyLoggedOut,
+    ReturnToSite,
+    ModalTitle,
+    EnterEmailAddress,
+    EnterPhoneNumber,
+    StyleNotReadyForVTO,
+    NoSizeAvailable,
+    TrySize,
+    OrSize,
+    WeRecommendSize,
+    AssociatedEmail,
+    CreateAvatarSc,
+    SomethingWentWrong,
+    SignOutErrorText,
+    GetVirtualTryOnFramesErrorText,
+    GetRecommendedSizesErrorText,
+    SendPasswordResetEmailErrorText,
+    ReturnToCatalogPage,
+    ReturnToProductPage,
+    Loading,
+    SomethingIsWrongWithThisUser,
+    FailedToLoadLocale,
+    UsernameOrPasswordIncorrect,
+    UsernameOrPasswordEmpty,
+    StyleNotFound
   };
+  var L$1 = en$1;
   const ErrorModal = (props) => {
     const { error } = props;
     const onNavBack = () => {
@@ -20403,21 +20469,27 @@ This typically indicates that your device does not have a healthy Internet conne
       });
       return colorwaySizeAssets;
     }
-    // BrandStyleID is the SKU of the style
-    async GetStyleByBrandStyleID(styleSKU) {
-      console.debug("getStyleByBrandStyleID:", styleSKU);
-      if (!styleSKU) throw new Error("styleSKU is required for GetStyleByBrandStyleID");
-      const isLoggedIn = await this.IsLoggedIn();
-      console.debug("isLoggedIn", isLoggedIn, "BrandID:", this.BrandID);
+    async GetStyleByExernalID(externalID) {
+      if (!externalID) throw new Error("externalID is required for GetStyleByExernalID");
+      await this.IsLoggedIn();
       try {
         const constraints = [where("brand_id", "==", this.BrandID)];
-        constraints.push(where("brand_style_id", "==", styleSKU));
+        constraints.push(where("external_id", "==", externalID));
+        console.debug("Debug: Executing Firestore query with constraints:", {
+          brand_id: this.BrandID,
+          external_id: externalID
+        });
         const querySnapshot = await this.firebase.getDocs("styles", constraints);
+        console.debug("Debug: Firestore query result:", {
+          size: querySnapshot.size,
+          empty: querySnapshot.empty,
+          externalID
+        });
         const style = querySnapshot.docs?.[0]?.data();
         console.debug("style fetched by brand id:", style);
         return style;
       } catch (error) {
-        console.debug("getStyleByBrandStyleID error:", styleSKU, error);
+        console.debug("GetStyleByExernalID error:", externalID, error);
         return getFirebaseError(error);
       }
     }
@@ -21883,9 +21955,9 @@ This typically indicates that your device does not have a healthy Internet conne
     return false;
   };
   class FittingRoomController {
-    constructor(env, shopID, styleSKU, noCacheOnRetry = false, modalDivId, sizeRecMainDivId, vtoMainDivId, cssVariables, hooks = {}) {
+    constructor(env, shopID, externalID, noCacheOnRetry = false, modalDivId, sizeRecMainDivId, vtoMainDivId, cssVariables, hooks = {}) {
       this.shopID = shopID;
-      this.styleSKU = styleSKU;
+      this.externalID = externalID;
       this.noCacheOnRetry = noCacheOnRetry;
       this.hooks = hooks;
       this.hasInitializedTryOn = false;
@@ -21933,7 +22005,7 @@ This typically indicates that your device does not have a healthy Internet conne
       console.debug("init");
       try {
         const authUserPromise = this.firebaseAuthUserController.GetUserOrNotLoggedIn();
-        const stylePromise = this.API.GetStyleByBrandStyleID(this.styleSKU);
+        const stylePromise = this.API.GetStyleByExernalID(this.externalID);
         await Promise.all([authUserPromise, stylePromise]);
         console.debug("promise all ready");
         const style = await stylePromise;
@@ -22141,7 +22213,7 @@ This typically indicates that your device does not have a healthy Internet conne
   const initFittingRoom = async ({
     env,
     shopId,
-    styleSKU,
+    externalID,
     modalDivId,
     sizeRecMainDivId,
     vtoMainDivId,
@@ -22153,7 +22225,7 @@ This typically indicates that your device does not have a healthy Internet conne
       const tfr = new FittingRoomController(
         env,
         shopId,
-        styleSKU,
+        externalID,
         noCacheOnRetry,
         modalDivId,
         sizeRecMainDivId,

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@thefittingroom/shop-ui",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "clean": "rm -rf dist",
     "clean:all": "rm -rf dist build",

package/.env.development

@@ -1,13 +0,0 @@
-VITE_LANGUAGE_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/${VERSION}/languages
-VITE_ASSETS_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/assets
-
-VITE_DEV_FIREBASE_API_KEY=AIzaSyDfjBWzpmzb-mhGN8VSURxzLg6nkzmKUD8
-VITE_DEV_FIREBASE_AUTH_DOMAIN=fittingroom-dev-5d248.firebaseapp.com
-VITE_DEV_FIREBASE_PROJECT_ID=fittingroom-dev-5d248
-VITE_DEV_FIREBASE_STORAGE_BUCKET=fittingroom-dev-5d248.appspot.com
-VITE_DEV_FIREBASE_MESSAGING_SENDER_ID=2298664147
-VITE_DEV_FIREBASE_APP_ID=1:2298664147:web:340bda75cd5d25f3997026
-VITE_DEV_FIREBASE_MEASUREMENT_ID=G-B7GDQ1Y9LL
-VITE_DEV_API_ENDPOINT=https://tfr.dev.thefittingroom.xyz
-VITE_DEV_API_VTO_TIMEOUT_MS=120000
-VITE_DEV_API_AVATAR_TIMEOUT_MS=120000

package/.env.example

@@ -1,23 +0,0 @@
-NODE_ENV
-LANGUAGE_URL
-ASSETS_URL
-DEV_FIREBASE_API_KEY
-DEV_FIREBASE_AUTH_DOMAIN
-DEV_FIREBASE_PROJECT_ID
-DEV_FIREBASE_STORAGE_BUCKET
-DEV_FIREBASE_MESSAGING_SENDER_ID
-DEV_FIREBASE_APP_ID
-DEV_FIREBASE_MEASUREMENT_ID
-DEV_API_ENDPOINT
-DEV_VTO_TIMEOUT_MS
-DEV_AVATAR_TIMEOUT_MS
-PROD_FIREBASE_API_KEY
-PROD_FIREBASE_AUTH_DOMAIN
-PROD_FIREBASE_PROJECT_ID
-PROD_FIREBASE_STORAGE_BUCKET
-PROD_FIREBASE_MESSAGING_SENDER_ID
-PROD_FIREBASE_APP_ID
-PROD_FIREBASE_MEASUREMENT_ID
-PROD_API_ENDPOINT
-PROD_API_VTO_TIMEOUT_MS
-PROD_API_AVATAR_TIMEOUT_MS

package/.env.production

@@ -1,14 +0,0 @@
-VITE_LANGUAGE_URL=https://assets.p.thefittingroom.xyz/shop-sdk/${VERSION}/languages
-VITE_ASSETS_URL=https://assets.p.thefittingroom.xyz/shop-sdk/assets
-
-VITE_FIREBASE_API_KEY=AIzaSyA3kQ6w1vkA9l9lgY0nNACVPXe-QmP5T1Y
-VITE_FIREBASE_AUTH_DOMAIN=fittingroom-prod.firebaseapp.com
-VITE_FIREBASE_PROJECT_ID=fittingroom-prod
-VITE_FIREBASE_STORAGE_BUCKET=fittingroom-prod.appspot.com
-VITE_FIREBASE_MESSAGING_SENDER_ID=965656825574
-VITE_FIREBASE_APP_ID=1:965656825574:web:933493cddc73213bd43527
-VITE_FIREBASE_MEASUREMENT_ID=G-XH9VV5N6EW
-
-VITE_API_ENDPOINT=https://tfr.p.thefittingroom.xyz
-VITE_API_VTO_TIMEOUT_MS=120000
-VITE_API_AVATAR_TIMEOUT_MS=120000

package/AGENTS.md

@@ -1,8 +0,0 @@
-You are a typescript developer working on an open-source ecmascript module that connects to firestore and a REST http server.
-The API endpoint payloads are generated in src/api/gen.
-The source code is deployed to github releases and served via jsdelivr.
-You may use playwright or chrome-devtools for debugging.
-Always include a simple lowercase console.debug statement in each function you define.
-Never add line comments.
-Always add function comments if the functions are complicated (more than 3 lines of code).
-

package/index.html

@@ -1,274 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<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.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',
-        }
-
-        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)
-
-        if (sku) {
-          tfr.SetColorwaySizeAssetBySKU(sku, variantSKUs, true)
-        }
-
-        // 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>
-
-    <div class="tfr-home-button-container">
-      <button
-        onclick="window.mm.open(window.comps.ErrorModal({error: 'custom error message', onNavBack: window.onNavBack, onClose: window.onClose}))">
-        Error Modal
-      </button>
-      <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}))">
-        Sign In Modal
-      </button>
-      <button
-        onclick="window.mm.open(window.comps.ForgotPasswordModal({email: 'email@mail.com', onNavSignIn: window.onNavSignIn('123'), onPasswordReset: window.onPasswordReset('123')}))">
-        Forgot Password Modal
-      </button>
-      <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>
-      <button
-        onclick="window.mm.open(window.comps.SizeErrorModal({onNavBack: window.onNavBack, onClose: window.onClose, sizes: {recommended: 'large', avaliable: ['small', 'medium', 'large']}}))">
-        Size Error Modal
-      </button>
-      <button onclick="window.mm.open(window.comps.ResetLinkModal({onNavSignIn: window.onNavSignIn('abc')}))">
-        Reset Link Modal
-      </button>
-    </div>
-  </div>
-</body>
-
-</html>

package/vite.config.js

@@ -1,39 +0,0 @@
-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 }
-})