report bug

src/pages/guide/ReportBug.tsx

@@ -0,0 +1,126 @@
+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 images
+import sad1 from '@/assets/images/sad1.svg'
+import sad2 from '@/assets/images/sad2.svg'
+import sad3 from '@/assets/images/sad3.svg'
+import smile from '@/assets/images/smile.svg'
+import smile2 from '@/assets/images/smile2.svg'
+import smile3 from '@/assets/images/smile3.svg'
+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 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': 6,   // smile2
+            'love': 5,    // 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: 'neutral', image: smile, alt: 'خنثی' },
+        { id: 'smile', image: smile2, alt: 'راضی' },
+        { id: 'love', image: smile3, alt: 'راضی' },
+        { id: 'angry', image: sad1, alt: 'ناراضی' },
+        { id: 'crying', image: sad2, alt: 'ناراضی' },
+        { id: 'sad', image: sad3, 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)}
+                                    className={`p-1 rounded-lg transition-all`}
+                                >
+                                    <img
+                                        src={f.image}
+                                        alt={f.alt}
+                                        className={`w-8 object-contain ${feeling === f.id ? 'filterBlue' : ''}`}
+                                    />
+                                </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'>
+                    با ادامه و ارسال، شما تأیید می‌کنید که «دی‌میل» می‌تواند پاسخ‌ها و اطلاعات حساب شما را به‌منظور بهبود خدمات جمع‌آوری و استفاده کند. برای جزئیات بیشتر لطفاً به <a target='_blank' href='https://danakcorp.com/conditions' className='text-blue-500'>قوانین و شرایط و سیاست حریم خصوصی</a> مراجعه کنید.
+                </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

src/pages/guide/hooks/useFeedbackData.ts

@@ -0,0 +1,9 @@
+import { useMutation } from "@tanstack/react-query";
+import { sendFeedback } from "../service/Service";
+import { FeedbackType } from "../types/Types";
+
+export const useSendFeedback = () => {
+  return useMutation({
+    mutationFn: (params: FeedbackType) => sendFeedback(params),
+  });
+};

src/pages/guide/service/Service.ts

@@ -0,0 +1,7 @@
+import axios from "@/config/axiosDanak";
+import { FeedbackType } from "../types/Types";
+
+export const sendFeedback = async (params: FeedbackType) => {
+  const { data } = await axios.post("/danak-services/feedback", params);
+  return data;
+};

src/pages/guide/types/Types.ts

@@ -0,0 +1,7 @@
+export type FeedbackType = {
+  content: string;
+  rating: number;
+  serviceId: string;
+  phone?: string;
+  email?: string;
+};