remove: PlanSelectorCard
This commit is contained in:
parent
de35dd8d56
commit
285ee6d2db
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user