How to add customer-specific pricing to a Next.js B2B portal

export function unitPrice(customer: string, sku: string, quantity: number, listPrice: number) {
  if (customer === "ACME-BUILD" && sku === "FAS-1001") {
    // Contract: 12% off bolts, 18% from 50 boxes
    return listPrice * (quantity >= 50 ? 0.82 : 0.88);
  }
  if (customer === "ACME-BUILD" && sku === "TOL-2001") return 129; // until Dec 31?
  return listPrice;
}

npm install pricerules

git clone https://github.com/dalisraieb/pricerules-nextjs-example.git
cd pricerules-nextjs-example
cp .env.example .env.local
npm install
npm run dev

# Your PriceRules API key: dashboard → API → Create key. Server-side only:
# never prefix it with NEXT_PUBLIC_.
PRICERULES_API_KEY=

# Optional: another PriceRules API base URL (default https://pricerules.app/api/v1).
# PRICERULES_BASE_URL=

import "server-only";
import { unstable_rethrow } from "next/navigation";
import { PriceRules, PriceRulesError, type ProductInput, type ResolveData } from "pricerules";
import { errorSentence, type PriceError } from "./price-error";

// The only module that talks to PriceRules. `server-only` makes importing it
// from a Client Component a build error, so the API key can't reach the
// browser: pages call it while rendering on the server, and the cart goes
// through this app's own POST /api/cart.

let client: PriceRules | undefined;

function pricerules(): PriceRules {
  // Reads PRICERULES_API_KEY from the environment; throws MISSING_API_KEY
  // without it. PRICERULES_BASE_URL is optional (a local PriceRules or a mock).
  client ??= new PriceRules({ baseUrl: process.env.PRICERULES_BASE_URL || undefined });
  return client;
}

export type PriceResult =
  | { ok: true; data: ResolveData }
  | { ok: false; error: PriceError };

/**
 * Prices every line for one customer in a single call. `customerId` null is a
 * guest: only rules for every customer apply. Never throws: a failure comes
 * back as a PriceError the page can show.
 */
export async function priceLines(
  customerId: string | null,
  products: ProductInput[],
): Promise<PriceResult> {
  try {
    const { data } = await pricerules().resolve({
      customerId: customerId ?? undefined,
      products,
    });
    return { ok: true, data };
  } catch (error) {
    // When Next.js ends a prerender it rejects pending fetches; the SDK wraps
    // that in its connection error. Hand Next.js its own errors back.
    if (error instanceof PriceRulesError && error.cause) unstable_rethrow(error.cause);
    unstable_rethrow(error);
    return { ok: false, error: toPriceError(error) };
  }
}

