44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
"use client";
|
||
|
||
import { useActionState, useEffect } from "react";
|
||
import { toast } from "sonner";
|
||
import { Button } from "@/components/ui/button";
|
||
import { baslatOdeme, type OdemeBaslatDurum } from "./actions";
|
||
|
||
export function SatinAlForm({
|
||
urun,
|
||
label,
|
||
vurgulu = false,
|
||
}: {
|
||
urun: "paket" | "topup";
|
||
label: string;
|
||
vurgulu?: boolean;
|
||
}) {
|
||
const [state, formAction, pending] = useActionState<
|
||
OdemeBaslatDurum,
|
||
FormData
|
||
>(baslatOdeme, undefined);
|
||
|
||
useEffect(() => {
|
||
if (state?.error) toast.error(state.error);
|
||
}, [state]);
|
||
|
||
return (
|
||
<form action={formAction}>
|
||
<input type="hidden" name="urun" value={urun} />
|
||
<Button
|
||
type="submit"
|
||
disabled={pending}
|
||
className={
|
||
vurgulu
|
||
? "h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600"
|
||
: "h-11 w-full cursor-pointer"
|
||
}
|
||
variant={vurgulu ? "default" : "outline"}
|
||
>
|
||
{pending ? "Ödeme sayfasına yönlendiriliyorsun…" : label}
|
||
</Button>
|
||
</form>
|
||
);
|
||
}
|