#45 feat: show 'Resumen del pedido' and hide planilla alert for catalog orders

#45 feat: rename checkout to 'Finalizar Pedido' and add contact info in checkout modal
#45 feat: update login prompt message with contact info and icons
2026-07-11 19:52:34 -05:00 · 2026-07-11 19:47:04 -05:00 · 2026-07-11 19:39:36 -05:00 · 2026-07-11 19:05:07 -05:00 · 2026-07-11 18:59:46 -05:00 · 2026-07-11 18:56:45 -05:00
10 changed files with 283 additions and 261 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,3 @@
 VITE_API_IMPLEMENTATION=django
 VITE_DJANGO_BASE_URL=http://localhost:7000
+VITE_CONTACT_PHONE=3023567797
--- a/deploy/.env.example
+++ b/deploy/.env.example
@@ -1,2 +1,3 @@
 VITE_API_IMPLEMENTATION=django
 VITE_DJANGO_BASE_URL=http://localhost:7000
+VITE_CONTACT_PHONE=
--- a/deploy/Dockerfile
+++ b/deploy/Dockerfile
@@ -3,9 +3,11 @@ FROM node:20-alpine AS builder

 ARG VITE_DJANGO_BASE_URL
 ARG VITE_API_IMPLEMENTATION
+ARG VITE_CONTACT_PHONE

 ENV VITE_DJANGO_BASE_URL=$VITE_DJANGO_BASE_URL
 ENV VITE_API_IMPLEMENTATION=$VITE_API_IMPLEMENTATION
+ENV VITE_CONTACT_PHONE=$VITE_CONTACT_PHONE

 WORKDIR /app

--- a/deploy/build.sh
+++ b/deploy/build.sh
@@ -59,6 +59,7 @@ set +a

 BUILD_ARGS="--build-arg VITE_DJANGO_BASE_URL=$VITE_DJANGO_BASE_URL"
 BUILD_ARGS="$BUILD_ARGS --build-arg VITE_API_IMPLEMENTATION=$VITE_API_IMPLEMENTATION"
+BUILD_ARGS="$BUILD_ARGS --build-arg VITE_CONTACT_PHONE=$VITE_CONTACT_PHONE"

 FULL_IMAGE_NAME="$GITEA_REGISTRY/$GITEA_USER/$IMAGE_NAME"

--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,5 +1,13 @@
 <template>
-  <v-footer height="40" app>
+  <div>
+    <!-- Footer completo: visible siempre en desktop, toggle en mobile -->
+    <v-footer
+      v-if="expanded || !isMobile"
+      height="40"
+      app
+      class="app-footer"
+      :class="{ 'footer-overlay': isMobile }"
+    >
      <a
        v-for="item in items"
        :key="item.title"
@@ -31,9 +39,24 @@
        </a>
      </div>
    </v-footer>
+
+    <!-- Botón flotante: solo en mobile -->
+    <v-btn
+      v-if="isMobile"
+      icon
+      size="small"
+      class="footer-toggle-btn"
+      :color="expanded ? 'primary' : undefined"
+      @click="expanded = !expanded"
+    >
+      <v-icon :icon="expanded ? 'mdi-close' : '$vuetify'" :size="expanded ? 20 : 24" />
+    </v-btn>
+  </div>
 </template>

 <script setup>
+  import { ref, computed, onMounted, onUnmounted } from 'vue';
+
  const items = [
    {
      title: 'Vuetify Documentation',
@@ -65,15 +88,48 @@
      icon: `mdi-reddit`,
      href: 'https://reddit.com/r/vuetifyjs',
    },
-  ]
+  ];
+
+  const expanded = ref(false);
+  const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1200);
+
+  const isMobile = computed(() => windowWidth.value < 960);
+
+  const onResize = () => {
+    windowWidth.value = window.innerWidth;
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', onResize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
 </script>

 <style scoped lang="sass">
-  .social-link :deep(.v-icon)
+.social-link :deep(.v-icon)
  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
  text-decoration: none
  transition: .2s ease-in-out

  &:hover
    color: rgba(25, 118, 210, 1)
+
+/* Botón flotante para mobile */
+.footer-toggle-btn
+  position: fixed
+  bottom: 12px
+  right: 12px
+  z-index: 2000
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25)
+
+/* Overlay del footer en mobile */
+.footer-overlay
+  position: fixed !important
+  bottom: 0
+  left: 0
+  right: 0
+  z-index: 1999
 </style>
--- a/src/components/LoginDialog.vue
+++ b/src/components/LoginDialog.vue
@@ -1,7 +1,13 @@
 <template>
  <v-dialog v-model="show" max-width="400">
    <v-card>
