@kelviq/js-promotions-ui 0.0.1

package/src/http-utils.ts

@@ -0,0 +1,62 @@
+import { PricingData } from "./types";
+
+export const API_URL = import.meta.env.VITE_API_URL;
+
+export const SANDBOX_API_URL = import.meta.env.VITE_SANDBOX_API_URL;
+
+export const ERROR_MSG =
+  "Oops! Something went wrong. Please email hi@kelviq.com";
+
+export interface FetchPricingDataOptions {
+  promotionId?: string;
+  environment?: string;
+  accessToken?: string;
+}
+
+export function fetchPricingData(
+  config: FetchPricingDataOptions
+): Promise<PricingData | null> {
+  return new Promise(function (resolve, reject) {
+    const request = new XMLHttpRequest();
+
+    const searchParams = new URLSearchParams();
+
+    const { promotionId, environment = "production", accessToken } = config;
+
+    if (promotionId) {
+      searchParams.append("promotion_id", promotionId);
+    }
+
+    const params = searchParams.toString();
+
+    const apiUrl = environment === "sandbox" ? SANDBOX_API_URL : API_URL;
+
+    request.open("GET", `${apiUrl}?${params}`, true);
+
+    if (accessToken) {
+      request.setRequestHeader("Authorization", `Bearer ${accessToken}`);
+    }
+
+    request.onload = function () {
+      if (this.status >= 200 && this.status < 400) {
+        try {
+          const data = JSON.parse(this.response);
+          resolve(data);
+        } catch (error) {
+          console.error("Error parsing API response:", error);
+          reject(new Error("Failed to parse API response"));
+        }
+      } else {
+        console.error(ERROR_MSG, this.status);
+        reject(new Error("API request failed with status " + this.status));
+      }
+    };
+
+    request.onerror = function () {
+      console.error("Network error occurred");
+      reject(new Error("Network error occurred"));
+    };
+
+    request.send();
+  });
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { KQPromotionUISDK } from "./sdk";
+// entry point for the package

package/src/public-script.js

@@ -0,0 +1,44 @@
+function resolvePdSDKFunction(e, ...t) {
+  return new Promise((n, i) => {
+    !(function r() {
+      window.KQPromotionUISDK && "function" == typeof window.KQPromotionUISDK[e]
+        ? window.KQPromotionUISDK[e](...t)
+            .then(n)
+            .catch(i)
+        : setTimeout(r, 100);
+    })();
+  });
+}
+(!(function (e, t, n, i, r, a, c) {
+  ((e[i] =
+    e[i] ||
+    function () {
+      (e[i].q = e[i].q || []).push(Array.prototype.slice.call(arguments));
+    }),
+    (a = t.createElement(n)),
+    (c = t.getElementsByTagName(n)[0]),
+    (a.id = "kelviq-sdk"),
+    (a.async = 1),
+    (a.src = r),
+    c.parentNode.insertBefore(a, c));
+})(
+  window,
+  document,
+  "script",
+  "KQPromotionUISDK",
+  "https://cdn.kelviq.com/js-promotions-ui/0.0.1/js-promotions-ui.umd.js"
+),
+  (window.KQPromotionUI = {
+    init: function (e) {
+      KQPromotionUISDK("init", e);
+    },
+    getUpdatedPrice: function (e, t) {
+      return resolvePdSDKFunction("getUpdatedPrice", e, t);
+    },
+    updatePriceElement: function (e, t) {
+      return resolvePdSDKFunction("updatePriceElement", e, t);
+    },
+    updatePrice: function (e) {
+      return resolvePdSDKFunction("updatePrice", e);
+    },
+  }));

package/src/sdk.ts

@@ -0,0 +1,504 @@
+import { findRelatedElements } from "./dom-utils";
+import { fetchPricingData } from "./http-utils";
+import { DefaultConfig, PricingData, PriceObject } from "./types";
+import { CurrencyDisplay, DEFAULT_CONFIG, pdFormatCurrency } from "./utils";
+
+interface KQPromotionUISDK {
+  init: (options: Partial<DefaultConfig>) => Promise<PricingData | null>;
+  getUpdatedPrice: (
+    price: number,
+    options?: Partial<DefaultConfig>
+  ) => Promise<PriceObject | undefined>;
+  updatePriceElement: (
+    element: HTMLElement,
+    options?: Partial<DefaultConfig>
+  ) => Promise<PriceObject | undefined>;
+  updatePrice: (
+    priceConfigs: {
+      element: HTMLElement;
+      price: number;
+      options?: Partial<DefaultConfig>;
+    }[]
+  ) => unknown;
+}
+
+export const KQPromotionUISDK = function (window: Window, document: Document) {
+  // Default configuration
+
+  let pricingData: PricingData | null = null;
+  let initPromise: Promise<PricingData | null> | null = null;
+  let config: DefaultConfig = { ...DEFAULT_CONFIG };
+
+  // Add this at the beginning to handle queued commands
+  const queue = (window as any).KQPromotionUISDK.q || [];
+
+  function mergeConfig(customConfig: Partial<DefaultConfig>) {
+    config = { ...DEFAULT_CONFIG, ...customConfig };
+  }
+
+  function updateBodyClasses() {
+    const hasDiscount = pricingData && pricingData.percentage;
+    document.body.classList.toggle("kq-discount-applied", !!hasDiscount);
+  }
+
+  function updatePrices() {
+    if (!pricingData) return;
+
+    updateBodyClasses();
+
+    const priceElements = document.querySelectorAll("[data-kq-price]");
+    for (let i = 0; i < priceElements.length; i++) {
+      const element = priceElements[i] as HTMLElement;
+      updatePriceElementInternal(element, false);
+
+      const relatedElements = findRelatedElements(element);
+      if (relatedElements) {
+        relatedElements.forEach(relatedElement => {
+          if (
+            relatedElement !== element &&
+            relatedElement.hasAttribute("data-kq-original-price-display")
+          ) {
+            updatePriceElementInternal(
+              relatedElement as HTMLElement,
+              true,
+              element
+            );
+          }
+        });
+      }
+    }
+  }
+
+  function getPriceOptions(element: HTMLElement): Partial<DefaultConfig> {
+    return {
+      showDecimal:
+        element.getAttribute("data-kq-show-decimal") !== null
+          ? element.getAttribute("data-kq-show-decimal") !== "false"
+          : config.showDecimal,
+      minimumDecimalDigits:
+        element.getAttribute("data-kq-minimum-decimal-digits") !== null
+          ? parseInt(element.getAttribute("data-kq-minimum-decimal-digits"))
+          : config.minimumDecimalDigits,
+      maximumDecimalDigits:
+        element.getAttribute("data-kq-maximum-decimal-digits") !== null
+          ? parseInt(element.getAttribute("data-kq-maximum-decimal-digits"))
+          : config.maximumDecimalDigits,
+      localizePricing:
+        element.getAttribute("data-kq-localize-pricing") !== null
+          ? element.getAttribute("data-kq-localize-pricing") === "true"
+          : config.localizePricing,
+      currencyDisplay: (element.getAttribute("data-kq-currency-display") !==
+      null
+        ? element.getAttribute("data-kq-currency-display")
+        : config.currencyDisplay) as CurrencyDisplay,
+    };
+  }
+
+  function updatePriceElementInternal(
+    element: HTMLElement,
+    isOriginalDisplay: boolean,
+    relatedPriceElement?: HTMLElement | null
+  ) {
+    const price = isOriginalDisplay
+      ? parseFloat(element.getAttribute("data-kq-original-price-display") || "")
+      : parseFloat(element.getAttribute("data-kq-price") || "");
+
+    if (isNaN(price)) {
+      console.error(
+        `Invalid ${isOriginalDisplay ? "original price display" : "original price"} for`,
+        element
+      );
+      return;
+    }
+
+    if (!pricingData) return;
+
+    const options = getPriceOptions(element);
+    let priceToDisplay = price;
+    let discountApplied = false;
+
+    if (!isOriginalDisplay) {
+      if (pricingData.percentage) {
+        priceToDisplay *= 1 - pricingData.percentage / 100;
+        discountApplied = true;
+      }
+    }
+
+    element.classList.toggle("kq-discount-applied", !!discountApplied);
+    element.classList.toggle("kq-original-price-display", isOriginalDisplay);
+    element.classList.toggle("kq-updated-price-display", !isOriginalDisplay);
+
+    updatePriceDisplay(element, priceToDisplay, options);
+
+    if (isOriginalDisplay && relatedPriceElement) {
+      const originalPrice = parseFloat(
+        relatedPriceElement.getAttribute("data-kq-price") || ""
+      );
+      let updatedPrice = originalPrice;
+
+      if (pricingData.percentage) {
+        updatedPrice *= 1 - pricingData.percentage / 100;
+      }
+
+      element.style.display = price > updatedPrice ? "" : "none";
+    }
+  }
+
+  function updatePriceDisplay(
+    container: HTMLElement,
+    price: number,
+    options: Partial<DefaultConfig>
+  ) {
+    if (!pricingData) return;
+    const displayPrice = price;
+
+    const mergedOptions = {
+      ...config,
+      ...options,
+    };
+
+    const currencyDisplay = mergedOptions.currencyDisplay as CurrencyDisplay;
+
+    const { formatted, integer, decimal, decimalSeparator } = pdFormatCurrency({
+      amount: displayPrice,
+      currency: mergedOptions.baseCurrencyCode,
+      locale: "en-US",
+      currencyDisplay,
+      formatStyle: "standard",
+      minimumFractionDigits: mergedOptions.showDecimal
+        ? mergedOptions.minimumDecimalDigits
+        : 0,
+      maximumFractionDigits: mergedOptions.showDecimal
+        ? mergedOptions.maximumDecimalDigits
+        : 0,
+    });
+
+    updateElements(
+      container,
+      "[data-kq-currency-symbol]",
+      mergedOptions.baseCurrencySymbol
+    );
+    updateElements(container, "[data-kq-price-integer]", integer);
+
+    if (mergedOptions.showDecimal) {
+      const decimalPart = decimal || "";
+      updateElements(container, "[data-kq-price-decimal]", decimalPart);
+      updateElements(
+        container,
+        "[data-kq-price-decimal-separator]",
+        decimalSeparator
+      );
+    } else {
+      updateElements(container, "[data-kq-price-decimal]", "");
+      updateElements(container, "[data-kq-price-decimal-separator]", "");
+    }
+
+    updateElements(
+      container,
+      "[data-kq-currency-code]",
+      mergedOptions.baseCurrencyCode
+    );
+    updateElements(container, "[data-kq-price-formatted]", formatted);
+  }
+
+  function updateElements(
+    container: HTMLElement,
+    selector: string,
+    value: string
+  ) {
+    const elements = container.querySelectorAll(selector);
+    for (let i = 0; i < elements.length; i++) {
+      elements[i].textContent = value;
+    }
+  }
+
+  function createBanner(data: PricingData) {
+    const bannerWidget = data.widgets?.find(w => w.type === "BANNER");
+    if (!bannerWidget || !config.showBanner) return;
+
+    const rawMessage = bannerWidget.countryMessage;
+    if (!rawMessage) return;
+
+    const bannerConfig = { ...bannerWidget, ...config.banner };
+
+    const savedStyles = !bannerConfig.unStyled
+      ? `.parity-banner {background-color: ${bannerConfig.backgroundColor || "#1a1a2e"};color: ${bannerConfig.fontColor || "#ffffff"};border-radius: ${bannerConfig.borderRadius || "0"};font-size: ${bannerConfig.fontSize || "14px"};padding: 20px 10px;text-align: center;position: relative;}`
+      : "";
+    const closeBtnStyles = bannerConfig.addCloseIcon
+      ? ".parity-banner-close-btn{width:1rem;height:1rem;border:0;opacity:.5;background-color:transparent;color:currentColor;position:absolute;top:1rem;right:1rem;padding:0}.parity-banner-close-btn:hover{opacity:1;}"
+      : ".parity-banner-close-btn{display:none;}";
+    const logoStyles =
+      ".parity-banner.parity-banner-has-logo {padding-left: 120px;}";
+
+    const styleSheet = document.createElement("style");
+    styleSheet.innerText = savedStyles + closeBtnStyles + logoStyles;
+    document.head.appendChild(styleSheet);
+    document.body.classList.add("kq-has-parity-banner");
+
+    const countryFlag = data.countryCode
+      ? data.countryCode
+          .toUpperCase()
+          .split("")
+          .map(c => String.fromCodePoint(c.charCodeAt(0) - 65 + 0x1f1e6))
+          .join("")
+      : "";
+
+    const resolvedMessage = rawMessage
+      .replace(/\{country_flag\}/g, countryFlag)
+      .replace(/\{country\}/g, data.country || "")
+      .replace(/\{coupon_code\}/g, data.code || "")
+      .replace(/\{discount_percentage\}/g, String(data.percentage || ""));
+
+    const bannerHTML =
+      `<div class="parity-banner">` +
+      `<button class="parity-banner-close-btn">×</button>` +
+      `<span>${resolvedMessage}</span></div>`;
+
+    const existingBanner = document.querySelector(".parity-banner");
+
+    if (!existingBanner) {
+      const container =
+        (bannerConfig.container &&
+          document.querySelector(bannerConfig.container)) ||
+        document.body;
+      if (bannerConfig.placement === "top") {
+        container.insertAdjacentHTML("afterbegin", bannerHTML);
+      } else {
+        container.insertAdjacentHTML("beforeend", bannerHTML);
+      }
+    }
+
+    if (bannerConfig.addCloseIcon) {
+      const closeBtn = document.querySelector(".parity-banner-close-btn");
+      if (closeBtn) {
+        function closeBannerHandler() {
+          const banner = document.querySelector(".parity-banner");
+          if (banner) banner.parentNode.removeChild(banner);
+          closeBtn.removeEventListener("click", closeBannerHandler);
+        }
+        closeBtn.addEventListener("click", closeBannerHandler);
+      }
+    }
+  }
+
+  function init(options: Partial<DefaultConfig>) {
+    if (!initPromise) {
+      mergeConfig(options);
+      initPromise = new Promise((resolve, reject) => {
+        function initializeSDK() {
+          fetchPricingData({
+            promotionId: options.promotionId,
+            environment: options.environment,
+            accessToken: options.accessToken,
+          })
+            .then(data => {
+              if (data) {
+                pricingData = data;
+                updatePrices();
+                createBanner(data);
+              } else {
+                console.error("No pricing data available");
+              }
+              resolve(pricingData);
+            })
+            .catch(error => {
+              console.error("Failed to fetch pricing data:", error);
+              reject(error);
+            });
+        }
+
+        if (document.readyState === "loading") {
+          document.addEventListener("DOMContentLoaded", initializeSDK);
+        } else {
+          initializeSDK();
+        }
+      });
+    }
+    return initPromise;
+  }
+
+  function ensureInit() {
+    if (!initPromise) {
+      return Promise.reject(
+        "KQPromotionUISDK.init() must be called before using other methods"
+      );
+    }
+    return initPromise;
+  }
+
+  function processQueue() {
+    let args;
+    while ((args = queue.shift())) {
+      const method = args.shift();
+      if (typeof KQPromotionUISDKPrvt[method] === "function") {
+        KQPromotionUISDKPrvt[method].apply(null, args);
+      }
+    }
+  }
+
+  const KQPromotionUISDKPrvt: KQPromotionUISDK = {
+    init: init,
+    getUpdatedPrice: function (
+      price: number,
+      options: Partial<DefaultConfig> = {}
+    ) {
+      return ensureInit().then(() => {
+        if (typeof price !== "number" || isNaN(price)) {
+          throw new Error("Invalid price provided");
+        }
+
+        if (!pricingData) {
+          throw new Error("No pricing data available");
+        }
+        const mergedOptions = {
+          ...config,
+          ...options,
+        };
+
+        let updatedPrice = price;
+
+        if (pricingData.percentage && !options.isOriginalDisplay) {
+          updatedPrice *= 1 - pricingData.percentage / 100;
+        }
+
+        const currencyDisplay =
+          (options.currencyDisplay as CurrencyDisplay) || "symbol";
+
+        const { formatted, integer, decimal, decimalSeparator } =
+          pdFormatCurrency({
+            amount: updatedPrice,
+            currency: mergedOptions.baseCurrencyCode,
+            locale: "en-US",
+            currencyDisplay,
+            formatStyle: "standard",
+            minimumFractionDigits: options.showDecimal
+              ? options.minimumDecimalDigits
+              : 0,
+            maximumFractionDigits: options.showDecimal
+              ? options.maximumDecimalDigits
+              : 0,
+          });
+
+        return {
+          price: updatedPrice,
+          formattedPrice: formatted,
+          integerPart: integer,
+          decimalPart: decimal || "",
+          decimalSeparator: decimalSeparator,
+          currencySymbol: mergedOptions.baseCurrencySymbol,
+          currencyCode: mergedOptions.baseCurrencyCode,
+          apiResponse: pricingData,
+        };
+      });
+    },
+    updatePriceElement: function (
+      element: HTMLElement,
+      options: Partial<DefaultConfig> = {}
+    ) {
+      return ensureInit().then(() => {
+        if (!element || !element.hasAttribute("data-kq-price")) {
+          throw new Error(
+            "Invalid element provided. Must have data-kq-price attribute."
+          );
+        }
+
+        const price = parseFloat(element.getAttribute("data-kq-price"));
+        const isOriginalDisplay = element.hasAttribute(
+          "data-kq-original-price-display"
+        );
+
+        return this.getUpdatedPrice(price, {
+          ...options,
+          isOriginalDisplay,
+        }).then(result => {
+          if (!result) return;
+          // Update the current element
+          updatePriceDisplay(element, result.price, {
+            ...options,
+            baseCurrencySymbol: result.currencySymbol,
+            baseCurrencyCode: result.currencyCode,
+          });
+
+          // Find and update related elements
+          const relatedElements = findRelatedElements(element);
+          if (relatedElements) {
+            relatedElements.forEach(relatedElement => {
+              if (relatedElement !== element) {
+                const relatedIsOriginalDisplay = relatedElement.hasAttribute(
+                  "data-kq-original-price-display"
+                );
+                const relatedPrice = parseFloat(
+                  relatedElement.getAttribute("data-kq-price") ||
+                    relatedElement.getAttribute(
+                      "data-kq-original-price-display"
+                    )
+                );
+                this.getUpdatedPrice(relatedPrice, {
+                  ...options,
+                  isOriginalDisplay: relatedIsOriginalDisplay,
+                }).then(relatedResult => {
+                  if (!relatedResult) return;
+                  updatePriceDisplay(
+                    relatedElement as HTMLElement,
+                    relatedResult.price,
+                    {
+                      ...options,
+                      baseCurrencySymbol: relatedResult.currencySymbol,
+                      baseCurrencyCode: relatedResult.currencyCode,
+                    }
+                  );
+                });
+              }
+            });
+          }
+
+          return result;
+        });
+      });
+    },
+    updatePrice: function (
+      priceConfigs: {
+        element: HTMLElement;
+        price: number;
+        options?: Partial<DefaultConfig>;
+        template?: string;
+      }[]
+    ) {
+      return ensureInit().then(() => {
+        const updatePromises = priceConfigs.map(config => {
+          const { element, price, options, template } = config;
+
+          if (!element) {
+            throw new Error("Element is required for each price configuration");
+          }
+
+          if (typeof price !== "number" || isNaN(price)) {
+            throw new Error(
+              "Valid price is required for each price configuration"
+            );
+          }
+
+          return this.getUpdatedPrice(price, options).then(result => {
+            const updatedHTML = template.replace(/{{(\w+)}}/g, (match, key) => {
+              return result[key] || match;
+            });
+            element.innerHTML = updatedHTML;
+            return result;
+          });
+        });
+
+        return Promise.all(updatePromises);
+      });
+    },
+  };
+  // Replace the temporary KQPromotionUISDK function with the actual SDK
+  (window as unknown as any).KQPromotionUISDK = KQPromotionUISDKPrvt;
+
+  // Process any queued commands
+  processQueue();
+};
+
+// Only initialize in browser environment
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+  KQPromotionUISDK(window, document);
+}

