@ -3,6 +3,7 @@ import { book, publicApi, userProduct } from "../../redux/actions";
import { connect } from "react-redux" ; 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 ScrollContainer from 'react-indiana-drag-scroll'
// import ScrollContainer from 'react-indiana-drag-scroll'
@ -66,7 +67,7 @@ const Services = ({
classMinute : "" , classMinute : "" ,
} ) ; } ) ;
const [ sharzhVal , setSharzhVal ] = useState ( '' ) ; const [ sharzhVal , setSharzhVal ] = useState ( '' ) ;
const [ selectedProductTypes , setSelectedProductTypes ] = useState ( [ 1 ] ) ; const [ selectedProductTypes , setSelectedProductTypes ] = useState ( [ 7 ] ) ;
// const onChange = (name, value) => {
// const onChange = (name, value) => {
// setFilter({ ...filter, [name]: value });
// setFilter({ ...filter, [name]: value });
// };
// };
@ -112,9 +113,10 @@ const Services = ({
role : "" , role : "" ,
} , } ,
] ; ] ;
console . log ( "book---------)))))))))))))))))))))-------------------" ) ;
console . log ( books ) ;
const [ selectedGames , setSelectedGames ] = useState ( [ ] ) ; const [ selectedGames , setSelectedGames ] = useState ( [ ] ) ;
const [ gameId , setGameId ] = useState ( 1 ) ; const [ gameId , setGameId ] = useState ( 5 ) ;
const chooseGame = ( id ) => { const chooseGame = ( id ) => {
setGameId ( id ) ; setGameId ( id ) ;
console . log ( selectedProductTypes ) console . log ( selectedProductTypes )
@ -124,166 +126,142 @@ const Services = ({
return ( return (
< div < div
className = "flex items-start justify-between" className = "flex items-start justify-between"
style = { { width : "93.5%" , direction : "rtl" , height : '100vh' } } style = { { width : "93.5%" , direction : "rtl" , height : "100vh" } }
> >
{ popup ? ( { popup ? (
< ServicePopUp < ServicePopUp
content = { popUpContent } content = { popUpContent }
closeOnClick = { ( ) => setPopUp ( false ) } closeOnClick = { ( ) => setPopUp ( false ) }
sendPrice = { val => setPopUpContent ( { ... popUpContent , price : popUpContent . price + val } ) } sendPrice = { ( val ) =>
setPopUpContent ( {
... popUpContent ,
price : popUpContent . price + val ,
} )
}
/ > / >
) : null } ) : null }
< div < div
className = "w-3/4 flex flex-col justify-center " className = "w-[76.5%] h-[100vh] flex flex-col justify-center pt-[3.5%] "
style = { { paddingTop : '5.5%' , height : '100vh' } } // style={{ paddingTop:'5.5%', height: '100vh' }}
> >
< div < div
className = "h-48 w-full border-b border-red82OP my-4 px-10 " className = "h-48 w-full border-b border-red82OP my-4 px-6 "
style = { { direction : "ltr" } } 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" / >
< / s v g >
< / d i v >
< / d i v > : < d i v c l a s s N a m e = " h - 6 " > < / d i v >
}
< img src = { item . image } className = " h-20 mb-4" / >
< h2 className = "w-full text-md text-gray-400 font-bold" > { item . title } < / h 2 >
< / d i v >
) )
} * / }
< Games < Games
selectedGames = { selectedGames } selectedGames = { selectedGames }
gameId = { gameId } gameId = { gameId }
chooseGame = { chooseGame } chooseGame = { chooseGame }
setTypes = { val => setSelectedProductTypes ( val ) } setTypes = { ( val ) => setSelectedProductTypes ( val ) }
/ > / >
< / d i v > < / d i v >
{ /* filters */ } { /* filters */ }
{ gameId != 6 && < div className = "flex mx-10 my-4 justify-start" > { gameId != 6 && (
< div className = "flex items-center " > < div className = "flex mx-6 justify-start" >
< svg < div className = "flex items-center " >
xmlns = "http://www.w3.org/2000/svg" < svg
width = "40" xmlns = "http://www.w3.org/2000/svg"
height = "40" width = "40"
viewBox = "0 0 14.378 14.378" 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)" > < g
< path id = "vuesax_linear_filter-tick"
id = "Vector" data - name = "vuesax/linear/filter-tick"
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(-620 -700)"
transform = "translate(7.267 5.991)" >
fill = "none" < g id = "filter-tick" transform = "translate(620 700)" >
stroke = "#696969" < path
strokeLinecap = "round" id = "Vector"
strokeLinejoin = "round" 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"
strokeWidth = "0.6" transform = "translate(7.267 5.991)"
/ > fill = "none"
< path stroke = "#696969"
id = "Vector-2" strokeLinecap = "round"
data - name = "Vector" strokeLinejoin = "round"
d = "M0,.7l.7.7L2.217,0" strokeWidth = "0.6"
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 < path
id = "Vector-4 " id = "Vector-2"
data - name = "Vector" 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" d = "M0,.7l.7.7L2.217,0"
transform = "translate(9.004 8.136)"
fill = "none" fill = "none"
stroke = "#696969" stroke = "#696969"
strokeLinecap = "round" strokeLinecap = "round"
strokeLinejoin = "round" strokeLinejoin = "round"
strokeWidth = "0.6" strokeWidth = "0.6"
/ > / >
< / g > < path
< / g > id = "Vector-3"
< / g > data - name = "Vector"
< / s v g > d = "M0,0H14.378V14.378H0Z"
< / d i v > transform = "translate(14.378 14.378) rotate(180)"
< div className = "flex items-center mx-6 pl-6 border-l-2 border-gray-300" >
{
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 } < / h 3 >
{ 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" fill = "none"
xmlns = "http://www.w3.org/2000/svg" opacity = "0"
> / >
< g id = "Group" transform = "translate(1.983 1.198)" >
< path < path
d = "M7.75 12L10.58 14.83L16.25 9.17004" id = "Vector-4"
stroke = "#fff" data - name = "Vector"
strokeWidth = "1.5" 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" strokeLinecap = "round"
strokeLinejoin = "round" strokeLinejoin = "round"
strokeWidth = "0.6"
/ > / >
< / s v g > < / g >
< / d i v > < / g >
< / d i v > < / g >
< / s v g >
) }
< / d i v > < / d i v >
) ) < div className = "flex items-center mx-6 pl-6 border-l-2 border-gray-300" >
} { filterCheck . map ( ( filter ) => (
{ / * < d i v < 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 } < / h 3 >
{ 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"
/ >
< / s v g >
< / d i v >
< / d i v >
) }
< / d i v >
) ) }
{ / * < d i v
className = { ` flex w-32 border-2 p-2 mx-2 px-4 justify-center items-center rounded-md cursor-pointer
className = { ` flex w-32 border-2 p-2 mx-2 px-4 justify-center items-center rounded-md cursor-pointer
hover : border - red52 hover : text - red52 hover : bg - pinkF5
hover : border - red52 hover : text - red52 hover : bg - pinkF5
$ { filterCheck == 'Physical' $ { filterCheck == 'Physical'
@ -319,144 +297,160 @@ const Services = ({
) } ) }
< /div> */ } < /div> */ }
< / d i v > < / d i v >
< div className = "flex items-center mx-4 pl-6" > < div className = "flex items-center mx-4 pl-6" >
< select className = "bg-white border-2 border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52" > < select className = "bg-white border-2 border-solid border-gray-300 w-72 p-3 rounded-lg text-gray-400 outline-red52" >
{ services . map ( ( item , index ) => ( { services . map ( ( item , index ) => (
< option key = { ` Grade__ ${ index } ` } > { item . title } < / o p t i o n > < option key = { ` Grade__ ${ index } ` } > { item . title } < / o p t i o n >
) ) } ) ) }
< / s e l e c t > < / s e l e c t >
< / d i v >
< / d i v > < / d i v >
< / d i v > } ) }
< div < div className = "flex w-full overflow-x-hidden overflow-scroll flex-wrap h-full gap-x-[5%] px-6" >
className = { ` flex
{ books
} w - full justify - center overflow - x - hidden overflow - scroll flex - wrap h - full ` }
? . filter ( ( itm ) => selectedProductTypes . includes ( itm . productType ) )
> . map ( ( product , index ) => (
{ books ? . filter ( itm => selectedProductTypes . includes ( itm . productType ) ) . map ( ( product , index ) => ( < div
< div // to={"/class/" + product?.id}
// to={"/class/" + product?.id}
className = "w-[30%]"
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` } style = { gameId === 5 ? { width : "100%" } : null }
>
{ /* {console.log(product)} */ }
> { ( selectedProductTypes . includes ( 4 ) ||
{ /* {console.log(product)} */ } selectedProductTypes . includes ( 7 ) ) && (
< Product < Product
key = { index } key = { index }
productsType = { filter . productsType } productsType = { filter . productsType }
product = { product } product = { product }
index = { Number ( index ) } index = { Number ( index ) }
productName = { ` ${ product ? . name } ` } productName = { ` ${ product ? . name } ` }
productCat = { ` پایه ${ grades [ product ? . gradeId ] } ` } productCat = { ` پایه ${ grades [ product ? . gradeId ] } ` }
productPrice = { separate ( product ? . price ) } productPrice = { separate ( product ? . price ) }
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards = { 160 } numberOfRegards = { 160 }
productHolderBorder = "" productHolderBorder = ""
productHolderHoverBorder = "shadow-md" productHolderHoverBorder = "shadow-md"
teacher = { product . vodTeacher } teacher = { product . vodTeacher }
catId = { gameId } catId = { gameId }
onClick = { ( ) => { onClick = { ( ) => {
setPopUpContent ( { setPopUpContent ( {
id : gameId , id : gameId ,
title : product ? . name , title : product ? . name ,
video : "" , video : "" ,
teacher : product ? . vodTeacher , teacher : product ? . vodTeacher ,
description : description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می , "در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : gameId == 2 ? 0 : product ? . price , price : gameId == 2 ? 0 : product ? . price ,
classHour : 21 , classHour : 21 ,
classMinute : 56 , classMinute : 56 ,
image : 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg' , image :
examCont : [ "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" ,
{ examCont : [
title : 'بخش اول آزمون ' + product . name , {
date : '۱۴۰۰/۱۲/۱۳' , title : "بخش اول آزمون " + product . name ,
time : '۱۴:۴۶' , date : "۱۴۰۰/۱۲/۱۳" ,
numberOfQ : '۱۸' , time : "۱۴:۴۶" ,
price : 10000 numberOfQ : "۱۸" ,
} , price : 10000 ,
{ } ,
title : 'بخش دوم آزمون ' + product . name , {
date : '۱۴۰۰/۱۲/۱۴' , title : "بخش دوم آزمون " + product . name ,
time : '۱۴:۴۶' , date : "۱۴۰۰/۱۲/۱۴" ,
numberOfQ : '۱۸' , time : "۱۴:۴۶" ,
price : 10000 numberOfQ : "۱۸" ,
} , price : 10000 ,
{ } ,
title : 'بخش سوم آزمون ' + product . name , {
date : '۱۴۰۰/۱۲/۱۵' , title : "بخش سوم آزمون " + product . name ,
time : '۱۴:۴۶' , date : "۱۴۰۰/۱۲/۱۵" ,
numberOfQ : '۳۲' , time : "۱۴:۴۶" ,
price : 250000 numberOfQ : "۳۲" ,
} , price : 250000 ,
] } ,
} ) ; ] ,
if ( gameId !== 5 ) { } ) ;
setPopUp ( true ) if ( gameId !== 5 ) {
} setPopUp ( true ) ;
console . log ( gameId ) }
} } console . log ( gameId ) ;
btnOnClick = { ( ) => { } }
btnOnClick = { ( ) => {
if ( selectedProductTypes . includes ( 7 ) ) { if ( selectedProductTypes . includes ( 7 ) ) {
pushSchoolToCart ( { pushSchoolToCart ( {
productId : product ? . id , productId : product ? . id ,
count : 1 , count : 1 ,
} ) } ) ;
} } else {
else { pushToCart ( {
pushToCart ( { productId : product ? . id ,
productId : product ? . id ,
count : 1 ,
count : 1 , } ) ;
} ) ; }
} // console.log(gameId)
// console.log(gameId)
setTimeout ( ( ) => setPopUp ( false ) , 0 ) ;
setTimeout ( ( ) => setPopUp ( false ) , 0 ) // console.log(popup)
// console.log(popup)
// console.log(product.id)
// console.log(product.id)
} }
} / >
} ) }
/ > < / d i v >
) ) }
{ ( ! 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" } } >
این بخش هنوز فعال نشده است .
< / d i v >
< / d i v > < / d i v >
) ) } ) }
{ { gameId == 6 && (
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-4/5 px-8 h-48 flex justify-between text-right items-center border-2 rounded-xl border-red52 " >
< div className = "w-1/5 mx-1" > < div className = "w-1/5 mx-1" >
< h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 > < h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 >
< p className = "text-red26 text-sm" > لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید < / p > < p className = "text-red26 text-sm" >
لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید
< / p >
< / d i v > < / d i v >
< div className = "flex mx-1" > < div className = "flex mx-1" >
< input < input
placeholder = "12,000,000" 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" 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 ) ) } value = { separate ( sharzhVal ) }
onChange = { e => setSharzhVal ( e . target . value ) } onChange = { ( e ) => setSharzhVal ( e . target . value ) }
/ > < p c l a s s N a m e = " b o r d e r f l e x j u s t i f y - c e n t e r i t e m s - c e n t e r b o r d e r - r e d 5 2 r o u n d e d - l g h - 1 2 w - 1 2 t e x t - c e n t e r r o u n d e d - r - n o n e b o r d e r - r - 0 p x - 4 " > ر ی ا ل < / p > / >
< 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 >
< / d i v > < / d i v >
< div className = "flex mx-1" > < 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 > < 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 < input
placeholder = "شارژ حساب" placeholder = "شارژ حساب"
className = "border border-red52 rounded-lg h-12 w-60 text-right rounded-r-none border-r-0 px-4 outline-none" className = "border border-red52 rounded-lg h-12 w-60 text-right rounded-r-none border-r-0 px-4 outline-none"
/ > / >
< / d i v > < / d i v >
< button className = "cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12 mx-2" > افزودن به اعتبار < / b u t t o n > < button className = "cursor-pointer text-red26 border border-red52 rounded-lg bg-red82OP font-bold text-sm px-6 h-12 mx-2" >
افزودن به اعتبار
< / b u t t o n >
< / d i v > < / d i v >
} ) }
< / d i v > < / d i v >
< / d i v > < / d i v >
{ ! isMobile && < div className = "w-1/4 left-0" style = { { height : "100vh" } } > { /* --------------left-part------------------------------------- */ }
< ShoppingCart / > { ! isMobile && (
< / d i v > } < div className = "w-[23.5%] left-0" style = { { height : "100vh" } } >
< ShoppingCart / >
< / d i v >
) }
< / d i v > < / d i v >
) ; ) ;
} }
@ -464,17 +458,16 @@ const Services = ({
else { else {
return ( return (
< div className = "flex flex-col items-center mt-16 mb-40 rtl" > < div className = "flex flex-col items-center mt-16 mb-40 rtl" >
< Games
< Games selectedGames = { selectedGames }
selectedGames = { selectedGames } gameId = { gameId }
gameId = { gameId } chooseGame = { chooseGame }
chooseGame = { chooseGame } setTypes = { ( val ) => setSelectedProductTypes ( val ) }
setTypes = { val => setSelectedProductTypes ( val ) } / >
/ >
< div className = "w-11/12 border-b border-gray-200" > < / d i v > < div className = "w-11/12 border-b border-gray-200" > < / d i v >
{ { gameId !== 6 && (
gameId !== 6 && < div className = "flex items-center mx-4 my-4" > < div className = "flex items-center mx-4 my-4" >
< svg < svg
xmlns = "http://www.w3.org/2000/svg" xmlns = "http://www.w3.org/2000/svg"
width = "40" width = "40"
@ -531,23 +524,25 @@ const Services = ({
< / g > < / g >
< / g > < / g >
< / s v g > < / s v g >
{ { filterCheck . map ( ( filter ) => (
filterCheck . map ( ( filter ) => (
< div < div
key = { ` FILTER_ ${ filter . id } ` } key = { ` FILTER_ ${ filter . id } ` }
className = { ` flex w-32 border-2 p-2 px-4 mx-2 justify-center items-center rounded-md cursor-pointer
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
hover : border - red52 hover : text - red52 hover : bg - pinkF5
$ { selectedFilters . includes ( filter . id ) $ {
? "border-red52 text-red52 bg-pinkF5" selectedFilters . includes ( filter . id )
: "border-gray200 text-gray-400" ? "border-red52 text-red52 bg-pinkF5"
} ` }
: "border-gray200 text-gray-400"
onClick = { ( prevState ) => { } ` }
if ( selectedFilters . includes ( filter . id ) ) { onClick = { ( prevState ) => {
setSelectedFilters ( selectedFilters . filter ( itm => itm !== filter . id ) ) if ( selectedFilters . includes ( filter . id ) ) {
} else { setSelectedFilters (
setSelectedFilters ( [ ... selectedFilters , filter . id ] ) selectedFilters . filter ( ( itm ) => itm !== filter . id )
} ) ;
} }
} else {
setSelectedFilters ( [ ... selectedFilters , filter . id ] ) ;
}
} }
> >
< h3 > { filter . title } < / h 3 > < h3 > { filter . title } < / h 3 >
{ selectedFilters . includes ( filter . id ) && ( { selectedFilters . includes ( filter . id ) && (
@ -570,143 +565,140 @@ const Services = ({
< / s v g > < / s v g >
< / d i v > < / d i v >
< / d i v > < / d i v >
) } ) }
< / d i v > < / d i v >
) ) ) ) }
}
< / d i v > < / d i v >
} ) }
< div className = "w-11/12 border-b border-gray-200" > < / d i v > < div className = "w-11/12 border-b-4 border-gray-200" > < / d i v >
< div < div className = { ` flex items-center w-full justify-center flex-col ` } >
className = { ` flex items-center w-full justify-center flex-col ` } { books
> ? . filter ( ( itm ) = > selectedProductTypes . includes ( itm . productType ) )
{ books ? . filter ( itm => selectedProductTypes . includes ( itm . productType ) ) . map ( ( product , index ) => ( . map ( ( product , index ) => (
< div < div
// to={"/class/" + product?.id}
className = "bg-black"
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` } key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
> >
{ /* {console.log(product)} */ } { selectedProductTypes . includes ( 4 ) && (
< Product < Product
key = { index } key = { index }
productsType = { filter . productsType } productsType = { filter . productsType }
product = { product } product = { product }
index = { Number ( index ) } index = { Number ( index ) }
productName = { ` ${ product ? . name } ` } productName = { ` ${ product ? . name } ` }
productCat = { ` پایه ${ grades [ product ? . gradeId ] } ` } productCat = { ` پایه ${ grades [ product ? . gradeId ] } ` }
productPrice = { separate ( product ? . price ) } productPrice = { separate ( product ? . price ) }
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
// productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
numberOfRegards = { 160 } numberOfRegards = { 160 }
productHolderBorder = "" productHolderBorder = ""
productHolderHoverBorder = "shadow-md" productHolderHoverBorder = "shadow-md"
teacher = { product . vodTeacher } teacher = { product . vodTeacher }
catId = { gameId } catId = { gameId }
onClick = { ( ) => { onClick = { ( ) => {
setPopUpContent ( { setPopUpContent ( {
id : gameId , id : gameId ,
title : product ? . name , title : product ? . name ,
video : "" , video : "" ,
teacher : product ? . vodTeacher , teacher : product ? . vodTeacher ,
description : description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می , "در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : gameId == 2 ? 0 : product ? . price , price : gameId == 2 ? 0 : product ? . price ,
classHour : 21 , classHour : 21 ,
classMinute : 56 , classMinute : 56 ,
image : 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg' , image :
examCont : [ "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" ,
{ examCont : [
title : 'بخش اول آزمون ' + product . name , {
date : '۱۴۰۰/۱۲/۱۳' , title : "بخش اول آزمون " + product . name ,
time : '۱۴:۴۶' , date : "۱۴۰۰/۱۲/۱۳" ,
numberOfQ : '۱۸' , time : "۱۴:۴۶" ,
price : 10000 numberOfQ : "۱۸" ,
} , price : 10000 ,
{ } ,
title : 'بخش دوم آزمون ' + product . name , {
date : '۱۴۰۰/۱۲/۱۴' , title : "بخش دوم آزمون " + product . name ,
time : '۱۴:۴۶' , date : "۱۴۰۰/۱۲/۱۴" ,
numberOfQ : '۱۸' , time : "۱۴:۴۶" ,
price : 10000 numberOfQ : "۱۸" ,
} , price : 10000 ,
{ } ,
title : 'بخش سوم آزمون ' + product . name , {
date : '۱۴۰۰/۱۲/۱۵' , title : "بخش سوم آزمون " + product . name ,
time : '۱۴:۴۶' , date : "۱۴۰۰/۱۲/۱۵" ,
numberOfQ : '۳۲' , time : "۱۴:۴۶" ,
price : 250000 numberOfQ : "۳۲" ,
} , price : 250000 ,
] } ,
} ) ; ] ,
if ( gameId !== 5 ) {
setPopUp ( true )
}
console . log ( gameId )
} }
btnOnClick = { ( ) => {
if ( selectedProductTypes . includes ( 7 ) ) {
pushSchoolToCart ( {
productId : product ? . id ,
count : 1 ,
} )
}
else {
pushToCart ( {
productId : product ? . id ,
count : 1 ,
} ) ; } ) ;
} if ( gameId !== 5 ) {
// console.log(gameId)
setPopUp ( true ) ;
setTimeout ( ( ) => setPopUp ( false ) , 0 ) }
// console.log(popup)
console . log ( gameId ) ;
// console.log(product.id)
} }
} btnOnClick = { ( ) => {
} if ( selectedProductTypes . includes ( 7 ) ) {
/ > pushSchoolToCart ( {
productId : product ? . id ,
count : 1 ,
} ) ;
} else {
pushToCart ( {
productId : product ? . id ,
count : 1 ,
} ) ;
}
// console.log(gameId)
setTimeout ( ( ) => setPopUp ( false ) , 0 ) ;
// console.log(popup)
// console.log(product.id)
} }
/ >
) }
< / d i v > < / d i v >
) ) } ) ) }
{ { gameId == 6 && (
gameId == 6 && < div className = "w-full p-8 py-10 flex flex-col justify-between items-center " >
< div className = "w-full p-8 py-10 flex flex-col justify-between items-center " >
< div className = "w-full text-right mb-4" > < div className = "w-full text-right mb-4" >
< h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 > < h1 className = "text-red26 font-bold" > افزایش مبلغ دلخواه < / h 1 >
< p className = "text-red26 text-sm" > لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید < / p > < p className = "text-red26 text-sm" >
لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید
< / p >
< / d i v > < / d i v >
< div className = "flex w-full mb-4" > < div className = "flex w-full mb-4" >
< input < input
placeholder = "12,000,000" 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" 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 ) }
value = { ( separate ( sharzhVal ) ) } onChange = { ( e ) => setSharzhVal ( e . target . value ) }
onChange = { e => setSharzhVal ( e . target . value ) } / >
/ > < p c l a s s N a m e = " b o r d e r f l e x j u s t i f y - c e n t e r i t e m s - c e n t e r b o r d e r - r e d 5 B r o u n d e d - l g h - 1 4 w - 1 / 4 t e x t - c e n t e r r o u n d e d - r - n o n e b o r d e r - r - 0 p x - 4 " > ر ی ا ل < / p > < 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 >
< / d i v > < / d i v >
< div className = "flex w-full mb-4" > < 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 > < 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 < input
placeholder = "شارژ حساب" placeholder = "شارژ حساب"
className = "border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none" className = "border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none"
/ > / >
< / d i v > < / d i v >
< button className = "cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14" < button
style = { { background : 'rgba(211, 246, 255, 0.44)' } } > 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)" } }
>
افزودن به سبد خرید افزودن به سبد خرید
< / b u t t o n > < / b u t t o n >
< / d i v > < / d i v >
} ) }
< / d i v > < / d i v >
< / d i v > < / d i v >
) ) ;
} }
} ; } ;
