npm - @perceptimagery/dita-configurator-staging - Versions diffs - 0.1.4001 → 0.1.4003 - Mend

@perceptimagery/dita-configurator-staging 0.1.4001 → 0.1.4003

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 (3) hide show

package/README.md CHANGED Viewed

@@ -1,27 +1,47 @@
-# React + TypeScript + Vite
+# Dita-configurator -preview
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+| An embeddable package for `Previewing | and changing.` SKUs
-Currently, two official plugins are available:
+## Documentation
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+<https://docs.sprie.io/docs/?/>
-## Expanding the ESLint configuration
+## Usage
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+Prod: `https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator@latest`
+Dev : `https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator-staging@latest`
-- Configure the top-level `parserOptions` property like this:
+```HTML
+<!-- index.html -->
+<!-- Declare element with id `‘dita-3dconfig-element’` . This will get transformed after authentication -->
+   <div
+       id="‘dita-3dconfig-element’"
+   ></div>
+<!-- Inject `Dita configurator` from CDN -->
+<script src="https://cdn.jsdelivr.net/npm/@perceptimagery/dita-configurator@latest?apikey={apikey}"></script>
+<!-- call our sdk and load your sku  and add event listener for `add-to-cart` event -->
+<!-- Our SDK exposes the Dita  -->
+<script>
+    function run() {
+      const SKU = "YOUR-SKU-CODE";
+      window.ditaConfigurator.load(SKU);
+      window.ditaConfigurator.events.on("add-to-cart",(eventData)=>{
+        console.log(eventData);
+      })
+    }
+    // on document load execute our run function
+    window.onload = () => { run(); } // to make sure our sdk and DOM is successfully loaded.
+</script>
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
 ```
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package/dist/index.js CHANGED Viewed

