From ad2d4944818e40dc90482d2d8fee9a942cfcfd8d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 27 Jul 2024 22:55:40 -0300
Subject: [PATCH 01/14] Create CardList component

---
 src/components/ui/CardList.vue       | 44 +++++++++++++++++++
 src/css/app.scss                     | 10 ++++-
 src/css/quasar.variables.scss        |  2 +-
 src/pages/Account/AddressList.vue    | 66 +++++++++++-----------------
 src/pages/Ecomerce/PendingOrders.vue |  7 +++
 src/router/routes.js                 |  5 +++
 6 files changed, 91 insertions(+), 43 deletions(-)
 create mode 100644 src/components/ui/CardList.vue
 create mode 100644 src/pages/Ecomerce/PendingOrders.vue

diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
new file mode 100644
index 00000000..6846aa3a
--- /dev/null
+++ b/src/components/ui/CardList.vue
@@ -0,0 +1,44 @@
+<script setup>
+const props = defineProps({
+    clickable: { type: Boolean, default: true },
+    rounded: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = () => {
+    if (props.clickable) {
+        emit('click');
+    }
+};
+</script>
+
+<template>
+    <QCard
+        v-bind="$attrs"
+        v-ripple="clickable"
+        flat
+        class="full-width row items-center justify-between card no-border-radius"
+        :class="{ 'cursor-pointer': clickable, 'no-radius': !rounded }"
+        @click="handleClick()"
+    >
+        <QCardSection class="no-padding">
+            <div class="row">
+                <slot name="prepend" />
+                <div>
+                    <slot name="content" />
+                </div>
+            </div>
+        </QCardSection>
+        <QCardSection class="no-padding" side>
+            <slot name="actions" />
+        </QCardSection>
+    </QCard>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    border-bottom: 1px solid $gray-light;
+    padding: 20px;
+}
+</style>
diff --git a/src/css/app.scss b/src/css/app.scss
index 90a9aa79..d802cb22 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,8 +1,8 @@
 // app global css in SCSS form
 
 @font-face {
-  font-family: Poppins;
-  src: url(./poppins.ttf) format('truetype');
+    font-family: Poppins;
+    src: url(./poppins.ttf) format('truetype');
 }
 @font-face {
     font-family: 'Open Sans';
@@ -36,3 +36,9 @@ a.link {
 .q-page-sticky.fixed-bottom-right {
     margin: 18px;
 }
+.no-border-radius {
+    border-radius: 0 !important;
+}
+.no-padding {
+    padding: 0 !important;
+}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 3707107b..b0df8536 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -15,7 +15,7 @@
 $primary: #1a1a1a;
 $secondary: #26a69a;
 $accent: #8cc63f;
-
+$gray-light: #ddd;
 $dark: #1d1d1d;
 $dark-page: #121212;
 
diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 3c56b2aa..6aa920a5 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -3,6 +3,8 @@ import { useI18n } from 'vue-i18n';
 import { ref, onMounted, inject } from 'vue';
 import { useRouter } from 'vue-router';
 
+import CardList from 'src/components/ui/CardList.vue';
+
 import useNotify from 'src/composables/useNotify.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
 
@@ -99,36 +101,33 @@ onMounted(async () => {
             style="max-width: 544px"
             separator
         >
-            <QItem
+            <CardList
                 v-for="(address, index) in addresses"
                 :key="index"
-                clickable
-                v-ripple
+                :rounded="false"
                 tag="label"
-                class="full-width row items-center justify-between address-item"
-                style="padding: 20px"
             >
-                <QItemSection>
-                    <div class="row">
-                        <QRadio
-                            v-model="defaultAddress"
-                            :val="address.id"
-                            class="q-mr-sm"
-                            @update:model-value="changeDefaultAddress"
-                        />
-                        <div>
-                            <QItemLabel class="text-bold q-mb-sm">
-                                {{ address.nickname }}
-                            </QItemLabel>
-                            <QItemLabel>{{ address.street }}</QItemLabel>
-                            <QItemLabel>
-                                {{ address.postalCode }},
-                                {{ address.city }}
-                            </QItemLabel>
-                        </div>
+                <template #prepend>
+                    <QRadio
+                        v-model="defaultAddress"
+                        :val="address.id"
+                        class="q-mr-sm"
+                        @update:model-value="changeDefaultAddress"
+                    />
+                </template>
+                <template #content>
+                    <div>
+                        <QItemLabel class="text-bold q-mb-sm">
+                            {{ address.nickname }}
+                        </QItemLabel>
+                        <QItemLabel>{{ address.street }}</QItemLabel>
+                        <QItemLabel>
+                            {{ address.postalCode }},
+                            {{ address.city }}
+                        </QItemLabel>
                     </div>
-                </QItemSection>
-                <QItemSection class="actions-wrapper" side>
+                </template>
+                <template #actions>
                     <QBtn
                         icon="delete"
                         flat
@@ -147,25 +146,12 @@ onMounted(async () => {
                         rounded
                         @click.stop="goToAddressDetails(address.id)"
                     />
-                </QItemSection>
-            </QItem>
+                </template>
+            </CardList>
         </QList>
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.address-item {
-    .actions-wrapper {
-        visibility: hidden;
-    }
-    &:hover {
-        .actions-wrapper {
-            visibility: visible;
-        }
-    }
-}
-</style>
-
 <i18n lang="yaml">
 en-US:
     addAddress: Add address
diff --git a/src/pages/Ecomerce/PendingOrders.vue b/src/pages/Ecomerce/PendingOrders.vue
new file mode 100644
index 00000000..32da5694
--- /dev/null
+++ b/src/pages/Ecomerce/PendingOrders.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template></template>
+
+<style lang="scss" scoped></style>
+
+<i18n lang="yaml"></i18n>
diff --git a/src/router/routes.js b/src/router/routes.js
index 4be3a3ea..db961d11 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -49,6 +49,11 @@ const routes = [
                 path: '/ecomerce/invoices',
                 component: () => import('pages/Ecomerce/Invoices.vue')
             },
+            {
+                name: 'PendingOrders',
+                path: '/ecomerce/pending',
+                component: () => import('pages/Ecomerce/PendingOrders.vue')
+            },
             {
                 name: 'catalog',
                 path: '/ecomerce/catalog/:category?/:type?',
-- 
2.40.1


From 745e9a569c6e3dd8f6794354aa9a74284821af74 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 28 Jul 2024 18:45:38 -0300
Subject: [PATCH 02/14] Translation files, pending orders, and more changes

---
 src/components/common/VnForm.vue     |   2 +-
 src/components/ui/CardList.vue       |  18 ++--
 src/filters/index.js                 |   3 +
 src/filters/toCurrency.js            |  18 ++++
 src/i18n/ca-ES/index.js              |  53 +++++++++++
 src/i18n/en-US/index.js              |  11 ++-
 src/i18n/es-ES/index.js              |  11 ++-
 src/i18n/fr-FR/index.js              |  53 +++++++++++
 src/i18n/index.js                    |  14 ++-
 src/i18n/pt-PT/index.js              |  54 +++++++++++
 src/pages/Account/AccountConfig.vue  |   2 +-
 src/pages/Account/AddressDetails.vue |   2 +-
 src/pages/Account/AddressList.vue    |  28 +++---
 src/pages/Ecomerce/PendingOrders.vue | 132 ++++++++++++++++++++++++++-
 src/router/index.js                  |  27 +++---
 src/router/routes.js                 |  14 +--
 16 files changed, 384 insertions(+), 58 deletions(-)
 create mode 100644 src/filters/index.js
 create mode 100644 src/filters/toCurrency.js
 create mode 100644 src/i18n/ca-ES/index.js
 create mode 100644 src/i18n/fr-FR/index.js
 create mode 100644 src/i18n/pt-PT/index.js

diff --git a/src/components/common/VnForm.vue b/src/components/common/VnForm.vue
index 450f7000..6df7c4da 100644
--- a/src/components/common/VnForm.vue
+++ b/src/components/common/VnForm.vue
@@ -197,7 +197,7 @@ defineExpose({
                 :class="{ 'q-mt-md': showBottomActions }"
             >
                 <QBtn
-                    v-if="defaultActions"
+                    v-if="defaultActions && showBottomActions"
                     :label="t('cancel')"
                     :icon="showBottomActions ? undefined : 'check'"
                     rounded
diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 6846aa3a..0f7211ad 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -14,26 +14,26 @@ const handleClick = () => {
 </script>
 
 <template>
-    <QCard
+    <QItem
         v-bind="$attrs"
         v-ripple="clickable"
-        flat
-        class="full-width row items-center justify-between card no-border-radius"
+        :clickable="clickable"
+        class="full-width row items-center justify-between card no-border-radius bg-white"
         :class="{ 'cursor-pointer': clickable, 'no-radius': !rounded }"
         @click="handleClick()"
     >
-        <QCardSection class="no-padding">
+        <QItemSection class="no-padding">
             <div class="row">
                 <slot name="prepend" />
-                <div>
+                <div class="column">
                     <slot name="content" />
                 </div>
             </div>
-        </QCardSection>
-        <QCardSection class="no-padding" side>
+        </QItemSection>
+        <QItemSection class="no-padding" side>
             <slot name="actions" />
-        </QCardSection>
-    </QCard>
+        </QItemSection>
+    </QItem>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/filters/index.js b/src/filters/index.js
new file mode 100644
index 00000000..fea1f668
--- /dev/null
+++ b/src/filters/index.js
@@ -0,0 +1,3 @@
+import toCurrency from './toCurrency';
+
+export { toCurrency };
diff --git a/src/filters/toCurrency.js b/src/filters/toCurrency.js
new file mode 100644
index 00000000..e66bee1c
--- /dev/null
+++ b/src/filters/toCurrency.js
@@ -0,0 +1,18 @@
+import { useI18n } from 'vue-i18n';
+
+export default function (value, symbol = 'EUR', fractionSize = 2) {
+    if (value == null || value === '') value = 0;
+
+    const { locale } = useI18n();
+
+    const options = {
+        style: 'currency',
+        currency: symbol,
+        minimumFractionDigits: fractionSize,
+        maximumFractionDigits: fractionSize
+    };
+
+    const lang = locale.value === 'es' ? 'de' : locale.value;
+
+    return new Intl.NumberFormat(lang, options).format(value);
+}
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
new file mode 100644
index 00000000..7f212154
--- /dev/null
+++ b/src/i18n/ca-ES/index.js
@@ -0,0 +1,53 @@
+export default {
+    date: {
+        days: [
+            'Diumenge',
+            'Dilluns',
+            'Dimarts',
+            'Dimecres',
+            'Dijous',
+            'Divendres',
+            'Dissabte'
+        ],
+        daysShort: ['Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds'],
+        months: [
+            'Gener',
+            'Febrer',
+            'Març',
+            'Abril',
+            'Maig',
+            'Juny',
+            'Juliol',
+            'Agost',
+            'Setembre',
+            'Octubre',
+            'Novembre',
+            'Desembre'
+        ],
+        shortMonths: [
+            'Gen',
+            'Feb',
+            'Mar',
+            'Abr',
+            'Mai',
+            'Jun',
+            'Jul',
+            'Ago',
+            'Set',
+            'Oct',
+            'Nov',
+            'Des'
+        ]
+    },
+    of: 'de',
+    // Menu
+    home: 'Inici',
+    catalog: 'Catàleg',
+    pendingOrders: 'Comandes pendents',
+    confirmedOrders: 'Comandes confirmades',
+    invoices: 'Factures',
+    agencyPackages: 'Paquets per agència',
+    accountConfig: 'Configuració',
+    addressesList: 'Adreces',
+    addressDetails: 'Configuració'
+};
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 29893866..df4b5f1d 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -56,6 +56,14 @@ export default {
     // menu
     home: 'Home',
     catalog: 'Catalog',
+    pendingOrders: 'Pending orders',
+    confirmedOrders: 'Confirmed orders',
+    invoices: 'Invoices',
+    agencyPackages: 'Bundles by agency',
+    accountConfig: 'Configuration',
+    addressesList: 'Addresses',
+    addressDetails: 'Configuration',
+
     orders: 'Orders',
     order: 'Pending order',
     ticket: 'Order',
@@ -76,5 +84,6 @@ export default {
     addressEdit: 'Edit address',
     dataSaved: 'Data saved',
     save: 'Save',
-    cancel: 'Cancel'
+    cancel: 'Cancel',
+    of: 'of'
 };
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index a2f3350a..7c80f20b 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -65,6 +65,14 @@ export default {
     // Menu
     home: 'Inicio',
     catalog: 'Catálogo',
+    pendingOrders: 'Pedidos pendientes',
+    confirmedOrders: 'Pedidos confirmados',
+    invoices: 'Facturas',
+    agencyPackages: 'Bultos por agencia',
+    accountConfig: 'Configuración',
+    addressesList: 'Direcciones',
+    addressDetails: 'Configuración',
+
     orders: 'Pedidos',
     order: 'Pedido pendiente',
     ticket: 'Pedido',
@@ -94,5 +102,6 @@ export default {
     addressEdit: 'Editar dirección',
     dataSaved: 'Datos guardados',
     save: 'Guardar',
-    cancel: 'Cancelar'
+    cancel: 'Cancelar',
+    of: 'de'
 };
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
new file mode 100644
index 00000000..84c0cc77
--- /dev/null
+++ b/src/i18n/fr-FR/index.js
@@ -0,0 +1,53 @@
+export default {
+    date: {
+        days: [
+            'Dimanche',
+            'Lundi',
+            'Mardi',
+            'Mercredi',
+            'Jeudi',
+            'Vendredi',
+            'Samedi'
+        ],
+        daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
+        months: [
+            'Janvier',
+            'Février',
+            'Mars',
+            'Avril',
+            'Mai',
+            'Juin',
+            'Juillet',
+            'Août',
+            'Septembre',
+            'Octobre',
+            'Novembre',
+            'Décembre'
+        ],
+        shortMonths: [
+            'Jan',
+            'Fév',
+            'Mar',
+            'Avr',
+            'Mai',
+            'Juin',
+            'Juil',
+            'Aoû',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Déc'
+        ]
+    },
+    of: 'de',
+    // Menu
+    home: 'Accueil',
+    catalog: 'Catalogue',
+    pendingOrders: 'Commandes en attente',
+    confirmedOrders: 'Commandes confirmées',
+    invoices: 'Factures',
+    agencyPackages: 'Liste par agence',
+    accountConfig: 'Configuration',
+    addressesList: 'Adresses',
+    addressDetails: 'Configuration'
+};
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 6691d176..93354936 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1,7 +1,13 @@
-import enUS from './en-US'
-import esES from './es-ES'
+import enUS from './en-US';
+import esES from './es-ES';
+import frFR from './fr-FR';
+import ptPT from './pt-PT';
+import caES from './ca-ES';
 
 export default {
     'en-US': enUS,
-    'es-ES': esES
-}
+    'es-ES': esES,
+    'fr-FR': frFR,
+    'pt-PT': ptPT,
+    'ca-ES': caES
+};
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
new file mode 100644
index 00000000..f1a48a7d
--- /dev/null
+++ b/src/i18n/pt-PT/index.js
@@ -0,0 +1,54 @@
+export default {
+    date: {
+        days: [
+            'Domingo',
+            'Segunda-feira',
+            'Terça-feira',
+            'Quarta-feira',
+            'Quinta-feira',
+            'Sexta-feira',
+            'Sábado'
+        ],
+        daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
+        months: [
+            'Janeiro',
+            'Fevereiro',
+            'Março',
+            'Abril',
+            'Maio',
+            'Junho',
+            'Julho',
+            'Agosto',
+            'Setembro',
+            'Outubro',
+            'Novembro',
+            'Dezembro'
+        ],
+        shortMonths: [
+            'Jan',
+            'Fev',
+            'Mar',
+            'Abr',
+            'Mai',
+            'Jun',
+            'Jul',
+            'Ago',
+            'Set',
+            'Out',
+            'Nov',
+            'Dez'
+        ]
+    },
+    of: 'de',
+
+    // Menu
+    home: 'Principio',
+    catalog: 'Catálogo',
+    pendingOrders: 'Pedidos pendentes',
+    confirmedOrders: 'Pedidos confirmados',
+    invoices: 'Facturas',
+    agencyPackages: 'Bultos por agencia',
+    accountConfig: 'Configuração',
+    addressesList: 'Moradas',
+    addressDetails: 'Configuração'
+};
diff --git a/src/pages/Account/AccountConfig.vue b/src/pages/Account/AccountConfig.vue
index a82e361e..3109c0e3 100644
--- a/src/pages/Account/AccountConfig.vue
+++ b/src/pages/Account/AccountConfig.vue
@@ -50,7 +50,7 @@ onMounted(() => fetchLanguagesSql());
                     icon="location_on"
                     rounded
                     no-caps
-                    :to="{ name: 'AddressesList' }"
+                    :to="{ name: 'addressesList' }"
                 />
                 <QBtn
                     :label="t('changePassword')"
diff --git a/src/pages/Account/AddressDetails.vue b/src/pages/Account/AddressDetails.vue
index c41b47e9..33bbcfb4 100644
--- a/src/pages/Account/AddressDetails.vue
+++ b/src/pages/Account/AddressDetails.vue
@@ -32,7 +32,7 @@ watch(
     async val => await getProvinces(val)
 );
 
-const goBack = () => router.push({ name: 'AddressesList' });
+const goBack = () => router.push({ name: 'addressesList' });
 
 const getCountries = async () => {
     countriesOptions.value = await jApi.query(
diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 6aa920a5..812cf19a 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -19,7 +19,7 @@ const defaultAddress = ref(null);
 const clientId = ref(null);
 
 const goToAddressDetails = (id = 0) =>
-    router.push({ name: 'AddressDetails', params: { id } });
+    router.push({ name: 'addressDetails', params: { id } });
 
 const getDefaultAddress = async () => {
     try {
@@ -95,12 +95,8 @@ onMounted(async () => {
             no-caps
         />
     </Teleport>
-    <QPage class="column items-center">
-        <QList
-            class="full-width rounded-borders shadow-1 shadow-transition"
-            style="max-width: 544px"
-            separator
-        >
+    <QPage class="vn-w-sm">
+        <QList class="rounded-borders shadow-1 shadow-transition" separator>
             <CardList
                 v-for="(address, index) in addresses"
                 :key="index"
@@ -116,16 +112,14 @@ onMounted(async () => {
                     />
                 </template>
                 <template #content>
-                    <div>
-                        <QItemLabel class="text-bold q-mb-sm">
-                            {{ address.nickname }}
-                        </QItemLabel>
-                        <QItemLabel>{{ address.street }}</QItemLabel>
-                        <QItemLabel>
-                            {{ address.postalCode }},
-                            {{ address.city }}
-                        </QItemLabel>
-                    </div>
+                    <span class="text-bold q-mb-sm">
+                        {{ address.nickname }}
+                    </span>
+                    <span>{{ address.street }}</span>
+                    <span>
+                        {{ address.postalCode }},
+                        {{ address.city }}
+                    </span>
                 </template>
                 <template #actions>
                     <QBtn
diff --git a/src/pages/Ecomerce/PendingOrders.vue b/src/pages/Ecomerce/PendingOrders.vue
index 32da5694..8c13a7b1 100644
--- a/src/pages/Ecomerce/PendingOrders.vue
+++ b/src/pages/Ecomerce/PendingOrders.vue
@@ -1,7 +1,133 @@
-<script setup></script>
+<script setup>
+import { ref, inject, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { date } from 'quasar';
 
-<template></template>
+import CardList from 'src/components/ui/CardList.vue';
+import { toCurrency } from 'src/filters/index';
+import { useVnConfirm } from 'src/composables/useVnConfirm.js';
+import useNotify from 'src/composables/useNotify.js';
+
+const jApi = inject('jApi');
+const { t, locale } = useI18n();
+const globalI18n = useI18n({ useScope: 'global' });
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+
+const orders = ref([]);
+
+const getOrders = async () => {
+    try {
+        orders.value = await jApi.query(
+            `SELECT o.id, o.sent, o.deliveryMethodFk, o.taxableBase,
+        a.nickname, am.description agency
+        FROM myOrder o
+        JOIN myAddress a ON a.id = o.addressFk
+        JOIN vn.agencyMode am ON am.id = o.agencyModeFk
+        WHERE NOT o.isConfirmed
+        ORDER BY o.sent DESC`
+        );
+    } catch (error) {
+        console.error('Error getting orders:', error);
+    }
+};
+
+const formatDateTitle = timeStamp => {
+    const formattedString = date.formatDate(
+        timeStamp,
+        `dddd, D [${t('of')}] MMMM [${t('of')}] YYYY`,
+        {
+            days: globalI18n.messages.value[locale.value].date.days,
+            months: globalI18n.messages.value[locale.value].date.months
+        }
+    );
+    return formattedString;
+};
+
+const removeOrder = async (id, index) => {
+    try {
+        await jApi.execQuery(
+            `START TRANSACTION;
+            DELETE FROM hedera.myOrder WHERE ((id = #id));
+            COMMIT`,
+            {
+                id
+            }
+        );
+        orders.value.splice(index, 1);
+        notify(t('dataSaved'), 'positive');
+    } catch (error) {
+        console.error('Error removing order:', error);
+    }
+};
+
+onMounted(async () => {
+    getOrders();
+});
+</script>
+
+<template>
+    <Teleport :to="$actions">
+        <QBtn
+            to="/ecomerce/basket"
+            icon="shopping_cart"
+            :label="$t('shoppingCart')"
+            rounded
+            no-caps
+        />
+    </Teleport>
+    <QPage class="vn-w-sm">
+        <CardList v-for="(order, index) in orders" :key="index">
+            <template #content>
+                <span class="text-bold q-mb-sm">{{
+                    formatDateTitle(order.sent)
+                }}</span>
+                <span> #{{ order.id }} </span>
+                <span>{{ order.nickname }}</span>
+                <span>{{ order.agency }}</span>
+                <span>{{ toCurrency(order.taxableBase) }}</span>
+            </template>
+            <template #actions>
+                <QBtn
+                    icon="delete"
+                    flat
+                    rounded
+                    @click.stop="
+                        openConfirmationModal(
+                            null,
+                            t('areYouSureDeleteOrder'),
+                            () => removeOrder(order.id, index)
+                        )
+                    "
+                />
+                <QBtn
+                    icon="shopping_bag"
+                    flat
+                    rounded
+                    :to="{ name: 'basket', params: { id: order.id } }"
+                    @click.stop="goToAddressDetails(address.id)"
+                />
+            </template>
+        </CardList>
+    </QPage>
+</template>
 
 <style lang="scss" scoped></style>
 
-<i18n lang="yaml"></i18n>
+<i18n lang="yaml">
+en-US:
+    newOrder: New order
+    areYouSureDeleteOrder: Are you sure you want to delete the order?
+es-ES:
+    newOrder: Nuevo pedido
+    areYouSureDeleteOrder: ¿Seguro que quieres borrar el pedido?
+ca-ES:
+    newOrder: Nova comanda
+    areYouSureDeleteOrder: Segur que vols esborrar la comanda?
+fr-FR:
+    newOrder: Nouvelle commande
+    areYouSureDeleteOrder: Êtes-vous sûr de vouloir supprimer la commande?
+pt-PT:
+    newOrder: Novo pedido
+    areYouSureDeleteOrder: Tem certeza de que deseja excluir o pedido?
+</i18n>
diff --git a/src/router/index.js b/src/router/index.js
index 11fc08fc..cbb3e2a3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,12 +1,13 @@
-import { route } from 'quasar/wrappers'
-import { appStore } from 'stores/app'
+import { route } from 'quasar/wrappers';
+import { appStore } from 'stores/app';
 import {
     createRouter,
     createMemoryHistory,
     createWebHistory,
     createWebHashHistory
-} from 'vue-router'
-import routes from './routes'
+} from 'vue-router';
+import routes from './routes';
+import { i18n } from 'src/boot/i18n';
 
 /*
  * If not building with SSR mode, you can
@@ -22,7 +23,7 @@ export default route(function (/* { store, ssrContext } */) {
         ? createMemoryHistory
         : process.env.VUE_ROUTER_MODE === 'history'
             ? createWebHistory
-            : createWebHashHistory
+            : createWebHashHistory;
 
     const Router = createRouter({
         scrollBehavior: () => ({ left: 0, top: 0 }),
@@ -34,18 +35,18 @@ export default route(function (/* { store, ssrContext } */) {
         history: createHistory(
             process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
         )
-    })
+    });
 
     Router.afterEach((to, from) => {
-        if (from.name === to.name) return
-        const app = appStore()
+        if (from.name === to.name) return;
+        const app = appStore();
         app.$patch({
-            title: window.i18n.t(to.name || 'home'),
+            title: i18n.global.t(to.name || 'home'),
             subtitle: null,
             useRightDrawer: false,
             rightDrawerOpen: true
-        })
-    })
+        });
+    });
 
-    return Router
-})
+    return Router;
+});
diff --git a/src/router/routes.js b/src/router/routes.js
index db961d11..c2813de0 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -4,7 +4,7 @@ const routes = [
         component: () => import('layouts/LoginLayout.vue'),
         children: [
             {
-                name: 'Login',
+                name: 'login',
                 path: '/login/:email?',
                 component: () => import('pages/Login/LoginView.vue')
             },
@@ -35,7 +35,7 @@ const routes = [
                 component: () => import('src/pages/Cms/HomeView.vue')
             },
             {
-                name: 'orders',
+                name: 'confirmedOrders',
                 path: '/ecomerce/orders',
                 component: () => import('pages/Ecomerce/Orders.vue')
             },
@@ -50,7 +50,7 @@ const routes = [
                 component: () => import('pages/Ecomerce/Invoices.vue')
             },
             {
-                name: 'PendingOrders',
+                name: 'pendingOrders',
                 path: '/ecomerce/pending',
                 component: () => import('pages/Ecomerce/PendingOrders.vue')
             },
@@ -60,22 +60,22 @@ const routes = [
                 component: () => import('pages/Ecomerce/Catalog.vue')
             },
             {
-                name: 'packages',
+                name: 'agencyPackages',
                 path: '/agencies/packages',
                 component: () => import('src/pages/Agencies/PackagesView.vue')
             },
             {
-                name: 'Account',
+                name: 'accountConfig',
                 path: '/account/conf',
                 component: () => import('pages/Account/AccountConfig.vue')
             },
             {
-                name: 'AddressesList',
+                name: 'addressesList',
                 path: '/account/address-list',
                 component: () => import('pages/Account/AddressList.vue')
             },
             {
-                name: 'AddressDetails',
+                name: 'addressDetails',
                 path: '/account/address/:id?',
                 component: () => import('pages/Account/AddressDetails.vue')
             }
-- 
2.40.1


From 67c6f84de37f2440d81f148ba57ea01fa1d15d4d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 2 Aug 2024 21:56:20 -0300
Subject: [PATCH 03/14] Several changes

---
 src/App.vue                                   |  10 +-
 src/boot/app.js                               |  16 +-
 src/components/common/VnInput.vue             |  10 +-
 src/components/ui/CardList.vue                |   4 +-
 src/components/ui/TicketDetails.vue           | 154 +++++++++++++++
 src/components/ui/VnImg.vue                   |  16 +-
 src/filters/index.js                          |   3 -
 src/filters/toCurrency.js                     |  18 --
 src/i18n/ca-ES/index.js                       |   5 +-
 src/i18n/en-US/index.js                       |   3 +
 src/i18n/es-ES/index.js                       |   3 +
 src/i18n/fr-FR/index.js                       |   5 +-
 src/i18n/pt-PT/index.js                       |   5 +-
 src/lib/filters.js                            |  90 +++++----
 src/pages/Ecomerce/BasketView.vue             |   1 +
 src/pages/Ecomerce/Catalog.vue                |   7 +-
 src/pages/Ecomerce/CheckoutView.vue           |   1 +
 src/pages/Ecomerce/Invoices.vue               | 183 ------------------
 src/pages/Ecomerce/InvoicesView.vue           | 170 ++++++++++++++++
 .../Ecomerce/{Orders.vue => OrdersView.vue}   | 155 +++++++--------
 src/pages/Ecomerce/PendingOrders.vue          |  56 +++---
 src/pages/Ecomerce/Ticket.vue                 | 145 --------------
 src/pages/Ecomerce/TicketView.vue             |  74 +++++++
 src/router/index.js                           |   4 +-
 src/router/routes.js                          |  16 +-
 src/stores/app.js                             |  48 ++++-
 src/stores/index.js                           |  10 +-
 27 files changed, 671 insertions(+), 541 deletions(-)
 create mode 100644 src/components/ui/TicketDetails.vue
 delete mode 100644 src/filters/index.js
 delete mode 100644 src/filters/toCurrency.js
 create mode 100644 src/pages/Ecomerce/BasketView.vue
 create mode 100644 src/pages/Ecomerce/CheckoutView.vue
 delete mode 100644 src/pages/Ecomerce/Invoices.vue
 create mode 100644 src/pages/Ecomerce/InvoicesView.vue
 rename src/pages/Ecomerce/{Orders.vue => OrdersView.vue} (63%)
 delete mode 100644 src/pages/Ecomerce/Ticket.vue
 create mode 100644 src/pages/Ecomerce/TicketView.vue

diff --git a/src/App.vue b/src/App.vue
index 69fb8958..54b715a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,10 +2,10 @@
     <router-view />
 </template>
 
-<script>
-import { defineComponent } from 'vue';
+<script setup>
+import { useAppStore } from 'stores/app';
+import { onBeforeMount } from 'vue';
+const appStore = useAppStore();
 
-export default defineComponent({
-    name: 'App'
-});
+onBeforeMount(() => appStore.init());
 </script>
diff --git a/src/boot/app.js b/src/boot/app.js
index 824a26a1..0f2f46e0 100644
--- a/src/boot/app.js
+++ b/src/boot/app.js
@@ -1,10 +1,10 @@
-import { boot } from 'quasar/wrappers'
-import { appStore } from 'stores/app'
-import { userStore } from 'stores/user'
+import { boot } from 'quasar/wrappers';
+import { useAppStore } from 'stores/app';
+import { userStore } from 'stores/user';
 
 export default boot(({ app }) => {
-    const props = app.config.globalProperties
-    props.$app = appStore()
-    props.$user = userStore()
-    props.$actions = document.createElement('div')
-})
+    const props = app.config.globalProperties;
+    props.$app = useAppStore();
+    props.$user = userStore();
+    props.$actions = document.createElement('div');
+});
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 62984159..f8af8001 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -9,7 +9,7 @@ const emit = defineEmits([
     'remove'
 ]);
 
-const $props = defineProps({
+const props = defineProps({
     modelValue: {
         type: [String, Number],
         default: null
@@ -33,7 +33,7 @@ const requiredFieldRule = val => !!val || t('globals.fieldRequired');
 const vnInputRef = ref(null);
 const value = computed({
     get() {
-        return $props.modelValue;
+        return props.modelValue;
     },
     set(value) {
         emit('update:modelValue', value);
@@ -41,7 +41,7 @@ const value = computed({
 });
 const hover = ref(false);
 const styleAttrs = computed(() => {
-    return $props.isOutlined
+    return props.isOutlined
         ? { dense: true, outlined: true, rounded: true }
         : {};
 });
@@ -88,9 +88,7 @@ const inputRules = [
             <template #append>
                 <slot v-if="$slots.append && !$attrs.disabled" name="append" />
                 <QIcon
-                    v-if="
-                        hover && value && !$attrs.disabled && $props.clearable
-                    "
+                    v-if="hover && value && !$attrs.disabled && props.clearable"
                     name="close"
                     size="xs"
                     @click="
diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 0f7211ad..2ff96306 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -23,9 +23,9 @@ const handleClick = () => {
         @click="handleClick()"
     >
         <QItemSection class="no-padding">
-            <div class="row">
+            <div class="row no-wrap">
                 <slot name="prepend" />
-                <div class="column">
+                <div class="column full-width">
                     <slot name="content" />
                 </div>
             </div>
diff --git a/src/components/ui/TicketDetails.vue b/src/components/ui/TicketDetails.vue
new file mode 100644
index 00000000..b2cf0189
--- /dev/null
+++ b/src/components/ui/TicketDetails.vue
@@ -0,0 +1,154 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { currency, formatDateTitle } from 'src/lib/filters.js';
+import VnImg from 'src/components/ui/VnImg.vue';
+
+defineProps({
+    ticket: {
+        type: Object,
+        default: () => ({})
+    },
+    rows: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const { t } = useI18n();
+
+const lineDiscountSubtotal = line => {
+    return line.quantity * line.price;
+};
+
+const lineSubtotal = line => {
+    const discount = line.discount;
+    return lineDiscountSubtotal(line) * ((100 - discount) / 100);
+};
+</script>
+
+<template>
+    <QCard class="vn-w-sm" style="padding: 32px">
+        <QCardSection class="no-padding q-mb-md">
+            <div class="text-h6">#{{ ticket.id }}</div>
+        </QCardSection>
+        <QCardSection class="no-padding q-mb-md">
+            <div class="text-subtitle1 text-bold">
+                {{ t('shippingInformation') }}
+            </div>
+            <div>
+                {{ t('preparation') }}
+                {{ formatDateTitle(ticket.shipped) }}
+            </div>
+            <div>
+                {{ t('delivery') }}
+                {{ formatDateTitle(ticket.shipped) }}
+            </div>
+            <div>
+                {{ t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse') }}
+                {{ ticket.agency }}
+            </div>
+        </QCardSection>
+        <QCardSection class="no-padding q-mb-md">
+            <div class="text-subtitle1 text-bold">
+                {{ t('deliveryAddress') }}
+            </div>
+            <div>{{ ticket.nickname }}</div>
+            <div>{{ ticket.street }}</div>
+            <div>
+                {{ ticket.postalCode }} {{ ticket.city }} ({{
+                    ticket.province
+                }})
+            </div>
+        </QCardSection>
+        <QCardSection
+            class="no-padding q-mb-md text-subtitle1 text-bold column"
+        >
+            <span class="text-right">
+                {{ t('total') }} {{ currency(ticket.taxBase) }}
+            </span>
+            <span class="text-right">
+                {{ t('totalTax') }} {{ currency(ticket.total) }}
+            </span>
+        </QCardSection>
+        <QSeparator inset />
+        <QList v-for="row in rows" :key="row.itemFk">
+            <QItem>
+                <QItemSection avatar>
+                    <VnImg
+                        storage="catalog"
+                        size="200x200"
+                        :id="row.image"
+                        rounded
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QItemLabel lines="1">
+                        {{ row.concept }}
+                    </QItemLabel>
+                    <QItemLabel lines="1" caption>
+                        {{ row.value5 }} {{ row.value6 }} {{ row.value7 }}
+                    </QItemLabel>
+                    <QItemLabel lines="1">
+                        {{ row.quantity }} x {{ currency(row.price) }}
+                    </QItemLabel>
+                </QItemSection>
+                <QItemSection side class="total">
+                    <QItemLabel>
+                        <span class="discount" v-if="row.discount">
+                            {{ currency(lineDiscountSubtotal(row)) }} -
+                            {{ currency(row.discount) }} =
+                        </span>
+                        {{ currency(lineSubtotal(row)) }}
+                    </QItemLabel>
+                </QItemSection>
+            </QItem>
+        </QList>
+    </QCard>
+</template>
+
+<i18n lang="yaml">
+en-US:
+    shippingInformation: Shipping Information
+    preparation: Preparation
+    delivery: Delivery
+    agency: Agency
+    warehouse: Store
+    deliveryAddress: Delivery address
+    total: Total
+    totalTax: Total + IVA
+es-ES:
+    shippingInformation: Datos de envío
+    preparation: Preparación
+    delivery: Entrega
+    agency: Agencia
+    warehouse: Almacén
+    deliveryAddress: Dirección de entrega
+    total: Total
+    totalTax: Total + IVA
+ca-ES:
+    shippingInformation: Dades d'enviament
+    preparation: Preparació
+    delivery: Lliurament
+    agency: Agència
+    warehouse: Magatzem
+    deliveryAddress: Adreça de lliurament
+    total: Total
+    totalTax: Total + IVA
+fr-FR:
+    shippingInformation: Informations sur la livraison
+    preparation: Préparation
+    delivery: Livraison
+    warehouse: Entrepôt
+    deliveryAddress: Adresse de livraison
+    total: Total
+    totalTax: Total + IVA
+pt-PT:
+    shippingInformation: Dados de envio
+    preparation: Preparação
+    delivery: Entrega
+    agency: Agência
+    warehouse: Armazém
+    deliveryAddress: Endereço de entrega
+    total: Total
+    totalTax: Total + IVA
+</i18n>
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index f4e8a36c..31197336 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { appStore } from 'stores/app';
+import { useAppStore } from 'stores/app';
 
-const $props = defineProps({
+const props = defineProps({
     baseURL: {
         type: String,
         default: null
@@ -23,23 +23,27 @@ const $props = defineProps({
     id: {
         type: Number,
         required: true
+    },
+    rounded: {
+        type: Boolean,
+        default: false
     }
 });
-const app = appStore();
+const app = useAppStore();
 const show = ref(false);
 const url = computed(() => {
-    return `${$props.baseURL ?? app.imageUrl}/${$props.storage}/${$props.size}/${$props.id}`;
+    return `${props.baseURL ?? app.imageUrl}/${props.storage}/${props.size}/${props.id}`;
 });
 </script>
 <template>
     <QImg
-        :class="{ zoomIn: $props.zoomSize }"
+        :class="{ zoomIn: props.zoomSize, rounded: props.rounded }"
         :src="url"
         v-bind="$attrs"
         @click="show = !show"
         spinner-color="primary"
     />
-    <QDialog v-model="show" v-if="$props.zoomSize">
+    <QDialog v-model="show" v-if="props.zoomSize">
         <QImg
             :src="url"
             size="full"
diff --git a/src/filters/index.js b/src/filters/index.js
deleted file mode 100644
index fea1f668..00000000
--- a/src/filters/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import toCurrency from './toCurrency';
-
-export { toCurrency };
diff --git a/src/filters/toCurrency.js b/src/filters/toCurrency.js
deleted file mode 100644
index e66bee1c..00000000
--- a/src/filters/toCurrency.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useI18n } from 'vue-i18n';
-
-export default function (value, symbol = 'EUR', fractionSize = 2) {
-    if (value == null || value === '') value = 0;
-
-    const { locale } = useI18n();
-
-    const options = {
-        style: 'currency',
-        currency: symbol,
-        minimumFractionDigits: fractionSize,
-        maximumFractionDigits: fractionSize
-    };
-
-    const lang = locale.value === 'es' ? 'de' : locale.value;
-
-    return new Intl.NumberFormat(lang, options).format(value);
-}
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index 7f212154..cdf4b9ef 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -49,5 +49,8 @@ export default {
     agencyPackages: 'Paquets per agència',
     accountConfig: 'Configuració',
     addressesList: 'Adreces',
-    addressDetails: 'Configuració'
+    addressDetails: 'Configuració',
+    checkout: 'Configurar encàrrec',
+    //
+    orderLoadedIntoBasket: 'Comanda carregada a la cistella!'
 };
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index df4b5f1d..8d4615fe 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -63,6 +63,9 @@ export default {
     accountConfig: 'Configuration',
     addressesList: 'Addresses',
     addressDetails: 'Configuration',
+    checkout: 'Configure order',
+    //
+    orderLoadedIntoBasket: 'Order loaded into basket!',
 
     orders: 'Orders',
     order: 'Pending order',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index 7c80f20b..82b4d6a8 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -72,6 +72,9 @@ export default {
     accountConfig: 'Configuración',
     addressesList: 'Direcciones',
     addressDetails: 'Configuración',
+    checkout: 'Configurar pedido',
+    //
+    orderLoadedIntoBasket: '¡Pedido cargado en la cesta!',
 
     orders: 'Pedidos',
     order: 'Pedido pendiente',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index 84c0cc77..d2ff0528 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -49,5 +49,8 @@ export default {
     agencyPackages: 'Liste par agence',
     accountConfig: 'Configuration',
     addressesList: 'Adresses',
-    addressDetails: 'Configuration'
+    addressDetails: 'Configuration',
+    checkout: "Définissez l'ordre",
+    //
+    orderLoadedIntoBasket: 'Commande chargée dans le panier!'
 };
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index f1a48a7d..f5e8eb51 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -50,5 +50,8 @@ export default {
     agencyPackages: 'Bultos por agencia',
     accountConfig: 'Configuração',
     addressesList: 'Moradas',
-    addressDetails: 'Configuração'
+    addressDetails: 'Configuração',
+    checkout: 'Configurar encomenda',
+    //
+    orderLoadedIntoBasket: 'Pedido carregado na cesta!'
 };
diff --git a/src/lib/filters.js b/src/lib/filters.js
index 10876285..88d3f33b 100644
--- a/src/lib/filters.js
+++ b/src/lib/filters.js
@@ -1,73 +1,87 @@
-import { date as qdate, format } from 'quasar'
-const { pad } = format
+import { i18n } from 'src/boot/i18n';
+import { date as qdate, format } from 'quasar';
+const { pad } = format;
 
-export function currency (val) {
-    return typeof val === 'number' ? val.toFixed(2) + '€' : val
+export function currency(val) {
+    return typeof val === 'number' ? val.toFixed(2) + '€' : val;
 }
 
-export function date (val, format) {
-    if (val == null) return val
+export function date(val, format) {
+    if (val == null) return val;
     if (!(val instanceof Date)) {
-        val = new Date(val)
+        val = new Date(val);
     }
-    return qdate.formatDate(val, format, window.i18n.tm('date'))
+    return qdate.formatDate(val, format, i18n.global.tm('date'));
 }
 
-export function relDate (val) {
-    if (val == null) return val
+export const formatDateTitle = timeStamp => {
+    const { t, messages, locale } = i18n.global;
+    const formattedString = qdate.formatDate(
+        timeStamp,
+        `dddd, D [${t('of')}] MMMM [${t('of')}] YYYY`,
+        {
+            days: messages.value[locale.value].date.days,
+            months: messages.value[locale.value].date.months
+        }
+    );
+    return formattedString;
+};
+
+export function relDate(val) {
+    if (val == null) return val;
     if (!(val instanceof Date)) {
-        val = new Date(val)
+        val = new Date(val);
     }
 
-    const dif = qdate.getDateDiff(new Date(), val, 'days')
-    let day
+    const dif = qdate.getDateDiff(new Date(), val, 'days');
+    let day;
 
     switch (dif) {
         case 0:
-            day = 'today'
-            break
+            day = 'today';
+            break;
         case 1:
-            day = 'yesterday'
-            break
+            day = 'yesterday';
+            break;
         case -1:
-            day = 'tomorrow'
-            break
+            day = 'tomorrow';
+            break;
     }
 
     if (day) {
-        day = window.i18n.t(day)
+        day = i18n.global.t(day);
     } else {
         if (dif > 0 && dif <= 7) {
-            day = qdate.formatDate(val, 'ddd', window.i18n.tm('date'))
+            day = qdate.formatDate(val, 'ddd', i18n.global.tm('date'));
         } else {
-            day = qdate.formatDate(val, 'ddd, MMMM Do', window.i18n.tm('date'))
+            day = qdate.formatDate(val, 'ddd, MMMM Do', i18n.global.tm('date'));
         }
     }
 
-    return day
+    return day;
 }
 
-export function relTime (val) {
-    if (val == null) return val
+export function relTime(val) {
+    if (val == null) return val;
     if (!(val instanceof Date)) {
-        val = new Date(val)
+        val = new Date(val);
     }
-    return relDate(val) + ' ' + qdate.formatDate(val, 'H:mm:ss')
+    return relDate(val) + ' ' + qdate.formatDate(val, 'H:mm:ss');
 }
 
-export function elapsedTime (val) {
-    if (val == null) return val
+export function elapsedTime(val) {
+    if (val == null) return val;
     if (!(val instanceof Date)) {
-        val = new Date(val)
+        val = new Date(val);
     }
-    const now = new Date().getTime()
-    val = Math.floor((now - val.getTime()) / 1000)
+    const now = new Date().getTime();
+    val = Math.floor((now - val.getTime()) / 1000);
 
-    const hours = Math.floor(val / 3600)
-    val -= hours * 3600
-    const minutes = Math.floor(val / 60)
-    val -= minutes * 60
-    const seconds = val
+    const hours = Math.floor(val / 3600);
+    val -= hours * 3600;
+    const minutes = Math.floor(val / 60);
+    val -= minutes * 60;
+    const seconds = val;
 
-    return `${pad(hours, 2)}:${pad(minutes, 2)}:${pad(seconds, 2)}`
+    return `${pad(hours, 2)}:${pad(minutes, 2)}:${pad(seconds, 2)}`;
 }
diff --git a/src/pages/Ecomerce/BasketView.vue b/src/pages/Ecomerce/BasketView.vue
new file mode 100644
index 00000000..baac12d6
--- /dev/null
+++ b/src/pages/Ecomerce/BasketView.vue
@@ -0,0 +1 @@
+<template>Basket view</template>
diff --git a/src/pages/Ecomerce/Catalog.vue b/src/pages/Ecomerce/Catalog.vue
index 0b7220e8..2d712bff 100644
--- a/src/pages/Ecomerce/Catalog.vue
+++ b/src/pages/Ecomerce/Catalog.vue
@@ -346,11 +346,16 @@
 import { date, currency } from 'src/lib/filters.js';
 import { date as qdate } from 'quasar';
 import axios from 'axios';
+import { useAppStore } from 'stores/app';
 
 const CancelToken = axios.CancelToken;
 
 export default {
     name: 'HederaCatalog',
+    setup() {
+        const appStore = useAppStore();
+        return { appStore };
+    },
     data() {
         return {
             uid: 0,
@@ -446,7 +451,7 @@ export default {
             if (!value) return;
 
             const res = await this.$jApi.execQuery(
-                `CALL myBasket_getAvailable;
+                `CALL myOrder_getAvailable(${this.appStore.basketOrderId});
         SELECT DISTINCT t.id, l.name
           FROM vn.item i
             JOIN vn.itemType t ON t.id = i.typeFk
diff --git a/src/pages/Ecomerce/CheckoutView.vue b/src/pages/Ecomerce/CheckoutView.vue
new file mode 100644
index 00000000..5730758d
--- /dev/null
+++ b/src/pages/Ecomerce/CheckoutView.vue
@@ -0,0 +1 @@
+<template>Checkout</template>
diff --git a/src/pages/Ecomerce/Invoices.vue b/src/pages/Ecomerce/Invoices.vue
deleted file mode 100644
index 8509d0ad..00000000
--- a/src/pages/Ecomerce/Invoices.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-    <Teleport :to="$actions">
-        <QSelect
-            v-model="year"
-            :options="years"
-            color="white"
-            dark
-            standout
-            dense
-            rounded
-        />
-    </Teleport>
-    <div class="vn-w-sm">
-        <div
-            v-if="!invoices?.length"
-            class="text-subtitle1 text-center text-grey-7 q-pa-md"
-        >
-            {{ $t('noInvoicesFound') }}
-        </div>
-        <QCard v-if="invoices?.length">
-            <QTable
-                :columns="columns"
-                :pagination="pagination"
-                :rows="invoices"
-                row-key="id"
-                hide-header
-                hide-bottom
-            >
-                <template v-slot:body="props">
-                    <QTr :props="props">
-                        <QTd key="ref" :props="props">
-                            {{ props.row.ref }}
-                        </QTd>
-                        <QTd key="issued" :props="props">
-                            {{ date(props.row.issued, 'ddd, MMMM Do') }}
-                        </QTd>
-                        <QTd key="amount" :props="props">
-                            {{ currency(props.row.amount) }}
-                        </QTd>
-                        <QTd key="hasPdf" :props="props">
-                            <QBtn
-                                v-if="props.row.hasPdf"
-                                icon="download"
-                                :title="$t('downloadInvoicePdf')"
-                                :href="invoiceUrl(props.row.id)"
-                                target="_blank"
-                                flat
-                                round
-                            />
-                            <QIcon
-                                v-else
-                                name="warning"
-                                :title="$t('notDownloadable')"
-                                color="warning"
-                                size="24px"
-                            />
-                        </QTd>
-                    </QTr>
-                </template>
-            </QTable>
-        </QCard>
-    </div>
-</template>
-
-<script>
-import { date, currency } from 'src/lib/filters.js';
-
-export default {
-    name: 'OrdersPendingIndex',
-    data() {
-        const curYear = new Date().getFullYear();
-        const years = [];
-
-        for (let year = curYear - 5; year <= curYear; year++) {
-            years.push(year);
-        }
-
-        return {
-            columns: [
-                { name: 'ref', label: 'serial', field: 'ref', align: 'left' },
-                {
-                    name: 'issued',
-                    label: 'issued',
-                    field: 'issued',
-                    align: 'left'
-                },
-                { name: 'amount', label: 'amount', field: 'amount' },
-                {
-                    name: 'hasPdf',
-                    label: 'download',
-                    field: 'hasPdf',
-                    align: 'center'
-                }
-            ],
-            pagination: {
-                rowsPerPage: 0
-            },
-            year: curYear,
-            years,
-            invoices: null
-        };
-    },
-
-    async mounted() {
-        await this.loadData();
-    },
-
-    watch: {
-        async year() {
-            await this.loadData();
-        }
-    },
-
-    methods: {
-        date,
-        currency,
-
-        async loadData() {
-            const params = {
-                from: new Date(this.year, 0),
-                to: new Date(this.year, 11, 31, 23, 59, 59)
-            };
-            this._invoices = await this.$jApi.query(
-                `SELECT id, ref, issued, amount, hasPdf
-          FROM myInvoice
-          WHERE issued BETWEEN #from AND #to
-          ORDER BY issued DESC
-          LIMIT 500`,
-                params
-            );
-        },
-
-        invoiceUrl(id) {
-            return (
-                '?' +
-                new URLSearchParams({
-                    srv: 'rest:dms/invoice',
-                    invoice: id,
-                    access_token: this.$user.token
-                }).toString()
-            );
-        }
-    }
-};
-</script>
-
-<i18n lang="yaml">
-en-US:
-    noInvoicesFound: No invoices found
-    serial: Serial
-    issued: Date
-    amount: Import
-    downloadInvoicePdf: Download invoice PDF
-    notDownloadable: Not available for download, request the invoice to your salesperson
-es-ES:
-    noInvoicesFound: No se han encontrado facturas
-    serial: Serie
-    issued: Fecha
-    amount: Importe
-    downloadInvoicePdf: Descargar factura en PDF
-    notDownloadable: No disponible para descarga, solicita la factura a tu comercial
-ca-ES:
-    noInvoicesFound: No s'han trobat factures
-    serial: Sèrie
-    issued: Data
-    amount: Import
-    downloadInvoicePdf: Descarregar PDF
-    notDownloadable: No disponible per cescarrega, sol·licita la factura al teu comercial
-fr-FR:
-    noInvoicesFound: Aucune facture trouvée
-    serial: Série
-    issued: Date
-    amount: Montant
-    downloadInvoicePdf: Télécharger le PDF
-    notDownloadable: Non disponible en téléchargement, demander la facture à votre commercial
-pt-PT:
-    noInvoicesFound: Nenhuma fatura encontrada
-    serial: Serie
-    issued: Data
-    amount: Importe
-    downloadInvoicePdf: Baixar PDF
-    notDownloadable: Não disponível para download, solicite a fatura ao seu comercial
-</i18n>
diff --git a/src/pages/Ecomerce/InvoicesView.vue b/src/pages/Ecomerce/InvoicesView.vue
new file mode 100644
index 00000000..c31842db
--- /dev/null
+++ b/src/pages/Ecomerce/InvoicesView.vue
@@ -0,0 +1,170 @@
+<script setup>
+import { ref, onMounted, inject, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { currency } from 'src/lib/filters.js';
+import { date as qdate } from 'quasar';
+import { userStore as useUserStore } from 'stores/user';
+
+const { t } = useI18n();
+const jApi = inject('jApi');
+const userStore = useUserStore();
+
+const currentYear = ref(new Date('2001-01-01').getFullYear());
+const years = ref([]);
+const invoices = ref([]);
+
+const columns = computed(() => [
+    { name: 'ref', label: t('serial'), field: 'ref', align: 'left' },
+    {
+        name: 'issued',
+        label: t('issued'),
+        field: 'issued',
+        align: 'left',
+        format: val => qdate.formatDate(val, 'D MMM YYYY')
+    },
+    {
+        name: 'amount',
+        label: t('amount'),
+        field: 'amount',
+        format: val => currency(val)
+    },
+    {
+        name: 'hasPdf',
+        field: 'hasPdf',
+        align: 'center'
+    }
+]);
+
+const getInvoiceUrl = id => {
+    const params = new URLSearchParams({
+        access_token: userStore.token
+    });
+    return `/api/InvoiceOuts/${id}/download?${params}`;
+};
+
+const fetchInvoices = async () => {
+    const params = {
+        from: new Date(currentYear.value, 0),
+        to: new Date(currentYear.value, 11, 31, 23, 59, 59)
+    };
+    invoices.value = await jApi.query(
+        `SELECT id, ref, issued, amount, hasPdf
+          FROM myInvoice
+          WHERE issued BETWEEN #from AND #to
+          ORDER BY issued DESC
+          LIMIT 100`,
+        params
+    );
+};
+
+onMounted(async () => {
+    await fetchInvoices();
+    for (let year = currentYear.value - 5; year <= currentYear.value; year++) {
+        years.value.push(year);
+    }
+});
+</script>
+
+<template>
+    <Teleport :to="$actions">
+        <QSelect
+            v-model="currentYear"
+            :options="years"
+            color="white"
+            dark
+            standout
+            dense
+            rounded
+            @update:model-value="fetchInvoices()"
+        />
+    </Teleport>
+    <div class="vn-w-sm">
+        <QCard>
+            <!--  -->
+            <QTable
+                :columns="columns"
+                :rows="invoices"
+                :no-data-label="t('noInvoicesFound')"
+                row-key="id"
+                :hide-header="!invoices.length"
+                :rows-per-page-options="[0]"
+            >
+                <template #body-cell-hasPdf="{ row }">
+                    <QTd
+                        auto-width
+                        @click.stop
+                        class="flex full-width justify-center items-center"
+                    >
+                        <QBtn
+                            v-if="row.hasPdf"
+                            icon="download"
+                            :href="getInvoiceUrl(row.id)"
+                            target="_blank"
+                            flat
+                            round
+                        >
+                            <QTooltip>
+                                {{ t('downloadInvoicePdf') }}
+                            </QTooltip>
+                        </QBtn>
+                        <QIcon
+                            v-else
+                            name="warning"
+                            :title="t('notDownloadable')"
+                            color="warning"
+                            size="sm"
+                        >
+                            <QTooltip>
+                                {{ t('requestTheInvoiceToComercial') }}
+                            </QTooltip>
+                        </QIcon>
+                    </QTd>
+                </template>
+            </QTable>
+        </QCard>
+    </div>
+</template>
+
+<i18n lang="yaml">
+en-US:
+    noInvoicesFound: No invoices found
+    serial: Serial
+    issued: Date
+    amount: Import
+    downloadInvoicePdf: Download invoice PDF
+    notDownloadable: Not available for download, request the invoice to your salesperson
+    requestTheInvoiceToComercial: Request the invoice to your salesperson
+es-ES:
+    noInvoicesFound: No se han encontrado facturas
+    serial: Serie
+    issued: Fecha
+    amount: Importe
+    downloadInvoicePdf: Descargar factura en PDF
+    notDownloadable: No disponible para descarga, solicita la factura a tu comercial
+    requestTheInvoiceToComercial: Solicita la factura a tu comercial
+ca-ES:
+    noInvoicesFound: No s'han trobat factures
+    serial: Sèrie
+    issued: Data
+    amount: Import
+    downloadInvoicePdf: Descarregar PDF
+    notDownloadable: No disponible per cescarrega, sol·licita la factura al teu comercial
+    requestTheInvoiceToComercial: Sol·licita la factura al teu comercial
+fr-FR:
+    noInvoicesFound: Aucune facture trouvée
+    serial: Série
+    issued: Date
+    amount: Montant
+    downloadInvoicePdf: Télécharger le PDF
+    notDownloadable: Non disponible en téléchargement, demander la facture à votre commercial
+    requestTheInvoiceToComercial: Demander la facture à votre commercial
+pt-PT:
+    noInvoicesFound: Nenhuma fatura encontrada
+    serial: Serie
+    issued: Data
+    amount: Importe
+    downloadInvoicePdf: Baixar PDF
+    notDownloadable: Não disponível para download, solicite a fatura ao seu comercial
+    requestTheInvoiceToComercial: Solicite a fatura ao seu comercial
+</i18n>
diff --git a/src/pages/Ecomerce/Orders.vue b/src/pages/Ecomerce/OrdersView.vue
similarity index 63%
rename from src/pages/Ecomerce/Orders.vue
rename to src/pages/Ecomerce/OrdersView.vue
index db78e700..a5692da9 100644
--- a/src/pages/Ecomerce/Orders.vue
+++ b/src/pages/Ecomerce/OrdersView.vue
@@ -1,70 +1,112 @@
+<script setup>
+import { ref, onMounted, inject } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardList from 'src/components/ui/CardList.vue';
+
+import { currency, formatDateTitle } from 'src/lib/filters.js';
+import { tpvStore } from 'stores/tpv';
+
+const { t } = useI18n();
+const route = useRoute();
+const jApi = inject('jApi');
+
+const orders = ref(null);
+const debt = ref(0);
+const tpv = tpvStore();
+
+onMounted(async () => {
+    await tpv.check(route);
+
+    orders.value = await jApi.query('CALL myTicket_list(NULL, NULL)');
+    debt.value = await jApi.getValue('SELECT -myClient_getDebt(NULL)');
+});
+
+const onPayClick = async () => {
+    let amount = -debt.value;
+    amount = amount <= 0 ? null : amount;
+
+    let defaultAmountStr = '';
+    if (amount !== null) {
+        defaultAmountStr = amount;
+    }
+
+    amount = prompt(t('amountToPay'), defaultAmountStr);
+
+    if (amount != null) {
+        amount = parseFloat(amount.replace(',', '.'));
+        await tpv.pay(amount);
+    }
+};
+</script>
+
 <template>
     <Teleport :to="$actions">
         <div class="balance">
-            <span class="label">{{ $t('balance') }}</span>
+            <span class="label">{{ t('balance') }}</span>
             <span class="amount" :class="{ negative: debt < 0 }">
                 {{ currency(debt || 0) }}
             </span>
             <QIcon
                 name="info"
-                :title="$t('paymentInfo')"
+                :title="t('paymentInfo')"
                 class="info"
-                size="24px"
+                size="sm"
             />
         </div>
         <QBtn
             icon="payments"
-            :label="$t('makePayment')"
+            :label="t('makePayment')"
             @click="onPayClick()"
             rounded
             no-caps
         />
         <QBtn
-            to="/ecomerce/basket"
+            :to="{ name: 'basket' }"
             icon="shopping_cart"
-            :label="$t('shoppingCart')"
+            :label="t('shoppingCart')"
             rounded
             no-caps
         />
     </Teleport>
-    <div class="vn-w-sm">
+    <QPage class="vn-w-sm">
         <div
             v-if="!orders?.length"
             class="text-subtitle1 text-center text-grey-7 q-pa-md"
         >
-            {{ $t('noOrdersFound') }}
+            {{ t('noOrdersFound') }}
         </div>
-        <QCard v-if="orders?.length">
-            <QList bordered separator padding>
-                <QItem
-                    v-for="order in orders"
-                    :key="order.id"
-                    :to="`ticket/${order.id}`"
-                    clickable
-                    v-ripple
-                >
-                    <QItemSection>
-                        <QItemLabel>
-                            {{ date(order.landed, 'ddd, MMMM Do') }}
-                        </QItemLabel>
-                        <QItemLabel caption>#{{ order.id }}</QItemLabel>
-                        <QItemLabel caption>{{ order.nickname }}</QItemLabel>
-                        <QItemLabel caption>{{ order.agency }}</QItemLabel>
-                    </QItemSection>
-                    <QItemSection side top> {{ order.total }}€ </QItemSection>
-                </QItem>
-            </QList>
-        </QCard>
+        <QList v-if="orders?.length">
+            <CardList
+                v-for="order in orders"
+                :key="order.id"
+                :to="`ticket/${order.id}`"
+                tag="label"
+            >
+                <template #content>
+                    <QItemLabel
+                        class="full-width text-bold q-mb-sm flex row justify-between"
+                    >
+                        <span>{{ formatDateTitle(order.landed) }}</span>
+                        <span>{{ currency(order.total) }}</span>
+                    </QItemLabel>
+                    <QItemLabel>#{{ order.id }}</QItemLabel>
+                    <QItemLabel>{{ order.nickname }}</QItemLabel>
+                    <QItemLabel>{{ order.agency }}</QItemLabel>
+                </template>
+            </CardList>
+        </QList>
         <QPageSticky>
             <QBtn
                 fab
                 icon="add_shopping_cart"
                 color="accent"
-                to="/ecomerce/catalog"
-                :title="$t('startOrder')"
+                :to="{ name: 'catalog' }"
+                :title="t('startOrder')"
             />
         </QPageSticky>
-    </div>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
@@ -92,50 +134,6 @@
 }
 </style>
 
-<script>
-import { date, currency } from 'src/lib/filters.js';
-import { tpvStore } from 'stores/tpv';
-
-export default {
-    name: 'OrdersPendingIndex',
-    data() {
-        return {
-            orders: null,
-            debt: 0,
-            tpv: tpvStore()
-        };
-    },
-
-    async mounted() {
-        await this.tpv.check(this.$route);
-
-        this.orders = await this.$jApi.query('CALL myTicket_list(NULL, NULL)');
-        this.debt = await this.$jApi.getValue('SELECT -myClient_getDebt(NULL)');
-    },
-
-    methods: {
-        date,
-        currency,
-
-        async onPayClick() {
-            let amount = -this.debt;
-            amount = amount <= 0 ? null : amount;
-
-            let defaultAmountStr = '';
-            if (amount !== null) {
-                defaultAmountStr = amount;
-            }
-            amount = prompt(this.$t('amountToPay'), defaultAmountStr);
-
-            if (amount != null) {
-                amount = parseFloat(amount.replace(',', '.'));
-                await this.tpv.pay(amount);
-            }
-        }
-    }
-};
-</script>
-
 <i18n lang="yaml">
 en-US:
     startOrder: Start order
@@ -148,6 +146,7 @@ en-US:
         disregards future orders. For get your order shipped, this amount must be
         equal to or greater than 0. If you want to make a down payment, click the
         payment button, delete the suggested amount and enter the amount you want.
+    amountToPay: 'Amount to pay (€):'
 es-ES:
     startOrder: Empezar pedido
     noOrdersFound: No se encontrado pedidos
@@ -160,6 +159,7 @@ es-ES:
         esta cantidad debe ser igual o mayor que 0. Si quieres realizar una entrega a
         cuenta, pulsa el botón de pago, borra la cantidad sugerida e introduce la
         cantidad que desees.
+    amountToPay: 'Cantidad a pagar (€):'
 ca-ES:
     startOrder: Començar encàrrec
     noOrdersFound: No s'han trobat comandes
@@ -172,6 +172,7 @@ ca-ES:
         enviat, aquesta quantitat ha de ser igual o més gran que 0. Si vols fer un
         lliurament a compte, prem el botó de pagament, esborra la quantitat suggerida
         e introdueix la quantitat que vulguis.
+    amountToPay: 'Quantitat a pagar (€):'
 fr-FR:
     startOrder: Acheter
     noOrdersFound: Aucune commande trouvée
@@ -184,6 +185,7 @@ fr-FR:
         commande est expédiée, ce montant doit être égal ou supérieur à 0. Si vous
         voulez faire un versement, le montant suggéré effacé et entrez le montant que
         vous souhaitez.
+    amountToPay: 'Montant à payer (€):'
 pt-PT:
     startOrder: Iniciar encomenda
     noOrdersFound: Nenhum pedido encontrado
@@ -196,4 +198,5 @@ pt-PT:
         quantidade deve ser igual ou superior a 0. Se queres realizar um depósito à
         conta, clique no botão de pagamento, apague a quantidade sugerida e introduza
         a quantidade que deseje.
+    amountToPay: 'Valor a pagar (€):'
 </i18n>
diff --git a/src/pages/Ecomerce/PendingOrders.vue b/src/pages/Ecomerce/PendingOrders.vue
index 8c13a7b1..b2f872df 100644
--- a/src/pages/Ecomerce/PendingOrders.vue
+++ b/src/pages/Ecomerce/PendingOrders.vue
@@ -1,18 +1,20 @@
 <script setup>
 import { ref, inject, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { date } from 'quasar';
+import { useRouter } from 'vue-router';
 
 import CardList from 'src/components/ui/CardList.vue';
-import { toCurrency } from 'src/filters/index';
+import { currency, formatDateTitle } from 'src/lib/filters.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
 import useNotify from 'src/composables/useNotify.js';
+import { useAppStore } from 'src/stores/app.js';
 
 const jApi = inject('jApi');
-const { t, locale } = useI18n();
-const globalI18n = useI18n({ useScope: 'global' });
+const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
+const store = useAppStore();
+const router = useRouter();
 
 const orders = ref([]);
 
@@ -32,18 +34,6 @@ const getOrders = async () => {
     }
 };
 
-const formatDateTitle = timeStamp => {
-    const formattedString = date.formatDate(
-        timeStamp,
-        `dddd, D [${t('of')}] MMMM [${t('of')}] YYYY`,
-        {
-            days: globalI18n.messages.value[locale.value].date.days,
-            months: globalI18n.messages.value[locale.value].date.months
-        }
-    );
-    return formattedString;
-};
-
 const removeOrder = async (id, index) => {
     try {
         await jApi.execQuery(
@@ -61,6 +51,11 @@ const removeOrder = async (id, index) => {
     }
 };
 
+const loadOrder = orderId => {
+    store.loadIntoBasket(orderId);
+    router.push({ name: 'catalog' });
+};
+
 onMounted(async () => {
     getOrders();
 });
@@ -69,30 +64,34 @@ onMounted(async () => {
 <template>
     <Teleport :to="$actions">
         <QBtn
-            to="/ecomerce/basket"
-            icon="shopping_cart"
-            :label="$t('shoppingCart')"
+            :to="{ name: 'checkout' }"
+            icon="add_shopping_cart"
+            :label="t('newOrder')"
             rounded
             no-caps
         />
     </Teleport>
     <QPage class="vn-w-sm">
-        <CardList v-for="(order, index) in orders" :key="index">
+        <CardList
+            v-for="(order, index) in orders"
+            :key="index"
+            :to="{ name: 'basket', params: { id: order.id } }"
+        >
             <template #content>
-                <span class="text-bold q-mb-sm">{{
+                <QItemLabel class="text-bold q-mb-sm">{{
                     formatDateTitle(order.sent)
-                }}</span>
-                <span> #{{ order.id }} </span>
-                <span>{{ order.nickname }}</span>
-                <span>{{ order.agency }}</span>
-                <span>{{ toCurrency(order.taxableBase) }}</span>
+                }}</QItemLabel>
+                <QItemLabel> #{{ order.id }} </QItemLabel>
+                <QItemLabel>{{ order.nickname }}</QItemLabel>
+                <QItemLabel>{{ order.agency }}</QItemLabel>
+                <QItemLabel>{{ currency(order.taxableBase) }}</QItemLabel>
             </template>
             <template #actions>
                 <QBtn
                     icon="delete"
                     flat
                     rounded
-                    @click.stop="
+                    @click.stop.prevent="
                         openConfirmationModal(
                             null,
                             t('areYouSureDeleteOrder'),
@@ -104,8 +103,7 @@ onMounted(async () => {
                     icon="shopping_bag"
                     flat
                     rounded
-                    :to="{ name: 'basket', params: { id: order.id } }"
-                    @click.stop="goToAddressDetails(address.id)"
+                    @click.stop.prevent="loadOrder(order.id)"
                 />
             </template>
         </CardList>
diff --git a/src/pages/Ecomerce/Ticket.vue b/src/pages/Ecomerce/Ticket.vue
deleted file mode 100644
index d226fe2a..00000000
--- a/src/pages/Ecomerce/Ticket.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-    <Teleport :to="$actions">
-        <QBtn
-            icon="print"
-            :label="$t('printDeliveryNote')"
-            @click="onPrintClick()"
-            rounded
-            no-caps
-        />
-    </Teleport>
-    <div>
-        <QCard class="vn-w-sm">
-            <QCardSection>
-                <div class="text-h6">#{{ ticket.id }}</div>
-            </QCardSection>
-            <QCardSection>
-                <div class="text-h6">{{ $t('shippingInformation') }}</div>
-                <div>
-                    {{ $t('preparation') }}
-                    {{ date(ticket.shipped, 'ddd, MMMM Do') }}
-                </div>
-                <div>
-                    {{ $t('delivery') }}
-                    {{ date(ticket.shipped, 'ddd, MMMM Do') }}
-                </div>
-                <div>
-                    {{ $t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse') }}
-                    {{ ticket.agency }}
-                </div>
-            </QCardSection>
-            <QCardSection>
-                <div class="text-h6">{{ $t('deliveryAddress') }}</div>
-                <div>{{ ticket.nickname }}</div>
-                <div>{{ ticket.street }}</div>
-                <div>
-                    {{ ticket.postalCode }} {{ ticket.city }} ({{
-                        ticket.province
-                    }})
-                </div>
-            </QCardSection>
-            <QSeparator inset />
-            <QList v-for="row in rows" :key="row.itemFk">
-                <QItem>
-                    <QItemSection avatar>
-                        <QAvatar size="68px">
-                            <img
-                                :src="`${$app.imageUrl}/catalog/200x200/${row.image}`"
-                            />
-                        </QAvatar>
-                    </QItemSection>
-                    <QItemSection>
-                        <QItemLabel lines="1">
-                            {{ row.concept }}
-                        </QItemLabel>
-                        <QItemLabel lines="1" caption>
-                            {{ row.value5 }} {{ row.value6 }} {{ row.value7 }}
-                        </QItemLabel>
-                        <QItemLabel lines="1">
-                            {{ row.quantity }} x {{ currency(row.price) }}
-                        </QItemLabel>
-                    </QItemSection>
-                    <QItemSection side class="total">
-                        <QItemLabel>
-                            <span class="discount" v-if="row.discount">
-                                {{ currency(discountSubtotal(row)) }} -
-                                {{ currency(row.discount) }} =
-                            </span>
-                            {{ currency(subtotal(row)) }}
-                        </QItemLabel>
-                    </QItemSection>
-                </QItem>
-            </QList>
-        </QCard>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.total {
-    justify-content: flex-end;
-}
-</style>
-
-<script>
-import { date, currency } from 'src/lib/filters.js';
-
-export default {
-    name: 'OrdersConfirmedView',
-
-    data() {
-        return {
-            ticket: {},
-            rows: null,
-            services: null,
-            packages: null
-        };
-    },
-
-    async mounted() {
-        const params = {
-            ticket: parseInt(this.$route.params.id)
-        };
-        this.ticket = await this.$jApi.getObject(
-            'CALL myTicket_get(#ticket)',
-            params
-        );
-        this.rows = await this.$jApi.query(
-            'CALL myTicket_getRows(#ticket)',
-            params
-        );
-        this.services = await this.$jApi.query(
-            'CALL myTicket_getServices(#ticket)',
-            params
-        );
-        this.packages = await this.$jApi.query(
-            'CALL myTicket_getPackages(#ticket)',
-            params
-        );
-    },
-
-    methods: {
-        date,
-        currency,
-
-        discountSubtotal(line) {
-            return line.quantity * line.price;
-        },
-
-        subtotal(line) {
-            const discount = line.discount;
-            return this.discountSubtotal(line) * ((100 - discount) / 100);
-        },
-
-        onPrintClick() {
-            const params = new URLSearchParams({
-                access_token: this.$user.token,
-                recipientId: this.$user.id,
-                type: 'deliveryNote'
-            });
-            window.open(
-                `/api/Tickets/${this.ticket.id}/delivery-note-pdf?${params.toString()}`
-            );
-        }
-    }
-};
-</script>
diff --git a/src/pages/Ecomerce/TicketView.vue b/src/pages/Ecomerce/TicketView.vue
new file mode 100644
index 00000000..5aecfa35
--- /dev/null
+++ b/src/pages/Ecomerce/TicketView.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { onMounted, inject, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import TicketDetails from 'src/components/ui/TicketDetails.vue';
+
+import { userStore as useUserStore } from 'stores/user';
+
+const { t } = useI18n();
+const jApi = inject('jApi');
+const route = useRoute();
+const userStore = useUserStore();
+
+const ticket = ref({});
+const rows = ref([]);
+const services = ref(null);
+const packages = ref(null);
+
+onMounted(async () => {
+    const params = {
+        ticket: parseInt(route.params.id)
+    };
+    ticket.value = await jApi.getObject('CALL myTicket_get(#ticket)', params);
+    rows.value = await jApi.query('CALL myTicket_getRows(#ticket)', params);
+    services.value = await jApi.query(
+        'CALL myTicket_getServices(#ticket)',
+        params
+    );
+    packages.value = await jApi.query(
+        'CALL myTicket_getPackages(#ticket)',
+        params
+    );
+});
+
+const onPrintClick = () => {
+    const params = new URLSearchParams({
+        access_token: userStore.token,
+        recipientId: userStore.id,
+        type: 'deliveryNote'
+    });
+    window.open(
+        `/api/Tickets/${ticket.value.id}/delivery-note-pdf?${params.toString()}`
+    );
+};
+</script>
+
+<template>
+    <Teleport :to="$actions">
+        <QBtn
+            icon="print"
+            :label="t('printDeliveryNote')"
+            @click="onPrintClick()"
+            rounded
+            no-caps
+        />
+    </Teleport>
+    <QPage>
+        <TicketDetails :rows="rows" :ticket="ticket" />
+    </QPage>
+</template>
+
+<i18n lang="yaml">
+en-US:
+    printDeliveryNote: Print delivery note
+es-ES:
+    printDeliveryNote: Imprimir albarán
+ca-ES:
+    printDeliveryNote: Imprimir albarà
+fr-FR:
+    printDeliveryNote: Imprimer bulletin de livraison
+pt-PT:
+    printDeliveryNote: Imprimir nota de entrega
+</i18n>
diff --git a/src/router/index.js b/src/router/index.js
index cbb3e2a3..cb8a7ea0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,5 @@
 import { route } from 'quasar/wrappers';
-import { appStore } from 'stores/app';
+import { useAppStore } from 'stores/app';
 import {
     createRouter,
     createMemoryHistory,
@@ -39,7 +39,7 @@ export default route(function (/* { store, ssrContext } */) {
 
     Router.afterEach((to, from) => {
         if (from.name === to.name) return;
-        const app = appStore();
+        const app = useAppStore();
         app.$patch({
             title: i18n.global.t(to.name || 'home'),
             subtitle: null,
diff --git a/src/router/routes.js b/src/router/routes.js
index c2813de0..d8a523ac 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -37,17 +37,17 @@ const routes = [
             {
                 name: 'confirmedOrders',
                 path: '/ecomerce/orders',
-                component: () => import('pages/Ecomerce/Orders.vue')
+                component: () => import('pages/Ecomerce/OrdersView.vue')
             },
             {
                 name: 'ticket',
                 path: '/ecomerce/ticket/:id',
-                component: () => import('pages/Ecomerce/Ticket.vue')
+                component: () => import('pages/Ecomerce/TicketView.vue')
             },
             {
                 name: 'invoices',
                 path: '/ecomerce/invoices',
-                component: () => import('pages/Ecomerce/Invoices.vue')
+                component: () => import('pages/Ecomerce/InvoicesView.vue')
             },
             {
                 name: 'pendingOrders',
@@ -59,6 +59,16 @@ const routes = [
                 path: '/ecomerce/catalog/:category?/:type?',
                 component: () => import('pages/Ecomerce/Catalog.vue')
             },
+            {
+                name: 'basket',
+                path: '/ecomerce/basket/:id?',
+                component: () => import('pages/Ecomerce/BasketView.vue')
+            },
+            {
+                name: 'checkout',
+                path: '/ecomerce/checkout',
+                component: () => import('pages/Ecomerce/CheckoutView.vue')
+            },
             {
                 name: 'agencyPackages',
                 path: '/agencies/packages',
diff --git a/src/stores/app.js b/src/stores/app.js
index 95aa70a7..6ef90e26 100644
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -1,19 +1,51 @@
-import { defineStore } from 'pinia'
-import { jApi } from 'boot/axios'
+import { defineStore } from 'pinia';
+import { jApi } from 'boot/axios';
+import useNotify from 'src/composables/useNotify.js';
 
-export const appStore = defineStore('hedera', {
+const { notify } = useNotify();
+
+export const useAppStore = defineStore('hedera', {
     state: () => ({
         title: null,
         subtitle: null,
         imageUrl: '',
         useRightDrawer: false,
-        rightDrawerOpen: false
+        rightDrawerOpen: false,
+        basketOrderId: null
     }),
 
     actions: {
-        async loadConfig () {
-            const imageUrl = await jApi.getValue('SELECT url FROM imageConfig')
-            this.$patch({ imageUrl })
+        async init() {
+            this.getBasketOrderId();
+        },
+
+        getBasketOrderId() {
+            this.basketOrderId = localStorage.getItem('hederaBasket');
+        },
+
+        async loadConfig() {
+            const imageUrl = await jApi.getValue('SELECT url FROM imageConfig');
+            this.$patch({ imageUrl });
+        },
+
+        async checkOrder(orderId) {
+            try {
+                const resultSet = await jApi.execQuery(
+                    'CALL myOrder_checkConfig(#id)',
+                    { id: orderId }
+                );
+                resultSet.fetchValue();
+            } catch (err) {
+                console.error('Error checking order', err);
+            }
+        },
+
+        loadIntoBasket(orderId) {
+            if (this.basketOrderId !== orderId) {
+                localStorage.setItem('hederaBasket', orderId);
+                this.basketOrderId = orderId;
+                notify('orderLoadedIntoBasket', 'positive');
+            }
         }
     }
-})
+});
diff --git a/src/stores/index.js b/src/stores/index.js
index 94cce71e..d718b663 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -1,5 +1,5 @@
-import { store } from 'quasar/wrappers'
-import { createPinia } from 'pinia'
+import { store } from 'quasar/wrappers';
+import { createPinia } from 'pinia';
 
 /*
  * If not building with SSR mode, you can
@@ -11,10 +11,10 @@ import { createPinia } from 'pinia'
  */
 
 export default store((/* { ssrContext } */) => {
-    const pinia = createPinia()
+    const pinia = createPinia();
 
     // You can add Pinia plugins here
     // pinia.use(SomePiniaPlugin)
 
-    return pinia
-})
+    return pinia;
+});
-- 
2.40.1


From b66c47955c6bdbd5c92137450b4d5bff3f67d3d5 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 08:37:04 -0300
Subject: [PATCH 04/14] Move script tag to the start of the file

---
 src/App.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 54b715a2..8b15cff2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,3 @@
-<template>
-    <router-view />
-</template>
-
 <script setup>
 import { useAppStore } from 'stores/app';
 import { onBeforeMount } from 'vue';
@@ -9,3 +5,7 @@ const appStore = useAppStore();
 
 onBeforeMount(() => appStore.init());
 </script>
+
+<template>
+    <router-view />
+</template>
-- 
2.40.1


From a0fc1cfc070cd790923b7067580aabb77be7a0fd Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 08:39:51 -0300
Subject: [PATCH 05/14] use line.discount directly

---
 src/components/ui/TicketDetails.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/TicketDetails.vue b/src/components/ui/TicketDetails.vue
index b2cf0189..eb05eb34 100644
--- a/src/components/ui/TicketDetails.vue
+++ b/src/components/ui/TicketDetails.vue
@@ -20,10 +20,8 @@ const lineDiscountSubtotal = line => {
     return line.quantity * line.price;
 };
 
-const lineSubtotal = line => {
-    const discount = line.discount;
-    return lineDiscountSubtotal(line) * ((100 - discount) / 100);
-};
+const lineSubtotal = line =>
+    lineDiscountSubtotal(line) * ((100 - line.discount) / 100);
 </script>
 
 <template>
-- 
2.40.1


From 7c96106faa22e3ccdbf6aa993b254cff8b8157f4 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 08:47:24 -0300
Subject: [PATCH 06/14] Change serial column name to invoice

---
 src/pages/Ecomerce/InvoicesView.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Ecomerce/InvoicesView.vue b/src/pages/Ecomerce/InvoicesView.vue
index c31842db..0902c0d9 100644
--- a/src/pages/Ecomerce/InvoicesView.vue
+++ b/src/pages/Ecomerce/InvoicesView.vue
@@ -15,7 +15,7 @@ const years = ref([]);
 const invoices = ref([]);
 
 const columns = computed(() => [
-    { name: 'ref', label: t('serial'), field: 'ref', align: 'left' },
+    { name: 'ref', label: t('invoice'), field: 'ref', align: 'left' },
     {
         name: 'issued',
         label: t('issued'),
@@ -129,7 +129,7 @@ onMounted(async () => {
 <i18n lang="yaml">
 en-US:
     noInvoicesFound: No invoices found
-    serial: Serial
+    invoice: Invoice
     issued: Date
     amount: Import
     downloadInvoicePdf: Download invoice PDF
@@ -137,7 +137,7 @@ en-US:
     requestTheInvoiceToComercial: Request the invoice to your salesperson
 es-ES:
     noInvoicesFound: No se han encontrado facturas
-    serial: Serie
+    invoice: Factura
     issued: Fecha
     amount: Importe
     downloadInvoicePdf: Descargar factura en PDF
@@ -145,7 +145,7 @@ es-ES:
     requestTheInvoiceToComercial: Solicita la factura a tu comercial
 ca-ES:
     noInvoicesFound: No s'han trobat factures
-    serial: Sèrie
+    invoice: Factura
     issued: Data
     amount: Import
     downloadInvoicePdf: Descarregar PDF
@@ -153,7 +153,7 @@ ca-ES:
     requestTheInvoiceToComercial: Sol·licita la factura al teu comercial
 fr-FR:
     noInvoicesFound: Aucune facture trouvée
-    serial: Série
+    invoice: Facture
     issued: Date
     amount: Montant
     downloadInvoicePdf: Télécharger le PDF
@@ -161,7 +161,7 @@ fr-FR:
     requestTheInvoiceToComercial: Demander la facture à votre commercial
 pt-PT:
     noInvoicesFound: Nenhuma fatura encontrada
-    serial: Serie
+    invoice: Fatura
     issued: Data
     amount: Importe
     downloadInvoicePdf: Baixar PDF
-- 
2.40.1


From b728ecaf299ec81ceb4da104dd06b20962b5ee0b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 08:54:15 -0300
Subject: [PATCH 07/14] Add vn date

---
 quasar.config.js                    | 448 ++++++++++++++--------------
 src/boot/vnDate.js                  |  20 ++
 src/pages/Ecomerce/InvoicesView.vue |   2 +-
 3 files changed, 245 insertions(+), 225 deletions(-)
 create mode 100644 src/boot/vnDate.js

diff --git a/quasar.config.js b/quasar.config.js
index 0c26af27..378b6e6d 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -14,243 +14,243 @@ const path = require('path');
 const { configure } = require('quasar/wrappers');
 
 module.exports = configure(function (ctx) {
-    return {
-        // https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
-        supportTS: false,
+  return {
+    // https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
+    supportTS: false,
 
-        // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
-        // preFetch: true,
+    // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
+    // preFetch: true,
 
-        // app boot file (/src/boot)
-        // --> boot files are part of "main.js"
-        // https://v2.quasar.dev/quasar-cli-webpack/boot-files
-        boot: ['i18n', 'axios', 'error-handler', 'app'],
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    // https://v2.quasar.dev/quasar-cli-webpack/boot-files
+    boot: ['i18n', 'axios', 'vnDate', 'error-handler', 'app'],
 
-        // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
-        css: ['app.scss', 'width.scss', 'responsive.scss'],
+    // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
+    css: ['app.scss', 'width.scss', 'responsive.scss'],
 
-        // https://github.com/quasarframework/quasar/tree/dev/extras
-        extras: [
-            // 'ionicons-v4',
-            // 'mdi-v5',
-            // 'fontawesome-v6',
-            // 'eva-icons',
-            // 'themify',
-            // 'line-awesome',
-            // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+    // https://github.com/quasarframework/quasar/tree/dev/extras
+    extras: [
+      // 'ionicons-v4',
+      // 'mdi-v5',
+      // 'fontawesome-v6',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
-            'roboto-font', // optional, you are not bound to it
-            'material-icons' // optional, you are not bound to it
-        ],
+      'roboto-font', // optional, you are not bound to it
+      'material-icons' // optional, you are not bound to it
+    ],
 
-        // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
-        build: {
-            vueRouterMode: 'hash', // available values: 'hash', 'history'
+    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
+    build: {
+      vueRouterMode: 'hash', // available values: 'hash', 'history'
 
-            // transpile: false,
-            // publicPath: '/',
+      // transpile: false,
+      // publicPath: '/',
 
-            // Add dependencies for transpiling with Babel (Array of string/regex)
-            // (from node_modules, which are by default not transpiled).
-            // Applies only if "transpile" is set to true.
-            // transpileDependencies: [],
+      // Add dependencies for transpiling with Babel (Array of string/regex)
+      // (from node_modules, which are by default not transpiled).
+      // Applies only if "transpile" is set to true.
+      // transpileDependencies: [],
 
-            // rtl: true, // https://quasar.dev/options/rtl-support
-            // preloadChunks: true,
-            // showProgress: false,
-            // gzip: true,
-            // analyze: true,
+      // rtl: true, // https://quasar.dev/options/rtl-support
+      // preloadChunks: true,
+      // showProgress: false,
+      // gzip: true,
+      // analyze: true,
 
-            // Options below are automatically set depending on the env, set them if you want to override
-            // extractCSS: false,
+      // Options below are automatically set depending on the env, set them if you want to override
+      // extractCSS: false,
 
-            // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
-            // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
 
-            chainWebpack(chain) {
-                chain
-                    .plugin('eslint-webpack-plugin')
-                    .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
+      chainWebpack (chain) {
+        chain
+          .plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
 
-                chain.module
-                    .rule('i18n-resource')
-                    .test(/\.(json5?|ya?ml)$/)
-                    .include.add(path.resolve(__dirname, './src/i18n'))
-                    .end()
-                    .type('javascript/auto')
-                    .use('i18n-resource')
-                    .loader('@intlify/vue-i18n-loader');
-                chain.module
-                    .rule('i18n')
-                    .resourceQuery(/blockType=i18n/)
-                    .type('javascript/auto')
-                    .use('i18n')
-                    .loader('@intlify/vue-i18n-loader');
-            }
-        },
+        chain.module
+          .rule('i18n-resource')
+          .test(/\.(json5?|ya?ml)$/)
+          .include.add(path.resolve(__dirname, './src/i18n'))
+          .end()
+          .type('javascript/auto')
+          .use('i18n-resource')
+          .loader('@intlify/vue-i18n-loader');
+        chain.module
+          .rule('i18n')
+          .resourceQuery(/blockType=i18n/)
+          .type('javascript/auto')
+          .use('i18n')
+          .loader('@intlify/vue-i18n-loader');
+      }
+    },
 
-        // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
-        devServer: {
-            server: {
-                type: 'http'
-            },
-            port: 8080,
-            open: false,
-            // static: __dirname,
-            headers: { 'Access-Control-Allow-Origin': '*' },
-            // stats: { chunks: false },
-            proxy: {
-                '/api': 'http://localhost:3000',
-                '/': {
-                    target: 'http://localhost:3002',
-                    bypass: req => (req.path !== '/' ? req.path : null)
-                }
-            }
-        },
-
-        // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
-        framework: {
-            config: {},
-            autoImportComponentCase: 'pascal',
-            // iconSet: 'material-icons', // Quasar icon set
-            // lang: 'en-US', // Quasar language pack
-
-            // For special cases outside of where the auto-import strategy can have an impact
-            // (like functional components as one of the examples),
-            // you can manually specify Quasar components/directives to be available everywhere:
-            //
-            // components: [],
-            // directives: [],
-
-            // Quasar plugins
-            plugins: ['Notify', 'Dialog']
-        },
-
-        // animations: 'all', // --- includes all animations
-        // https://quasar.dev/options/animations
-        animations: [],
-
-        // https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
-        ssr: {
-            pwa: false,
-
-            // manualStoreHydration: true,
-            // manualPostHydrationTrigger: true,
-
-            prodPort: 3000, // The default port that the production server should use
-            // (gets superseded if process.env.PORT is specified at runtime)
-
-            maxAge: 1000 * 60 * 60 * 24 * 30,
-            // Tell browser when a file from the server should expire from cache (in ms)
-
-            chainWebpackWebserver(chain) {
-                chain
-                    .plugin('eslint-webpack-plugin')
-                    .use(ESLintPlugin, [{ extensions: ['js'] }]);
-            },
-
-            middlewares: [
-                ctx.prod ? 'compression' : '',
-                'render' // keep this as last one
-            ]
-        },
-
-        // https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
-        pwa: {
-            workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
-            workboxOptions: {}, // only for GenerateSW
-
-            // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
-            // if using workbox in InjectManifest mode
-
-            chainWebpackCustomSW(chain) {
-                chain
-                    .plugin('eslint-webpack-plugin')
-                    .use(ESLintPlugin, [{ extensions: ['js'] }]);
-            },
-
-            manifest: {
-                name: 'Hedera',
-                short_name: 'Hedera',
-                description: "Verdnatura's webshop",
-                display: 'standalone',
-                orientation: 'portrait',
-                background_color: '#ffffff',
-                theme_color: '#027be3',
-                icons: [
-                    {
-                        src: 'icons/icon-128x128.png',
-                        sizes: '128x128',
-                        type: 'image/png'
-                    },
-                    {
-                        src: 'icons/icon-192x192.png',
-                        sizes: '192x192',
-                        type: 'image/png'
-                    },
-                    {
-                        src: 'icons/icon-256x256.png',
-                        sizes: '256x256',
-                        type: 'image/png'
-                    },
-                    {
-                        src: 'icons/icon-384x384.png',
-                        sizes: '384x384',
-                        type: 'image/png'
-                    },
-                    {
-                        src: 'icons/icon-512x512.png',
-                        sizes: '512x512',
-                        type: 'image/png'
-                    }
-                ]
-            }
-        },
-
-        // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
-        cordova: {
-            // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
-        },
-
-        // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
-        capacitor: {
-            hideSplashscreen: true
-        },
-
-        // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
-        electron: {
-            bundler: 'packager', // 'packager' or 'builder'
-
-            packager: {
-                // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
-                // OS X / Mac App Store
-                // appBundleId: '',
-                // appCategoryType: '',
-                // osxSign: '',
-                // protocol: 'myapp://path',
-                // Windows only
-                // win32metadata: { ... }
-            },
-
-            builder: {
-                // https://www.electron.build/configuration/configuration
-
-                appId: 'hedera-web'
-            },
-
-            // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
-
-            chainWebpackMain(chain) {
-                chain
-                    .plugin('eslint-webpack-plugin')
-                    .use(ESLintPlugin, [{ extensions: ['js'] }]);
-            },
-
-            chainWebpackPreload(chain) {
-                chain
-                    .plugin('eslint-webpack-plugin')
-                    .use(ESLintPlugin, [{ extensions: ['js'] }]);
-            }
+    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
+    devServer: {
+      server: {
+        type: 'http'
+      },
+      port: 8080,
+      open: false,
+      // static: __dirname,
+      headers: { 'Access-Control-Allow-Origin': '*' },
+      // stats: { chunks: false },
+      proxy: {
+        '/api': 'http://localhost:3000',
+        '/': {
+          target: 'http://localhost:3002',
+          bypass: req => (req.path !== '/' ? req.path : null)
         }
-    };
+      }
+    },
+
+    // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
+    framework: {
+      config: {},
+      autoImportComponentCase: 'pascal',
+      // iconSet: 'material-icons', // Quasar icon set
+      // lang: 'en-US', // Quasar language pack
+
+      // For special cases outside of where the auto-import strategy can have an impact
+      // (like functional components as one of the examples),
+      // you can manually specify Quasar components/directives to be available everywhere:
+      //
+      // components: [],
+      // directives: [],
+
+      // Quasar plugins
+      plugins: ['Notify', 'Dialog']
+    },
+
+    // animations: 'all', // --- includes all animations
+    // https://quasar.dev/options/animations
+    animations: [],
+
+    // https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
+    ssr: {
+      pwa: false,
+
+      // manualStoreHydration: true,
+      // manualPostHydrationTrigger: true,
+
+      prodPort: 3000, // The default port that the production server should use
+      // (gets superseded if process.env.PORT is specified at runtime)
+
+      maxAge: 1000 * 60 * 60 * 24 * 30,
+      // Tell browser when a file from the server should expire from cache (in ms)
+
+      chainWebpackWebserver (chain) {
+        chain
+          .plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+      },
+
+      middlewares: [
+        ctx.prod ? 'compression' : '',
+        'render' // keep this as last one
+      ]
+    },
+
+    // https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
+    pwa: {
+      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+      workboxOptions: {}, // only for GenerateSW
+
+      // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
+      // if using workbox in InjectManifest mode
+
+      chainWebpackCustomSW (chain) {
+        chain
+          .plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+      },
+
+      manifest: {
+        name: 'Hedera',
+        short_name: 'Hedera',
+        description: "Verdnatura's webshop",
+        display: 'standalone',
+        orientation: 'portrait',
+        background_color: '#ffffff',
+        theme_color: '#027be3',
+        icons: [
+          {
+            src: 'icons/icon-128x128.png',
+            sizes: '128x128',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
+    cordova: {
+      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
+    capacitor: {
+      hideSplashscreen: true
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
+    electron: {
+      bundler: 'packager', // 'packager' or 'builder'
+
+      packager: {
+        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+        // OS X / Mac App Store
+        // appBundleId: '',
+        // appCategoryType: '',
+        // osxSign: '',
+        // protocol: 'myapp://path',
+        // Windows only
+        // win32metadata: { ... }
+      },
+
+      builder: {
+        // https://www.electron.build/configuration/configuration
+
+        appId: 'hedera-web'
+      },
+
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+
+      chainWebpackMain (chain) {
+        chain
+          .plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+      },
+
+      chainWebpackPreload (chain) {
+        chain
+          .plugin('eslint-webpack-plugin')
+          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+      }
+    }
+  };
 });
diff --git a/src/boot/vnDate.js b/src/boot/vnDate.js
new file mode 100644
index 00000000..cbd92e62
--- /dev/null
+++ b/src/boot/vnDate.js
@@ -0,0 +1,20 @@
+import { boot } from 'quasar/wrappers';
+
+export default boot(() => {
+    Date.vnUTC = () => {
+        const env = process.env.NODE_ENV;
+        if (!env || env === 'development') {
+            return new Date(Date.UTC(2001, 0, 1, 11));
+        }
+
+        return new Date();
+    };
+
+    Date.vnNew = () => {
+        return new Date(Date.vnUTC());
+    };
+
+    Date.vnNow = () => {
+        return new Date(Date.vnUTC()).getTime();
+    };
+});
diff --git a/src/pages/Ecomerce/InvoicesView.vue b/src/pages/Ecomerce/InvoicesView.vue
index 0902c0d9..4b417185 100644
--- a/src/pages/Ecomerce/InvoicesView.vue
+++ b/src/pages/Ecomerce/InvoicesView.vue
@@ -10,7 +10,7 @@ const { t } = useI18n();
 const jApi = inject('jApi');
 const userStore = useUserStore();
 
-const currentYear = ref(new Date('2001-01-01').getFullYear());
+const currentYear = ref(Date.vnNew().getFullYear());
 const years = ref([]);
 const invoices = ref([]);
 
-- 
2.40.1


From f36eb1bd88c019265f9c789f1f1db3ae369b5891 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 09:08:46 -0300
Subject: [PATCH 08/14] Create VnTable and use it

---
 src/components/ui/VnTable.vue       | 39 ++++++++++++++
 src/pages/Agencies/PackagesView.vue | 25 ++-------
 src/pages/Ecomerce/InvoicesView.vue | 80 ++++++++++++++---------------
 3 files changed, 82 insertions(+), 62 deletions(-)
 create mode 100644 src/components/ui/VnTable.vue

diff --git a/src/components/ui/VnTable.vue b/src/components/ui/VnTable.vue
new file mode 100644
index 00000000..5cbe6c3e
--- /dev/null
+++ b/src/components/ui/VnTable.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps({
+    noDataLabel: {
+        type: String,
+        default: ''
+    },
+    hideBottom: {
+        type: Boolean,
+        default: true
+    },
+    rowsPerPageOptions: {
+        type: Array,
+        default: () => [0]
+    }
+});
+</script>
+
+<template>
+    <QTable
+        v-bind="$attrs"
+        :no-data-label="props.noDataLabel || t('noInvoicesFound')"
+        :hide-bottom="props.hideBottom"
+        :rows-per-page-options="props.rowsPerPageOptions"
+        table-header-class="vnTable-header-default"
+    >
+        <slot />
+    </QTable>
+</template>
+
+<style lang="scss">
+.vnTable-header-default {
+    background-color: $accent !important;
+    color: white;
+}
+</style>
diff --git a/src/pages/Agencies/PackagesView.vue b/src/pages/Agencies/PackagesView.vue
index d9af6e7f..2ef44424 100644
--- a/src/pages/Agencies/PackagesView.vue
+++ b/src/pages/Agencies/PackagesView.vue
@@ -2,6 +2,8 @@
 import { ref, inject, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import VnTable from 'src/components/ui/VnTable.vue';
+
 const jApi = inject('jApi');
 const { t } = useI18n();
 
@@ -53,32 +55,15 @@ onMounted(() => getPackages());
 
 <template>
     <QPage class="flex justify-center q-pa-md">
-        <QTable
+        <VnTable
             :columns="columns"
             :rows="packages"
             :loading="loading"
-            class="q-mt-lg"
-            style="max-width: 100%; height: max-content"
-            table-header-class="packages-table-header"
-            hide-bottom
-        >
-            <template #body-cell-id="{ row }">
-                <QTd auto-width @click.stop>
-                    <QBtn flat color="blue">{{ row.id }}</QBtn>
-                    <ItemDescriptorProxy :id="row.id" />
-                </QTd>
-            </template>
-        </QTable>
+            style="height: max-content; max-width: 100%"
+        />
     </QPage>
 </template>
 
-<style lang="scss">
-.packages-table-header {
-    background-color: $accent !important;
-    color: white;
-}
-</style>
-
 <i18n lang="yaml">
 en-US:
     agency: Agency
diff --git a/src/pages/Ecomerce/InvoicesView.vue b/src/pages/Ecomerce/InvoicesView.vue
index 4b417185..96621936 100644
--- a/src/pages/Ecomerce/InvoicesView.vue
+++ b/src/pages/Ecomerce/InvoicesView.vue
@@ -2,6 +2,8 @@
 import { ref, onMounted, inject, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import VnTable from 'src/components/ui/VnTable.vue';
+
 import { currency } from 'src/lib/filters.js';
 import { date as qdate } from 'quasar';
 import { userStore as useUserStore } from 'stores/user';
@@ -80,49 +82,43 @@ onMounted(async () => {
         />
     </Teleport>
     <div class="vn-w-sm">
-        <QCard>
-            <!--  -->
-            <QTable
-                :columns="columns"
-                :rows="invoices"
-                :no-data-label="t('noInvoicesFound')"
-                row-key="id"
-                :hide-header="!invoices.length"
-                :rows-per-page-options="[0]"
-            >
-                <template #body-cell-hasPdf="{ row }">
-                    <QTd
-                        auto-width
-                        @click.stop
-                        class="flex full-width justify-center items-center"
+        <VnTable
+            :columns="columns"
+            :rows="invoices"
+            :hide-header="!invoices.length"
+        >
+            <template #body-cell-hasPdf="{ row }">
+                <QTd
+                    auto-width
+                    @click.stop
+                    class="flex full-width justify-center items-center"
+                >
+                    <QBtn
+                        v-if="row.hasPdf"
+                        icon="download"
+                        :href="getInvoiceUrl(row.id)"
+                        target="_blank"
+                        flat
+                        round
                     >
-                        <QBtn
-                            v-if="row.hasPdf"
-                            icon="download"
-                            :href="getInvoiceUrl(row.id)"
-                            target="_blank"
-                            flat
-                            round
-                        >
-                            <QTooltip>
-                                {{ t('downloadInvoicePdf') }}
-                            </QTooltip>
-                        </QBtn>
-                        <QIcon
-                            v-else
-                            name="warning"
-                            :title="t('notDownloadable')"
-                            color="warning"
-                            size="sm"
-                        >
-                            <QTooltip>
-                                {{ t('requestTheInvoiceToComercial') }}
-                            </QTooltip>
-                        </QIcon>
-                    </QTd>
-                </template>
-            </QTable>
-        </QCard>
+                        <QTooltip>
+                            {{ t('downloadInvoicePdf') }}
+                        </QTooltip>
+                    </QBtn>
+                    <QIcon
+                        v-else
+                        name="warning"
+                        :title="t('notDownloadable')"
+                        color="warning"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ t('requestTheInvoiceToComercial') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
+        </VnTable>
     </div>
 </template>
 
-- 
2.40.1


From e0f55f8ca3f38ab0e07a30c494230875ab9ee21f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 09:09:52 -0300
Subject: [PATCH 09/14] Change class casing

---
 src/components/ui/VnTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnTable.vue b/src/components/ui/VnTable.vue
index 5cbe6c3e..027f10b6 100644
--- a/src/components/ui/VnTable.vue
+++ b/src/components/ui/VnTable.vue
@@ -25,14 +25,14 @@ const props = defineProps({
         :no-data-label="props.noDataLabel || t('noInvoicesFound')"
         :hide-bottom="props.hideBottom"
         :rows-per-page-options="props.rowsPerPageOptions"
-        table-header-class="vnTable-header-default"
+        table-header-class="vntable-header-default"
     >
         <slot />
     </QTable>
 </template>
 
 <style lang="scss">
-.vnTable-header-default {
+.vntable-header-default {
     background-color: $accent !important;
     color: white;
 }
-- 
2.40.1


From f2c8b90324b0f051734e7752cd73a3a36c531015 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 09:31:42 -0300
Subject: [PATCH 10/14] Create print service and fix slot in VnTable

---
 src/components/ui/VnTable.vue       |  4 ++-
 src/composables/usePrintService.js  | 38 +++++++++++++++++++++++++++++
 src/pages/Ecomerce/InvoicesView.vue | 13 +++-------
 3 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 src/composables/usePrintService.js

diff --git a/src/components/ui/VnTable.vue b/src/components/ui/VnTable.vue
index 027f10b6..a32240c5 100644
--- a/src/components/ui/VnTable.vue
+++ b/src/components/ui/VnTable.vue
@@ -27,7 +27,9 @@ const props = defineProps({
         :rows-per-page-options="props.rowsPerPageOptions"
         table-header-class="vntable-header-default"
     >
-        <slot />
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps" />
+        </template>
     </QTable>
 </template>
 
diff --git a/src/composables/usePrintService.js b/src/composables/usePrintService.js
new file mode 100644
index 00000000..5ceef4ec
--- /dev/null
+++ b/src/composables/usePrintService.js
@@ -0,0 +1,38 @@
+import { userStore as useUserStore } from 'stores/user';
+
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+
+export function usePrintService() {
+    const quasar = useQuasar();
+    const userStore = useUserStore();
+    const token = userStore.token;
+
+    function sendEmail(path, params) {
+        return axios.post(path, params).then(() =>
+            quasar.notify({
+                message: 'Notification sent',
+                type: 'positive',
+                icon: 'check'
+            })
+        );
+    }
+
+    function openReport(path, params) {
+        params = Object.assign(
+            {
+                access_token: token
+            },
+            params
+        );
+
+        const query = new URLSearchParams(params).toString();
+
+        window.open(`api/${path}?${query}`);
+    }
+
+    return {
+        sendEmail,
+        openReport
+    };
+}
diff --git a/src/pages/Ecomerce/InvoicesView.vue b/src/pages/Ecomerce/InvoicesView.vue
index 96621936..6eb49f68 100644
--- a/src/pages/Ecomerce/InvoicesView.vue
+++ b/src/pages/Ecomerce/InvoicesView.vue
@@ -6,11 +6,11 @@ import VnTable from 'src/components/ui/VnTable.vue';
 
 import { currency } from 'src/lib/filters.js';
 import { date as qdate } from 'quasar';
-import { userStore as useUserStore } from 'stores/user';
+import { usePrintService } from 'src/composables/usePrintService';
 
 const { t } = useI18n();
 const jApi = inject('jApi');
-const userStore = useUserStore();
+const { openReport } = usePrintService();
 
 const currentYear = ref(Date.vnNew().getFullYear());
 const years = ref([]);
@@ -38,13 +38,6 @@ const columns = computed(() => [
     }
 ]);
 
-const getInvoiceUrl = id => {
-    const params = new URLSearchParams({
-        access_token: userStore.token
-    });
-    return `/api/InvoiceOuts/${id}/download?${params}`;
-};
-
 const fetchInvoices = async () => {
     const params = {
         from: new Date(currentYear.value, 0),
@@ -96,10 +89,10 @@ onMounted(async () => {
                     <QBtn
                         v-if="row.hasPdf"
                         icon="download"
-                        :href="getInvoiceUrl(row.id)"
                         target="_blank"
                         flat
                         round
+                        @click="openReport(`InvoiceOuts/${row.id}/download`)"
                     >
                         <QTooltip>
                             {{ t('downloadInvoicePdf') }}
-- 
2.40.1


From 44627dbc8a4b69debd80491a4a191d2edce6c6ec Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 10:56:07 -0300
Subject: [PATCH 11/14] Replace prompt with VnConfirm

---
 src/pages/Ecomerce/OrdersView.vue | 36 ++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/pages/Ecomerce/OrdersView.vue b/src/pages/Ecomerce/OrdersView.vue
index a5692da9..5cd1a9ff 100644
--- a/src/pages/Ecomerce/OrdersView.vue
+++ b/src/pages/Ecomerce/OrdersView.vue
@@ -4,6 +4,8 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import CardList from 'src/components/ui/CardList.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 import { currency, formatDateTitle } from 'src/lib/filters.js';
 import { tpvStore } from 'stores/tpv';
@@ -12,6 +14,8 @@ const { t } = useI18n();
 const route = useRoute();
 const jApi = inject('jApi');
 
+const showAmountToPayDialog = ref(null);
+const amountToPay = ref(null);
 const orders = ref(null);
 const debt = ref(0);
 const tpv = tpvStore();
@@ -24,19 +28,18 @@ onMounted(async () => {
 });
 
 const onPayClick = async () => {
-    let amount = -debt.value;
-    amount = amount <= 0 ? null : amount;
+    showAmountToPayDialog.value = true;
 
-    let defaultAmountStr = '';
-    if (amount !== null) {
-        defaultAmountStr = amount;
+    if (debt.value <= 0) {
+        amountToPay.value = -debt.value;
     }
+};
 
-    amount = prompt(t('amountToPay'), defaultAmountStr);
-
-    if (amount != null) {
-        amount = parseFloat(amount.replace(',', '.'));
-        await tpv.pay(amount);
+const onConfirmPay = async () => {
+    if (amountToPay.value) {
+        const amount = amountToPay.value.toString().replace('.', ',');
+        amountToPay.value = parseFloat(amount);
+        await tpv.pay(amountToPay.value);
     }
 };
 </script>
@@ -106,6 +109,19 @@ const onPayClick = async () => {
                 :title="t('startOrder')"
             />
         </QPageSticky>
+        <VnConfirm
+            v-model="showAmountToPayDialog"
+            :message="t('amountToPay')"
+            :promise="onConfirmPay"
+        >
+            <template #customHTML>
+                <VnInput
+                    v-model="amountToPay"
+                    :clearable="false"
+                    class="full-width"
+                />
+            </template>
+        </VnConfirm>
     </QPage>
 </template>
 
-- 
2.40.1


From 887ee8aea47247e720fd6afd86468d69a4f49596 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 11:28:15 -0300
Subject: [PATCH 12/14] Create date format util with translations

---
 src/components/ui/TicketDetails.vue |  6 ++--
 src/i18n/ca-ES/index.js             |  2 +-
 src/i18n/en-US/index.js             |  2 +-
 src/i18n/es-ES/index.js             |  2 +-
 src/i18n/fr-FR/index.js             |  2 +-
 src/i18n/pt-PT/index.js             |  2 +-
 src/lib/filters.js                  | 47 +++++++++++++++++++++++------
 src/pages/Ecomerce/Catalog.vue      |  5 ++-
 src/pages/Ecomerce/InvoicesView.vue |  6 ++--
 9 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/src/components/ui/TicketDetails.vue b/src/components/ui/TicketDetails.vue
index eb05eb34..37af51ab 100644
--- a/src/components/ui/TicketDetails.vue
+++ b/src/components/ui/TicketDetails.vue
@@ -29,7 +29,7 @@ const lineSubtotal = line =>
         <QCardSection class="no-padding q-mb-md">
             <div class="text-h6">#{{ ticket.id }}</div>
         </QCardSection>
-        <QCardSection class="no-padding q-mb-md">
+        <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
             <div class="text-subtitle1 text-bold">
                 {{ t('shippingInformation') }}
             </div>
@@ -39,14 +39,14 @@ const lineSubtotal = line =>
             </div>
             <div>
                 {{ t('delivery') }}
-                {{ formatDateTitle(ticket.shipped) }}
+                {{ formatDateTitle(ticket.landed) }}
             </div>
             <div>
                 {{ t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse') }}
                 {{ ticket.agency }}
             </div>
         </QCardSection>
-        <QCardSection class="no-padding q-mb-md">
+        <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
             <div class="text-subtitle1 text-bold">
                 {{ t('deliveryAddress') }}
             </div>
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index cdf4b9ef..0519209d 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -24,7 +24,7 @@ export default {
             'Novembre',
             'Desembre'
         ],
-        shortMonths: [
+        monthsShort: [
             'Gen',
             'Feb',
             'Mar',
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 8d4615fe..e4648200 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -37,7 +37,7 @@ export default {
             'November',
             'December'
         ],
-        shortMonths: [
+        monthsShort: [
             'Jan',
             'Feb',
             'Mar',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index 82b4d6a8..ea4d53c9 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -46,7 +46,7 @@ export default {
             'Noviembre',
             'Diciembre'
         ],
-        shortMonths: [
+        monthsShort: [
             'Ene',
             'Feb',
             'Mar',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index d2ff0528..405cd12a 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -24,7 +24,7 @@ export default {
             'Novembre',
             'Décembre'
         ],
-        shortMonths: [
+        monthsShort: [
             'Jan',
             'Fév',
             'Mar',
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index f5e8eb51..c2b63f90 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -24,7 +24,7 @@ export default {
             'Novembro',
             'Dezembro'
         ],
-        shortMonths: [
+        monthsShort: [
             'Jan',
             'Fev',
             'Mar',
diff --git a/src/lib/filters.js b/src/lib/filters.js
index 88d3f33b..ac773e10 100644
--- a/src/lib/filters.js
+++ b/src/lib/filters.js
@@ -14,16 +14,43 @@ export function date(val, format) {
     return qdate.formatDate(val, format, i18n.global.tm('date'));
 }
 
-export const formatDateTitle = timeStamp => {
-    const { t, messages, locale } = i18n.global;
-    const formattedString = qdate.formatDate(
-        timeStamp,
-        `dddd, D [${t('of')}] MMMM [${t('of')}] YYYY`,
-        {
-            days: messages.value[locale.value].date.days,
-            months: messages.value[locale.value].date.months
-        }
-    );
+export const formatDate = (timeStamp, format = 'YYYY-MM-DD') => {
+    if (!timeStamp) return '';
+    const { messages, locale } = i18n.global;
+
+    return qdate.formatDate(timeStamp, format, {
+        days: messages.value[locale.value].date.days,
+        months: messages.value[locale.value].date.months,
+        daysShort: messages.value[locale.value].date.daysShort,
+        monthsShort: messages.value[locale.value].date.monthsShort
+    });
+};
+
+/**
+ * @param {Date} timeStamp - La marca de tiempo que se va a formatear. Si no se proporciona, la función devolverá una cadena vacía.
+ * @param {Object} options - Un objeto que contiene las opciones de formato.
+ * @param {boolean} options.showTime - Indica si se debe mostrar la hora en el formato de la fecha.
+ * @param {boolean} options.showSeconds - Indica si se deben mostrar los segundos en el formato de la hora. Solo se aplica si showTime es true.
+ * @param {boolean} options.shortDay - Indica si se debe usar una versión corta del día (por ejemplo, "Mon" en lugar de "Monday").
+ * @returns {string} La fecha formateada como un título.
+ */
+export const formatDateTitle = (
+    timeStamp,
+    options = { showTime: false, showSeconds: false, shortDay: false }
+) => {
+    if (!timeStamp) return '';
+    const { t } = i18n.global;
+
+    const timeFormat = options.showTime
+        ? options.showSeconds
+            ? ` [${t('at')}] hh:mm:ss`
+            : ` [${t('at')}] hh:mm`
+        : '';
+    const day = options.shortDay ? 'dd' : 'dddd';
+
+    const formatString = `${day}, D [${t('of')}] MMMM [${t('of')}] YYYY${timeFormat}`;
+
+    const formattedString = formatDate(timeStamp, formatString);
     return formattedString;
 };
 
diff --git a/src/pages/Ecomerce/Catalog.vue b/src/pages/Ecomerce/Catalog.vue
index 2d712bff..6543cc05 100644
--- a/src/pages/Ecomerce/Catalog.vue
+++ b/src/pages/Ecomerce/Catalog.vue
@@ -343,8 +343,7 @@
 </style>
 
 <script>
-import { date, currency } from 'src/lib/filters.js';
-import { date as qdate } from 'quasar';
+import { date, currency, formatDate } from 'src/lib/filters.js';
 import axios from 'axios';
 import { useAppStore } from 'stores/app';
 
@@ -360,7 +359,7 @@ export default {
         return {
             uid: 0,
             search: '',
-            orderDate: qdate.formatDate(new Date(), 'YYYY/MM/DD'),
+            orderDate: formatDate(new Date(), 'YYYY/MM/DD'),
             category: null,
             categories: [],
             type: null,
diff --git a/src/pages/Ecomerce/InvoicesView.vue b/src/pages/Ecomerce/InvoicesView.vue
index 6eb49f68..c21ac9ce 100644
--- a/src/pages/Ecomerce/InvoicesView.vue
+++ b/src/pages/Ecomerce/InvoicesView.vue
@@ -4,9 +4,9 @@ import { useI18n } from 'vue-i18n';
 
 import VnTable from 'src/components/ui/VnTable.vue';
 
-import { currency } from 'src/lib/filters.js';
-import { date as qdate } from 'quasar';
+import { currency, formatDate } from 'src/lib/filters.js';
 import { usePrintService } from 'src/composables/usePrintService';
+// import { date as qdate } from 'quasar';
 
 const { t } = useI18n();
 const jApi = inject('jApi');
@@ -23,7 +23,7 @@ const columns = computed(() => [
         label: t('issued'),
         field: 'issued',
         align: 'left',
-        format: val => qdate.formatDate(val, 'D MMM YYYY')
+        format: val => formatDate(val, 'D MMM YYYY')
     },
     {
         name: 'amount',
-- 
2.40.1


From 594b17b4abc8663a2a1534b331b6f4f1dfb668c0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 12:16:46 -0300
Subject: [PATCH 13/14] Fix teleport submit problem

---
 src/components/common/VnForm.vue | 3 +--
 src/stores/app.js                | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnForm.vue b/src/components/common/VnForm.vue
index 6df7c4da..418b8022 100644
--- a/src/components/common/VnForm.vue
+++ b/src/components/common/VnForm.vue
@@ -184,7 +184,6 @@ defineExpose({
             v-if="!loading"
             ref="addressFormRef"
             class="column full-width q-gutter-y-xs"
-            @submit="submit()"
         >
             <span class="text-h6 text-bold">
                 {{ title }}
@@ -208,12 +207,12 @@ defineExpose({
                 <QBtn
                     v-if="defaultActions"
                     :label="t('save')"
-                    type="submit"
                     :icon="showBottomActions ? undefined : 'check'"
                     rounded
                     no-caps
                     flat
                     :disabled="!showBottomActions && !updatedColumns.length"
+                    @click="submit()"
                 />
                 <slot name="actions" />
             </component>
diff --git a/src/stores/app.js b/src/stores/app.js
index 6ef90e26..60af8c8e 100644
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -11,7 +11,8 @@ export const useAppStore = defineStore('hedera', {
         imageUrl: '',
         useRightDrawer: false,
         rightDrawerOpen: false,
-        basketOrderId: null
+        basketOrderId: null,
+        isHeaderMounted: false
     }),
 
     actions: {
-- 
2.40.1


From 7e0c59102647071ee0a9566bf46d0afb3ac51a99 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 14 Aug 2024 12:22:51 -0300
Subject: [PATCH 14/14] Add tooltips

---
 src/pages/Ecomerce/OrdersView.vue    | 23 +++++++++++++++--------
 src/pages/Ecomerce/PendingOrders.vue |  6 +++++-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/pages/Ecomerce/OrdersView.vue b/src/pages/Ecomerce/OrdersView.vue
index 5cd1a9ff..75eb6003 100644
--- a/src/pages/Ecomerce/OrdersView.vue
+++ b/src/pages/Ecomerce/OrdersView.vue
@@ -51,12 +51,11 @@ const onConfirmPay = async () => {
             <span class="amount" :class="{ negative: debt < 0 }">
                 {{ currency(debt || 0) }}
             </span>
-            <QIcon
-                name="info"
-                :title="t('paymentInfo')"
-                class="info"
-                size="sm"
-            />
+            <QIcon name="info" class="info" size="sm">
+                <QTooltip max-width="450px">
+                    {{ t('paymentInfo') }}
+                </QTooltip>
+            </QIcon>
         </div>
         <QBtn
             icon="payments"
@@ -64,14 +63,22 @@ const onConfirmPay = async () => {
             @click="onPayClick()"
             rounded
             no-caps
-        />
+        >
+            <QTooltip>
+                {{ t('makePayment') }}
+            </QTooltip>
+        </QBtn>
         <QBtn
             :to="{ name: 'basket' }"
             icon="shopping_cart"
             :label="t('shoppingCart')"
             rounded
             no-caps
-        />
+        >
+            <QTooltip>
+                {{ t('shoppingCart') }}
+            </QTooltip>
+        </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
         <div
diff --git a/src/pages/Ecomerce/PendingOrders.vue b/src/pages/Ecomerce/PendingOrders.vue
index b2f872df..1309e543 100644
--- a/src/pages/Ecomerce/PendingOrders.vue
+++ b/src/pages/Ecomerce/PendingOrders.vue
@@ -69,7 +69,11 @@ onMounted(async () => {
             :label="t('newOrder')"
             rounded
             no-caps
-        />
+        >
+            <QTooltip>
+                {{ t('newOrder') }}
+            </QTooltip>
+        </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
         <CardList
-- 
2.40.1