Move low-stock hint to badge, right-align VAT breakdown, gate cart discount field, split billing/shipping delivery method

- Removed the inline "Nur noch wenige verfügbar" text hint from AddToCartButton/AddToCartInlineButton (was making card heights vary in every grid that renders them — RelatedProducts, ProductSpotlight's CTA row) — now only shown via the same image-overlaid pill badge Ausverkauft/discount already use (position: absolute, doesn't affect layout). Added that badge to RelatedProducts.tsx and todo-cards' Pricing.tsx, which didn't have it before. - RelatedProducts cards now also show "inkl. X% MwSt." (was missing entirely) - VatBreakdown rows are now flex rows with a spacer instead of plain text, so every € amount right-aligns to the same edge regardless of how many digits the rate itself has (was visibly staggered with mixed 7%/19% rates) - Cart's manual discount-code field only renders when Payload actually has at least one active code right now (lib/discountServer.ts's new hasActiveDiscountCode()) — no point showing an open field that could never validate. An already-applied code (e.g. from an older session) still always shows its own result row regardless. - Checkout's "1. Rechnungsadresse" no longer offers a Packstation option — a Packstation isn't a valid billing address for an invoice. Only a plain street address now; Packstation is only offered on the separate, optional "Abweichende Lieferadresse" section, which already had its own address/Packstation toggle. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-22 23:25:18 +00:00
parent dc6b61324f
commit a50524832e
13 changed files with 175 additions and 141 deletions
@@ -18,7 +18,6 @@ export function AddToCartButton({
  className,
  productId = "todo-karten",
  outOfStock = false,
-  lowStock = false,
  variants = [],
 }: {
  label: string;
@@ -30,9 +29,6 @@ export function AddToCartButton({
  /** Product-level — only meaningful when `variants` is empty, same split as
   * AddToCartInlineButton. */
  outOfStock?: boolean;
-  /** Product-level low-stock hint, same "only meaningful without variants"
-   * split as outOfStock. */
-  lowStock?: boolean;
  /** Optional — same shape/semantics as AddToCartInlineButton's own
   * `variants` prop; all three callers already fetch the full product
   * server-side, so this is just threaded straight through. */
@@ -47,7 +43,6 @@ export function AddToCartButton({
  useEffect(() => () => clearTimeout(timeoutRef.current), []);

  const currentlyOutOfStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.outOfStock ?? false) : outOfStock;
-  const currentlyLowStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.lowStock ?? false) : lowStock;

  function handleClick() {
    if (currentlyOutOfStock) return;
@@ -81,7 +76,17 @@ export function AddToCartButton({
  const displayLabel = currentlyOutOfStock ? "Ausverkauft" : label;

  return (
-    <div className="flex flex-col gap-1">
+    // Low stock is deliberately NOT surfaced here as its own text line
+    // (it used to be) — that made this block's height vary card-to-card
+    // in every grid that renders this component, breaking equal-height
+    // card alignment (ProductSpotlight's CTA row, RelatedProducts' grid).
+    // The image-overlaid pill badge (ProductGrid.tsx/ProductSpotlight.tsx/
+    // RelatedProducts.tsx, position: absolute, doesn't participate in
+    // layout flow) is the one place this now shows, same as
+    // Ausverkauft/discount already do. The variant-select suffix below is
+    // unaffected — a native <select>'s own height doesn't vary with its
+    // option text.
+    <div className="flex flex-col gap-2">
      {variants.length > 0 && (
        <select
          value={selectedVariant}
@@ -97,9 +102,6 @@ export function AddToCartButton({
          ))}
        </select>
      )}
-      {currentlyLowStock && !currentlyOutOfStock && (
-        <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>
-      )}
      <button
        ref={buttonRef}
        type="button"
@@ -21,7 +21,6 @@ export function AddToCartInlineButton({
  label = "In den Warenkorb",
  className,
  outOfStock = false,
-  lowStock = false,
  variants = [],
 }: {
  id: string;
@@ -30,9 +29,6 @@ export function AddToCartInlineButton({
  /** Product-level — only meaningful when `variants` is empty. A varianted
   * product's buyability is entirely per-variant instead (see below). */
  outOfStock?: boolean;
-  /** Product-level low-stock hint, same "only meaningful without variants"
-   * split as outOfStock. */
-  lowStock?: boolean;
  /** Optional — products.variants (name + optional priceOverride + its own
   * outOfStock). When non-empty, a variant must be picked (defaults to the
   * first *in-stock* one, or just the first if all are out) before "add to
@@ -51,7 +47,6 @@ export function AddToCartInlineButton({
  // Whichever is actually being offered right now — the selected variant's
  // own flag if there are variants, otherwise the plain product-level one.
  const currentlyOutOfStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.outOfStock ?? false) : outOfStock;
-  const currentlyLowStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.lowStock ?? false) : lowStock;

  function handleClick() {
    if (currentlyOutOfStock) return;
@@ -77,7 +72,12 @@ export function AddToCartInlineButton({
      : "border-border hover:border-brand";

  return (
-    <div className="flex flex-col gap-1 w-full">
+    // Low stock isn't shown as its own text line here (see
+    // AddToCartButton.tsx's identical comment on why) — the image-overlaid
+    // pill badge (ProductGrid.tsx/RelatedProducts.tsx, position: absolute,
+    // outside layout flow) is where this shows now, same as
+    // Ausverkauft/discount already do.
+    <div className="flex flex-col gap-2 w-full">
      {variants.length > 0 && (
        <select
          value={selectedVariant}
@@ -93,9 +93,6 @@ export function AddToCartInlineButton({
          ))}
        </select>
      )}
-      {currentlyLowStock && !currentlyOutOfStock && (
-        <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>
-      )}
      <button
        ref={buttonRef}
        type="button"
@@ -102,7 +102,7 @@ export async function ProductSpotlight() {
                (matches Tools/Blog above/below), same as AddToCartButton's
                own default styling/ring-offset, so no override is needed
                here. */}
-            <AddToCartButton label="In den Warenkorb" productId={product.id} outOfStock={product.outOfStock} lowStock={product.lowStock} variants={product.variants} />
+            <AddToCartButton label="In den Warenkorb" productId={product.id} outOfStock={product.outOfStock} variants={product.variants} />
            {product.href && (
              <Link
                href={product.href}
@@ -4,24 +4,34 @@ import type { TaxBreakdownGroup } from "../lib/taxBreakdown";
 // The actual amount of VAT included in a total — not just a disclosure
 // that VAT is included (see cartTotals.ts's effectiveTaxRate() for the
 // "which %" shown next to each line item elsewhere). One line per rate
-// when a cart/order spans more than one; a single line otherwise.
+// when a cart/order spans more than one; a single line otherwise. Each
+// line is a flex row with a spacer (same "label, flex-1 spacer, value"
+// shape as every other Zwischensumme/Versand/Gesamtsumme row in the
+// sidebars this renders inside) so every € amount lands on the same
+// right-hand edge — a plain "X%: Y €" text line left the amount starting
+// wherever the rate's own digit count happened to end, visibly misaligned
+// as soon as two different rates (e.g. "7%" vs "19%") were both present.
 export function VatBreakdown({ groups }: { groups: TaxBreakdownGroup[] }) {
  if (groups.length === 0) return null;
  if (groups.length === 1) {
    const [g] = groups;
    return (
-      <p className="text-label text-text-muted">
-        enthält {g.rate}% MwSt.: {formatPrice(g.tax)}
-      </p>
+      <div className="flex items-center w-full">
+        <span className="text-label text-text-muted">enthält {g.rate}% MwSt.</span>
+        <span className="flex-1" />
+        <span className="text-label text-text-muted">{formatPrice(g.tax)}</span>
+      </div>
    );
  }
  return (
-    <div className="flex flex-col gap-0.5">
+    <div className="flex flex-col gap-0.5 w-full">
      <p className="text-label text-text-muted">enthält MwSt.:</p>
      {groups.map((g) => (
-        <p key={g.rate} className="text-label text-text-muted pl-2">
-          {g.rate}%: {formatPrice(g.tax)}
-        </p>
+        <div key={g.rate} className="flex items-center w-full pl-2">
+          <span className="text-label text-text-muted">{g.rate}%</span>
+          <span className="flex-1" />
+          <span className="text-label text-text-muted">{formatPrice(g.tax)}</span>
+        </div>
      ))}
    </div>
  );