@@ -4,7 +4,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml,\nbody,\n#dita-3dconfig-element {\n  width: 100%;\n  height: 100%;\n  font-family: 'Work Sans', sans-serif;\n}\n\n.loadingBox {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  fontsize: 24px;\n  font-weight: 500;\n  z-index: 1000;\n  background: #f2f2f2;\n}\n.my-btn {\n  border: 1px solid gray;\n  border-radius: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n  transition: all 300ms ease-in;\n}\n\n.my-btn:hover {\n  box-shadow: 0 0 2px 3px gray;\n}\n.my-panel {\n  border: 1px solid gray;\n  padding: 10px 20px;\n  border-radius: 10px;\n  margin: 10px auto;\n}\n\n.my-panel h3 {\n  font-family: sans-serif;\n}\n#Main-Container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  background: #ffffff;\n}\n\n#Viewer-Container {\n  width: 100%;\n  /* height: 100%; */\n}\n\n#Viewer-Container .webgl {\n  /* border: 1px solid #000; */\n  width: 100%;\n  height: 99%;\n}\n\n#Checkout-Container {\n  width: 100%;\n  padding: 0.75rem;\n  height: min(65%, 35rem);\n}\n\n#Checkout-box {\n  width: 100%;\n  background: #efefef;\n  padding: 1rem;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#Checkout-header {\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  padding-bottom: 0.9rem;\n  border-bottom: 1px solid #ccc;\n  margin-bottom: 2.5rem;\n}\n\n#Checkout-header .name {\n  font-size: 1.375rem;\n  font-weight: 400;\n  line-height: 1.5275rem; /* 111.091% */\n  letter-spacing: -0.05rem;\n  text-transform: uppercase;\n}\n\n#Checkout-header .price {\n  color: #222;\n  font-size: 1.3125rem;\n  font-weight: 400;\n  line-height: 2.275rem; /* 173.333% */\n}\n\n#Checkout-body {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  flex: 1;\n}\n\n#Checkout-button {\n  display: flex;\n  padding: 0rem 1.25rem;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  background: #222;\n  color: #fff;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 3.5rem; /* 400% */\n  letter-spacing: 0.125rem;\n  text-transform: uppercase;\n  cursor: pointer;\n  /* margin-top : 7rem */\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n  #Main-Container {\n    flex-direction: row-reverse;\n  }\n\n  #Checkout-Container {\n    width: auto;\n    padding: 2.5rem;\n    height: 100%;\n  }\n\n  #Checkout-box {\n    width: 350px;\n    padding: 1.5rem;\n  }\n}\n\n@media (min-width: 992px) {\n  #Checkout-box {\n    width: 450px;\n    padding: 2.5rem;\n  }\n}\n/* Dropdown.css */\n\n.label {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.02813rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.1rem;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.select-box {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  /* border: 1px solid #ccc; */\n  border-radius: 5px;\n  position: relative;\n  user-select: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-radius 0.3s ease;\n  padding: 1rem 1.25rem;\n  background-color: #ffffff;\n  max-height: 17rem; /* Set the fixed height for the dropdown */\n  overflow-y: auto;\n}\n\n.select-box.open {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.selected-option {\n  flex: 1;\n}\n\n.arrow {\n  margin-left: 10px;\n  transition: transform 0.3s ease;\n}\n\n.arrow.up {\n  transform: rotate(180deg);\n}\n\n.dropdown-options {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  background-color: #fff;\n  border-top: 1px solid #ccc;\n  border-radius: 0 0 5px 5px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  visibility: hidden;\n  overflow: hidden;\n  transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;\n  max-height: 17rem; /* Set the fixed height for the dropdown */\n  overflow-y: auto;\n}\n\n.dropdown-options.open {\n  opacity: 1;\n  visibility: visible;\n  height: auto;\n}\n\n.dropdown-options li {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.dropdown-options li:hover {\n  background-color: #f0f0f0;\n}\n\n.dropdown-options li.selected {\n  background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.frame-details-wrapper {\n  display: flex;\n  gap: 1rem;\n  height: auto;\n}\n\n.variantImgBox {\n  width: 3.4rem;\n  height: 100%;\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n  background: #fff;\n}\n\n.details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.details .frameName {\n  color: #4d4d4d;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n}\n\n.details .skuName {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 0.96125rem; /* 109.857% */\n  letter-spacing: 0.02813rem;\n  text-transform: uppercase;\n}/* LensDropdown.css */\n\n.label {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.02813rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.1rem;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.select-box {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  /* padding: 1rem 1.25rem; */\n  border-radius: 0.125rem;\n  position: relative;\n  user-select: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-radius 0.3s ease;\n  background-color: #ffffff;\n}\n\n.select-box.open {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.selected-lens {\n  flex: 1;\n  display: flex;\n  gap: 1rem;\n  height: auto;\n}\n\n.selected-lens .lens-details {\n  display: flex;\n  flex-direction: column;\n  height: auto;\n}\n\n.colorBox {\n  width: 3.4rem;\n  height: 2.5rem;\n}\n\n.lensName {\n  color: #4d4d4d;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n}\n\n.lensColor {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 0.96125rem; /* 109.857% */\n  letter-spacing: 0.02813rem;\n  text-transform: uppercase;\n}\n\n.arrow {\n  margin-left: 10px;\n  transition: transform 0.3s ease;\n}\n\n.arrow.up {\n  transform: rotate(180deg);\n}\n\n.lens-dropdown-options {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 100; /* Adjust z-index to ensure dropdown options are above other elements */\n  background-color: #fff;\n  border-radius: 0 0 0.125rem 0.125rem;\n  border: 0;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  max-height: 4rem; /* Set the fixed height for the dropdown */\n  overflow-x: auto;\n  overflow-y: hidden;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: no-wrap;\n  padding: 0.5rem;\n}\n\n.lens-dropdown-options.open {\n  opacity: 1;\n  visibility: visible;\n}\n\n.lens-dropdown-options li {\n  padding: 1rem 1.25rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  min-width: 3.5rem;\n  height: 2.625rem;\n  padding: 0.25rem;\n}\n\n.lens-dropdown-options li .li-element {\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n}\n\n.lens-dropdown-options li .tooltip {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .lens-dropdown-options {\n    max-height: 9.2rem;\n    overflow-x: hidden;\n    overflow-y: auto;\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    padding: 0.5rem;\n    border-top: 1px solid #ccc;\n  }\n\n  .lens-dropdown-options li {\n    min-width: auto;\n  }\n\n  .lens-dropdown-options li .tooltip {\n    position: absolute;\n    width: auto;\n    height: 2rem;\n    flex-shrink: 0;\n    border-radius: 0.125rem;\n    background: #fff;\n    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);\n    text-align: center;\n    line-height: 2rem;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n    display: block;\n\n    /* Font style properties */\n    color: rgba(34, 34, 34, 0.7);\n    font-size: 0.875rem;\n    font-weight: 400;\n    letter-spacing: 0.02813rem;\n    text-transform: uppercase;\n    white-space: nowrap; /* Ensure text is in one line */\n    z-index: 200;\n  }\n\n  .tooltip.top {\n    bottom: 12%;\n  }\n\n  .tooltip.right {\n    right: 2%;\n  }\n}"));
+      elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml,\nbody,\n#dita-3dconfig-element {\n  width: 100%;\n  height: 100%;\n  font-family: 'Work Sans', sans-serif;\n}\n\n.loadingBox {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  fontsize: 24px;\n  font-weight: 500;\n  z-index: 1000;\n  background: #f2f2f2;\n}\n.my-btn {\n  border: 1px solid gray;\n  border-radius: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n  transition: all 300ms ease-in;\n}\n\n.my-btn:hover {\n  box-shadow: 0 0 2px 3px gray;\n}\n.my-panel {\n  border: 1px solid gray;\n  padding: 10px 20px;\n  border-radius: 10px;\n  margin: 10px auto;\n}\n\n.my-panel h3 {\n  font-family: sans-serif;\n}\n#Main-Container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  background: #ffffff;\n}\n\n#Viewer-Container {\n  width: 100%;\n  /* height: 100%; */\n  position: relative;\n}\n\n#Viewer-Container .webgl {\n  width: 100%;\n  height: 99%;\n}\n\n#Checkout-Container {\n  width: 100%;\n  padding: 0.75rem;\n  height: min(70%, 45rem);\n}\n\n#Checkout-box {\n  width: 100%;\n  background: #efefef;\n  padding: 1rem;\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n#Checkout-header {\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  padding-bottom: 0.9rem;\n  border-bottom: 1px solid #ccc;\n  margin-bottom: 2.5rem;\n}\n\n#Checkout-header .name {\n  font-size: 1.375rem;\n  font-weight: 400;\n  line-height: 1.5275rem; /* 111.091% */\n  letter-spacing: -0.05rem;\n  text-transform: uppercase;\n}\n\n#Checkout-header .price {\n  color: #222;\n  font-size: 1.3125rem;\n  font-weight: 400;\n  line-height: 2.275rem; /* 173.333% */\n}\n\n#Checkout-body {\n  display: flex;\n  flex-direction: column;\n}\n\n#Dropdown-Container {\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n#Checkout-button {\n  display: flex;\n  padding: 0rem 1.25rem;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  background: #222;\n  color: #fff;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 3.5rem; /* 400% */\n  letter-spacing: 0.125rem;\n  text-transform: uppercase;\n  cursor: pointer;\n  margin-top: 6rem;\n}\n\n.loadingFrame {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  fontsize: 24px;\n  font-weight: 500;\n  z-index: 1000;\n  background: #f2f2f2;\n  opacity: 0.8\n}\n\n.loader {\n  border: 8px solid #f3f3f3; /* Light grey */\n  border-top: 8px solid #222222; /* Blue */\n  border-radius: 50%;\n  width: 60px;\n  height: 60px;\n  animation: spin 1.5s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n  #Main-Container {\n    flex-direction: row-reverse;\n  }\n\n  #Checkout-Container {\n    width: auto;\n    padding: 2.5rem;\n    height: 100%;\n  }\n\n  #Checkout-box {\n    width: 350px;\n    padding: 1.5rem;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  #Dropdown-Container {\n    gap: 2.5rem;\n  }\n}\n\n@media (min-width: 992px) {\n  #Checkout-box {\n    width: 450px;\n    padding: 2.5rem;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n}\n/* Dropdown.css */\n\n.label {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.02813rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.1rem;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.select-box {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  /* border: 1px solid #ccc; */\n  border-radius: 5px;\n  position: relative;\n  user-select: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-radius 0.3s ease;\n  padding: 1rem 1.25rem;\n  background-color: #ffffff;\n  max-height: 17rem; /* Set the fixed height for the dropdown */\n  overflow-y: auto;\n}\n\n.select-box.open {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.selected-option {\n  flex: 1;\n}\n\n.arrow {\n  margin-left: 10px;\n  transition: transform 0.3s ease;\n}\n\n.arrow.up {\n  transform: rotate(180deg);\n}\n\n.dropdown-options {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  background-color: #fff;\n  border-top: 1px solid #ccc;\n  border-radius: 0 0 5px 5px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  visibility: hidden;\n  overflow: hidden;\n  transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;\n  max-height: 17rem; /* Set the fixed height for the dropdown */\n  overflow-y: auto;\n}\n\n.dropdown-options.open {\n  opacity: 1;\n  visibility: visible;\n  height: auto;\n  z-index : 1000;\n}\n\n.dropdown-options li {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.dropdown-options li:hover {\n  background-color: #f0f0f0;\n}\n\n.dropdown-options li.selected {\n  background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.selected-option {\n  width: 90%;\n}\n\n.frame-details-wrapper {\n  display: flex;\n  gap: 1rem;\n  height: auto;\n  overflow: hidden;\n}\n\n.variantImgBox {\n  width: 3.4rem;\n  height: 100%;\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n  background: #fff;\n}\n\n.details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  overflow: hidden;\n}\n\n.details .frameName {\n  color: #4d4d4d;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.details .skuName {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 0.96125rem; /* 109.857% */\n  letter-spacing: 0.02813rem;\n  text-transform: uppercase;\n}\n/* LensDropdown.css */\n\n.label {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.02813rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.1rem;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.select-box {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  /* padding: 1rem 1.25rem; */\n  border-radius: 0.125rem;\n  position: relative;\n  user-select: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-radius 0.3s ease;\n  background-color: #ffffff;\n}\n\n.select-box.open {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.selected-lens {\n  flex: 1;\n  display: flex;\n  gap: 1rem;\n  height: auto;\n}\n\n.selected-lens .lens-details {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: auto;\n  padding-bottom: 0.2rem\n}\n\n.colorBox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lensName {\n  color: #4d4d4d;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n}\n\n.lensColor {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 0.96125rem; /* 109.857% */\n  letter-spacing: 0.02813rem;\n  text-transform: uppercase;\n}\n\n.arrow {\n  margin-left: 10px;\n  transition: transform 0.3s ease;\n}\n\n.arrow.up {\n  transform: rotate(180deg);\n}\n\n.lens-dropdown-options {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 100; /* Adjust z-index to ensure dropdown options are above other elements */\n  background-color: transparent;\n  border-radius: 0 0 0.125rem 0.125rem;\n  border: 0;\n  box-shadow: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  max-height: 4rem; /* Set the fixed height for the dropdown */\n  overflow-x: auto;\n  overflow-y: hidden;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: no-wrap;\n  padding: 0;\n}\n\n.lens-dropdown-options.open {\n  opacity: 1;\n  visibility: visible;\n}\n\n.lens-dropdown-options li {\n  padding: 1rem 1.25rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  padding: 0.25rem;\n}\n\n.lens-dropdown-options li .li-element {\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lens-dropdown-options li .tooltip {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .lens-dropdown-options {\n    max-height: 9.2rem;\n    overflow-x: hidden;\n    overflow-y: auto;\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    padding: 0.5rem;\n    border-top: 1px solid #ccc;\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n\n  .lens-dropdown-options li {\n    min-width: auto;\n  }\n\n  .lens-dropdown-options li .tooltip {\n    position: absolute;\n    width: auto;\n    height: 2rem;\n    flex-shrink: 0;\n    border-radius: 0.125rem;\n    background: #fff;\n    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);\n    text-align: center;\n    line-height: 2rem;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n    display: block;\n\n    /* Font style properties */\n    color: rgba(34, 34, 34, 0.7);\n    font-size: 0.875rem;\n    font-weight: 400;\n    letter-spacing: 0.02813rem;\n    text-transform: uppercase;\n    white-space: nowrap; /* Ensure text is in one line */\n    z-index: 200;\n  }\n\n  .tooltip.top {\n    bottom: 12%;\n  }\n\n  .tooltip.right {\n    right: 2%;\n  }\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -111,7 +111,7 @@ var __publicField = (obj, key, value) => {
     host: "https://api.sprie.io"
   };
   const config = Object.freeze(Config$1);