async function Catalog({ searchParams }: { searchParams: PageProps<"/">["searchParams"] }) {
  const { category } = await searchParams;
  const active = findCategory(typeof category === "string" ? category : undefined);
  const products = active ? PRODUCTS.filter((product) => product.category === active.slug) : PRODUCTS;

  // One call prices every product on the page for this customer.
  const customer = await getCustomerCode();
  const result = await priceLines(
    customer,
    products.map((product) => ({ sku: product.sku, quantity: 1 })),
  );
  const account = findAccount(customer);
  // …
      <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {products.map((product, index) => (
          <li key={product.sku} className="flex flex-col [&>*]:flex-1">
            <ProductCard product={product} view={result.ok ? explainItem(result.data.items[index]) : null} />
          </li>
        ))}
      </ul>

export function explainItem(item: ResolvedItem): PriceView {
  if (item.match_reason === "PRODUCT_NOT_FOUND") {
    return { kind: "not_found", sku: item.sku, quantity: item.quantity };
  }
  const saving = Math.max(0, roundCents(item.base_price - item.final_price));
  const minimum = item.applied_rule?.constraints.minimum_quantity ?? null;
  const validTo = item.applied_rule?.constraints.valid_to ?? null;
  return {
    kind: "priced",
    sku: item.sku,
    quantity: item.quantity,
    finalPrice: item.final_price,
    basePrice: item.base_price,
    saving,
    savingPercent: item.base_price > 0 ? (saving / item.base_price) * 100 : 0,
    ruleName: item.applied_rule?.name ?? null,
    reason: matchReasonText(item),
    volumeNote: minimum && minimum > 1 ? `Volume price from ${minimum} units` : null,
    untilNote: validTo ? `Contract price until ${formatDay(validTo)}` : null,
  };
}

export const CUSTOMER_COOKIE = "customer";

/** The selected customer's code, or null for a guest. */
export async function getCustomerCode(): Promise<string | null> {
  const store = await cookies();
  return normalizeCustomerCode(store.get(CUSTOMER_COOKIE)?.value);
}

"use server";

import { cookies } from "next/headers";
import { CUSTOMER_COOKIE } from "@/lib/customer-cookie";
import { normalizeCustomerCode } from "@/lib/customers";

/**
 * Switches the customer the store prices for. Setting the cookie re-renders
 * the current page on the server, so every price updates.
 */
export async function setCustomer(value: string | null): Promise<void> {
  const store = await cookies();
  const code = normalizeCustomerCode(value);
  if (code) {
    store.set(CUSTOMER_COOKIE, code, {
      path: "/",
      httpOnly: true,
      sameSite: "lax",
      secure: process.env.NODE_ENV === "production",
      maxAge: 60 * 60 * 24 * 30,
    });
  } else {
    store.delete(CUSTOMER_COOKIE);
  }
}

export function CustomerSwitcher({ current }: { current: string | null }) {
  const id = useId();
  const [pending, startTransition] = useTransition();
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState("");
  const customCode = current && !findAccount(current) ? current : null;

  function apply(code: string | null) {
    setEditing(false);
    startTransition(() => setCustomer(code));
  }

export async function POST(request: Request) {
  const lines = parseLines(await request.json().catch(() => null));
  if (!lines) {
    return Response.json(
      { error: { kind: "api", code: "INVALID_CART", message: "The cart couldn't be read.", requestId: null } },
      { status: 400 },
    );
  }

  const result = await priceLines(await getCustomerCode(), lines);
  if (!result.ok) {
    return Response.json({ error: result.error }, { status: result.error.kind === "setup" ? 500 : 502 });
  }
  return Response.json({ data: result.data });
}

  useEffect(() => {
    if (lines.length === 0) return;
    const controller = new AbortController();
    // A short pause so clicking + five times sends one request.
    const timer = setTimeout(async () => {
      setLoading(true);
      try {
        const response = await fetch("/api/cart", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ lines }),
          signal: controller.signal,
        });
        const body: { data?: ResolveData; error?: PriceError } = await response.json();
        if (body.data) {
          setPriced({ lines, data: body.data });
          setError(null);
        } else {
          setError(body.error ?? networkError);
        }
      } catch (caught) {
        if (controller.signal.aborted) return;
        console.error(caught);
        setError(networkError);
      }
      setLoading(false);
    }, 250);
    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [lines, customer, attempt]);

export function PricingNotices({ result }: { result: PriceResult }) {
  if (!result.ok) {
    return <PriceErrorNotice error={result.error} action={result.error.kind === "api" && <RetryButton />} />;
  }
  const unknown = result.data.warnings.some((warning) => warning.code === "CUSTOMER_NOT_FOUND");
  if (unknown && result.data.customer) return <CustomerNotFoundNotice code={result.data.customer.id} />;
  return null;
}

function toPriceError(error: unknown): PriceError {
  if (error instanceof PriceRulesError) {
    if (error.code === "MISSING_API_KEY") return { kind: "setup" };
    console.error(
      `PriceRules ${error.code} (status ${error.status ?? "none"}, request ${error.requestId ?? "none"}): ${error.message}`,
    );
    return {
      kind: "api",
      code: error.code,
      message: errorSentence(error.code),
      requestId: error.requestId ?? null,
    };
  }
  console.error("Unexpected error while pricing", error);
  return { kind: "api", code: "UNEXPECTED", message: errorSentence(""), requestId: null };
}

npx vercel env add PRICERULES_API_KEY production
npx vercel --prod