| 
							
								 | 
							
							import React, { useEffect, useState } from "react"; | 
						
						
						
						
							 | 
							
								 | 
							
							import { book, publicApi, userProduct, user } from "../../redux/actions"; | 
						
						
						
						
							 | 
							
								 | 
							
							import PaymentBox from "./PaymentBox"; | 
						
						
						
						
							 | 
							
								 | 
							
							import { connect } from "react-redux"; | 
						
						
						
						
							 | 
							
								 | 
							
							import { Link, useLocation } from "react-router-dom"; | 
						
						
						
						
							 | 
							
								 | 
							
							import Product from "../../components/Product"; | 
						
						
						
						
							 | 
							
								 | 
							
							import { CgDanger } from "react-icons/cg"; | 
						
						
						
						
							 | 
							
								 | 
							
							import { BsFillCheckCircleFill } from "react-icons/bs"; | 
						
						
						
						
							 | 
							
								 | 
							
							import filterIcon from "../../assets/img/vuesax-linear-filter-tick.svg"; | 
						
						
						
						
							 | 
							
								 | 
							
							import underCicon from "../../assets/img/Group 2275.svg"; | 
						
						
						
						
							 | 
							
								 | 
							
							// import ScrollContainer from 'react-indiana-drag-scroll' | 
						
						
						
						
							 | 
							
								 | 
							
							 | 
						
						
						
						
							 | 
							
								 | 
							
							import img1 from "../../assets/img/Group 1344.svg"; | 
						
						
						
						
							 | 
							
								 | 
							
							import img2 from "../../assets/img/Group 1345.svg"; | 
						
						
						
						
							 | 
							
								 | 
							
							import img3 from "../../assets/img/Group 1349.svg"; | 
						
						
						
						
							 | 
							
								 | 
							
							import img4 from "../../assets/img/Group 1364.svg"; | 
						
						
						
						
							 | 
							
								 | 
							
							import img5 from "../../assets/img/Group 1357.svg"; | 
						
						
						
						
							 | 
							
								 | 
							
							import img6 from "../../assets/img/Group 1362.svg"; | 
						
						
						
						
							 | 
							
								 | 
							
							import ShoppingCart from "../../components/ShoppingCart"; | 
						
						
						
						
							 | 
							
								 | 
							
							import ServicePopUp from "./service"; | 
						
						
						
						
							 | 
							
								 | 
							
							import Games from "../dashboard2/Games"; | 
						
						
						
						
							 | 
							
								 | 
							
							// import Packages from "../dashboard2/Packages"; | 
						
						
						
						
							 | 
							
								 | 
							
							 | 
						
						
						
						
							 | 
							
								 | 
							
							import "./index.css"; | 
						
						
						
						
							 | 
							
								 | 
							
							import separate from "../../utils/separate"; | 
						
						
						
						
							 | 
							
								 | 
							
							import { toast } from "react-toastify"; | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							const Services = ({ | 
						
						
						
						
							 | 
							
								 | 
							
							  isMobile, | 
						
						
						
						
							 | 
							
								 | 
							
							  books, | 
						
						
						
						
							 | 
							
								 | 
							
							  getList, | 
						
						
						
						
							 | 
							
								 | 
							
							  grades, | 
						
						
						
						
							 | 
							
								 | 
							
							  gradeFilter, | 
						
						
						
						
							 | 
							
								 | 
							
							  selectedGrade, | 
						
						
						
						
							 | 
							
								 | 
							
							  gradeFilterBooks, | 
						
						
						
						
							 | 
							
								 | 
							
							  setHeaderOptions, | 
						
						
						
						
							 | 
							
								 | 
							
							  headerOptions, | 
						
						
						
						
							 | 
							
								 | 
							
							  videos, | 
						
						
						
						
							 | 
							
								 | 
							
							  pushToCart, | 
						
						
						
						
							 | 
							
								 | 
							
							  pushSchoolToCart, | 
						
						
						
						
							 | 
							
								 | 
							
							  getUserInfo, | 
						
						
						
						
							 | 
							
								 | 
							
							  userInfo | 
						
						
						
						
							 | 
							
								 | 
							
							}) => { | 
						
						
						
						
							 | 
							
								 | 
							
							  useEffect(()=>{ | 
						
						
						
						
							 | 
							
								 | 
							
							    getUserInfo(); | 
						
						
						
						
							 | 
							
								 | 
							
							  },[]) | 
						
						
						
						
							 | 
							
								 | 
							
							  //------------------------------------ | 
						
						
						
						
							 | 
							
								 | 
							
							  const [fliterList,setFilterList]=useState([]); | 
						
						
						
						
							 | 
							
								 | 
							
							  const [fake,setFake]=useState(0); | 
						
						
						
						
							 | 
							
								 | 
							
							  const fliterHandler=(index)=>{ | 
						
						
						
						
							 | 
							
								 | 
							
							    let list = fliterList; | 
						
						
						
						
							 | 
							
								 | 
							
							    if(fliterList.includes(index)){ | 
						
						
						
						
							 | 
							
								 | 
							
							      let newList = []; | 
						
						
						
						
							 | 
							
								 | 
							
							      for(let i=0;i<list.length;i++){ | 
						
						
						
						
							 | 
							
								 | 
							
							        if(list[i]!==index){ | 
						
						
						
						
							 | 
							
								 | 
							
							          newList.push(list[i]); | 
						
						
						
						
							 | 
							
								 | 
							
							        } | 
						
						
						
						
							 | 
							
								 | 
							
							      } | 
						
						
						
						
							 | 
							
								 | 
							
							      setFilterList(newList); | 
						
						
						
						
							 | 
							
								 | 
							
							    }else{ | 
						
						
						
						
							 | 
							
								 | 
							
							      let newList = fliterList; | 
						
						
						
						
							 | 
							
								 | 
							
							      newList.push(index); | 
						
						
						
						
							 | 
							
								 | 
							
							      setFilterList(newList); | 
						
						
						
						
							 | 
							
								 | 
							
							    } | 
						
						
						
						
							 | 
							
								 | 
							
							    setFake(fake+1); | 
						
						
						
						
							 | 
							
								 | 
							
							  } | 
						
						
						
						
							 | 
							
								 | 
							
							  //------------------------------------------------------------- | 
						
						
						
						
							 | 
							
								 | 
							
							  const [filterCheck, setFilterCheck] = useState([ | 
						
						
						
						
							 | 
							
								 | 
							
							    { | 
						
						
						
						
							 | 
							
								 | 
							
							      id: 1, | 
						
						
						
						
							 | 
							
								 | 
							
							      title: "حضوری", | 
						
						
						
						
							 | 
							
								 | 
							
							    }, | 
						
						
						
						
							 | 
							
								 | 
							
							    { | 
						
						
						
						
							 | 
							
								 | 
							
							      id: 2, | 
						
						
						
						
							 | 
							
								 | 
							
							      title: "آنلاین", | 
						
						
						
						
							 | 
							
								 | 
							
							    }, | 
						
						
						
						
							 | 
							
								 | 
							
							  ]); | 
						
						
						
						
							 | 
							
								 | 
							
							  const [selectedFilters, setSelectedFilters] = useState([]); | 
						
						
						
						
							 | 
							
								 | 
							
							  const [filter, setFilter] = useState({ | 
						
						
						
						
							 | 
							
								 | 
							
							    search: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    grade: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    productsType: "کتاب", | 
						
						
						
						
							 | 
							
								 | 
							
							  }); | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							  const [popup, setPopUp] = useState(false); | 
						
						
						
						
							 | 
							
								 | 
							
							  const [popUpContent, setPopUpContent] = useState({ | 
						
						
						
						
							 | 
							
								 | 
							
							    id: 1, | 
						
						
						
						
							 | 
							
								 | 
							
							    title: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    video: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    description: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    price: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    teacher: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    classHour: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    classMinute: "", | 
						
						
						
						
							 | 
							
								 | 
							
							  }); | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							  //handle payment response------------ | 
						
						
						
						
							 | 
							
								 | 
							
							  let search = useLocation().search; | 
						
						
						
						
							 | 
							
								 | 
							
							  let query = Object.fromEntries(new URLSearchParams(search)); | 
						
						
						
						
							 | 
							
								 | 
							
							  const [paymentError,setPaymentError]=useState(false); | 
						
						
						
						
							 | 
							
								 | 
							
							  useEffect(() => { | 
						
						
						
						
							 | 
							
								 | 
							
							    if (query.status) { | 
						
						
						
						
							 | 
							
								 | 
							
							      if (query.status === "OK") { | 
						
						
						
						
							 | 
							
								 | 
							
							        toast.success("پرداخت با موفقیت انجام شد"); | 
						
						
						
						
							 | 
							
								 | 
							
							      } else { | 
						
						
						
						
							 | 
							
								 | 
							
							        // toast.error( | 
						
						
						
						
							 | 
							
								 | 
							
							        //   `عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} میباشد` | 
						
						
						
						
							 | 
							
								 | 
							
							        // ); | 
						
						
						
						
							 | 
							
								 | 
							
							        setPaymentError(true); | 
						
						
						
						
							 | 
							
								 | 
							
							      } | 
						
						
						
						
							 | 
							
								 | 
							
							      setShowPaymentBox(true); | 
						
						
						
						
							 | 
							
								 | 
							
							    } | 
						
						
						
						
							 | 
							
								 | 
							
							  }, []); | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							  //---------------------------------------------- | 
						
						
						
						
							 | 
							
								 | 
							
							  const [sharzhVal, setSharzhVal] = useState(""); | 
						
						
						
						
							 | 
							
								 | 
							
							  const [selectedProductTypes, setSelectedProductTypes] = useState([7]); | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							  useEffect(() => { | 
						
						
						
						
							 | 
							
								 | 
							
							    getList(); | 
						
						
						
						
							 | 
							
								 | 
							
							    setHeaderOptions(headerOptions); | 
						
						
						
						
							 | 
							
								 | 
							
							  }, []); | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							  useEffect(() => { | 
						
						
						
						
							 | 
							
								 | 
							
							    gradeFilter(filter.grade); | 
						
						
						
						
							 | 
							
								 | 
							
							  }, [filter]); | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							  const services = [ | 
						
						
						
						
							 | 
							
								 | 
							
							    { | 
						
						
						
						
							 | 
							
								 | 
							
							      title: "کلاس های آموزشی", | 
						
						
						
						
							 | 
							
								 | 
							
							      image: img1, | 
						
						
						
						
							 | 
							
								 | 
							
							      role: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    }, | 
						
						
						
						
							 | 
							
								 | 
							
							    { | 
						
						
						
						
							 | 
							
								 | 
							
							      title: "پیش ثبت نام مدارس", | 
						
						
						
						
							 | 
							
								 | 
							
							      image: img2, | 
						
						
						
						
							 | 
							
								 | 
							
							      role: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    }, | 
						
						
						
						
							 | 
							
								 | 
							
							    { | 
						
						
						
						
							 | 
							
								 | 
							
							      title: "بسته های آزمون", | 
						
						
						
						
							 | 
							
								 | 
							
							      image: img3, | 
						
						
						
						
							 | 
							
								 | 
							
							      role: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    }, | 
						
						
						
						
							 | 
							
								 | 
							
							    { | 
						
						
						
						
							 | 
							
								 | 
							
							      title: "کتاب های آموزشی", | 
						
						
						
						
							 | 
							
								 | 
							
							      image: img4, | 
						
						
						
						
							 | 
							
								 | 
							
							      role: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    }, | 
						
						
						
						
							 | 
							
								 | 
							
							    { | 
						
						
						
						
							 | 
							
								 | 
							
							      title: "دوره های مجازی", | 
						
						
						
						
							 | 
							
								 | 
							
							      image: img5, | 
						
						
						
						
							 | 
							
								 | 
							
							      role: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    }, | 
						
						
						
						
							 | 
							
								 | 
							
							    { | 
						
						
						
						
							 | 
							
								 | 
							
							      title: "سایر خدمات", | 
						
						
						
						
							 | 
							
								 | 
							
							      image: img6, | 
						
						
						
						
							 | 
							
								 | 
							
							      role: "", | 
						
						
						
						
							 | 
							
								 | 
							
							    }, | 
						
						
						
						
							 | 
							
								 | 
							
							  ]; | 
						
						
						
						
							 | 
							
								 | 
							
							  console.log("book---------)))))))))))))))))))))-------------------"); | 
						
						
						
						
							 | 
							
								 | 
							
							  console.log(books); | 
						
						
						
						
							 | 
							
								 | 
							
							  const [selectedGames, setSelectedGames] = useState([]); | 
						
						
						
						
							 | 
							
								 | 
							
							  const [gameId, setGameId] = useState(5); | 
						
						
						
						
							 | 
							
								 | 
							
							  const chooseGame = (id) => { | 
						
						
						
						
							 | 
							
								 | 
							
							    setGameId(id); | 
						
						
						
						
							 | 
							
								 | 
							
							    console.log(selectedProductTypes); | 
						
						
						
						
							 | 
							
								 | 
							
							  }; | 
						
						
						
						
							 | 
							
								 | 
							
							  console.log(gameId); | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							  //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, | 
						
						
						
						
							 | 
							
								 | 
							
							    }); | 
						
						
						
						
							 | 
							
								 | 
							
							    if (gameId !== 5) { | 
						
						
						
						
							 | 
							
								 | 
							
							      setPopUp(true); | 
						
						
						
						
							 | 
							
								 | 
							
							    } | 
						
						
						
						
							 | 
							
								 | 
							
							    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 | 
						
						
						
						
							 | 
							
								 | 
							
							        className="flex items-start justify-between" | 
						
						
						
						
							 | 
							
								 | 
							
							        style={{ width: "93.5%", direction: "rtl", height: "100vh" }} | 
						
						
						
						
							 | 
							
								 | 
							
							      > | 
						
						
						
						
							 | 
							
								 | 
							
							        {popup ? ( | 
						
						
						
						
							 | 
							
								 | 
							
							          <ServicePopUp | 
						
						
						
						
							 | 
							
								 | 
							
							            content={popUpContent} | 
						
						
						
						
							 | 
							
								 | 
							
							            closeOnClick={() => setPopUp(false)} | 
						
						
						
						
							 | 
							
								 | 
							
							            sendPrice={(val) => | 
						
						
						
						
							 | 
							
								 | 
							
							              setPopUpContent({ | 
						
						
						
						
							 | 
							
								 | 
							
							                ...popUpContent, | 
						
						
						
						
							 | 
							
								 | 
							
							                price: popUpContent.price + val, | 
						
						
						
						
							 | 
							
								 | 
							
							              }) | 
						
						
						
						
							 | 
							
								 | 
							
							            } | 
						
						
						
						
							 | 
							
								 | 
							
							          /> | 
						
						
						
						
							 | 
							
								 | 
							
							        ) : null} | 
						
						
						
						
							 | 
							
								 | 
							
							        <div | 
						
						
						
						
							 | 
							
								 | 
							
							          className="w-[76.5%] h-[100vh]  flex flex-col  justify-center pt-[3.5%]" | 
						
						
						
						
							 | 
							
								 | 
							
							          // style={{  paddingTop:'5.5%', height: '100vh' }} | 
						
						
						
						
							 | 
							
								 | 
							
							        > | 
						
						
						
						
							 | 
							
								 | 
							
							          <div | 
						
						
						
						
							 | 
							
								 | 
							
							            className="h-40  w-full border-b border-red82OP my-4 px-6" | 
						
						
						
						
							 | 
							
								 | 
							
							            style={{ direction: "ltr" }} | 
						
						
						
						
							 | 
							
								 | 
							
							          > | 
						
						
						
						
							 | 
							
								 | 
							
							            <Games | 
						
						
						
						
							 | 
							
								 | 
							
							              selectedGames={selectedGames} | 
						
						
						
						
							 | 
							
								 | 
							
							              gameId={gameId} | 
						
						
						
						
							 | 
							
								 | 
							
							              chooseGame={chooseGame} | 
						
						
						
						
							 | 
							
								 | 
							
							              setTypes={(val) => setSelectedProductTypes(val)} | 
						
						
						
						
							 | 
							
								 | 
							
							            /> | 
						
						
						
						
							 | 
							
								 | 
							
							          </div> | 
						
						
						
						
							 | 
							
								 | 
							
							          {/* filters-------------------------------------- */} | 
						
						
						
						
							 | 
							
								 | 
							
							          {gameId === 3 && ( | 
						
						
						
						
							 | 
							
								 | 
							
							            <div className="flex mx-6  justify-start"> | 
						
						
						
						
							 | 
							
								 | 
							
							              <div className="flex items-center "> | 
						
						
						
						
							 | 
							
								 | 
							
							                <img src={filterIcon} alt="filterIcon" className="w-9" /> | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              <div className="flex items-center  mx-6 pl-6 border-l-2 border-gray-300"> | 
						
						
						
						
							 | 
							
								 | 
							
							                <div | 
						
						
						
						
							 | 
							
								 | 
							
							                  className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center ml-2 cursor-pointer gap-x-1" | 
						
						
						
						
							 | 
							
								 | 
							
							                  style={ | 
						
						
						
						
							 | 
							
								 | 
							
							                    !fliterList.includes(4) | 
						
						
						
						
							 | 
							
								 | 
							
							                      ? { borderColor: "#DF1452", color: "#DF1452" } | 
						
						
						
						
							 | 
							
								 | 
							
							                      : null | 
						
						
						
						
							 | 
							
								 | 
							
							                  } | 
						
						
						
						
							 | 
							
								 | 
							
							                  onClick={() => fliterHandler(4)} | 
						
						
						
						
							 | 
							
								 | 
							
							                > | 
						
						
						
						
							 | 
							
								 | 
							
							                  <div>آنلاین</div> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <BsFillCheckCircleFill /> | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							                <div | 
						
						
						
						
							 | 
							
								 | 
							
							                  className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center cursor-pointer gap-x-1" | 
						
						
						
						
							 | 
							
								 | 
							
							                  style={ | 
						
						
						
						
							 | 
							
								 | 
							
							                    !fliterList.includes(3) | 
						
						
						
						
							 | 
							
								 | 
							
							                      ? { borderColor: "#DF1452", color: "#DF1452" } | 
						
						
						
						
							 | 
							
								 | 
							
							                      : null | 
						
						
						
						
							 | 
							
								 | 
							
							                  } | 
						
						
						
						
							 | 
							
								 | 
							
							                  onClick={() => fliterHandler(3)} | 
						
						
						
						
							 | 
							
								 | 
							
							                > | 
						
						
						
						
							 | 
							
								 | 
							
							                  <div>حضوری</div> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <BsFillCheckCircleFill /> | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              {/* <div className="flex items-center "> | 
						
						
						
						
							 | 
							
								 | 
							
							                <div | 
						
						
						
						
							 | 
							
								 | 
							
							                  className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center ml-2 cursor-pointer gap-x-1" | 
						
						
						
						
							 | 
							
								 | 
							
							                  style={ | 
						
						
						
						
							 | 
							
								 | 
							
							                    !fliterList.includes(1) | 
						
						
						
						
							 | 
							
								 | 
							
							                      ? { borderColor: "#DF1452", color: "#DF1452" } | 
						
						
						
						
							 | 
							
								 | 
							
							                      : null | 
						
						
						
						
							 | 
							
								 | 
							
							                  } | 
						
						
						
						
							 | 
							
								 | 
							
							                  onClick={() => fliterHandler(1)} | 
						
						
						
						
							 | 
							
								 | 
							
							                > | 
						
						
						
						
							 | 
							
								 | 
							
							                  <div>پسرانه</div> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <BsFillCheckCircleFill /> | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							                <div | 
						
						
						
						
							 | 
							
								 | 
							
							                  className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center cursor-pointer gap-x-1" | 
						
						
						
						
							 | 
							
								 | 
							
							                  style={ | 
						
						
						
						
							 | 
							
								 | 
							
							                    !fliterList.includes(2) | 
						
						
						
						
							 | 
							
								 | 
							
							                      ? { borderColor: "#DF1452", color: "#DF1452" } | 
						
						
						
						
							 | 
							
								 | 
							
							                      : null | 
						
						
						
						
							 | 
							
								 | 
							
							                  } | 
						
						
						
						
							 | 
							
								 | 
							
							                  onClick={() => fliterHandler(2)} | 
						
						
						
						
							 | 
							
								 | 
							
							                > | 
						
						
						
						
							 | 
							
								 | 
							
							                  <div>دخترانه</div> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <BsFillCheckCircleFill /> | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> */} | 
						
						
						
						
							 | 
							
								 | 
							
							            </div> | 
						
						
						
						
							 | 
							
								 | 
							
							          )} | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							          <div className="flex w-full overflow-x-hidden overflow-scroll flex-wrap h-full gap-x-[5%] px-6"> | 
						
						
						
						
							 | 
							
								 | 
							
							            {books | 
						
						
						
						
							 | 
							
								 | 
							
							              ?.filter((itm) => selectedProductTypes.includes(itm.productType)) | 
						
						
						
						
							 | 
							
								 | 
							
							              .map((product, index) => ( | 
						
						
						
						
							 | 
							
								 | 
							
							                <React.Fragment key={index}> | 
						
						
						
						
							 | 
							
								 | 
							
							                  {(gameId !== 3 || | 
						
						
						
						
							 | 
							
								 | 
							
							                    (!fliterList.includes(product?.productType - 1) && | 
						
						
						
						
							 | 
							
								 | 
							
							                      (product?.gender === userInfo?.gender || | 
						
						
						
						
							 | 
							
								 | 
							
							                        product?.gender=== null) && | 
						
						
						
						
							 | 
							
								 | 
							
							                      product?.gradeIds === Number(userInfo?.gradeIds))) && ( | 
						
						
						
						
							 | 
							
								 | 
							
							                    <div | 
						
						
						
						
							 | 
							
								 | 
							
							                      //  to={"/class/" + product?.id} | 
						
						
						
						
							 | 
							
								 | 
							
							                      className="w-[30%]" | 
						
						
						
						
							 | 
							
								 | 
							
							                      key={`PRODUCT__${gameId}__${index}`} | 
						
						
						
						
							 | 
							
								 | 
							
							                      style={gameId === 5 ? { width: "100%" } : null} | 
						
						
						
						
							 | 
							
								 | 
							
							                    > | 
						
						
						
						
							 | 
							
								 | 
							
							                      {(selectedProductTypes.includes(4) || | 
						
						
						
						
							 | 
							
								 | 
							
							                        selectedProductTypes.includes(7)) && ( | 
						
						
						
						
							 | 
							
								 | 
							
							                        <Product | 
						
						
						
						
							 | 
							
								 | 
							
							                          key={index} | 
						
						
						
						
							 | 
							
								 | 
							
							                          productsType={filter.productsType} | 
						
						
						
						
							 | 
							
								 | 
							
							                          product={product} | 
						
						
						
						
							 | 
							
								 | 
							
							                          index={Number(index)} | 
						
						
						
						
							 | 
							
								 | 
							
							                          productName={`${product?.name}`} | 
						
						
						
						
							 | 
							
								 | 
							
							                          productCat={`پایه ${grades[product?.gradeId]}`} | 
						
						
						
						
							 | 
							
								 | 
							
							                          productPrice={separate(product?.price)} | 
						
						
						
						
							 | 
							
								 | 
							
							                          // productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} | 
						
						
						
						
							 | 
							
								 | 
							
							                          numberOfRegards={160} | 
						
						
						
						
							 | 
							
								 | 
							
							                          productHolderBorder="" | 
						
						
						
						
							 | 
							
								 | 
							
							                          productHolderHoverBorder="shadow-md" | 
						
						
						
						
							 | 
							
								 | 
							
							                          teacher={product.vodTeacher} | 
						
						
						
						
							 | 
							
								 | 
							
							                          catId={gameId} | 
						
						
						
						
							 | 
							
								 | 
							
							                          userInfo={userInfo} | 
						
						
						
						
							 | 
							
								 | 
							
							                          onClick={() => { | 
						
						
						
						
							 | 
							
								 | 
							
							                            productClickhandler(product); | 
						
						
						
						
							 | 
							
								 | 
							
							                          }} | 
						
						
						
						
							 | 
							
								 | 
							
							                          btnOnClick={() => { | 
						
						
						
						
							 | 
							
								 | 
							
							                            AddToCartHandler(product); | 
						
						
						
						
							 | 
							
								 | 
							
							                          }} | 
						
						
						
						
							 | 
							
								 | 
							
							                        /> | 
						
						
						
						
							 | 
							
								 | 
							
							                      )} | 
						
						
						
						
							 | 
							
								 | 
							
							                    </div> | 
						
						
						
						
							 | 
							
								 | 
							
							                  )} | 
						
						
						
						
							 | 
							
								 | 
							
							                </React.Fragment> | 
						
						
						
						
							 | 
							
								 | 
							
							              ))} | 
						
						
						
						
							 | 
							
								 | 
							
							            {!selectedProductTypes.includes(4) && | 
						
						
						
						
							 | 
							
								 | 
							
							              !selectedProductTypes.includes(7) && | 
						
						
						
						
							 | 
							
								 | 
							
							              gameId !== 6 && ( | 
						
						
						
						
							 | 
							
								 | 
							
							                <div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded"> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <CgDanger className="text-4xl" /> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <img src={underCicon} alt="underCicon" className="w-[30%]" /> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <div className="text-xl mt-4" style={{ direction: "rtl" }}> | 
						
						
						
						
							 | 
							
								 | 
							
							                    این بخش هنوز فعال نشده است. | 
						
						
						
						
							 | 
							
								 | 
							
							                  </div> | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              )} | 
						
						
						
						
							 | 
							
								 | 
							
							            {gameId == 6 && ( | 
						
						
						
						
							 | 
							
								 | 
							
							              <div className="w-4/5 mx-auto h-48 flex  justify-between text-right items-center border-2 rounded-xl border-red52 "> | 
						
						
						
						
							 | 
							
								 | 
							
							                <div className="w-1/5 mx-1"> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <p className="text-red26 text-sm"> | 
						
						
						
						
							 | 
							
								 | 
							
							                    لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید | 
						
						
						
						
							 | 
							
								 | 
							
							                  </p> | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							                <div className="flex mx-1"> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <input | 
						
						
						
						
							 | 
							
								 | 
							
							                    placeholder="12,000,000" | 
						
						
						
						
							 | 
							
								 | 
							
							                    className="border border-red52 rounded-lg h-12 w-36 text-center rounded-l-none border-l-0 px-4 outline-none" | 
						
						
						
						
							 | 
							
								 | 
							
							                    value={separate(sharzhVal)} | 
						
						
						
						
							 | 
							
								 | 
							
							                    onChange={(e) => setSharzhVal(e.target.value)} | 
						
						
						
						
							 | 
							
								 | 
							
							                  /> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-r-none border-r-0 px-4"> | 
						
						
						
						
							 | 
							
								 | 
							
							                    ریال | 
						
						
						
						
							 | 
							
								 | 
							
							                  </p> | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							                <div className="flex mx-1"> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <p className="border flex justify-center items-center border-red52 rounded-lg h-12 w-12 text-center rounded-l-none border-l-0 px-6 pl-2 "> | 
						
						
						
						
							 | 
							
								 | 
							
							                    بابت | 
						
						
						
						
							 | 
							
								 | 
							
							                  </p> | 
						
						
						
						
							 | 
							
								 | 
							
							                  <input | 
						
						
						
						
							 | 
							
								 | 
							
							                    placeholder="شارژ حساب" | 
						
						
						
						
							 | 
							
								 | 
							
							                    className="border border-red52 rounded-lg h-12 w-60 text-right rounded-r-none border-r-0 px-4 outline-none" | 
						
						
						
						
							 | 
							
								 | 
							
							                  /> | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							                <button className="cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12 mx-2"> | 
						
						
						
						
							 | 
							
								 | 
							
							                  افزودن به اعتبار | 
						
						
						
						
							 | 
							
								 | 
							
							                </button> | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> | 
						
						
						
						
							 | 
							
								 | 
							
							            )} | 
						
						
						
						
							 | 
							
								 | 
							
							          </div> | 
						
						
						
						
							 | 
							
								 | 
							
							        </div> | 
						
						
						
						
							 | 
							
								 | 
							
							        {/* --------------left-part------------------------------------- */} | 
						
						
						
						
							 | 
							
								 | 
							
							        {!isMobile && ( | 
						
						
						
						
							 | 
							
								 | 
							
							          <div className="w-[23.5%] left-0 " style={{ height: "100vh" }}> | 
						
						
						
						
							 | 
							
								 | 
							
							            <ShoppingCart setShowPaymentBox={setShowPaymentBox} /> | 
						
						
						
						
							 | 
							
								 | 
							
							          </div> | 
						
						
						
						
							 | 
							
								 | 
							
							        )} | 
						
						
						
						
							 | 
							
								 | 
							
							        {/* --------------payment-box------------------------------------- */} | 
						
						
						
						
							 | 
							
								 | 
							
							        {showPaymentBox && ( | 
						
						
						
						
							 | 
							
								 | 
							
							          <PaymentBox | 
						
						
						
						
							 | 
							
								 | 
							
							            setShowPaymentBox={setShowPaymentBox} | 
						
						
						
						
							 | 
							
								 | 
							
							            query={query} | 
						
						
						
						
							 | 
							
								 | 
							
							            paymentError={paymentError} | 
						
						
						
						
							 | 
							
								 | 
							
							            setPaymentError={setPaymentError} | 
						
						
						
						
							 | 
							
								 | 
							
							          /> | 
						
						
						
						
							 | 
							
								 | 
							
							        )} | 
						
						
						
						
							 | 
							
								 | 
							
							      </div> | 
						
						
						
						
							 | 
							
								 | 
							
							    ); | 
						
						
						
						
							 | 
							
								 | 
							
							  } | 
						
						
						
						
							 | 
							
								 | 
							
							  //=========================== Mobile Version====================================== | 
						
						
						
						
							 | 
							
								 | 
							
							  else { | 
						
						
						
						
							 | 
							
								 | 
							
							    return ( | 
						
						
						
						
							 | 
							
								 | 
							
							      <div className="flex flex-col items-center mt-16 mb-40 rtl"> | 
						
						
						
						
							 | 
							
								 | 
							
							        <Games | 
						
						
						
						
							 | 
							
								 | 
							
							          selectedGames={selectedGames} | 
						
						
						
						
							 | 
							
								 | 
							
							          gameId={gameId} | 
						
						
						
						
							 | 
							
								 | 
							
							          chooseGame={chooseGame} | 
						
						
						
						
							 | 
							
								 | 
							
							          setTypes={(val) => setSelectedProductTypes(val)} | 
						
						
						
						
							 | 
							
								 | 
							
							        /> | 
						
						
						
						
							 | 
							
								 | 
							
							        <div className="w-11/12 border-b border-gray-200"></div> | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							        {gameId !== 6 && ( | 
						
						
						
						
							 | 
							
								 | 
							
							          <div className="flex items-center  mx-4 my-4"> | 
						
						
						
						
							 | 
							
								 | 
							
							            <img src={filterIcon} alt="filterIcon" className="w-9" /> | 
						
						
						
						
							 | 
							
								 | 
							
							            {filterCheck.map((filter) => ( | 
						
						
						
						
							 | 
							
								 | 
							
							              <div | 
						
						
						
						
							 | 
							
								 | 
							
							                key={`FILTER_${filter.id}`} | 
						
						
						
						
							 | 
							
								 | 
							
							                className={`flex w-32 border-2 p-2 px-4  mx-2 justify-center items-center rounded-md cursor-pointer | 
						
						
						
						
							 | 
							
								 | 
							
							                      hover:border-red52 hover:text-red52 hover:bg-pinkF5  | 
						
						
						
						
							 | 
							
								 | 
							
							                    ${ | 
						
						
						
						
							 | 
							
								 | 
							
							                      selectedFilters.includes(filter.id) | 
						
						
						
						
							 | 
							
								 | 
							
							                        ? "border-red52 text-red52 bg-pinkF5" | 
						
						
						
						
							 | 
							
								 | 
							
							                        : "border-gray200 text-gray-400" | 
						
						
						
						
							 | 
							
								 | 
							
							                    }`} | 
						
						
						
						
							 | 
							
								 | 
							
							                onClick={(prevState) => { | 
						
						
						
						
							 | 
							
								 | 
							
							                  if (selectedFilters.includes(filter.id)) { | 
						
						
						
						
							 | 
							
								 | 
							
							                    setSelectedFilters( | 
						
						
						
						
							 | 
							
								 | 
							
							                      selectedFilters.filter((itm) => itm !== filter.id) | 
						
						
						
						
							 | 
							
								 | 
							
							                    ); | 
						
						
						
						
							 | 
							
								 | 
							
							                  } else { | 
						
						
						
						
							 | 
							
								 | 
							
							                    setSelectedFilters([...selectedFilters, filter.id]); | 
						
						
						
						
							 | 
							
								 | 
							
							                  } | 
						
						
						
						
							 | 
							
								 | 
							
							                }} | 
						
						
						
						
							 | 
							
								 | 
							
							              > | 
						
						
						
						
							 | 
							
								 | 
							
							                <h3>{filter.title}</h3> | 
						
						
						
						
							 | 
							
								 | 
							
							                {selectedFilters.includes(filter.id) && ( | 
						
						
						
						
							 | 
							
								 | 
							
							                  <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="w-11/12 border-b-4 border-gray-200"></div> | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							        <div className={`flex items-center w-full justify-center flex-col`}> | 
						
						
						
						
							 | 
							
								 | 
							
							          {books | 
						
						
						
						
							 | 
							
								 | 
							
							            ?.filter((itm) => selectedProductTypes.includes(itm.productType)) | 
						
						
						
						
							 | 
							
								 | 
							
							            .map((product, index) => ( | 
						
						
						
						
							 | 
							
								 | 
							
							              <div className="w-[90%]" key={`PRODUCT__${gameId}__${index}`}> | 
						
						
						
						
							 | 
							
								 | 
							
							                {(selectedProductTypes.includes(4) || | 
						
						
						
						
							 | 
							
								 | 
							
							                  selectedProductTypes.includes(7)) && ( | 
						
						
						
						
							 | 
							
								 | 
							
							                  <Product | 
						
						
						
						
							 | 
							
								 | 
							
							                    key={index} | 
						
						
						
						
							 | 
							
								 | 
							
							                    productsType={filter.productsType} | 
						
						
						
						
							 | 
							
								 | 
							
							                    product={product} | 
						
						
						
						
							 | 
							
								 | 
							
							                    index={Number(index)} | 
						
						
						
						
							 | 
							
								 | 
							
							                    productName={`${product?.name}`} | 
						
						
						
						
							 | 
							
								 | 
							
							                    productCat={`پایه ${grades[product?.gradeId]}`} | 
						
						
						
						
							 | 
							
								 | 
							
							                    productPrice={separate(product?.price)} | 
						
						
						
						
							 | 
							
								 | 
							
							                    // productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} | 
						
						
						
						
							 | 
							
								 | 
							
							                    numberOfRegards={160} | 
						
						
						
						
							 | 
							
								 | 
							
							                    productHolderBorder="" | 
						
						
						
						
							 | 
							
								 | 
							
							                    productHolderHoverBorder="shadow-md" | 
						
						
						
						
							 | 
							
								 | 
							
							                    teacher={product.vodTeacher} | 
						
						
						
						
							 | 
							
								 | 
							
							                    catId={gameId} | 
						
						
						
						
							 | 
							
								 | 
							
							                    userInfo={userInfo} | 
						
						
						
						
							 | 
							
								 | 
							
							                    onClick={() => { | 
						
						
						
						
							 | 
							
								 | 
							
							                      productClickhandler(product); | 
						
						
						
						
							 | 
							
								 | 
							
							                    }} | 
						
						
						
						
							 | 
							
								 | 
							
							                    btnOnClick={() => { | 
						
						
						
						
							 | 
							
								 | 
							
							                      AddToCartHandler(product); | 
						
						
						
						
							 | 
							
								 | 
							
							                    }} | 
						
						
						
						
							 | 
							
								 | 
							
							                  /> | 
						
						
						
						
							 | 
							
								 | 
							
							                )} | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> | 
						
						
						
						
							 | 
							
								 | 
							
							            ))} | 
						
						
						
						
							 | 
							
								 | 
							
							          {!selectedProductTypes.includes(4) && | 
						
						
						
						
							 | 
							
								 | 
							
							            !selectedProductTypes.includes(7) && | 
						
						
						
						
							 | 
							
								 | 
							
							            gameId !== 6 && ( | 
						
						
						
						
							 | 
							
								 | 
							
							              <div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded"> | 
						
						
						
						
							 | 
							
								 | 
							
							                <CgDanger className="text-4xl" /> | 
						
						
						
						
							 | 
							
								 | 
							
							                <div className="text-xl mt-4" style={{ direction: "rtl" }}> | 
						
						
						
						
							 | 
							
								 | 
							
							                  این بخش هنوز فعال نشده است. | 
						
						
						
						
							 | 
							
								 | 
							
							                </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> | 
						
						
						
						
							 | 
							
								 | 
							
							            )} | 
						
						
						
						
							 | 
							
								 | 
							
							          {gameId == 6 && ( | 
						
						
						
						
							 | 
							
								 | 
							
							            <div className="w-full p-8 py-10 flex flex-col  justify-between items-center  "> | 
						
						
						
						
							 | 
							
								 | 
							
							              <div className="w-full text-right mb-4"> | 
						
						
						
						
							 | 
							
								 | 
							
							                <h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1> | 
						
						
						
						
							 | 
							
								 | 
							
							                <p className="text-red26 text-sm"> | 
						
						
						
						
							 | 
							
								 | 
							
							                  لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید | 
						
						
						
						
							 | 
							
								 | 
							
							                </p> | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              <div className="flex w-full mb-4"> | 
						
						
						
						
							 | 
							
								 | 
							
							                <input | 
						
						
						
						
							 | 
							
								 | 
							
							                  placeholder="12,000,000" | 
						
						
						
						
							 | 
							
								 | 
							
							                  className="border border-red5B rounded-lg h-14 w-3/4 text-center rounded-l-none border-l-0 px-4 outline-none" | 
						
						
						
						
							 | 
							
								 | 
							
							                  value={separate(sharzhVal)} | 
						
						
						
						
							 | 
							
								 | 
							
							                  onChange={(e) => setSharzhVal(e.target.value)} | 
						
						
						
						
							 | 
							
								 | 
							
							                /> | 
						
						
						
						
							 | 
							
								 | 
							
							                <p className="border flex justify-center items-center border-red5B rounded-lg h-14 w-1/4 text-center rounded-r-none border-r-0 px-4"> | 
						
						
						
						
							 | 
							
								 | 
							
							                  ریال | 
						
						
						
						
							 | 
							
								 | 
							
							                </p> | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              <div className="flex w-full mb-4"> | 
						
						
						
						
							 | 
							
								 | 
							
							                <p className="border flex justify-center items-center border-red52 rounded-lg h-14 w-1/5 text-center rounded-l-none border-l-0 px-10"> | 
						
						
						
						
							 | 
							
								 | 
							
							                  بابت | 
						
						
						
						
							 | 
							
								 | 
							
							                </p> | 
						
						
						
						
							 | 
							
								 | 
							
							                <input | 
						
						
						
						
							 | 
							
								 | 
							
							                  placeholder="شارژ حساب" | 
						
						
						
						
							 | 
							
								 | 
							
							                  className="border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none" | 
						
						
						
						
							 | 
							
								 | 
							
							                /> | 
						
						
						
						
							 | 
							
								 | 
							
							              </div> | 
						
						
						
						
							 | 
							
								 | 
							
							              <button | 
						
						
						
						
							 | 
							
								 | 
							
							                className="cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14" | 
						
						
						
						
							 | 
							
								 | 
							
							                style={{ background: "rgba(211, 246, 255, 0.44)" }} | 
						
						
						
						
							 | 
							
								 | 
							
							              > | 
						
						
						
						
							 | 
							
								 | 
							
							                افزودن به سبد خرید | 
						
						
						
						
							 | 
							
								 | 
							
							              </button> | 
						
						
						
						
							 | 
							
								 | 
							
							            </div> | 
						
						
						
						
							 | 
							
								 | 
							
							          )} | 
						
						
						
						
							 | 
							
								 | 
							
							        </div> | 
						
						
						
						
							 | 
							
								 | 
							
							      </div> | 
						
						
						
						
							 | 
							
								 | 
							
							    ); | 
						
						
						
						
							 | 
							
								 | 
							
							  } | 
						
						
						
						
							 | 
							
								 | 
							
							}; | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							const mapStateToProps = (state) => ({ | 
						
						
						
						
							 | 
							
								 | 
							
							  isDark: state.publicApi.isDark, | 
						
						
						
						
							 | 
							
								 | 
							
							  isMobile: state.publicApi.isMobile, | 
						
						
						
						
							 | 
							
								 | 
							
							  books: state.book.list, | 
						
						
						
						
							 | 
							
								 | 
							
							  grades: state.publicApi.grades, | 
						
						
						
						
							 | 
							
								 | 
							
							  gradeFilterBooks: state.book.gradeFilterBooks, | 
						
						
						
						
							 | 
							
								 | 
							
							  selectedGrade: state.book.selectedGrade, | 
						
						
						
						
							 | 
							
								 | 
							
							  userInfo: state.user.status, | 
						
						
						
						
							 | 
							
								 | 
							
							}); | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							const mapDispatchToProps = { | 
						
						
						
						
							 | 
							
								 | 
							
							  getList: book.list, | 
						
						
						
						
							 | 
							
								 | 
							
							  gradeFilter: book.gradeFilter, | 
						
						
						
						
							 | 
							
								 | 
							
							  setHeaderOptions: publicApi.setHeaderOptions, | 
						
						
						
						
							 | 
							
								 | 
							
							  pushToCart: userProduct.add, | 
						
						
						
						
							 | 
							
								 | 
							
							  pushSchoolToCart: userProduct.addSchool, | 
						
						
						
						
							 | 
							
								 | 
							
							  getUserInfo: user.getProfile | 
						
						
						
						
							 | 
							
								 | 
							
							}; | 
						
						
						
						
							 | 
							
								 | 
							
							
 | 
						
						
						
						
							 | 
							
								 | 
							
							export default connect(mapStateToProps, mapDispatchToProps)(Services);
 | 
						
						
						
						
							 | 
							
								 | 
							
							
 |