@cimplify/sdk 0.3.6 → 0.5.0

package/dist/react.mjs

@@ -0,0 +1,436 @@
+import { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// src/react/index.tsx
+
+// src/types/elements.ts
+var ELEMENT_TYPES = {
+  AUTH: "auth",
+  ADDRESS: "address",
+  PAYMENT: "payment"
+};
+var EVENT_TYPES = {
+  READY: "ready",
+  AUTHENTICATED: "authenticated",
+  REQUIRES_OTP: "requires_otp",
+  ERROR: "error",
+  CHANGE: "change"};
+
+// src/ads/identity.ts
+var COOKIE_NAME = "_cimplify_uid";
+var COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+function getOrCreateUserId() {
+  if (typeof document === "undefined") return generateId();
+  const existing = getCookie(COOKIE_NAME);
+  if (existing) return existing;
+  const newId = generateId();
+  setCookie(COOKIE_NAME, newId, COOKIE_MAX_AGE);
+  return newId;
+}
+function collectDeviceSignals() {
+  if (typeof window === "undefined") {
+    return getEmptySignals();
+  }
+  return {
+    userAgent: navigator.userAgent,
+    language: navigator.language,
+    languages: Array.from(navigator.languages || []),
+    platform: navigator.platform,
+    screenWidth: screen.width,
+    screenHeight: screen.height,
+    colorDepth: screen.colorDepth,
+    pixelRatio: window.devicePixelRatio || 1,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    timezoneOffset: (/* @__PURE__ */ new Date()).getTimezoneOffset(),
+    touchSupport: "ontouchstart" in window || navigator.maxTouchPoints > 0,
+    cookiesEnabled: navigator.cookieEnabled,
+    doNotTrack: navigator.doNotTrack === "1"
+  };
+}
+function generateFingerprint(signals) {
+  const components = [
+    signals.userAgent,
+    signals.language,
+    signals.platform,
+    `${signals.screenWidth}x${signals.screenHeight}`,
+    signals.colorDepth.toString(),
+    signals.pixelRatio.toString(),
+    signals.timezone,
+    signals.touchSupport.toString()
+  ];
+  return hashString(components.join("|"));
+}
+function getUserIdentity(authenticatedAccountId) {
+  const signals = collectDeviceSignals();
+  const fingerprint = generateFingerprint(signals);
+  const cookieId = getOrCreateUserId();
+  return {
+    uid: authenticatedAccountId || cookieId,
+    isAuthenticated: !!authenticatedAccountId,
+    fingerprint,
+    signals
+  };
+}
+function getDeviceType(signals) {
+  const ua = signals.userAgent.toLowerCase();
+  const width = signals.screenWidth;
+  if (/mobile|android|iphone|ipod/.test(ua) || width < 768) {
+    return "mobile";
+  }
+  if (/tablet|ipad/.test(ua) || width >= 768 && width < 1024) {
+    return "tablet";
+  }
+  return "desktop";
+}
+function getBrowserInfo(signals) {
+  const ua = signals.userAgent;
+  const browsers = [
+    { name: "Chrome", regex: /Chrome\/(\d+)/ },
+    { name: "Firefox", regex: /Firefox\/(\d+)/ },
+    { name: "Safari", regex: /Version\/(\d+).*Safari/ },
+    { name: "Edge", regex: /Edg\/(\d+)/ },
+    { name: "Opera", regex: /OPR\/(\d+)/ }
+  ];
+  for (const browser of browsers) {
+    const match = ua.match(browser.regex);
+    if (match) {
+      return { name: browser.name, version: match[1] };
+    }
+  }
+  return { name: "Unknown", version: "0" };
+}
+function getOSInfo(signals) {
+  const ua = signals.userAgent;
+  if (/Windows NT 10/.test(ua)) return { name: "Windows", version: "10" };
+  if (/Windows NT 6.3/.test(ua)) return { name: "Windows", version: "8.1" };
+  if (/Mac OS X (\d+[._]\d+)/.test(ua)) {
+    const match = ua.match(/Mac OS X (\d+[._]\d+)/);
+    return { name: "macOS", version: match?.[1].replace("_", ".") || "" };
+  }
+  if (/Android (\d+)/.test(ua)) {
+    const match = ua.match(/Android (\d+)/);
+    return { name: "Android", version: match?.[1] || "" };
+  }
+  if (/iPhone OS (\d+)/.test(ua)) {
+    const match = ua.match(/iPhone OS (\d+)/);
+    return { name: "iOS", version: match?.[1] || "" };
+  }
+  if (/Linux/.test(ua)) return { name: "Linux", version: "" };
+  return { name: "Unknown", version: "" };
+}
+function generateId() {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 10);
+  return `${timestamp}-${random}`;
+}
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(36);
+}
+function getCookie(name) {
+  if (typeof document === "undefined") return null;
+  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
+  return match ? match[2] : null;
+}
+function setCookie(name, value, maxAge) {
+  if (typeof document === "undefined") return;
+  document.cookie = `${name}=${value};max-age=${maxAge};path=/;SameSite=Lax`;
+}
+function getEmptySignals() {
+  return {
+    userAgent: "",
+    language: "",
+    languages: [],
+    platform: "",
+    screenWidth: 0,
+    screenHeight: 0,
+    colorDepth: 0,
+    pixelRatio: 1,
+    timezone: "",
+    timezoneOffset: 0,
+    touchSupport: false,
+    cookiesEnabled: false,
+    doNotTrack: false
+  };
+}
+function deriveAdsApiUrl() {
+  if (typeof window === "undefined") return "https://api.cimplify.io";
+  const hostname = window.location.hostname;
+  if (hostname === "localhost" || hostname === "127.0.0.1") {
+    return `${window.location.protocol}//${hostname}:8080`;
+  }
+  return "https://api.cimplify.io";
+}
+var AdContext = createContext({
+  siteId: null,
+  config: null,
+  isLoading: true,
+  identity: null,
+  apiBase: "https://api.cimplify.io"
+});
+function useAds() {
+  return useContext(AdContext);
+}
+function AdProvider({
+  siteId,
+  apiBase,
+  authenticatedAccountId,
+  children
+}) {
+  const resolvedApiBase = apiBase || deriveAdsApiUrl();
+  const [config, setConfig] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [identity, setIdentity] = useState(null);
+  useEffect(() => {
+    const userIdentity = getUserIdentity(authenticatedAccountId);
+    setIdentity(userIdentity);
+    fetch(`${resolvedApiBase}/ads/config/${siteId}`).then((r) => r.json()).then((data) => {
+      setConfig(data);
+      setIsLoading(false);
+    }).catch(() => {
+      setConfig({ enabled: false, theme: "auto" });
+      setIsLoading(false);
+    });
+  }, [siteId, resolvedApiBase, authenticatedAccountId]);
+  return /* @__PURE__ */ jsx(AdContext.Provider, { value: { siteId, config, isLoading, identity, apiBase: resolvedApiBase }, children });
+}
+function Ad({
+  slot,
+  position = "static",
+  className,
+  style,
+  fallback,
+  onImpression,
+  onClick
+}) {
+  const { siteId, config, isLoading, identity, apiBase } = useAds();
+  const [ad, setAd] = useState(null);
+  const [error, setError] = useState(false);
+  const impressionTracked = useRef(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (isLoading || !config?.enabled || !siteId || !identity) return;
+    const path = typeof window !== "undefined" ? window.location.pathname : "/";
+    const referrer = typeof document !== "undefined" ? document.referrer : "";
+    if (config.excludePaths?.some((p) => new RegExp(p.replace("*", ".*")).test(path))) {
+      return;
+    }
+    const deviceType = getDeviceType(identity.signals);
+    const browser = getBrowserInfo(identity.signals);
+    const os = getOSInfo(identity.signals);
+    fetch(`${apiBase}/ads/get`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        siteId,
+        slot,
+        path,
+        referrer,
+        user: {
+          uid: identity.uid,
+          fingerprint: identity.fingerprint,
+          isAuthenticated: identity.isAuthenticated
+        },
+        device: {
+          type: deviceType,
+          browser: browser.name,
+          browserVersion: browser.version,
+          os: os.name,
+          osVersion: os.version,
+          screenWidth: identity.signals.screenWidth,
+          screenHeight: identity.signals.screenHeight,
+          language: identity.signals.language,
+          timezone: identity.signals.timezone
+        }
+      })
+    }).then((r) => r.json()).then((data) => {
+      if (data?.html) {
+        setAd(data);
+      } else {
+        setError(true);
+      }
+    }).catch(() => setError(true));
+  }, [siteId, config, isLoading, slot, identity, apiBase]);
+  useEffect(() => {
+    if (!ad || impressionTracked.current || typeof window === "undefined" || !identity) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !impressionTracked.current) {
+          impressionTracked.current = true;
+          const impressionData = {
+            adId: ad.id,
+            siteId,
+            slot,
+            uid: identity.uid,
+            fingerprint: identity.fingerprint,
+            timestamp: Date.now()
+          };
+          if (navigator.sendBeacon) {
+            navigator.sendBeacon(
+              `${apiBase}/ads/impression`,
+              JSON.stringify(impressionData)
+            );
+          }
+          onImpression?.(ad.id);
+        }
+      },
+      { threshold: 0.5 }
+    );
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => observer.disconnect();
+  }, [ad, siteId, slot, onImpression, identity, apiBase]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `cimplify-ad cimplify-ad--loading ${className || ""}`,
+        style,
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (!config?.enabled) return null;
+  if (error) return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
+  if (!ad) return null;
+  const handleClick = () => {
+    onClick?.(ad.id);
+  };
+  const positionStyles = position === "fixed" ? { position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 9999 } : position === "sticky" ? { position: "sticky", top: 20 } : {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      id: `cimplify-ad-${ad.id}`,
+      className: `cimplify-ad cimplify-ad--${slot} cimplify-ad--${position} cimplify-ad--${config.theme} ${className || ""}`,
+      style: { ...positionStyles, ...style },
+      onClick: handleClick,
+      dangerouslySetInnerHTML: { __html: ad.html }
+    }
+  );
+}
+var ElementsContext = createContext({
+  elements: null,
+  isReady: false
+});
+function useElements() {
+  return useContext(ElementsContext).elements;
+}
+function useElementsReady() {
+  return useContext(ElementsContext).isReady;
+}
+function ElementsProvider({
+  client,
+  businessId,
+  options,
+  children
+}) {
+  const [elements, setElements] = useState(null);
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    const instance = client.elements(businessId, options);
+    setElements(instance);
+    setIsReady(true);
+    return () => instance.destroy();
+  }, [client, businessId, options]);
+  return /* @__PURE__ */ jsx(ElementsContext.Provider, { value: { elements, isReady }, children });
+}
+function AuthElement({
+  className,
+  style,
+  prefillEmail,
+  onReady,
+  onAuthenticated,
+  onRequiresOtp,
+  onError
+}) {
+  const containerRef = useRef(null);
+  const elementRef = useRef(null);
+  const elements = useElements();
+  useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.AUTH, { prefillEmail });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.AUTHENTICATED, (data) => onAuthenticated?.(data));
+    element.on(EVENT_TYPES.REQUIRES_OTP, (data) => onRequiresOtp?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+}
+function AddressElement({
+  className,
+  style,
+  mode = "shipping",
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = useRef(null);
+  const elementRef = useRef(null);
+  const elements = useElements();
+  useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.ADDRESS, { mode });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.CHANGE, (data) => onChange?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, mode, onReady, onChange, onError]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+}
+function PaymentElement({
+  className,
+  style,
+  amount,
+  currency,
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = useRef(null);
+  const elementRef = useRef(null);
+  const elements = useElements();
+  useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.PAYMENT, { amount, currency });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.CHANGE, (data) => onChange?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, amount, currency, onReady, onChange, onError]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+}
+function useCheckout() {
+  const elements = useElements();
+  const [isLoading, setIsLoading] = useState(false);
+  const submit = useCallback(
+    async (data) => {
+      if (!elements) {
+        return { success: false, error: { code: "NO_ELEMENTS", message: "Elements not initialized" } };
+      }
+      setIsLoading(true);
+      try {
+        return await elements.submitCheckout(data);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [elements]
+  );
+  return { submit, isLoading };
+}
+
+export { Ad, AdProvider, AddressElement, AuthElement, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.3.6",
+  "version": "0.5.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -20,6 +20,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.js"
     }
   },
   "scripts": {
@@ -29,11 +34,28 @@
     "clean": "rm -rf dist",
     "lint:ox": "oxlint --fix .",
     "format": "oxfmt . --write",
-    "format:check": "oxfmt . --check"
+    "format:check": "oxfmt . --check",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.2.7",
     "@typescript/native-preview": "^7.0.0-dev.20260109.1",
+    "jsdom": "^25.0.0",
+    "react": "^19.2.3",
     "tsup": "^8.5.1",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "vitest": "^2.1.0"
   }
 }