@cimplify/sdk 0.3.6 → 0.5.0

package/dist/react.d.mts

@@ -0,0 +1,105 @@
+import { en as AdSlot, eo as AdPosition, es as AdContextValue, r as CimplifyElements, C as CimplifyClient, v as ElementsOptions, eh as AuthenticatedData, ef as AddressInfo, eg as PaymentMethodInfo, ej as ElementsCheckoutResult } from './ads-BOUIrN73.mjs';
+export { eq as AdConfig } from './ads-BOUIrN73.mjs';
+import React, { ReactNode } from 'react';
+
+interface UserIdentity {
+    uid: string;
+    isAuthenticated: boolean;
+    fingerprint: string;
+    signals: DeviceSignals;
+}
+interface DeviceSignals {
+    userAgent: string;
+    language: string;
+    languages: string[];
+    platform: string;
+    screenWidth: number;
+    screenHeight: number;
+    colorDepth: number;
+    pixelRatio: number;
+    timezone: string;
+    timezoneOffset: number;
+    touchSupport: boolean;
+    cookiesEnabled: boolean;
+    doNotTrack: boolean;
+}
+
+interface AdContextValueExtended extends AdContextValue {
+    identity: UserIdentity | null;
+    apiBase: string;
+}
+declare function useAds(): AdContextValueExtended;
+interface AdProviderProps {
+    siteId: string;
+    apiBase?: string;
+    authenticatedAccountId?: string;
+    children: ReactNode;
+}
+declare function AdProvider({ siteId, apiBase, authenticatedAccountId, children, }: AdProviderProps): React.ReactElement;
+interface AdProps {
+    slot: AdSlot;
+    position?: AdPosition;
+    className?: string;
+    style?: React.CSSProperties;
+    fallback?: ReactNode;
+    onImpression?: (adId: string) => void;
+    onClick?: (adId: string) => void;
+}
+declare function Ad({ slot, position, className, style, fallback, onImpression, onClick, }: AdProps): React.ReactElement | null;
+
+declare function useElements(): CimplifyElements | null;
+declare function useElementsReady(): boolean;
+interface ElementsProviderProps {
+    client: CimplifyClient;
+    businessId: string;
+    options?: ElementsOptions;
+    children: ReactNode;
+}
+declare function ElementsProvider({ client, businessId, options, children, }: ElementsProviderProps): React.ReactElement;
+interface BaseElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onReady?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+}
+interface AuthElementProps extends BaseElementProps {
+    prefillEmail?: string;
+    onAuthenticated?: (data: AuthenticatedData) => void;
+    onRequiresOtp?: (data: {
+        contactMasked: string;
+    }) => void;
+}
+declare function AuthElement({ className, style, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError, }: AuthElementProps): React.ReactElement | null;
+interface AddressElementProps extends BaseElementProps {
+    mode?: "shipping" | "billing";
+    onChange?: (data: {
+        address: AddressInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function AddressElement({ className, style, mode, onReady, onChange, onError, }: AddressElementProps): React.ReactElement | null;
+interface PaymentElementProps extends BaseElementProps {
+    amount?: number;
+    currency?: string;
+    onChange?: (data: {
+        paymentMethod: PaymentMethodInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function PaymentElement({ className, style, amount, currency, onReady, onChange, onError, }: PaymentElementProps): React.ReactElement | null;
+declare function useCheckout(): {
+    submit: (data: {
+        cart_id: string;
+        order_type?: "delivery" | "pickup" | "dine_in";
+        location_id?: string;
+        scheduled_time?: string;
+        tip_amount?: number;
+        notes?: string;
+    }) => Promise<ElementsCheckoutResult>;
+    isLoading: boolean;
+};
+
+export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddressElement, AuthElement, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };

package/dist/react.d.ts

@@ -0,0 +1,105 @@
+import { en as AdSlot, eo as AdPosition, es as AdContextValue, r as CimplifyElements, C as CimplifyClient, v as ElementsOptions, eh as AuthenticatedData, ef as AddressInfo, eg as PaymentMethodInfo, ej as ElementsCheckoutResult } from './ads-BOUIrN73.js';
+export { eq as AdConfig } from './ads-BOUIrN73.js';
+import React, { ReactNode } from 'react';
+
+interface UserIdentity {
+    uid: string;
+    isAuthenticated: boolean;
+    fingerprint: string;
+    signals: DeviceSignals;
+}
+interface DeviceSignals {
+    userAgent: string;
+    language: string;
+    languages: string[];
+    platform: string;
+    screenWidth: number;
+    screenHeight: number;
+    colorDepth: number;
+    pixelRatio: number;
+    timezone: string;
+    timezoneOffset: number;
+    touchSupport: boolean;
+    cookiesEnabled: boolean;
+    doNotTrack: boolean;
+}
+
+interface AdContextValueExtended extends AdContextValue {
+    identity: UserIdentity | null;
+    apiBase: string;
+}
+declare function useAds(): AdContextValueExtended;
+interface AdProviderProps {
+    siteId: string;
+    apiBase?: string;
+    authenticatedAccountId?: string;
+    children: ReactNode;
+}
+declare function AdProvider({ siteId, apiBase, authenticatedAccountId, children, }: AdProviderProps): React.ReactElement;
+interface AdProps {
+    slot: AdSlot;
+    position?: AdPosition;
+    className?: string;
+    style?: React.CSSProperties;
+    fallback?: ReactNode;
+    onImpression?: (adId: string) => void;
+    onClick?: (adId: string) => void;
+}
+declare function Ad({ slot, position, className, style, fallback, onImpression, onClick, }: AdProps): React.ReactElement | null;
+
+declare function useElements(): CimplifyElements | null;
+declare function useElementsReady(): boolean;
+interface ElementsProviderProps {
+    client: CimplifyClient;
+    businessId: string;
+    options?: ElementsOptions;
+    children: ReactNode;
+}
+declare function ElementsProvider({ client, businessId, options, children, }: ElementsProviderProps): React.ReactElement;
+interface BaseElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onReady?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+}
+interface AuthElementProps extends BaseElementProps {
+    prefillEmail?: string;
+    onAuthenticated?: (data: AuthenticatedData) => void;
+    onRequiresOtp?: (data: {
+        contactMasked: string;
+    }) => void;
+}
+declare function AuthElement({ className, style, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError, }: AuthElementProps): React.ReactElement | null;
+interface AddressElementProps extends BaseElementProps {
+    mode?: "shipping" | "billing";
+    onChange?: (data: {
+        address: AddressInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function AddressElement({ className, style, mode, onReady, onChange, onError, }: AddressElementProps): React.ReactElement | null;
+interface PaymentElementProps extends BaseElementProps {
+    amount?: number;
+    currency?: string;
+    onChange?: (data: {
+        paymentMethod: PaymentMethodInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function PaymentElement({ className, style, amount, currency, onReady, onChange, onError, }: PaymentElementProps): React.ReactElement | null;
+declare function useCheckout(): {
+    submit: (data: {
+        cart_id: string;
+        order_type?: "delivery" | "pickup" | "dine_in";
+        location_id?: string;
+        scheduled_time?: string;
+        tip_amount?: number;
+        notes?: string;
+    }) => Promise<ElementsCheckoutResult>;
+    isLoading: boolean;
+};
+
+export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddressElement, AuthElement, ElementsProvider, PaymentElement, useAds, useCheckout, useElements, useElementsReady };

package/dist/react.js

@@ -0,0 +1,447 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('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 = react.createContext({
+  siteId: null,
+  config: null,
+  isLoading: true,
+  identity: null,
+  apiBase: "https://api.cimplify.io"
+});
+function useAds() {
+  return react.useContext(AdContext);
+}
+function AdProvider({
+  siteId,
+  apiBase,
+  authenticatedAccountId,
+  children
+}) {
+  const resolvedApiBase = apiBase || deriveAdsApiUrl();
+  const [config, setConfig] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [identity, setIdentity] = react.useState(null);
+  react.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__ */ jsxRuntime.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] = react.useState(null);
+  const [error, setError] = react.useState(false);
+  const impressionTracked = react.useRef(false);
+  const containerRef = react.useRef(null);
+  react.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]);
+  react.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `cimplify-ad cimplify-ad--loading ${className || ""}`,
+        style,
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (!config?.enabled) return null;
+  if (error) return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.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 = react.createContext({
+  elements: null,
+  isReady: false
+});
+function useElements() {
+  return react.useContext(ElementsContext).elements;
+}
+function useElementsReady() {
+  return react.useContext(ElementsContext).isReady;
+}
+function ElementsProvider({
+  client,
+  businessId,
+  options,
+  children
+}) {
+  const [elements, setElements] = react.useState(null);
+  const [isReady, setIsReady] = react.useState(false);
+  react.useEffect(() => {
+    const instance = client.elements(businessId, options);
+    setElements(instance);
+    setIsReady(true);
+    return () => instance.destroy();
+  }, [client, businessId, options]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ElementsContext.Provider, { value: { elements, isReady }, children });
+}
+function AuthElement({
+  className,
+  style,
+  prefillEmail,
+  onReady,
+  onAuthenticated,
+  onRequiresOtp,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.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__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function AddressElement({
+  className,
+  style,
+  mode = "shipping",
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.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__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function PaymentElement({
+  className,
+  style,
+  amount,
+  currency,
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.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__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function useCheckout() {
+  const elements = useElements();
+  const [isLoading, setIsLoading] = react.useState(false);
+  const submit = react.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 };
+}
+
+exports.Ad = Ad;
+exports.AdProvider = AdProvider;
+exports.AddressElement = AddressElement;
+exports.AuthElement = AuthElement;
+exports.ElementsProvider = ElementsProvider;
+exports.PaymentElement = PaymentElement;
+exports.useAds = useAds;
+exports.useCheckout = useCheckout;
+exports.useElements = useElements;
+exports.useElementsReady = useElementsReady;