mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-10-05 22:15:23 +00:00
fix: set 100 MVR for default wallet topup amount 🔧
This commit is contained in:
@@ -1,62 +1,63 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Minus, Plus } from "lucide-react";
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
Button,
|
||||
Group,
|
||||
Input,
|
||||
Label,
|
||||
NumberField,
|
||||
Button,
|
||||
Group,
|
||||
Input,
|
||||
Label,
|
||||
NumberField,
|
||||
} from "react-aria-components";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export default function NumberInput({
|
||||
maxAllowed,
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
isDisabled,
|
||||
maxAllowed,
|
||||
label,
|
||||
value = 100,
|
||||
onChange,
|
||||
className,
|
||||
isDisabled,
|
||||
}: {
|
||||
maxAllowed?: number;
|
||||
label: string;
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
className?: string;
|
||||
isDisabled?: boolean;
|
||||
maxAllowed?: number;
|
||||
label: string;
|
||||
value?: number;
|
||||
onChange: (value: number) => void;
|
||||
className?: string;
|
||||
isDisabled?: boolean;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
if (maxAllowed) {
|
||||
if (value > maxAllowed) {
|
||||
onChange(maxAllowed);
|
||||
}
|
||||
}
|
||||
}, [maxAllowed, value, onChange]);
|
||||
return (
|
||||
<NumberField
|
||||
isDisabled={isDisabled}
|
||||
className={cn(className)}
|
||||
value={value}
|
||||
minValue={0}
|
||||
onChange={onChange}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">{label}</Label>
|
||||
<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
|
||||
<Button
|
||||
slot="decrement"
|
||||
className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Minus size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</Button>
|
||||
<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
|
||||
<Button
|
||||
slot="increment"
|
||||
className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Plus size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</Button>
|
||||
</Group>
|
||||
</div>
|
||||
</NumberField>
|
||||
);
|
||||
useEffect(() => {
|
||||
if (maxAllowed) {
|
||||
if (value > maxAllowed) {
|
||||
onChange(maxAllowed);
|
||||
}
|
||||
}
|
||||
}, [maxAllowed, value, onChange]);
|
||||
|
||||
return (
|
||||
<NumberField
|
||||
isDisabled={isDisabled}
|
||||
className={cn(className)}
|
||||
value={value}
|
||||
minValue={0}
|
||||
onChange={onChange}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">{label}</Label>
|
||||
<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
|
||||
<Button
|
||||
slot="decrement"
|
||||
className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Minus size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</Button>
|
||||
<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
|
||||
<Button
|
||||
slot="increment"
|
||||
className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Plus size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</Button>
|
||||
</Group>
|
||||
</div>
|
||||
</NumberField>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,101 +7,100 @@ import { toast } from "sonner";
|
||||
import { createTopup } from "@/actions/payment";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "@/components/ui/drawer";
|
||||
import { WalletDrawerOpenAtom, walletTopUpValue } from "@/lib/atoms";
|
||||
import type { TopupType } from "@/lib/types";
|
||||
import NumberInput from "./number-input";
|
||||
|
||||
export function Wallet({ walletBalance }: { walletBalance: number }) {
|
||||
const pathname = usePathname();
|
||||
const [amount, setAmount] = useAtom(walletTopUpValue);
|
||||
const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [amount, setAmount] = useAtom(walletTopUpValue);
|
||||
const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
if (pathname === "/payment") {
|
||||
return null;
|
||||
}
|
||||
if (pathname === "/payment") {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data: TopupType = {
|
||||
amount: Number.parseFloat(amount.toFixed(2)),
|
||||
};
|
||||
const data: TopupType = {
|
||||
amount: Number.parseFloat(amount.toFixed(2)),
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
|
||||
{walletBalance}{" "}
|
||||
MVR
|
||||
<Wallet2 />
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<div className="mx-auto w-full max-w-sm">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Wallet</DrawerTitle>
|
||||
<DrawerDescription asChild>
|
||||
<div>
|
||||
Your wallet balance is{" "}
|
||||
<span className="font-semibold">
|
||||
{new Intl.NumberFormat("en-US", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(walletBalance)}
|
||||
</span>{" "}
|
||||
</div>
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
return (
|
||||
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
|
||||
{walletBalance} MVR
|
||||
<Wallet2 />
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<div className="mx-auto w-full max-w-sm">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Wallet</DrawerTitle>
|
||||
<DrawerDescription asChild>
|
||||
<div>
|
||||
Your wallet balance is{" "}
|
||||
<span className="font-semibold">
|
||||
{new Intl.NumberFormat("en-US", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(walletBalance)}
|
||||
</span>{" "}
|
||||
</div>
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
|
||||
<div className="px-4 flex flex-col gap-4">
|
||||
<NumberInput
|
||||
label="Set amount to top up"
|
||||
value={amount}
|
||||
onChange={(value) => setAmount(value)}
|
||||
maxAllowed={5000}
|
||||
isDisabled={amount === 0}
|
||||
/>
|
||||
</div>
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
console.log(data);
|
||||
setDisabled(true);
|
||||
const topup = await createTopup(data);
|
||||
setDisabled(false);
|
||||
if (topup) {
|
||||
router.push(`/top-ups/${topup.id}`);
|
||||
setIsOpen(!isOpen);
|
||||
} else {
|
||||
toast.error("Something went wrong.");
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
disabled={amount === 0 || disabled}
|
||||
>
|
||||
{disabled ? (
|
||||
<Loader2 className="ml-2 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Go to payment
|
||||
<CircleDollarSign />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
<div className="px-4 flex flex-col gap-4">
|
||||
<NumberInput
|
||||
label="Set amount to top up"
|
||||
value={amount}
|
||||
onChange={(value) => setAmount(value)}
|
||||
maxAllowed={5000}
|
||||
isDisabled={amount === 0}
|
||||
/>
|
||||
</div>
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
console.log(data);
|
||||
setDisabled(true);
|
||||
const topup = await createTopup(data);
|
||||
setDisabled(false);
|
||||
if (topup) {
|
||||
router.push(`/top-ups/${topup.id}`);
|
||||
setIsOpen(!isOpen);
|
||||
} else {
|
||||
toast.error("Something went wrong.");
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
disabled={amount === 0 || disabled}
|
||||
>
|
||||
{disabled ? (
|
||||
<Loader2 className="ml-2 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Go to payment
|
||||
<CircleDollarSign />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
22
lib/atoms.ts
22
lib/atoms.ts
@@ -10,7 +10,7 @@ export const discountPercentageAtom = atom(75);
|
||||
export const numberOfDevicesAtom = atom(1);
|
||||
export const numberOfDaysAtom = atom(30);
|
||||
export const numberOfMonths = atom(1);
|
||||
export const walletTopUpValue = atom(1);
|
||||
export const walletTopUpValue = atom(100);
|
||||
export const formulaResultAtom = atom("");
|
||||
export const deviceCartAtom = atom<Device[]>([]);
|
||||
export const cartDrawerOpenAtom = atom(false);
|
||||
@@ -19,14 +19,14 @@ export const loadingDevicesToPayAtom = atom(false);
|
||||
|
||||
// Export the atoms with their store
|
||||
export const atoms = {
|
||||
initialPriceAtom,
|
||||
discountPercentageAtom,
|
||||
numberOfDevicesAtom,
|
||||
numberOfDaysAtom,
|
||||
numberOfMonths,
|
||||
formulaResultAtom,
|
||||
deviceCartAtom,
|
||||
cartDrawerOpenAtom,
|
||||
walletTopUpValue,
|
||||
loadingDevicesToPayAtom,
|
||||
initialPriceAtom,
|
||||
discountPercentageAtom,
|
||||
numberOfDevicesAtom,
|
||||
numberOfDaysAtom,
|
||||
numberOfMonths,
|
||||
formulaResultAtom,
|
||||
deviceCartAtom,
|
||||
cartDrawerOpenAtom,
|
||||
walletTopUpValue,
|
||||
loadingDevicesToPayAtom,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user