feature+refactor/fewThingsIGuess #22

Merged
Seazn merged 2 commits from feature+refactor/fewThingsIGuess into dev 2026-05-21 17:34:23 +00:00
Showing only changes of commit 285ee6d2db - Show all commits

View File

@ -1,64 +0,0 @@
type Props = {
selectedPlanCapsules: number;
shippingLoading: boolean;
isFreeShippingSelected: boolean;
selectedShippingFee: number;
shippingError: string | null;
onDecrease: () => void;
onIncrease: () => void;
loadingText: string;
freeShippingText: string;
};
export default function PlanSelectorCard({
selectedPlanCapsules,
shippingLoading,
isFreeShippingSelected,
selectedShippingFee,
shippingError,
onDecrease,
onIncrease,
loadingText,
freeShippingText,
}: Props) {
return (
<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">
<div className="flex flex-wrap items-center gap-4">
<button
type="button"
onClick={onDecrease}
disabled={selectedPlanCapsules <= 60}
className="h-10 w-10 rounded-full bg-slate-100 hover:bg-slate-200 text-lg font-bold transition disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center"
>
-
</button>
<div className="flex-1 text-center min-w-[190px]">
<div className="text-2xl font-extrabold text-slate-900">{selectedPlanCapsules} pcs</div>
<div className="text-xs text-slate-500">{selectedPlanCapsules / 10} packs of 10 · min. 60</div>
</div>
<button
type="button"
onClick={onIncrease}
className="h-10 w-10 rounded-full bg-slate-100 hover:bg-slate-200 text-lg font-bold transition flex items-center justify-center"
>
+
</button>
<div className="ml-auto">
{shippingLoading ? (
<span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-slate-100 text-slate-700">{loadingText}</span>
) : isFreeShippingSelected ? (
<span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200">{freeShippingText}</span>
) : (
<span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-slate-100 text-slate-700 ring-1 ring-inset ring-slate-200">Shipping EUR {selectedShippingFee.toFixed(2)}</span>
)}
</div>
</div>
{shippingError && (
<div className="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800">
Shipping fees could not be loaded: {shippingError}
</div>
)}
</div>
);
}