Refetch product after submitting comment

frontend/components/product/ProductComments.vue

@@ -5,6 +5,7 @@ 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";
+import useGetProduct from "~/composables/api/product/useGetProduct";
 
 // props
 
@@ -28,6 +29,7 @@ const selectedRating = ref(5);
 const showMoreComments = ref(false);
 
 const { data: comments, refetch: refetchComments } = useGetComments(id);
+const { refetch: refetchProduct } = useGetProduct(id);
 const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
 const { mutateAsync: rateProduct, isPending: isRateProductPending } = useRateProduct(props.product.slug);
 
@@ -80,6 +82,7 @@ const submitComment = async () => {
     userComment.value = "";
     selectedRating.value = 5;
 
+    await refetchProduct();
     await refetchComments();
 };
 
@@ -112,6 +115,7 @@ const limitedComments = computed(() => {
                     @submit.prevent="submitComment"
                     class="flex flex-col gap-6"
                 >
+                    <div v-if="token">
                         <div
                             v-if="hasUserRated"
                             class="flex flex-col gap-3 px-4 py-3 bg-white rounded-lg border border-slate-300"
@@ -125,7 +129,9 @@ const limitedComments = computed(() => {
                                         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'"
+                                        :class="
+                                            star <= (props.product.user_rating || 0) ? 'bg-amber-50' : 'bg-slate-50'
+                                        "
                                     >
                                         <Icon
                                             name="ci:star-solid"
@@ -167,6 +173,8 @@ const limitedComments = computed(() => {
                                 <span class="typo-p-sm font-semibold text-slate-500 mr-2">{{ selectedRating }}</span>
                             </div>
                         </div>
+                    </div>
+
                     <Input
                         v-model="userTitle"
                         :disabled="!token"
@@ -196,7 +204,7 @@ const limitedComments = computed(() => {
                             type="button"
                             class="rounded-full w-full"
                         >
-                            وارد شوید
+                            برای ثبت نظر وارد شوید
                         </Button>
                     </NuxtLink>
                 </form>