@getspot/spot-widget 1.3.0 → 2.0.0

package/src/index.js

@@ -1,366 +0,0 @@
-import { fetchQuote, fetchMultipleQuotes } from "./api.js";
-import { validateOptions } from "./validateOptions.js";
-import {
-  renderHeader,
-  renderBenefits,
-  renderCoveredItems,
-  renderTable,
-  renderOptions,
-  renderFooter,
-  renderPaymentTerms,
-  makeEl,
-} from "./ui.js";
-
-import styles from "./styles.css?inline";
-
-function injectStyles(css) {
-  const styleTag = document.createElement("style");
-  styleTag.textContent = css;
-  document.head.appendChild(styleTag);
-}
-
-injectStyles(styles);
-
-const apiEndpoint = {
-  sandbox: "https://api.sandbox.getspot.com/api/v1/quote",
-  production: "https://api.getspot.com/api/v1/quote",
-  local: "http://localhost:3999/api/v1/quote"
-};
-
-class SpotWidget {
-  constructor(options = {}) {
-    this.options = {
-      location: "body",
-      showTable: true,
-      optInSelected: false,
-      apiConfig: { environment: "production", partnerId: "" },
-      quoteRequestData: {},
-      callbacks: {},
-      ...options,
-    };
-
-    this._onResize = this._updateLayout.bind(this);
-
-    this.root =
-      typeof this.options.location === "string"
-        ? document.querySelector(this.options.location)
-        : this.options.location;
-    this.currentSelection = this.options.optInSelected ? "yes" : null;
-    this._init();
-  }
-
-  async _init() {
-    try {
-      validateOptions(this.options);
-
-      const { environment, partnerId } = this.options.apiConfig;
-      const customEndpoint = this.options.apiConfig.customEndpoint;
-
-      const endpoint = customEndpoint || apiEndpoint[environment];
-
-      const isBatchQuote = this.options.quoteRequestData.cartInfo && this.options.quoteRequestData.items;
-      const response = isBatchQuote
-        ? await fetchMultipleQuotes(endpoint, partnerId, this.options.quoteRequestData)  
-        : await fetchQuote(endpoint, partnerId, this.options.quoteRequestData);
-
-      if (response.status !== "QUOTE_AVAILABLE") {
-        if (
-          response.status === "NO_MATCHING_QUOTE" &&
-          this.options.callbacks?.noMatchingQuote
-        ) {
-          this.options.callbacks.noMatchingQuote({
-            status: "NO_MATCHING_QUOTE",
-            data: this.options.quoteRequestData,
-          });
-        }
-        return;
-      }
-
-      this.quote = response.data;
-      this._renderWidget();
-
-      if (this.options.optInSelected && this.options.callbacks?.onOptIn) {
-        const optInData = {
-          status: "QUOTE_ACCEPTED",
-          spotPrice: this.quote.spotPrice,
-          quoteId: this.quote.id
-        };
-        
-        // For batch quotes, include detailed quote information
-        if (this.quote.originalQuotes && this.quote.originalQuotes.length > 0) {
-          optInData.batchQuoteDetails = this.quote.originalQuotes.map(q => {
-            const originalItem = this.options.quoteRequestData.items?.find(item => 
-              (item.cartItemId || `item-${this.options.quoteRequestData.items.indexOf(item) + 1}`) === q.cartItemId
-            );
-            return {
-              quoteId: q.id,
-              productPrice: originalItem?.productPrice || q.spotPrice,
-              cartItemId: q.cartItemId
-            };
-          });
-        }
-        
-        this.options.callbacks.onOptIn(optInData);
-      }
-
-      if (this.options.callbacks?.onQuoteRetrieved) {
-        this.options.callbacks.onQuoteRetrieved(this.quote);
-      }
-    } catch (err) {
-      if (this.options.callbacks?.onError) {
-        this.options.callbacks?.onError({
-          message: err.message,
-          status: err.status,
-          responseBody: err.responseBody,
-        });
-      }
-    }
-  }
-
-  _renderWidget() {
-    this.container = document.createElement("div");
-    this.container.className = "spot-refund-guarantee";
-    this.root.appendChild(this.container);
-
-    Object.entries(this.options.theme || {}).forEach(([k, v]) => {
-      const cssVariable = `--${k}`;
-      this.container.style.setProperty(cssVariable, v);
-    });
-
-    renderHeader(this.container, this.quote.communication);
-    const cw = document.createElement("div");
-    cw.className = "spot-content__wrapper";
-    this.container.appendChild(cw);
-
-    renderBenefits(cw, this.quote.communication.bulletPoints);
-    if (this.quote.coveredItems) {
-      renderCoveredItems(cw, this.quote.coveredItems);
-    }
-    if (this.options.showTable) renderTable(cw, this.quote.payoutSchedule);
-    const optsEl = renderOptions(
-      cw,
-      this.options.optInSelected,
-      this.quote.communication
-    );
-    cw.appendChild(optsEl);
-    this.paymentTermsEl = makeEl("div", {
-      className: "spot-payment-terms__wrapper",
-      parent: cw,
-    });
-    renderFooter(this.container, this.quote);
-
-    window.addEventListener("resize", this._onResize);
-    this._updateLayout();
-    this._setupOptionListeners(optsEl);
-  }
-
-  _updateLayout() {
-    const isDesktop = window.matchMedia("(min-width: 768px)").matches;
-    this.container
-      .querySelector(".spot-content__wrapper")
-      .classList.toggle("desktop-layout", isDesktop && this.options.showTable);
-  }
-
-  _setupOptionListeners(el) {
-    const radioButtons = el.querySelectorAll('input[type="radio"]');
-    const options = el.querySelectorAll(".spot-selection__option");
-
-    radioButtons.forEach((radio) => {
-      radio.addEventListener("change", (e) => {
-        const val = e.target.value;
-        this.hideSelectionError();
-
-        this.currentSelection = val;
-
-        options.forEach((label) => label.classList.remove("selected"));
-        e.target.closest(".spot-selection__option")?.classList.add("selected");
-
-        if (this.paymentTermsEl) this.paymentTermsEl.innerHTML = "";
-
-        if (val === "yes") {
-          if (this.options.quoteRequestData.isPartialPayment) {
-            renderPaymentTerms(this.paymentTermsEl, this.quote);
-          }
-          if (this.options.callbacks?.onOptIn) {
-            const optInData = {
-              status: "QUOTE_ACCEPTED",
-              spotPrice: this.quote.spotPrice,
-              quoteId: this.quote.id
-            };
-            
-            // For batch quotes, include detailed quote information
-            if (this.quote.originalQuotes && this.quote.originalQuotes.length > 0) {
-              optInData.batchQuoteDetails = this.quote.originalQuotes.map(q => {
-                const originalItem = this.options.quoteRequestData.items?.find(item => 
-                  (item.cartItemId || `item-${this.options.quoteRequestData.items.indexOf(item) + 1}`) === q.cartItemId
-                );
-                return {
-                  quoteId: q.id,
-                  productPrice: originalItem?.productPrice || q.spotPrice,
-                  cartItemId: q.cartItemId
-                };
-              });
-            }
-            
-            this.options.callbacks.onOptIn(optInData);
-          }
-        }
-        if (val === "no" && this.options.callbacks?.onOptOut) {
-          const optOutData = {
-            status: "QUOTE_DECLINED",
-            quoteId: this.quote.id
-          };
-          
-          // For batch quotes, include detailed quote information
-          if (this.quote.originalQuotes && this.quote.originalQuotes.length > 0) {
-            optOutData.batchQuoteDetails = this.quote.originalQuotes.map(q => {
-              const originalItem = this.options.quoteRequestData.items?.find(item => 
-                (item.cartItemId || `item-${this.options.quoteRequestData.items.indexOf(item) + 1}`) === q.cartItemId
-              );
-              return {
-                quoteId: q.id,
-                productPrice: originalItem?.productPrice || q.spotPrice,
-                cartItemId: q.cartItemId
-              };
-            });
-          }
-          
-          this.options.callbacks.onOptOut(optOutData);
-        }
-      });
-    });
-  }
-
-  showSelectionError() {
-    if (!this.errorEl) {
-      this.errorEl = document.createElement("div");
-      this.errorEl.className = "spot-selection__error";
-      this.errorEl.textContent = "Please make a selection";
-      const optionsContainer = this.container?.querySelector(
-        ".spot-selection__options"
-      );
-      if (optionsContainer) {
-        optionsContainer.insertAdjacentElement("afterend", this.errorEl);
-      }
-    }
-
-    this.errorEl.style.display = "block";
-  }
-
-  hideSelectionError() {
-    if (this.errorEl) {
-      this.errorEl.style.display = "none";
-    }
-  }
-
-  validateSelection() {
-    if (!this.container) return false;
-
-    const isSelected = !!this.container.querySelector(
-      'input[name="selection"]:checked'
-    );
-
-    if (!isSelected) {
-      this.showSelectionError();
-    } else {
-      this.hideSelectionError();
-    }
-
-    return isSelected;
-  }
-
-  async updateQuote(newQuoteRequestData) {
-    try {
-      const updatedOptions = {
-        ...this.options,
-        quoteRequestData: newQuoteRequestData
-      };
-
-      validateOptions(updatedOptions);
-
-      const {
-        environment,
-        partnerId,
-        endpoint: customEndpoint,
-      } = this.options.apiConfig;
-
-      const endpoint = customEndpoint || apiEndpoint[environment];
-
-      const isBatchQuote = updatedOptions.quoteRequestData.cartInfo && updatedOptions.quoteRequestData.items;
-      const response = isBatchQuote
-        ? await fetchMultipleQuotes(endpoint, partnerId, updatedOptions.quoteRequestData)
-        : await fetchQuote(endpoint, partnerId, updatedOptions.quoteRequestData);
-
-      if (response.status !== "QUOTE_AVAILABLE") {
-        if (
-          response.status === "NO_MATCHING_QUOTE" &&
-          this.options.callbacks?.noMatchingQuote
-        ) {
-          this.options.callbacks.noMatchingQuote({
-            status: "NO_MATCHING_QUOTE",
-            data: updatedOptions.quoteRequestData,
-          });
-        }
-        return false;
-      }
-
-      this.options.quoteRequestData = updatedOptions.quoteRequestData;
-      this.quote = response.data;
-      this.currentSelection = null;
-
-      this.destroy();
-
-      this._renderWidget();
-
-      if (this.options.callbacks?.onQuoteRetrieved) {
-        this.options.callbacks.onQuoteRetrieved(this.quote);
-      }
-
-      return true;
-    } catch (err) {
-      this.options.callbacks?.onError({
-        message: err.message,
-        status: err.status,
-        responseBody: err.responseBody,
-      });
-      return false;
-    }
-  }
-
-  getSelection() {
-    if (this.currentSelection == null) return null;
-
-    const selectionData = {
-      selection: this.currentSelection,
-      quoteId: this.quote?.id,
-      spotPrice: this.quote?.spotPrice,
-      status:
-        this.currentSelection === "yes" ? "QUOTE_ACCEPTED" : "QUOTE_DECLINED"
-    };
-    
-    // For batch quotes, include detailed quote information
-    if (this.quote?.originalQuotes && this.quote.originalQuotes.length > 0) {
-      selectionData.batchQuoteDetails = this.quote.originalQuotes.map(q => {
-        const originalItem = this.options.quoteRequestData.items?.find(item => 
-          (item.cartItemId || `item-${this.options.quoteRequestData.items.indexOf(item) + 1}`) === q.cartItemId
-        );
-        return {
-          quoteId: q.id,
-          productPrice: originalItem?.productPrice || q.spotPrice,
-          cartItemId: q.cartItemId
-        };
-      });
-    }
-    
-    return selectionData;
-  }
-
-  destroy() {
-    window.removeEventListener("resize", this._onResize);
-    if (this.container && this.container.parentNode) {
-      this.container.parentNode.removeChild(this.container);
-    }
-  }
-}
-
-export default SpotWidget;