Add guest logic

src/pages/Ecomerce/CatalogView.vue

@@ -16,7 +16,7 @@
             <QBtn
                 icon="shopping_cart_checkout"
                 :label="t('shoppingCart')"
-                :to="{ name: 'basket' }"
+                @click="redirectToBasket()"
                 rounded
                 no-caps
             >
@@ -40,15 +40,7 @@
                             })
                         }}
                     </span>
-                    <QBtn
-                        rounded
-                        no-caps
-                        :to="{
-                            name: 'checkout',
-                            params: { id: appStore.basketOrderId },
-                            query: { continue: 'catalog' }
-                        }"
-                    >
+                    <QBtn rounded no-caps @click="redirectToCheckout()">
                         {{ t('modify') }}
                     </QBtn>
                 </div>
@@ -286,6 +278,7 @@ import CatalogCard from 'src/pages/Ecomerce/CatalogCard.vue';
 import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
 
 import { useAppStore } from 'stores/app';
+import { useUserStore } from 'stores/user';
 import { storeToRefs } from 'pinia';
 import { formatDateTitle, currency } from 'src/lib/filters.js';
 import useNotify from 'src/composables/useNotify.js';
@@ -294,10 +287,12 @@ import debounce from 'src/utils/debouncer.js';
 const jApi = inject('jApi');
 const { t } = useI18n();
 const appStore = useAppStore();
+const userStore = useUserStore();
 const route = useRoute();
 const router = useRouter();
 const { isHeaderMounted, rightDrawerOpen, basketOrderId } =
     storeToRefs(appStore);
+const { isGuest } = storeToRefs(userStore);
 const { notify } = useNotify();
 
 const order = ref(null);
@@ -305,7 +300,6 @@ const items = ref([]);
 const selectedItem = ref(null);
 const showItemDialog = ref(false);
 const loading = ref(false);
-const isGuest = ref(false); // TODO: Integrate isGuest logic
 const viewMode = ref('grid');
 
 // Filters options
@@ -513,6 +507,15 @@ const viewTypeButtonContent = computed(() => {
     };
 });
 
