119 lines
4.0 KiB
TypeScript
119 lines
4.0 KiB
TypeScript
/**
|
|
* Shared brand constants and Logo component for all PDF documents
|
|
* (invoices, credit notes, future quotes / reminders).
|
|
*
|
|
* Phase 7 fix: previously each PDF generator carried its own copy
|
|
* of BRAND and its own Logo. When Cedric customized the invoice
|
|
* issuer block in his deployment (real Strasse Nr., PLZ, etc.),
|
|
* the credit note PDF kept the original placeholders because it
|
|
* had its own duplicate. Hoisting both here means every PDF reads
|
|
* the same source of truth.
|
|
*
|
|
* To change the brand: edit BRAND below. To change the logo:
|
|
* edit Logo below. To change the issuer info Cedric ships: edit
|
|
* BRAND.issuer — both billing-pdf.tsx and credit-note-pdf.tsx pick
|
|
* it up automatically.
|
|
*
|
|
* The Logo component accepts a `color` prop so the credit-note
|
|
* variant can render the SAME shape tinted red (the document
|
|
* family is visually consistent; only the accent colour signals
|
|
* "this is a credit, not an invoice").
|
|
*/
|
|
|
|
import React from "react";
|
|
import { Svg, Polygon, Polyline } from "@react-pdf/renderer";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Brand constants
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const BRAND = {
|
|
name: "PieCed IT",
|
|
// Primary emerald — matches the logo SVG fill (#10B981).
|
|
primary: "#10B981",
|
|
// Slightly darker emerald for headings.
|
|
primaryDark: "#0a8060",
|
|
textColor: "#1a1a1a",
|
|
mutedColor: "#666",
|
|
borderColor: "#d4d4d4",
|
|
// Issuer block — change these to your real legal info.
|
|
// Both billing-pdf.tsx and credit-note-pdf.tsx read from here.
|
|
issuer: {
|
|
legalName: "PieCed IT",
|
|
addressLine1: "Cedric Mosimann",
|
|
addressLine2: "[Strasse Nr.]",
|
|
postalCity: "[PLZ] Basel",
|
|
country: "Switzerland",
|
|
email: "billing@pieced.ch",
|
|
web: "pieced.ch",
|
|
// Show "MWST-Nr. ..." on PDF when set.
|
|
vatNumber: null as string | null,
|
|
// Bank instructions — used by invoice PDF, ignored on credit
|
|
// notes (refunds flow back via the original payment method).
|
|
bankName: "[Bank name]",
|
|
bankIban: "[CHxx xxxx xxxx xxxx xxxx x]",
|
|
bankBic: "[BIC]",
|
|
},
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Logo — PieCed's hexagon-pattern mark. Same shape used everywhere
|
|
// and same brand colour. The credit note is still a PieCed IT
|
|
// document and reads with the same company identity as an invoice.
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface LogoProps {
|
|
size?: number;
|
|
/** Defaults to BRAND.primary. Override only for special cases
|
|
* (e.g. an inverse variant on a dark background). Standard
|
|
* documents — invoices, credit notes — all use BRAND.primary. */
|
|
color?: string;
|
|
}
|
|
|
|
export const Logo = ({ size = 60, color = BRAND.primary }: LogoProps) => (
|
|
<Svg width={size} height={size * (106 / 70)} viewBox="0 0 70 106">
|
|
{/* H1 solid */}
|
|
<Polygon
|
|
points="38.5,22.69 31.5,10.566 17.5,10.566 10.5,22.69 17.5,34.814 31.5,34.814"
|
|
fill={color}
|
|
stroke={color}
|
|
strokeWidth={1.6}
|
|
/>
|
|
{/* H2 outline */}
|
|
<Polygon
|
|
points="59.5,34.814 52.5,22.69 38.5,22.69 31.5,34.814 38.5,46.938 52.5,46.938"
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={1.8}
|
|
/>
|
|
{/* H3 outline */}
|
|
<Polygon
|
|
points="38.5,46.938 31.5,34.814 17.5,34.814 10.5,46.938 17.5,59.062 31.5,59.062"
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={1.8}
|
|
/>
|
|
{/* H4 solid */}
|
|
<Polygon
|
|
points="59.5,59.062 52.5,46.938 38.5,46.938 31.5,59.062 38.5,71.186 52.5,71.186"
|
|
fill={color}
|
|
stroke={color}
|
|
strokeWidth={1.6}
|
|
/>
|
|
{/* H5 partial */}
|
|
<Polyline
|
|
points="31.5,83.31 38.5,71.186 31.5,59.062 17.5,59.062 10.5,71.186"
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={1.8}
|
|
/>
|
|
{/* H6 partial */}
|
|
<Polyline
|
|
points="59.5,83.31 52.5,71.186 38.5,71.186 31.5,83.31 38.5,95.434"
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={1.8}
|
|
/>
|
|
</Svg>
|
|
);
|