Access and entitlements

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@offer/sdk": ["../offer-app/src/sdk/index.ts"],
      "@offer/sdk/checkout": ["../offer-app/src/sdk/checkout/index.ts"],
      "@offer/sdk/cancel": ["../offer-app/src/sdk/cancel/index.ts"]
    }
  }
}

{
  "plan": { "id": "pro", "name": "Pro", "description": "For the prolific blogger.", "isFree": false, "meta": { "badge": "PRO" } },
  "incentive": null,
  "offer": "launch_50",
  "addons": [],
  "entitlements": [
    { "id": "posts", "feature": "posts", "name": "Posts", "type": "usage", "usage": 12, "max": 75, "left": 63, "can": true },
    { "id": "comments", "feature": "comments", "name": "Comments", "type": "usage", "usage": 140, "max": null, "left": null, "can": true },
    { "id": "pin_posts", "feature": "pin_posts", "name": "Pin posts", "type": "boolean", "usage": 0, "max": null, "left": null, "can": true }
  ]
}

import "server-only";
import { OfferApiError, OfferClient } from "@offer/sdk";

export const offer = new OfferClient({
  baseUrl: process.env.OFFER_API_URL, // http://localhost:6767 locally
  apiKey: process.env.OFFER_SECRET_KEY,
});

const APP_ID = process.env.OFFER_APP_ID!;
export const accountPath = (id: string) => `/apps/${APP_ID}/namespaces/${encodeURIComponent(id)}`;

type Entitlement = {
  id: string;
  name: string;
  type: "usage" | "boolean";
  usage: number;
  max: number | null;
  left: number | null;
  can: boolean;
};
export type AccountPlan = { plan: { id: string; name: string }; offer: string | null; addons: string[]; entitlements: Entitlement[] };

/** Creates the account on the free plan the first time you see the user. */
export async function ensureAccount(user: { id: string; name: string }) {
  try {
    return await offer.request(accountPath(user.id));
  } catch (err) {
    if (!(err instanceof OfferApiError) || err.status !== 404) throw err;
  }
  try {
    return await offer.request(`/apps/${APP_ID}/namespaces`, {
      method: "POST",
      body: JSON.stringify({ id: user.id, name: user.name, plan: "free" }),
    });
  } catch (err) {
    // Another request created it first.
    if (err instanceof OfferApiError && err.status === 409) return offer.request(accountPath(user.id));
    throw err;
  }
}

export const getPlan = (accountId: string) => offer.request<AccountPlan>(`${accountPath(accountId)}/plan`);

/** Boolean entitlements the plan doesn't include are missing from the list, so default to false. */
export const can = (plan: AccountPlan, entitlementId: string) =>
  plan.entitlements.find((e) => e.id === entitlementId)?.can ?? false;

"use server";

import { can, getPlan } from "@/lib/offer";
import { requireUser } from "@/lib/session"; // your own auth helper

export async function pinPost(postId: number) {
  const user = await requireUser();
  if (!can(await getPlan(user.id), "pin_posts")) {
    return { error: "Pinned posts aren't included in your plan" };
  }
  // ...pin the post
}

import { OfferApiError } from "@offer/sdk";
import { accountPath, offer } from "@/lib/offer";

type LimitReached = {
  error: "limit_reached";
  message: string;
  entitlement: { id: string; name: string; usage: number; max: number };
  offer: { id: string; plan: { id: string; name: string }; price: number; checkout_url: string | null } | null;
  retry_after_purchase: boolean;
};

export async function createPost(userId: string, input: { title: string; body: string }) {
  try {
    await offer.request(`${accountPath(userId)}/usage/posts/add`, { method: "POST" });
  } catch (err) {
    if (err instanceof OfferApiError && err.status === 402) {
      const limit = err.body as LimitReached;
      return { error: limit.message, upgradeUrl: limit.offer?.checkout_url ?? "/pricing" };
    }
    throw err;
  }
  // ...save the post. If that fails, give the usage back with /usage/posts/remove.
}

{
  "error": "limit_reached",
  "message": "You've used 3 of 3 Posts on the Free plan. Pro includes 75 Posts for $4.50/month for 3 months, then $9/month. Upgrade here: https://blog.example.com/pricing?offer=launch_50&plan=pro&interval=month&account=user_42",
  "entitlement": { "id": "posts", "name": "Posts", "usage": 3, "max": 3 },
  "offer": {
    "id": "launch_50",
    "name": "Launch week: 50% off",
    "plan": { "id": "pro", "name": "Pro" },
    "interval": "month",
    "currency": "USD",
    "price": 4.5,
    "list_price": 9,
    "cycles": 3,
    "new_limit": 75,
    "checkout_url": "https://blog.example.com/pricing?offer=launch_50&plan=pro&interval=month&account=user_42",
    "expires_at": null
  },
  "retry_after_purchase": true
}

// app/account/page.tsx (server component)
import { AccountPanel } from "./account-panel";
import { requireUser } from "@/lib/session"; // your own auth helper

export default async function AccountPage() {
  const user = await requireUser();
  return (
    <AccountPanel
      apiUrl={process.env.OFFER_API_URL!}
      appId={process.env.OFFER_APP_ID!}
      publishableKey={process.env.OFFER_PUBLIC_KEY!}
      accountId={user.id}
    />
  );
}

"use client";

import { OfferProvider, useOfferClient } from "@offer/sdk";
import { useEffect, useState } from "react";

type AccountPlan = { entitlements: { id: string; can: boolean }[] };

// Your own hook on top of the SDK's client. The SDK has no plan hook yet.
function useAccountPlan(appId: string, accountId: string) {
  const client = useOfferClient();
  const [plan, setPlan] = useState<AccountPlan | null>(null);
  useEffect(() => {
    const controller = new AbortController();
    client
      .request<AccountPlan>(`/apps/${appId}/namespaces/${encodeURIComponent(accountId)}/plan`, { signal: controller.signal })
      .then(setPlan, () => {});
    return () => controller.abort();
  }, [client, appId, accountId]);
  return plan;
}

function PinButton({ appId, accountId }: { appId: string; accountId: string }) {
  const plan = useAccountPlan(appId, accountId);
  if (!plan) return null;
  const pin = plan.entitlements.find((e) => e.id === "pin_posts");
  if (!pin?.can) return <a href="/pricing?plan=pro">Upgrade to pin posts</a>;
  return <button type="button">Pin post</button>;
}

export function AccountPanel(props: { apiUrl: string; appId: string; publishableKey: string; accountId: string }) {
  return (
    <OfferProvider baseUrl={props.apiUrl} apiKey={props.publishableKey}>
      <PinButton appId={props.appId} accountId={props.accountId} />
    </OfferProvider>
  );
}

import { priceLabel } from "@offer/sdk/checkout";
import { OfferClient } from "@offer/sdk";

type PricingCard = { plan_id: string; title: string; monthlyPrice?: number; yearlyPrice?: number; currency?: string; isFree: boolean };

export default async function PricingTable() {
  const client = new OfferClient({ baseUrl: process.env.OFFER_API_URL, apiKey: process.env.OFFER_PUBLIC_KEY });
  const cards = await client.request<PricingCard[]>(`/apps/${process.env.OFFER_APP_ID}/plans/pricing`);
  return (
    <ul>
      {cards.map((c) => (
        <li key={c.plan_id}>
          {c.title}: {c.isFree ? "Free" : priceLabel(c.monthlyPrice ?? 0, "month", c.currency ?? "USD")}
        </li>
      ))}
    </ul>
  );
}