|  |  |  | @ -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); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   //-------------------------------------
 | 
			
		
	
		
			
				
					|  |  |  |  |   const [fake,setFake]=useState(0); | 
			
		
	
		
			
				
					|  |  |  |  |   const [paymentList, setPaymentList] = useState([ | 
			
		
	
		
			
				
					|  |  |  |  |     { | 
			
		
	
		
			
				
					|  |  |  |  |       id: 1, | 
			
		
	
		
			
				
					|  |  |  |  |       amount: null, | 
			
		
	
		
			
				
					|  |  |  |  |       status: 4, | 
			
		
	
		
			
				
					|  |  |  |  |       type: 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 [showPaymentBox, setShowPaymentBox] = useState(false); | 
			
		
	
		
			
				
					|  |  |  |  |   const addPaymentHandler=()=>{ | 
			
		
	
		
			
				
					|  |  |  |  |     let newList = paymentList; | 
			
		
	
		
			
				
					|  |  |  |  |     newList.push({ | 
			
		
	
		
			
				
					|  |  |  |  |       id: newList.length+1, | 
			
		
	
		
			
				
					|  |  |  |  |       amount: null, | 
			
		
	
		
			
				
					|  |  |  |  |       status: 4, | 
			
		
	
		
			
				
					|  |  |  |  |       type: 1, | 
			
		
	
		
			
				
					|  |  |  |  |   //productClickHandler------------------
 | 
			
		
	
		
			
				
					|  |  |  |  |   const productClickhandler=(product)=>{ | 
			
		
	
		
			
				
					|  |  |  |  |     setPopUpContent({ | 
			
		
	
		
			
				
					|  |  |  |  |       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, | 
			
		
	
		
			
				
					|  |  |  |  |     }); | 
			
		
	
		
			
				
					|  |  |  |  |     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]); | 
			
		
	
		
			
				
					|  |  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |  |     if (gameId !== 5) { | 
			
		
	
		
			
				
					|  |  |  |  |       setPopUp(true); | 
			
		
	
		
			
				
					|  |  |  |  |     } | 
			
		
	
		
			
				
					|  |  |  |  |     setPaymentList(newList); | 
			
		
	
		
			
				
					|  |  |  |  |     setFake(fake + 1); | 
			
		
	
		
			
				
					|  |  |  |  |     console.log(gameId); | 
			
		
	
		
			
				
					|  |  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  |  |   //-==========================================================
 | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   //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 | 
			
		
	
		
			
				
					|  |  |  |  |                   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> | 
			
		
	
		
			
				
					|  |  |  |  |                 <img src={filterIcon} alt="filterIcon" className="w-9" /> | 
			
		
	
		
			
				
					|  |  |  |  |               </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({ | 
			
		
	
		
			
				
					|  |  |  |  |                           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); | 
			
		
	
		
			
				
					|  |  |  |  |                         productClickhandler(product); | 
			
		
	
		
			
				
					|  |  |  |  |                       }} | 
			
		
	
		
			
				
					|  |  |  |  |                       btnOnClick={() => { | 
			
		
	
		
			
				
					|  |  |  |  |                         if (selectedProductTypes.includes(7)) { | 
			
		
	
		
			
				
					|  |  |  |  |                           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)
 | 
			
		
	
		
			
				
					|  |  |  |  |                         AddToCartHandler(product); | 
			
		
	
		
			
				
					|  |  |  |  |                       }} | 
			
		
	
		
			
				
					|  |  |  |  |                     /> | 
			
		
	
		
			
				
					|  |  |  |  |                   )} | 
			
		
	
	
		
			
				
					|  |  |  | @ -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"> | 
			
		
	
		
			
				
					|  |  |  |  |           <div className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2"> | 
			
		
	
		
			
				
					|  |  |  |  |             <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> | 
			
		
	
		
			
				
					|  |  |  |  |         {showPaymentBox && ( | 
			
		
	
		
			
				
					|  |  |  |  |           <PaymentBox setShowPaymentBox={setShowPaymentBox} query={query} /> | 
			
		
	
		
			
				
					|  |  |  |  |         )} | 
			
		
	
		
			
				
					|  |  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |  |     ); | 
			
		
	
		
			
				
					|  |  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  |  |   // Mobile Version
 | 
			
		
	
		
			
				
					|  |  |  |  |   //=========================== Mobile Version======================================
 | 
			
		
	
		
			
				
					|  |  |  |  |   else { | 
			
		
	
		
			
				
					|  |  |  |  |     return ( | 
			
		
	
		
			
				
					|  |  |  |  |       <div className="flex flex-col items-center mt-16 mb-40 rtl"> | 
			
		
	
	
		
			
				
					|  |  |  | 
 |