payment...

src/assets/img/vuesax-linear-filter-tick.svg

@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14.378" height="14.378" viewBox="0 0 14.378 14.378">
   <g id="vuesax_linear_filter-tick" data-name="vuesax/linear/filter-tick" transform="translate(-620 -700)">
     <g id="filter-tick" transform="translate(620 700)">
-      <path id="Vector" d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z" transform="translate(7.267 5.991)" fill="none" stroke="#267de9" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.6"/>
+      <path id="Vector" d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z" transform="translate(7.267 5.991)" fill="none" stroke="#9CA3AF" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.6"/>
-      <path id="Vector-2" data-name="Vector" d="M0,.7l.7.7L2.217,0" transform="translate(9.004 8.136)" fill="none" stroke="#267de9" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.6"/>
+      <path id="Vector-2" data-name="Vector" d="M0,.7l.7.7L2.217,0" transform="translate(9.004 8.136)" fill="none" stroke="#9CA3AF" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.6"/>
       <path id="Vector-3" data-name="Vector" d="M0,0H14.378V14.378H0Z" transform="translate(14.378 14.378) rotate(180)" fill="none" opacity="0"/>
       <g id="Group" transform="translate(1.983 1.198)">
-        <path id="Vector-4" data-name="Vector" d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z" fill="none" stroke="#267de9" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.6"/>
+        <path id="Vector-4" data-name="Vector" d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z" fill="none" stroke="#9CA3AF" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.6"/>
       </g>
     </g>
   </g>

src/components/ShoppingCart/Product/index.js

