Initial Brochure style fixes (#4168)

Author: marcoacierno

frontend/src/components/brochure/pricing-page.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { useMoneyFormatter } from "~/helpers/formatters";
 import { humanizeText } from "./utils";
 
 export type Benefit = {
@@ -20,7 +21,7 @@ const getBackgroundColor = (index: number) => {
     1: "bg-yellow",
     2: "bg-grey-100",
     3: "bg-pink",
-    4: "bg-orange",
+    4: "bg-cream",
     5: "bg-blue",
     6: "bg-coral",
   }[index % 7];
@@ -34,14 +35,14 @@ const TableSection = ({
   totalPackages: number;
 }) => {
   return (
-    <tr>
-      <td className="uppercase font-bold text-coral px-[0.5cm] pt-[0.5cm] bg-cream">
+    <>
+      <div className="uppercase font-bold text-coral px-[0.5cm] pt-[0.5cm] bg-cream">
         {humanizeText(title)}
-      </td>
+      </div>
       {new Array(totalPackages).fill(null).map((_, i) => (
-        <td className={clsx("border-l", getBackgroundColor(i))} />
+        <div className={clsx("border-l", getBackgroundColor(i))} />
       ))}
-    </tr>
+    </>
   );
 };
 
@@ -53,34 +54,21 @@ function TableBenefit({
   values: Array<number | string | boolean>;
 }) {
   return (
-    <tr>
-      <td className="px-[0.5cm] font-medium pb-[0.5cm] bg-cream">{title}</td>
+    <>
+      <div className="px-[0.5cm] font-medium pb-[0.5cm] bg-cream">{title}</div>
       {values.map((value, i) => {
         return (
-          <td
+          <div
             className={clsx(
               "border-l text-center pb-[0.5cm] relative",
               getBackgroundColor(i),
             )}
           >
             {typeof value === "boolean" ? (value ? "✓" : "-") : value}
-            {/* adding some divs here to prevent gaps when printing */}
-            <span
-              className={clsx(
-                "absolute top-[-2px] left-0 right-0 h-[4px]",
-                getBackgroundColor(i),
-              )}
-            />
-            <span
-              className={clsx(
-                "absolute bottom-[-2px] left-0 right-0 h-[4px]",
-                getBackgroundColor(i),
-              )}
-            />
-          </td>
+          </div>
         );
       })}
-    </tr>
+    </>
   );
 }
 
@@ -116,70 +104,114 @@ export function PricingPage({
   ) => {
     return level.benefits.find((b) => b.name === benefit.name);
   };
+  const moneyFormatter = useMoneyFormatter({ fractionDigits: 0 });
 
-  return (
-    <div className="page bg-cream flex flex-col gap-[1cm] pt-[2cm] !h-auto">
-      <div className="px-[2cm]">
-        <h1 className="text-xl font-bold">Pricing</h1>
-      </div>
+  const sectionHeaderSize = 37;
+  const itemSize = 55;
+  let currentPageSize = 0;
+  let currentContent = {};
+  const pagesToRender: Record<string, { name: string; category: string }[]>[] =
+    [];
 
-      <table className="border-[4px]  border-black border-collapse table-fixed w-full text-[12px] border-spacing-0">
-        <thead>
-          <tr className="uppercase [&>th]:font-medium border-b">
-            <th />
+  Object.entries(benefitsByCategory).map(([category, benefits], index) => {
+    currentPageSize += sectionHeaderSize;
+    const maxPageSize = index === 0 ? 550 : 756;
+    benefits.forEach((benefit) => {
+      console.log({ currentPageSize, benefit });
+      if (currentPageSize + itemSize > maxPageSize) {
+        currentPageSize = sectionHeaderSize;
+        pagesToRender.push(currentContent);
+        currentContent = {};
+      }
+
+      if (!currentContent[category]) {
+        currentContent[category] = [];
+      }
 
+      currentContent[category].push(benefit);
+      currentPageSize += itemSize;
+    });
+  });
+
+  pagesToRender.push(currentContent);
+
+  return (
+    <div>
+      {pagesToRender.map((page, i) => (
+        <div
+          key={i}
+          className="page pricing-page-table flex flex-col gap-[1cm] bg-cream pt-[2cm]"
+        >
+          <div className="px-[2cm]">
+            <h1 className="text-xl font-bold">Pricing</h1>
+          </div>
+
+          <div
+            className="border-[4px] grid gap-0 border-black w-full text-[12px]"
+            style={{
+              gridTemplateColumns: `auto repeat(${levels.length}, 2.1cm)`,
+            }}
+          >
+            <div className="border-b-[4px] bg-cream" />
             {levels.map((p, i) => (
               <th
                 className={clsx(
-                  "py-[0.5cm] w-[2.1cm] text-center border-l",
+                  "py-[0.5cm] w-[2.1cm] text-center border-l uppercase border-b-[4px]",
                   getBackgroundColor(i),
                 )}
                 key={p.name}
               >
                 {p.name}
               </th>
             ))}
-          </tr>
-        </thead>
-
-        <tbody>
-          <TableSection title="Pricing" totalPackages={levels.length} />
-          <TableBenefit
-            title="Package price (VAT not included)"
-            values={levels.map((p) => `${p.price.toLocaleString()}€`)}
-          />
-
-          <TableSection title="Availability" totalPackages={levels.length} />
-          <TableBenefit
-            title="Number of slots available"
-            values={levels.map(
-              (p) => `${p.slots === 0 ? "Unlimited" : p.slots}`,
-            )}
-          />
-
-          {Object.entries(benefitsByCategory).map(([category, benefits]) => {
-            return (
+            {i === 0 && (
               <>
+                <TableSection title="Pricing" totalPackages={levels.length} />
+                <TableBenefit
+                  title="Package price (VAT not included)"
+                  values={levels.map(
+                    (p) =>
+                      `${moneyFormatter.format(Number.parseFloat(p.price))}`,
+                  )}
+                />
+
                 <TableSection
-                  title={category}
+                  title="Availability"
                   totalPackages={levels.length}
-                  key={category}
                 />
-                {benefits.map((benefit) => (
-                  <TableBenefit
-                    title={benefit.name}
-                    values={levels.map((p) => {
-                      const levelBenefit = getBenefitForLevel(benefit, p);
-                      return levelBenefit ? levelBenefit.value : "-";
-                    })}
-                    key={benefit.name}
-                  />
-                ))}
+                <TableBenefit
+                  title="Number of slots available"
+                  values={levels.map(
+                    (p) => `${p.slots === 0 ? "Unlimited" : p.slots}`,
+                  )}
+                />
               </>
-            );
-          })}
-        </tbody>
-      </table>
+            )}
+
+            {Object.entries(page).map(([category, benefits]) => {
+              return (
+                <>
+                  <TableSection
+                    title={category}
+                    totalPackages={levels.length}
+                    key={category}
+                  />
+                  {benefits.map((benefit) => (
+                    <TableBenefit
+                      title={benefit.name}
+                      values={levels.map((p) => {
+                        const levelBenefit = getBenefitForLevel(benefit, p);
+                        return levelBenefit ? levelBenefit.value : "-";
+                      })}
+                      key={benefit.name}
+                    />
+                  ))}
+                </>
+              );
+            })}
+          </div>
+        </div>
+      ))}
     </div>
   );
 }

frontend/src/global.css

@@ -34,3 +34,16 @@ body:has(.brochure-page) {
   height: 29.7cm;
   page-break-before: always;
 }
+
+@media print {
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+
+.pricing-page-table div {
+  margin-top: -1px;
+}