-      <v-card-title class="headline">Iniciar sesión</v-card-title>
+      <v-card-title class="headline d-flex align-center">
+        Iniciar sesión
+        <v-spacer />
+        <v-btn icon size="small" variant="text" @click="show = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
      <v-card-text>
        <v-form ref="form" @submit.prevent="onSubmit">
          <v-text-field
--- a/src/components/SummaryPurchase.vue
+++ b/src/components/SummaryPurchase.vue
@@ -8,7 +8,7 @@
    </v-container>
    <v-container v-show="id">
      <v-toolbar>
-        <v-toolbar-title> Resumen de la compra {{ id }}</v-toolbar-title>
+        <v-toolbar-title> {{ type === 'catalog' ? 'Resumen del pedido' : 'Resumen de la compra' }} {{ id }}</v-toolbar-title>
      </v-toolbar>
      <v-list>
        <v-list-item>
@@ -39,7 +39,7 @@
          {{ currencyFormat(calculateSubtotal(item.unit_price, item.quantity)) }}
        </template>
      </v-data-table-virtual>
-      <v-alert type="info" class="my-4">
+      <v-alert v-if="type !== 'catalog'" type="info" class="my-4">
        Recuerda adicionar a la planilla física lo siguiente
        <v-data-table
          :headers="headersTemplate"
--- a/src/components/catalog/Card.vue
+++ b/src/components/catalog/Card.vue
@@ -47,7 +47,7 @@
        </div>

        <!-- Precio Total -->
-        <div class="price-row">
+        <div v-if="product.quantity > 0" class="price-row">
          <span class="price-label text-caption">Precio total</span>
          <v-chip
            color="success"
@@ -63,6 +63,18 @@

    <!-- Footer con Controles de Cantidad -->
    <v-card-actions class="product-actions pa-2 pb-3 justify-center">
+      <template v-if="disabled">
+        <v-btn
+          color="primary"
+          variant="tonal"
+          prepend-icon="mdi-cart-plus"
+          class="login-add-btn"
+          @click="$emit('request-login')"
+        >
+          Agregar
+        </v-btn>
+      </template>
+      <template v-else>
        <div class="quantity-controls">
          <v-btn
            icon
@@ -71,7 +83,7 @@
            color="error"
            class="qty-btn"
            @click="decrease(product)"
-          :disabled="disabled || product.quantity === 0"
+            :disabled="product.quantity === 0"
          >
            <v-icon size="20">mdi-minus</v-icon>
          </v-btn>
@@ -87,7 +99,6 @@
            single-line
            flat
            aria-label="Cantidad"
-          :disabled="disabled"
            @input="handleQuantityChange"
          />

@@ -98,17 +109,18 @@
            color="success"
            class="qty-btn"
            @click="handleIncrease"
-          :disabled="disabled"
          >
            <v-icon size="20">mdi-plus</v-icon>
          </v-btn>
        </div>
