dev #21
@ -1,16 +1,15 @@
|
||||
import Link from 'next/link';
|
||||
import type { CoffeeItem } from '../hooks/getActiveCoffees';
|
||||
import { CAPSULES_PER_PACK, MAX_ABO_PACKS, MIN_ABO_PACKS, packsToCapsules } from '../lib/orderRules';
|
||||
|
||||
type Props = {
|
||||
coffees: CoffeeItem[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
selections: Record<string, number>;
|
||||
bump: Record<string, boolean>;
|
||||
selectedPlanCapsules: number;
|
||||
totalCapsules: number;
|
||||
onToggleCoffee: (id: string) => void;
|
||||
onChangeQuantity: (id: string, delta: number) => void;
|
||||
totalPacks: number;
|
||||
onAdjustQuantity: (id: string, delta: number) => void;
|
||||
onSetQuantity: (id: string, nextQuantity: number) => void;
|
||||
title: string;
|
||||
};
|
||||
|
||||
@ -19,16 +18,29 @@ export default function CoffeeSelectionGrid({
|
||||
loading,
|
||||
error,
|
||||
selections,
|
||||
bump,
|
||||
selectedPlanCapsules,
|
||||
totalCapsules,
|
||||
onToggleCoffee,
|
||||
onChangeQuantity,
|
||||
totalPacks,
|
||||
onAdjustQuantity,
|
||||
onSetQuantity,
|
||||
title,
|
||||
}: Props) {
|
||||
const remainingCapacity = Math.max(0, MAX_ABO_PACKS - totalPacks);
|
||||
|
||||
return (
|
||||
<section className="rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
|
||||
<h2 className="text-lg font-semibold text-slate-900 mb-4">{title}</h2>
|
||||
<div className="mb-4 flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-slate-900">{title}</h2>
|
||||
<p className="mt-1 text-sm text-slate-500">Choose your coffees in packs. One pack contains {CAPSULES_PER_PACK} capsules.</p>
|
||||
<div className="mt-3 inline-flex items-center rounded-2xl border border-sky-200 bg-sky-50 px-4 py-2 text-sm font-medium text-sky-900">
|
||||
Minimum order: {MIN_ABO_PACKS} packs ({packsToCapsules(MIN_ABO_PACKS)} capsules).
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-right">
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Capacity</div>
|
||||
<div className="mt-1 text-lg font-bold text-slate-900">{remainingCapacity.toLocaleString('en-US')} packs left</div>
|
||||
<div className="text-xs text-slate-500">up to {MAX_ABO_PACKS.toLocaleString('en-US')} packs per subscription</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</div>
|
||||
@ -46,13 +58,9 @@ export default function CoffeeSelectionGrid({
|
||||
{coffees.map((coffee) => {
|
||||
const active = coffee.id in selections;
|
||||
const qty = selections[coffee.id] || 0;
|
||||
const remainingCapsules = selectedPlanCapsules - totalCapsules;
|
||||
const maxForCoffee = active ? Math.min(120, qty + remainingCapsules) : 0;
|
||||
const sliderMax = Math.max(10, maxForCoffee);
|
||||
const sliderProgress = sliderMax <= 10
|
||||
? 100
|
||||
: Math.min(100, Math.max(0, ((qty - 10) / (sliderMax - 10)) * 100));
|
||||
const canAddCoffee = active || remainingCapsules >= 10;
|
||||
const maxForCoffee = qty + remainingCapacity;
|
||||
const addableForCoffee = remainingCapacity;
|
||||
const subtotal = qty * coffee.pricePer10;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -77,9 +85,9 @@ export default function CoffeeSelectionGrid({
|
||||
<span className={`inline-flex items-center justify-center rounded-full text-white text-[11px] font-bold px-3 py-1 shadow-lg ring-2 ring-white/50 backdrop-blur-sm ${
|
||||
active ? 'bg-slate-900' : 'bg-slate-700/90'
|
||||
}`}>
|
||||
EUR {coffee.pricePer10}
|
||||
EUR {coffee.pricePer10.toFixed(2)}
|
||||
</span>
|
||||
<span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-slate-900/90 text-white border border-white/20 shadow-sm backdrop-blur-sm">per 10</span>
|
||||
<span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-slate-900/90 text-white border border-white/20 shadow-sm backdrop-blur-sm">per pack</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@ -89,79 +97,59 @@ export default function CoffeeSelectionGrid({
|
||||
<p className="mt-2 text-xs text-slate-600 leading-relaxed line-clamp-3">{coffee.description}</p>
|
||||
|
||||
<div className="mt-3 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggleCoffee(coffee.id)}
|
||||
disabled={!canAddCoffee}
|
||||
className={`flex-1 text-xs font-semibold rounded-xl px-3 py-2 border transition ${
|
||||
active
|
||||
? 'border-slate-900 text-slate-900 bg-white hover:bg-slate-100'
|
||||
: canAddCoffee
|
||||
? 'border-slate-300 hover:bg-slate-100 text-slate-700'
|
||||
: 'border-slate-200 bg-slate-100 text-slate-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{active ? 'Remove' : 'Add'}
|
||||
</button>
|
||||
<Link
|
||||
href={`/coffee-abonnements/${coffee.id}`}
|
||||
className="inline-flex items-center text-xs font-semibold rounded-xl px-3 py-2 border border-slate-200 text-slate-600 hover:bg-slate-100 transition"
|
||||
className="inline-flex items-center justify-center text-xs font-semibold rounded-xl px-3 py-2 border border-slate-200 text-slate-600 hover:bg-slate-100 transition"
|
||||
>
|
||||
View
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{active && (
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[11px] font-medium text-slate-500">Quantity (10-{maxForCoffee} pcs)</span>
|
||||
<span className={`inline-flex items-center justify-center rounded-full bg-slate-900 text-white px-3 py-1 text-xs font-semibold transition-transform duration-300 ${bump[coffee.id] ? 'scale-110' : 'scale-100'}`}>
|
||||
{qty} pcs
|
||||
</span>
|
||||
<div className="mt-4 rounded-2xl border border-slate-200 bg-slate-50 p-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Pack selection</div>
|
||||
<div className="mt-1 text-sm text-slate-500">{packsToCapsules(qty).toLocaleString('en-US')} capsules</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white">
|
||||
{qty.toLocaleString('en-US')} packs
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onChangeQuantity(coffee.id, -10)}
|
||||
disabled={qty <= 10}
|
||||
className="h-8 w-14 rounded-full bg-slate-100 hover:bg-slate-200 text-xs font-medium transition active:scale-95"
|
||||
type="button"
|
||||
onClick={() => onAdjustQuantity(coffee.id, -1)}
|
||||
disabled={qty <= 0}
|
||||
className="h-10 w-10 rounded-full bg-white text-base font-bold text-slate-900 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
-10
|
||||
-
|
||||
</button>
|
||||
<div className="flex-1 relative">
|
||||
<input
|
||||
type="range"
|
||||
min={10}
|
||||
max={sliderMax}
|
||||
step={10}
|
||||
type="number"
|
||||
min={0}
|
||||
max={maxForCoffee}
|
||||
step={1}
|
||||
inputMode="numeric"
|
||||
value={qty}
|
||||
onChange={(e) => onChangeQuantity(coffee.id, parseInt(e.target.value, 10) - qty)}
|
||||
className="w-full appearance-none cursor-pointer bg-transparent"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(to right,#0f172a 0%,#0f172a ' +
|
||||
sliderProgress +
|
||||
'%,#e2e8f0 ' +
|
||||
sliderProgress +
|
||||
'%,#e2e8f0 100%)',
|
||||
height: '6px',
|
||||
borderRadius: '999px',
|
||||
}}
|
||||
onChange={(e) => onSetQuantity(coffee.id, Number(e.target.value))}
|
||||
className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-center text-sm font-semibold text-slate-900 shadow-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-900/10"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onChangeQuantity(coffee.id, +10)}
|
||||
disabled={qty + 10 > maxForCoffee}
|
||||
className="h-8 w-14 rounded-full bg-slate-100 hover:bg-slate-200 text-xs font-medium transition active:scale-95"
|
||||
type="button"
|
||||
onClick={() => onAdjustQuantity(coffee.id, +1)}
|
||||
disabled={qty >= maxForCoffee}
|
||||
className="h-10 w-10 rounded-full bg-white text-base font-bold text-slate-900 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
+10
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-[11px] text-slate-500">
|
||||
<span>Subtotal</span>
|
||||
<span className="font-semibold text-slate-700">EUR {((qty / 10) * coffee.pricePer10).toFixed(2)}</span>
|
||||
|
||||
<div className="mt-3 flex items-center justify-between text-[11px] text-slate-500">
|
||||
<span>You can add {addableForCoffee.toLocaleString('en-US')} more packs here.</span>
|
||||
<span className="font-semibold text-slate-700">EUR {subtotal.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user