README.md

@@ -6,13 +6,13 @@ Hedera is the main web page for Verdnatura.
 
 Required dependencies.
 
- * PHP >= 7.0
+-   PHP >= 7.0
- * Node.js >= 8.0
+-   Node.js >= 18.0
 
 Launch application for development.
 
 ```
-$ npm run dev
+$ quasar dev
 ```
 
 Launch project backend.
@@ -30,6 +30,6 @@ php hedera-web.php -m method_path
 
 ## Built with
 
- * [Webpack](https://webpack.js.org/)
+-   [Webpack](https://webpack.js.org/)
- * [MooTools](https://mootools.net/)
+-   [MooTools](https://mootools.net/)
- * [TinyMCE](https://www.tinymce.com/)
+-   [TinyMCE](https://www.tinymce.com/)

cypress.config.js

@@ -12,9 +12,20 @@ module.exports = defineConfig({
         numTestsKeptInMemory: 0,
         video: false,
         screenshotOnRunFailure: false,
+        reporter: 'cypress-mochawesome-reporter',
+        reporterOptions: {
+            charts: true,
+            reportPageTitle: 'Hedera-Web E2E Reporter',
+            embeddedScreenshots: true,
+            reportDir: 'src/test/cypress/reports',
+            inlineAssets: true
+        },
         setupNodeEvents(on, config) {
+            require('cypress-mochawesome-reporter/plugin')(on);
             on('after:spec', (spec, results) => {
                 console.log('Finished running', spec.relative);
+                console.log('❌spec:', results.stats.failures);
+                console.log('✅spec:', results.stats.passes);
             });
         }
     }

package.json

@@ -5,6 +5,7 @@
     "license": "GPL-3.0",
     "productName": "Verdnatura",
     "author": "Verdnatura Levante SL",
+    "packageManager": "pnpm@8.15.1",
     "repository": {
         "type": "git",
         "url": "https://git.verdnatura.es/hedera-web"
@@ -15,39 +16,29 @@
         "@babel/preset-env": "^7.20.2",
         "@intlify/vue-i18n-loader": "^4.2.0",
         "@quasar/app-webpack": "^3.0.0",
-        "@quasar/cli": "^2.4.1",
+        "cypress-mochawesome-reporter": "^3.8.2",
-        "archiver": "^5.3.1",
+        "eslint": "^8.57.0",
-        "assets-webpack-plugin": "^7.1.1",
-        "cypress": "^13.15.0",
-        "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-config-standard": "^17.1.0",
+        "eslint-config-standard": "^17.0.0",
-        "eslint-plugin-cypress": "^2.13.3",
+        "eslint-plugin-cypress": "^4.1.0",
         "eslint-plugin-import": "^2.19.1",
         "eslint-plugin-n": "^15.0.0",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-promise": "^6.0.0",
         "eslint-plugin-vue": "^9.27.0",
-        "eslint-webpack-plugin": "^4.2.0",
+        "eslint-webpack-plugin": "^3.1.1",
-        "fs-extra": "^10.1.0",
+        "file-loader": "^6.2.0",
-        "glob": "^11.0.0",
+        "json-loader": "^0.5.7",
-        "mini-css-extract-plugin": "^2.7.0",
+        "yaml-loader": "^0.5.0"
-        "postcss": "^8.4.39",
-        "postcss-import": "^13.0.0",
-        "postcss-loader": "^4.3.0",
-        "postcss-url": "^10.1.3"
     },
     "dependencies": {
-        "@quasar/extras": "^1.0.0",
+        "@quasar/cli": "^2.3.0",
+        "@quasar/extras": "^1.16.9",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
-        "js-yaml": "^3.12.1",
-        "mootools": "^1.5.2",
         "pinia": "^2.0.11",
-        "promise-polyfill": "^8.2.3",
+        "quasar": "^2.14.5",
-        "quasar": "^2.6.0",
+        "require-yaml": "0.0.1",
-        "require-yaml": "^0.0.1",
-        "tinymce": "^6.3.0",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.0.0"

src/components/common/VnSelect.vue

@@ -162,10 +162,7 @@ async function filterHandler(val, update) {
         :rules="$attrs.required ? [requiredFieldRule] : null"
         virtual-scroll-slice-size="options.length"
     >
-        <template
+        <template v-if="isClearable" #append>
-            v-if="isClearable"
-            #append
-        >
             <QIcon
                 v-show="value"
                 name="close"
@@ -179,11 +176,7 @@ async function filterHandler(val, update) {
             #[slotName]="slotData"
             :key="slotName"
         >
-            <slot
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
-                :name="slotName"
-                v-bind="slotData ?? {}"
-                :key="slotName"
-            />
         </template>
     </QSelect>
 </template>

src/i18n/ca-ES/index.js

@@ -49,7 +49,7 @@ export default {
         ]
     },
     of: 'de',
-
+    startOrder: 'Començar comanda',
     // Sections titles
     titles: {
         Home: 'Inici',

src/i18n/en-US/index.js

@@ -2,16 +2,6 @@
 // so you can safely delete all default props below
 
 export default {
-    failed: 'Action failed',
-    success: 'Action was successful',
-    internalServerError: 'Internal server error',
-    somethingWentWrong: 'Something went wrong',
-    loginFailed: 'Login failed',
-    authenticationRequired: 'Authentication required',
-    notFound: 'Not found',
-    today: 'Today',
-    yesterday: 'Yesterday',
-    tomorrow: 'Tomorrow',
     language: 'Language',
     langs: {
         en: 'English',
@@ -61,7 +51,17 @@ export default {
             'Dec'
         ]
     },
-
+    startOrder: 'Start order',
+    failed: 'Action failed',
+    success: 'Action was successful',
+    internalServerError: 'Internal server error',
+    somethingWentWrong: 'Something went wrong',
+    loginFailed: 'Login failed',
+    authenticationRequired: 'Authentication required',
+    notFound: 'Not found',
+    today: 'Today',
+    yesterday: 'Yesterday',
+    tomorrow: 'Tomorrow',
     // Sections titles
     titles: {
         Home: 'Home',

src/i18n/es-ES/index.js

@@ -1,14 +1,4 @@
 export default {
-    failed: 'Acción fallida',
-    success: 'Acción exitosa',
-    internalServerError: 'Error interno del servidor',
-    somethingWentWrong: 'Algo salió mal',
-    loginFailed: 'Usuario o contraseña incorrectos',
-    authenticationRequired: 'Autenticación requerida',
-    notFound: 'No encontrado',
-    today: 'Hoy',
-    yesterday: 'Ayer',
-    tomorrow: 'Mañana',
     language: 'Idioma',
     langs: {
         en: 'Inglés',
@@ -58,6 +48,16 @@ export default {
             'Dic'
         ]
     },
+    failed: 'Acción fallida',
+    success: 'Acción exitosa',
+    internalServerError: 'Error interno del servidor',
+    somethingWentWrong: 'Algo salió mal',
+    loginFailed: 'Usuario o contraseña incorrectos',
+    authenticationRequired: 'Autenticación requerida',
+    notFound: 'No encontrado',
+    today: 'Hoy',
+    yesterday: 'Ayer',
+    tomorrow: 'Mañana',
 
     // Sections titles
     titles: {
@@ -128,7 +128,6 @@ export default {
     delete: 'Borrar',
     confirmDelete: '¿Estás seguro de que quieres borrar la línea?',
     emptyList: 'Lista vacía',
-
     orders: 'Pedidos',
     order: 'Pedido pendiente',
     ticket: 'Pedido',
@@ -149,6 +148,7 @@ export default {
     remindMe: 'Recuérdame',
     logInAsGuest: 'Entrar como invitado',
     logIn: 'Iniciar sesión',
+    logOut: 'Cerrar sesión',
     loginMail: "{'info'}{'@'}{'verdnatura.es'}",
     loginPhone: '+34 963 242 100',
     haveForgottenPassword: '¿Has olvidado tu contraseña?',
@@ -161,6 +161,7 @@ export default {
     cancel: 'Cancelar',
     of: 'de',
     modify: 'Modificar',
+    startOrder: 'Empezar pedido',
     shoppingCart: 'Cesta de la compra',
     available: 'Disponible',
     minQuantity: 'Cantidad mínima',

src/i18n/fr-FR/index.js

@@ -49,7 +49,7 @@ export default {
         ]
     },
     of: 'de',
-
+    startOrder: 'Lancer commande',
     // Sections titles
     titles: {
         Home: 'Accueil',

src/i18n/pt-PT/index.js

@@ -49,6 +49,7 @@ export default {
         ]
     },
     of: 'de',
+    startOrder: 'Comece uma encomenda',
     // Sections titles
     titles: {
         Home: 'Início',

src/layouts/MainLayout.vue

@@ -47,7 +47,7 @@ const logoutSupplantedUser = async () => {
 </script>
 
 <template>
-    <QLayout view="lHh Lpr lFf">
+    <QLayout view="hhh Lpr fFf">
         <QHeader>
             <QToolbar>
                 <QBtn
@@ -57,8 +57,10 @@ const logoutSupplantedUser = async () => {
                     icon="menu"
                     aria-label="Menu"
                     @click="toggleLeftDrawer"
+                    class="q-mr-md"
                 />
-                <QToolbarTitle>
+                <img class="logo q-mr-lg" src="statics/logo-dark.svg" />
+                <QToolbarTitle data-testid="headerTitle">
                     {{ customTitle || menuTitle }}
                     <div v-if="subtitle" class="subtitle text-caption">
                         {{ subtitle }}
@@ -77,78 +79,79 @@ const logoutSupplantedUser = async () => {
                 </QBtn>
             </QToolbar>
         </QHeader>
-        <QDrawer
-            v-model="leftDrawerOpen"
-            :width="250"
-            show-if-above
-            data-testid="layoutMenuDrawer"
-        >
-            <QToolbar class="logo">
-                <img src="statics/logo-dark.svg" />
-            </QToolbar>
-            <div class="user-info">
-                <div>
-                    <span id="user-name" data-testid="layoutUserName">
-                        {{ mainUser?.nickname }}
-                    </span>
-                    <QBtn
-                        flat
-                        icon="logout"
-                        alt="_Exit"
-                        @click="logout()"
-                        data-testid="logoutButton"
-                    />
-                </div>
-                <div
-                    v-if="supplantedUser"
-                    id="supplant"
-                    class="supplant"
-                    data-testid="layoutSupplantedUserName"
-                >
-                    <span id="supplanted">
-                        {{ supplantedUser?.nickname }}
-                    </span>
-                    <QBtn
-                        flat
-                        icon="logout"
-                        alt="_Exit"
-                        @click="logoutSupplantedUser()"
-                    />
-                </div>
-            </div>
-            <QList v-for="item in filteredMenuItems" :key="item.id">
-                <QItem v-if="!item.childs" :to="`/${item.path}`">
-                    <QItemSection>
-                        <QItemLabel>{{
-                            $t(`menuTitles.${item.description}`)
-                        }}</QItemLabel>
-                    </QItemSection>
-                </QItem>
-                <QExpansionItem
-                    v-if="item.childs"
-                    :label="$t(`menuTitles.${item.description}`)"
-                    expand-separator
-                >
-                    <QList>
-                        <QItem
-                            v-for="subitem in item.childs"
-                            :key="subitem.id"
-                            :to="`/${subitem.path}`"
-                            class="q-pl-lg"
-                        >
-                            <QItemSection>
-                                <QItemLabel>
-                                    {{
-                                        $t(`menuTitles.${subitem.description}`)
-                                    }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QList>
-                </QExpansionItem>
-            </QList>
-        </QDrawer>
         <QPageContainer :key="refreshContentKey">
+            <QDrawer
+                v-model="leftDrawerOpen"
+                :width="250"
+                show-if-above
+                data-testid="layoutMenuDrawer"
+            >
+                <div class="user-info">
+                    <div>
+                        <span id="user-name" data-testid="layoutUserName">
+                            {{ mainUser?.nickname }}
+                        </span>
+                        <QBtn
+                            flat
+                            icon="logout"
+                            alt="_Exit"
+                            @click="logout()"
+                            data-testid="logoutButton"
+                        >
+                            <QTooltip>{{ $t('logOut') }}</QTooltip>
+                        </QBtn>
+                    </div>
+                    <div
+                        v-if="supplantedUser"
+                        id="supplant"
+                        class="supplant"
+                        data-testid="layoutSupplantedUserName"
+                    >
+                        <span id="supplanted">
+                            {{ supplantedUser?.nickname }}
+                        </span>
+                        <QBtn
+                            flat
+                            icon="logout"
+                            alt="_Exit"
+                            @click="logoutSupplantedUser()"
+                        />
+                    </div>
+                </div>
+                <QList v-for="item in filteredMenuItems" :key="item.id">
+                    <QItem v-if="!item.childs" :to="`/${item.path}`">
+                        <QItemSection>
+                            <QItemLabel>{{
+                                $t(`menuTitles.${item.description}`)
+                            }}</QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                    <QExpansionItem
+                        v-if="item.childs"
+                        :label="$t(`menuTitles.${item.description}`)"
+                        expand-separator
+                    >
+                        <QList>
+                            <QItem
+                                v-for="subitem in item.childs"
+                                :key="subitem.id"
+                                :to="`/${subitem.path}`"
+                                class="q-pl-lg"
+                            >
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{
+                                            $t(
+                                                `menuTitles.${subitem.description}`
+                                            )
+                                        }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </QList>
+                    </QExpansionItem>
+                </QList>
+            </QDrawer>
             <router-view />
         </QPageContainer>
     </QLayout>
@@ -158,14 +161,11 @@ const logoutSupplantedUser = async () => {
 .q-toolbar {
     min-height: 64px;
 }
-.logo {
-    background-color: $primary;
-    justify-content: center;
 
-    & > img {
+.logo {
-        width: 160px;
+    width: 160px;
-    }
 }
+
 .user-info {
     margin: 25px;
 

src/pages/Account/AccountConfig.vue

@@ -61,6 +61,10 @@ const updateConfigLang = async lang => {
     try {
         await vnFormRef.value.submit();
         userStore.updateUserLang(lang);
+        const siteLocaleLang = appStore.localeOptions.find(
+            locale => locale.value === lang
+        ).lang;
+        appStore.updateSiteLocale(siteLocaleLang);
     } catch (error) {
         console.error(error);
     }
@@ -124,6 +128,7 @@ onMounted(() => fetchLanguagesSql());
                         option-value="code"
                         :options="langOptions"
                         @update:model-value="updateConfigLang(data.lang)"
+                        data-testid="configViewLang"
                     />
                 </template>
                 <template #extraForm>

src/pages/Cms/Home.vue

@@ -20,8 +20,9 @@
                 icon="add_shopping_cart"
                 color="accent"
                 to="/ecomerce/catalog"
-                :title="$t('startOrder')"
+            >
-            />
+                <QTooltip>{{ $t('startOrder') }}</QTooltip></QBtn
+            >
         </QPageSticky>
     </div>
 </template>
@@ -62,16 +63,3 @@ export default {
     }
 };
 </script>
-
-<i18n lang="yaml">
-en-US:
-    startOrder: Start order
-es-ES:
-    startOrder: Empezar pedido
-ca-ES:
-    startOrder: Començar comanda
-fr-FR:
-    startOrder: Lancer commande
-pt-PT:
-    startOrder: Comece uma encomenda
-</i18n>

src/pages/Cms/HomeView.vue

@@ -20,16 +20,9 @@ onMounted(async () => await fetchData());
 <template>
     <div style="padding: 0">
         <div class="q-pa-sm row items-start">
-            <div
+            <div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
-                class="new-card q-pa-sm"
-                v-for="myNew in news"
-                :key="myNew.id"
-            >
                 <QCard>
-                    <VnImg
+                    <VnImg :id="myNew.image" storage="news" />
-                        :id="myNew.image"
-                        storage="news"
-                    />
 
                     <QCardSection>
                         <div class="text-h5">
@@ -37,10 +30,7 @@ onMounted(async () => await fetchData());
                         </div>
                     </QCardSection>
                     <QCardSection class="new-body">
-                        <div
+                        <div v-html="myNew.text" class="card-text" />
-                            v-html="myNew.text"
-                            class="card-text"
-                        />
                     </QCardSection>
                 </QCard>
             </div>
@@ -51,14 +41,12 @@ onMounted(async () => await fetchData());
                 icon="add_shopping_cart"
                 color="accent"
                 to="/ecomerce/catalog"
-                :title="$t('startOrder')"
+            >
-            />
+                <QTooltip>{{ $t('startOrder') }}</QTooltip></QBtn
+            >
         </QPageSticky>
     </div>
-    <QDialog
+    <QDialog v-model="showPreview" @hide="selectedImageSrc = ''">
-        v-model="showPreview"
-        @hide="selectedImageSrc = ''"
-    >
         <QImg :src="selectedImageSrc" />
     </QDialog>
 </template>

src/pages/Ecomerce/OrdersView.vue

@@ -118,8 +118,9 @@ const onConfirmPay = async () => {
                 icon="add_shopping_cart"
                 color="accent"
                 :to="{ name: 'catalog' }"
-                :title="t('startOrder')"
+            >
-            />
+                <QTooltip>{{ t('startOrder') }}</QTooltip></QBtn
+            >
         </QPageSticky>
         <VnConfirm
             v-model="showAmountToPayDialog"

src/test/cypress/integration/config/AccountConfig.spec.js

@@ -4,8 +4,16 @@ describe('Changes user nickname', () => {
         cy.visit('/#/account/conf');
     });
 
-    it('success', () => {
+    it('changes username', () => {
         cy.changeUserNickname('Bruce Wayne', 'New test nickname');
         cy.resetDB();
     });
+
+    it('changes site lang when changing user lang', () => {
+        cy.dataCy('configViewLang').should('exist');
+        cy.selectOption('[data-testid="configViewLang"]', 'Español');
+        cy.dataCy('headerTitle').should('contain', 'Configuración');
+        cy.selectOption('[data-testid="configViewLang"]', 'English');
+        cy.dataCy('headerTitle').should('contain', 'Configuration');
+    });
 });

utils/extract-locale.js

@@ -1,83 +0,0 @@
-#!/usr/bin/node
-
-var glob = require('glob');
-var fs = require('fs-extra');
-var path = require('path');
-var archiver = require('archiver');
-
-let lang = process.argv[2];
-
-if (lang == null)
-{
-	let baseName = path.basename(process.argv[1]);
-	console.log(`Usage: ${baseName} language_code`);
-	process.exit(1);
-}
-
-let nTasks;
-let projectDir;
-
-(async () => {
-	await fs.remove(lang);
-	projectDir = await fs.realpath(`${__dirname}/..`);
-
-	projectDir = realPath;
-	let len = projectDir.length + 1;
-	
-	glob(`${projectDir}/**/locale/`, async (err, localeDirs) => {
-		if (err) throw err;
-
-		for (let localeDir of localeDirs) {
-			localeDir = localeDir.substr(len)
-
-			if (/^node_modules\//.test (localeDir))
-				continue;
-
-			await exportLocale(localeDir);
-		}
-
-		nTasks = localeDirs.length;
-	});
-})();
-
-async function exportLocale (localeDir) {
-	let dstDir = `${lang}/${localeDir}`;
-	
-	try {
-		await fs.mkdirp(dstDir);
-
-		let src, dst;
-		
-		src = `${projectDir}/${localeDir}/en.json`;
-		dst = `${dstDir}/en.json`;
-		fs.copy(src, dst, onTaskEnd);
-
-		src = `${projectDir}/${localeDir}/${lang}.json`;
-		dst = `${dstDir}/${lang}.json`;
-		fs.copy(src, dst, onTaskEnd);
-
-		nTasks += 2;
-	}
-	catch (e) {
-		console.log(err);
-	}
-
-	nTasks--;
-	if (nTasks > 0) return;
-
-	let output = fs.createWriteStream(`${lang}.zip`);
-	output.on ('close', () =>{
-		fs.remove(lang);
-		console.log ('Export finalized!');
-	});
-
-	let archive = archiver('zip', {
-		zlib: { level: 9 }
-	});
-	archive.on ('error', err => {
-		throw err;
-	});
-	archive.pipe(output);
-	archive.directory(lang);
-	archive.finalize();
-}

utils/parse-yaml.js

@@ -1,28 +0,0 @@
-#!/usr/bin/node
-
-var glob = require('glob');
-var fs = require('fs-extra');
-var yaml = require('js-yaml');
-
-(async () => {
-    let projectDir = await fs.realpath(`${__dirname}/..`);
-
-    glob(`${projectDir}/**/locale/*.json`, async (err, localeFiles) => {
-        if (err) throw err;
-
-        for (let localeFile of localeFiles) {
-            if (/node_modules/.test (localeFile))
-                continue;
-
-            let dstFile = localeFile.replace(/\.json$/, '.yml');
-            let ymlString = yaml.safeDump(require(localeFile));
-            await fs.writeFile(dstFile, ymlString, 'utf8');
-            await fs.unlink(localeFile);
-
-            console.log('->', localeFile);
-            console.log('  ', dstFile);
-        }
-
-        console.log('Total %d files dumped.', localeFiles.length);
-    });
-})();