-  const version = "0.1.4001";
+  const version = "0.1.4003";
   class APIServiceFactory {
     constructor(fetcher) {
       __publicField(this, "isAuthenticated");
@@ -170,7 +170,7 @@ var __publicField = (obj, key, value) => {
     }
     // Lens-list call
     async FetchCustomisationList() {
-      const url = `/v1/widget/list-customisation?search=type:Lens&limit=50`;
+      const url = `/v1/widget/list-customisation?search=type:Lens,usage:customizer&limit=50`;
       const response = await this.fetcher.Get(url);
       return response;
     }
@@ -40631,7 +40631,12 @@ var __publicField = (obj, key, value) => {
   const MainContainer$1 = "";
   const FrameDropdown$1 = "";
   const dropdownIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDlMMTIuNzgwOSAxNC4zMzA2QzEyLjMzMTYgMTQuNzE1OCAxMS42Njg0IDE0LjcxNTggMTEuMjE5MSAxNC4zMzA2TDUgOSIgc3Ryb2tlPSIjNEQ0RDREIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=";
-  function FrameDropdown({ label, options, selectedFrame, changeFrame }) {
+  function FrameDropdown({
+    label,
+    options,
+    selectedFrame,
+    changeFrame
+  }) {
     const [isOpen, setIsOpen] = reactExports.useState(false);
     const dropdownRef = reactExports.useRef(null);
     const handleToggleDropdown = () => {
@@ -40654,23 +40659,55 @@ var __publicField = (obj, key, value) => {
     }, []);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dropdown-wrapper", ref: dropdownRef, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "label", children: label }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `select-box ${isOpen ? "open" : ""}`, onClick: handleToggleDropdown, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "selected-option frame-details-wrapper", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "variantImgBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: selectedFrame && selectedFrame.variantImage, alt: "variant-img", className: "variantImg", width: 50, height: 42 }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "frameName", children: selectedFrame && selectedFrame.name }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "skuName", children: selectedFrame && selectedFrame.sku })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: dropdownIcon, alt: "dropdown-icon", className: `arrow ${isOpen ? "up" : ""}` })
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `select-box ${isOpen ? "open" : ""}`,
+          onClick: handleToggleDropdown,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "selected-option frame-details-wrapper", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "variantImgBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: selectedFrame && selectedFrame.variantImage,
+                  alt: "variant-img",
+                  className: "variantImg",
+                  width: 50,
+                  height: 42
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "frameName", children: selectedFrame && selectedFrame.name }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "skuName", children: selectedFrame && selectedFrame.sku })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "img",
+              {
+                src: dropdownIcon,
+                alt: "dropdown-icon",
+                className: `arrow ${isOpen ? "up" : ""}`
+              }
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: `dropdown-options ${isOpen ? "open" : ""}`, children: options && options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "li",
         {
           onClick: () => handleSelectOption(option),
           className: `frame-details-wrapper ${selectedFrame && selectedFrame.name === option.name ? "selected" : ""}`,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "variantImgBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: option.variantImage, alt: "variant-img", className: "variantImg", width: 50, height: 42 }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "variantImgBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "img",
+              {
+                src: option.variantImage,
+                alt: "variant-img",
+                className: "variantImg",
+                width: 50,
+                height: 42
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "details", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "frameName", children: option.name }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "skuName", children: option.sku })
@@ -40747,13 +40784,13 @@ var __publicField = (obj, key, value) => {
           },
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "selected-lens", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "colorBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
                 {
-                  className: "colorBox",
-                  style: { backgroundColor: selectedLens && selectedLens.color }
+                  src: selectedLens && selectedLens.thumbnail,
+                  width: 50
                 }
