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
+6 -9
View File
@@ -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"