|
|
import React, { useEffect, useState } from "react"; |
|
|
import { book, publicApi, userProduct } from "../../redux/actions"; |
|
|
import { connect } from "react-redux"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import Product from "../../components/Product"; |
|
|
// 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' |
|
|
|
|
|
const Services = ({ |
|
|
isMobile, |
|
|
books, |
|
|
getList, |
|
|
grades, |
|
|
gradeFilter, |
|
|
selectedGrade, |
|
|
gradeFilterBooks, |
|
|
setHeaderOptions, |
|
|
headerOptions, |
|
|
videos, |
|
|
pushToCart, |
|
|
}) => { |
|
|
|
|
|
const [filterCheck, setFilterCheck] = useState([false, false, false, false]); |
|
|
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: "", |
|
|
}); |
|
|
|
|
|
// const onChange = (name, value) => { |
|
|
// setFilter({ ...filter, [name]: value }); |
|
|
// }; |
|
|
|
|
|
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: "", |
|
|
}, |
|
|
]; |
|
|
|
|
|
const [selectedGames, setSelectedGames] = useState([]); |
|
|
const [gameId, setGameId] = useState(1); |
|
|
const chooseGame = (id) => { |
|
|
setGameId(id); |
|
|
}; |
|
|
if (!isMobile){ |
|
|
return ( |
|
|
<div |
|
|
className="flex items-start justify-between" |
|
|
style={{ width: "93.5%", direction: "rtl" }} |
|
|
> |
|
|
{popup ? ( |
|
|
<ServicePopUp |
|
|
content={popUpContent} |
|
|
closeOnClick={() => setPopUp(false)} |
|
|
/> |
|
|
) : null} |
|
|
<div |
|
|
className="w-3/4 flex flex-col justify-center " |
|
|
style={{ marginTop: "5.5%" }} |
|
|
> |
|
|
<div |
|
|
className="relative h-48 w-full border-b border-red82OP my-4 px-10" |
|
|
style={{ direction: "ltr" }} |
|
|
> |
|
|
{/* { |
|
|
services.map((item, index) => ( |
|
|
<div |
|
|
className="flex flex-col justify-center items-center transition-all duration-200 m-4 rounded-xl border-2 border-red82OP hover:cursor-pointer hover:bg-pinkF5" |
|
|
style={{ minWidth: '175px', height: '175px' }} |
|
|
onClick={() => setChecked(prevState => [...prevState, checked[index] = !checked[index]])} |
|
|
> |
|
|
|
|
|
{ |
|
|
checked[index] ? <div className="flex w-full px-4 " style={{ direction: 'ltr' }}> |
|
|
<div className="w-6 h-6 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 className="h-6"></div> |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<img src={item.image} className=" h-20 mb-4" /> |
|
|
<h2 className="w-full text-md text-gray-400 font-bold">{item.title}</h2> |
|
|
</div> |
|
|
)) |
|
|
} */} |
|
|
<Games |
|
|
selectedGames={selectedGames} |
|
|
gameId={gameId} |
|
|
chooseGame={chooseGame} |
|
|
/> |
|
|
</div> |
|
|
{/* filters */} |
|
|
{gameId != 6 && <div className="flex mx-2 my-4 justify-center"> |
|
|
<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> |
|
|
</div> |
|
|
<div className="flex items-center mx-4 pl-6 border-l-2 border-gray-300"> |
|
|
<div |
|
|
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer |
|
|
hover:border-red52 hover:text-red52 hover:bg-pinkF5 |
|
|
${ |
|
|
filterCheck[0] |
|
|
? "border-red52 text-red52 bg-pinkF5" |
|
|
: "border-gray200 text-gray-400" |
|
|
}`} |
|
|
onClick={(prevState) => |
|
|
setFilterCheck([ |
|
|
...prevState, |
|
|
(filterCheck[0] = !filterCheck[0]), |
|
|
]) |
|
|
} |
|
|
> |
|
|
<h3>آنلاین</h3> |
|
|
{filterCheck[0] && ( |
|
|
<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 |
|
|
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer |
|
|
hover:border-red52 hover:text-red52 hover:bg-pinkF5 |
|
|
${ |
|
|
filterCheck[0] |
|
|
? "border-red52 text-red52 bg-pinkF5" |
|
|
: "border-gray200 text-gray-400" |
|
|
}`} |
|
|
onClick={(prevState) => |
|
|
setFilterCheck([ |
|
|
...prevState, |
|
|
(filterCheck[0] = !filterCheck[0]), |
|
|
]) |
|
|
} |
|
|
> |
|
|
<h3>حضوری</h3> |
|
|
{filterCheck[0] && ( |
|
|
<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"> |
|
|
<select className="bg-white border border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52"> |
|
|
{services.map((item, index) => ( |
|
|
<option key={`Grade__${index}`}>{item.title}</option> |
|
|
))} |
|
|
</select> |
|
|
</div> |
|
|
</div>} |
|
|
|
|
|
<div |
|
|
className={`flex ${ |
|
|
gameId == 2 && "flex-col" |
|
|
} items-center w-full justify-center flex-wrap `} |
|
|
> |
|
|
{books?.map((product, index) => ( |
|
|
<Link |
|
|
// to={"/class/" + product?.id} |
|
|
to="#" |
|
|
key={`PRODUCT__${gameId}__${index}`} |
|
|
onClick={() => { |
|
|
setPopUpContent({ |
|
|
id: gameId, |
|
|
title: product?.name, |
|
|
video: "", |
|
|
teacher: product.vodTeacher, |
|
|
description: |
|
|
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت", |
|
|
price: product.product[0].price, |
|
|
classHour: 21, |
|
|
classMinute: 56, |
|
|
image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg', |
|
|
examCont : [ |
|
|
{ |
|
|
title: 'بخش اول آزمون ' + product.name, |
|
|
date: '۱۴۰۰/۱۲/۱۳', |
|
|
time: '۱۴:۴۶', |
|
|
numberOfQ: '۱۸', |
|
|
price: 10000 |
|
|
}, |
|
|
{ |
|
|
title: 'بخش دوم آزمون ' + product.name, |
|
|
date: '۱۴۰۰/۱۲/۱۴', |
|
|
time: '۱۴:۴۶', |
|
|
numberOfQ: '۱۸', |
|
|
price: 10000 |
|
|
}, |
|
|
{ |
|
|
title: 'بخش سوم آزمون ' + product.name, |
|
|
date: '۱۴۰۰/۱۲/۱۵', |
|
|
time: '۱۴:۴۶', |
|
|
numberOfQ: '۳۲', |
|
|
price: 250000 |
|
|
}, |
|
|
] |
|
|
}); |
|
|
setPopUp(true); |
|
|
console.log(gameId) |
|
|
}} |
|
|
> |
|
|
{/* {console.log(product)} */} |
|
|
<Product |
|
|
key={index} |
|
|
productsType={filter.productsType} |
|
|
product={product} |
|
|
index={Number(index)} |
|
|
productName={`${product?.name}`} |
|
|
productCat={`پایه ${grades[product?.gradeId]}`} |
|
|
productPrice={product.product[0].price} |
|
|
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
|
|
numberOfRegards={160} |
|
|
productHolderBorder="" |
|
|
productHolderHoverBorder="shadow-md" |
|
|
teacher={product.vodTeacher} |
|
|
catId={gameId} |
|
|
btnOnClick={() => |
|
|
pushToCart({ |
|
|
productId: product?.productId, |
|
|
userId: product?.userId, |
|
|
count: 1, |
|
|
}) |
|
|
} |
|
|
/> |
|
|
</Link> |
|
|
))} |
|
|
{ |
|
|
gameId == 6 && |
|
|
<div className="w-3/4 p-8 py-10 flex mt-10 justify-between items-center border-2 rounded-xl border-red52 " > |
|
|
|
|
|
<div className="w-1/5"> |
|
|
<h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1> |
|
|
<p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p> |
|
|
</div> |
|
|
<div className="flex"> |
|
|
<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" |
|
|
/><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"> |
|
|
<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-10">بابت</p> |
|
|
<input |
|
|
placeholder="شارژ حساب" |
|
|
className="border border-red52 rounded-lg h-12 w-60 text-center 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">افزودن به اعتبار</button> |
|
|
|
|
|
</div> |
|
|
} |
|
|
</div> |
|
|
</div> |
|
|
{!isMobile && <div className="w-1/4 fixed left-0" style={{ height: "100vh" }}> |
|
|
<ShoppingCart /> |
|
|
</div> } |
|
|
</div> |
|
|
);} |
|
|
// Mobile Version |
|
|
else{ |
|
|
return( |
|
|
<div className="flex flex-col items-center mt-16 mb-40 rtl"> |
|
|
|
|
|
<Games |
|
|
selectedGames={selectedGames} |
|
|
gameId={gameId} |
|
|
chooseGame={chooseGame} |
|
|
/> |
|
|
<div className="w-11/12 border-b border-gray-200"></div> |
|
|
|
|
|
{ |
|
|
gameId !== 6 && <div className="flex items-center mx-4 my-4"> |
|
|
<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> |
|
|
<div |
|
|
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer |
|
|
hover:border-red52 hover:text-red52 hover:bg-pinkF5 |
|
|
${ |
|
|
filterCheck[0] |
|
|
? "border-red52 text-red52 bg-pinkF5" |
|
|
: "border-gray200 text-gray-400" |
|
|
}`} |
|
|
onClick={(prevState) => |
|
|
setFilterCheck([ |
|
|
...prevState, |
|
|
(filterCheck[0] = !filterCheck[0]), |
|
|
]) |
|
|
} |
|
|
> |
|
|
<h3>آنلاین</h3> |
|
|
{filterCheck[0] && ( |
|
|
<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 |
|
|
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer |
|
|
hover:border-red52 hover:text-red52 hover:bg-pinkF5 |
|
|
${ |
|
|
filterCheck[1] |
|
|
? "border-red52 text-red52 bg-pinkF5" |
|
|
: "border-gray200 text-gray-400" |
|
|
}`} |
|
|
onClick={(prevState) => |
|
|
setFilterCheck([ |
|
|
...prevState, |
|
|
(filterCheck[0] = !filterCheck[0]), |
|
|
]) |
|
|
} |
|
|
> |
|
|
<h3>حضوری</h3> |
|
|
{filterCheck[0] && ( |
|
|
<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 border-gray-200"></div> |
|
|
|
|
|
<div |
|
|
className={`flex items-center w-full justify-center flex-col `} |
|
|
> |
|
|
{books?.map((product, index) => ( |
|
|
<Link |
|
|
// to={"/class/" + product?.id} |
|
|
to="#" |
|
|
key={`PRODUCT__${gameId}__${index}`} |
|
|
onClick={() => { |
|
|
setPopUpContent({ |
|
|
id: gameId, |
|
|
title: product?.name, |
|
|
video: "", |
|
|
teacher: product.vodTeacher, |
|
|
description: |
|
|
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت", |
|
|
price: product.product[0].price, |
|
|
classHour: 21, |
|
|
classMinute: 56, |
|
|
image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg', |
|
|
examCont : [ |
|
|
{ |
|
|
title: 'بخش اول آزمون ' + product.name, |
|
|
date: '۱۴۰۰/۱۲/۱۳', |
|
|
time: '۱۴:۴۶', |
|
|
numberOfQ: '۱۸', |
|
|
price: 10000 |
|
|
}, |
|
|
{ |
|
|
title: 'بخش دوم آزمون ' + product.name, |
|
|
date: '۱۴۰۰/۱۲/۱۴', |
|
|
time: '۱۴:۴۶', |
|
|
numberOfQ: '۱۸', |
|
|
price: 10000 |
|
|
}, |
|
|
{ |
|
|
title: 'بخش سوم آزمون ' + product.name, |
|
|
date: '۱۴۰۰/۱۲/۱۵', |
|
|
time: '۱۴:۴۶', |
|
|
numberOfQ: '۳۲', |
|
|
price: 250000 |
|
|
}, |
|
|
] |
|
|
}); |
|
|
setPopUp(true); |
|
|
// console.log(gameId) |
|
|
}} |
|
|
> |
|
|
{/* {console.log(product)} */} |
|
|
<Product |
|
|
key={index} |
|
|
productsType={filter.productsType} |
|
|
product={product} |
|
|
index={Number(index)} |
|
|
productName={`${product?.name}`} |
|
|
productCat={`پایه ${grades[product?.gradeId]}`} |
|
|
productPrice={product.product[0].price} |
|
|
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} |
|
|
numberOfRegards={160} |
|
|
productHolderBorder="" |
|
|
productHolderHoverBorder="shadow-md" |
|
|
teacher={product.vodTeacher} |
|
|
catId={gameId} |
|
|
btnOnClick={() => |
|
|
pushToCart({ |
|
|
productId: product?.productId, |
|
|
userId: product?.userId, |
|
|
count: 1, |
|
|
}) |
|
|
} |
|
|
/> |
|
|
</Link> |
|
|
))} |
|
|
{ |
|
|
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" |
|
|
/><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, |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = { |
|
|
getList: book.list, |
|
|
gradeFilter: book.gradeFilter, |
|
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
|
pushToCart: userProduct.add, |
|
|
}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Services);
|
|
|
|