Wrap CoffeeAbonnementPage and CoffeeAbonnementDetailPage in SubscribeGuard and update pricing labels for clarity

src/app/coffee-abonnements/[id]/page.tsx

@@ -7,8 +7,17 @@ import { useActiveCoffees } from '../hooks/getActiveCoffees';
 import CoffeeDetailGallery from '../components/CoffeeDetailGallery';
 import { useCoffeePictures } from '../hooks/useCoffeePictures';
 import { useTranslation } from '../../i18n/useTranslation';
+import SubscribeGuard from '../components/SubscribeGuard';
 
 export default function CoffeeAbonnementDetailPage() {
+  return (
+    <SubscribeGuard>
+      <CoffeeAbonnementDetailPageContent />
+    </SubscribeGuard>
+  );
+}
+
+function CoffeeAbonnementDetailPageContent() {
   const { t } = useTranslation();
   const params = useParams();
   const { coffees, loading, error } = useActiveCoffees();
@@ -23,7 +32,7 @@ export default function CoffeeAbonnementDetailPage() {
   return (
     <PageLayout contentClassName="flex-1 relative w-full">
       <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
-        <div className="max-w-[1820px] mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
+        <div className="max-w-455 mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
           <div className="rounded-[28px] border border-white/80 bg-white/90 px-8 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur flex flex-wrap items-center justify-between gap-4">
             <div>
               <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
@@ -75,12 +84,12 @@ export default function CoffeeAbonnementDetailPage() {
 
                   <div className="mt-5 space-y-2">
                     <div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
-                      <span className="text-sm text-slate-600">Price per 10</span>
+                      <span className="text-sm text-slate-600">Price per pack</span>
                       <span className="text-sm font-semibold text-slate-900">EUR {coffee.pricePer10.toFixed(2)}</span>
                     </div>
                     <div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
-                      <span className="text-sm text-slate-600">Price per capsule</span>
+                      <span className="text-sm text-slate-600">Capsules per pack</span>
-                      <span className="text-sm font-semibold text-slate-900">EUR {(coffee.pricePer10 / 10).toFixed(2)}</span>
+                      <span className="text-sm font-semibold text-slate-900">10 capsules</span>
                     </div>
                     <div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
                       <span className="text-sm text-slate-600">Gallery images</span>
@@ -92,7 +101,7 @@ export default function CoffeeAbonnementDetailPage() {
                 </div>
 
                 <div 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">
-                  <p className="text-sm text-slate-600">Ready to add this coffee to your plan? Go back to the selection page and choose quantity in 10-piece steps.</p>
+                  <p className="text-sm text-slate-600">Ready to add this coffee to your plan? Go back to the selection page and choose how many packs you want.</p>
                   <Link
                     href="/coffee-abonnements"
                     className="mt-4 inline-flex items-center justify-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 transition"

src/app/coffee-abonnements/page.tsx

@@ -6,17 +6,32 @@ import { useActiveCoffees } from './hooks/getActiveCoffees';
 import { useShippingFees } from './hooks/useShippingFees';
 import AboHeroHeader from './components/AboHeroHeader';
 import AboStepper from './components/AboStepper';
-import PlanSelectorCard from './components/PlanSelectorCard';
 import CoffeeSelectionGrid from './components/CoffeeSelectionGrid';
 import SelectionSummaryCard from './components/SelectionSummaryCard';
+import SubscribeGuard from './components/SubscribeGuard';
+import {
+  COFFEE_SELECTIONS_STORAGE_KEY,
+  COFFEE_SELECTIONS_UNIT,
+  COFFEE_SELECTIONS_UNIT_STORAGE_KEY,
+  getOrderPackError,
+  getRemainingMinPacks,
+  MAX_ABO_PACKS,
+  packsToCapsules,
+} from './lib/orderRules';
 
 import { useTranslation } from '../i18n/useTranslation';
 
 export default function CoffeeAbonnementPage() {
+  return (
+    <SubscribeGuard>
+      <CoffeeAbonnementPageContent />
+    </SubscribeGuard>
+  );
+}
+
+function CoffeeAbonnementPageContent() {
   const { t } = useTranslation();
   const [selections, setSelections] = useState<Record<string, number>>({});
-  const [bump, setBump] = useState<Record<string, boolean>>({});
-  const [selectedPlanCapsules, setSelectedPlanCapsules] = useState<number>(60);
   const router = useRouter();
 
   // Fetch active coffees from the backend
@@ -24,32 +39,6 @@ export default function CoffeeAbonnementPage() {
 
   // Shipping fees (threshold-based)
   const { resolveShippingFee, loading: shippingLoading, error: shippingError } = useShippingFees();
-  const selectedShippingFee = resolveShippingFee(selectedPlanCapsules);
-  const isFreeShippingSelected = Number(selectedShippingFee) === 0;
-
-  const changePlanSize = (delta: number) => {
-    setSelectedPlanCapsules(prev => {
-      const next = Math.max(60, prev + delta);
-      // Trim selections that exceed the new plan size
-      setSelections(sel => {
-        const trimmed = { ...sel };
-        let running = 0;
-        for (const id of Object.keys(trimmed)) {
-          if (running + trimmed[id] <= next) {
-            running += trimmed[id];
-          } else if (running < next) {
-            const allowed = Math.floor((next - running) / 10) * 10;
-            if (allowed >= 10) { trimmed[id] = allowed; running = next; }
-            else delete trimmed[id];
-          } else {
-            delete trimmed[id];
-          }
-        }
-        return trimmed;
-      });
-      return next;
-    });
-  };
 
   const selectedEntries = useMemo(
     () =>
@@ -64,61 +53,62 @@ export default function CoffeeAbonnementPage() {
   const totalPrice = useMemo(
     () =>
       selectedEntries.reduce(
-        (sum, entry) => sum + (entry.quantity / 10) * entry.coffee.pricePer10,
+        (sum, entry) => sum + entry.quantity * entry.coffee.pricePer10,
         0
       ),
     [selectedEntries]
   );
 
+  const totalPacks = useMemo(
+    () => selectedEntries.reduce((sum, entry) => sum + entry.quantity, 0),
+    [selectedEntries]
+  );
+
+  const totalCapsules = useMemo(() => packsToCapsules(totalPacks), [totalPacks]);
+  const selectedShippingFee = resolveShippingFee(totalCapsules);
+  const isFreeShippingSelected = Number(selectedShippingFee) === 0;
+  const orderPackError = getOrderPackError(totalPacks);
+  const remainingMinPacks = getRemainingMinPacks(totalPacks);
+
   const totalNetWithShipping = useMemo(
     () => totalPrice + (Number.isFinite(selectedShippingFee) ? selectedShippingFee : 0),
     [totalPrice, selectedShippingFee]
   );
 
-  // NEW: enforce selected plan size (60 or 120 capsules)
+  const canProceed = selectedEntries.length > 0 && !orderPackError;
-  const totalCapsules = useMemo(
-    () => selectedEntries.reduce((sum, entry) => sum + entry.quantity, 0),
-    [selectedEntries]
-  );
-  const packsSelected = totalCapsules / 10;
-  const requiredPacks = selectedPlanCapsules / 10;
-  const canProceed = packsSelected === requiredPacks;
 
   const proceedToSummary = () => {
     if (!canProceed) return;
     try {
-      sessionStorage.setItem('coffeeSelections', JSON.stringify(selections));
+      sessionStorage.setItem(COFFEE_SELECTIONS_STORAGE_KEY, JSON.stringify(selections));
-      sessionStorage.setItem('coffeeAboSizeCapsules', String(selectedPlanCapsules));
+      sessionStorage.setItem(COFFEE_SELECTIONS_UNIT_STORAGE_KEY, COFFEE_SELECTIONS_UNIT);
     } catch {}
     router.push('/coffee-abonnements/summary');
   };
 
-  const toggleCoffee = (id: string) => {
+  const setQuantity = (id: string, nextValue: number) => {
     setSelections((prev) => {
-      const copy = { ...prev };
+      const normalized = Math.max(0, Math.floor(Number(nextValue) || 0));
-      if (id in copy) {
+      const current = prev[id] || 0;
-        delete copy[id];
+      const otherTotal = Object.entries(prev).reduce((sum, [key, qty]) => key === id ? sum : sum + qty, 0);
-      } else {
+      const maxForCoffee = Math.max(0, MAX_ABO_PACKS - otherTotal);
-        const total = Object.values(copy).reduce((sum, qty) => sum + qty, 0);
+      const bounded = Math.min(normalized, maxForCoffee);
-        if (total + 10 > selectedPlanCapsules) return prev;
+
-        copy[id] = 10;
+      if (bounded <= 0) {
+        if (!(id in prev)) return prev;
+        const next = { ...prev };
+        delete next[id];
+        return next;
       }
-      return copy;
+
+      if (bounded === current) return prev;
+      return { ...prev, [id]: bounded };
     });
   };
 
-  const changeQuantity = (id: string, delta: number) => {
+  const adjustQuantity = (id: string, delta: number) => {
-    setSelections((prev) => {
+    const current = selections[id] || 0;
-      if (!(id in prev)) return prev;
+    setQuantity(id, current + delta);
-      const otherTotal = Object.entries(prev).reduce((sum, [key, qty]) => key === id ? sum : sum + qty, 0);
-      const maxForCoffee = selectedPlanCapsules - otherTotal;
-      const next = prev[id] + delta;
-      if (next < 10 || next > maxForCoffee) return prev;
-      const updated = { ...prev, [id]: next };
-      setBump((b) => ({ ...b, [id]: true }));
-      setTimeout(() => setBump((b) => ({ ...b, [id]: false })), 250);
-      return updated;
-    });
   };
 
   return (
@@ -132,28 +122,14 @@ export default function CoffeeAbonnementPage() {
 
           <AboStepper currentStep={1} />
 
-          <PlanSelectorCard
-            selectedPlanCapsules={selectedPlanCapsules}
-            shippingLoading={shippingLoading}
-            isFreeShippingSelected={isFreeShippingSelected}
-            selectedShippingFee={selectedShippingFee}
-            shippingError={shippingError}
-            onDecrease={() => changePlanSize(-10)}
-            onIncrease={() => changePlanSize(+10)}
-            loadingText={t('autofix.k12a86c71')}
-            freeShippingText={t('autofix.ke7f0a9e3')}
-          />
-
           <CoffeeSelectionGrid
             coffees={coffees}
             loading={loading}
             error={error}
             selections={selections}
-            bump={bump}
+            totalPacks={totalPacks}
-            selectedPlanCapsules={selectedPlanCapsules}
+            onAdjustQuantity={adjustQuantity}
-            totalCapsules={totalCapsules}
+            onSetQuantity={setQuantity}
-            onToggleCoffee={toggleCoffee}
-            onChangeQuantity={changeQuantity}
             title={t('autofix.k0b03e660')}
           />
 
@@ -164,9 +140,9 @@ export default function CoffeeAbonnementPage() {
             selectedShippingFee={selectedShippingFee}
             totalNetWithShipping={totalNetWithShipping}
             totalCapsules={totalCapsules}
-            packsSelected={packsSelected}
+            totalPacks={totalPacks}
-            selectedPlanCapsules={selectedPlanCapsules}
+            orderPackError={orderPackError}
-            requiredPacks={requiredPacks}
+            remainingMinPacks={remainingMinPacks}
             canProceed={canProceed}
             onProceed={proceedToSummary}
             title={t('autofix.ke7b634f2')}