dev #21
@ -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 font-semibold text-slate-900">EUR {(coffee.pricePer10 / 10).toFixed(2)}</span>
|
||||
<span className="text-sm text-slate-600">Capsules per pack</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"
|
||||
|
||||
@ -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 totalCapsules = useMemo(
|
||||
() => selectedEntries.reduce((sum, entry) => sum + entry.quantity, 0),
|
||||
[selectedEntries]
|
||||
);
|
||||
const packsSelected = totalCapsules / 10;
|
||||
const requiredPacks = selectedPlanCapsules / 10;
|
||||
const canProceed = packsSelected === requiredPacks;
|
||||
const canProceed = selectedEntries.length > 0 && !orderPackError;
|
||||
|
||||
const proceedToSummary = () => {
|
||||
if (!canProceed) return;
|
||||
try {
|
||||
sessionStorage.setItem('coffeeSelections', JSON.stringify(selections));
|
||||
sessionStorage.setItem('coffeeAboSizeCapsules', String(selectedPlanCapsules));
|
||||
sessionStorage.setItem(COFFEE_SELECTIONS_STORAGE_KEY, JSON.stringify(selections));
|
||||
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 };
|
||||
if (id in copy) {
|
||||
delete copy[id];
|
||||
} else {
|
||||
const total = Object.values(copy).reduce((sum, qty) => sum + qty, 0);
|
||||
if (total + 10 > selectedPlanCapsules) return prev;
|
||||
copy[id] = 10;
|
||||
const normalized = Math.max(0, Math.floor(Number(nextValue) || 0));
|
||||
const current = prev[id] || 0;
|
||||
const otherTotal = Object.entries(prev).reduce((sum, [key, qty]) => key === id ? sum : sum + qty, 0);
|
||||
const maxForCoffee = Math.max(0, MAX_ABO_PACKS - otherTotal);
|
||||
const bounded = Math.min(normalized, maxForCoffee);
|
||||
|
||||
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) => {
|
||||
setSelections((prev) => {
|
||||
if (!(id in prev)) return prev;
|
||||
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;
|
||||
});
|
||||
const adjustQuantity = (id: string, delta: number) => {
|
||||
const current = selections[id] || 0;
|
||||
setQuantity(id, current + delta);
|
||||
};
|
||||
|
||||
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}
|
||||
selectedPlanCapsules={selectedPlanCapsules}
|
||||
totalCapsules={totalCapsules}
|
||||
onToggleCoffee={toggleCoffee}
|
||||
onChangeQuantity={changeQuantity}
|
||||
totalPacks={totalPacks}
|
||||
onAdjustQuantity={adjustQuantity}
|
||||
onSetQuantity={setQuantity}
|
||||
title={t('autofix.k0b03e660')}
|
||||
/>
|
||||
|
||||
@ -164,9 +140,9 @@ export default function CoffeeAbonnementPage() {
|
||||
selectedShippingFee={selectedShippingFee}
|
||||
totalNetWithShipping={totalNetWithShipping}
|
||||
totalCapsules={totalCapsules}
|
||||
packsSelected={packsSelected}
|
||||
selectedPlanCapsules={selectedPlanCapsules}
|
||||
requiredPacks={requiredPacks}
|
||||
totalPacks={totalPacks}
|
||||
orderPackError={orderPackError}
|
||||
remainingMinPacks={remainingMinPacks}
|
||||
canProceed={canProceed}
|
||||
onProceed={proceedToSummary}
|
||||
title={t('autofix.ke7b634f2')}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user