-              ),
+              ) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "lens-details", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "lensName", children: selectedLens && selectedLens.name }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "lensColor", children: selectedLens && selectedLens.sku })
@@ -40780,16 +40817,16 @@ var __publicField = (obj, key, value) => {
             {
               className: selectedLens && selectedLens.name === option.name ? "selected" : "",
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "li-element", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "img",
                   {
-                    className: "li-element",
-                    style: { backgroundColor: option.color },
+                    src: option.thumbnail,
+                    width: 50,
                     onClick: () => handleSelectOption(option),
                     onMouseEnter: () => handleHoverOption(option),
                     onMouseLeave: () => setHoveredOption(null)
                   }
-                ),
+                ) }),
                 hoveredOption === option && /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "div",
                   {
@@ -40811,15 +40848,17 @@ var __publicField = (obj, key, value) => {
   async function changeCustomRenderer({
     orgId,
     apiService,
-    frameList
+    frameList,
+    setLoading
   }) {
     customRenderer = new CustomRenderer(apiService);
     customRenderer.intialize();
+    setLoading(true);
     const apiRes = await apiService.DownloadMA({
       orgId,
       assetsId: frameList[0]._id
     });
-    customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey);
+    customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey).then(() => setLoading(false));
   }
   function MainContainer({
     orgName,
@@ -40830,19 +40869,22 @@ var __publicField = (obj, key, value) => {
   }) {
     const [selectedFrame, setSelectedFrame] = reactExports.useState();
     const [selectedLens, setSelectedLens] = reactExports.useState();
+    const [modelLoading, setModelLoading] = reactExports.useState(false);
     const orgId = apiService.fetcher.LoadConfig().ORGID;
     const changeFrame = (frame) => {
       if (customRenderer) {
         (async () => {
+          setModelLoading(true);
           const apiRes = await apiService.DownloadMA({
             orgId,
             assetsId: frame._id
           });
-          customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey).then(
-            () => customRenderer.setupLensMaterial(
+          customRenderer.renderModel(apiRes.asset.cloudfrontUrl, apiRes.decryptionKey).then(() => {
+            setModelLoading(false);
+            customRenderer.setupLensMaterial(
               selectedLens
-            )
-          );
+            );
+          });
         })();
       }
       setSelectedFrame(frame);
@@ -40855,7 +40897,12 @@ var __publicField = (obj, key, value) => {
     };
     reactExports.useEffect(() => {
       if (apiService && frameList && orgId) {
-        changeCustomRenderer({ apiService, frameList, orgId });
+        changeCustomRenderer({
+          apiService,
+          frameList,
+          orgId,
+          setLoading: setModelLoading
+        });
       }
     }, [apiService, frameList, orgId]);
     reactExports.useEffect(() => {
@@ -40873,7 +40920,7 @@ var __publicField = (obj, key, value) => {
             "div",
             {
               id: "Dropdown-Container",
-              style: { display: frameList && lensList ? "block" : "none" },
+              style: { display: frameList && lensList ? "flex" : "none" },
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   FrameDropdown,
@@ -40884,8 +40931,6 @@ var __publicField = (obj, key, value) => {
                     changeFrame
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   LensDropdown,
                   {
@@ -40904,18 +40949,26 @@ var __publicField = (obj, key, value) => {
               id: "Checkout-button",
               onClick: () => {
                 if (selectedFrame && selectedLens) {
-                  customEvent.emitEvent("onAddToCart", {
+                  const eventData = {
                     frameSku: selectedFrame.sku,
                     lensSku: selectedLens.sku
-                  });
+                  };
+                  customEvent.emitEvent("onAddToCart", eventData);
                 }
               },
+              type: "button",
               children: "Finalise & Add to cart"
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Viewer-Container", children: /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { className: "webgl" }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Viewer-Container", children: [
+        modelLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "loadingFrame", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "loader" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { className: "webgl" })
+      ] })
     ] });
   }
   function App({ apiService, sku, events: events2 }) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@perceptimagery/dita-configurator-staging",
-  "version": "0.1.4001",
+  "version": "0.1.4003",
   "author": "Abhishek Deb <abhishek@perceptimagery.com>",
   "license": "UNLICENSED",
   "main": "dist/index.js",