Add company logos to emails, receipts, and PDFs

type CustomerBrand = { logoPath: string | null; logoEtag: string | null; accent: string };
type Color = { hex: string; oklch: { l: number; c: number; h: number } };

const DEFAULT_ACCENT = "#18181b";

// Palettes often start with black or white. Use the first color with enough
// chroma to work as an accent. Tune 0.08 to your design; neutrals are close to 0.
const pickAccent = (colors: Color[]) =>
  colors.find((color) => color.oklch.c >= 0.08)?.hex ?? DEFAULT_ACCENT;

export async function saveCustomerBrand(
  domain: string,
  upload: (path: string, bytes: Uint8Array, contentType: string) => Promise<void>,
  // The record you stored last time, if any. A refresh skips the download when
  // the logo has not changed.
  previous?: CustomerBrand,
): Promise<CustomerBrand> {
  const res = await fetch(
    `https://api.logo.dev/v2/brands?domain=${encodeURIComponent(domain)}`,
    { headers: { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` } },
  );
  if (res.status === 404) {
    // No brand for this domain.
    return { logoPath: null, logoEtag: null, accent: DEFAULT_ACCENT };
  }
  if (res.status !== 200) {
    // Still indexing, rate limited, or an error. Keep what you stored and retry later:
    // https://www.logo.dev/docs/brand/introduction#handle-each-status
    return previous ?? { logoPath: null, logoEtag: null, accent: DEFAULT_ACCENT };
  }

  const { data }: { data: { logo: { url: string; etag: string } | null; colors: Color[] } } =
    await res.json();
  const accent = pickAccent(data.colors);
  // The brand has no logo now, so clear the stored one.
  if (!data.logo) return { logoPath: null, logoEtag: null, accent };
  if (previous?.logoPath && previous.logoEtag === data.logo.etag) {
    return { logoPath: previous.logoPath, logoEtag: previous.logoEtag, accent };
  }

  const download = new URL(data.logo.url);
  download.searchParams.set("format", "png");
  download.searchParams.set("size", "192");
  const file = await fetch(download);
  if (!file.ok || !file.headers.get("content-type")?.startsWith("image/")) {
    // Never store an error body as the logo. Keep the stored logo and retry later.
    return previous ? { ...previous, accent } : { logoPath: null, logoEtag: null, accent };
  }
  const logoPath = `customer-logos/${domain}.png`;
  await upload(logoPath, new Uint8Array(await file.arrayBuffer()), "image/png");
  // Store the etag with the record, and pass the record back on the next refresh.
  return { logoPath, logoEtag: data.logo.etag, accent };
}

// Customer values can contain quotes or markup, so escape every one.
const HTML_ESCAPES: Record<string, string> = {
  "&": "&amp;",
  "<": "&lt;",
  ">": "&gt;",
  '"': "&quot;",
  "'": "&#39;",
};
const escapeHtml = (value: string) => value.replace(/[&<>"']/g, (char) => HTML_ESCAPES[char]);

export function receiptEmailHtml(customer: {
  name: string;
  logoUrl: string | null; // your stored copy, such as https://files.example.com/customer-logos/stripe.com.png
  accent: string;
}): string {
  const name = escapeHtml(customer.name);
  // Only a hex color goes into the style attribute.
  const accent = /^#(?:[0-9a-f]{3}){1,2}$/i.test(customer.accent) ? customer.accent : "#18181b";
  const logo = customer.logoUrl
    ? `<img src="${escapeHtml(customer.logoUrl)}" width="48" height="48" alt="${name} logo" style="display:block;border-radius:8px" />`
    : "";
  return `
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td style="padding:24px;border-top:4px solid ${accent}">
          ${logo}
          <h1 style="font:600 16px sans-serif;margin:16px 0 0">Invoice for ${name}</h1>
        </td>
      </tr>
    </table>`;
}