+      </template>
    </v-card-actions>
  </v-card>
 </template>

 <script>
 export default {
+  emits: ['add-to-cart', 'request-login'],
  props: {
    product: {
      type: Object,
@@ -176,7 +188,6 @@ export default {
 .product-image-container {
  position: relative;
  width: 100%;
-  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -313,6 +324,13 @@ export default {
   RESPONSIVE BREAKPOINTS
   ============================================ */

+/* Botón de agregar (no autenticado) */
+.login-add-btn {
+  width: 100%;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
 /* Móvil pequeño (< 375px) */
@media (max-width: 374px) {
  .product-content {
@@ -336,143 +354,6 @@ export default {

 /* Móvil estándar (375px - 559px) */
@media (min-width: 375px) and (max-width: 559px) {
-  .product-name {
-    font-size: 0.95rem;
-  }
-
-  .price-value {
-    font-size: 1.05rem;
-  }
-}
-
-/* Tablet (560px - 959px) */
-@media (min-width: 560px) and (max-width: 959px) {
-  .product-content {
-    padding: 14px;
-  }
-
-  .product-name {
-    font-size: 1rem;
-    min-height: 2.6rem;
-  }
-
-  .price-label {
-    font-size: 0.68rem;
-  }
-
-  .price-value {
-    font-size: 1.15rem;
-  }
-
-  .price-total-chip {
-    font-size: 0.95rem;
-    height: 28px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
-  }
-}
-
-/* Desktop (≥ 960px) */
-@media (min-width: 960px) {
-  .product-content {
-    padding: 16px 14px;
-  }
-
-  .product-name {
-    font-size: 1.05rem;
-    min-height: 2.7rem;
-  }
-
-  .price-label {
-    font-size: 0.7rem;
-  }
-
-  .price-value {
-    font-size: 1.2rem;
-  }
-
-  .price-total-chip {
-    font-size: 1rem;
-    height: 30px;
-    padding: 0 14px;
-  }
-
-  .product-actions {
-    padding: 8px;
-    padding-bottom: 12px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
-  }
-
-  .qty-btn {
-    width: 36px;
-    height: 36px;
-  }
-}
-
-/* Desktop Large (≥ 1280px) */
-@media (min-width: 1280px) {
-  .product-content {
-    padding: 18px 16px;
-  }
-
-  .product-name {
-    font-size: 1.1rem;
-    min-height: 2.8rem;
-  }
-
-  .price-value {
-    font-size: 1.25rem;
-  }
-
-  .price-total-chip {
-    font-size: 1.05rem;
-    height: 32px;
-  }
-}
-
-/* Desktop Extra Large (≥ 1920px) */
-@media (min-width: 1920px) {
-  .product-name {
-    font-size: 1.15rem;
-    min-height: 3rem;
-  }
-
-  .price-value {
-    font-size: 1.3rem;
-  }
-
-  .product-content {
-    padding: 8px;
-  }
-
-  .product-name {
-    font-size: 0.8rem;
-    min-height: 1.9rem;
-  }
-
-  .price-value {
-    font-size: 0.85rem;
-  }
-
-  .quantity-input {
-    max-width: 50px;
-    min-width: 50px;
-  }
-}
-
-/* Móvil estándar (375px - 559px) */
-@media (min-width: 375px) and (max-width: 559px) {
-  .product-image-container {
-    height: 140px;
-  }
-
  .product-name {
    font-size: 0.85rem;
  }
@@ -484,10 +365,6 @@ export default {

 /* Tablet (560px - 959px) */
@media (min-width: 560px) and (max-width: 959px) {
-  .product-image-container {
-    height: 150px;
-  }
-
  .product-content {
    padding: 10px;
  }
@@ -518,10 +395,6 @@ export default {

 /* Desktop (≥ 960px) */
@media (min-width: 960px) {
-  .product-image-container {
-    height: 160px;
-  }
-
  .product-content {
    padding: 12px 10px;
  }
@@ -563,10 +436,6 @@ export default {

 /* Desktop Large (≥ 1280px) */
@media (min-width: 1280px) {
-  .product-image-container {
-    height: 170px;
-  }
-
  .product-content {
    padding: 14px 12px;
  }
@@ -588,10 +457,6 @@ export default {

 /* Desktop Extra Large (≥ 1920px) */
@media (min-width: 1920px) {
-  .product-image-container {
-    height: 180px;
-  }
-
  .product-name {
    font-size: 1.05rem;
    min-height: 2.5rem;
--- a/src/components/catalog/Cart.vue
+++ b/src/components/catalog/Cart.vue
@@ -47,7 +47,7 @@
        icon
        size="small"
        variant="text"
-        @click="$emit('toggle-collapse')"
+        @click.stop="$emit('toggle-collapse')"
        :title="isCollapsed ? 'Expandir carrito' : 'Contraer carrito'"
      >
        <v-icon>{{ isCollapsed ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
@@ -133,7 +133,7 @@
      
      <v-card-actions v-if="cartItems.length > 0" class="cart-checkout-section">
        <v-btn color="primary" block @click="$emit('checkout')">
-          Finalizar Compra
+          Finalizar Pedido
        </v-btn>
      </v-card-actions>
    </div>
--- a/src/pages/catalog.vue
+++ b/src/pages/catalog.vue
@@ -49,20 +49,6 @@
          </div>
        </v-sheet>

-        <!-- Controles de paginación superiores -->
-        <PaginationControls
-          v-if="filteredItems.length > 0"
-          :current-page="currentPage"
-          :total-pages="totalPages"
-          :items-per-page="itemsPerPage"
-          :items-per-page-options="itemsPerPageOptions"
-          :pagination-info="paginationInfo"
-          :total-visible-pages="totalVisiblePages"
-          @page-change="handlePageChange"
-          @items-per-page-change="handleItemsPerPageChange"
-          position="top"
-        />
-
        <!-- Grid de productos paginados -->
        <v-row class="product-grid" v-if="paginatedItems.length > 0">
          <v-col
@@ -82,6 +68,7 @@
              :updateQuantity="updateQuantity"
              :disabled="!isAuthenticated"
              @add-to-cart="addToCart"
+              @request-login="showLogin"
            />
          </v-col>
        </v-row>
@@ -136,11 +123,54 @@
            @update-quantity="updateCartQuantity"
            @toggle-collapse="toggleCart"
          />
-          <v-card v-else class="login-prompt-card pa-4 text-center">
+          <v-card v-else-if="!isMobile || showLoginPrompt" class="login-prompt-card pa-4 text-center">
+            <v-btn
+              icon
+              size="x-small"
+              variant="text"
+              class="login-prompt-close"
+              @click="showLoginPrompt = false"
+            >
+              <v-icon size="18">mdi-close</v-icon>
+            </v-btn>
            <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
+              Para hacer pedidos debes de tener usuario y clave, si no lo tienes comunicate con nosotros al
+              <strong class="text-primary">{{ contactPhone }}</strong>
+              para solicitarlo. Esto es necesario porque no podemos procesar tus pedidos todos los días del mes.
+              Comunicate con nosotros para contarte todos los detalles y que puedas apoyar este proceso.
            </p>
+            <div class="d-flex justify-center ga-2 mb-3">
+              <v-btn
+                icon
+                size="small"
+                color="primary"
+                variant="tonal"
+                :href="'tel:' + contactPhone"
+              >
+                <v-icon size="18">mdi-phone</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="small"
+                color="success"
+                variant="tonal"
+                :href="'https://wa.me/' + contactPhone"
+                target="_blank"
+              >
+                <v-icon size="18">mdi-whatsapp</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="small"
+                color="info"
+                variant="tonal"
+                :href="'https://t.me/+57' + contactPhone"
+                target="_blank"
+              >
+                <v-icon size="18">mdi-send</v-icon>
+              </v-btn>
+            </div>
            <v-btn
              color="primary"
              variant="tonal"
@@ -157,7 +187,7 @@
    <!-- Modal 1: Confirmación de productos -->
    <v-dialog v-model="checkoutDialog" max-width="600" persistent>
      <v-card>
-        <v-card-title class="headline">Confirmar Compra</v-card-title>
+        <v-card-title class="headline">Confirmar Pedido</v-card-title>
        <v-card-text>
          <v-list v-if="cartItems.length > 0" class="product-list-scroll">
            <v-list-item v-for="item in cartItems" :key="item.id">
@@ -192,7 +222,7 @@
      </v-card>
    </v-dialog>

-    <!-- Modal 2: Datos personales -->
+    <!-- Modal 2: Datos personales + aviso de coordinación -->
    <v-dialog v-model="personalDataDialog" max-width="500" persistent>
      <v-card>
        <v-card-title class="headline">Datos de Contacto</v-card-title>
@@ -229,6 +259,48 @@
              variant="outlined"
            ></v-select>
          </v-form>
+
+          <v-divider class="my-3"></v-divider>
+
+          <v-alert type="info" variant="tonal" class="mb-0">
+            <div class="text-body-2 mb-2">
+              Para coordinar la entrega de tu pedido escríbenos:
+            </div>
+            <div class="d-flex ga-2">
+              <v-btn
+                icon
+                size="x-small"
+                color="primary"
+                variant="tonal"
+                :href="'tel:' + contactPhone"
+              >
+                <v-icon size="16">mdi-phone</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="x-small"
+                color="success"
+                variant="tonal"
+                :href="'https://wa.me/57' + contactPhone"
+                target="_blank"
+              >
+                <v-icon size="16">mdi-whatsapp</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="x-small"
+                color="info"
+                variant="tonal"
+                :href="'https://t.me/+57' + contactPhone"
+                target="_blank"
+              >
+                <v-icon size="16">mdi-send</v-icon>
+              </v-btn>
+              <span class="text-body-2 font-weight-bold ml-1 d-flex align-center">
+                {{ contactPhone }}
+              </span>
+            </div>
+          </v-alert>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
@@ -240,7 +312,7 @@
            :loading="isSubmitting"
            :disabled="isSubmitting"
          >
-            Finalizar Compra
+            Finalizar Pedido
          </v-btn>
        </v-card-actions>
      </v-card>
@@ -274,7 +346,8 @@ export default {
  setup() {
    const cartStore = useCartStore();
    const authStore = useAuthStore();
-    const cartCollapsed = ref(false); // Cambiado a false para que inicie expandido en desktop
+    const cartCollapsed = ref(false);
+    const showLoginPrompt = ref(false);
    const windowWidth = ref(window.innerWidth);

    const isMobile = computed(() => windowWidth.value < 960); // Cambiado de 680 a 960
@@ -295,6 +368,7 @@ export default {
      cartStore,
      authStore,
      cartCollapsed,
+      showLoginPrompt,
      isMobile,
      windowWidth,
    };
@@ -339,12 +413,16 @@ export default {
    isAuthenticated() {
      return this.authStore.isAuthenticated;
    },
+    contactPhone() {
+      return import.meta.env.VITE_CONTACT_PHONE || '';
+    },
    // Búsqueda
    filteredItems() {
      if (!this.searchQuery) return this.items;
-      const query = this.searchQuery.toLowerCase();
+      const normalize = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+      const query = normalize(this.searchQuery);
      return this.items.filter((item) =>
-        item.name.toLowerCase().includes(query),
+        normalize(item.name).includes(query),
      );
    },
    // Paginación
@@ -470,7 +548,6 @@ export default {
    },
    async onSubmitPurchase() {
      const form = this.$refs.personalForm;
-
      if (form) {
        const { valid } = await form.validate();
        if (!valid) return;
@@ -492,7 +569,6 @@ export default {
        customer_phone: this.customerPhone,
        pickup_method: this.pickupMethod,
      };
-
      this.api
        .createCatalogPurchase(payload)
        .then((data) => {
@@ -541,20 +617,25 @@ export default {
      }
    },
    scrollToTop() {
-      this.$nextTick(() => {
-        const catalogHeader = this.$el?.querySelector(".page-header");
-        if (catalogHeader) {
-          catalogHeader.scrollIntoView({
-            behavior: "smooth",
-            block: "start",
-          });
+      const grid = this.$el?.querySelector(".product-grid");
+      if (grid) {
+        const top = grid.getBoundingClientRect().top + window.scrollY - 16;
+        window.scrollTo({ top, behavior: "smooth" });
+      } else {
+        window.scrollTo({ top: 0, behavior: "smooth" });
      }
-      });
    },
    openLoginDialog() {
      this.$refs.loginDialogRef.open();
    },
+    showLogin() {
+      this.showLoginPrompt = true;
+      if (this.isMobile) {
+        this.cartCollapsed = false;
+      }
+    },
    onLoginSuccess() {
+      this.showLoginPrompt = false;
      this.api.getCurrentUser().then((user) => {
        this.authStore.setUser(user);
      });
@@ -770,6 +851,15 @@ export default {
 .login-prompt-card {
  border: 2px dashed rgba(0, 0, 0, 0.12);
  background: #fafafa !important;
+  position: relative;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.login-prompt-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
 }

 /* ============================================
Author	SHA1	Message	Date
mono	523d0b9d08	#45 feat: show 'Resumen del pedido' and hide planilla alert for catalog orders	2026-07-11 19:52:34 -05:00
mono	0806731a1f	#45 feat: rename checkout to 'Finalizar Pedido' and add contact info in checkout modal	2026-07-11 19:47:04 -05:00
mono	beb5e153f3	#45 feat: update login prompt message with contact info and icons	2026-07-11 19:39:36 -05:00
mono	3e19b3d272	#45 feat: hide total price when quantity is 0	2026-07-11 19:05:07 -05:00
mono	b21d3a0ca6	#45 fix: cart toggle button not working on mobile	2026-07-11 18:59:46 -05:00
mono	3029e6d4b9	#45 feat: clean catalog view on mobile devices	2026-07-11 18:56:45 -05:00
mono	92483a110a	Merge pull request 'fix/catalog-image-overlap' (#44 ) from fix/catalog-image-overlap into main Reviewed-on: #44	2026-07-03 19:21:40 -05:00
mono	a89af0f0bb	#fix: búsqueda insensible a tildes en el catálogo Normaliza los strings eliminando diacríticos (NFD) antes de comparar, para que 'cafe' encuentre 'café' y viceversa.	2026-07-03 19:06:40 -05:00
mono	b2a47c44dc	#fix: scroll al inicio del grid al cambiar página en el catálogo El método scrollToTop usaba scrollIntoView en un elemento sticky, lo que no generaba desplazamiento. Ahora calcula la posición absoluta del grid de productos y hace scroll suave.	2026-07-03 18:58:00 -05:00
mono	2c2082266e	#fix: corregir solapamiento de imagen en tarjetas del catálogo - Cambiar height: 100% por aspect-ratio: 1 en .product-image-container - Eliminar media queries duplicados y obsoletos - El contenedor ahora se ajusta al tamaño real del v-img	2026-07-03 18:52:33 -05:00