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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user