App Bridge

npm i @tecof/app-bridge

{ "tecof": "app-bridge", "v": 1, "id": "req_1", "type": "toast", "payload": { "message": "Kaydedildi" } }

{ "tecof": "app-bridge", "v": 1, "id": "req_1", "type": "response", "ok": true, "payload": {} }

{ "tecof": "app-bridge", "v": 1, "type": "context", "payload": { "context": { } } }

{
  "merchant": { "id": "66f0c0ffee0000000000abcd", "name": "Örnek Mağaza", "currency": "TRY", "languages": ["tr", "en"] },
  "user": { "id": "66f0aa00bb11cc22dd33ee66", "name": "Örnek Kullanıcı", "locale": "tr" },
  "installation": {
    "id": "6720aa00bb11cc22dd33ee55",
    "scopes": ["orders:read", "customers:read", "products:read"],
    "plan": { "key": "standart", "status": "active" }
  },
  "app": { "clientId": "tcfa_xxxxxxxxxxxxxxxx", "slug": "isbasi", "name": "Logo İşbaşı" },
  "theme": "light",
  "locale": "tr",
  "action": { "runId": "6720cc00dd11ee22ff33aa55", "key": "create-invoice", "placement": "order.detail", "ids": ["6720bb00cc11dd22ee33ff44"] }
}

import { createAppBridge, isEmbedded } from "@tecof/app-bridge";

if (!isEmbedded()) {
  // Sayfa panel dışında açıldı (window.top === window.self ya da embedded=1 yok)
}

const bridge = createAppBridge({ debug: false }); // host origin'i URL'deki `host` parametresinden okunur
await bridge.ready();                              // handshake → bridge.context dolar

console.log(bridge.context.merchant.name);

// Oturum token'ı: önbellekli, bitişe 10 sn kala yenilenir
const token = await bridge.getSessionToken();

// Kendi sunucunuza Authorization: Bearer <oturum token'ı> ile istek
const res = await bridge.fetch("/api/orders");

bridge.toast("Ayarlar kaydedildi", { kind: "success" });
bridge.navigate("/app/ecommerce/orders/6720bb00cc11dd22ee33ff44");
bridge.open("https://ornek.com/yardim");

const confirmed = await bridge.confirm({
  title: "Faturayı iptal et",
  message: "Bu işlem geri alınamaz.",
  confirmLabel: "İptal et",
  cancelLabel: "Vazgeç",
  destructive: true,
});

bridge.setTitle("Faturalar");
bridge.setLoading(true);
bridge.resize(640);
bridge.close({ refresh: true, message: "Tamamlandı", kind: "success" });
bridge.openBilling();

const unsubscribe = bridge.on("context", (context) => {
  document.documentElement.dataset.theme = context.theme;
});

// app/layout.tsx
import { AppShell } from "./AppShell";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr">
      <body>
        <AppShell>{children}</AppShell>
      </body>
    </html>
  );
}

// app/AppShell.tsx
"use client";

import { AppBridgeProvider } from "@tecof/app-bridge/react";

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <AppBridgeProvider fallback={<p>Yükleniyor…</p>}>
      {children}
    </AppBridgeProvider>
  );
}

// app/invoices/page.tsx
"use client";

import { useEffect, useState } from "react";
import { useAppBridge, useAppContext, useSessionFetch } from "@tecof/app-bridge/react";

type InvoiceRow = { orderNumber: string; invoiceNumber: string };

export default function InvoicesPage() {
  const bridge = useAppBridge();
  const context = useAppContext();
  const sessionFetch = useSessionFetch();
  const [rows, setRows] = useState<InvoiceRow[]>([]);

  useEffect(() => {
    bridge.setTitle("Faturalar");
    sessionFetch("/api/invoices")
      .then((res) => res.json())
      .then((data) => setRows(data.items))
      .catch(() => bridge.toast("Faturalar yüklenemedi", { kind: "error" }));
  }, [bridge, sessionFetch]);

  return (
    <main data-theme={context.theme}>
      <h1>{context.merchant.name} — Faturalar</h1>
      <ul>
        {rows.map((row) => (
          <li key={row.invoiceNumber}>{row.orderNumber}: {row.invoiceNumber}</li>
        ))}
      </ul>
    </main>
  );
}

function decodeBase64Url(value) {
  const normalized = value.replace(/-/g, "+").replace(/_/g, "/");
  return atob(normalized + "=".repeat((4 - (normalized.length % 4)) % 4));
}

const params = new URLSearchParams(window.location.search);
const panelOrigin = decodeBase64Url(params.get("host"));
const pending = new Map();
let seq = 0;

window.addEventListener("message", (event) => {
  if (event.origin !== panelOrigin) return;            // yalnız panel origin'i
  const msg = event.data;
  if (!msg || msg.tecof !== "app-bridge" || msg.v !== 1) return;
  if (msg.type === "response" && pending.has(msg.id)) {
    const { resolve, reject } = pending.get(msg.id);
    pending.delete(msg.id);
    msg.ok ? resolve(msg.payload) : reject(msg.error);
  }
  if (msg.type === "context") {
    // msg.payload.context ile arayüzü güncelle
  }
});

function send(type, payload) {
  const id = `req_${++seq}`;
  return new Promise((resolve, reject) => {
    pending.set(id, { resolve, reject });
    window.parent.postMessage({ tecof: "app-bridge", v: 1, id, type, payload }, panelOrigin);
  });
}

const { context } = await send("handshake", { sdkVersion: "custom-1" });
const { token } = await send("sessionToken");
await send("toast", { message: `Merhaba ${context.user.name}`, kind: "info" });