83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { ChangeEvent, FormEvent } from "react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ShippingData } from "@/lib/types";
|
|
|
|
interface ShippingModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSave: (shippingData: ShippingData) => void; // ✅ Allow passing shippingData
|
|
shippingData: ShippingData;
|
|
setShippingData: React.Dispatch<React.SetStateAction<ShippingData>>;
|
|
editing: boolean;
|
|
handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
export const ShippingModal = ({
|
|
open,
|
|
onClose,
|
|
onSave,
|
|
shippingData,
|
|
editing,
|
|
handleChange,
|
|
setShippingData,
|
|
}: ShippingModalProps) => {
|
|
|
|
const handleSubmit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
onSave(shippingData);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onClose}>
|
|
<DialogContent className="sm:max-w-[600px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-lg">
|
|
{editing ? "Edit Shipping Method" : "Add Shipping Method"}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Method Name</label>
|
|
<Input
|
|
name="name"
|
|
placeholder="Shipping Method Name"
|
|
value={shippingData.name}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Price</label>
|
|
<Input
|
|
name="price"
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="Price (£)"
|
|
value={shippingData.price}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="flex justify-end gap-2">
|
|
<Button type="button" variant="outline" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit">
|
|
{editing ? "Update Shipping Method" : "Create Shipping Method"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|