@ -41,6 +41,7 @@ function ShoppingCart({
const [ phase , setPhase ] = useState ( "products" ) ; const [ phase , setPhase ] = useState ( "products" ) ;
const navigation = useNavigate ( ) ; const navigation = useNavigate ( ) ;
useEffect ( ( ) => { useEffect ( ( ) => {
console . log ( "gl1" ) ;
if ( isLogin ) getList ( ) ; if ( isLogin ) getList ( ) ;
getFactorInfo ( { userId : user ? . id } ) ; getFactorInfo ( { userId : user ? . id } ) ;
setHeaderOptions ( headerOptions ) ; setHeaderOptions ( headerOptions ) ;
@ -56,23 +57,22 @@ function ShoppingCart({
return userProducts ? . filter ( ( product ) => product . condition < 2 ) ? . length ; return userProducts ? . filter ( ( product ) => product . condition < 2 ) ? . length ;
} , [ userProducts ] ) ; } , [ userProducts ] ) ;
const next = useMemo ( ( ) => { const next = {
return {
products : ( ) => products : ( ) =>
productsLength productsLength
? userProducts . filter ( ( object ) => object . productType === 2 ) ? . length ? userProducts . filter ( ( object ) => object . productType === 2 ) . length > 0
? setPhase ( "deliveryForm" ) ? setPhase ( "deliveryForm" )
: setDialog ( { : setDialog ( {
type : "confirm" , type : "confirm" ,
text : , text : window . t ( ) ,
open : true , open : true ,
accept : ( ) => payFactor ( { userId : user . id } ) , accept : ( ) => payFactor ( { userId : user . id } ) ,
} ) } )
: toast . info ( ) , : toast . info ( window . t ( ) ) ,
deliveryForm : ( ) => deliveryForm : ( ) =>
setDialog ( { setDialog ( {
type : "confirm" , type : "confirm" ,
text : , text : window . t ( ) ,
open : true , open : true ,
accept : ( ) => payFactor ( { userId : user . id } ) , accept : ( ) => payFactor ( { userId : user . id } ) ,
} ) , } ) ,
@ -81,17 +81,16 @@ function ShoppingCart({
console . log ( "Go to shaparak" ) ; console . log ( "Go to shaparak" ) ;
} , } ,
} ; } ;
} , [ userProducts , user ] ) ;
const Table = React . useCallback ( ( ) => { const Table = React . useCallback ( ( ) => {
return ( return (
< div className = "w-full flex flex-col" > < div className = "w-full flex flex-col" >
< header className = "w-full flex gap-10" > < header className = "w-full flex gap-10" >
< strong className = "w-3/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal" > < strong className = "w-3/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal" >
کالاهای انتخابی { window . t ( "کالاهای انتخابی" ) }
< / s t r o n g > < / s t r o n g >
< strong className = "w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal" > < strong className = "w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal" >
تعداد سفارش { window . t ( "تعداد سفارش" ) }
< / s t r o n g > < / s t r o n g >
< / h e a d e r > < / h e a d e r >
< ul className = "w-full mt-2 list-none p-0" > < ul className = "w-full mt-2 list-none p-0" >
@ -111,11 +110,9 @@ function ShoppingCart({
) ; ) ;
} , [ userProducts ] ) ; } , [ userProducts ] ) ;
const PriceStatus = useCallback ( const PriceStatus = ( { name , value , type } ) => {
( { name , value , type } ) => { return isMobile ? (
return ( < div className = "w-full flex flex-row justify-between py-3" >
< React . Fragment >
< div className = "w-full flex lg:hidden justify-between py-3" >
< strong className = "font-semibold text-tiny dark:text-white text-blue5F" > < strong className = "font-semibold text-tiny dark:text-white text-blue5F" >
{ name } { name }
< / s t r o n g > < / s t r o n g >
@ -136,15 +133,15 @@ function ShoppingCart({
} } } }
className = "text-sm mr-2" className = "text-sm mr-2"
> >
تومان { window . t ( "تومان" ) }
< / s p a n > < / s p a n >
< / s p a n > < / s p a n >
< / d i v > < / d i v >
< div className = "w-full hidden lg:flex justify-between py-4" > ) : (
< div className = "w-full flex flex-row justify-between py-4" >
< strong className = "font-semibold text-tiny dark:text-white text-blue5F" > < strong className = "font-semibold text-tiny dark:text-white text-blue5F" >
{ name } { name }
< / s t r o n g > < / s t r o n g >
{ value ? (
< span < span
className = "font-medium text-lg dark:text-white" className = "font-medium text-lg dark:text-white"
style = { { style = { {
@ -162,19 +159,14 @@ function ShoppingCart({
} } } }
className = "text-sm mr-2" className = "text-sm mr-2"
> >
تومان { window . t ( "تومان" ) }
< / s p a n > < / s p a n >
< / s p a n > < / s p a n >
) : null }
< / d i v > < / d i v >
< / R e a c t . F r a g m e n t >
) ;
} ,
[ useless ]
) ; ) ;
} ;
const layouts = useMemo ( ( ) => { const layouts = {
return {
products : isMobile ? ( products : isMobile ? (
< > < >
{ userProducts { userProducts
@ -191,15 +183,15 @@ function ShoppingCart({
< Table / > < Table / >
) : ( ) : (
< Empty < Empty
text = text = { window . t ( ) }
buttonText = buttonText = { window . t ( ) }
buttonAction = { ( ) => navigation ( "/products" ) } buttonAction = { ( ) => navigation ( "/products" ) }
/ > / >
// <strong className="text-blueC0">سبد خرید شما خالی است.</strong>
) , ) ,
deliveryForm : < DeliveryForm setPhase = { setPhase } / > , deliveryForm : < DeliveryForm setPhase = { setPhase } / > ,
address : < Address setPhase = { setPhase } / > , address : < Address setPhase = { setPhase } / > ,
} ; } ;
} , [ isMobile , userProducts , loading ] ) ;
return isMobile ? ( return isMobile ? (
< div className = "w-full flex flex-col px-4 pb-24" > < div className = "w-full flex flex-col px-4 pb-24" >
@ -210,30 +202,25 @@ function ShoppingCart({
< > < >
< div className = "flex flex-col w-full border-t border-gray-300 border-b" > < div className = "flex flex-col w-full border-t border-gray-300 border-b" >
< PriceStatus < PriceStatus
name = name = { window . t ( ) }
value = { factorInfo ? . sumPrice ? factorInfo ? . sumPrice : null } value = { productsLength ? factorInfo ? . sumPrice : 0 }
type = "normal" type = "normal"
/ > / >
< PriceStatus < PriceStatus
name = name = { window . t ( ) }
value = { factorInfo ? . offPrice ? factorInfo ? . offPrice : null } value = { productsLength ? factorInfo ? . offPrice : 0 }
type = "error" type = "error"
/ > / >
{ / * < P r i c e S t a t u s
name = "مالیات بر ارزش افزوده"
value = { productsLength ? factorInfo ? . sumPrice * 0.009 : 0 }
type = "error"
/> */ }
< / d i v > < / d i v >
< div className = "flex justify-between items-center w-full py-3" > < div className = "flex justify-between items-center w-full py-3" >
< strong className = "font-bold text-tiny text-blue5F dark:text-white" > < strong className = "font-bold text-tiny text-blue5F dark:text-white" >
جمع کل سبد خرید { window . t ( "جمع کل سبد خرید" ) }
< / s t r o n g > < / s t r o n g >
{ factorInfo ? . payFactor ? (
< p className = "font-medium text-greenBA text-lg dark:text-white" > < p className = "font-medium text-greenBA text-lg dark:text-white" >
{ separate ( factorInfo ? . payPrice ) + " " + "تومان" } { separate ( productsLength ? factorInfo ? . payPrice : 0 ) +
" " +
window . t ( "تومان" ) }
< / p > < / p >
) : null }
< / d i v > < / d i v >
< div < div
className = "w-full rounded-md flex justify-center items-center py-2.5 px-3 mt-5 mb-4" className = "w-full rounded-md flex justify-center items-center py-2.5 px-3 mt-5 mb-4"
@ -241,11 +228,13 @@ function ShoppingCart({
> >
< img src = { alertIcon } className = "w-5 ml-2" / > < img src = { alertIcon } className = "w-5 ml-2" / >
< p className = "text-xs text-green71 dark:text-white text-justify font-medium" > < p className = "text-xs text-green71 dark:text-white text-justify font-medium" >
هزینه ارسال کالا پس از تعیین محل آدرس مشخص می شود { window . t (
"هزینه ارسال کالا پس از تعیین محل آدرس مشخص می
) }
< / p > < / p >
< / d i v > < / d i v >
< Button < Button
title = "ادامه فرایند خرید" text = { window . t ( "ادامه فرایند خرید" ) }
backgroundColor = "bg-blueC0" backgroundColor = "bg-blueC0"
border = { { color : "#196EC055" , width : "0px" } } border = { { color : "#196EC055" , width : "0px" } }
width = "100%" width = "100%"
@ -258,7 +247,6 @@ function ShoppingCart({
onClick = { ( ) => setPhase ( "products" ) } onClick = { ( ) => setPhase ( "products" ) }
> >
{ window . t ( "بازگشت" ) } { window . t ( "بازگشت" ) }
< img < img
src = { dropdownIcon } src = { dropdownIcon }
alt = "" alt = ""
@ -271,7 +259,7 @@ function ShoppingCart({
< / > < / >
) : ( ) : (
< Empty < Empty
text = text = { window . t ( ) }
buttonText = "فروشگاه" buttonText = "فروشگاه"
buttonAction = { ( ) => navigation ( "/products" ) } buttonAction = { ( ) => navigation ( "/products" ) }
/ > / >
@ -292,22 +280,18 @@ function ShoppingCart({
> >
< div className = "flex flex-col w-full border-t py-2 border-gray-300 border-b" > < div className = "flex flex-col w-full border-t py-2 border-gray-300 border-b" >
< PriceStatus < PriceStatus
name = name = { window . t ( ) }
value = { factorInfo ? . sumPrice ? factorInfo ? . sumPrice : null } value = { productsLength ? factorInfo ? . sumPrice : "" }
type = "normal" type = "normal"
/ > / >
< PriceStatus < PriceStatus
name = "هزینه حمل و نقل" name = { window . t ( "هزینه حمل و نقل" ) }
value = { value = { productsLength ? factorInfo ? . transportPrice : 0 }
factorInfo ? . transportPrice
? factorInfo ? . transportPrice
: " "
}
type = "error" type = "error"
/ > / >
< PriceStatus < PriceStatus
name = name = { window . t ( "میزان تخفیف" ) }
value = { factorInfo ? . offPrice ? factorInfo ? . offPrice : null } value = { productsLength ? factorInfo ? . offPrice : "" }
type = "error" type = "error"
/ > / >
{ / * < P r i c e S t a t u s { / * < P r i c e S t a t u s
@ -322,35 +306,35 @@ function ShoppingCart({
< / d i v > < / d i v >
< div className = "flex justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid" > < div className = "flex justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid" >
< strong className = "font-semibold text-tiny text-blue5F dark:text-white" > < strong className = "font-semibold text-tiny text-blue5F dark:text-white" >
جمع کل سبد خرید { window . t ( "جمع کل سبد خرید" ) }
< / s t r o n g > < / s t r o n g >
{ factorInfo ? . payPrice ? (
< p className = "font-medium text-greenBA text-lg dark:text-white" > < p className = "font-medium text-greenBA text-lg dark:text-white" >
{ separate ( factorInfo ? . payPrice ) } { separate ( productsLength ? factorInfo ? . payPrice : "" ) }
< span className = "font-medium text-greenBA text-sm mr-2" > < span className = "font-medium text-greenBA text-sm mr-2" >
تومان { window . t ( " تومان" ) }
< / s p a n > < / s p a n >
< / p > < / p >
) : null }
< / d i v > < / d i v >
{ phase === "products" && ( { phase === "products" && (
< div < div
className = "w-full rounded-md flex justify-center items-center py-2.5 px-3 mt-5 mb-4" className = "w-full rounded-md flex justify-center items-center py-2.5 px-3 mt-5 mb-4"
style = { { backgroundColor : "#DEFFF188" } } style = { { backgroundColor : "#DEFFF188" } }
> >
< img src = { alertIcon } className = "w-5 ml-2" / > < img src = { alertIcon } className = "w-5 ml-2" alt = "" / >
< p className = "text-xs text-green71 dark:text-white text-justify font-medium" > < p className = "text-xs text-green71 dark:text-white text-justify font-medium" >
هزینه ارسال کالا پس از تعیین محل آدرس مشخص می شود { window . t (
"هزینه ارسال کالا پس از تعیین محل آدرس مشخص می
) }
< / p > < / p >
< / d i v > < / d i v >
) } ) }
{ null && phase === "deliveryForm" && ( { null && phase === "deliveryForm" && (
< div className = "flex flex-col mt-10" > < div className = "flex flex-col mt-10" >
< strong className = "text-tiny text-blue52 mb-5 font-medium" > < strong className = "text-tiny text-blue52 mb-5 font-medium" >
انتخاب شیوه پرداخت { window . t ( "انتخاب شیوه پرداخت" ) }
< / s t r o n g > < / s t r o n g >
< Button < Button
title = title = { window . t ( ) }
backgroundColor = "bg-transparent" backgroundColor = "bg-transparent"
border = { { color : "#77777755" , width : "1px" } } border = { { color : "#77777755" , width : "1px" } }
width = "100%" width = "100%"
@ -359,7 +343,7 @@ function ShoppingCart({
/ > / >
< br / > < br / >
< Button < Button
title = title = { window . t ( ) }
backgroundColor = "bg-transparent" backgroundColor = "bg-transparent"
border = { { color : "#77777755" , width : "1px" } } border = { { color : "#77777755" , width : "1px" } }
width = "100%" width = "100%"
@ -375,11 +359,11 @@ function ShoppingCart({
< Button < Button
title = { title = {
phase === "deliveryForm" phase === "deliveryForm"
? ? window . t ( )
: userProducts . filter ( ( object ) => object . productType === 2 ) : userProducts . filter ( ( object ) => object . productType === 2 )
. length > 0 . length > 0
? ? window . t ( )
: : window . t ( )
} }
backgroundColor = "bg-blueC0" backgroundColor = "bg-blueC0"
border = { { color : "#196EC055" , width : "0px" } } border = { { color : "#196EC055" , width : "0px" } }
