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.
 
 
 

409 lines
14 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 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";
const Services = ({
isMobile,
books,
getList,
grades,
gradeFilter,
selectedGrade,
gradeFilterBooks,
setHeaderOptions,
headerOptions,
videos,
pushToCart,
}) => {
const [checked, setChecked] = useState([
false,
false,
false,
false,
false,
false,
]);
const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
const [filter, setFilter] = useState({
search: "",
grade: "",
productsType: "کتاب",
});
const [popup, setPopUp] = useState(false);
const [popUpContent, setPopUpContent] = useState({
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);
};
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 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" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="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 */}
<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"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="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"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="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"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="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"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
)}
</div>
</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[2]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
>
<h3>دختران</h3>
{filterCheck[2] && (
<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"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="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[3]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
>
<h3>پسران</h3>
{filterCheck[3] && (
<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"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="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="#"
onClick={() => {
setPopUpContent({
title: product?.name,
video: "",
teacher: product.vodTeacher,
description:
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
price: product.product[0].price,
classHour: 21,
classMinute: 56,
});
setPopUp(true);
}}
>
{/* {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>
))}
</div>
</div>
<div className="w-1/4 fixed left-0" style={{ height: "100vh" }}>
<ShoppingCart />
</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);