@scpdemo/test-sdk-card 1.0.1

package/README.md

@@ -0,0 +1,31 @@
+# @scallop-card/sdk-react
+
+This package exposes the React hook (`useScPrefixSdk`) and the iframe wrapper component (`ScPrefixWidgetWrapper`) for embedding the Scallop Card widget that now lives inside the Next.js iframe app.
+
+## Embedding the widget
+
+1. Deploy the iframe app located at `packages/iframe-app` (or run it locally via `pnpm --filter @scallop-card/iframe-app dev`).
+2. Provide the iframe URL via env (`VITE_SC_PREFIX_IFRAME_URL`, `NEXT_PUBLIC_SC_PREFIX_IFRAME_URL`, `REACT_APP_SC_PREFIX_IFRAME_URL`, or `SC_PREFIX_IFRAME_URL`) or pass it explicitly:
+
+```tsx
+import { ScPrefixWidgetWrapper } from "@scallop-card/sdk-react";
+
+export function CardWidget(): JSX.Element {
+  return (
+    <ScPrefixWidgetWrapper
+      style={{ minHeight: "720px" }}
+      allow="clipboard-write"
+    />
+  );
+}
+```
+
+The component forwards any additional props to the underlying `<iframe>` element, so you can control sizing, permissions, sandboxing, and more.
+
+## Server-side API proxy
+
+The iframe app hides the raw SDK calls (`scPrefixSubmitRequest`, `scPrefixGetStatus`) behind server-side API routes. Configure your Scallop credentials via environment variables (see `packages/iframe-app/.env.example`).
+
+## Hooks
+
+`useScPrefixSdk` remains available if you need direct access to the core SDK from React components (for example, to build custom dashboards or orchestration flows).

package/dist/index.cjs

