Add toast to save button if no token found

frontend/components/product/ProductHero/SaveButton.vue

@@ -4,6 +4,7 @@
 import { useAuth } from "~/composables/api/auth/useAuth";
 import useGetProduct from "~/composables/api/product/useGetProduct";
 import useSaveProduct from "~/composables/api/product/useSaveProduct";
+import { useToast } from "~/composables/global/useToast";
 import { QUERY_KEYS } from "~/constants";
 
 // states
@@ -14,6 +15,7 @@ const id = route.params.id as string | undefined;
 const { $queryClient: queryClient } = useNuxtApp();
 
 const { token } = useAuth();
+const { addToast } = useToast();
 
 const { mutateAsync: saveProduct, isPending: isSaveProductPending } = useSaveProduct();
 const { data: product, refetch: refetchProduct, isFetching: isFetchingPending } = useGetProduct(id);
@@ -21,17 +23,26 @@ const { data: product, refetch: refetchProduct, isFetching: isFetchingPending }
 // methods
 
 const saveProductHandler = async () => {
+    if (!!token.value) {
         await saveProduct({ product_slug: product.value!.slug });
         await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.product] });
+    } else {
+        addToast({
+            options: { status: "info" },
+            message: "برای ذخیره کردن لطفا وارد شوید.",
+        });
+    }
 };
 </script>
 
 <template>
     <button
         @click="saveProductHandler"
-        :disabled="isSaveProductPending || isFetchingPending || !token"
-        class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
+        :disabled="isSaveProductPending || isFetchingPending"
+        class="px-2 sm:px-3 py-2 flex items-center gap-2 bg-slate-50 border-slate-200 border rounded-lg flex-center"
     >
+        <span class="typo-label-sm max-sm:hidden"> ذخیره </span>
+
         <Icon
             v-if="isSaveProductPending || isFetchingPending"
             name="ci:svg-spinners-180-ring-with-bg"