@@ -0,0 +1,128 @@
import React , { useMemo , useState } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Textarea from '@/components/Textarea'
import Button from '@/components/Button'
import { useSharedStore } from '@/shared/store/sharedStore'
import { useSendFeedback } from './hooks/useFeedbackData'
import { toast } from '@/components/Toast'
import { ErrorType } from '@/helpers/types'
import { useTheme } from '@/contexts/ThemeContext'
// Import images
import sad1 from '@/assets/images/sad1.png'
import sad2 from '@/assets/images/sad2.png'
import sad3 from '@/assets/images/sad3.png'
import smile from '@/assets/images/smile.png'
import smile2 from '@/assets/images/smile2.png'
import smile3 from '@/assets/images/smile3.png'
import { useGetProfile } from '../profile/hooks/useProfileData'
const ReportBug : React.FC = ( ) = > {
const { openReportBug , setOpenReportBug } = useSharedStore ( )
const [ description , setDescription ] = useState ( '' )
const [ feeling , setFeeling ] = useState < string | null > ( null )
const { data } = useGetProfile ( )
const { mutate : sendReportBug , isPending } = useSendFeedback ( )
const { theme } = useTheme ( )
const isValid = useMemo ( ( ) = > description . trim ( ) . length > 0 , [ description ] )
const getRatingFromFeeling = ( feeling : string | null ) : number = > {
if ( ! feeling ) return 0
const feelingMap : Record < string , number > = {
'angry' : 1 , // sad1
'crying' : 2 , // sad2
'sad' : 3 , // sad3
'neutral' : 4 , // smile
'smile' : 5 , // smile2
'love' : 6 , // smile3
}
return feelingMap [ feeling ] || 0
}
const handleSubmit = async ( ) = > {
if ( ! isValid ) return
sendReportBug ( {
content : description ,
rating : getRatingFromFeeling ( feeling ) ,
serviceId : import.meta.env.VITE_SERVICE_ID ,
email : data?.data?.user?.emailAddress ,
} , {
onSuccess : ( ) = > {
toast ( 'گزارش با موفقیت ارسال شد' , 'success' )
setDescription ( '' )
setFeeling ( null )
setOpenReportBug ( false )
} ,
onError : ( error : ErrorType ) = > {
toast ( error . response ? . data ? . error ? . message [ 0 ] , 'error' )
}
} )
}
const feelings = [
{ id : 'angry' , image : sad1 , alt : 'ناراضی' } ,
{ id : 'crying' , image : sad2 , alt : 'ناراضی' } ,
{ id : 'sad' , image : sad3 , alt : 'ناراضی' } ,
{ id : 'neutral' , image : smile , alt : 'خنثی' } ,
{ id : 'smile' , image : smile2 , alt : 'راضی' } ,
{ id : 'love' , image : smile3 , alt : 'راضی' } ,
]
return (
< DefaulModal open = { openReportBug } close = { ( ) = > setOpenReportBug ( false ) } isHeader title_header = 'گزارش اشکالات' width = { 500 } >
< div className = 'space-y-6 mt-4' >
< div className = 'text-xs text-muted-foreground leading-5' >
ل ط ف ا ً د ر ص و ر ت م ش ا ه د ه ه ر گ و ن ه ا ش ک ا ل ی ا ب ا گ د ر س ا ی ت ، ا ز ط ر ی ق ا ی ن ف ر م گ ز ا ر ش د ه ی د . ه م چ ن ی ن م ی ت و ا ن ی د ب ا ز خ و ر د ، ن ظ ر ی ا پ ی ش ن ه ا د ا ت خ و د ر ا د ر ب ا ر ه س ا ی ت ب ا م ا ب ه ا ش ت ر ا ک ب گ ذ ا ر ی د . ا ط ل ا ع ا ت د ق ی ق ش م ا ب ه م ا ک م ک م ی ک ن د م ش ک ل ا ت ر ا س ر ی ع ت ر ب ر ط ر ف ک ن ی م و ک ی ف ی ت س ا ی ت ر ا ب ه ب و د ب خ ش ی م .
< / div >
< Textarea
label = 'متن گزارش'
placeholder = 'اینجا بنویسید...'
value = { description }
onChange = { ( e ) = > setDescription ( e . target . value ) }
/ >
< div className = 'flex justify-start' >
< div className = 'flex w-full justify-between gap-4' >
{ feelings . map ( ( f , idx ) = > (
< div key = { f . id } className = 'flex flex-col items-center gap-1' >
< button
type = 'button'
onClick = { ( ) = > setFeeling ( f . id ) }
>
< img
src = { f . image }
alt = { f . alt }
className = { ` w-8 object-contain ${ feeling === f . id ? 'filterBlue' : theme === 'dark' ? 'filterWhite' : '' } ` }
/ >
< / button >
{ idx === 0 && (
< div className = 'text-xs mt-2 text-muted-foreground' > ن ا ر ا ض ی < / div >
) }
{ idx === feelings . length - 1 && (
< div className = 'text-xs mt-2 text-muted-foreground' > ر ا ض ی < / div >
) }
< / div >
) ) }
< / div >
< / div >
< div className = 'text-[11px] text-muted-foreground leading-6' >
ب ا ا د ا م ه و ا ر س ا ل ، ش م ا ت أ ی ی د م ی ک ن ی د ک ه « د ی م ی ل » م ی ت و ا ن د پ ا س خ ه ا و ا ط ل ا ع ا ت ح س ا ب ش م ا ر ا ب ه م ن ظ و ر ب ه ب و د خ د م ا ت ج م ع آ و ر ی و ا س ت ف ا د ه ک ن د . ب ر ا ی ج ز ئ ی ا ت ب ی ش ت ر ل ط ف ا ً ب ه < span className = 'text-blue-500' > ق و ا ن ی ن و ش ر ا ی ط و س ی ا س ت ح ر ی م خ ص و ص ی < / span > م ر ا ج ع ه ک ن ی د .
< / div >
< div className = 'w-full flex justify-end' >
< Button onClick = { handleSubmit } disabled = { ! isValid } loading = { isPending } className = 'px-10 w-fit' > ا ر س ا ل < / Button >
< / div >
< / div >
< / DefaulModal >
)
}
export default ReportBug
hamid zarghami