Updated

frontend/components/product/ChatBox/ChatBoxContainer.vue

@@ -7,6 +7,7 @@ import { useIsMutating } from "@tanstack/vue-query";
 import { MUTATION_KEYS } from "~/constants";
 import CloseButton from "~/components/product/ChatBox/CloseButton.vue";
 import { useAuth } from "~/composables/api/auth/useAuth";
+import { useScroll } from "@vueuse/core";
 
 // provide-inject
 

frontend/components/product/ProductHero/index.vue

@@ -5,6 +5,8 @@ import useGetProduct from "~/composables/api/product/useGetProduct";
 import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
 import useAddCartItem from "~/composables/api/orders/useAddCartItem";
 import { useAuth } from "~/composables/api/auth/useAuth";
+import useSaveProduct from "~/composables/api/product/useSaveProduct";
+import { QUERY_KEYS } from "~/constants";
 
 // state
 
@@ -12,8 +14,11 @@ const route = useRoute();
 const id = route.params.id as string | undefined;
 
 const { token } = useAuth();
-const { data: product, refetch: refetchProduct } = useGetProduct(id);
+const { $queryClient: queryClient } = useNuxtApp();
+
+const { data: product, refetch: refetchProduct, isFetching: isFetchingPending } = useGetProduct(id);
 const { mutateAsync: addCartItem, isPending: isAddCartItemPending } = useAddCartItem();
+const { mutateAsync: saveProduct, isPending: isSaveProductPending } = useSaveProduct();
 
 const selectedVariantId = ref(product.value!.variants[0].id);
 const selectedQuantity = ref(1);
@@ -35,6 +40,11 @@ const addItemToCart = async () => {
     await refetchProduct();
 };
 
+const saveProductHandler = async () => {
+    await saveProduct({ product_slug: product.value!.slug });
+    await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.product] });
+};
+
 // watch
 
 watch([selectedVariantId, product], ([selectedVariantId, product]) => {
@@ -113,12 +123,30 @@ watch(
             :slides="selectedVariant!.images"
         />
         <div class="lg:w-1/2 flex flex-col gap-3 lg:mt-12">
-            <NuxtLink
-                to="#"
-                class="typo-label-sm max-lg:hidden"
-            >
-                {{ product!.category.name }}
-            </NuxtLink>
+            <div class="flex items-center justify-between w-full">
+                <NuxtLink
+                    to="#"
+                    class="typo-label-sm max-lg:hidden"
+                >   
+                    {{ product!.category.name }}
+                </NuxtLink>
+                <button
+                    @click="saveProductHandler"
+                    :disabled="isSaveProductPending || isFetchingPending"
+                    class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
+                >
+                    <Icon
+                        v-if="isSaveProductPending || isFetchingPending"
+                        name="svg-spinners:180-ring-with-bg"
+                    />
+
+                    <Icon
+                        v-else
+                        :class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
+                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'bi:bookmark'"
+                    />
+                </button>
+            </div>
             <h1 class="typo-h-4 xl:typo-h-3 max-lg:hidden">
                 {{ product!.name }}
             </h1>