From 6796213ccf367efb48772f665cc26fce5f9b2bb7 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 14 May 2026 21:18:44 +0330
Subject: [PATCH] Update comment flow

---
 .../global/product-detail/Rating.vue          |   2 +-
 .../components/global/product/Comment.vue     |   5 +-
 .../components/product/ProductComments.vue    | 143 +++++++++++++++---
 .../components/product/ProductHero/index.vue  |   8 +-
 .../api/product/useCreateComment.ts           |   1 +
 .../composables/api/product/useRateProduct.ts |  32 ++++
 frontend/constants/index.ts                   |   1 +
 frontend/pages/product/[id].vue               |   2 +-
 frontend/types/global.d.ts                    |   4 +-
 9 files changed, 168 insertions(+), 30 deletions(-)
 create mode 100644 frontend/composables/api/product/useRateProduct.ts

diff --git a/frontend/components/global/product-detail/Rating.vue b/frontend/components/global/product-detail/Rating.vue
index bd75dee..b4ffc64 100644
--- a/frontend/components/global/product-detail/Rating.vue
+++ b/frontend/components/global/product-detail/Rating.vue
@@ -14,7 +14,7 @@ defineProps<Props>();
 
 <template>
     <div class="flex items-center gap-2">
-        <span class="typo-p-sm">
+        <span class="typo-p-sm font-normal translate-y-px">
             {{ rate }}
         </span>
         <div class="flex items-center gap-1">
diff --git a/frontend/components/global/product/Comment.vue b/frontend/components/global/product/Comment.vue
index 23f86e9..70b0816 100644
--- a/frontend/components/global/product/Comment.vue
+++ b/frontend/components/global/product/Comment.vue
@@ -7,6 +7,7 @@ type Props = {
     date: string,
     username: string,
     content: string,
+    rate : number
 }
 
 // props
@@ -25,7 +26,7 @@ const formattedDate = useDateFormat(date.value, "YYYY/MM/DD");
         <div class="flex justify-between items-start w-full max-sm:flex-col gap-4">
             <div class="flex flex-col gap-3">
                 <span class="text-lg font-semibold sm:typo-h-6 text-black">
-                    خیلی محصول خوبی بودددد
+                   {{ title }}
                 </span>
                 <span class="typo-p-xs sm:typo-p-sm text-slate-500">
                     {{ username }}
@@ -33,7 +34,7 @@ const formattedDate = useDateFormat(date.value, "YYYY/MM/DD");
                     {{ formattedDate }}
                 </span>
             </div>
-            <Rating :rate="2"/>
+            <Rating :rate="rate"/>
         </div>
         <div class="typo-p-md">
             {{ content }}
diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index cc321d5..d6ff612 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -3,8 +3,17 @@
 
 import useGetComments from "~/composables/api/product/useGetComments";
 import useCreateComment from "~/composables/api/product/useCreateComment";
+import useRateProduct from "~/composables/api/product/useRateProduct";
 import { useAuth } from "~/composables/api/auth/useAuth";
 
+// props
+
+type Props = {
+    product: Product;
+};
+
+const props = defineProps<Props>();
+
 // state
 
 const route = useRoute();
@@ -13,25 +22,66 @@ const id = route.params.id as string | undefined;
 const page = ref(1);
 
 const { token } = useAuth();
+const userTitle = ref("");
 const userComment = ref("");
+const selectedRating = ref(5);
 
 const showMoreComments = ref(false);
 
 const { data: comments, refetch: refetchComments } = useGetComments(id, page);
 const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
