report product

src/app/blogs/[id]/page.tsx

@@ -43,16 +43,14 @@ const BlogDetail: NextPage = () => {
     const handleNativeShare = async () => {
         const blog = data?.results?.blog
         if (blog && currentUrl && typeof navigator !== 'undefined' && 'share' in navigator) {
-            try {
-                const shareData = {
-                    title: blog.title_fa,
-                    text: `مشاهده مقاله: ${blog.title_fa}`,
-                    url: currentUrl,
-                }
-                await (navigator as { share: (data: typeof shareData) => Promise<void> }).share(shareData)
-            } catch (error) {
-                console.log('Error sharing:', error)
+
+            const shareData = {
+                title: blog.title_fa,
+                text: `مشاهده مقاله: ${blog.title_fa}`,
+                url: currentUrl,
             }
+            await (navigator as { share: (data: typeof shareData) => Promise<void> }).share(shareData)
+
         }
     }
 
@@ -97,7 +95,7 @@ const BlogDetail: NextPage = () => {
                             </div>
                             <div className="flex items-center gap-2">
                                 <Calendar size={16} color="#9CA3AF" />
-                                <span>{new Date(blog.createdAt).toLocaleDateString('fa-IR')}</span>
+                                <span>{blog.createdAt}</span>
                             </div>
                             <div className="flex items-center gap-2">
                                 <Eye size={16} color="#9CA3AF" />

src/app/product/components/ModalReport.tsx

@@ -0,0 +1,121 @@
+import DefaulModal from '@/components/DefaulModal'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { InfoCircle } from 'iconsax-react'
+import { useState, type FC } from 'react'
+import { useGetProductQuestion, useSaveReport } from '../hooks/useProductData'
+import { ProductQuestion } from '../types/Types'
+import { toast } from '@/components/Toast'
+
+type Props = {
+    productId: number
+    productName?: string
+}
+
+const ModalReport: FC<Props> = (props) => {
+    const { productId, productName } = props
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+    const [selectedOptions, setSelectedOptions] = useState<string[]>([])
+    const [description, setDescription] = useState<string>('')
+
+    const { data: questionsData, isLoading } = useGetProductQuestion(productId.toString())
+    const saveReportMutation = useSaveReport()
+
+    const reportOptions = questionsData?.results?.questions || []
+
+    const handleSubmit = async () => {
+        if (selectedOptions.length === 0) return
+
+        await saveReportMutation.mutateAsync({
+            productId: productId.toString(),
+            answers: selectedOptions.map(id => ({ questionId: parseInt(id) })),
+            description: description.trim() || ''
+        })
+
+        setIsOpen(false)
+        setSelectedOptions([])
+        setDescription('')
+        toast('گزارش شما با موفقیت ارسال شد', 'success')
+
+    }
+
+    return (
+        <div>
+            <div onClick={() => setIsOpen(true)} className='mt-6 flex gap-2 cursor-pointer'>
+                <InfoCircle size={18} color='#878787' />
+                <span className='text-sm text-gray-500 font-light'>گزارش نادرستی کالا</span>
+            </div>
+
+            <DefaulModal
+                open={isOpen}
+                close={() => setIsOpen(false)}
+                title_header='گزارش نادرستی مشخصات'
+                isHeader
+            >
+                <div>
+                    {/* Product Name */}
+                    {productName && (
+                        <div className='mb-6'>
+                            <p className='text-sm text-gray-600'>{productName}</p>
+                        </div>
+                    )}
+
+                    {/* Report Options */}
+                    <div className='space-y-4 mb-6'>
+                        {isLoading ? (
+                            <div className='flex justify-center py-4'>
+                                <div className='animate-spin rounded-full h-6 w-6 border-b-2 border-orange-500'></div>
+                            </div>
+                        ) : (
+                            reportOptions.map((option: ProductQuestion) => (
+                                <div key={option._id} className='flex items-center gap-3'>
+                                    <Checkbox
+                                        id={`option-${option._id}`}
+                                        checked={selectedOptions.includes(option._id.toString())}
+                                        onCheckedChange={(checked) => {
+                                            if (checked) {
+                                                setSelectedOptions(prev => [...prev, option._id.toString()])
+                                            } else {
+                                                setSelectedOptions(prev => prev.filter(id => id !== option._id.toString()))
+                                            }
+                                        }}
+                                    />
+                                    <label
+                                        htmlFor={`option-${option._id}`}
+                                        className='text-sm text-gray-700 cursor-pointer'
+                                    >
+                                        {option.title}
+                                    </label>
+                                </div>
+                            ))
+                        )}
+                    </div>
+
+                    {/* Description */}
+                    <div className='mb-6'>
+                        <h3 className='text-sm font-medium text-gray-700 mb-2'>توضیحات</h3>
+                        <textarea
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder='متن توضیحات خود را بنویسید'
+                            className='w-full h-24 text-sm p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent'
+                        />
+                    </div>
+
+                    {/* Submit Button */}
+                    <Button
+                        onClick={handleSubmit}
+                        disabled={selectedOptions.length === 0 || saveReportMutation.isPending}
+                        isLoading={saveReportMutation.isPending}
+                        className='w-full'
+                        size="lg"
+                    >
+                        ارسال
+                    </Button>
+                </div>
+            </DefaulModal>
+        </div>
+    )
+}
+
+export default ModalReport

src/app/product/components/ProductImage.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import { FC, useState } from 'react'
 import ActionProduct from './ActionProduct'
 import { Product } from '@/types/product.types'
+import ModalReport from './ModalReport'
 
 interface ProductImageProps {
     product: Product
@@ -46,6 +47,7 @@ const ProductImage: FC<ProductImageProps> = ({ product }) => {
                     </div>
                 ))}
             </div>
+            <ModalReport productId={product._id} productName={product.title_fa} />
         </div>
     )
 }