+const checkGuest = () => {
+    if (isGuest.value) {
+        notify(t('youMustBeLoggedIn'), 'negative');
+        return true;
+    }
+
+    return false;
+};
+
 const getFilters = async () => {
     const promises = [
         getItemFamilies(),
@@ -722,7 +725,7 @@ const getSubcategories = async () => {
 };
 
 const showItem = async item => {
-    if (isGuest.value) return;
+    if (checkGuest()) return;
 
     const itemLots = await calcItem(item.id);
     const tags = await getItemTags(item.id);
@@ -897,6 +900,21 @@ const onViewModeClick = () => {
     viewMode.value = viewMode.value === 'list' ? 'grid' : 'list';
 };
 
+const redirectToCheckout = () => {
+    if (checkGuest()) return;
+
+    router.push({
+        name: 'checkout',
+        params: { id: basketOrderId.value },
+        query: { continue: 'catalog' }
+    });
+};
+
+const redirectToBasket = () => {
+    if (checkGuest()) return;
+    router.push({ name: 'basket' });
+};
+
 watch(
     () => route.query.search,
     val => {
@@ -911,12 +929,11 @@ onBeforeMount(async () => {
     if (!isGuest.value) {
         await appStore.check('catalog');
     } else {
-        // TODO: Implement this logic when isGuest is implemented
-        // const resultSet = await jApi.execQuery(
-        //     'CALL myOrder_configureForGuest(@orderId); SELECT @orderId;'
-        // );
-        // resultSet.fetchResult();
-        // this.orderId = resultSet.fetchValue();
+        const resultSet = await jApi.execQuery(
+            'CALL myOrder_configureForGuest(@orderId); SELECT @orderId;'
+        );
+        resultSet.fetchResult();
+        appStore.basketOrderId = resultSet.fetchValue();
     }
     await getOrder();
     await getCategories();
@@ -979,6 +996,7 @@ en-US:
     gridView: Grid view
     filterBy: Filter by
     chooseCategory: Choose a category
+    youMustBeLoggedIn: You must be a registered user
 es-ES:
     category: Categoría
     deleteFilter: Quitar filtro
@@ -1001,6 +1019,7 @@ es-ES:
     gridView: Vista de rejilla
     filterBy: Filtrar por
     chooseCategory: Elige una categoría
+    youMustBeLoggedIn: Debes estar registrado como usuario
 ca-ES:
     category: Categoría
     deleteFilter: Eliminar filtro
@@ -1021,6 +1040,7 @@ ca-ES:
     gridView: Vista de graella
     filterBy: Filtrar per
     chooseCategory: Tria una categoria
+    youMustBeLoggedIn: Has d'estar registrat com a usuari
 fr-FR:
     category: Catégorie
     deleteFilter: Supprimer le filtre
@@ -1041,6 +1061,7 @@ fr-FR:
     gridView: Vue en grille
     filterBy: Filtrer par
     chooseCategory: Choisissez une catégorie
+    youMustBeLoggedIn: Vous devez être un utilisateur enregistré
 pt-PT:
     category: Categoria
     deleteFilter: Apagar filtro
@@ -1061,4 +1082,5 @@ pt-PT:
     gridView: Vista de grade
     filterBy: Filtrar por
     chooseCategory: Escolha uma categoria
+    youMustBeLoggedIn: Deves estar registrado como usuario
 </i18n>

src/pages/Login/LoginView.vue

@@ -41,12 +41,23 @@ onMounted(() => {
         password.value.focus();
     }
 });
-async function onLogin() {
-    await userStore.login(email.value, password.value, remember.value);
+
+const onLogin = async () => {
     await userStore.fetchUser();
     await userStore.updateUserLang(selectedLocaleValue.value);
     await router.push('/');
-}
+};
+
+const login = async () => {
+    await userStore.login(email.value, password.value, remember.value);
+    await onLogin();
+};
+
+const loginAsGuest = async () => {
+    userStore.isGuest = true;
+    localStorage.setItem('hederaGuest', true);
+    await onLogin();
+};
 </script>
 
 <template>
@@ -56,7 +67,7 @@ async function onLogin() {
                 <img src="statics/logo.svg" alt="Verdnatura" class="block" />
             </router-link>
         </div>
-        <QForm @submit="onLogin" class="q-gutter-y-md">
+        <QForm @submit="login()" class="q-gutter-y-md">
             <div class="q-gutter-y-sm">
                 <QInput v-model="email" :label="$t('user')" autofocus />
                 <QInput
@@ -106,7 +117,7 @@ async function onLogin() {
             </div>
             <div class="justify-center">
                 <QBtn
-                    to="/"
+                    @click="loginAsGuest()"
                     :label="$t('logInAsGuest')"
                     class="full-width"
                     color="primary"

src/stores/app.js

@@ -139,6 +139,11 @@ export const useAppStore = defineStore('hedera', {
         unloadOrder() {
             localStorage.removeItem(storageOrderName);
             this.basketOrderId = null;
+        },
+
+        onLogout() {
+            this.unloadOrder();
+            this.menuEssentialLinks = [];
         }
     },
     getters: {

src/stores/user.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { api, jApi } from 'boot/axios';
 import { i18n } from 'src/boot/i18n';
 import useNotify from 'src/composables/useNotify.js';
+import { useAppStore } from 'src/stores/app.js';
 
 const { t } = i18n.global;
 const { notify } = useNotify();
@@ -35,6 +36,7 @@ export const useUserStore = defineStore('user', {
 
     actions: {
         async init() {
+            this.isGuest = localStorage.getItem('hederaGuest') || false;
             await this.fetchUser();
             await this.supplantInit();
             this.updateSiteLocale();
@@ -71,6 +73,8 @@ export const useUserStore = defineStore('user', {
                 sessionStorage.removeItem('vnToken');
             }
             this.$reset();
+            localStorage.removeItem('hederaGuest');
+            useAppStore().onLogout();
         },
 
         async fetchUser(userType = 'user') {