Add coupon to cart

Author: pakzadjs

src/app/(user)/cart/CartSummary.js

@@ -1,20 +1,41 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { useState } from "react";
 import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
 import { Button } from "@nextui-org/react";
 import { TbReceipt } from "react-icons/tb";
 import { toPersianNumbersWithComma } from "@/utils/toPersianNumbers";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { createPayment } from "@/services/paymentService";
+import { addCouponToCart } from "@/services/cartService";
 
 export default function CartSummary({ payDetail, setPaying }) {
+  const [couponCode, setCouponCode] = useState("");
   const { totalOffAmount, totalPrice, totalGrossPrice } = payDetail;
   const queryClient = useQueryClient();
   const router = useRouter();
 
   const { isLoading, mutateAsync } = useMutation({ mutationFn: createPayment });
 
+  const { isLoading: addCouponLoading, mutateAsync: addCouponMutate } = useMutation({
+    mutationFn: addCouponToCart,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["get-user"] });
+      toast.success("کد تخفیف با موفقیت اعمال شد");
+    },
+    onError: (error) => {
+      toast.error(error?.response?.data?.message);
+    },
+  });
+
+  const addCouponToCartHandler = async (e) => {
+    e.preventDefault();
+    try {
+      await addCouponMutate({ couponCode });
+    } catch (error) {}
+  };
+
   const createPaymentHandler = async () => {
     try {
       const { message, url } = await mutateAsync();
@@ -39,6 +60,35 @@ export default function CartSummary({ payDetail, setPaying }) {
 
       <hr className="border-slate-500 mb-6" />
 
+      <div className="mb-2">کد تخفیف</div>
+
+      <form
+        onSubmit={addCouponToCartHandler}
+        className="flex items-center mb-4 gap-2"
+      >
+        <input
+          autoComplete="off"
+          className="textField__input py-2 rounded-xl"
+          type="text"
+          name="code"
+          id="code"
+          value={couponCode}
+          onChange={(e) => setCouponCode(e.target.value)}
+        />
+
+        <Button
+          isLoading={addCouponLoading}
+          isDisabled={couponCode === ""}
+          className="btn"
+          color="primary"
+          type="submit"
+        >
+          اعمال
+        </Button>
+      </form>
+
+      <hr className="border-slate-500 mb-6" />
+
       <div className="mb-4 flex items-center justify-between">
         <span>جمع کل</span>
         <span>{toPersianNumbersWithComma(totalGrossPrice)}</span>
@@ -56,7 +106,8 @@ export default function CartSummary({ payDetail, setPaying }) {
       <div className="mb-6 flex items-center justify-between font-bold">
         <span>مبلغ قابل پرداخت</span>
         <div className="text-xl font-extrabold text-sky-500 flex items-center gap-1">
-          {toPersianNumbersWithComma(totalPrice)} <span className="text-xs">تومان</span>
+          {toPersianNumbersWithComma(totalPrice)}{" "}
+          <span className="text-xs">تومان</span>
         </div>
       </div>
 

src/services/cartService.js

@@ -7,3 +7,7 @@ export function addToCart(productId) {
 export function removeFromCart(productId) {
   return http.post("/cart/remove", { productId }).then(({ data }) => data.data);
 }
+
+export function addCouponToCart(couponCode) {
+  return http.post("/cart/coupon", couponCode).then(({ data }) => data.data);
+}