fixed add to cart bugs

components/app/desktop/header/cart/List.vue

@@ -1,64 +1,74 @@
 <template>
-    <div class="header-cart-list">
-        <h3>{{ $t('itemsSubmittedInCart', { count: cart.count }) }}</h3>
-        <div>
-            <ul>
-                <li v-for="({ product, quantity }, i) in items" :key="i">
-                    <AppDesktopHeaderCartItem :data="product" :quantity="quantity" @remove="remove" />
-                </li>
-            </ul>
-        </div>
-        <Button :label="$t('showCart')" @click="show()" />
+  <div class="header-cart-list">
+    <h3>{{ $t("itemsSubmittedInCart", { count: cart.count }) }}</h3>
+    <div>
+      <ul>
+        <li v-for="(item, i) in items" :key="i">
+          <AppDesktopHeaderCartItem
+            :id="item._id"
+            :index="i"
+            @remove="remove"
+          />
+        </li>
+      </ul>
     </div>
+    <Button
+      :disabled="cart.count < 1"
+      :label="$t('showCart')"
+      @click="show()"
+    />
+  </div>
 </template>
 
 <script setup>
-const { popup } = inject('service')
-const cart = useCartStore()
-const items = computed(() => cart.items)
+const { popup } = inject("service");
+const cart = useCartStore();
+const items = computed(() => cart.items);
 
-const emit = defineEmits(['hide'])
-const router = useRouter()
+const emit = defineEmits(["hide"]);
+const router = useRouter();
+const token = useCookie("token");
 
 const show = () => {
-    popup.value.hide()
-    router.push('/checkout/cart')
-}
-const remove = async (id) => {
-    await cart.update(id)
-    if (cart.count < 1) popup.value.hide()
-}
+  popup.value.hide();
+  if (token.value) router.push("/checkout/cart");
+  else router.push("/auth/login?redirect=/checkout/cart");
+};
+const remove = async (data) => {
+  await cart.update(data);
+  if (cart.count < 1) popup.value.hide();
+};
 </script>
 
 <style lang="scss">
 .header-cart-list {
-    box-shadow: 0px 2px 10px 0px rgba(0, 75, 130, 0.16);
-    @apply rtl w-[30.9rem] h-[40.6rem] flex flex-col gap-5 py-6 pl-2 bg-white rounded-2xl border overflow-hidden relative;
+  box-shadow: 0px 2px 10px 0px rgba(0, 75, 130, 0.16);
+  @apply rtl w-[30.9rem] h-[40.6rem] flex flex-col gap-5 py-6 pl-2 bg-white rounded-2xl border overflow-hidden relative;
 
-    &>h3 {
-        @apply text-sky-700 text-[0.9em] font-medium font-vazir mb-2.5 mr-8 ml-6;
+  & > h3 {
+    @apply text-primary-700 text-[0.9em] font-medium font-vazir mb-2.5 mr-8 ml-6;
+  }
+
+  & > div {
+    @apply overflow-y-auto h-[29.8rem];
+
+    ul {
+      @apply w-full flex py-3 pr-8 pl-4 flex-col gap-3 items-center;
     }
 
-    &>div {
-        @apply overflow-y-auto h-[29.8rem];
-
-        ul {
-            @apply w-full flex py-3 pr-8 pl-4 flex-col gap-3 items-center;
-        }
-
-        &::-webkit-scrollbar {
-            @apply hidden;
-        }
+    &::-webkit-scrollbar {
+      @apply hidden;
     }
+  }
 
-    &>button {
-        @apply bg-sky-700 border-sky-700 mr-8 ml-6 text-xl font-bold font-vazir #{!important};
-    }
+  & > button {
+    @apply bg-primary-600 border-primary-600 mr-8 ml-6 text-xl font-bold font-vazir #{!important};
+  }
 
-    &::before {
-        content: ' ';
-        box-shadow: 0px -3px 16px 0px rgba(7, 50, 115, 0.16);
-        @apply absolute inset-x-0 -bottom-3 h-28 z-0;
-    }
+  &::before {
+    content: " ";
+    box-shadow: 0px -3px 16px 0px rgba(7, 50, 115, 0.16);
+    @apply absolute inset-x-0 -bottom-3 h-28 z-0;
+  }
 }
 </style>