@@ -0,0 +1,304 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ScPrefixWidgetWrapper: () => ScPrefixWidgetWrapper,
+  useScPrefixSdk: () => useScPrefixSdk
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/hooks/useScPrefixSdk.ts
+var import_react2 = require("react");
+
+// src/lib/config.ts
+var SC_PREFIX_DEFAULT_ENDPOINTS = {
+  sandbox: "https://sandbox.api.scallopcard.com",
+  production: "https://api.scallopcard.com"
+};
+var ScPrefixConfigManager = class _ScPrefixConfigManager {
+  static instance;
+  config = null;
+  constructor() {
+  }
+  static getInstance() {
+    if (!_ScPrefixConfigManager.instance) {
+      _ScPrefixConfigManager.instance = new _ScPrefixConfigManager();
+    }
+    return _ScPrefixConfigManager.instance;
+  }
+  initialize(config) {
+    if (!config.apiKey) {
+      throw new Error("SC_PREFIX: API key is required");
+    }
+    const environment = config.environment ?? "sandbox";
+    const apiBaseUrl = config.apiBaseUrl ?? SC_PREFIX_DEFAULT_ENDPOINTS[environment];
+    this.config = {
+      ...config,
+      environment,
+      apiBaseUrl,
+      storageNamespace: config.storageNamespace ?? "sc-prefix-sdk"
+    };
+  }
+  getConfig() {
+    if (!this.config) {
+      throw new Error("SC_PREFIX: SDK is not initialized");
+    }
+    return this.config;
+  }
+  reset() {
+    this.config = null;
+  }
+};
+var ScPrefixConfigSingleton = ScPrefixConfigManager.getInstance();
+
+// src/lib/utils/http-client.ts
+var import_axios = __toESM(require("axios"), 1);
+var ScPrefixHttpClient = class {
+  client;
+  constructor(baseURL, apiKey) {
+    this.client = import_axios.default.create({
+      baseURL,
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`
+      }
+    });
+  }
+  async get(url, config) {
+    const response = await this.client.get(url, config);
+    return response.data;
+  }
+  async post(url, body, config) {
+    const response = await this.client.post(url, body, config);
+    return response.data;
+  }
+};
+
+// src/lib/api/client.ts
+var ScPrefixApiClient = class {
+  httpClient;
+  constructor() {
+    const config = ScPrefixConfigSingleton.getConfig();
+    this.httpClient = new ScPrefixHttpClient(
+      config.apiBaseUrl ?? "",
+      config.apiKey
+    );
+  }
+  async submit(payload) {
+    return this.httpClient.post(
+      "/card/requests",
+      payload
+    );
+  }
+  async status(requestId) {
+    return this.httpClient.get(
+      `/card/requests/${requestId}`
+    );
+  }
+};
+
+// src/lib/storage/local-storage.ts
+var ScPrefixStorage = class {
+  storageKey;
+  constructor(config) {
+    this.storageKey = `${config.storageNamespace ?? "sc-prefix-sdk"}:cache`;
+  }
+  setItem(key, value) {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return;
+    }
+    const payload = JSON.stringify(value);
+    window.localStorage.setItem(`${this.storageKey}:${key}`, payload);
+  }
+  getItem(key) {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return null;
+    }
+    const payload = window.localStorage.getItem(`${this.storageKey}:${key}`);
+    if (!payload) {
+      return null;
+    }
+    try {
+      return JSON.parse(payload);
+    } catch {
+      window.localStorage.removeItem(`${this.storageKey}:${key}`);
+      return null;
+    }
+  }
+  removeItem(key) {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return;
+    }
+    window.localStorage.removeItem(`${this.storageKey}:${key}`);
+  }
+};
+
+// src/lib/components/Widget.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function resolveIframeUrlFromEnv() {
+  const envFromMeta = (() => {
+    try {
+      return new Function(
+        'return typeof import !== "undefined" ? import.meta.env : undefined;'
+      )();
+    } catch {
+      return void 0;
+    }
+  })() ?? void 0;
+  const iframeFromMeta = envFromMeta?.VITE_SC_PREFIX_IFRAME_URL ?? envFromMeta?.NEXT_PUBLIC_SC_PREFIX_IFRAME_URL ?? envFromMeta?.REACT_APP_SC_PREFIX_IFRAME_URL ?? envFromMeta?.SC_PREFIX_IFRAME_URL;
+  if (iframeFromMeta) return iframeFromMeta;
+  if (typeof process !== "undefined" && typeof process.env !== "undefined") {
+    return process.env.NEXT_PUBLIC_SC_PREFIX_IFRAME_URL ?? process.env.REACT_APP_SC_PREFIX_IFRAME_URL ?? process.env.VITE_SC_PREFIX_IFRAME_URL ?? process.env.SC_PREFIX_IFRAME_URL;
+  }
+  return void 0;
+}
+function resolveIframeUrl(provided) {
+  const normalized = provided?.trim() ?? "";
+  const resolved = normalized || resolveIframeUrlFromEnv();
+  if (!resolved) {
+    throw new Error(
+      "ScPrefixWidget requires an iframe URL. Provide iframeUrl prop or set SC_PREFIX_IFRAME_URL (NEXT_PUBLIC_*/REACT_APP_/VITE_)."
+    );
+  }
+  return resolved;
+}
+var ScPrefixWidget = (0, import_react.forwardRef)(function ScPrefixWidget2({ iframeUrl, className, title = "Scallop Card Widget", style, ...rest }, ref) {
+  const combinedClassName = (0, import_react.useMemo)(() => {
+    return ["sc-prefix-widget-frame", className].filter((value) => Boolean(value && value.trim().length > 0)).join(" ");
+  }, [className]);
+  const mergedStyle = (0, import_react.useMemo)(() => {
+    return {
+      border: "0",
+      width: "100%",
+      minHeight: "640px",
+      borderRadius: "12px",
+      boxShadow: "0 10px 30px rgba(15, 23, 42, 0.08)",
+      ...style
+    };
+  }, [style]);
+  const resolvedIframeUrl = (0, import_react.useMemo)(() => resolveIframeUrl(iframeUrl), [iframeUrl]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      ref,
+      src: resolvedIframeUrl,
+      title,
+      className: combinedClassName,
+      style: mergedStyle,
+      scrolling: "no",
+      ...rest
+    }
+  );
+});
+
+// src/lib/index.ts
+var scPrefixStorage = null;
+function scPrefixInitialize(config) {
+  ScPrefixConfigSingleton.initialize(config);
+  scPrefixStorage = new ScPrefixStorage(config);
+}
+async function scPrefixSubmitRequest(payload) {
+  const apiClient = new ScPrefixApiClient();
+  const response = await apiClient.submit(payload);
+  scPrefixStorage?.setItem(`request:${response.requestId}`, response);
+  return response;
+}
+async function scPrefixGetStatus(requestId) {
+  const cached = scPrefixStorage?.getItem(
+    `request:${requestId}`
+  );
+  if (cached) {
+    return cached;
+  }
+  const apiClient = new ScPrefixApiClient();
+  const response = await apiClient.status(requestId);
+  scPrefixStorage?.setItem(`request:${response.requestId}`, response);
+  return response;
+}
+
+// src/hooks/useScPrefixSdk.ts
+function useScPrefixSdk(config) {
+  const [state, setState] = (0, import_react2.useState)({ isReady: false });
+  (0, import_react2.useEffect)(() => {
+    try {
+      scPrefixInitialize(config);
+      setState((prev) => ({ ...prev, isReady: true, error: void 0 }));
+    } catch (error) {
+      setState((prev) => ({ ...prev, error }));
+    }
+  }, [config]);
+  const actions = (0, import_react2.useMemo)(
+    () => ({
+      async submitRequest(payload) {
+        try {
+          const response = await scPrefixSubmitRequest(payload);
+          setState((prev) => ({
+            ...prev,
+            lastRequest: response,
+            error: void 0
+          }));
+          return response;
+        } catch (error) {
+          setState((prev) => ({ ...prev, error }));
+          return void 0;
+        }
+      },
+      async checkStatus(requestId) {
+        try {
+          const status = await scPrefixGetStatus(requestId);
+          setState((prev) => ({
+            ...prev,
+            lastStatus: status ?? void 0,
+            error: void 0
+          }));
+          return status;
+        } catch (error) {
+          setState((prev) => ({ ...prev, error }));
+          return null;
+        }
+      }
+    }),
+    []
+  );
+  return { state, actions };
+}
+
+// src/components/ScPrefixWidgetWrapper.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ScPrefixWidgetWrapper(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScPrefixWidget, { ...props });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScPrefixWidgetWrapper,
+  useScPrefixSdk
+});

package/dist/index.js

@@ -0,0 +1,269 @@
+// src/hooks/useScPrefixSdk.ts
+import { useEffect, useMemo as useMemo2, useState } from "react";
+
+// src/lib/config.ts
+var SC_PREFIX_DEFAULT_ENDPOINTS = {
+  sandbox: "https://sandbox.api.scallopcard.com",
+  production: "https://api.scallopcard.com"
+};
+var ScPrefixConfigManager = class _ScPrefixConfigManager {
+  static instance;
+  config = null;
+  constructor() {
+  }
+  static getInstance() {
+    if (!_ScPrefixConfigManager.instance) {
+      _ScPrefixConfigManager.instance = new _ScPrefixConfigManager();
+    }
+    return _ScPrefixConfigManager.instance;
+  }
+  initialize(config) {
+    if (!config.apiKey) {
+      throw new Error("SC_PREFIX: API key is required");
+    }
+    const environment = config.environment ?? "sandbox";
+    const apiBaseUrl = config.apiBaseUrl ?? SC_PREFIX_DEFAULT_ENDPOINTS[environment];
+    this.config = {
+      ...config,
+      environment,
+      apiBaseUrl,
+      storageNamespace: config.storageNamespace ?? "sc-prefix-sdk"
+    };
+  }
+  getConfig() {
+    if (!this.config) {
+      throw new Error("SC_PREFIX: SDK is not initialized");
+    }
+    return this.config;
+  }
+  reset() {
+    this.config = null;
+  }
+};
+var ScPrefixConfigSingleton = ScPrefixConfigManager.getInstance();
+
+// src/lib/utils/http-client.ts
+import axios from "axios";
+var ScPrefixHttpClient = class {
+  client;
+  constructor(baseURL, apiKey) {
+    this.client = axios.create({
+      baseURL,
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`
+      }
+    });
+  }
+  async get(url, config) {
+    const response = await this.client.get(url, config);
+    return response.data;
+  }
+  async post(url, body, config) {
+    const response = await this.client.post(url, body, config);
+    return response.data;
+  }
+};
+
+// src/lib/api/client.ts
+var ScPrefixApiClient = class {
+  httpClient;
+  constructor() {
+    const config = ScPrefixConfigSingleton.getConfig();
+    this.httpClient = new ScPrefixHttpClient(
+      config.apiBaseUrl ?? "",
+      config.apiKey
+    );
+  }
+  async submit(payload) {
+    return this.httpClient.post(
+      "/card/requests",
+      payload
+    );
+  }
+  async status(requestId) {
+    return this.httpClient.get(
+      `/card/requests/${requestId}`
+    );
+  }
+};
+
+// src/lib/storage/local-storage.ts
+var ScPrefixStorage = class {
+  storageKey;
+  constructor(config) {
+    this.storageKey = `${config.storageNamespace ?? "sc-prefix-sdk"}:cache`;
+  }
+  setItem(key, value) {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return;
+    }
+    const payload = JSON.stringify(value);
+    window.localStorage.setItem(`${this.storageKey}:${key}`, payload);
+  }
+  getItem(key) {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return null;
+    }
+    const payload = window.localStorage.getItem(`${this.storageKey}:${key}`);
+    if (!payload) {
+      return null;
+    }
+    try {
+      return JSON.parse(payload);
+    } catch {
+      window.localStorage.removeItem(`${this.storageKey}:${key}`);
+      return null;
+    }
+  }
+  removeItem(key) {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return;
+    }
+    window.localStorage.removeItem(`${this.storageKey}:${key}`);
+  }
+};
+
+// src/lib/components/Widget.tsx
+import {
+  forwardRef,
+  useMemo
+} from "react";
+import { jsx } from "react/jsx-runtime";
+function resolveIframeUrlFromEnv() {
+  const envFromMeta = (() => {
+    try {
+      return new Function(
+        'return typeof import !== "undefined" ? import.meta.env : undefined;'
+      )();
+    } catch {
+      return void 0;
+    }
+  })() ?? void 0;
+  const iframeFromMeta = envFromMeta?.VITE_SC_PREFIX_IFRAME_URL ?? envFromMeta?.NEXT_PUBLIC_SC_PREFIX_IFRAME_URL ?? envFromMeta?.REACT_APP_SC_PREFIX_IFRAME_URL ?? envFromMeta?.SC_PREFIX_IFRAME_URL;
+  if (iframeFromMeta) return iframeFromMeta;
+  if (typeof process !== "undefined" && typeof process.env !== "undefined") {
+    return process.env.NEXT_PUBLIC_SC_PREFIX_IFRAME_URL ?? process.env.REACT_APP_SC_PREFIX_IFRAME_URL ?? process.env.VITE_SC_PREFIX_IFRAME_URL ?? process.env.SC_PREFIX_IFRAME_URL;
+  }
+  return void 0;
+}
+function resolveIframeUrl(provided) {
+  const normalized = provided?.trim() ?? "";
+  const resolved = normalized || resolveIframeUrlFromEnv();
+  if (!resolved) {
+    throw new Error(
+      "ScPrefixWidget requires an iframe URL. Provide iframeUrl prop or set SC_PREFIX_IFRAME_URL (NEXT_PUBLIC_*/REACT_APP_/VITE_)."
+    );
+  }
+  return resolved;
+}
+var ScPrefixWidget = forwardRef(function ScPrefixWidget2({ iframeUrl, className, title = "Scallop Card Widget", style, ...rest }, ref) {
+  const combinedClassName = useMemo(() => {
+    return ["sc-prefix-widget-frame", className].filter((value) => Boolean(value && value.trim().length > 0)).join(" ");
+  }, [className]);
+  const mergedStyle = useMemo(() => {
+    return {
+      border: "0",
+      width: "100%",
+      minHeight: "640px",
+      borderRadius: "12px",
+      boxShadow: "0 10px 30px rgba(15, 23, 42, 0.08)",
+      ...style
+    };
+  }, [style]);
+  const resolvedIframeUrl = useMemo(() => resolveIframeUrl(iframeUrl), [iframeUrl]);
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref,
+      src: resolvedIframeUrl,
+      title,
+      className: combinedClassName,
+      style: mergedStyle,
+      scrolling: "no",
+      ...rest
+    }
+  );
+});
+
+// src/lib/index.ts
+var scPrefixStorage = null;
+function scPrefixInitialize(config) {
+  ScPrefixConfigSingleton.initialize(config);
+  scPrefixStorage = new ScPrefixStorage(config);
+}
+async function scPrefixSubmitRequest(payload) {
+  const apiClient = new ScPrefixApiClient();
+  const response = await apiClient.submit(payload);
+  scPrefixStorage?.setItem(`request:${response.requestId}`, response);
+  return response;
+}
+async function scPrefixGetStatus(requestId) {
+  const cached = scPrefixStorage?.getItem(
+    `request:${requestId}`
+  );
+  if (cached) {
+    return cached;
+  }
+  const apiClient = new ScPrefixApiClient();
+  const response = await apiClient.status(requestId);
+  scPrefixStorage?.setItem(`request:${response.requestId}`, response);
+  return response;
+}
+
+// src/hooks/useScPrefixSdk.ts
+function useScPrefixSdk(config) {
+  const [state, setState] = useState({ isReady: false });
+  useEffect(() => {
+    try {
+      scPrefixInitialize(config);
+      setState((prev) => ({ ...prev, isReady: true, error: void 0 }));
+    } catch (error) {
+      setState((prev) => ({ ...prev, error }));
+    }
+  }, [config]);
+  const actions = useMemo2(
+    () => ({
+      async submitRequest(payload) {
+        try {
+          const response = await scPrefixSubmitRequest(payload);
+          setState((prev) => ({
+            ...prev,
+            lastRequest: response,
+            error: void 0
+          }));
+          return response;
+        } catch (error) {
+          setState((prev) => ({ ...prev, error }));
+          return void 0;
+        }
+      },
+      async checkStatus(requestId) {
+        try {
+          const status = await scPrefixGetStatus(requestId);
+          setState((prev) => ({
+            ...prev,
+            lastStatus: status ?? void 0,
+            error: void 0
+          }));
+          return status;
+        } catch (error) {
+          setState((prev) => ({ ...prev, error }));
+          return null;
+        }
+      }
+    }),
+    []
+  );
+  return { state, actions };
+}
+
+// src/components/ScPrefixWidgetWrapper.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ScPrefixWidgetWrapper(props) {
+  return /* @__PURE__ */ jsx2(ScPrefixWidget, { ...props });
+}
+export {
+  ScPrefixWidgetWrapper,
+  useScPrefixSdk
+};