You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

701 lines
26 KiB

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);