@salla.sa/embedded-sdk 0.1.0-beta.1

package/dist/esm/index.js

@@ -0,0 +1,777 @@
+const O = "0.1.0-beta.1", $ = {
+  version: O
+}, s = "embedded::", T = {
+  /** Initialize handshake - iframe signals it's ready */
+  READY: `${s}iframe.ready`,
+  /** Request iframe resize */
+  RESIZE: `${s}iframe.resize`
+}, y = {
+  /** Context data provision */
+  PROVIDE: `${s}context.provide`,
+  /** Theme change notification */
+  THEME_CHANGE: `${s}theme.change`
+}, L = {
+  /** Report error to host */
+  REPORT: `${s}error.report`
+}, b = {
+  /** Request logout and redirect to auth */
+  LOGOUT: `${s}auth.logout`,
+  /** Request token refresh (triggers page reload) */
+  REFRESH: `${s}auth.refresh`,
+  /** Request token verification via API */
+  VERIFY: `${s}auth.verify`
+}, h = {
+  /** Navigate using React Router (SPA navigation) */
+  NAVIGATE: `${s}page.navigate`,
+  /** Redirect using window.location (full page reload) */
+  REDIRECT: `${s}page.redirect`
+}, g = {
+  /** Set primary action button in navbar */
+  SET_ACTION: `${s}nav.setAction`,
+  /** Notification when action button is clicked (host → iframe) */
+  ACTION_CLICK: `${s}nav.actionClick`
+}, o = {
+  /** Set loading state */
+  LOADING: `${s}ui.loading`,
+  /** Set breadcrumb items */
+  BREADCRUMB: `${s}ui.breadcrumb`,
+  /** Control overlay state */
+  OVERLAY: `${s}ui.overlay`,
+  /** Show toast notification */
+  TOAST: `${s}ui.toast`,
+  /** Control modal state */
+  MODAL: `${s}ui.modal`,
+  /** Show confirm dialog (async request) */
+  CONFIRM: `${s}ui.confirm`,
+  /** Confirm dialog response (from host) */
+  CONFIRM_RESPONSE: `${s}ui.confirm.response`,
+  /** Modal response (from host) */
+  MODAL_RESPONSE: `${s}ui.modal.response`
+}, w = {
+  /** Initialize checkout flow */
+  CREATE: `${s}checkout.create`
+}, p = $.version, M = 1e4, k = [
+  "localhost",
+  "merchants.workers.dev",
+  "s.salla.sa",
+  ".salla.group",
+  ".salla.sa"
+];
+function _(t) {
+  try {
+    const r = new URL(t).hostname;
+    return k.some((n) => n.startsWith(".") ? r.endsWith(n) || r === n.slice(1) : r === n || r.startsWith(`${n}:`));
+  } catch {
+    return !1;
+  }
+}
+function x() {
+  return typeof window > "u" || window.parent === window ? null : window.parent;
+}
+function i(t, e, r = "*") {
+  const n = x();
+  if (!n) {
+    console.warn("[EmbeddedSDK] Not running in an iframe, cannot post to host");
+    return;
+  }
+  const a = {
+    event: t,
+    ...e
+  };
+  n.postMessage(a, r);
+}
+const c = /* @__PURE__ */ new Map();
+let E = !1;
+function D(t) {
+  if (process.env.NODE_ENV === "production" && !_(t.origin))
+    return;
+  const e = t.data;
+  if (!e || typeof e.event != "string")
+    return;
+  const r = c.get(e.event);
+  r && r.forEach((a) => {
+    try {
+      a(e);
+    } catch (u) {
+      console.error("[EmbeddedSDK] Error in message handler:", u);
+    }
+  });
+  const n = c.get("*");
+  n && n.forEach((a) => {
+    try {
+      a(e);
+    } catch (u) {
+      console.error("[EmbeddedSDK] Error in wildcard handler:", u);
+    }
+  });
+}
+function U() {
+  E || typeof window > "u" || (window.addEventListener("message", D), E = !0);
+}
+function m(t, e) {
+  U(), c.has(t) || c.set(t, /* @__PURE__ */ new Set());
+  const r = c.get(t);
+  return r.add(e), () => {
+    r.delete(e), r.size === 0 && c.delete(t);
+  };
+}
+function V(t, e = M) {
+  return new Promise((r, n) => {
+    const a = setTimeout(() => {
+      u(), n(new Error(`[EmbeddedSDK] Timeout waiting for "${t}" message`));
+    }, e), u = m(t, (v) => {
+      clearTimeout(a), u(), r(v);
+    });
+  });
+}
+function P() {
+  c.clear(), E && typeof window < "u" && (window.removeEventListener("message", D), E = !1);
+}
+function F() {
+  return typeof window > "u" ? !1 : window.parent !== window;
+}
+const d = /* @__PURE__ */ new Map(), K = 3e4;
+function q() {
+  const t = Date.now(), e = Math.random().toString(36).slice(2, 9);
+  return `req_${t}_${e}`;
+}
+function z(t, e = {}, r = K) {
+  const n = q();
+  return new Promise((a, u) => {
+    const v = setTimeout(() => {
+      d.get(n) && (d.delete(n), u(
+        new Error(
+          `[EmbeddedSDK] Request "${t}" timed out after ${r}ms`
+        )
+      ));
+    }, r);
+    d.set(n, {
+      resolve: a,
+      reject: u,
+      timeout: v,
+      event: t
+    }), i(t, { ...e, requestId: n });
+  });
+}
+function A(t, e, r) {
+  const n = d.get(t);
+  if (!n) {
+    console.warn(
+      `[EmbeddedSDK] Received response for unknown request: ${t}`
+    );
+    return;
+  }
+  clearTimeout(n.timeout), d.delete(t), r ? n.reject(new Error(r)) : n.resolve(e);
+}
+function B(t = "SDK cleanup") {
+  d.forEach((e, r) => {
+    clearTimeout(e.timeout), e.reject(
+      new Error(`[EmbeddedSDK] Request ${r} cancelled: ${t}`)
+    );
+  }), d.clear();
+}
+function G(t) {
+  return {
+    /**
+     * Get the current access token.
+     */
+    getAccessToken() {
+      return t().token;
+    },
+    /**
+     * Check if authenticated (has a valid token).
+     */
+    isAuthenticated() {
+      const e = t();
+      return e.ready && !!e.token;
+    },
+    /**
+     * Get the current store ID.
+     */
+    getStoreId() {
+      return t().storeId;
+    },
+    /**
+     * Get the current user ID.
+     */
+    getUserId() {
+      return t().userId;
+    },
+    /**
+     * Get the merchant plan.
+     */
+    getMerchantPlan() {
+      return t().merchantPlan;
+    },
+    /**
+     * Get the current locale.
+     */
+    getLocale() {
+      return t().locale;
+    },
+    /**
+     * Request logout from the host.
+     * This will redirect to the auth page.
+     */
+    logout(e) {
+      i(b.LOGOUT, { redirectUrl: e });
+    },
+    /**
+     * Request a token refresh from the host.
+     * This will trigger a page reload.
+     */
+    refreshToken() {
+      i(b.REFRESH);
+    },
+    /**
+     * Request token verification from the host.
+     */
+    verifyToken(e) {
+      i(b.VERIFY, { token: e });
+    }
+  };
+}
+const R = ["success", "error", "warning", "info"];
+function j(t) {
+  const e = [];
+  return t.type === void 0 || t.type === null ? e.push("Toast type is required") : (typeof t.type != "string" || !R.includes(t.type)) && e.push(
+    `Invalid toast type "${t.type}". Expected: ${R.join(" | ")}`
+  ), t.message === void 0 || t.message === null ? e.push("Toast message is required") : typeof t.message != "string" ? e.push("Toast message must be a string") : t.message.trim() === "" && e.push("Toast message cannot be empty"), t.duration !== void 0 && t.duration !== null && (typeof t.duration != "number" ? e.push("Toast duration must be a number") : t.duration < 0 && e.push("Toast duration cannot be negative")), { valid: e.length === 0, errors: e };
+}
+function H(t) {
+  const e = [];
+  return Array.isArray(t) ? (t.forEach((r, n) => {
+    if (typeof r != "object" || r === null) {
+      e.push(`Breadcrumb item at index ${n} must be an object`);
+      return;
+    }
+    const a = r;
+    a.label ? typeof a.label != "string" && e.push(`Breadcrumb item at index ${n} "label" must be a string`) : e.push(
+      `Breadcrumb item at index ${n} is missing required "label" property`
+    ), a.path !== void 0 && typeof a.path != "string" && e.push(`Breadcrumb item at index ${n} "path" must be a string`);
+  }), { valid: e.length === 0, errors: e }) : (e.push("Breadcrumbs must be an array"), { valid: !1, errors: e });
+}
+function W(t) {
+  const e = [];
+  return typeof t != "object" || t === null ? (e.push("Checkout payload must be an object"), { valid: !1, errors: e }) : (t.amount !== void 0 && t.amount !== null && (typeof t.amount != "number" ? e.push("Checkout amount must be a number") : t.amount < 0 && e.push("Checkout amount cannot be negative")), t.currency !== void 0 && t.currency !== null && (typeof t.currency != "string" ? e.push("Checkout currency must be a string") : t.currency.trim() === "" && e.push("Checkout currency cannot be empty")), t.items !== void 0 && t.items !== null && (Array.isArray(t.items) || e.push("Checkout items must be an array")), { valid: e.length === 0, errors: e });
+}
+function Y(t) {
+  const e = [];
+  return t.path === void 0 || t.path === null ? e.push("Navigation path is required") : typeof t.path != "string" ? e.push("Navigation path must be a string") : t.path.trim() === "" && e.push("Navigation path cannot be empty"), t.replace !== void 0 && typeof t.replace != "boolean" && e.push("Navigation replace option must be a boolean"), { valid: e.length === 0, errors: e };
+}
+function Z(t) {
+  const e = [];
+  if (t.url === void 0 || t.url === null)
+    e.push("Redirect URL is required");
+  else if (typeof t.url != "string")
+    e.push("Redirect URL must be a string");
+  else if (t.url.trim() === "")
+    e.push("Redirect URL cannot be empty");
+  else
+    try {
+      new URL(t.url);
+    } catch {
+      e.push(`Invalid redirect URL: "${t.url}"`);
+    }
+  return { valid: e.length === 0, errors: e };
+}
+function X(t) {
+  const e = [];
+  return t.title === void 0 || t.title === null ? e.push("Nav action title is required") : typeof t.title != "string" && e.push("Nav action title must be a string"), t.url !== void 0 && t.url !== null && typeof t.url != "string" && e.push("Nav action URL must be a string"), t.value !== void 0 && t.value !== null && typeof t.value != "string" && e.push("Nav action value must be a string"), t.extendedActions !== void 0 && t.extendedActions !== null && (Array.isArray(t.extendedActions) ? t.extendedActions.forEach((r, n) => {
+    if (typeof r != "object" || r === null) {
+      e.push(`Extended action at index ${n} must be an object`);
+      return;
+    }
+    const a = r;
+    (!a.title || typeof a.title != "string") && e.push(
+      `Extended action at index ${n} is missing required "title" property`
+    );
+  }) : e.push("Nav action extendedActions must be an array")), { valid: e.length === 0, errors: e };
+}
+const S = ["danger", "warning", "info"];
+function Q(t) {
+  const e = [];
+  return t.title === void 0 || t.title === null ? e.push("Confirm dialog title is required") : typeof t.title != "string" ? e.push("Confirm dialog title must be a string") : t.title.trim() === "" && e.push("Confirm dialog title cannot be empty"), t.message === void 0 || t.message === null ? e.push("Confirm dialog message is required") : typeof t.message != "string" ? e.push("Confirm dialog message must be a string") : t.message.trim() === "" && e.push("Confirm dialog message cannot be empty"), t.confirmText !== void 0 && t.confirmText !== null && typeof t.confirmText != "string" && e.push("Confirm dialog confirmText must be a string"), t.cancelText !== void 0 && t.cancelText !== null && typeof t.cancelText != "string" && e.push("Confirm dialog cancelText must be a string"), t.variant !== void 0 && t.variant !== null && (typeof t.variant != "string" || !S.includes(t.variant)) && e.push(
+    `Invalid confirm variant "${t.variant}". Expected: ${S.join(" | ")}`
+  ), { valid: e.length === 0, errors: e };
+}
+function l(t, e) {
+  console.error(
+    `[EmbeddedSDK] Validation failed for ${t}:
+` + e.map((r) => `  • ${r}`).join(`
+`)
+  );
+}
+function J() {
+  return {
+    /**
+     * Navigate to a path using React Router (SPA navigation).
+     */
+    navigate(t, e) {
+      const r = Y({ path: t, ...e });
+      if (!r.valid) {
+        l(h.NAVIGATE, r.errors);
+        return;
+      }
+      i(h.NAVIGATE, {
+        path: t,
+        state: e == null ? void 0 : e.state,
+        replace: e == null ? void 0 : e.replace
+      });
+    },
+    /**
+     * Redirect to a URL (full page reload).
+     */
+    redirect(t) {
+      const e = Z({ url: t });
+      if (!e.valid) {
+        l(h.REDIRECT, e.errors);
+        return;
+      }
+      i(h.REDIRECT, { url: t });
+    },
+    /**
+     * Navigate to a path - auto-detects internal vs external.
+     */
+    navTo(t, e) {
+      if (t.startsWith("http://") || t.startsWith("https://")) {
+        this.redirect(t);
+        return;
+      }
+      this.navigate(t, e);
+    },
+    /**
+     * Update the iframe height.
+     */
+    resize(t) {
+      if (typeof t != "number" || t < 0) {
+        l(T.RESIZE, [
+          "Height must be a non-negative number"
+        ]);
+        return;
+      }
+      i(T.RESIZE, { height: t });
+    },
+    /**
+     * Auto-resize iframe to content height.
+     */
+    autoResize() {
+      const t = document.documentElement.scrollHeight;
+      this.resize(t);
+    }
+  };
+}
+function ee() {
+  const t = /* @__PURE__ */ new Set();
+  return m(g.ACTION_CLICK, (e) => {
+    t.forEach((r) => {
+      try {
+        r(e.url, e.value);
+      } catch (n) {
+        console.error("[EmbeddedSDK] Error in action click callback:", n);
+      }
+    });
+  }), {
+    /**
+     * Set the primary action button.
+     */
+    setAction(e) {
+      const r = X(e);
+      if (!r.valid) {
+        l(g.SET_ACTION, r.errors);
+        return;
+      }
+      i(g.SET_ACTION, {
+        title: e.title,
+        url: e.url,
+        value: e.value,
+        extendedActions: e.extendedActions
+      });
+    },
+    /**
+     * Clear the primary action button.
+     */
+    clearAction() {
+      i(g.SET_ACTION, {
+        title: ""
+      });
+    },
+    /**
+     * Subscribe to action button clicks.
+     */
+    onActionClick(e) {
+      return t.add(e), () => {
+        t.delete(e);
+      };
+    },
+    // Legacy aliases
+    primaryAction(e) {
+      this.setAction(e);
+    },
+    clearPrimaryAction() {
+      this.clearAction();
+    }
+  };
+}
+function te() {
+  return {
+    /**
+     * Show loading indicator.
+     */
+    show(t = "full") {
+      i(o.LOADING, { status: !1, mode: t });
+    },
+    /**
+     * Hide loading indicator.
+     */
+    hide() {
+      i(o.LOADING, { status: !0, mode: "full" });
+    },
+    /**
+     * Set the loading state directly.
+     */
+    set(t, e = "full") {
+      i(o.LOADING, { status: t, mode: e });
+    }
+  };
+}
+function re() {
+  return {
+    /**
+     * Open overlay mode.
+     */
+    open() {
+      i(o.OVERLAY, { action: "open" });
+    },
+    /**
+     * Close overlay mode.
+     */
+    close() {
+      i(o.OVERLAY, { action: "close" });
+    }
+  };
+}
+function ne() {
+  return {
+    /**
+     * Set breadcrumb items.
+     */
+    set(t) {
+      const e = H(t);
+      if (!e.valid) {
+        l(o.BREADCRUMB, e.errors);
+        return;
+      }
+      i(o.BREADCRUMB, { items: t });
+    },
+    /**
+     * Clear breadcrumbs.
+     */
+    clear() {
+      i(o.BREADCRUMB, { items: [] });
+    }
+  };
+}
+function ie() {
+  const t = (e) => {
+    const r = j(e);
+    if (!r.valid) {
+      l(o.TOAST, r.errors);
+      return;
+    }
+    i(o.TOAST, {
+      type: e.type,
+      message: e.message,
+      duration: e.duration
+    });
+  };
+  return {
+    /**
+     * Show a toast notification.
+     */
+    show: t,
+    /**
+     * Show success toast.
+     */
+    success(e, r) {
+      t({ type: "success", message: e, duration: r });
+    },
+    /**
+     * Show error toast.
+     */
+    error(e, r) {
+      t({ type: "error", message: e, duration: r });
+    },
+    /**
+     * Show warning toast.
+     */
+    warning(e, r) {
+      t({ type: "warning", message: e, duration: r });
+    },
+    /**
+     * Show info toast.
+     */
+    info(e, r) {
+      t({ type: "info", message: e, duration: r });
+    }
+  };
+}
+function se() {
+  return {
+    /**
+     * Open a modal.
+     */
+    open(t, e) {
+      i(o.MODAL, {
+        action: "open",
+        id: t,
+        content: e
+      });
+    },
+    /**
+     * Close a modal.
+     */
+    close(t) {
+      i(o.MODAL, {
+        action: "close",
+        id: t
+      });
+    }
+  };
+}
+function ae() {
+  return async (t) => {
+    const e = Q(t);
+    return e.valid ? z(o.CONFIRM, {
+      title: t.title,
+      message: t.message,
+      confirmText: t.confirmText ?? "Confirm",
+      cancelText: t.cancelText ?? "Cancel",
+      variant: t.variant ?? "info"
+    }) : (l(o.CONFIRM, e.errors), Promise.reject(new Error(e.errors.join(", "))));
+  };
+}
+function oe() {
+  return {
+    loading: te(),
+    overlay: re(),
+    breadcrumbs: ne(),
+    toast: ie(),
+    modal: se(),
+    confirm: ae()
+  };
+}
+function ue() {
+  return {
+    /**
+     * Create/initiate a checkout.
+     */
+    create(t) {
+      const e = W(t);
+      if (!e.valid) {
+        l(w.CREATE, e.errors);
+        return;
+      }
+      i(w.CREATE, { payload: t });
+    }
+  };
+}
+const I = {
+  appId: "",
+  env: "prod",
+  debug: !1,
+  initialized: !1
+}, C = {
+  ready: !1,
+  initializing: !1
+};
+class le {
+  constructor() {
+    this.config = { ...I }, this.state = { ...C }, this.themeCallbacks = /* @__PURE__ */ new Set(), this.auth = G(() => this.getState()), this.page = J(), this.nav = ee(), this.ui = oe(), this.checkout = ue(), this.setupThemeListener(), this.setupResponseListeners();
+  }
+  /**
+   * Get current SDK state.
+   */
+  getState() {
+    return { ...this.state };
+  }
+  /**
+   * Get current SDK configuration.
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+  /**
+   * Check if SDK is ready.
+   */
+  isReady() {
+    return this.state.ready;
+  }
+  /**
+   * Log debug messages if debug mode is enabled.
+   */
+  log(...e) {
+    this.config.debug && console.log(`[EmbeddedSDK v${p}]`, ...e);
+  }
+  /**
+   * Log warnings.
+   */
+  warn(...e) {
+    console.warn(`[EmbeddedSDK v${p}]`, ...e);
+  }
+  /**
+   * Set up listener for theme changes from host.
+   */
+  setupThemeListener() {
+    m(y.THEME_CHANGE, (e) => {
+      this.state.isDarkMode = e.dark, this.log("Theme changed:", e.dark ? "dark" : "light"), this.themeCallbacks.forEach((r) => {
+        try {
+          r(e.dark);
+        } catch (n) {
+          console.error("[EmbeddedSDK] Error in theme callback:", n);
+        }
+      });
+    });
+  }
+  /**
+   * Set up listeners for async response events from host.
+   */
+  setupResponseListeners() {
+    m(o.CONFIRM_RESPONSE, (e) => {
+      this.log("Received confirm response:", e), A(e.requestId, { confirmed: e.confirmed });
+    }), m(o.MODAL_RESPONSE, (e) => {
+      this.log("Received modal response:", e), A(e.requestId, e.result, e.error);
+    });
+  }
+  /**
+   * Subscribe to theme changes.
+   *
+   * @param callback - Function called when theme changes
+   * @returns Unsubscribe function
+   *
+   * @example
+   * ```typescript
+   * const unsubscribe = embedded.onThemeChange((isDark) => {
+   *   document.body.classList.toggle('dark-mode', isDark);
+   * });
+   * ```
+   */
+  onThemeChange(e) {
+    return this.themeCallbacks.add(e), () => {
+      this.themeCallbacks.delete(e);
+    };
+  }
+  /**
+   * Report an error to the host.
+   *
+   * @param error - Error object or message
+   * @param context - Additional context
+   *
+   * @example
+   * ```typescript
+   * try {
+   *   await riskyOperation();
+   * } catch (err) {
+   *   embedded.reportError(err, { operation: 'riskyOperation' });
+   * }
+   * ```
+   */
+  reportError(e, r) {
+    const n = typeof e == "string" ? { message: e } : {
+      message: e.message,
+      stack: e.stack,
+      code: e.code
+    };
+    i(L.REPORT, {
+      error: n,
+      context: r
+    });
+  }
+  /**
+   * Initialize the SDK and establish connection with the host.
+   *
+   * @param options - Initialization options
+   * @returns Promise that resolves when SDK is ready
+   *
+   * @example
+   * ```typescript
+   * await embedded.init({
+   *   app_id: 'my-app-123',
+   *   env: 'prod',
+   *   debug: true
+   * });
+   * ```
+   */
+  async init(e) {
+    if (this.config.initialized)
+      return this.log("Already initialized, returning current state"), this.getState();
+    if (this.state.initializing)
+      return this.warn("Initialization already in progress"), this.waitForReady();
+    if (!e.app_id)
+      throw new Error("[EmbeddedSDK] app_id is required");
+    F() || this.warn("Not running in an iframe. Some features may not work."), this.config = {
+      appId: e.app_id,
+      env: e.env ?? "prod",
+      debug: e.debug ?? !1,
+      initialized: !1
+    }, this.state.initializing = !0, this.log("Initializing with options:", e);
+    try {
+      i(T.READY, {
+        height: document.documentElement.scrollHeight
+      }), this.log("Sent iframe.ready message, waiting for context...");
+      const r = await V(
+        y.PROVIDE
+      );
+      return this.log("Received context from host:", r), this.state = {
+        ready: !0,
+        initializing: !1,
+        token: r.token,
+        storeId: r.storeId,
+        userId: r.userId,
+        merchantPlan: r.plan,
+        isDarkMode: r.isDarkMode,
+        parentWidth: r.parentWidth,
+        baseUrl: r.baseUrl,
+        baseApiUrl: r.baseApiUrl,
+        locale: r.locale
+      }, this.config.initialized = !0, this.log("Initialization complete. State:", this.state), this.getState();
+    } catch (r) {
+      throw this.state.initializing = !1, this.state.ready = !1, r;
+    }
+  }
+  /**
+   * Wait for the SDK to be ready.
+   * Useful when multiple calls to init() might happen.
+   */
+  waitForReady() {
+    return new Promise((e) => {
+      const r = () => {
+        this.state.ready ? e(this.getState()) : setTimeout(r, 100);
+      };
+      r();
+    });
+  }
+  /**
+   * Destroy the SDK instance and clean up resources.
+   */
+  destroy() {
+    this.log("Destroying SDK instance"), B("SDK destroyed"), P(), this.themeCallbacks.clear(), this.config = { ...I }, this.state = { ...C };
+  }
+}
+let f = null;
+function ce() {
+  return f || (f = new le()), f;
+}
+function fe() {
+  f && (f.destroy(), f = null);
+}
+const N = ce(), me = p;
+typeof window < "u" && (window.salla = window.salla || window.Salla || {}, window.Salla = window.salla, window.salla.embedded || (window.salla.embedded = N), window.Salla.embedded || (window.Salla.embedded = N));
+export {
+  le as EmbeddedApp,
+  N as embedded,
+  ce as getEmbeddedApp,
+  fe as resetEmbeddedApp,
+  me as version
+};
+//# sourceMappingURL=index.js.map