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.

702 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'
3 years ago
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";
3 years ago
import './index.css'
const Services = ({
isMobile,
3 years ago
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({
3 years ago
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: "",
},
];
3 years ago
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
3 years ago
className="relative h-48 w-full border-b border-red82OP my-4 px-10"
style={{ direction: "ltr" }}
>
{/* {
3 years ago
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" />
3 years ago
</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 */}
3 years ago
{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
3 years ago
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
3 years ago
</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
3 years ago
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
3 years ago
</svg>
</div>
3 years ago
</div>
3 years ago
)}
</div>
3 years ago
</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({
3 years ago
id: gameId,
title: product?.name,
video: "",
teacher: product.vodTeacher,
description:
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار میگیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
price: product.product[0].price,
classHour: 21,
classMinute: 56,
3 years ago
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
},
]
});
3 years ago
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>
3 years ago
{!isMobile && <div className="w-1/4 fixed left-0" style={{ height: "100vh" }}>
<ShoppingCart />
3 years ago
</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);