@ -3,6 +3,7 @@ import { book, publicApi, userProduct } from "../../redux/actions";
import { connect } from "react-redux" ;
import { Link } from "react-router-dom" ;
import Product from "../../components/Product" ;
import { CgDanger } from "react-icons/cg" ;
// import ScrollContainer from 'react-indiana-drag-scroll'
@ -66,7 +67,7 @@ const Services = ({
classMinute : "" ,
} ) ;
const [ sharzhVal , setSharzhVal ] = useState ( '' ) ;
const [ selectedProductTypes , setSelectedProductTypes ] = useState ( [ 1 ] ) ;
const [ selectedProductTypes , setSelectedProductTypes ] = useState ( [ 7 ] ) ;
// const onChange = (name, value) => {
// setFilter({ ...filter, [name]: value });
// };
@ -112,9 +113,10 @@ const Services = ({
role : "" ,
} ,
] ;
console . log ( "book---------)))))))))))))))))))))-------------------" ) ;
console . log ( books ) ;
const [ selectedGames , setSelectedGames ] = useState ( [ ] ) ;
const [ gameId , setGameId ] = useState ( 1 ) ;
const [ gameId , setGameId ] = useState ( 5 ) ;
const chooseGame = ( id ) => {
setGameId ( id ) ;
console . log ( selectedProductTypes )
@ -124,166 +126,142 @@ const Services = ({
return (
< div
className = "flex items-start justify-between"
style = { { width : "93.5%" , direction : "rtl" , height : '100vh' } }
style = { { width : "93.5%" , direction : "rtl" , height : "100vh" } }
>
{ popup ? (
< ServicePopUp
content = { popUpContent }
closeOnClick = { ( ) => setPopUp ( false ) }
sendPrice = { val => setPopUpContent ( { ... popUpContent , price : popUpContent . price + val } ) }
sendPrice = { ( val ) =>
setPopUpContent ( {
... popUpContent ,
price : popUpContent . price + val ,
} )
}
/ >
) : null }
< div
className = "w-3/4 flex flex-col justify-center "
style = { { paddingTop : '5.5%' , height : '100vh' } }
className = "w-[76.5%] h-[100vh] flex flex-col justify-center pt-[3.5%] "
// style={{ paddingTop:'5.5%', height: '100vh' }}
>
< 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" } }
>
{ / * {
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
selectedGames = { selectedGames }
gameId = { gameId }
chooseGame = { chooseGame }
setTypes = { val => setSelectedProductTypes ( val ) }
setTypes = { ( val ) => setSelectedProductTypes ( val ) }
/ >
< / d i v >
{ /* filters */ }
{ gameId != 6 && < div className = "flex mx-10 my-4 justify-start" >
< 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)"
{ gameId != 6 && (
< div className = "flex mx-6 justify-start" >
< 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 = "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)" >
< 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-4"
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 = "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"
stroke = "#696969"
strokeLinecap = "round"
strokeLinejoin = "round"
strokeWidth = "0.6"
/ >
< / g >
< / g >
< / g >
< / s v g >
< / d i v >
< 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"
< path
id = "Vector-3"
data - name = "Vector"
d = "M0,0H14.378V14.378H0Z"
transform = "translate(14.378 14.378) rotate(180)"
fill = "none"
xmlns = "http://www.w3.org/2000/svg"
>
opacity = "0"
/ >
< g id = "Group" transform = "translate(1.983 1.198)" >
< path
d = "M7.75 12L10.58 14.83L16.25 9.17004"
stroke = "#fff"
strokeWidth = "1.5"
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"
/ >
< / s v g >
< / d i v >
< / d i v >
) }
< / g >
< / g >
< / 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 ) => (
< 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
hover : border - red52 hover : text - red52 hover : bg - pinkF5
$ { filterCheck == 'Physical'
@ -319,144 +297,160 @@ const Services = ({
) }
< /div> */ }
< / d i v >
< / d i v >
< 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" >
{ services . map ( ( item , index ) => (
< option key = { ` Grade__ ${ index } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< 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" >
{ services . map ( ( item , index ) => (
< option key = { ` Grade__ ${ index } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< / d i v >
< / d i v >
< / d i v > }
< div
className = { ` flex
} w - full justify - center overflow - x - hidden overflow - scroll flex - wrap h - full ` }
>
{ books ? . filter ( itm => selectedProductTypes . includes ( itm . productType ) ) . map ( ( product , index ) => (
< div
// to={"/class/" + product?.id}
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
>
{ /* {console.log(product)} */ }
< 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 }
onClick = { ( ) => {
setPopUpContent ( {
id : gameId ,
title : product ? . name ,
video : "" ,
teacher : product ? . vodTeacher ,
description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : gameId == 2 ? 0 : product ? . 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
} ,
]
} ) ;
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 ,
} ) ;
}
// console.log(gameId)
setTimeout ( ( ) => setPopUp ( false ) , 0 )
// console.log(popup)
// console.log(product.id)
}
}
/ >
) }
< 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 ) => (
< div
// to={"/class/" + product?.id}
className = "w-[30%]"
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
style = { gameId === 5 ? { width : "100%" } : null }
>
{ /* {console.log(product)} */ }
{ ( 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 }
onClick = { ( ) => {
setPopUpContent ( {
id : gameId ,
title : product ? . name ,
video : "" ,
teacher : product ? . vodTeacher ,
description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : gameId == 2 ? 0 : product ? . 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 ,
} ,
] ,
} ) ;
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 ,
} ) ;
}
// console.log(gameId)
setTimeout ( ( ) => setPopUp ( false ) , 0 ) ;
// console.log(popup)
// 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 >
) ) }
{
gameId == 6 &&
< div className = "w-4/5 px-8 h-48 flex justify-between text-right items-center border-2 rounded-xl border-red52 " >
) }
{ 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" > افزایش مبلغ دلخواه < / h 1 >
< p className = "text-red26 text-sm" > لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید < / p >
< p className = "text-red26 text-sm" >
لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید
< / p >
< / d i v >
< 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 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 >
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 >
< / d i v >
< 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
placeholder = "شارژ حساب"
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 >
< 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 >
{ ! isMobile && < div className = "w-1/4 left-0" style = { { height : "100vh" } } >
< ShoppingCart / >
< / d i v > }
{ /* --------------left-part------------------------------------- */ }
{ ! isMobile && (
< div className = "w-[23.5%] left-0" style = { { height : "100vh" } } >
< ShoppingCart / >
< / d i v >
) }
< / d i v >
) ;
}
@ -464,17 +458,16 @@ const Services = ({
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 ) }
/ >
< Games
selectedGames = { selectedGames }
gameId = { gameId }
chooseGame = { chooseGame }
setTypes = { ( val ) => setSelectedProductTypes ( val ) }
/ >
< div className = "w-11/12 border-b border-gray-200" > < / d i v >
{
gameId !== 6 && < div className = "flex items-center mx-4 my-4" >
{ gameId !== 6 && (
< div className = "flex items-center mx-4 my-4" >
< svg
xmlns = "http://www.w3.org/2000/svg"
width = "40"
@ -531,22 +524,24 @@ const Services = ({
< / g >
< / g >
< / s v g >
{
filterCheck . map ( ( filter ) => (
{ filterCheck . map ( ( filter ) => (
< 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
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 ] )
}
$ {
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 >
@ -570,143 +565,140 @@ const Services = ({
< / s v g >
< / 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
className = { ` flex items-center w-full justify-center flex-col ` }
>
{ books ? . filter ( itm => selectedProductTypes . includes ( itm . productType ) ) . map ( ( product , index ) => (
< div className = { ` flex items-center w-full justify-center flex-col ` } >
{ books
? . filter ( ( itm ) = > selectedProductTypes . includes ( itm . productType ) )
. map ( ( product , index ) => (
< div
// to={"/class/" + product?.id}
className = "bg-black"
key = { ` PRODUCT__ ${ gameId } __ ${ index } ` }
>
{ /* {console.log(product)} */ }
< 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 }
onClick = { ( ) => {
setPopUpContent ( {
id : gameId ,
title : product ? . name ,
video : "" ,
teacher : product ? . vodTeacher ,
description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : gameId == 2 ? 0 : product ? . 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
} ,
]
} ) ;
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 ,
{ selectedProductTypes . includes ( 4 ) && (
< 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 }
onClick = { ( ) => {
setPopUpContent ( {
id : gameId ,
title : product ? . name ,
video : "" ,
teacher : product ? . vodTeacher ,
description :
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می ,
price : gameId == 2 ? 0 : product ? . 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 ,
} ,
] ,
} ) ;
}
// console.log(gameId)
setTimeout ( ( ) => setPopUp ( false ) , 0 )
// console.log(popup)
// console.log(product.id)
}
}
/ >
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 ,
} ) ;
}
// console.log(gameId)
setTimeout ( ( ) => setPopUp ( false ) , 0 ) ;
// console.log(popup)
// console.log(product.id)
} }
/ >
) }
< / d i v >
) ) }
{
gameId == 6 &&
< div className = "w-full p-8 py-10 flex flex-col justify-between items-center " >
{ 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" > افزایش مبلغ دلخواه < / h 1 >
< p className = "text-red26 text-sm" > لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید < / p >
< p className = "text-red26 text-sm" >
لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید
< / p >
< / d i v >
< 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 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 >
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 >
< / d i v >
< 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
placeholder = "شارژ حساب"
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 >
< 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
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 >
< / d i v >
}
) }
< / d i v >
< / d i v >
)
) ;
}
} ;
