Refactor CoffeeSelectionGrid to improve quantity handling and enhance user interface with detailed pack information

Co-authored-by: Copilot <copilot@github.com>

src/app/coffee-abonnements/components/CoffeeSelectionGrid.tsx

@@ -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>;
+  totalPacks: number;
-  selectedPlanCapsules: number;
+  onAdjustQuantity: (id: string, delta: number) => void;
-  totalCapsules: number;
+  onSetQuantity: (id: string, nextQuantity: number) => void;
-  onToggleCoffee: (id: string) => void;
-  onChangeQuantity: (id: string, delta: number) => void;
   title: string;
 };
 
@@ -19,16 +18,29 @@ export default function CoffeeSelectionGrid({
   loading,
   error,
   selections,
-  bump,
+  totalPacks,
-  selectedPlanCapsules,
+  onAdjustQuantity,
-  totalCapsules,
+  onSetQuantity,
-  onToggleCoffee,
-  onChangeQuantity,
   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 = qty + remainingCapacity;
-            const maxForCoffee = active ? Math.min(120, qty + remainingCapsules) : 0;
+            const addableForCoffee = remainingCapacity;
-            const sliderMax = Math.max(10, maxForCoffee);
+            const subtotal = qty * coffee.pricePer10;
-            const sliderProgress = sliderMax <= 10
-              ? 100
-              : Math.min(100, Math.max(0, ((qty - 10) / (sliderMax - 10)) * 100));
-            const canAddCoffee = active || remainingCapsules >= 10;
 
             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 rounded-2xl border border-slate-200 bg-slate-50 p-3">
-                  <div className="mt-4 flex flex-col gap-3">
+                  <div className="flex items-center justify-between gap-3">
-                    <div className="flex items-center justify-between">
+                    <div>
-                      <span className="text-[11px] font-medium text-slate-500">Quantity (10-{maxForCoffee} pcs)</span>
+                      <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Pack selection</div>
-                      <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'}`}>
+                      <div className="mt-1 text-sm text-slate-500">{packsToCapsules(qty).toLocaleString('en-US')} capsules</div>
-                        {qty} pcs
-                      </span>
                     </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)}
+                      type="button"
-                        disabled={qty <= 10}
+                      onClick={() => onAdjustQuantity(coffee.id, -1)}
-                        className="h-8 w-14 rounded-full bg-slate-100 hover:bg-slate-200 text-xs font-medium transition active:scale-95"
+                      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"
+                      type="number"
-                          min={10}
+                      min={0}
-                          max={sliderMax}
+                      max={maxForCoffee}
-                          step={10}
+                      step={1}
+                      inputMode="numeric"
                       value={qty}
-                          onChange={(e) => onChangeQuantity(coffee.id, parseInt(e.target.value, 10) - qty)}
+                      onChange={(e) => onSetQuantity(coffee.id, Number(e.target.value))}
-                          className="w-full appearance-none cursor-pointer bg-transparent"
+                      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"
-                          style={{
-                            background:
-                              'linear-gradient(to right,#0f172a 0%,#0f172a ' +
-                              sliderProgress +
-                              '%,#e2e8f0 ' +
-                              sliderProgress +
-                              '%,#e2e8f0 100%)',
-                            height: '6px',
-                            borderRadius: '999px',
-                          }}
                     />
-                      </div>
                     <button
-                        onClick={() => onChangeQuantity(coffee.id, +10)}
+                      type="button"
-                        disabled={qty + 10 > maxForCoffee}
+                      onClick={() => onAdjustQuantity(coffee.id, +1)}
-                        className="h-8 w-14 rounded-full bg-slate-100 hover:bg-slate-200 text-xs font-medium transition active:scale-95"
+                      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>
+                  <div className="mt-3 flex items-center justify-between text-[11px] text-slate-500">
-                      <span className="font-semibold text-slate-700">EUR {((qty / 10) * coffee.pricePer10).toFixed(2)}</span>
+                    <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>
             );
           })}