package/src/types.ts

@@ -0,0 +1,60 @@
+import { CurrencyDisplay } from "./utils";
+
+export interface Widget {
+  backgroundColor: string;
+  fontColor: string;
+  highlightFontColor: string;
+  fontSize: string;
+  unStyled: boolean;
+  addCloseIcon: boolean;
+  placement: string;
+  type: string;
+  borderRadius: string;
+  container?: string;
+  countryMessage?: string;
+}
+
+export interface Security {
+  proxy: boolean;
+  crawler: boolean;
+  vpn: boolean;
+  tor: boolean;
+  relay: boolean;
+}
+
+export interface PricingData {
+  country: string;
+  countryCode: string;
+  percentage: number;
+  code: string;
+  widgets: Widget[];
+  security: Security;
+}
+
+export interface DefaultConfig {
+  promotionId?: string;
+  showBanner: boolean;
+  environment: "production" | "sandbox";
+  localizePricing: boolean;
+  baseCurrencyCode: string;
+  baseCurrencySymbol: string;
+  currencyDisplay: CurrencyDisplay;
+  showDecimal: boolean;
+  minimumDecimalDigits: number;
+  maximumDecimalDigits: number;
+  isOriginalDisplay: boolean;
+  banner: Partial<Widget>;
+  pdIdentifier?: string;
+  accessToken?: string;
+}
+
+export interface PriceObject {
+  price: number;
+  formattedPrice: string;
+  integerPart: string;
+  decimalPart: string;
+  decimalSeparator: string;
+  currencySymbol: string;
+  currencyCode: string;
+  apiResponse: PricingData;
+}