Marco
c5500bcc97
Completes the frontend half of the Payload backend's variant/inventory/
tracking work (see that repo's own commit):
- **Cart**: CartItem gained an optional `variant?: string` field — every
function that used to match a line by `id` alone (addToCart/
removeFromCart/setQuantity) now matches by `(id, variant)` together via
a shared sameLine() helper, so two lines for the same product with
different variants stay separate entries. `variant` undefined on both
sides (the no-variants case) still matches by simple equality, so every
pre-existing call site keeps working unchanged.
- **Selection UI**: AddToCartInlineButton renders a <select> above the
button when given a non-empty `variants` prop (ProductGrid/
RelatedProducts pass product.variants straight through); defaults to
the first variant.
- **Pricing**: cartTotals.ts's new effectivePrice(entry, product) — a
variant's priceOverride wins over the base product price. Every cart/
checkout/order-confirmation total and per-line price display now goes
through this instead of reading product.price directly (fixes both a
wrong-price bug and a duplicate-React-key bug the old `key={product.id}`
pattern would have had the moment two variants of one product were both
in the cart).
- **Checkout**: re-validates the requested variant server-side (same
"never trust the client" reasoning as price re-derivation) — a variant
name that doesn't exist on that product fails the whole checkout.
variantName snapshots onto orders.items, shown as a parenthetical next
to the product name on the confirmation email, both invoice PDF types,
and the order-detail page.
- **Cross-device cart**: Customers.cart[].variantName (synced via
/api/account/cart) carries the selection through a login/logout cycle,
not just the current session.
Also adds tracking-number display: /konto/bestellungen/[orderNumber]
shows a clickable link when orders.trackingNumber is set, built by a new
app/lib/tracking.ts that mirrors the Payload backend's own copy
byte-for-byte close (same carrier set/URL patterns) so what a customer
sees here matches exactly what the order-shipped email already links to.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
92 lines
3.6 KiB
TypeScript
92 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import Image from "next/image";
|
|
import { addToCart } from "../lib/cart";
|
|
import { useCartFly } from "./CartFly";
|
|
|
|
// Exported so consumers like RelatedProducts.tsx can delay their own
|
|
// follow-up UI changes (e.g. swapping out this exact card) until after
|
|
// the success state has actually had time to be seen.
|
|
export const FEEDBACK_MS = 2000;
|
|
|
|
/**
|
|
* Add-to-cart button that stays on the page (unlike AddToCartButton, which
|
|
* navigates to /cart) — used wherever a product grid lets you keep browsing,
|
|
* so a click needs its own success confirmation instead of relying on the
|
|
* navigation itself as feedback.
|
|
*/
|
|
export function AddToCartInlineButton({
|
|
id,
|
|
label = "In den Warenkorb",
|
|
className,
|
|
variants = [],
|
|
}: {
|
|
id: string;
|
|
label?: string;
|
|
className?: string;
|
|
/** Optional — products.variants (name + optional priceOverride). When
|
|
* non-empty, a variant must be picked (defaults to the first one) before
|
|
* "add to cart" is enabled — the selected variant's name is snapshotted
|
|
* onto the cart line and, later, the order itself. */
|
|
variants?: { name: string; priceOverride: number | null }[];
|
|
}) {
|
|
const [added, setAdded] = useState(false);
|
|
const [selectedVariant, setSelectedVariant] = useState(variants[0]?.name);
|
|
const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
const { fly } = useCartFly();
|
|
|
|
useEffect(() => () => clearTimeout(timeoutRef.current), []);
|
|
|
|
function handleClick() {
|
|
addToCart(id, 1, selectedVariant);
|
|
if (buttonRef.current) fly(buttonRef.current);
|
|
setAdded(true);
|
|
clearTimeout(timeoutRef.current);
|
|
timeoutRef.current = setTimeout(() => setAdded(false), FEEDBACK_MS);
|
|
}
|
|
|
|
const base =
|
|
className ??
|
|
"flex items-center justify-between px-5 py-3 rounded-sm border w-full transition-all duration-200 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base";
|
|
// Branch the border/bg classes instead of appending an "override" on top
|
|
// of the default ones — Tailwind v4 has no leading-`!` important prefix
|
|
// anymore (it's a trailing `!` now), so two conflicting utilities like
|
|
// border-border/border-success both being present would silently race on
|
|
// CSS source order instead of one cleanly winning.
|
|
const stateClasses = added
|
|
? "border-success bg-success-subtle"
|
|
: "border-border hover:border-brand";
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 w-full">
|
|
{variants.length > 0 && (
|
|
<select
|
|
value={selectedVariant}
|
|
onChange={(e) => setSelectedVariant(e.target.value)}
|
|
className="w-full rounded-sm border border-border px-3 py-2 text-body-sm text-text-primary bg-bg-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
|
|
aria-label="Variante auswählen"
|
|
>
|
|
{variants.map((v) => (
|
|
<option key={v.name} value={v.name}>
|
|
{v.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
<button ref={buttonRef} type="button" onClick={handleClick} className={`${base} ${stateClasses}`}>
|
|
<span
|
|
className={
|
|
"text-body-sm transition-colors " +
|
|
(added ? "font-semibold text-success" : "text-text-primary")
|
|
}
|
|
>
|
|
{added ? "Hinzugefügt ✓" : label}
|
|
</span>
|
|
<Image alt="" src="/icon-cart-outline.png" width={32} height={30} className="h-[1.875rem] w-8 object-contain" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|