Features: 1) Add ESLint dependencies for Vue and Astro projects, including eslint-plugin-astro and eslint-plugin-vue;

Fixes: None;

Extra: 1) Update `package-lock.json` with multiple development-related dependencies, including `vue-eslint-parser` and packages for TypeScript compatibility;

storefront/eslint.config.mjs

@@ -0,0 +1,96 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    // Allow ESLint to recognize .vue and .astro files
+    extraFileExtensions: ['.vue', '.astro'],
+  },
+  extends: [
+    // Basic recommended rules from ESLint
+    'eslint:recommended',
+
+    // Vue 3 best practices (uses vue-eslint-parser under the hood)
+    'plugin:vue/vue3-recommended',      // :contentReference[oaicite:0]{index=0}
+
+    // TypeScript support (if you’re using TS in .js/.ts or inside .vue/.astro)
+    'plugin:@typescript-eslint/recommended',
+
+    // Astro’s own recommended ruleset
+    'plugin:astro/recommended',         // :contentReference[oaicite:1]{index=1}
+  ],
+  plugins: [
+    'vue',
+    '@typescript-eslint',
+    'astro',
+  ],
+  rules: {
+    // Customize global rules here (if needed). For example:
+    // '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+  },
+  overrides: [
+    // ————— Override for `.astro` files —————
+    {
+      files: ['*.astro'],
+      parser: 'astro-eslint-parser',
+      parserOptions: {
+        // Inside <script> blocks in .astro, treat code as TS by default
+        parser: '@typescript-eslint/parser',
+        ecmaVersion: 2021,
+        sourceType: 'module',
+      },
+      extends: [
+        // Minimal Astro linting (parses frontmatter, template, etc.)
+        'plugin:astro/recommended',       // :contentReference[oaicite:2]{index=2}
+      ],
+      rules: {
+        // Astro-specific rule overrides, e.g.:
+        // 'astro/no-set-html-directive': 'error'
+      },
+    },
+
+    // ————— Override for `.vue` files —————
+    {
+      files: ['*.vue'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        // Delegate script blocks in .vue to TypeScript or plain JS
+        parser: '@typescript-eslint/parser',
+        ecmaVersion: 2021,
+        sourceType: 'module',
+      },
+      extends: [
+        // Vue 3 recommended rules
+        'plugin:vue/vue3-recommended',    // :contentReference[oaicite:3]{index=3}
+        // If using TS inside .vue, this ensures type-aware rules
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {
+        // Vue-specific rule overrides, e.g.:
+        // 'vue/no-mutating-props': 'error'
+      },
+    },
+
+    // ————— Override for plain `.js` / `.ts` / `.jsx` / `.tsx` files —————
+    {
+      files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        ecmaVersion: 2021,
+        sourceType: 'module',
+      },
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {
+        // Project-wide JS/TS rule overrides, if any
+      },
+    },
+  ],
+}

storefront/package.json

@@ -26,7 +26,11 @@
     "vue3-marquee-slider": "^1.0.5"
   },
   "devDependencies": {
+    "eslint": "^9.28.0",
+    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-vue": "^10.1.0",
     "sass": "^1.83.0",
-    "sass-loader": "^16.0.4"
+    "sass-loader": "^16.0.4",
+    "vue-eslint-parser": "^10.1.3"
   }
 }

storefront/src/apollo/index.js

@@ -1,8 +1,10 @@
-import {ApolloClient, ApolloLink, createHttpLink, InMemoryCache} from '@apollo/client/core'
+import pkg from '@apollo/client/core';
 import { setContext } from '@apollo/client/link/context'
 import {DEFAULT_LOCALE, LOCALE_STORAGE_ACCESS_TOKEN_KEY, LOCALE_STORAGE_LOCALE_KEY} from "@/config/index.js";
 import {computed} from "vue";
 
+const { ApolloClient, ApolloLink, createHttpLink, InMemoryCache } = pkg;
+
 const httpLink = createHttpLink({
   uri: 'https://api.' + import.meta.env.EVIBES_BASE_DOMAIN + '/graphql/',
 });

storefront/src/components/app-initializer.vue

@@ -0,0 +1,25 @@
+
+<template>
+  <div style="display: none;"></div>
+</template>
+
+<script setup>
+import { useRefresh } from "@/composables/auth";
+import { useCompanyInfo } from "@/composables/company";
+import { useLanguages } from "@/composables/languages/index.js";
+import { onMounted } from "vue";
+
+const { refresh } = useRefresh();
+const { getCompanyInfo } = useCompanyInfo();
+const { getLanguages } = useLanguages();
+
+onMounted(async () => {
+  await refresh();
+  await getCompanyInfo();
+  await getLanguages();
+
+  setInterval(async () => {
+    await refresh();
+  }, 600000);
+})
+</script>