+const { mutateAsync: rateProduct, isPending: isRateProductPending } = useRateProduct(props.product.slug);
+
+watch(
+    () => props.product.user_rating,
+    (newUserRating) => {
+        if (token.value && newUserRating !== null) {
+            selectedRating.value = newUserRating;
+        } else {
+            selectedRating.value = 5;
+        }
+    },
+    { immediate: true }
+);
+
+const canSubmitComment = computed(() => {
+    return userTitle.value.trim().length > 0 && userComment.value.trim().length > 0;
+});
+
+const hasUserRated = computed(() => {
+    return token.value && props.product.user_rating !== null;
+});
 
 // methods
 
 const submitComment = async () => {
-    if (userComment.value.length > 3) {
-        await createComment({
-            content: userComment.value,
-        });
-
-        userComment.value = "";
-
-        await refetchComments();
+    if (!canSubmitComment.value) {
+        return;
     }
+
+    const promises: Promise<any>[] = [
+        createComment({
+            title: userTitle.value,
+            content: userComment.value,
+        }),
+    ];
+
+    // Only submit rating if user hasn't rated before
+    if (!hasUserRated.value) {
+        promises.push(
+            rateProduct({
+                rating: selectedRating.value,
+            })
+        );
+    }
+
+    await Promise.all(promises);
+
+    userTitle.value = "";
+    userComment.value = "";
+    selectedRating.value = 5;
+
+    await refetchComments();
 };
 
 // computed
@@ -52,20 +102,69 @@ const limitedComments = computed(() => {
     >
         <div class="flex relative gap-8 my-42 container max-lg:flex-col">
             <div
-                class="sticky top-0 flex flex-col gap-6 lg:min-w-[400px] h-fit bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
+                class="sticky top-0 flex flex-col gap-6 lg:min-w-100 h-fit bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
             >
                 <h3 class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">نظرات کاربران</h3>
-                <div class="flex flex-col gap-2">
-                    <Rating :rate="2" />
+                <!-- <div class="flex flex-col gap-2">
+                    <Rating :rate="props.product.rating" />
                     <span class="typo-p-sm"> بر اساس {{ comments?.count }} نظر </span>
-                </div>
+                </div> -->
                 <form
                     @submit.prevent="submitComment"
                     class="flex flex-col gap-6"
                 >
+                    <div v-if="hasUserRated" class="flex flex-col gap-3 px-4 py-3 bg-white rounded-lg border border-slate-300">
+                        <div class="flex flex-col gap-2">
+                            <span class="typo-p-xs text-slate-700 font-semibold">امتیاز قبلی شما</span>
+                            <div class="flex items-center gap-1">
+                                <button
+                                    v-for="star in 5"
+                                    :key="`prev-${star}`"
+                                    type="button"
+                                    disabled
+                                    class="size-9 rounded-full flex-center cursor-not-allowed opacity-75"
+                                    :class="star <= (props.product.user_rating || 0) ? 'bg-amber-50' : 'bg-slate-50'"
+                                >
+                                    <Icon
+                                        name="ci:star-solid"
+                                        class="size-5"
+                                        :class="star <= (props.product.user_rating || 0) ? '**:fill-yellow-500' : '**:fill-slate-300'"
+                                    />
+                                </button>
+                                <span class="typo-p-sm font-semibold text-slate-600 mr-2">{{ props.product.user_rating }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="flex flex-col gap-2">
+                        <span class="typo-p-sm text-slate-500">امتیاز شما</span>
+                        <div class="flex items-center gap-1">
+                            <button
+                                v-for="star in 5"
+                                :key="star"
+                                type="button"
+                                class="size-9 rounded-full flex-center transition-colors"
+                                :class="star <= selectedRating ? 'bg-amber-50' : 'bg-slate-50'"
+                                :disabled="!token || isCreateCommentPending || isRateProductPending"
+                                @click="selectedRating = star"
+                            >
+                                <Icon
+                                    name="ci:star-solid"
+                                    class="size-5"
+                                    :class="star <= selectedRating ? '**:fill-yellow-500' : '**:fill-slate-300'"
+                                />
+                            </button>
+                            <span class="typo-p-sm font-semibold text-slate-500 mr-2">{{ selectedRating }}</span>
+                        </div>
+                    </div>
+                    <Input
+                        v-model="userTitle"
+                        :disabled="!token"
+                        placeholder="عنوان نظر را بنویسید..."
+                        variant="outlined"
+                    />
                     <textarea
                         :disabled="!token"
-                        class="w-full min-h-[125px] resize-none sm:min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
+                        class="w-full min-h-31.25 resize-none sm:min-h-50 field-sizing-content rounded-xl bg-white p-4 border border-slate-300 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
                         v-model="userComment"
                         placeholder="نظر خود را بنویسید..."
                     />
@@ -73,10 +172,10 @@ const limitedComments = computed(() => {
                         v-if="token"
                         type="submit"
                         class="rounded-full w-full"
-                        :loading="isCreateCommentPending"
-                        :disabled="isCreateCommentPending"
+                        :loading="isCreateCommentPending || isRateProductPending"
+                        :disabled="isCreateCommentPending || isRateProductPending || !canSubmitComment"
                     >
-                        نظر بنویسید
+                        ثبت نظر
                     </Button>
                     <NuxtLink
                         v-else
@@ -95,10 +194,11 @@ const limitedComments = computed(() => {
                 <Comment
                     v-for="comment in limitedComments"
                     :key="comment.id"
-                    title=""
+                    :title="comment.title"
                     :content="comment.content"
                     :date="comment.timestamp"
-                    :username="'منصور مرزبان'"
+                    :username="comment.user"
+                    :rate="product.user_rating ?? 0"
                 />
 
                 <div
@@ -109,6 +209,7 @@ const limitedComments = computed(() => {
                         v-if="showMoreComments"
                         :total="comments.count"
                         :items="comments.results.map((item, i) => ({ type: 'page', value: i }))"
+                        :per-page="3"
                     />
                     <Button
                         v-else
@@ -123,15 +224,15 @@ const limitedComments = computed(() => {
                 </div>
                 <div
                     v-else
-                    class="h-[400px] lg:flex-grow w-full border-[0.5px] flex-col-center border-slate-200 bg-white rounded-xl"
+                    class="h-100 lg:grow w-full border-[0.5px] flex-col-center border-slate-200 bg-white rounded-xl"
                 >
                     <NuxtImg
                         src="/img/heymlz/heymlz-contact-us.gif"
                         loading="lazy"
                         fetch-priority="low"
-                        class="w-[200px] lg:w-[300px] translate-y-[-25px]"
+                        class="w-50 lg:w-75 -translate-y-6.25"
                     />
-                    <span class="text-xl text-black font-semibold translate-y-[-25px]"> هیچ نظری ثبت نشده است </span>
+                    <span class="text-xl text-black font-semibold -translate-y-6.25"> هیچ نظری ثبت نشده است </span>
                 </div>
             </div>
         </div>
diff --git a/frontend/components/product/ProductHero/index.vue b/frontend/components/product/ProductHero/index.vue
index 573fb86..341d775 100644
--- a/frontend/components/product/ProductHero/index.vue
+++ b/frontend/components/product/ProductHero/index.vue
@@ -61,7 +61,7 @@ watch(
     },
     {
         immediate: true,
-    }
+    },
 );
 
 watch(
@@ -72,7 +72,7 @@ watch(
     },
     {
         immediate: true,
-    }
+    },
 );
 </script>
 
@@ -136,7 +136,7 @@ watch(
                         <span class="max-sm:hidden"> تخفیف درصد </span>
                     </div>
                 </div>
-                <Rating :rate="3" />
+                <Rating :rate="product!.rating" />
             </div>
         </div>
         <Slider
@@ -238,7 +238,7 @@ watch(
             <div class="flex items-center gap-6 flex-wrap">
                 <ProductVariant
                     @click="selectedVariantId = variant.id"
-                    v-for="variant in product!.variants.filter(p => p.color === selectedColor)"
+                    v-for="variant in product!.variants.filter((p) => p.color === selectedColor)"
                     :key="variant.id"
                     :variantDetail="variant"
                     :isSelected="selectedVariantId === variant.id"
diff --git a/frontend/composables/api/product/useCreateComment.ts b/frontend/composables/api/product/useCreateComment.ts
index cd43eff..849d566 100644
--- a/frontend/composables/api/product/useCreateComment.ts
+++ b/frontend/composables/api/product/useCreateComment.ts
@@ -6,6 +6,7 @@ import { API_ENDPOINTS } from "~/constants";
 // types
 
 export type CreateCommentRequest = {
+    title : string,
     content: string;
 };
 
diff --git a/frontend/composables/api/product/useRateProduct.ts b/frontend/composables/api/product/useRateProduct.ts
new file mode 100644
index 0000000..6c39dda
--- /dev/null
+++ b/frontend/composables/api/product/useRateProduct.ts
@@ -0,0 +1,32 @@
+// imports
+
+import { useMutation } from "@tanstack/vue-query";
+import { API_ENDPOINTS } from "~/constants";
+
+// types
+
+export type RateProductRequest = {
+    rating: number;
+};
+
+const useRateProduct = (slug: string | undefined) => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleRateProduct = async (variables: RateProductRequest) => {
+        const { data } = await axios.post(
+            `${API_ENDPOINTS.product.rate}/${slug}/rating/`,
+            variables
+        );
+        return data;
+    };
+
+    return useMutation({
+        mutationFn: (variables: RateProductRequest) => handleRateProduct(variables),
+    });
+};
+
+export default useRateProduct;
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index 09a644d..3fe37e4 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -23,6 +23,7 @@ export const API_ENDPOINTS = {
         comments: "/products/comments",
         create_comment: "/products/comments",
         get: "/products",
+        rate: "/products",
         save: "/accounts/favorites/toggle",
     },
     auth: {
diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
index 0a7abce..f4b555f 100644
--- a/frontend/pages/product/[id].vue
+++ b/frontend/pages/product/[id].vue
@@ -61,7 +61,7 @@ if (productResponse.isError) {
             :products="product!.related_products"
             iconImage="/img/simulare-products-section.gif"
         />
-        <ProductComments />
+        <ProductComments :product="product!" />
         <ChatButton :showChatButton="showChatButton" />
     </div>
 </template>
diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
index 205252a..df65e61 100644
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -101,6 +101,7 @@ declare global {
         name: string;
         description: string;
         rating: number;
+        user_rating : number | null;
         slug: string;
         meta_description: string | null;
         meta_keywords: string | null;
@@ -155,7 +156,8 @@ declare global {
         timestamp: string;
         show: boolean;
         product: number;
-        user: number;
+        user: string;
+        title : string;
     };
 
     type Category = {