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>
This commit is contained in:
Marco
2026-07-22 23:25:18 +00:00
parent dc6b61324f
commit a50524832e
13 changed files with 175 additions and 141 deletions
+11 -9
View File
@@ -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"