@@ -9,143 +9,6 @@ import deleteIcon from "../../../assets/img/delete.svg";
 import separate from "../../../utils/separate";
 
 function Product({ product, grades, pushToCart, isMobile, productTypes }) {
-  // return isMobile ? (
-  //   <div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
-  //     <div className="flex flex-row">
-  //       {/* <img
-  //         src={"https://dnvn.ir/api/v1/file/" + product.product.book.fileIds}
-  //         className="rounded-md w-20"
-  //       /> */}
-  //       <div className="flex flex-col pr-2">
-  //         <strong className="text-base text-blue5F mb-2 dark:text-white">
-  //           {product.product.book.name}
-  //         </strong>
-  //         <span className="text-gray70 text-sm mb-2 dark:text-greenBA">
-  //           {"پایه" + " " + grades[product.product.book.gradeId]}
-  //         </span>
-  //         <span className="text-gray70 text-sm dark:text-greenBA">
-  //           {product.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
-  //         </span>
-  //       </div>
-  //     </div>
-  //     <div className={"flex flex-col justify-between items-end"}>
-  //       <img
-  //         src={exitIcon}
-  //         className="w-4"
-  //         alt=""
-  //         onClick={() =>
-  //           pushToCart(
-  //             {
-  //               productId: product?.productId,
-  //               userId: product?.userId,
-  //               count: product?.productType === 1 ? -1 : -product?.count,
-  //             },
-  //             {},
-  //             { id: product?.factorId }
-  //           )
-  //         }
-  //       />
-  //       <div className="flex flex-col items-center">
-  //         {product.productType === 2 && (
-  //           <div className="flex flex-row items-center mb-3">
-  //             <button
-  //               className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0"
-  //               onClick={() =>
-  //                 pushToCart({
-  //                   productId: product?.productId,
-  //                   userId: product?.userId,
-  //                   count: 1,
-  //                 })
-  //               }
-  //             >
-  //               +
-  //             </button>
-  //             <span className="mx-2.5 font-semibold text-md text-blueC0">
-  //               {product.count}
-  //             </span>
-  //             <button
-  //               className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0"
-  //               onClick={() =>
-  //                 pushToCart({
-  //                   productId: product?.productId,
-  //                   userId: product?.userId,
-  //                   count: -1,
-  //                 })
-  //               }
-  //             >
-  //               -
-  //             </button>
-  //           </div>
-  //         )}
-  //         <strong className="font-bold text-md text-blue5F dark:text-white">
-  //           {product.product.price}&nbsp;تومان
-  //         </strong>
-  //       </div>
-  //     </div>
-  //   </div>
-  // ) : (
-  //   <div className="flex flex-row w-full gap-10 py-4 border-b border-solid border-gray-200">
-  //     <div className="w-1/2 flex flex-row">
-  //       <img
-  //         src={"https://dnvn.ir/api/v1/file/" + product?.product?.book?.fileIds}
-  //         className="rounded-md w-20"
-  //       />
-  //       <div className="flex flex-col pr-4 pt-1">
-  //         <strong className="text-lg text-blue5F mb-1 dark:text-white font-semibold">
-  //           {product?.product?.book?.name}
-  //         </strong>
-  //         <div className="flex flex-row items-center mt-4">
-  //           <span className="w-2 h-2 bg-greenBA rounded-md ml-1"></span>
-  //           <div className="text-gray70 text-sm dark:text-greenBA">
-  //             {"پایه" + " " + grades[product?.product?.book?.gradeId]}
-  //           </div>
-  //           <span className="w-2 h-2 bg-greenBA rounded-md mr-5 ml-1"></span>
-  //           <div className="text-gray70 text-sm dark:text-greenBA">
-  //             {product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
-  //           </div>
-  //         </div>
-  //       </div>
-  //     </div>
-  //     <div className="w-1/4 flex flex-row items-center">
-  //       <button
-  //         className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg"
-  //         onClick={() =>
-  //           pushToCart({
-  //             productId: product?.productId,
-  //             userId: product?.userId,
-  //             count: 1,
-  //           })
-  //         }
-  //       >
-  //         +
-  //       </button>
-  //       <span className="mx-2.5 font-semibold text-lg text-blueC0">
-  //         {product.count}
-  //       </span>
-  //       <button
-  //         className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0 text-lg"
-  //         onClick={() =>
-  //           pushToCart({
-  //             productId: product?.productId,
-  //             userId: product?.userId,
-  //             count: -1,
-  //           })
-  //         }
-  //       >
-  //         -
-  //       </button>
-  //     </div>
-  //     <div className="w-1/4 flex flex-row items-center justify-end pl-4">
-  //       <strong className="font-semibold text-md text-blue5F dark:text-white">
-  //         &nbsp;{product?.product?.price}&nbsp;&nbsp;تومان
-  //       </strong>
-  //       <img
-  //         src={deleteIcon}
-  //         alt="delete"
-  //         className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md mr-4"
-  //       />
-  //     </div>
-  //   </div>
   return (
     <div className="flex bg-white justify-between items-center border-2 border-gray-300 p-4 pr-2 rounded-xl m-2 " style={{ width: '90%' }}>
       <div className="flex items-center ">
@@ -169,7 +32,7 @@ function Product({ product, grades, pushToCart, isMobile, productTypes }) {
               {
                 productId: product?.productId,
                 userId: product?.userId,
-                count: product?.count == 1 ? -product?.count : -1,
+                count: product?.count !== 1 ? -(product?.count) : -1,
               },
               {},
               { id: product?.factorId }

src/redux/actions/index.js

@@ -11,6 +11,7 @@ export { default as faq } from "./faq";
 export { default as file } from "./file";
 export {default as scrollAction} from "./scroll";
 export {default as qr} from "./qr";
+export { default as userTransaction } from "./userTransaction";
 
 
 

src/redux/actions/userTransaction.js

@@ -0,0 +1,17 @@
+import proxy from "../proxy";
+const userTransaction = {
+  add:
+    (data = {}) =>
+    async (dispatch) => {
+      await proxy.post("userTransaction/add", data, { dispatch });
+    },
+  restart: () => {
+    return (dispatch) => {
+      dispatch({
+        type: "userTransaction/restart",
+      });
+    };
+  },
+};
+
+export default userTransaction;

src/redux/reducers/index.js

@@ -11,3 +11,4 @@ export { default as userProduct } from "./userProduct";
 export {default as scrollAction} from "./scroll";
 export {default as qr} from "./qr";
 export {default as addExamReduser} from "./exam";
+export { default as userTransaction } from "./userTransaction";

src/redux/reducers/userTransaction.js

@@ -0,0 +1,24 @@
+
+import { toast } from "react-toastify";
+const initialState = {
+  loading: false,
+  error: null,
+  situation: 0,
+};
+export default function userTransaction(state = initialState, action) {
+  let { type, data } = action;
+  switch (type) {
+    case "userTransaction/add":
+      toast.success("درخواست شما با موفقیت انجام شد.");
+      return { ...state, loading: false, error: null, situation: 1 };
+    case "userTransaction/restart":
+      return { ...state, loading: false, error: null, situation: 0 };
+    case "userFactor/loading":
+      return { ...state, loading: true };
+    case "userFactor/error":
+      toast.error(data.message);
+      return { ...state, loading: false, error: data.message };
+    default:
+      return state;
+  }
+}

src/view/services/PaymentBox.js

@@ -0,0 +1,429 @@
+import moment from "jalali-moment";
+import { useEffect, useState } from "react";
+import {
+  AiOutlinePlus,
+  AiFillDelete,
+  AiOutlineCloseCircle,
+} from "react-icons/ai";
+import { connect } from "react-redux";
+import { toast } from "react-toastify";
+import { userFactor,userTransaction } from "../../redux/actions";
+
+const PaymentBox = ({
+  setShowPaymentBox,
+  getFactorInfo,
+  factorInfo,
+  payment,
+  query,
+  addUserTransaction,
+  restartTransaction,
+  transactionSituation
+}) => {
+  useEffect(() => {
+    getFactorInfo();
+  }, []);
+  console.log("factorInfo:");
+  console.log(factorInfo);
+  //-------------------------------------------------
+  const [fake, setFake] = useState(0);
+  const [paymentList, setPaymentList] = useState([
+    {
+      id: 1,
+      amount: factorInfo?.payPrice,
+      status: null,
+      type: 1,
+      cardNumber: null,
+      paidAt: null,
+      TracingNumber: null,
+    },
+  ]);
+  useEffect(() => {
+    if (localStorage.getItem("paymentList") && query.status) {
+      console.log("fnjwebfjkwbf:");
+      console.log(factorInfo);
+      let newList = JSON.parse(localStorage.getItem("paymentList"));
+      let lastPaymentIndex = localStorage.getItem("lastPaymentIndex");
+      let payPrice = localStorage.getItem("factorInfoPrice");
+      if (query.status === "OK") {
+        newList[lastPaymentIndex].status = 1;
+        if (newList.amount < payPrice) {
+          newList.push({
+            id: newList.length + 1,
+            amount: null,
+            status: null,
+            type: 1,
+            cardNumber: null,
+            paidAt: null,
+            TracingNumber: null,
+          });
+        }
+      } else {
+        newList[lastPaymentIndex].status = null;
+      }
+      localStorage.removeItem("paymentList");
+      localStorage.removeItem("lastPaymentIndex");
+      localStorage.removeItem("factorInfoPrice");
+      setPaymentList(newList);
+      setFake(fake + 1);
+    }
+  }, []);
+  //-----------------------------------------
+  const changeType = (e, index) => {
+    let newList = paymentList;
+    newList[index] = { ...newList[index], type: Number(e.target.value) };
+    console.log("g:");
+    console.log(newList[index]);
+    setPaymentList(newList);
+    setFake(fake + 1);
+  };
+
+  const addPaymentHandler = () => {
+    let newList = paymentList;
+    newList.push({
+      id: newList.length + 1,
+      amount: null,
+      status: null,
+      type: 1,
+      cardNumber: null,
+      paidAt: null,
+      TracingNumber: null,
+    });
+    setPaymentList(newList);
+    setFake(fake + 1);
+  };
+
+  const deletePayment = (index) => {
+    let newList = [];
+    for (let i = 0; i < paymentList.length; i++) {
+      if (i !== index) {
+        newList.push(paymentList[i]);
+      }
+    }
+    setPaymentList(newList);
+    setFake(fake + 1);
+  };
+
+  //changeAmount--------------------
+  const changeAmount = (e, index) => {
+    let newList = paymentList;
+    newList[index].amount = e.target.value;
+    setPaymentList(newList);
+    setFake(fake + 1);
+  };
+
+  //paymentStatuslists----------------------
+  let paymentStatusColorList = ["#FBBF24", "#84CC16"];
+  let paymentStatusTextList = ["در انتظار تایید", "پرداخت شده"];
+
+  //cardToCardCHeck-----------------------------------
+  console.log("transactionSituation:");
+  console.log(transactionSituation);
+  useEffect(()=>{
+    if(transactionSituation)
+    {
+      alert("hooooooooo");
+      let newList = paymentList;
+      newList[newList.length-1].status=0;
+      setPaymentList(newList);
+      setFake(fake+1)
+      restartTransaction()
+    }
+  },[transactionSituation])
+  //paymentHandler--------
+  const paymentHandler = (item, index) => {
+    console.log(item);
+    if (item.type === 1) {
+      localStorage.setItem("paymentList", JSON.stringify(paymentList));
+      localStorage.setItem("lastPaymentIndex", index);
+      localStorage.setItem("factorInfoPrice", factorInfo.payPrice);
+      // payment({
+      //   price: item.amount,
+      //   redirectUrl: "https://new.andishmand.ir/services",
+      // });
+      payment({
+        price: item.amount,
+        redirectUrl: "http://localhost:3000/services",
+      });
+    } else if (item.type === 2) {
+      let cardNumber = document.querySelector(
+        "#paymentBox-cardNumber-input"
+      ).value;
+      let dateInfo = document.querySelectorAll(
+        ".paymentBox-payment-date-input"
+      );
+      let TracingNumber = document.querySelector(
+        "#paymentBox-TracingNumber-input"
+      ).value;
+      if (Number(dateInfo[0]) > 31) {
+        toast.error("تاریخ وارد شده معتبر نیست");
+      } else if (Number(dateInfo[1].value) > 12) {
+        toast.error("تاریخ وارد شده معتبر نیست");
+      } else if (Number(dateInfo[2].value) < 1401) {
+        toast.error("تاریخ وارد شده معتبر نیست");
+      } else if (Number(dateInfo[3].value) > 59) {
+        toast.error("ساعت وارد شده معتبر نیست");
+      } else if (Number(dateInfo[4].value) > 23) {
+        toast.error("ساعت وارد شده معتبر نیست");
+      } else if (cardNumber.length < 16) {
+        toast.error("کارت وارد شده نامعتبر است");
+      } else if (TracingNumber.length < 1) {
+        toast.error("شماره پیگیری را وارد کنید");
+      } else {
+        //create date-------------------------------------------
+        let dateString = `${Number(dateInfo[2].value)}/${Number(
+          dateInfo[1].value
+        )}/${Number(dateInfo[0].value)}`;
+        console.log(dateString);
+        let dueDate = moment
+          .from(
+            `${dateString} ${Number(dateInfo[4].value)}:${Number(
+              dateInfo[3].value
+            )}`,
+            "fa",
+            `YYYY/M/D HH:mm`
+          )
+          .format("YYYY-M-D HH:mm");
+        console.log(dueDate);
+        //-----------------------------------------
+        let newList = paymentList;
+        newList[index].cardNumber = cardNumber;
+        newList[index].paidAt = dueDate;
+        newList[index].TracingNumber = TracingNumber;
+        setPaymentList(newList);
+        setFake(fake + 1);
+        addUserTransaction({
+          price: item.amount,
+          dueDate: dueDate,
+          cardNumber,
+          followCode: TracingNumber,
+          type:5
+        });
+      }
+    }
+  };
+  return (
+    <div className="w-[93.5vw] h-[93.5vh] bg-black fixed top-[6.5%] left-0 backdrop-blur-md bg-[#0000004D] flex items-center justify-center">
+      <div className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2 relative">
+        <div className="w-full flex items-center justify-between">
+          <div className="w-full text-right text-2xl text-[#DF1452]">
+            پرداخت و ثبت تراکنش‌ها
+          </div>
+          <AiOutlineCloseCircle
+            className="text-4xl text-red-600 cursor-pointer"
+            onClick={() => setShowPaymentBox(false)}
+          />
+        </div>
+        <div className="payment-container w-full mt-6 max-h-[85%] overflow-y-auto">
+          {paymentList.map((item, index) => (
+            <div
+              key={index}
+              className="w-full mb-2 flex justify-between text-black pb-2 border-b"
+            >
+              {/* ----------choose-payment-type---------------------------------------- */}
+              <select
+                className="w-[17%] h-10 rounded outline-0 border text-black px-1 py-0"
+                onChange={(e) => changeType(e, index)}
+                style={item.status !== null ? { pointerEvents: "none" } : null}
+              >
+                {/* <option value={null}>نوع پرداخت</option> */}
+                <option value={1}>پرداخت اینترنتی</option>
+                <option value={2}>کارت به کارت</option>
+                {/* <option value={3}>پرداخت با چک</option>
+                    <option value={4}>پرداخت نقدی</option> */}
+              </select>
+              {/* ---------- payment-info ---------------------------------------- */}
+              <div className="w-[58%]">
+                <div className="w-full h-10 flex box-border rounded overflow-hidden border">
+                  <div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
+                    مبلغ
+                  </div>
+                  <input
+                    type="text"
+                    name="payment-box-amount-input"
+                    id="payment-box-amount-input"
+                    className="w-[70%] h-10 px-1 outline-0 text-center text-lg"
+                    value={item.amount}
+                    onChange={(e) => changeAmount(e, index)}
+                    style={
+                      item.status !== null ? { pointerEvents: "none" } : null
+                    }
+                  />
+                  <div className="w-[10%] h-full flex items-center justify-center text-sm">
+                    تومان
+                  </div>
+                </div>
+                {/* - */}
+                {item.type === 2 && (
+                  <div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
+                    <div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
+                      شماره کارت
+                    </div>
+                    <input
+                      type="text"
+                      name="payment-box-amount-input"
+                      id="paymentBox-cardNumber-input"
+                      className="w-[80%] h-10 px-1 outline-0 text-center"
+                      maxLength={16}
+                    />
+                  </div>
+                )}
+                {/* - */}
+                {item.type === 2 && (
+                  <div className="w-full h-10 flex items-center justify-between mt-1">
+                    <div className="w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2">
+                      <div className="w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
+                        تاریخ پرداخت
+                      </div>
+                      <div className="w-[60%] h-full flex items-center justify-between p-1">
+                        <input
+                          type="text"
+                          className="paymentBox-payment-date-input w-[29%] h-full rounded border text-center text-sm"
+                          maxLength={2}
+                        />
+                        <div className="h-full w-[5%] flex items-center justify-center">
+                          /
+                        </div>
+                        <input
+                          type="text"
+                          className="paymentBox-payment-date-input w-[29%] h-full rounded border text-center text-sm"
+                          maxLength={2}
+                        />
+                        <div className="h-full w-[5%] flex items-center justify-center">
+                          /
+                        </div>
+                        <input
+                          type="text"
+                          className="paymentBox-payment-date-input w-[29%] h-full rounded border text-center text-sm"
+                          maxLength={4}
+                        />
+                      </div>
+                    </div>
+                    {/* ---- */}
+                    <div className="w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2">
+                      <div className="w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
+                        ساعت پرداخت
+                      </div>
+                      <div className="w-[60%] h-full flex justify-between items-center p-1">
+                        <input
+                          type="text"
+                          className="paymentBox-payment-date-input w-[45%] h-full rounded border text-center text-sm"
+                          maxLength={2}
+                        />
+                        <div className="h-full w-[5%] flex items-center justify-center">
+                          :
+                        </div>
+                        <input
+                          type="text"
+                          className="paymentBox-payment-date-input w-[45%] h-full rounded border text-center text-sm"
+                          maxLength={2}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
+                {/* - */}
+                {item.type === 2 && (
+                  <div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
+                    <div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
+                      شماره پیگیری
+                    </div>
+                    <input
+                      type="text"
+                      name="payment-box-amount-input"
+                      id="paymentBox-TracingNumber-input"
+                      className="w-[80%] h-10 px-1 outline-0 text-center"
+                      maxLength={30}
+                    />
+                  </div>
+                )}
+              </div>
+              {/* ---------- pay and submit btn ---------------------------------------- */}
+              <div className="w-[17%] h-10">
+                {item.type === 1 && (
+                  <div
+                    className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer"
+                    style={
+                      item.status !== null
+                        ? {
+                            backgroundColor:
+                              paymentStatusColorList[item.status],
+                            pointerEvents: "none",
+                          }
+                        : null
+                    }
+                    onClick={() => paymentHandler(item, index)}
+                  >
+                    {item.status !== null
+                      ? paymentStatusTextList[item.status]
+                      : "پرداخت"}
+                  </div>
+                )}
+                {item.type === 2 && (
+                  <div
+                    className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer"
+                    style={
+                      item.status !== null
+                        ? {
+                            backgroundColor:
+                              paymentStatusColorList[item.status],
+                            pointerEvents: "none",
+                          }
+                        : null
+                    }
+                    onClick={() => paymentHandler(item, index)}
+                  >
+                    {item.status !== null
+                      ? paymentStatusTextList[item.status]
+                      : "ثبت پرداخت"}
+                  </div>
+                )}
+              </div>
+              {/* ------------------ */}
+              <div
+                className="w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white"
+                style={
+                  index === 0
+                    ? { pointerEvents: "none", filter: "grayscale(100%)" }
+                    : null
+                }
+                onClick={() => deletePayment(index)}
+              >
+                <AiFillDelete className="text-xl text-white" />
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="w-full h-[15%] bg-white flex items-center justify-center absolute bottom-0 left-0">
+          <div
+            className="w-[30%] h-1/2 rounded flex items-center justify-center text-lg bg-[#DF1452] text-white cursor-pointer"
+            onClick={() => setShowPaymentBox(false)}
+          >
+            تایید
+          </div>
+        </div>
+        {/* <div
+              className="w-10 h-10 rounded-full mt-4 border mx-auto border-[#DF1452] cursor-pointer flex items-center justify-center"
+              onClick={addPaymentHandler}
+            >
+              <AiOutlinePlus className="text-2xl text-[#DF1452]" />
+            </div> */}
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  factorInfo: state.userFactor.info,
+  transactionSituation: state.userTransaction.situation,
+});
+
+const mapDispatchToProps = {
+  getFactorInfo: userFactor.info,
+  payment: userFactor.payment,
+  addUserTransaction: userTransaction.add,
+  restartTransaction : userTransaction.restart
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PaymentBox);
+
+// ?status=OK&authority=000000000000000000000000000000831486

src/view/services/index.js

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { book, publicApi, userProduct } from "../../redux/actions";
+import PaymentBox from "./PaymentBox";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import Product from "../../components/Product";
 import { CgDanger } from "react-icons/cg";
-import { AiOutlinePlus, AiFillDelete } from "react-icons/ai";
+import filterIcon from "../../assets/img/vuesax-linear-filter-tick.svg";
 // import ScrollContainer from 'react-indiana-drag-scroll'
 
 import img1 from "../../assets/img/Group 1344.svg";
@@ -20,6 +21,7 @@ import Games from "../dashboard2/Games";
 
 import "./index.css";
 import separate from "../../utils/separate";
+import { toast } from "react-toastify";
 
 const Services = ({
   isMobile,
@@ -63,11 +65,41 @@ const Services = ({
     classHour: "",
     classMinute: "",
   });
+
+  //handle payment response------------
+  let search = useLocation().search;
+  let query = Object.fromEntries(new URLSearchParams(search));
+
+  useEffect(() => {
+    if (query.status) {
+      if (query.status === "OK") {
+        toast.success("پرداخت با موفقیت انجام شد");
+      } else {
+        toast.error(
+          `عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} می‌باشد`
+        );
+        // fireAlert({
+        //   title: "پرداخت ناموفق",
+        //   text: `عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} می‌باشد`,
+        //   confirmButtonText: "توضیح بیشتر",
+        //   showCancelButton: true,
+        //   cancelButtonText: "متوجه شدم",
+        //   showCloseButton: false,
+        //   customClass: {
+        //     title: "title-error-7",
+        //     closeButton: "close-button-7",
+        //     confirmButton: "confirm-button-7",
+        //     cancelButton: "cancle-button7",
+        //   },
+        // });
+      }
+      setShowPaymentBox(true);
+    }
+  }, []);
+
+  //----------------------------------------------
   const [sharzhVal, setSharzhVal] = useState("");
   const [selectedProductTypes, setSelectedProductTypes] = useState([7]);
-  // const onChange = (name, value) => {
-  //   setFilter({ ...filter, [name]: value });
-  // };
 
   useEffect(() => {
     getList();
@@ -120,47 +152,48 @@ const Services = ({
   };
   console.log(gameId);
 
-  //-------------------------------------
+  //productClickHandler------------------
-  const [fake,setFake]=useState(0);
+  const productClickhandler=(product)=>{
-  const [paymentList, setPaymentList] = useState([
+    setPopUpContent({
-    {
+      id: gameId,
-      id: 1,
+      title: product?.name,
-      amount: null,
+      video: product?.fileId,
-      status: 4,
+      teacher: product?.teacherName,
-      type: 1,
+      description: product?.description,
-    },
+      price: gameId == 2 ? 0 : product?.price,
-  ]);
+      classHour: product?.duration,
-  const changeType=(e,index)=>{
+      classMinute: "",
-    let newList = paymentList;
+      image: "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg",
-    newList[index] = { ...newList[index],type:Number(e.target.value)};
+      examCont: [],
-    console.log("g:")
+      type: product?.productType,
-    console.log(newList[index]);
-    setPaymentList(newList);
-    setFake(fake+1);
-  }
-  const [showPaymentBox, setShowPaymentBox] = useState(false);
-  const addPaymentHandler=()=>{
-    let newList = paymentList;
-    newList.push({
-      id: newList.length+1,
-      amount: null,
-      status: 4,
-      type: 1,
     });
-    setPaymentList(newList);
+    if (gameId !== 5) {
-    setFake(fake + 1);
+      setPopUp(true);
-  }
-  const deletePayment=(index)=>{
-    let newList = [];
-    for(let i=0;i<paymentList.length;i++){
-      if(i !== index){
-        newList.push(paymentList[i]);
     }
+    console.log(gameId);
   }
-    setPaymentList(newList);
+
-    setFake(fake + 1);
+  //AddToCartHandler--------------------
+  const AddToCartHandler = (product) => {
+    if (selectedProductTypes.includes(7)) {
+      pushSchoolToCart({
+        productId: product?.id,
+
+        count: 1,
+      });
+    } else {
+      pushToCart({
+        productId: product?.id,
+
+        count: 1,
+      });
     }
-  //-==========================================================
+    setTimeout(() => setPopUp(false), 0);
+  };
+
+  //-------------------------------------
+  const [showPaymentBox, setShowPaymentBox] = useState(false);
+  //-======================== Desktop ===========================================
   if (!isMobile) {
     return (
       <div
@@ -198,62 +231,7 @@ const Services = ({
           {gameId != 6 && (
             <div className="flex mx-6  justify-start">
               <div className="flex items-center ">
-                <svg
+                <img src={filterIcon} alt="filterIcon" className="w-9" />
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="40"
-                  height="40"
-                  viewBox="0 0 14.378 14.378"
-                >
-                  <g
-                    id="vuesax_linear_filter-tick"
-                    data-name="vuesax/linear/filter-tick"
-                    transform="translate(-620 -700)"
-                  >
-                    <g id="filter-tick" transform="translate(620 700)">
-                      <path
-                        id="Vector"
-                        d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z"
-                        transform="translate(7.267 5.991)"
-                        fill="none"
-                        stroke="#696969"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="0.6"
-                      />
-                      <path
-                        id="Vector-2"
-                        data-name="Vector"
-                        d="M0,.7l.7.7L2.217,0"
-                        transform="translate(9.004 8.136)"
-                        fill="none"
-                        stroke="#696969"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="0.6"
-                      />
-                      <path
-                        id="Vector-3"
-                        data-name="Vector"
-                        d="M0,0H14.378V14.378H0Z"
-                        transform="translate(14.378 14.378) rotate(180)"
-                        fill="none"
-                        opacity="0"
-                      />
-                      <g id="Group" transform="translate(1.983 1.198)">
-                        <path
-                          id="Vector-4"
-                          data-name="Vector"
-                          d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z"
-                          fill="none"
-                          stroke="#696969"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="0.6"
-                        />
-                      </g>
-                    </g>
-                  </g>
-                </svg>
               </div>
               <div className="flex items-center   mx-6 pl-6 border-l-2 border-gray-300">
                 {filterCheck.map((filter) => (
@@ -300,42 +278,6 @@ const Services = ({
                     )}
                   </div>
                 ))}
-                {/* <div
-                className={`flex w-32 border-2 p-2 mx-2 px-4 justify-center items-center rounded-md cursor-pointer
-                      hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                    ${filterCheck == 'Physical'
-                    ? "border-red52 text-red52 bg-pinkF5"
-                    : "border-gray200 text-gray-400"
-                  }`}
-                onClick={(prevState) =>
-                  setFilterCheck('Physical')
-                }
-              >
-                <h3>حضوری</h3>
-                {filterCheck == 'Physical' && (
-                  <div className="flex w-full" style={{ direction: "ltr" }}>
-                    <div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
-                      <svg
-                        width="37"
-                        height="37"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M7.75 12L10.58 14.83L16.25 9.17004"
-                          stroke="#fff"
-                          strokeWidth="1.5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-
-
-                )}
-              </div> */}
               </div>
 
               <div className="flex items-center mx-4 pl-6">
@@ -376,43 +318,10 @@ const Services = ({
                       teacher={product.vodTeacher}
                       catId={gameId}
                       onClick={() => {
-                        setPopUpContent({
+                        productClickhandler(product);
-                          id: gameId,
-                          title: product?.name,
-                          video: product?.fileId,
-                          teacher: product?.teacherName,
-                          description: product?.description,
-                          price: gameId == 2 ? 0 : product?.price,
-                          classHour: product?.duration,
-                          classMinute: "",
-                          image:
-                            "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg",
-                          examCont: [],
-                          type: product?.productType,
-                        });
-                        if (gameId !== 5) {
-                          setPopUp(true);
-                        }
-                        console.log(gameId);
                       }}
                       btnOnClick={() => {
-                        if (selectedProductTypes.includes(7)) {
+                        AddToCartHandler(product);
-                          pushSchoolToCart({
-                            productId: product?.id,
-
-                            count: 1,
-                          });
-                        } else {
-                          pushToCart({
-                            productId: product?.id,
-
-                            count: 1,
-                          });
-                        }
-                        // console.log(gameId)
-                        setTimeout(() => setPopUp(false), 0);
-                        // console.log(popup)
-                        // console.log(product.id)
                       }}
                     />
                   )}
@@ -466,157 +375,17 @@ const Services = ({
         {/* --------------left-part------------------------------------- */}
         {!isMobile && (
           <div className="w-[23.5%] left-0 " style={{ height: "100vh" }}>
-            <ShoppingCart />
+            <ShoppingCart setShowPaymentBox={setShowPaymentBox} />
           </div>
         )}
         {/* --------------payment-box------------------------------------- */}
-        <div className="w-[93.5vw] h-[93.5vh] bg-black fixed top-[6.5%] left-0 backdrop-blur-md bg-[#0000004D] flex items-center justify-center">
+        {showPaymentBox && (
-          <div className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2">
+          <PaymentBox setShowPaymentBox={setShowPaymentBox} query={query} />
-            <div className="w-full text-right text-2xl text-[#DF1452]">
-              پرداخت و ثبت تراکنش‌ها
-            </div>
-            <div className="payment-container w-full mt-6">
-              {paymentList.map((item, index) => (
-                <div
-                  key={index}
-                  className="w-full mb-2 flex justify-between text-black"
-                >
-                  <select
-                    className="w-[17%] h-10 rounded outline-0 border text-black px-1 py-0"
-                    onChange={(e) => changeType(e, index)}
-                  >
-                    {/* <option value={null}>نوع پرداخت</option> */}
-                    <option value={1}>پرداخت اینترنتی</option>
-                    <option value={2}>کارت به کارت</option>
-                    {/* <option value={3}>پرداخت با چک</option>
-                    <option value={4}>پرداخت نقدی</option> */}
-                  </select>
-                  {/* ------------ */}
-                  <div className="w-[58%]">
-                    <div className="w-full h-10 flex box-border rounded overflow-hidden border">
-                      <div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r">
-                        مبلغ
-                      </div>
-                      <input
-                        type="text"
-                        name="payment-box-amount-input"
-                        id="payment-box-amount-input"
-                        className="w-[70%] h-10 px-1 outline-0 text-center"
-                      />
-                      <div className="w-[10%] h-full flex items-center justify-center text-sm">
-                        تومان
-                      </div>
-                    </div>
-                    {/* - */}
-                    {item.type === 2 && (
-                      <div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
-                        <div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r">
-                          شماره کارت
-                        </div>
-                        <input
-                          type="text"
-                          name="payment-box-amount-input"
-                          id="payment-box-amount-input"
-                          className="w-[80%] h-10 px-1 outline-0 text-center"
-                        />
-                      </div>
         )}
-                    {/* - */}
-                    {item.type === 2 && (
-                      <div className="w-full h-10 flex items-center justify-between mt-1">
-                        <div className="w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2">
-                          <div className="w-[40%] bg-[#000] flex items-center justify-center text-white rounded-r text-sm">
-                            تاریخ پرداخت
-                          </div>
-                          <div className="w-[60%] h-full flex items-center justify-between p-1">
-                            <input
-                              type="text"
-                              className="w-[29%] h-full rounded border text-center text-sm"
-                            />
-                            <div className="h-full w-[5%] flex items-center justify-center">
-                              /
-                            </div>
-                            <input
-                              type="text"
-                              className="w-[29%] h-full rounded border text-center text-sm"
-                            />
-                            <div className="h-full w-[5%] flex items-center justify-center">
-                              /
-                            </div>
-                            <input
-                              type="text"
-                              className="w-[29%] h-full rounded border text-center text-sm"
-                            />
-                          </div>
-                        </div>
-                        {/* ---- */}
-                        <div className="w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2">
-                          <div className="w-[40%] bg-[#000] flex items-center justify-center text-white rounded-r text-sm">
-                            ساعت پرداخت
-                          </div>
-                          <div className="w-[60%] h-full flex justify-between items-center p-1">
-                            <input
-                              type="text"
-                              className="w-[45%] h-full rounded border text-center text-sm"
-                            />
-                            <div className="h-full w-[5%] flex items-center justify-center">
-                              :
-                            </div>
-                            <input
-                              type="text"
-                              className="w-[45%] h-full rounded border text-center text-sm"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                    {/* - */}
-                    {item.type === 2 && (
-                      <div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
-                        <div className="w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r">
-                          شماره پیگیری
-                        </div>
-                        <input
-                          type="text"
-                          name="payment-box-amount-input"
-                          id="payment-box-amount-input"
-                          className="w-[80%] h-10 px-1 outline-0 text-center"
-                        />
-                      </div>
-                    )}
-                  </div>
-                  {/* ------------------ */}
-                  <div className="w-[17%] h-10">
-                    {item.type === 1 && (
-                      <div className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer">
-                        پرداخت
-                      </div>
-                    )}
-                    {item.type === 2 && (
-                      <div className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer">
-                        ثبت پرداخت
-                      </div>
-                    )}
-                  </div>
-                  {/* ------------------ */}
-                  <div className="w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white" style={index===0 ?{pointerEvents:"none",filter:"grayscale(100%)"}:null} onClick={()=>deletePayment(index)}>
-                    <AiFillDelete className="text-xl text-white"/>
-                  </div>
-                </div>
-              ))}
-            </div>
-            {/* <div
-              className="w-10 h-10 rounded-full mt-4 border mx-auto border-[#DF1452] cursor-pointer flex items-center justify-center"
-              onClick={addPaymentHandler}
-            >
-              <AiOutlinePlus className="text-2xl text-[#DF1452]" />
-            </div> */}
-          </div>
-        </div>
       </div>
     );
   }
-  // Mobile Version
+  //=========================== Mobile Version======================================
   else {
     return (
       <div className="flex flex-col items-center mt-16 mb-40 rtl">