storefront/src/layouts/default-layout.astro

@@ -1,30 +1,41 @@
 ---
+import AppInitializer from "@/components/app-initializer.vue";
 import {useRefresh} from "@/composables/auth";
 import {useCompanyInfo} from "@/composables/company";
 import {useLanguages} from "@/composables/languages/index.js";
 import BaseHeader from "@/components/base/header/base-header.vue";
 import BaseFooter from "@/components/base/base-footer.vue";
 
-document.addEventListener('DOMContentLoaded', async () => {
-  const { refresh } = useRefresh();
-  const { getCompanyInfo } = useCompanyInfo();
-  const { getLanguages } = useLanguages();
+const { refresh } = useRefresh();
+const { getCompanyInfo } = useCompanyInfo();
+const { getLanguages } = useLanguages();
 
-  await refresh();
-  await getCompanyInfo();
-  await getLanguages();
+await refresh();
+await getCompanyInfo();
+await getLanguages();
 
-  setInterval(async () => {
+setInterval(async () => {
   await refresh();
-  }, 600000);
-});
+}, 600000);
 ---
 
-<div>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width" />
+  <meta name="generator" content={Astro.generator} />
+  <title>Astro</title>
+</head>
+<body>
+<main class="main">
   <BaseHeader client:load />
   <slot />
   <BaseFooter client:load />
-</div>
+  <AppInitializer client:load />
+</main>
+</body>
+</html>
 
 <style scoped>
 

storefront/src/layouts/default-layout.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <base-header />
+    <slot />
+    <base-footer />
+  </div>
+</template>
+
+<script setup>
+import {useRefresh} from "@/composables/auth";
+import {useCompanyInfo} from "@/composables/company";
+import {useLanguages} from "@/composables/languages/index.js";
+import BaseHeader from "@/components/base/header/base-header.vue";
+import BaseFooter from "@/components/base/base-footer.vue";
+import {onMounted} from "vue";
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import '@/assets/styles/global/fonts.scss'
+import '@/assets/styles/main.scss'
+
+const { refresh } = useRefresh();
+const { getCompanyInfo } = useCompanyInfo();
+const { getLanguages } = useLanguages();
+
+onMounted(async () => {
+  await refresh();
+  await getCompanyInfo();
+  await getLanguages();
+
+  setInterval(async () => {
+    await refresh();
+  }, 600000);
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

storefront/src/pages/index.astro

@@ -1,18 +1,7 @@
 ---
-import DefaultLayout from '../layouts/default-layout.astro';
+import DefaultLayout from "../layouts/default-layout.astro";
 ---
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<DefaultLayout>
+<DefaultLayout>
 	<h1>Astro</h1>
-		</DefaultLayout>
-	</body>
-</html>
+</DefaultLayout>

storefront/src/plugins/index.js

@@ -1,10 +1,26 @@
 import { setupI18n } from './i18n.js'
 import { pinia } from "../stores/index.js";
+import { createApolloClient } from "../apollo/index.js";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import ElementPlus from 'element-plus';
+
 
 export default function (app) {
-  app.use(pinia)
+  app.use(pinia);
 
-  setupI18n().then(i18n => {
-    app.use(i18n)
-  })
+  app.use(ElementPlus);
+
+  const apolloClient = createApolloClient();
+  app.provide(DefaultApolloClient, apolloClient);
+
+  const i18n = setupI18n();
+  if (i18n instanceof Promise) {
+    i18n.then(i18nInstance => {
+      app.use(i18nInstance);
+    });
+  } else {
+    app.use(i18n);
+  }
+
+  return app;
 }

storefront/src/stores/app.js

@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+export const useAppStore = defineStore('app', () => {
+  const activeState = ref(null);
+
+  const setActiveState = (state) => {
+    activeState.value = state;
+  };
+
+  const isSignUp = computed(() => activeState.value === "signUp");
+  const isSignIn = computed(() => activeState.value === "signIn");
+  const isForgot = computed(() => activeState.value === "reset-password");
+  const isReset = computed(() => activeState.value === "new-password");
+
+  return {
+    activeState,
+    setActiveState,
+
+    isSignUp,
+    isSignIn,
+    isForgot,
+    isReset
+  };
+});