Update and remove coupons

pakzadjs · pakzadjs · commit 7398844424a0 · 2024-09-28T16:55:49.000+02:00
diff --git a/src/app/(admin)/admin/coupons/AddCoupon.js b/src/app/(admin)/admin/coupons/AddCoupon.js
@@ -1,9 +1,10 @@
+// This component needs to be refactored and optimized
+
 "use client";
 
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import persian_fa from "react-date-object/locales/persian_fa";
 import persian from "react-date-object/calendars/persian";
-import { usePathname, useRouter } from "next/navigation";
 import DatePicker from "react-multi-date-picker";
 import { toast } from "react-hot-toast";
 import { TbPlus } from "react-icons/tb";
@@ -39,8 +40,6 @@ const validationSchema = Yup.object({
 });
 
 export default function AddCoupon() {
-  const router = useRouter();
-  const pathname = usePathname();
   const [type, setType] = useState("");
   const queryClient = useQueryClient();
   const [productIds, setProductIds] = useState([]);
@@ -55,24 +54,13 @@ export default function AddCoupon() {
     onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: ["get-coupons"] });
       toast.success(data?.message);
-      router.refresh(pathname);
     },
     onError: (error) => {
       toast.error(error?.response?.data?.message);
     },
   });
 
   const sumbitHandler = async (values) => {
-    console.log(
-      {
-        ...values,
-        type,
-        expireDate: new Date(expireDate).toISOString(),
-        productIds: productIds.map((product) => product._id),
-      },
-      "values"
-    );
-
     try {
       const { message } = await mutateAsync({
         ...values,
diff --git a/src/app/(admin)/admin/coupons/CouponsTable.js b/src/app/(admin)/admin/coupons/CouponsTable.js
@@ -4,12 +4,12 @@ import {
   toPersianNumbers,
   toPersianNumbersWithComma,
 } from "@/utils/toPersianNumbers";
+import Link from "next/link";
 import { TbEye } from "react-icons/tb";
 import RemoveCoupon from "./RemoveCoupon";
 import UpdateCoupon from "./UpdateCoupon";
 import { Tooltip, useDisclosure } from "@nextui-org/react";
 import { toLocalDateStringShort } from "@/utils/toLocalDate";
-import Link from "next/link";
 
 export default function CouponsTable({ coupon, index }) {
   const {
@@ -24,8 +24,6 @@ export default function CouponsTable({ coupon, index }) {
     amount,
   } = coupon || {};
 
-  console.log(productIds);
-
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
   return (
diff --git a/src/app/(admin)/admin/coupons/RemoveCoupon.js b/src/app/(admin)/admin/coupons/RemoveCoupon.js
@@ -1,5 +1,5 @@
-import { usePathname, useRouter } from "next/navigation";
-import { useMutation } from "@tanstack/react-query";
+import { deleteCoupon } from "@/services/adminServices";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { TbX } from "react-icons/tb";
 import toast from "react-hot-toast";
 import {
@@ -13,23 +13,24 @@ import {
 } from "@nextui-org/react";
 
 export default function RemoveCoupon({ id }) {
+  const queryClient = useQueryClient();
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
-  const router = useRouter();
-  const pathname = usePathname();
 
-  // const { isLoading, mutateAsync } = useMutation({
-  //   mutationFn: removeCoupon,
-  // });
+  const { isLoading, mutateAsync } = useMutation({
+    mutationFn: deleteCoupon,
+    onSuccess: (data) => {
+      toast.success(data?.message);
+      queryClient.invalidateQueries({ queryKey: ["get-coupons"] });
+    },
+    onError: (error) => {
+      toast.error(error?.response?.data?.message);
+    },
+  });
 
   const removeCouponHandler = async () => {
     try {
-      // const { message } = await mutateAsync(id);
-
-      // toast.success(message);
-      router.refresh(pathname);
-    } catch (error) {
-      toast.error(error?.response?.data?.message);
-    }
+      const { message } = await mutateAsync(id);
+    } catch (error) {}
   };
 
   return (
@@ -51,10 +52,12 @@ export default function RemoveCoupon({ id }) {
         <ModalContent className="text-slate-900 bg-sky-100/70 p-3">
           {(onClose) => (
             <>
-              <ModalHeader className="text-xl font-extrabold">پاک کردن کد تخفیف</ModalHeader>
+              <ModalHeader className="text-xl font-extrabold">
+                پاک کردن کد تخفیف
+              </ModalHeader>
 
               <ModalBody>
-                {/* <Button
+                <Button
                   type="submit"
                   color="danger"
                   className="btn__fifth w-full mb-3"
@@ -63,11 +66,16 @@ export default function RemoveCoupon({ id }) {
                   isLoading={isLoading}
                 >
                   پاک کردن
-                </Button> */}
+                </Button>
               </ModalBody>
 
               <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose} className="font-bold">
+                <Button
+                  color="danger"
+                  variant="light"
+                  onPress={onClose}
+                  className="font-bold"
+                >
                   بستن
                 </Button>
               </ModalFooter>
diff --git a/src/app/(admin)/admin/coupons/UpdateCoupon.js b/src/app/(admin)/admin/coupons/UpdateCoupon.js
@@ -1,8 +1,14 @@
-import { usePathname, useRouter } from "next/navigation";
-import { useMutation } from "@tanstack/react-query";
-import { toast } from "react-hot-toast";
+// This component needs to be refactored and optimized
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import persian_fa from "react-date-object/locales/persian_fa";
+import persian from "react-date-object/calendars/persian";
+import DatePicker from "react-multi-date-picker";
 import { TbEdit } from "react-icons/tb";
+import { toast } from "react-hot-toast";
 import { useFormik } from "formik";
+import Select from "react-select";
+import { useState } from "react";
 import * as Yup from "yup";
 import {
   Modal,
@@ -14,58 +20,76 @@ import {
   useDisclosure,
 } from "@nextui-org/react";
 
-import Box from "@mui/material/Box";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-
+import { updateCoupon } from "@/services/adminServices";
+import { useGetCourses } from "@/hooks/useProducts";
+import RadioInput from "@/common/RadioInput";
 import TextField from "@/common/TextField";
 
 const initialValues = {
-  type: "",
   code: "",
   amount: "",
   usageLimit: "",
-  productIds: "",
-  expireDate: "",
 };
 
-const validationSchema = Yup.object({});
+const validationSchema = Yup.object({
+  code: Yup.string().required("این فیلد نمی تواند خالی باشد"),
+  amount: Yup.number("عدد وارد کنید").required("این فیلد نمی تواند خالی باشد"),
+  usageLimit: Yup.number("عدد وارد کنید").required("این فیلد نمی تواند خالی باشد"),
+});
 
-export default function UpdateCoupon({ id, category }) {
+export default function UpdateCoupon({ coupon }) {
+  const [type, setType] = useState("");
+  const queryClient = useQueryClient();
+  const [productIds, setProductIds] = useState([]);
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
-  const router = useRouter();
-  const pathname = usePathname();
+  const [expireDate, setExpireDate] = useState(new Date());
+
+  const { _id, code, usageLimit, amount } = coupon || {};
 
-  // const { isLoading, mutateAsync } = useMutation({
-  //   mutationFn: updateCaoupon,
-  // });
+  const { data: coursesData, isLoading: coursesLoading } = useGetCourses();
+  const { products } = coursesData || {};
 
-  // const sumbitHandler = async ({}) => {
-  //   const body = {} || {};
+  const { isLoading, mutateAsync } = useMutation({
+    mutationFn: updateCoupon,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["get-coupons"] });
+      toast.success(data?.message);
+    },
+    onError: (error) => {
+      toast.error(error?.response?.data?.message);
+    },
+  });
 
-  //   try {
-  //     const { message } = await mutateAsync({ body, id });
+  const sumbitHandler = async (values) => {
+    const data = {
+      ...values,
+      type,
+      expireDate: new Date(expireDate).toISOString(),
+      productIds: productIds?.map((product) => product?._id),
+    };
 
-  //     toast.success(message);
-  //     router.refresh(pathname);
-  //   } catch (error) {
-  //     toast.error(error?.response?.data?.message);
-  //   }
-  // };
+    try {
+      const { message } = await mutateAsync({
+        id: _id,
+        data,
+      });
+    } catch (error) {}
+  };
 
-  // const formik = useFormik({
-  //   initialValues: initialValues,
-  //   onSubmit: sumbitHandler,
-  //   validationSchema: validationSchema,
-  //   validateOnMount: true,
-  // });
+  const formik = useFormik({
+    initialValues: initialValues,
+    onSubmit: sumbitHandler,
+    validationSchema: validationSchema,
+    validateOnMount: true,
+  });
 
   return (
     <div>
       <button onClick={onOpen}>
-        <TbEdit size={25} className="hover:text-slate-400 transition-all duration-250" />
+        <TbEdit
+          size={25}
+          className="hover:text-slate-400 transition-all duration-250"
+        />
       </button>
 
       <Modal
@@ -79,12 +103,109 @@ export default function UpdateCoupon({ id, category }) {
         <ModalContent className="text-slate-900 bg-sky-100/70 p-3">
           {(onClose) => (
             <>
-              <ModalHeader className="text-xl font-extrabold">آپدیت کردن کد تخفیف</ModalHeader>
+              <ModalHeader className="text-xl font-extrabold">
+                آپدیت کردن کد تخفیف
+              </ModalHeader>
+
+              <ModalBody>
+                <form
+                  onSubmit={formik.handleSubmit}
+                  className="space-y-5 md:p-10 p-5 rounded-xl"
+                >
+                  <TextField
+                    label="کد"
+                    name="code"
+                    formik={formik}
+                    placeholder={code}
+                  />
+
+                  <TextField
+                    label="مقدار"
+                    name="amount"
+                    type="number"
+                    formik={formik}
+                    placeholder={amount}
+                  />
+
+                  <TextField
+                    label="ظرفیت"
+                    name="usageLimit"
+                    type="number"
+                    formik={formik}
+                    placeholder={usageLimit}
+                  />
+
+                  <div className="flex flex-col gap-2">
+                    <span className="">نوع کد تخفیف</span>
+                    <div className="flex items-center gap-4 border border-slate-300 rounded-xl p-3 w-[250px]">
+                      <RadioInput
+                        id="percent-type"
+                        key=""
+                        label="درصد"
+                        name="type"
+                        value="percent"
+                        checked={type === "percent"}
+                        onChange={(e) => setType(e.target.value)}
+                      />
+
+                      <RadioInput
+                        id="fixedProduct-type"
+                        key=""
+                        label="قیمت ثابت"
+                        name="type"
+                        value="fixedProduct"
+                        checked={type === "fixedProduct"}
+                        onChange={(e) => setType(e.target.value)}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <span className="">انتخاب دوره</span>
+                    <Select
+                      instanceId="products"
+                      isMulti
+                      onChange={setProductIds}
+                      options={products}
+                      getOptionLabel={(option) => option.title}
+                      getOptionValue={(option) => option._id}
+                    />
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <span>تاریخ انقضا</span>
+                    <DatePicker
+                      inputClass="textField__input"
+                      value={expireDate}
+                      onChange={(date) => setExpireDate(date)}
+                      format="YYYY/MM/DD"
+                      calendar={persian}
+                      locale={persian_fa}
+                    />
+                  </div>
 
-              <ModalBody></ModalBody>
+                  <Button
+                    type="submit"
+                    color="primary"
+                    className="w-full"
+                    isLoading={coursesLoading}
+                    isDisabled={
+                      !formik.isValid || !type || !productIds.length || !expireDate
+                    }
+                    onPress={onClose}
+                  >
+                    ثبت
+                  </Button>
+                </form>
+              </ModalBody>
 
               <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose} className="font-bold">
+                <Button
+                  color="danger"
+                  variant="light"
+                  onPress={onClose}
+                  className="font-bold"
+                >
                   بستن
                 </Button>
               </ModalFooter>
diff --git a/src/app/(admin)/admin/coupons/page.js b/src/app/(admin)/admin/coupons/page.js
diff --git a/src/services/adminServices.js b/src/services/adminServices.js
