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.
 
 
 

581 lines
21 KiB

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