@ -4,9 +4,9 @@ import { connect } from "react-redux";
import { Link } from "react-router-dom" ; import { Link } from "react-router-dom" ;
import Product from "../../components/Product" ; import Product from "../../components/Product" ;
import { CgDanger } from "react-icons/cg" ; import { CgDanger } from "react-icons/cg" ;
import { AiOutlinePlus , AiFillDelete } from "react-icons/ai" ;
// import ScrollContainer from 'react-indiana-drag-scroll'
// import ScrollContainer from 'react-indiana-drag-scroll'
import img1 from "../../assets/img/Group 1344.svg" ; import img1 from "../../assets/img/Group 1344.svg" ;
import img2 from "../../assets/img/Group 1345.svg" ; import img2 from "../../assets/img/Group 1345.svg" ;
import img3 from "../../assets/img/Group 1349.svg" ; import img3 from "../../assets/img/Group 1349.svg" ;
@ -18,9 +18,7 @@ import ServicePopUp from "./service";
import Games from "../dashboard2/Games" ; import Games from "../dashboard2/Games" ;
// import Packages from "../dashboard2/Packages";
// import Packages from "../dashboard2/Packages";
import "./index.css" ;
import './index.css'
import separate from "../../utils/separate" ; import separate from "../../utils/separate" ;
const Services = ( { const Services = ( {
@ -35,20 +33,19 @@ const Services = ({
headerOptions , headerOptions ,
videos , videos ,
pushToCart , pushToCart ,
pushSchoolToCart pushSchoolToCart ,
} ) => { } ) => {
const [ filterCheck , setFilterCheck ] = useState ( [ const [ filterCheck , setFilterCheck ] = useState ( [
{ {
id : 1 , id : 1 ,
title : 'حضوری' , title : "حضوری" ,
} , } ,
{ {
id : 2 , id : 2 ,
title : 'آنلاین' , title : "آنلاین" ,
} , } ,
] ) ; ] ) ;
const [ selectedFilters , setSelectedFilters ] = useState ( [ ] ) const [ selectedFilters , setSelectedFilters ] = useState ( [ ] ) ;
const [ filter , setFilter ] = useState ( { const [ filter , setFilter ] = useState ( {
search : "" , search : "" ,
grade : "" , grade : "" ,
@ -66,7 +63,7 @@ const Services = ({
classHour : "" , classHour : "" ,
classMinute : "" , classMinute : "" ,
} ) ; } ) ;
const [ sharzhVal , setSharzhVal ] = useState ( '' ) ; const [ sharzhVal , setSharzhVal ] = useState ( "" ) ;
const [ selectedProductTypes , setSelectedProductTypes ] = useState ( [ 7 ] ) ; const [ selectedProductTypes , setSelectedProductTypes ] = useState ( [ 7 ] ) ;
// const onChange = (name, value) => {
// const onChange = (name, value) => {
// setFilter({ ...filter, [name]: value });
// setFilter({ ...filter, [name]: value });
@ -119,9 +116,51 @@ const Services = ({
const [ gameId , setGameId ] = useState ( 5 ) ; const [ gameId , setGameId ] = useState ( 5 ) ;
const chooseGame = ( id ) => { const chooseGame = ( id ) => {
setGameId ( id ) ; setGameId ( id ) ;
console . log ( selectedProductTypes ) console . log ( selectedProductTypes ) ;
} ; } ;
console . log ( gameId ) console . log ( gameId ) ;
//-------------------------------------
const [ fake , setFake ] = useState ( 0 ) ;
const [ paymentList , setPaymentList ] = useState ( [
{
id : 1 ,
amount : null ,
status : 4 ,
type : 1 ,
} ,
] ) ;
const changeType = ( e , index ) => {
let newList = paymentList ;
newList [ index ] = { ... newList [ index ] , type : Number ( e . target . value ) } ;
console . log ( "g:" )
console . log ( newList [ index ] ) ;
setPaymentList ( newList ) ;
setFake ( fake + 1 ) ;
}
const [ showPaymentBox , setShowPaymentBox ] = useState ( false ) ;
const addPaymentHandler = ( ) => {
let newList = paymentList ;
newList . push ( {
id : newList . length + 1 ,
amount : null ,
status : 4 ,
type : 1 ,
} ) ;
setPaymentList ( newList ) ;
setFake ( fake + 1 ) ;
}
const deletePayment = ( index ) => {
let newList = [ ] ;
for ( let i = 0 ; i < paymentList . length ; i ++ ) {
if ( i !== index ) {
newList . push ( paymentList [ i ] ) ;
}
}
setPaymentList ( newList ) ;
setFake ( fake + 1 ) ;
}
//-==========================================================
if ( ! isMobile ) { if ( ! isMobile ) {
return ( return (
< div < div
@ -317,7 +356,7 @@ const Services = ({
// to={"/class/" + product?.id}
// to={"/class/" + product?.id}
className = "w-[30%]" className = "w-[30%]"
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` } key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
style = { gameId === 5 ? { width : "100%" } : null } style = { gameId === 5 ? { width : "100%" } : null }
> >
{ /* {console.log(product)} */ } { /* {console.log(product)} */ }
{ ( selectedProductTypes . includes ( 4 ) || { ( selectedProductTypes . includes ( 4 ) ||
@ -340,38 +379,16 @@ const Services = ({
setPopUpContent ( { setPopUpContent ( {
id : gameId , id : gameId ,
title : product ? . name , title : product ? . name ,
video : "" , video : product ? . fileId ,
teacher : product ? . vodTeacher , teacher : product ? . teacherName ,
description : description : product ? . description ,
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : gameId == 2 ? 0 : product ? . price , price : gameId == 2 ? 0 : product ? . price ,
classHour : 21 , classHour : product ? . duration ,
classMinute : 56 , classMinute : "" ,
image : image :
"https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" , "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" ,
examCont : [ examCont : [ ] ,
{ type : product ? . productType ,
title : "بخش اول آزمون " + product . name ,
date : "۱۴۰۰/۱۲/۱۳" ,
time : "۱۴:۴۶" ,
numberOfQ : "۱۸" ,
price : 10000 ,
} ,
{
title : "بخش دوم آزمون " + product . name ,
date : "۱۴۰۰/۱۲/۱۴" ,
time : "۱۴:۴۶" ,
numberOfQ : "۱۸" ,
price : 10000 ,
} ,
{
title : "بخش سوم آزمون " + product . name ,
date : "۱۴۰۰/۱۲/۱۵" ,
time : "۱۴:۴۶" ,
numberOfQ : "۳۲" ,
price : 250000 ,
} ,
] ,
} ) ; } ) ;
if ( gameId !== 5 ) { if ( gameId !== 5 ) {
setPopUp ( true ) ; setPopUp ( true ) ;
@ -401,8 +418,9 @@ const Services = ({
) } ) }
< / d i v > < / d i v >
) ) } ) ) }
{ ( ! selectedProductTypes . includes ( 4 ) && { ! selectedProductTypes . includes ( 4 ) &&
! selectedProductTypes . includes ( 7 ) && gameId !== 6 ) && ( ! selectedProductTypes . includes ( 7 ) &&
gameId !== 6 && (
< div className = "w-full h-28 flex flex-col items-center justify-center mx-auto rounded" > < div className = "w-full h-28 flex flex-col items-center justify-center mx-auto rounded" >
< CgDanger className = "text-4xl" / > < CgDanger className = "text-4xl" / >
< div className = "text-xl mt-4" style = { { direction : "rtl" } } > < div className = "text-xl mt-4" style = { { direction : "rtl" } } >
@ -447,10 +465,154 @@ const Services = ({
< / d i v > < / d i v >
{ /* --------------left-part------------------------------------- */ } { /* --------------left-part------------------------------------- */ }
{ ! isMobile && ( { ! isMobile && (
< div className = "w-[23.5%] left-0" style = { { height : "100vh" } } > < div className = "w-[23.5%] left-0 " style = { { height : "100vh" } } >
< ShoppingCart / > < ShoppingCart / >
< / d i v > < / d i v >
) } ) }
{ /* --------------payment-box------------------------------------- */ }
< div className = "w-[93.5vw] h-[93.5vh] bg-black fixed top-[6.5%] left-0 backdrop-blur-md bg-[#0000004D] flex items-center justify-center" >
< div className = "w-[80%] h-[80%] bg-white rounded-lg px-8 py-2" >
< div className = "w-full text-right text-2xl text-[#DF1452]" >
پرداخت و ثبت تراکنش ها
< / d i v >
< div className = "payment-container w-full mt-6" >
{ paymentList . map ( ( item , index ) => (
< div
key = { index }
className = "w-full mb-2 flex justify-between text-black"
>
< select
className = "w-[17%] h-10 rounded outline-0 border text-black px-1 py-0"
onChange = { ( e ) => changeType ( e , index ) }
>
{ /* <option value={null}>نوع پرداخت</option> */ }
< option value = { 1 } > پرداخت اینترنتی < / o p t i o n >
< option value = { 2 } > کارت به کارت < / o p t i o n >
{ / * < o p t i o n v a l u e = { 3 } > پ ر د ا خ ت ب ا چ ک < / o p t i o n >
< option value = { 4 } > پرداخت نقدی < /option> */ }
< / s e l e c t >
{ /* ------------ */ }
< div className = "w-[58%]" >
< div className = "w-full h-10 flex box-border rounded overflow-hidden border" >
< div className = "w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r" >
مبلغ
< / d i v >
< input
type = "text"
name = "payment-box-amount-input"
id = "payment-box-amount-input"
className = "w-[70%] h-10 px-1 outline-0 text-center"
/ >
< div className = "w-[10%] h-full flex items-center justify-center text-sm" >
تومان
< / d i v >
< / d i v >
{ /* - */ }
{ item . type === 2 && (
< div className = "w-full h-10 flex box-border rounded overflow-hidden border mt-2" >
< div className = "w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r" >
شماره کارت
< / d i v >
< input
type = "text"
name = "payment-box-amount-input"
id = "payment-box-amount-input"
className = "w-[80%] h-10 px-1 outline-0 text-center"
/ >
< / d i v >
) }
{ /* - */ }
{ item . type === 2 && (
< div className = "w-full h-10 flex items-center justify-between mt-1" >
< div className = "w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2" >
< div className = "w-[40%] bg-[#000] flex items-center justify-center text-white rounded-r text-sm" >
تاریخ پرداخت
< / d i v >
< div className = "w-[60%] h-full flex items-center justify-between p-1" >
< input
type = "text"
className = "w-[29%] h-full rounded border text-center text-sm"
/ >
< div className = "h-full w-[5%] flex items-center justify-center" >
/
< / d i v >
< input
type = "text"
className = "w-[29%] h-full rounded border text-center text-sm"
/ >
< div className = "h-full w-[5%] flex items-center justify-center" >
/
< / d i v >
< input
type = "text"
className = "w-[29%] h-full rounded border text-center text-sm"
/ >
< / d i v >
< / d i v >
{ /* ---- */ }
< div className = "w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2" >
< div className = "w-[40%] bg-[#000] flex items-center justify-center text-white rounded-r text-sm" >
ساعت پرداخت
< / d i v >
< div className = "w-[60%] h-full flex justify-between items-center p-1" >
< input
type = "text"
className = "w-[45%] h-full rounded border text-center text-sm"
/ >
< div className = "h-full w-[5%] flex items-center justify-center" >
:
< / d i v >
< input
type = "text"
className = "w-[45%] h-full rounded border text-center text-sm"
/ >
< / d i v >
< / d i v >
< / d i v >
) }
{ /* - */ }
{ item . type === 2 && (
< div className = "w-full h-10 flex box-border rounded overflow-hidden border mt-2" >
< div className = "w-1/5 bg-[#000] flex items-center justify-center text-white rounded-r" >
شماره پیگیری
< / d i v >
< input
type = "text"
name = "payment-box-amount-input"
id = "payment-box-amount-input"
className = "w-[80%] h-10 px-1 outline-0 text-center"
/ >
< / d i v >
) }
< / d i v >
{ /* ------------------ */ }
< div className = "w-[17%] h-10" >
{ item . type === 1 && (
< div className = "w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer" >
پرداخت
< / d i v >
) }
{ item . type === 2 && (
< div className = "w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer" >
ثبت پرداخت
< / d i v >
) }
< / d i v >
{ /* ------------------ */ }
< div className = "w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white" style = { index === 0 ? { pointerEvents : "none" , filter : "grayscale(100%)" } : null } onClick = { ( ) => deletePayment ( index ) } >
< AiFillDelete className = "text-xl text-white" / >
< / d i v >
< / d i v >
) ) }
< / d i v >
{ / * < d i v
className = "w-10 h-10 rounded-full mt-4 border mx-auto border-[#DF1452] cursor-pointer flex items-center justify-center"
onClick = { addPaymentHandler }
>
< AiOutlinePlus className = "text-2xl text-[#DF1452]" / >
< /div> */ }
< / d i v >
< / d i v >
< / d i v > < / d i v >
) ; ) ;
} }
@ -576,10 +738,7 @@ const Services = ({
{ books { books
? . filter ( ( itm ) => selectedProductTypes . includes ( itm . productType ) ) ? . filter ( ( itm ) => selectedProductTypes . includes ( itm . productType ) )
. map ( ( product , index ) => ( . map ( ( product , index ) => (
< div < div className = "bg-black" key = { ` PRODUCT__ ${ gameId } __ ${ index } ` } >
className = "bg-black"
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
>
{ selectedProductTypes . includes ( 4 ) && ( { selectedProductTypes . includes ( 4 ) && (
< Product < Product
key = { index } key = { index }
@ -700,7 +859,6 @@ const Services = ({
< / d i v > < / d i v >
) ; ) ;
} }
} ; } ;
const mapStateToProps = ( state ) => ( { const mapStateToProps = ( state ) => ( {
