Refactor

components/modals/shipping-modal.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { ChangeEvent } 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) => {
+  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>
+
+        <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}
+            />
+          </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}
+            />
+          </div>
+        </div>
+
+        <DialogFooter className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={() => onSave(shippingData)}>
+            {editing ? "Update Shipping Method" : "Create Shipping Method"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};