#44 feat: ocultar carrito y deshabilitar controles para usuarios no autenticados en catálogo

src/components/catalog/Card.vue

@@ -71,7 +71,7 @@
           color="error"
           class="qty-btn"
           @click="decrease(product)"
-          :disabled="product.quantity === 0"
+          :disabled="disabled || product.quantity === 0"
         >
           <v-icon size="20">mdi-minus</v-icon>
         </v-btn>
@@ -87,6 +87,7 @@
           single-line
           flat
           aria-label="Cantidad"
+          :disabled="disabled"
           @input="handleQuantityChange"
         />
 
@@ -97,6 +98,7 @@
           color="success"
           class="qty-btn"
           @click="handleIncrease"
+          :disabled="disabled"
         >
           <v-icon size="20">mdi-plus</v-icon>
         </v-btn>
@@ -128,6 +130,10 @@ export default {
       type: Function,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     handleIncrease() {

src/pages/catalog.vue

@@ -2,7 +2,7 @@
   <v-container fluid>
     <!-- Backdrop para mobile cuando el carrito está expandido -->
     <div
-      v-if="isMobile && !cartCollapsed"
+      v-if="isMobile && !cartCollapsed && isAuthenticated"
       class="cart-backdrop"
       @click="cartCollapsed = true"
     ></div>
@@ -80,6 +80,7 @@
               :decrease="decrease"
               :currency="currency"
               :updateQuantity="updateQuantity"
+              :disabled="!isAuthenticated"
               @add-to-cart="addToCart"
             />
           </v-col>
@@ -124,6 +125,7 @@
           :class="{ 'cart-is-collapsed': cartCollapsed && isMobile }"
         >
           <Cart
+            v-if="isAuthenticated"
             :cart-items="cartItems"
             :currency="currency"
             :is-collapsed="cartCollapsed"
@@ -134,6 +136,20 @@
             @update-quantity="updateCartQuantity"
             @toggle-collapse="toggleCart"
           />
+          <v-card v-else class="login-prompt-card pa-4 text-center">
+            <v-icon size="48" color="primary" class="mb-2">mdi-cart-lock</v-icon>
+            <p class="text-body-2 text-medium-emphasis mb-3">
+              Inicia sesión para agregar productos al carrito y finalizar tu compra
+            </p>
+            <v-btn
+              color="primary"
+              variant="tonal"
+              prepend-icon="mdi-login"
+              @click="openLoginDialog"
+            >
+              Iniciar Sesión
+            </v-btn>
+          </v-card>
         </div>
       </v-col>
     </v-row>
@@ -229,6 +245,12 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!-- Login Dialog -->
+    <LoginDialog
+      ref="loginDialogRef"
+      @login-success="onLoginSuccess"
+    />
   </v-container>
 </template>
 
@@ -236,7 +258,9 @@
 import Card from "@/components/catalog/Card.vue";
 import Cart from "@/components/catalog/Cart.vue";
 import PaginationControls from "@/components/catalog/PaginationControls.vue";
+import LoginDialog from "@/components/LoginDialog.vue";
 import { useCartStore } from "@/stores/cart";
+import { useAuthStore } from "@/stores/auth";
 import { inject, ref, computed, onMounted, onUnmounted } from "vue";
 import not_image_product from "@/assets/not_image_for_product.jpeg";
 
@@ -245,9 +269,11 @@ export default {
     Card,
     Cart,
     PaginationControls,
+    LoginDialog,
   },
   setup() {
     const cartStore = useCartStore();
+    const authStore = useAuthStore();
     const cartCollapsed = ref(false); // Cambiado a false para que inicie expandido en desktop
     const windowWidth = ref(window.innerWidth);
 
@@ -267,6 +293,7 @@ export default {
 
     return {
       cartStore,
+      authStore,
       cartCollapsed,
       isMobile,
       windowWidth,
@@ -309,6 +336,9 @@ export default {
     cartCount() {
       return this.cartStore.cartCount;
     },
+    isAuthenticated() {
+      return this.authStore.isAuthenticated;
+    },
     // Búsqueda
     filteredItems() {
       if (!this.searchQuery) return this.items;
@@ -521,6 +551,14 @@ export default {
         }
       });
     },
+    openLoginDialog() {
+      this.$refs.loginDialogRef.open();
+    },
+    onLoginSuccess() {
+      this.api.getCurrentUser().then((user) => {
+        this.authStore.setUser(user);
+      });
+    },
     currency(val) {
       if (val == null) return "-";
       return new Intl.NumberFormat("es-CO", {
@@ -726,6 +764,14 @@ export default {
   }
 }
 
+/* ============================================
+   LOGIN PROMPT CARD
+   ============================================ */
+.login-prompt-card {
+  border: 2px dashed rgba(0, 0, 0, 0.12);
+  background: #fafafa !important;
+}
+
 /* ============================================
    MODALES
    ============================================ */