src/app/product/hooks/useProductData.ts

@@ -42,3 +42,17 @@ export const useGetPriceHistory = (productId: string) => {
     enabled: !!productId,
   });
 };
+
+export const useGetProductQuestion = (productId: string) => {
+  return useQuery({
+    queryKey: ["product-question", productId],
+    queryFn: () => api.getProductQuestion(productId),
+    enabled: !!productId,
+  });
+};
+
+export const useSaveReport = () => {
+  return useMutation({
+    mutationFn: api.saveReport,
+  });
+};

src/app/product/service/Service.ts

@@ -3,7 +3,10 @@ import { ProductDetailResponse } from "@/types/product.types";
 import {
   AddCommentProps,
   AddQuestionProps,
+  SubmitReportProps,
   PriceHistoryResponse,
+  ProductQuestionsResponse,
+  SaveReportTypes,
 } from "../types/Types";
 
 export const getProduct = async (
@@ -45,3 +48,26 @@ export const getPriceHistory = async (
   const { data } = await axios.get(`/product/${productId}/price-history`);
   return data;
 };
+
+export const getProductQuestion = async (
+  productId: string
+): Promise<ProductQuestionsResponse> => {
+  const { data } = await axios.get(`/product/${productId}/report/questions`);
+  return data;
+};
+
+export const submitReport = async (params: SubmitReportProps) => {
+  const { data } = await axios.post(`/product/${params.productId}/report`, {
+    questionIds: params.questionIds,
+    description: params.description,
+  });
+  return data;
+};
+
+export const saveReport = async (params: SaveReportTypes) => {
+  const { data } = await axios.post(
+    `/product/${params.productId}/report/save`,
+    params
+  );
+  return data;
+};

src/app/product/types/Types.ts

@@ -12,6 +12,12 @@ export type AddQuestionProps = {
   productId?: string;
 };
 
+export type SubmitReportProps = {
+  productId: string;
+  questionIds: string[];
+  description?: string;
+};
+
 export type ProductStoreType = {
   variantId: string;
   setVariantId: (value: string) => void;
@@ -40,3 +46,28 @@ export type PriceHistoryResponse = {
   success: boolean;
   results: PriceHistoryResults;
 };
+
+export type ProductQuestion = {
+  _id: number;
+  title: string;
+  type: string;
+  placeholder: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type ProductQuestionsResults = {
+  questions: ProductQuestion[];
+};
+
+export type ProductQuestionsResponse = {
+  status: number;
+  success: boolean;
+  results: ProductQuestionsResults;
+};
+
+export type SaveReportTypes = {
+  answers: { questionId: number }[];
+  description: string;
+  productId: string;
+};

src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }