2024-01-11 06:20:29 +00:00 · 2024-01-04 10:39:55 +00:00 · 2024-01-04 11:07:14 +00:00 · 2024-01-04 11:08:16 +00:00 · 2024-01-04 11:10:51 +00:00 · 2024-01-04 11:13:56 +00:00
100 changed files with 1516 additions and 17205 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -4,5 +4,4 @@
 /.quasar
 /node_modules
 .eslintrc.js
-/src-ssr
 /quasar.config.*.temporary.compiled*
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -4,19 +4,14 @@ module.exports = {
  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
  root: true,

-  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
-  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
-  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
  parserOptions: {
-    parser: require.resolve('@typescript-eslint/parser'),
-    extraFileExtensions: [ '.vue' ]
+    ecmaVersion: 2021, // Allows for the parsing of modern ECMAScript features
  },

  env: {
-    browser: true,
-    es2021: true,
    node: true,
-    'vue/setup-compiler-macros': true
+    browser: true,
+    'vue/setup-compiler-macros': true,
  },

  // Rules order is important, please avoid shuffling them
@ -24,10 +19,6 @@ module.exports = {
    // Base ESLint recommended rules
    // 'eslint:recommended',

-    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
-    // ESLint typescript rules
-    'plugin:@typescript-eslint/recommended',
-
    // Uncomment any of the lines below to choose desired strictness,
    // but leave only one uncommented!
    // See https://eslint.vuejs.org/rules/#available-rules
@ -37,21 +28,17 @@ module.exports = {

    // https://github.com/prettier/eslint-config-prettier#installation
    // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier'
+    'prettier',
  ],

  plugins: [
-    // required to apply rules which need type information
-    '@typescript-eslint',
-
    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
    // required to lint *.vue files
-    'vue'
+    'vue',

    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
    // Prettier has not been included as plugin to avoid performance impact
    // add it as an extension for your IDE
-    
  ],

  globals: {
@ -64,27 +51,14 @@ module.exports = {
    __QUASAR_SSR_PWA__: 'readonly',
    process: 'readonly',
    Capacitor: 'readonly',
-    chrome: 'readonly'
+    chrome: 'readonly',
  },

  // add your custom rules here
  rules: {
-    
    'prefer-promise-reject-errors': 'off',

-    quotes: ['warn', 'single', { avoidEscape: true }],
-
-    // this rule, if on, would require explicit return type on the `render` function
-    '@typescript-eslint/explicit-function-return-type': 'off',
-
-    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
-    '@typescript-eslint/no-var-requires': 'off',
-
-    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
-    // does not work with type definitions
-    'no-unused-vars': 'off',
-
    // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-}
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+};
--- a/.prettierrc
+++ b/.prettierrc
@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true
-}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,27 +1,22 @@
 {
-  "editor.bracketPairColorization.enabled": true,
-  "editor.guides.bracketPairs": true,
  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": [
-    "source.addMissingImports",
-    "source.organizeImports",
-    "source.fixAll.eslint"
-  ],
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
-  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnPaste": true,
  "editor.minimap.enabled": false,
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.fontWeight": "normal",
  "editor.guides.highlightActiveBracketPair": true,
+  "editor.bracketPairColorization.enabled": true,
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
+  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": true,
  "editor.acceptSuggestionOnEnter": "smart",
  "editor.tabCompletion": "on",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.linkedEditing": true,
  "terminal.integrated.cursorStyleInactive": "line",
+  "workbench.iconTheme": "material-icon-theme",
+  "workbench.colorTheme": "Default Dark+",
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
@ -32,11 +27,16 @@
  },
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,
+  "material-icon-theme.files.color": "#42a5f5",
+  "material-icon-theme.folders.theme": "specific",
+  "material-icon-theme.activeIconPack": "react",
+  "material-icon-theme.folders.color": "#42a5f5",
  "prettier.arrowParens": "always",
  "prettier.tabWidth": 2,
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.printWidth": 175,
+  "eslint.validate": ["javascript", "javascriptvue"],
  "explorer.compactFolders": false,
  "terminal.integrated.env.windows": {},
  "git.enableSmartCommit": true,
@ -44,7 +44,6 @@
  "console-ninja.fontSize": 12,
  "git.autofetch": true,
  "git.confirmSync": false,
-  "errorLens.excludeBySource": ["eslint(react/prop-types)"],
  "javascript.updateImportsOnFileMove.enabled": "always",
  "console-ninja.featureSet": "Community",
  "liveServer.settings.donotShowInfoMsg": true,
@ -56,16 +55,24 @@
  "terminal.integrated.enableImages": true,
  "figma.autocompleteBlocks": true,
  "figma.assetExportDirectory": "src/assets",
+  "editor.codeActionsOnSave": [
+    "source.addMissingImports",
+    "source.organizeImports",
+    "source.fixAll.eslint"
+  ],
  "liveServer.settings.donotVerifyTags": true,
  "gitlens.gitCommands.skipConfirmations": ["fetch:command", "switch:command"],
  "symbols.hidesExplorerArrows": false,
-  "editor.fontFamily": "CaskaydiaCove Nerd Font",
  "diffEditor.ignoreTrimWhitespace": false,
-  "terminal.integrated.fontFamily": "CaskaydiaCove Nerd Font",
  "svg.preview.mode": "svg",
  "[svg]": {
    "editor.defaultFormatter": "jock.svg"
  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
  "workbench.tree.indent": 16,
-  "git.ignoreRebaseWarning": true
+  "window.zoomLevel": 0,
+  "git.ignoreRebaseWarning": true,
+  "editor.largeFileOptimizations": false
 }
--- a/README.md
+++ b/README.md
@ -3,6 +3,7 @@
 A floranet app

 ## Install the dependencies
+
 ```bash
 yarn
 # or
@ -10,32 +11,33 @@ npm install
 ```

 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
+
 ```bash
 quasar dev
 ```

-
 ### Lint the files
+
 ```bash
 yarn lint
 # or
 npm run lint
 ```

-
 ### Format the files
+
 ```bash
 yarn format
 # or
 npm run format
 ```

-
-
 ### Build the app for production
+
 ```bash
 quasar build
 ```

 ### Customize the configuration
+
 See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
--- a/index.html
+++ b/index.html
@ -43,6 +43,14 @@
      href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Questrial&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"
+      defer
+    ></script>
  </head>
  <body>
    <!-- quasar:entry-point -->
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "src/*": ["src/*"],
+      "app/*": ["*"],
+      "components/*": ["src/components/*"],
+      "layouts/*": ["src/layouts/*"],
+      "pages/*": ["src/pages/*"],
+      "assets/*": ["src/assets/*"],
+      "boot/*": ["src/boot/*"],
+      "stores/*": ["src/stores/*"],
+      "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
+    }
+  },
+  "exclude": ["dist", ".quasar", "node_modules"]
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -14,27 +14,24 @@
        "axios": "^1.2.1",
        "pinia": "^2.0.11",
        "quasar": "^2.6.0",
-        "v-mask": "^2.3.0",
        "vee-validate": "^4.12.2",
        "vue": "^3.0.0",
+        "vue-i18n": "^9.0.0",
        "vue-image-zoomer": "^2.2.3",
        "vue-router": "^4.0.0",
        "zod": "^3.22.4"
      },
      "devDependencies": {
-        "@babel/types": "^7.23.6",
        "@faker-js/faker": "^8.3.1",
+        "@intlify/vite-plugin-vue-i18n": "^3.3.1",
        "@quasar/app-vite": "^1.3.0",
-        "@types/node": "^12.20.21",
-        "@typescript-eslint/eslint-plugin": "^5.10.0",
-        "@typescript-eslint/parser": "^5.10.0",
        "autoprefixer": "^10.4.2",
        "eslint": "^8.10.0",
        "eslint-config-prettier": "^8.1.0",
        "eslint-plugin-vue": "^9.0.0",
        "json-server": "^0.17.4",
-        "prettier": "^2.5.1",
-        "typescript": "^4.5.4"
+        "postcss": "^8.4.14",
+        "prettier": "^2.5.1"
      },
      "engines": {
        "node": "^18 || ^16 || ^14.19",
@ -51,24 +48,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
    "node_modules/@babel/parser": {
      "version": "7.23.6",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
@ -80,20 +59,6 @@
        "node": ">=6.0.0"
      }
    },
-    "node_modules/@babel/types": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
-      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@ -199,6 +164,101 @@
      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
      "dev": true
    },
+    "node_modules/@intlify/bundle-utils": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
+      "integrity": "sha512-vngkvlIVV8ZJoyC5VqMvqJd2nvsx+qMN7pQjPiPjOrVndeiR7Dlue0k86Q8FsFUzyksW3HJZZi833ldxwbFzTA==",
+      "dev": true,
+      "dependencies": {
+        "@intlify/message-compiler": "^9.1.0",
+        "@intlify/shared": "^9.1.0",
+        "jsonc-eslint-parser": "^1.0.1",
+        "source-map": "^0.6.1",
+        "yaml-eslint-parser": "^0.3.2"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependenciesMeta": {
+        "petite-vue-i18n": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.8.0.tgz",
+      "integrity": "sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.8.0",
+        "@intlify/shared": "9.8.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.8.0.tgz",
+      "integrity": "sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==",
+      "dependencies": {
+        "@intlify/shared": "9.8.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.8.0.tgz",
+      "integrity": "sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/vite-plugin-vue-i18n": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-3.4.0.tgz",
+      "integrity": "sha512-XXcZBgwJ+3FRu11c4ARoY9N00kElPii0/jNZ49qR045Ka7/YGCwb1Ku14BBlMSEHiHDSjLQknLwrJKSQGVZLyA==",
+      "dev": true,
+      "dependencies": {
+        "@intlify/bundle-utils": "^2.2.2",
+        "@intlify/shared": "^9.1.0",
+        "@rollup/pluginutils": "^4.1.0",
+        "debug": "^4.3.1",
+        "fast-glob": "^3.2.5",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "petite-vue-i18n": "^9.1.0",
+        "vite": "^2.0.0",
+        "vue-i18n": "^9.1.0"
+      },
+      "peerDependenciesMeta": {
+        "petite-vue-i18n": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.4.15",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@ -476,12 +536,6 @@
      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
      "dev": true
    },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
-    },
    "node_modules/@types/mime": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@ -506,12 +560,6 @@
      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
      "dev": true
    },
-    "node_modules/@types/semver": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
-      "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==",
-      "dev": true
-    },
    "node_modules/@types/send": {
      "version": "0.17.4",
      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@ -538,194 +586,6 @@
      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
    },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
-      "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/type-utils": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
-      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
-      "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
-      "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
-      "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
-      "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
-      "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@types/json-schema": "^7.0.9",
-        "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "eslint-scope": "^5.1.1",
-        "semver": "^7.3.7"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
-      "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
    "node_modules/@ungap/structured-clone": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@ -1134,15 +994,6 @@
      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
      "dev": true
    },
-    "node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/astral-regex": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@ -1960,18 +1811,6 @@
        "npm": "1.2.8000 || >= 1.4.16"
      }
    },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "dependencies": {
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@ -2530,17 +2369,28 @@
        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
      }
    },
-    "node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+    "node_modules/eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
      "dev": true,
      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
+        "eslint-visitor-keys": "^1.1.0"
      },
      "engines": {
-        "node": ">=8.0.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
      }
    },
    "node_modules/eslint-visitor-keys": {
@ -2651,15 +2501,6 @@
        "node": ">=4.0"
      }
    },
-    "node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
    "node_modules/estree-walker": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@ -3163,26 +3004,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/gopd": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@ -3691,6 +3512,66 @@
      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
      "dev": true
    },
+    "node_modules/jsonc-eslint-parser": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
+      "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.4.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^1.3.0",
+        "espree": "^6.0.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/jsonc-eslint-parser/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/jsonc-eslint-parser/node_modules/espree": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "acorn-jsx": "^5.2.0",
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/jsonc-eslint-parser/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
    "node_modules/jsonfile": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@ -4124,12 +4005,6 @@
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
      "dev": true
    },
-    "node_modules/natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
-      "dev": true
-    },
    "node_modules/negotiator": {
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@ -4412,15 +4287,6 @@
      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
      "dev": true
    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -5158,15 +5024,6 @@
      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
      "dev": true
    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/slice-ansi": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
@ -5397,15 +5254,6 @@
        "node": ">=0.6.0"
      }
    },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@ -5433,27 +5281,6 @@
      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
      "dev": true
    },
-    "node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
-    "node_modules/tsutils/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -5494,7 +5321,8 @@
      "version": "4.9.5",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@ -5593,11 +5421,6 @@
        "node": ">= 0.4.0"
      }
    },
-    "node_modules/v-mask": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/v-mask/-/v-mask-2.3.0.tgz",
-      "integrity": "sha512-ap7pTtCTvj25CqX4VYXqudCBd0+XvYyhiiLbzWQQR7AMQosJ2+DPu0a94P9stk0EGmGcmYxJaPkFkfjD8hquWQ=="
-    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@ -5725,6 +5548,25 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/vue-i18n": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.8.0.tgz",
+      "integrity": "sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.8.0",
+        "@intlify/shared": "9.8.0",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue-image-zoomer": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.2.3.tgz",
@ -5835,6 +5677,35 @@
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yaml-eslint-parser": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
+      "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^1.3.0",
+        "lodash": "^4.17.20",
+        "yaml": "^1.10.0"
+      }
+    },
+    "node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/yargs": {
      "version": "17.7.2",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
--- a/package.json
+++ b/package.json
@ -6,42 +6,38 @@
  "author": "user",
  "private": true,
  "scripts": {
-    "lint": "eslint --ext .js,.ts,.vue ./",
-    "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
+    "lint": "eslint --ext .js,.vue ./",
+    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "dev": "quasar dev -m ssr",
-    "backend": "json-server -p 5000 -d 3000 -w src/services/json-server/db.json",
    "build": "quasar build -m ssr",
    "start:build": "npm run build && cd dist/ssr && npm i && npm run start",
-    "typecheck": "tsc --project tsconfig.json --noEmit"
+    "backend": "json-server -p 5000 -d 600 -w src/services/json-server/db.json"
  },
  "dependencies": {
-    "@quasar/extras": "^1.16.4",
    "@vee-validate/zod": "^4.12.2",
    "@vueuse/core": "^10.7.0",
-    "axios": "^1.2.1",
-    "pinia": "^2.0.11",
-    "quasar": "^2.6.0",
-    "v-mask": "^2.3.0",
    "vee-validate": "^4.12.2",
-    "vue": "^3.0.0",
    "vue-image-zoomer": "^2.2.3",
-    "vue-router": "^4.0.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "axios": "^1.2.1",
+    "vue-i18n": "^9.0.0",
+    "pinia": "^2.0.11",
+    "@quasar/extras": "^1.16.4",
+    "quasar": "^2.6.0",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0"
  },
  "devDependencies": {
-    "@babel/types": "^7.23.6",
    "@faker-js/faker": "^8.3.1",
-    "@quasar/app-vite": "^1.3.0",
-    "@types/node": "^12.20.21",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
-    "autoprefixer": "^10.4.2",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^9.0.0",
    "json-server": "^0.17.4",
+    "eslint": "^8.10.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "eslint-config-prettier": "^8.1.0",
    "prettier": "^2.5.1",
-    "typescript": "^4.5.4"
+    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
+    "@quasar/app-vite": "^1.3.0",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.14"
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -13,9 +13,9 @@ module.exports = {
        'last 4 Android versions',
        'last 4 ChromeAndroid versions',
        'last 4 FirefoxAndroid versions',
-        'last 4 iOS versions'
-      ]
-    })
+        'last 4 iOS versions',
+      ],
+    }),

    // https://github.com/elchininet/postcss-rtlcss
    // If you want to support RTL css, then
@ -23,5 +23,5 @@ module.exports = {
    // 2. optionally set quasar.config.js > framework > lang to an RTL language
    // 3. uncomment the following line:
    // require('postcss-rtlcss')
-  ]
-}
+  ],
+};
--- a/public/assets/empty-img.png
+++ b/public/assets/empty-img.png
--- a/quasar.config.js
+++ b/quasar.config.js
@ -8,7 +8,8 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

-const { configure } = require('quasar/wrappers');
+const { configure } = require("quasar/wrappers");
+const path = require("path");

 module.exports = configure(function (/* ctx */) {
  return {
@ -27,10 +28,10 @@ module.exports = configure(function (/* ctx */) {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['axios', { server: false, path: 'brand-colors' }],
+    boot: ["i18n", "axios"],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
-    css: ['app.scss'],
+    css: ["app.scss"],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
@ -42,18 +43,18 @@ module.exports = configure(function (/* ctx */) {
      // '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-vite/quasar-config-js#build
    build: {
      target: {
-        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
-        node: 'node16',
+        browser: ["es2019", "edge88", "firefox78", "chrome87", "safari13.1"],
+        node: "node16",
      },

-      vueRouterMode: 'hash', // available values: 'hash', 'history'
+      vueRouterMode: "hash", // available values: 'hash', 'history'
      // vueRouterBase,
      // vueDevtools,
      // vueOptionsAPI: false,
@ -70,11 +71,31 @@ module.exports = configure(function (/* ctx */) {
      // distDir

      // extendViteConf (viteConf) {},
-      // viteVuePluginOptions: {},
+      viteVuePluginOptions: {
+        template: {
+          compilerOptions: {
+            isCustomElement: (tag) =>
+              ["swiper-slide", "swiper-container"].includes(tag),
+          },
+        },
+      },

-      // vitePlugins: [
-      //   [ 'package-name', { ..options.. } ]
-      // ]
+      vitePlugins: [
+        [
+          "@intlify/vite-plugin-vue-i18n",
+          {
+            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
+            // compositionOnly: false,
+
+            // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
+            // you need to set `runtimeOnly: false`
+            // runtimeOnly: false,
+
+            // you need to set i18n resource including paths !
+            include: path.resolve(__dirname, "./src/i18n/**"),
+          },
+        ],
+      ],
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
@ -85,13 +106,7 @@ module.exports = configure(function (/* ctx */) {

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
    framework: {
-      config: {
-        loading: {
-          backgroundColor: 'tomato',
-          message: 'loading page',
-          customClass: 'loader',
-        },
-      },
+      config: {},

      // iconSet: 'material-icons', // Quasar icon set
      // lang: 'en-US', // Quasar language pack
@ -104,7 +119,7 @@ module.exports = configure(function (/* ctx */) {
      // directives: [],

      // Quasar plugins
-      plugins: ['Meta', 'Loading'],
+      plugins: ["Meta", "Loading"],
    },

    // animations: 'all', // --- includes all animations
@ -140,16 +155,16 @@ module.exports = configure(function (/* ctx */) {
      // (gets superseded if process.env.PORT is specified at runtime)

      middlewares: [
-        'render', // keep this as last one
+        "render", // keep this as last one
      ],
    },

    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
    pwa: {
-      workboxMode: 'generateSW', // or 'injectManifest'
+      workboxMode: "generateSW", // or 'injectManifest'
      injectPwaMetaTags: true,
-      swFilename: 'sw.js',
-      manifestFilename: 'manifest.json',
+      swFilename: "sw.js",
+      manifestFilename: "manifest.json",
      useCredentialsForManifestTag: false,
      // useFilenameHashes: true,
      // extendGenerateSWOptions (cfg) {}
@ -175,7 +190,7 @@ module.exports = configure(function (/* ctx */) {

      inspectPort: 5858,

-      bundler: 'packager', // 'packager' or 'builder'
+      bundler: "packager", // 'packager' or 'builder'

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
@ -191,13 +206,13 @@ module.exports = configure(function (/* ctx */) {
      builder: {
        // https://www.electron.build/configuration/configuration

-        appId: 'floranet',
+        appId: "floranet",
      },
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
    bex: {
-      contentScripts: ['my-content-script'],
+      contentScripts: ["my-content-script"],

      // extendBexScriptsConf (esbuildConf) {}
      // extendBexManifestJson (json) {}
--- a/src-ssr/middlewares/render.js
+++ b/src-ssr/middlewares/render.js
@ -1,5 +1,4 @@
-import { RenderError } from '@quasar/app-vite';
-import { ssrMiddleware } from 'quasar/wrappers';
+import { ssrMiddleware } from "quasar/wrappers";

 // This middleware should execute as last one
 // since it captures everything and tries to
@ -8,15 +7,15 @@ import { ssrMiddleware } from 'quasar/wrappers';
 export default ssrMiddleware(({ app, resolve, render, serve }) => {
  // we capture any other Express route and hand it
  // over to Vue and Vue Router to render our page
-  app.get(resolve.urlPath('*'), (req, res) => {
-    res.setHeader('Content-Type', 'text/html');
+  app.get(resolve.urlPath("*"), (req, res) => {
+    res.setHeader("Content-Type", "text/html");

    render(/* the ssrContext: */ { req, res })
      .then((html) => {
        // now let's send the rendered html to the client
        res.send(html);
      })
-      .catch((err: RenderError) => {
+      .catch((err) => {
        // oops, we had an error while rendering the page

        // we were told to redirect to another URL
@ -31,7 +30,7 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {

          // Should reach here only if no "catch-all" route
          // is defined in /src/routes
-          res.status(404).send('404 | Page Not Found');
+          res.status(404).send("404 | Page Not Found");
        } else if (process.env.DEV) {
          // well, we treat any other code as error;
          // if we're in dev mode, then we can use Quasar CLI
@ -48,7 +47,7 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {

          // Render Error Page on production or
          // create a route (/src/routes) for an error page and redirect to it
-          res.status(500).send('500 | Internal Server Error');
+          res.status(500).send("500 | Internal Server Error");

          if (process.env.DEBUGGING) {
            console.error(err.stack);
--- a/src-ssr/server.js
+++ b/src-ssr/server.js
@ -9,15 +9,15 @@
 * Make sure to yarn add / npm install (in your project root)
 * anything you import here (except for express and compression).
 */
-import express from 'express';
-import compression from 'compression';
+import compression from "compression";
+import express from "express";
 import {
  ssrClose,
  ssrCreate,
  ssrListen,
  ssrRenderPreloadTag,
  ssrServeStaticContent,
-} from 'quasar/wrappers';
+} from "quasar/wrappers";

 /**
 * Create your webserver and return its instance.
@ -31,7 +31,7 @@ export const create = ssrCreate((/* { ... } */) => {

  // attackers can use this header to detect apps running Express
  // and then launch specifically-targeted attacks
-  app.disable('x-powered-by');
+  app.disable("x-powered-by");

  // place here any middlewares that
  // absolutely need to run before anything else
@ -57,7 +57,7 @@ export const listen = ssrListen(async ({ app, port, isReady }) => {
  await isReady();
  return app.listen(port, () => {
    if (process.env.PROD) {
-      console.log('Server listening at port ' + port);
+      console.log("Server listening at port " + port);
    }
  });
 });
@ -130,5 +130,5 @@ export const renderPreloadTag = ssrRenderPreloadTag((file) => {
    return `<link rel="preload" href="${file}" as="image" type="image/png">`;
  }

-  return '';
+  return "";
 });
--- a/src/App.vue
+++ b/src/App.vue
@ -2,7 +2,7 @@
  <router-view />
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 export default defineComponent({
--- a/src/assets/empty-img.png
+++ b/src/assets/empty-img.png
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@ -1,12 +1,5 @@
-import { boot } from 'quasar/wrappers';
-import axios, { AxiosInstance } from 'axios';
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $axios: AxiosInstance;
-    $api: AxiosInstance;
-  }
-}
+import axios from "axios";
+import { boot } from "quasar/wrappers";

 // Be careful when using SSR for cross-request state pollution
 // due to creating a Singleton instance here;
@ -14,7 +7,7 @@ declare module '@vue/runtime-core' {
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: 'https://api.example.com' });
+const api = axios.create({ baseURL: "http://localhost:5000/" });

 export default boot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api
--- a/src/boot/brand-colors.ts
+++ b/src/boot/brand-colors.ts
@ -1,6 +0,0 @@
-import { setCssVar } from 'quasar';
-import { boot } from 'quasar/wrappers';
-
-export default boot(() => {
-  setCssVar('primary-light', '#cdebd2');
-});
--- a/src/boot/i18n.js
+++ b/src/boot/i18n.js
@ -0,0 +1,14 @@
+import { boot } from "quasar/wrappers";
+import { createI18n } from "vue-i18n";
+import messages from "src/i18n";
+
+export default boot(({ app }) => {
+  const i18n = createI18n({
+    locale: "en-US",
+    globalInjection: true,
+    messages,
+  });
+
+  // Set i18n instance on app
+  app.use(i18n);
+});
--- a/src/components/@inputs/Calendar.vue
+++ b/src/components/@inputs/Calendar.vue
@ -46,7 +46,7 @@
  </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { toTypedSchema } from '@vee-validate/zod';
 import { storeToRefs } from 'pinia';
 import { useFormStore } from 'src/stores/forms';
@ -77,7 +77,7 @@ export default defineComponent({
    });
    const [calendar, calendarAttrs] = defineField('date');
    const onBlur = () => {
-      availability.value.date = calendar.value as string;
+      availability.value.date = calendar.value;
    };

    return {
@ -90,7 +90,7 @@ export default defineComponent({
      updateProxy() {
        proxyDate.value = availability.value.date;
      },
-      optionsValidDates(date: string) {
+      optionsValidDates(date) {
        return date >= fullCurrentDate /* && date <= '2019/02/15' */;
      },
      save() {
--- a/src/components/@inputs/PostalCode.vue
+++ b/src/components/@inputs/PostalCode.vue
@ -22,7 +22,7 @@
  </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { toTypedSchema } from '@vee-validate/zod';
 import { storeToRefs } from 'pinia';
 import { useFormStore } from 'src/stores/forms';
@ -48,7 +48,7 @@ export default defineComponent({
    });
    const [postalCode, postalCodeAttrs] = defineField('postalCode');
    const onBlur = () => {
-      availability.value.postalCode = postalCode.value as string;
+      availability.value.postalCode = postalCode.value ;
    };

    return {
--- a/src/components/@inputs/PriceRange.vue
+++ b/src/components/@inputs/PriceRange.vue
@ -24,7 +24,7 @@
  </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { useRangePriceStore } from 'src/stores/rangePrice';
 import { defineComponent } from 'vue';

--- a/src/components/@inputs/SortSelect.vue
+++ b/src/components/@inputs/SortSelect.vue
@ -34,9 +34,9 @@
  </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { storeToRefs } from 'pinia';
-import { Order, useFormStore } from 'src/stores/forms';
+import { useFormStore } from 'src/stores/forms';
 import { defineComponent } from 'vue';

 export default defineComponent({
@ -46,7 +46,7 @@ export default defineComponent({
    const formStore = useFormStore();
    const { sortProductFilters } = storeToRefs(formStore);

-    function handleOrder(order: Order) {
+    function handleOrder(order) {
      sortProductFilters.value.order = order;
      sortProductFilters.value.isOpenOrderFilter = false;
    }
--- a/src/components/footer/FooterComponent.vue
+++ b/src/components/footer/FooterComponent.vue
@ -67,7 +67,7 @@
  </q-footer>
 </template>

-<script>
+<script lang="js">
 import { defineComponent } from 'vue';

 import IconArrowCircleRight from '../icons/IconArrowCircleRight.vue';
@ -113,7 +113,7 @@ a:hover {
        position: relative;
        flex: 0 0 min(100%, 560px);
        &::after {
-          content: '';
+          content: "";
          position: absolute;
          width: 1px;
          background-color: $white;
--- a/src/components/header/HeaderPrimary.vue
+++ b/src/components/header/HeaderPrimary.vue
@ -23,7 +23,7 @@
  </q-header>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 import { storeToRefs } from 'pinia';
--- a/src/components/header/HeaderSecondary.vue
+++ b/src/components/header/HeaderSecondary.vue
@ -21,7 +21,7 @@
  </q-header>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 import { useMobileStore } from 'src/stores/mobileNav';
--- a/src/components/header/NavLinks.vue
+++ b/src/components/header/NavLinks.vue
@ -24,7 +24,7 @@
  </nav>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 export default defineComponent({
--- a/src/components/header/UserArea.vue
+++ b/src/components/header/UserArea.vue
@ -9,6 +9,9 @@
    <RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink>
    <RouterLink class="user-area-link cart" to="/checkout">
      <icon-cart />
+      <span class="cart-count" :class="cartLength > 0 && 'active'">
+        {{ cartLength }}
+      </span>
    </RouterLink>

    <q-btn
@ -24,17 +27,20 @@
  </div>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useMobileStore } from '../../stores/mobileNav';
-import IconCart from '../icons/IconCart.vue';
-import IconHamburger from '../icons/IconHamburger.vue';
-import IconUser from '../icons/IconUser.vue';
-import DropdownGroup from '../quasar-components/dropdown/DropdownGroup.vue';
-import DropdownItem from '../quasar-components/dropdown/DropdownItem.vue';
+<script>
+import { defineComponent } from "vue";
+
+import IconCart from "components/icons/IconCart.vue";
+import IconHamburger from "components/icons/IconHamburger.vue";
+import IconUser from "components/icons/IconUser.vue";
+import DropdownGroup from "components/quasar-components/dropdown/DropdownGroup.vue";
+import DropdownItem from "components/quasar-components/dropdown/DropdownItem.vue";
+import { storeToRefs } from "pinia";
+import { useCartStore } from "src/stores/cart";
+import { useMobileStore } from "stores/mobileNav";

 export default defineComponent({
-  name: 'user-area',
+  name: "user-area",
  components: {
    IconCart,
    IconUser,
@ -45,7 +51,9 @@ export default defineComponent({
  setup() {
    const mobileStore = useMobileStore();
    const { handleOpenMobileNav } = mobileStore;
-    return { handleOpenMobileNav };
+    const cartStore = useCartStore();
+    const { cartLength } = storeToRefs(cartStore);
+    return { handleOpenMobileNav, cartLength };
  },
 });
 </script>
@ -60,8 +68,34 @@ export default defineComponent({
    color: $white;
    &.user,
    &.cart {
-      width: 16px;
-      height: 16px;
+      display: inline-flex;
+      position: relative;
+      width: 20px;
+      height: 14px;
+      & .cart-count {
+        position: absolute;
+        top: -7px;
+        right: -6px;
+        width: 14px;
+        height: 14px;
+        display: grid;
+        place-items: center;
+        background-color: $primary-light;
+        color: $primary;
+        font-size: $font-10;
+        font-family: $font-questrial;
+        border-radius: 50%;
+        padding: 2px;
+        transition: 200ms ease-in;
+        transform: scale(0);
+        opacity: 0;
+        visibility: hidden;
+        &.active {
+          transform: scale(1);
+          opacity: 1;
+          visibility: visible;
+        }
+      }
    }
  }

--- a/src/components/icons/credit-flags/IconAny.vue
+++ b/src/components/icons/credit-flags/IconAny.vue
@ -1,7 +1,20 @@
-<template><svg width="29" height="19" viewBox="0 0 29 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<template>
+  <svg
+    width="29"
+    height="19"
+    viewBox="0 0 29 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
    <rect width="29" height="19" rx="3" fill="#01326F" />
    <path d="M17.1001 14.1905H11.748V4.81104H17.1001V14.1905Z" fill="#6C6BBD" />
-<path d="M12.0917 9.49997C12.0917 7.59731 13.0052 5.90247 14.4279 4.81025C13.3875 4.01156 12.0746 3.53485 10.6477 3.53485C7.26957 3.53485 4.53125 6.20549 4.53125 9.49997C4.53125 12.7945 7.26957 15.4651 10.6477 15.4651C12.0746 15.4651 13.3875 14.9884 14.4279 14.1897C13.0052 13.0975 12.0917 11.4026 12.0917 9.49997Z" fill="#0099DF"/>
-<path d="M24.3189 9.49997C24.3189 12.7945 21.5806 15.4651 18.2025 15.4651C16.7756 15.4651 15.4626 14.9884 14.4219 14.1897C15.8449 13.0975 16.7585 11.4026 16.7585 9.49997C16.7585 7.59731 15.8449 5.90247 14.4219 4.81025C15.4626 4.01156 16.7756 3.53485 18.2025 3.53485C21.5806 3.53485 24.3189 6.20549 24.3189 9.49997Z" fill="#EB001B"/>
+    <path
+      d="M12.0917 9.49997C12.0917 7.59731 13.0052 5.90247 14.4279 4.81025C13.3875 4.01156 12.0746 3.53485 10.6477 3.53485C7.26957 3.53485 4.53125 6.20549 4.53125 9.49997C4.53125 12.7945 7.26957 15.4651 10.6477 15.4651C12.0746 15.4651 13.3875 14.9884 14.4279 14.1897C13.0052 13.0975 12.0917 11.4026 12.0917 9.49997Z"
+      fill="#0099DF"
+    />
+    <path
+      d="M24.3189 9.49997C24.3189 12.7945 21.5806 15.4651 18.2025 15.4651C16.7756 15.4651 15.4626 14.9884 14.4219 14.1897C15.8449 13.0975 16.7585 11.4026 16.7585 9.49997C16.7585 7.59731 15.8449 5.90247 14.4219 4.81025C15.4626 4.01156 16.7756 3.53485 18.2025 3.53485C21.5806 3.53485 24.3189 6.20549 24.3189 9.49997Z"
+      fill="#EB001B"
+    />
  </svg>
 </template>
--- a/src/components/icons/credit-flags/IconExprex.vue
+++ b/src/components/icons/credit-flags/IconExprex.vue
@ -1,54 +0,0 @@
-<template>
-  <svg
-    width="29"
-    height="19"
-    viewBox="0 0 29 19"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0_79_1742)">
-      <rect width="29" height="19" rx="3" fill="#1D71B9" />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M17.4941 15.4503V9.1377L29.0158 9.14802V10.8917L27.684 12.2791L29.0158 13.6799V15.4603H26.8897L25.7598 14.2445L24.6377 15.4652L17.4941 15.4503Z"
-        fill="white"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M18.2637 14.7579V9.83228H22.5468V10.967H19.6508V11.7373H22.4778V12.8533H19.6508V13.6098H22.5468V14.7579H18.2637Z"
-        fill="#1D71B9"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M22.5254 14.7578L24.895 12.2923L22.5254 9.83252H24.3594L25.8076 11.3935L27.2598 9.83252H29.0154V9.87113L26.696 12.2923L29.0154 14.6882V14.7578H27.2422L25.7684 13.1811L24.3096 14.7578H22.5254Z"
-        fill="#1D71B9"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M18.0319 3.53491H20.8092L21.7846 5.69494V3.53491H25.2135L25.8047 5.15321L26.3979 3.53491H29.016V9.84716H15.1797L18.0319 3.53491Z"
-        fill="white"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M18.5578 4.2207L16.3164 9.14212H17.8536L18.2763 8.15654H20.5674L20.9901 9.14212H22.5653L20.3334 4.2207H18.5578ZM18.7503 7.05206L19.4222 5.48537L20.0938 7.05206H18.7503Z"
-        fill="#1D71B9"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M22.5449 9.14139V4.21997L24.7055 4.22723L25.8174 7.2528L26.9367 4.21997H29.0161V9.14139L27.6781 9.15286V5.77213L26.4149 9.14139H25.1932L23.9038 5.76066V9.14139H22.5449Z"
-        fill="#1D71B9"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_79_1742">
-        <rect width="29" height="19" rx="3" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
--- a/src/components/icons/svg/example.svg
+++ b/src/components/icons/svg/example.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22" fill="none">
+  <ellipse cx="11.5" cy="11" rx="11.5" ry="11" transform="rotate(-180 11.5 11)" fill="#117564" />
+  <path d="M13.6904 16.2383L9.61959 12.1516C8.84245 11.3714 8.84217 10.1098 9.61895 9.32931L13.6904 5.23828"
+    fill="#117564" />
+  <path d="M13.6904 16.2383L9.61959 12.1516C8.84245 11.3714 8.84217 10.1098 9.61895 9.32931L13.6904 5.23828"
+    stroke="#CDEBD2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
--- a/src/components/quasar-components/carousel/HorizontalCarousel.vue
+++ b/src/components/quasar-components/carousel/HorizontalCarousel.vue
@ -1,87 +0,0 @@
-<template>
-  <Swiper
-    :space-between="screenWidth > 1024 ? 56 : 25"
-    :slides-per-view="'auto'"
-    :centered-slides="true"
-    :modules="modules"
-    :grabCursor="true"
-    :loop="true"
-    :pagination="{
-      dynamicBullets: true,
-      clickable: true,
-    }"
-    :keyboard="{
-      enabled: true,
-    }"
-    @swiper="onSwiper"
-  >
-    <slot></slot>
-  </Swiper>
-</template>
-
-<script lang="ts">
-import { storeToRefs } from 'pinia';
-import { Autoplay, Keyboard, Navigation, Pagination } from 'swiper/modules';
-import type { Swiper as SwiperTypes } from 'swiper/types';
-import { Swiper } from 'swiper/vue';
-import { defineComponent } from 'vue';
-
-import { useMobileStore } from 'src/stores/mobileNav';
-import { useSwiperStore } from 'src/stores/swiper';
-
-export default defineComponent({
-  components: {
-    Swiper,
-  },
-  setup() {
-    const swiperStore = useSwiperStore();
-    const { swiperCtx } = storeToRefs(swiperStore);
-    function onSwiper(swiper: SwiperTypes) {
-      swiperCtx.value = swiper;
-    }
-
-    const mobileStore = useMobileStore();
-    const { screenWidth } = storeToRefs(mobileStore);
-
-    return {
-      onSwiper,
-      screenWidth,
-      modules: [Navigation, Pagination, Keyboard, Autoplay],
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-.swiper {
-  height: 100%;
-  width: 100%;
-  & .swiper-wrapper .swiper-slide {
-    width: 360px !important;
-  }
-
-  & .swiper-button-prev,
-  & .swiper-button-next {
-    background-repeat: no-repeat;
-    background-position: center;
-    &::after,
-    &::before {
-      display: none;
-    }
-  }
-
-  & .swiper-button-prev {
-    background-image: url('../../icons/svg/ArrowCircleFilledLeft.svg');
-  }
-
-  & .swiper-button-next {
-    background-image: url('../../icons/svg/ArrowCircleFilledRight.svg');
-  }
-
-  & .swiper-pagination {
-    & .swiper-pagination-bullet.swiper-pagination-bullet-active {
-      background-color: $primary;
-    }
-  }
-}
-</style>
--- a/src/components/quasar-components/carousel/ProductCarousel.vue
+++ b/src/components/quasar-components/carousel/ProductCarousel.vue
@ -24,7 +24,7 @@
  </q-carousel>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent, ref } from 'vue';

 export default defineComponent({
--- a/src/components/quasar-components/carousel/VerticalCarouselImgs.vue
+++ b/src/components/quasar-components/carousel/VerticalCarouselImgs.vue
@ -54,9 +54,9 @@
  </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { useIntersectionObserver } from '@vueuse/core';
-import { PropType, defineComponent, ref } from 'vue';
+import { defineComponent, ref } from 'vue';

 import { storeToRefs } from 'pinia';
 import Calendar from 'src/components/@inputs/Calendar.vue';
@ -68,7 +68,7 @@ export default defineComponent({
  name: 'vertical-carousel-imgs',
  props: {
    imgsArr: {
-      type: Array as PropType<string[]>,
+      type: Array,
      default: () => [''],
    },
  },
@ -144,7 +144,7 @@ export default defineComponent({
        flex: 1;
        position: relative;
        &:first-child::after {
-          content: '';
+          content: "";
          position: absolute;
          width: 1px;
          opacity: 0.2;
--- a/src/components/quasar-components/dropdown/DropdownGroup.vue
+++ b/src/components/quasar-components/dropdown/DropdownGroup.vue
@ -6,7 +6,7 @@
  </q-btn-dropdown>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 export default defineComponent({
@ -25,7 +25,7 @@ export default defineComponent({
 .q-btn {
  text-transform: initial;
  &::before {
-    content: '';
+    content: "";
    all: unset;
  }
 }
--- a/src/components/quasar-components/dropdown/DropdownItem.vue
+++ b/src/components/quasar-components/dropdown/DropdownItem.vue
@ -8,7 +8,7 @@
  </q-item>
 </template>

-<script lang="ts">
+<script lang="js">
 import { storeToRefs } from 'pinia';
 import { useLanguageStore } from 'src/stores/language';
 import { defineComponent } from 'vue';
@ -26,7 +26,7 @@ export default defineComponent({
    const { lang } = storeToRefs(langStore);

    return {
-      onItemClick(currentLang: string) {
+      onItemClick(currentLang) {
        lang.value = currentLang;
      },
    };
--- a/src/components/sections/DudasSection.vue
+++ b/src/components/sections/DudasSection.vue
@ -21,7 +21,7 @@
  </section>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';
 import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';
 import Container from '../ui/Container.vue';
--- a/src/components/sections/InfoSection.vue
+++ b/src/components/sections/InfoSection.vue
@ -40,7 +40,7 @@
  </section>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';
 import IconCarr from '../icons/IconCar.vue';
 import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';
--- a/src/components/sections/QuestionSection.vue
+++ b/src/components/sections/QuestionSection.vue
@ -32,7 +32,7 @@
  </section>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent, ref } from 'vue';

 import IconQuestion from '../icons/IconQuestion.vue';
--- a/src/components/sections/ReasonsSection.vue
+++ b/src/components/sections/ReasonsSection.vue
@ -84,7 +84,7 @@
  </section>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';
 import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';
 import IconCheck from '../icons/IconCheck.vue';
--- a/src/components/swiper/Swiper.vue
+++ b/src/components/swiper/Swiper.vue
@ -1,4 +1,49 @@
-<script>
+<template>
+  <q-btn
+    title="previous button"
+    class="swiper-btn prev"
+    color="primary"
+    size="sm"
+    @click="handlePrev"
+    round
+    flat
+  >
+    <IconArrowCircleFilledLeft />
+  </q-btn>
+
+  <swiper-container
+    class="swiper"
+    :space-between="screenWidth > 1024 ? 56 : 25"
+    :slides-per-view="'auto'"
+    :centered-slides="true"
+    :grabCursor="true"
+    :navigation="true"
+    :loop="true"
+    :pagination="{
+      dynamicBullets: true,
+      clickable: true,
+    }"
+    :keyboard="{
+      enabled: true,
+    }"
+  >
+    <slot></slot>
+  </swiper-container>
+
+  <q-btn
+    title="next button"
+    class="swiper-btn next"
+    color="primary"
+    size="sm"
+    @click="handleNext"
+    round
+    flat
+  >
+    <IconArrowCircleFilledRight />
+  </q-btn>
+</template>
+
+<script lang="js">
 import { storeToRefs } from 'pinia';
 import { defineComponent, onMounted, ref } from 'vue';

@ -21,7 +66,8 @@ export default defineComponent({

    onMounted(() => {
      // console.log('Montado!');
-      /*swiperContainer.value =
+
+      swiperContainer.value =
        document.querySelector('swiper-container').shadowRoot;
      prevSwiperBtn.value = swiperContainer.value.querySelector(
        '.swiper-button-prev'
@ -33,9 +79,21 @@ export default defineComponent({
      nextSwiperBtn.value.style.display = swiperDisplay;
      prevSwiperBtn.value.style.display = swiperDisplay;
      nextBtn.value = document.querySelector('.swiper-btn.next');
-      prevBtn.value = document.querySelector('.swiper-btn.prev');*/
+      prevBtn.value = document.querySelector('.swiper-btn.prev');
    });

+    /* onUpdated(() => {
+      console.log('Atualizado!');
+
+      console.groupCollapsed('%c Custom', 'color: tomato;');
+      console.log({ prevBtn: prevBtn.value, nextBtn: nextBtn.value });
+      console.groupEnd();
+
+      console.groupCollapsed('%c Swiper', 'color: hotpink;');
+      console.log(prevSwiperBtn.value);
+      console.groupEnd();
+    }); */
+
    return {
      screenWidth,
      handlePrev() {
@ -50,55 +108,13 @@ export default defineComponent({
  },
 });
 </script>
-<template>
-  <q-btn
-    title="previous button"
-    class="swiper-btn prev"
-    color="primary"
-    size="sm"
-    @click="handlePrev"
-    round
-    flat
-  >
-    <IconArrowCircleFilledLeft />
-  </q-btn>

-  <!--<swiper-container
-    class="swiper"
-    :space-between="screenWidth > 1024 ? 56 : 25"
-    :slides-per-view="'auto'"
-    :centered-slides="true"
-    :grabCursor="true"
-    :navigation="true"
-    :loop="true"
-    :pagination="{
-      dynamicBullets: true,
-      clickable: true,
-    }"
-    :keyboard="{
-      enabled: true,
-    }"
-  >
-    <slot></slot>
-  </swiper-container>-->
-  <q-btn
-    title="next button"
-    class="swiper-btn next"
-    color="primary"
-    size="sm"
-    @click="handleNext"
-    round
-    flat
-  >
-    <IconArrowCircleFilledRight />
-  </q-btn>
-</template>
 <style lang="scss">
 .swiper {
  height: 100%;
  width: 100%;
  &::after {
-    content: '';
+    content: "";
    position: absolute;
    right: 0;
    top: 0;
@ -128,11 +144,11 @@ export default defineComponent({
  }

  & .swiper-button-prev {
-    background-image: url('../../icons/svg/ArrowCircleFilledLeft.svg');
+    background-image: url("../../icons/svg/ArrowCircleFilledLeft.svg");
  }

  & .swiper-button-next {
-    background-image: url('../../icons/svg/ArrowCircleFilledRight.svg');
+    background-image: url("../../icons/svg/ArrowCircleFilledRight.svg");
  }

  & .swiper-pagination {
--- a/src/components/ui/Button.vue
+++ b/src/components/ui/Button.vue
@ -4,7 +4,7 @@
  </button>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 export default defineComponent({
--- a/src/components/ui/Card.vue
+++ b/src/components/ui/Card.vue
@ -36,11 +36,10 @@
  </div>
 </template>

-<script lang="ts">
-import { PropType, defineComponent, ref } from 'vue';
+<script lang="js">
+import { defineComponent, ref } from 'vue';
 import IconEyes from '../icons/IconEyes.vue';

-type Size = 'sm-card' | 'md-card' | 'lg-card';

 export default defineComponent({
  name: 'card-component',
@ -70,7 +69,7 @@ export default defineComponent({
      default: false,
    },
    size: {
-      type: String as PropType<Size>,
+      type: String,
      default: '',
    },
    alt: {
--- a/src/components/ui/Chat.vue
+++ b/src/components/ui/Chat.vue
@ -2,7 +2,7 @@
  <q-btn flat @click="handleClick"><IconChat /></q-btn>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';
 import IconChat from '../icons/IconChat.vue';

--- a/src/components/ui/Container.vue
+++ b/src/components/ui/Container.vue
@ -9,10 +9,10 @@
 </template>

 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";

 export default defineComponent({
-  name: 'container-element',
+  name: "container-element",
  props: {
    cardContainer: {
      type: Boolean,
@ -24,7 +24,7 @@ export default defineComponent({
    },
    tag: {
      type: String,
-      default: 'div',
+      default: "div",
    },
  },
 });
--- a/src/components/ui/MobileNav.vue
+++ b/src/components/ui/MobileNav.vue
@ -31,7 +31,7 @@
  </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { useMobileStore } from 'src/stores/mobileNav';

 import { storeToRefs } from 'pinia';
@ -45,7 +45,7 @@ export default defineComponent({
    const mobileStore = useMobileStore();
    const { isOpenNav } = storeToRefs(mobileStore);

-    function setBodyStyle(overflow: 'hidden' | 'visible') {
+    function setBodyStyle(overflow) {
      document.body.style.overflow = overflow;
    }

--- a/src/components/ui/Modal.vue
+++ b/src/components/ui/Modal.vue
@ -55,8 +55,8 @@
  </q-dialog>
 </template>

-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
+<script lang="js">
+import { defineComponent } from 'vue';

 import { useModalStore } from 'src/stores/modalStore';
 import Calendar from '../@inputs/Calendar.vue';
@ -65,7 +65,6 @@ import PriceRange from '../@inputs/PriceRange.vue';
 import IconCloseModal from '../icons/IconCloseModal.vue';
 import IconSearch from '../icons/IconSearch.vue';

-type ModalModel = 'isOpenAvailability' | 'isOpenFilters';

 export default defineComponent({
  name: 'modal-component',
@ -78,7 +77,7 @@ export default defineComponent({
  },
  props: {
    modalItem: {
-      type: String as PropType<ModalModel>,
+      type: String,
      default: '',
    },
  },
@ -196,7 +195,7 @@ export default defineComponent({
          position: relative;
          gap: 60px;
          &::after {
-            content: '';
+            content: "";
            position: absolute;
            width: 1px;
            height: 100%;
--- a/src/components/ui/QuestionForm.vue
+++ b/src/components/ui/QuestionForm.vue
@ -9,7 +9,7 @@
        bg-color="white"
        label="Nombre"
        class="name"
-        standout
+        outlined
      />
      <q-input
        v-model="secondName"
@ -19,7 +19,7 @@
        bg-color="white"
        label="Apellidos"
        class="nickname"
-        standout
+        outlined
      />
      <q-input
        v-model="email"
@ -30,7 +30,7 @@
        type="email"
        label="Email"
        class="email"
-        standout
+        outlined
      />
      <q-input
        v-model="phone"
@ -42,7 +42,7 @@
        label="Teléfono"
        class="telephone"
        mask="(##) ##### ####"
-        standout
+        outlined
      />
      <q-input
        v-model="query"
@ -52,7 +52,7 @@
        bg-color="white"
        label="Motivo de consulta"
        class="consult"
-        standout
+        outlined
      />
      <q-input
        v-model="message"
@ -64,7 +64,7 @@
        class="message"
        type="textarea"
        autogrow
-        standout
+        outlined
      />
      <q-checkbox
        v-model="terms"
@ -90,17 +90,17 @@
  </form>
 </template>

-<script lang="ts">
-import { useQuasar } from 'quasar';
-import { useFormStore } from 'src/stores/forms';
-import { useForm } from 'vee-validate';
-import { defineComponent } from 'vue';
+<script>
+import { useQuasar } from "quasar";
+import { useFormStore } from "src/stores/forms";
+import { useForm } from "vee-validate";
+import { defineComponent } from "vue";

-import IconArrowRightOne from 'src/components/icons/IconArrowRightOne.vue';
-import { questionSchema } from 'src/utils/zod/schemas/questionSchema';
+import IconArrowRightOne from "src/components/icons/IconArrowRightOne.vue";
+import { questionSchema } from "src/utils/zod/schemas/questionSchema";

 export default defineComponent({
-  name: 'QuestionForm',
+  name: "QuestionForm",
  components: { IconArrowRightOne },
  setup() {
    const $q = useQuasar();
@ -113,13 +113,13 @@ export default defineComponent({
        terms: false,
      },
    });
-    const [firstName, firstNameAttrs] = defineField('name');
-    const [secondName, secondNameAttrs] = defineField('surname');
-    const [email, emailAttrs] = defineField('email');
-    const [phone, phoneAttrs] = defineField('phone');
-    const [query, queryAttrs] = defineField('query');
-    const [message, messageAttrs] = defineField('message');
-    const [terms, termsAttrs] = defineField('terms');
+    const [firstName, firstNameAttrs] = defineField("name");
+    const [secondName, secondNameAttrs] = defineField("surname");
+    const [email, emailAttrs] = defineField("email");
+    const [phone, phoneAttrs] = defineField("phone");
+    const [query, queryAttrs] = defineField("query");
+    const [message, messageAttrs] = defineField("message");
+    const [terms, termsAttrs] = defineField("terms");

    const onSubmit = handleSubmit((values) => {
      console.log(values);
@ -127,16 +127,11 @@ export default defineComponent({
      handleReset();
      if (!terms.value) {
        $q.notify({
-          color: 'negative',
-          message: 'Primero tienes que aceptar la licencia y las condiciones',
+          color: "negative",
+          message: "Primero tienes que aceptar la licencia y las condiciones",
        });
        return;
      }
-      $q.notify({
-        icon: 'done',
-        color: 'positive',
-        message: 'Enviado',
-      });
    });

    return {
@ -189,7 +184,7 @@ export default defineComponent({
      margin-bottom: 30px;
      color: #fff;

-      & div[role='alert'] {
+      & div[role="alert"] {
        color: #fff !important;
      }
    }
--- a/src/components/ui/SendBanner.vue
+++ b/src/components/ui/SendBanner.vue
@ -8,7 +8,7 @@
  </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 export default defineComponent({
@ -42,7 +42,7 @@ export default defineComponent({
  position: relative;

  &::after {
-    content: '';
+    content: "";
    position: absolute;
    inset: 0;
    background-color: $primary-dark;
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -1,11 +1,11 @@
 // app global css in SCSS form
-@import './pages/home.scss';
-@import './pages/categoria.scss';
-@import './pages/product.scss';
-@import './pages/checkout.scss';
-@import './pages/contacta.scss';
-@import './pages/faq.scss';
-@import './components/calendar-postalcode.scss';
+@import "./pages/home.scss";
+@import "./pages/categoria.scss";
+@import "./pages/product.scss";
+@import "./pages/checkout.scss";
+@import "./pages/contacta.scss";
+@import "./pages/faq.scss";
+@import "./components/calendar-postalcode.scss";

 :root {
  --swiper-theme-color: #117564;
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@ -96,11 +96,11 @@ $text-normal-10: #24242410;

 $grey-700: #f9f9f9;
 //! Font family
-$font-lora: 'Lora', serif;
-$font-roboto: 'Roboto', sans-serif;
-$font-mulish: 'Mulish', sans-serif;
-$font-questrial: 'Questrial', sans-serif;
-$font-montserrat: 'Montserrat', sans-serif;
+$font-lora: "Lora", serif;
+$font-roboto: "Roboto", sans-serif;
+$font-mulish: "Mulish", sans-serif;
+$font-questrial: "Questrial", sans-serif;
+$font-montserrat: "Montserrat", sans-serif;

 //! Price font
 $text-price-font: $font-questrial;
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -1,9 +0,0 @@
-/* eslint-disable */
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    NODE_ENV: string;
-    VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
-    VUE_ROUTER_BASE: string | undefined;
-  }
-}
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@ -0,0 +1,7 @@
+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+  failed: "Action failed",
+  success: "Action was successful",
+};
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@ -0,0 +1,5 @@
+import enUS from "./en-US";
+
+export default {
+  "en-US": enUS,
+};
--- a/src/layouts/CategoryLayout.vue
+++ b/src/layouts/CategoryLayout.vue
@ -15,20 +15,21 @@
    <footer-component />
  </q-layout>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue';

-import FooterComponent from 'src/components/footer/FooterComponent.vue';
-import HeaderSecondary from 'src/components/header/HeaderSecondary.vue';
-import QuestionSection from 'src/components/sections/QuestionSection.vue';
-import ReasonsSection from 'src/components/sections/ReasonsSection.vue';
-import MobileNav from 'src/components/ui/MobileNav.vue';
+<script lang="js">
+import { defineComponent } from "vue";

-import { storeToRefs } from 'pinia';
-import { useMobileStore } from 'src/stores/mobileNav';
+import FooterComponent from "src/components/footer/FooterComponent.vue";
+import HeaderSecondary from "src/components/header/HeaderSecondary.vue";
+import QuestionSection from "src/components/sections/QuestionSection.vue";
+import ReasonsSection from "src/components/sections/ReasonsSection.vue";
+import MobileNav from "src/components/ui/MobileNav.vue";
+
+import { storeToRefs } from "pinia";
+import { useMobileStore } from "src/stores/mobileNav";

 export default defineComponent({
-  name: 'CategoryLayout',
+  name: "CategoryLayout",
  components: {
    HeaderSecondary,
    FooterComponent,
--- a/src/layouts/CheckoutLayout.vue
+++ b/src/layouts/CheckoutLayout.vue
@ -17,7 +17,7 @@
  </q-layout>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 import { storeToRefs } from 'pinia';
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@ -15,7 +15,7 @@
  </q-layout>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 import { storeToRefs } from 'pinia';
--- a/src/layouts/HomeLayout.vue
+++ b/src/layouts/HomeLayout.vue
@ -17,7 +17,7 @@
  </q-layout>
 </template>

-<script lang="ts">
+<script lang="js">
 import { storeToRefs } from 'pinia';
 import { defineComponent } from 'vue';

--- a/src/mock/cards.js
+++ b/src/mock/cards.js
@ -1,4 +1,4 @@
-import { fakerES } from '@faker-js/faker';
+import { fakerES } from "@faker-js/faker";

 export const cardMock = Array.from({ length: 8 }, (_, i) => ({
  id: i + 1,
@ -13,21 +13,18 @@ export const cardMock = Array.from({ length: 8 }, (_, i) => ({
  // value: '25,90',
 }));

-interface GenerateFlowersParams {
-  length: number;
-}
-export function generateFlowers({ length }: GenerateFlowersParams) {
+export function generateFlowers({ length }) {
  const flowersMock = Array.from({ length }, (_, i) => ({
    id: i + 1,
    title: fakerES.commerce.productName(),
    description: fakerES.commerce.productDescription(),
    price: fakerES.commerce.price({
-      symbol: '€',
+      symbol: "€",
      min: 20,
      max: 200,
      dec: 0,
    }),
-    sku: fakerES.commerce.isbn({ separator: '', variant: 13 }),
+    sku: fakerES.commerce.isbn({ separator: "", variant: 13 }),
    category: fakerES.commerce.productMaterial(),
    images: Array.from({ length: fakerES.number.int({ min: 2, max: 6 }) }, () =>
      fakerES.image.urlPicsumPhotos()
--- a/src/pages/CategoryPage.vue
+++ b/src/pages/CategoryPage.vue
@ -4,7 +4,9 @@
      <header class="products-section-header">
        <Container>
          <div class="product-header-content">
-            <h3 class="product-header-title subtitle">Ramos para obsequiar</h3>
+            <h3 class="product-header-title subtitle">
+              {{ sortProductFilters.category }} para obsequiar
+            </h3>
            <p class="product-header-paragraph">
              Descripción SEO: Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
@ -22,7 +24,7 @@
                    class="green-text"
                  >
                    25 Julio en
-                    {{ availability.postalCode.replace('-', '') }}</span
+                    {{ availability.postalCode.replace("-", "") }}</span
                  >
                </p>

@ -55,9 +57,9 @@
                <div class="order-filters">
                  <p class="filter-paragraph">
                    Ordenar por:
-                    <span class="green-text">{{
-                      orderText[sortProductFilters.order as Order] || ''
-                    }}</span>
+                    <span class="green-text">
+                      {{ orderText[sortProductFilters.order] || "" }}
+                    </span>
                  </p>

                  <SortSelect v-if="sortProductFilters.isOpenOrderFilter" />
@ -107,77 +109,62 @@
  </q-page>
 </template>

-<script lang="ts">
-import { fakerES } from '@faker-js/faker';
-import { storeToRefs } from 'pinia';
+<script>
+import { fakerES } from "@faker-js/faker";
+import { storeToRefs } from "pinia";
 import {
  defineAsyncComponent,
  defineComponent,
-  onMounted,
  onUpdated,
  reactive,
  ref,
-} from 'vue';
-import { useRoute } from 'vue-router';
+  watch,
+} from "vue";
+import { useRoute } from "vue-router";

-import SortSelect from 'src/components/@inputs/SortSelect.vue';
-import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
-import IconArrowDownWhite from 'src/components/icons/IconArrowDownWhite.vue';
-import IconFilter from 'src/components/icons/IconFilter.vue';
-import IconPencil from 'src/components/icons/IconPencil.vue';
-import Container from 'src/components/ui/Container.vue';
-import { Category, Order, useFormStore } from 'src/stores/forms';
-import { useModalStore } from 'src/stores/modalStore';
-
-type MonthES =
-  | 'Enero'
-  | 'Febrero'
-  | 'Marzo'
-  | 'Abril'
-  | 'Mayo'
-  | 'Junio'
-  | 'Julio'
-  | 'Agosto'
-  | 'Septiembre'
-  | 'Octubre'
-  | 'Noviembre'
-  | 'Diciembre';
+import SortSelect from "src/components/@inputs/SortSelect.vue";
+import IconArrowCircleFilledRight from "src/components/icons/IconArrowCircleFilledRight.vue";
+import IconArrowDownWhite from "src/components/icons/IconArrowDownWhite.vue";
+import IconFilter from "src/components/icons/IconFilter.vue";
+import IconPencil from "src/components/icons/IconPencil.vue";
+import Container from "src/components/ui/Container.vue";
+import { useFormStore } from "src/stores/forms";
+import { useModalStore } from "src/stores/modalStore";

 export default defineComponent({
-  name: 'CategoryPage',
+  name: "CategoryPage",
  components: {
    IconArrowCircleFilledRight,
    IconArrowDownWhite,
    IconPencil,
    IconFilter,
    Container,
-    DudasSection: defineAsyncComponent(
-      () => import('src/components/sections/DudasSection.vue')
+    DudasSection: defineAsyncComponent(() =>
+      import("src/components/sections/DudasSection.vue")
    ),
-    Modal: defineAsyncComponent(() => import('src/components/ui/Modal.vue')),
-    Card: defineAsyncComponent(() => import('src/components/ui/Card.vue')),
+    Modal: defineAsyncComponent(() => import("src/components/ui/Modal.vue")),
+    Card: defineAsyncComponent(() => import("src/components/ui/Card.vue")),
    SortSelect,
  },
  setup() {
    const modalStore = useModalStore();
    const formStore = useFormStore();
    const { availability, sortProductFilters } = storeToRefs(formStore);
-    const monthES: Record<number, MonthES> = reactive({
-      0: 'Enero',
-      1: 'Febrero',
-      2: 'Marzo',
-      3: 'Abril',
-      4: 'Mayo',
-      5: 'Junio',
-      6: 'Julio',
-      7: 'Agosto',
-      8: 'Septiembre',
-      9: 'Octubre',
-      10: 'Noviembre',
-      11: 'Diciembre',
+    const monthES = reactive({
+      0: "Enero",
+      1: "Febrero",
+      2: "Marzo",
+      3: "Abril",
+      4: "Mayo",
+      5: "Junio",
+      6: "Julio",
+      7: "Agosto",
+      8: "Septiembre",
+      9: "Octubre",
+      10: "Noviembre",
+      11: "Diciembre",
    });
    const isOpenOrder = ref(false);
-    const category = ref('');
    const route = useRoute();
    const cardsMock = Array.from({ length: 8 }, (_, i) => ({
      id: i + 1,
@ -187,20 +174,24 @@ export default defineComponent({
      title: fakerES.commerce.product(),
      value: fakerES.commerce.price({ min: 30, max: 100 }),
    }));
-    const orderText: Record<Order, string> = {
-      'lowest-price': 'menor precio',
-      'highest-price': 'mayor precio',
-      recommended: 'recomendados',
-      latest: 'más recientes',
+    const orderText = {
+      "lowest-price": "menor precio",
+      "highest-price": "mayor precio",
+      recommended: "recomendados",
+      latest: "más recientes",
    };

-    onMounted(() => {
-      sortProductFilters.value.category = route.path.split('/')[3] as Category;
-    });
+    watch(
+      () => route.path,
+      (newPatch) => {
+        sortProductFilters.value.category = newPatch.split("/")[2];
+      }
+    );

    onUpdated(() => {
-      console.log('Atualizado!');
+      console.groupCollapsed("%c Updated!", "color: green;");
      console.log(sortProductFilters.value);
+      console.groupEnd();
    });

    function openOrderFilter() {
@ -216,7 +207,6 @@ export default defineComponent({
      modalStore,
      orderText,
      cardsMock,
-      category,
    };
  },
 });
@ -238,6 +228,9 @@ export default defineComponent({
      text-align: center;
      gap: 25px;
      margin-bottom: 93px;
+      & .product-header-title::first-letter {
+        text-transform: capitalize;
+      }
    }

    & .product-header-filters {
--- a/src/pages/CheckoutPage.vue
+++ b/src/pages/CheckoutPage.vue
@ -125,24 +125,6 @@
                      />
                    </div>

-                    <div class="field-control field-select">
-                      <q-select
-                        name="city"
-                        v-model="city"
-                        v-bind:="cityAttrs"
-                        :error="!!errors.city"
-                        :error-message="errors.city"
-                        :options="optionsCity.data"
-                        :label="
-                          formPersonalData.data.city.length
-                            ? formPersonalData.data.city
-                            : 'Ciudad*'
-                        "
-                        stack-label
-                        outlined
-                      />
-                    </div>
-
                    <div class="field-control field-select">
                      <q-select
                        name="province"
@ -150,13 +132,30 @@
                        v-bind:="provinceAttrs"
                        :error="!!errors.province"
                        :error-message="errors.province"
-                        :options="optionsProvince.data"
+                        :options="provinceOptions"
+                        option-value="code"
+                        option-label="name"
                        :label="
-                          formPersonalData.data.province
-                            ? formPersonalData.data.province
+                          !province
+                            ? 'Complete la dirección y el código postal'
                            : 'Provincia*'
                        "
                        stack-label
+                        map-options
+                        emit-value
+                        outlined
+                      />
+                    </div>
+
+                    <div class="field-control field-select">
+                      <q-input
+                        placeholder="Ciudade*"
+                        name="city"
+                        type="text"
+                        v-model="city"
+                        v-bind:="cityAttrs"
+                        :error="!!errors.city"
+                        :error-message="errors.city"
                        outlined
                      />
                    </div>
@ -257,7 +256,10 @@
            </div>

            <aside class="checkout-aside">
-              <div class="checkout-delivery-date" v-if="true">
+              <div
+                class="checkout-delivery-date"
+                :class="(meta.valid || !checkoutBlock) && 'active'"
+              >
                <header class="checkout-aside-header green-text">
                  <strong class="checkout-aside-title">
                    Fecha de entrega
@ -278,11 +280,15 @@

                <div class="checkout-summary-body gray-bg">
                  <ul class="checkout-summary-list">
-                    <li class="checkout-summary-item">
-                      <p>Ramo Lucena <span>30,00€</span></p>
-                    </li>
-                    <li class="checkout-summary-item">
-                      <p>Ramo Lucena <span>30,00€</span></p>
+                    <li
+                      class="checkout-summary-item"
+                      v-for="({ title, price }, index) in cart"
+                      :key="index"
+                    >
+                      <p>
+                        {{ title }}
+                        <span>{{ price }}</span>
+                      </p>
                    </li>
                  </ul>

@ -291,7 +297,9 @@

                <footer class="checkout-summary-footer">
                  <p class="checkout-summary-paragraph">Total</p>
-                  <p class="checkout-summary-paragraph summary-price">67€</p>
+                  <p class="checkout-summary-paragraph summary-price">
+                    {{ totalPrice }}€
+                  </p>
                </footer>
              </div>

@ -350,7 +358,11 @@
          <div class="checkout-success-body">
            <div class="checkout-success-content">
              <ul class="checkout-success-list">
-                <li class="checkout-success-item">
+                <li
+                  v-for="({ title, price }, index) in cart"
+                  :key="index"
+                  class="checkout-success-item"
+                >
                  <div class="checkout-item-content">
                    <div class="checkout-product-details">
                      <img
@ -358,25 +370,12 @@
                        alt="product"
                        class="checkout-product-img"
                      />
-                      <p class="checkout-product-title">Ramo Lucena</p>
+                      <p class="checkout-product-title">{{ title }}</p>
                    </div>

-                    <p class="checkout-product-price">30.00€</p>
-                  </div>
-                </li>
-
-                <li class="checkout-success-item">
-                  <div class="checkout-item-content">
-                    <div class="checkout-product-details">
-                      <img
-                        src="../assets/checkout-flower.png"
-                        alt="product"
-                        class="checkout-product-img"
-                      />
-                      <p class="checkout-product-title">Ramo Lucena</p>
-                    </div>
-
-                    <p class="checkout-product-price">30.00€</p>
+                    <p class="checkout-product-price">
+                      {{ price }}
+                    </p>
                  </div>
                </li>
              </ul>
@ -384,7 +383,7 @@

            <footer class="checkout-success-footer">
              <p class="checkout-success-paragraph">Total</p>
-              <p class="checkout-success-paragraph">67.00€</p>
+              <p class="checkout-success-paragraph">{{ totalPrice }}.00€</p>
            </footer>
          </div>
        </div>
@ -393,197 +392,171 @@
  </q-page>
 </template>

-<script lang="ts">
-import { useForm } from 'vee-validate';
-import { defineComponent, reactive, ref } from 'vue';
+<script>
+import { toTypedSchema } from "@vee-validate/zod";
+import { storeToRefs } from "pinia";
+import { useForm } from "vee-validate";
+import { defineComponent, reactive, ref } from "vue";

-import { toTypedSchema } from '@vee-validate/zod';
-import IconAny from 'src/components/icons/credit-flags/IconAny.vue';
-import IconExpress from 'src/components/icons/credit-flags/IconExpress.vue';
-import IconMaster from 'src/components/icons/credit-flags/IconMaster.vue';
-import IconVisa from 'src/components/icons/credit-flags/IconVisa.vue';
-import Container from 'src/components/ui/Container.vue';
-import { useFormStore } from 'src/stores/forms';
-import { checkoutSchema } from 'src/utils/zod/schemas/checkoutSchema';
-
-interface StepsProps {
-  value: number;
-  name: string;
-  description: string;
-  active: boolean;
-}
-
-interface FormPersonalData {
-  name: string;
-  surname: string;
-  address: string;
-  postalCode: string;
-  phone: string;
-  city: string;
-  province: string;
-}
+import IconAny from "src/components/icons/credit-flags/IconAny.vue";
+import IconExpress from "src/components/icons/credit-flags/IconExpress.vue";
+import IconMaster from "src/components/icons/credit-flags/IconMaster.vue";
+import IconVisa from "src/components/icons/credit-flags/IconVisa.vue";
+import Container from "src/components/ui/Container.vue";
+import { useCartStore } from "src/stores/cart";
+import { useFormStore } from "src/stores/forms";
+import { checkoutSchema } from "src/utils/zod/schemas/checkoutSchema";

 export default defineComponent({
-  name: 'CheckoutPage',
+  name: "CheckoutPage",
  components: {
    Container,
    IconAny,
    IconVisa,
    IconExpress,
    IconMaster,
-    // StepByStep,
  },
  setup() {
+    const cartStore = useCartStore();
+    const { cart, totalPrice } = storeToRefs(cartStore);
+
    const formStore = useFormStore();
    const { handleCheckoutData } = formStore;
    const { meta, errors, handleSubmit, defineField, resetForm } = useForm({
      validationSchema: toTypedSchema(checkoutSchema),
      initialValues: {
-        paymentMethod: 'credit',
+        paymentMethod: "credit",
        terms: false,
      },
    });
-    const [name, nameAttrs] = defineField('name');
-    const [surname, surnameAttrs] = defineField('surname');
-    const [address, addressAttrs] = defineField('address');
-    const [postalCode, postalCodeAttrs] = defineField('postalCode');
-    const [phone, phoneAttrs] = defineField('phone');
-    const [city, cityAttrs] = defineField('city');
-    const [province, provinceAttrs] = defineField('province');
-    const [senderName, senderNameAttrs] = defineField('senderName');
-    const [senderCifNif, senderCifNifAttrs] = defineField('senderCifNif');
-    const [senderEmail, senderEmailAttrs] = defineField('senderEmail');
-    const [senderPhone, senderPhoneAttrs] = defineField('senderPhone');
-    const [senderNotes, senderNotesAttrs] = defineField('senderNotes');
-    const [paymentMethod, paymentMethodAttrs] = defineField('paymentMethod');
-    const [terms, termsAttrs] = defineField('terms');
+    const [name, nameAttrs] = defineField("name");
+    const [surname, surnameAttrs] = defineField("surname");
+    const [address, addressAttrs] = defineField("address");
+    const [postalCode, postalCodeAttrs] = defineField("postalCode");
+    const [phone, phoneAttrs] = defineField("phone");
+    const [city, cityAttrs] = defineField("city");
+    const [province, provinceAttrs] = defineField("province");
+    const [senderName, senderNameAttrs] = defineField("senderName");
+    const [senderCifNif, senderCifNifAttrs] = defineField("senderCifNif");
+    const [senderEmail, senderEmailAttrs] = defineField("senderEmail");
+    const [senderPhone, senderPhoneAttrs] = defineField("senderPhone");
+    const [senderNotes, senderNotesAttrs] = defineField("senderNotes");
+    const [paymentMethod, paymentMethodAttrs] = defineField("paymentMethod");
+    const [terms, termsAttrs] = defineField("terms");

    const stepActive = reactive({ data: 1 });
-    const stepList = reactive<{ data: StepsProps[] }>({
+    const stepList = reactive({
      data: [
        {
          value: 1,
-          name: 'Paso 1',
-          description: 'Datos de facturación',
+          name: "Paso 1",
+          description: "Datos de facturación",
          active: true,
        },
        {
          value: 2,
-          name: 'Paso 2',
-          description: 'Confirmación',
+          name: "Paso 2",
+          description: "Confirmación",
          active: false,
        },
        {
          value: 3,
-          name: 'Paso 3',
-          description: 'Pago',
+          name: "Paso 3",
+          description: "Pago",
          active: false,
        },
      ],
    });
    const checkoutBlock = ref(true);
-    // const successblock = document.querySelector('#success-block');

    const onSubmit = handleSubmit((values) => {
      handleCheckoutData(values);
      stepList.data[2].active = true;
      checkoutBlock.value = false;
-      // successblock?.scrollIntoView({ behavior: 'smooth' });
      resetForm();
    });

-    const handleClickStep = (value: number) => {
-      stepActive['data'] = value;
+    const handleClickStep = (value) => {
+      stepActive["data"] = value;
    };

    const stepsFormated = () => {
-      return stepList['data'].map((step) => {
-        if (step.value === stepActive['data']) {
+      return stepList["data"].map((step) => {
+        if (step.value === stepActive["data"]) {
          return { ...step, active: true };
        }
        return step;
      });
    };

-    const optionsCity = reactive<{ data: string[] }>({
-      data: ['Complete la dirección y el código postal'],
-    });
-
-    const optionsProvince = reactive<{ data: string[] }>({
-      data: ['Complete la dirección, código postal y seleccione la ciudad'],
-    });
-
-    const formPersonalData = reactive<{ data: FormPersonalData }>({
-      data: {
-        name: '',
-        surname: '',
-        address: '',
-        postalCode: '',
-        phone: '',
-        city: '',
-        province: '',
-      },
-    });
-    /* watch(
-      () => formPersonalData.data.postalCode,
-      () => {
-        if (
-          formPersonalData.data.postalCode.length > 0 &&
-          formPersonalData.data.address.length > 0
-        ) {
-          return (optionsCity.data = [
-            'Sevilha',
-            'Málaga',
-            'Granada',
-            'Santiago de Compostela',
-            'Bilbao',
+    const provinceOptions = ref([
+      { code: "01", name: "Araba/Álava" },
+      { code: "02", name: "Albacete" },
+      { code: "03", name: "Alicante/Alacant" },
+      { code: "04", name: "Almería" },
+      { code: "05", name: "Ávila" },
+      { code: "06", name: "Badajoz" },
+      { code: "07", name: "Balears, Illes" },
+      { code: "08", name: "Barcelona" },
+      { code: "09", name: "Burgos" },
+      { code: "10", name: "Cáceres" },
+      { code: "11", name: "Cádiz" },
+      { code: "12", name: "Castellón/Castelló" },
+      { code: "13", name: "Ciudad Real" },
+      { code: "14", name: "Córdoba" },
+      { code: "15", name: "Coruña, A" },
+      { code: "16", name: "Cuenca" },
+      { code: "17", name: "Girona" },
+      { code: "18", name: "Granada" },
+      { code: "19", name: "Guadalajara" },
+      { code: "20", name: "Gipuzkoa" },
+      { code: "21", name: "Huelva" },
+      { code: "22", name: "Huesca" },
+      { code: "23", name: "Jaén" },
+      { code: "24", name: "León" },
+      { code: "25", name: "Lleida" },
+      { code: "26", name: "Rioja, La" },
+      { code: "27", name: "Lugo" },
+      { code: "28", name: "Madrid" },
+      { code: "29", name: "Málaga" },
+      { code: "30", name: "Murcia" },
+      { code: "31", name: "Navarra" },
+      { code: "32", name: "Ourense" },
+      { code: "33", name: "Asturias" },
+      { code: "34", name: "Palencia" },
+      { code: "35", name: "Palmas, Las" },
+      { code: "36", name: "Pontevedra" },
+      { code: "37", name: "Salamanca" },
+      { code: "38", name: "Santa Cruz de Tenerife" },
+      { code: "39", name: "Cantabria" },
+      { code: "40", name: "Segovia" },
+      { code: "41", name: "Sevilla" },
+      { code: "42", name: "Soria" },
+      { code: "43", name: "Tarragona" },
+      { code: "44", name: "Teruel" },
+      { code: "45", name: "Toledo" },
+      { code: "46", name: "Valencia/València" },
+      { code: "47", name: "Valladolid" },
+      { code: "48", name: "Bizkaia" },
+      { code: "49", name: "Zamora" },
+      { code: "50", name: "Zaragoza" },
+      { code: "51", name: "Ceuta" },
+      { code: "52", name: "Melilla" },
    ]);
-        }
-        optionsCity.data = ['Complete la dirección y el código postal'];
-        formPersonalData.data.city = '';
-      }
-    );
-
-    watch(
-      () => formPersonalData.data.city,
-      () => {
-        if (
-          formPersonalData.data.postalCode.length > 0 &&
-          formPersonalData.data.address.length > 0 &&
-          formPersonalData.data.city.length > 0
-        ) {
-          return (optionsProvince.data = [
-            'Barcelona',
-            'Valência',
-            'Málaga',
-            'Alicante',
-            'Sevilha',
-          ]);
-        }
-        optionsProvince.data = [
-          'Complete la dirección, código postal y seleccione la ciudad',
-        ];
-        formPersonalData.data.postalCode = '';
-      }
-    );
-
-    function onSubmitPersonalData(_e: Event) {
-      console.log(formPersonalData.data);
-    } */

    return {
      handleClickStep,
      stepsFormated,
-      formPersonalData,
-      optionsProvince,
-      optionsCity,
+      onSubmit,
      stepList,
+      provinceOptions,
+      totalPrice,

      step: ref(1),
+      cart,
      checkoutBlock,
      meta,
      errors,
-      onSubmit,
      name,
      nameAttrs,
      surname,
@ -650,6 +623,7 @@ export default defineComponent({
    justify-content: center;
    align-items: center;
    border-radius: 50%;
+    user-select: none;
    .step-value {
      font-family: $font-questrial;
      color: $primary-dark;
@ -726,11 +700,23 @@ export default defineComponent({
      & .checkout-delivery-date {
        display: flex;
        flex-direction: column;
+        user-select: none;
        gap: 18px;
-        padding: 16px 23px 18px;
+        padding: 0 23px 0;
        background-color: $primary-light;
+        transition: 200ms ease-in;
+        opacity: 0;
+        visibility: hidden;
+        height: 0;
+        overflow: hidden;
+        &.active {
+          height: min-content;
+          padding-block: 16px 18px;
+          opacity: 1;
+          visibility: visible;
          margin-bottom: 21px;
        }
+      }

      & .checkout-summary {
        margin-bottom: 33px;
--- a/src/pages/ContactaPage.vue
+++ b/src/pages/ContactaPage.vue
@ -6,7 +6,7 @@
  </q-page>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 export default defineComponent({
--- a/src/pages/ErrorNotFound.vue
+++ b/src/pages/ErrorNotFound.vue
@ -20,7 +20,7 @@
  </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 export default defineComponent({
--- a/src/pages/FaqPage.vue
+++ b/src/pages/FaqPage.vue
@ -6,7 +6,7 @@
  </q-page>
 </template>

-<script lang="ts">
+<script lang="js">
 import { defineComponent } from 'vue';

 export default defineComponent({
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@ -100,7 +100,7 @@
  </q-page>
 </template>

-<script lang="ts">
+<script lang="js">
 import { storeToRefs } from 'pinia';
 import { defineAsyncComponent, defineComponent, ref } from 'vue';

--- a/src/pages/ProductPage.vue
+++ b/src/pages/ProductPage.vue
@ -28,37 +28,73 @@

      <div class="product-content">
        <header class="product-content-header">
-          <h3 class="product-content-title subtitle">Ramo Lucena</h3>
+          <h3 class="product-content-title subtitle">
+            {{ currentProduct.value?.title }}
+            <q-skeleton type="rect" v-if="!currentProduct.value?.title" />
+          </h3>
+
+          <!-- <div>{{ currentData.value }}</div> -->

          <div class="product-header-block">
            <p class="product-content-paragraph">
              SKU:
-              <span class="green-text">52G201</span>
+              <span class="green-text" style="display: inline-flex">
+                {{ currentProduct.value?.sku }}
+                <q-skeleton
+                  width="100px"
+                  type="text"
+                  v-if="!currentProduct.value?.sku"
+                />
+              </span>
            </p>

            <p class="product-content-paragraph">
              Categoría:
-              <span class="green-text">Ramos</span>
+              <span class="green-text">
+                {{ currentProduct.value?.category }}
+                <q-skeleton
+                  type="text"
+                  width="50px"
+                  v-if="!currentProduct.value?.category"
+                />
+              </span>
            </p>
          </div>
        </header>

        <div class="product-content-body">
          <div class="product-content-paragraphs">
-            <p class="product-price green-text">30€</p>
+            <p class="product-price green-text">
+              {{ currentProduct.value?.price }}
+              <q-skeleton
+                type="text"
+                height="90px"
+                width="80px"
+                v-if="!currentProduct.value?.price"
+              />
+            </p>
            <p class="product-delivery green-text">Envío Gratuito</p>
            <p class="product-description">
-              Descripción del producto, nombrar las flores y verdes, productos
-              utilizados en único ramo. Lorem ipsum dolor sit amet,cosed do
-              eiusmode tempor incididu ut labore et dolo magna alic...
+              {{ currentProduct.value?.description }}
+              <q-skeleton
+                type="text"
+                v-if="!currentProduct.value?.description"
+              />
+              <q-skeleton
+                type="text"
+                v-if="!currentProduct.value?.description"
+              />
            </p>
          </div>

-          <form class="product-form" @submit.prevent="handleDedicationSubmit">
+          <form class="product-form" @submit="onSubmit">
            <div class="product-dedication">
              <header class="product-dedication-header">
                <IconPencilGreen />
-                <label class="product-dedication-paragraph" for="">
+                <label
+                  class="product-dedication-paragraph"
+                  for="dedication-btn"
+                >
                  ¿Deseas añadir una dedicatoria?
                </label>
              </header>
@ -66,16 +102,22 @@
              <div class="product-dedication-body">
                <q-input
                  v-model="dedication"
+                  v-bind="dedicationAttrs"
                  bg-color="white"
-                  standout
                  color="primary"
+                  outlined
+                  id="dedication-btn"
                />
              </div>
            </div>

-            <q-btn type="submit" color="primary" class="btn sm-btn">
-              AÑADIR AL CARRITO
-            </q-btn>
+            <q-btn
+              :loading="addCartLoadingBtn"
+              type="submit"
+              color="primary"
+              class="btn sm-btn"
+              label="AÑADIR AL CARRITO"
+            />
          </form>
        </div>

@ -92,28 +134,42 @@
        </footer>
      </div>

-      <div class="product-pag-block">
+      <div
+        class="product-pag-block"
+        :style="+$route.params.id === 1 && 'justify-content: flex-end;'"
+      >
        <q-btn
          color="white"
          class="btn outlined rounded sm-btn product-pag-item product-prev-btn"
-          to="/"
+          :to="`${+$route.params.id - 1}`"
+          v-if="+$route.params.id > 1"
        >
          <IconArrowCircleFilledLeft />

          <div class="btn-pag-paragraphs">
            <p class="btn-paragraph-top green-text">Produto anterior</p>
-            <p class="product-paragraph-bottom">Ramo Leticia</p>
+            <p
+              class="product-paragraph-bottom"
+              :title="prevProduct.value?.title"
+            >
+              {{ prevProduct.value?.title }}
+            </p>
          </div>
        </q-btn>

        <q-btn
          color="white"
          class="btn outlined rounded sm-btn product-pag-item product-next-btn"
-          to="/"
+          :to="`${+$route.params.id + 1}`"
        >
          <div class="btn-pag-paragraphs">
            <p class="btn-paragraph-top green-text">Siguiente producto</p>
-            <p class="product-paragraph-bottom">Ramo Rosas</p>
+            <p
+              class="product-paragraph-bottom"
+              :title="nextProduct.value?.title"
+            >
+              {{ nextProduct.value?.title }}
+            </p>
          </div>

          <IconArrowCircleFilledRight />
@ -156,55 +212,34 @@
  </q-page>
 </template>

-<script lang="ts">
-import { fakerES } from '@faker-js/faker';
-import { storeToRefs } from 'pinia';
-import { useMeta } from 'quasar';
-import { MetaOptions } from 'quasar/dist/types/meta';
-import { defineComponent, ref } from 'vue';
+<script>
+import { fakerES } from "@faker-js/faker";
+import { useMeta } from "quasar";
+import { useForm } from "vee-validate";
+import { defineComponent, onBeforeMount, ref, watch } from "vue";
+import { useRoute } from "vue-router";

-import IconArrowCircleFilledLeft from 'src/components/icons/IconArrowCircleFilledLeft.vue';
-import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
-import IconPencilGreen from 'src/components/icons/IconPencilGreen.vue';
-import IconEmail from 'src/components/icons/social/IconEmail.vue';
-import IconLinkedin from 'src/components/icons/social/IconLinkedin.vue';
-import IconShare from 'src/components/icons/social/IconShare.vue';
-import IconTwitter from 'src/components/icons/social/IconTwitter.vue';
-import IconWhatsapp from 'src/components/icons/social/IconWhatsapp.vue';
-import ProductCarousel from 'src/components/quasar-components/carousel/ProductCarousel.vue';
-import DudasSection from 'src/components/sections/DudasSection.vue';
-import Card from 'src/components/ui/Card.vue';
-import Container from 'src/components/ui/Container.vue';
-// import { cardMock } from 'src/mock/cards';
-import { useTextInputStore } from 'src/stores/textInput';
+import IconArrowCircleFilledLeft from "components/icons/IconArrowCircleFilledLeft.vue";
+import IconArrowCircleFilledRight from "components/icons/IconArrowCircleFilledRight.vue";
+import IconPencilGreen from "components/icons/IconPencilGreen.vue";
+import IconEmail from "components/icons/social/IconEmail.vue";
+import IconLinkedin from "components/icons/social/IconLinkedin.vue";
+import IconShare from "components/icons/social/IconShare.vue";
+import IconTwitter from "components/icons/social/IconTwitter.vue";
+import IconWhatsapp from "components/icons/social/IconWhatsapp.vue";
+import ProductCarousel from "components/quasar-components/carousel/ProductCarousel.vue";
+import DudasSection from "components/sections/DudasSection.vue";
+import Card from "components/ui/Card.vue";
+import Container from "components/ui/Container.vue";

-const metaData: MetaOptions = {
-  title: 'Product',
-  titleTemplate: (title) => `${title} - FloraNet`,
-  meta: {
-    description: { name: 'description', content: 'Page 1' },
-    keywords: { name: 'keywords', content: 'Quasar website' },
-    equiv: {
-      'http-equiv': 'Content-Type',
-      content: 'text/html; charset=UTF-8',
-    },
-    ogTitle: {
-      property: 'og:title',
-      template(ogTitle) {
-        return `${ogTitle} - FloraNet`;
-      },
-    },
-    noscript: {
-      default: 'This is content for browsers with no JS (or disabled JS)',
-    },
-  },
-};
+import { storeToRefs } from "pinia";
+import { dedicationSchema } from "src/utils/zod/schemas";
+import { useCartStore } from "stores/cart";

 export default defineComponent({
-  name: 'ProductPage',
+  name: "ProductPage",
  components: {
    IconPencilGreen,
-    // IconSearchGray,
    IconWhatsapp,
    IconLinkedin,
    IconTwitter,
@ -218,27 +253,82 @@ export default defineComponent({
    ProductCarousel,
  },
  setup() {
-    useMeta(metaData);
-    const textInputStore = useTextInputStore();
-    const { dedication } = storeToRefs(textInputStore);
-    const { handleDedicationSubmit } = textInputStore;
-
+    const route = useRoute();
    const cardMock = Array.from({ length: 4 }, (_, i) => ({
      id: i + 1,
      title: fakerES.lorem.word(),
-      attributes: [''],
+      attributes: [""],
      imgSrc: `../assets/flowers/flower-${i + 1}.png`,
-      value: fakerES.commerce.price({ symbol: '€', min: 15, max: 200 }),
+      value: fakerES.commerce.price({ symbol: "€", min: 15, max: 200 }),
      isNew: fakerES.datatype.boolean(),
      discount: fakerES.number.int({ min: 5, max: 25 }),
    }));

+    useMeta({
+      title: "Product",
+      titleTemplate: (title) => `${title} ${route.params.id} - FloraNet`,
+      meta: {
+        description: { name: "description", content: "Page 1" },
+        keywords: { name: "keywords", content: "Quasar website" },
+        equiv: {
+          "http-equiv": "Content-Type",
+          content: "text/html; charset=UTF-8",
+        },
+        ogTitle: {
+          property: "og:title",
+          template(ogTitle) {
+            return `${ogTitle} - FloraNet`;
+          },
+        },
+        noscript: {
+          default: "This is content for browsers with no JS (or disabled JS)",
+        },
+      },
+    });
+
+    const cartStore = useCartStore();
+    const { addToCart, getProduct } = cartStore;
+    const { prevProduct, currentProduct, nextProduct, addCartLoadingBtn } =
+      storeToRefs(cartStore);
+
+    onBeforeMount(() => {
+      getProduct(+route.params.id);
+    });
+
+    watch(
+      () => route.params.id,
+      (newId) => {
+        getProduct(+newId);
+      }
+    );
+
+    const currentData = ref({});
+    watch(currentProduct.value, (newData) => {
+      const { id, ...newDataWhithoutId } = newData.value;
+      currentData.value = { ...newDataWhithoutId, productId: +route.params.id };
+    });
+
+    const { handleSubmit, defineField, handleReset } = useForm({
+      validationSchema: dedicationSchema,
+    });
+    const [dedication, dedicationAttrs] = defineField("dedication");
+    const onSubmit = handleSubmit(() => {
+      addToCart(currentData.value, dedication);
+      handleReset();
+    });
+
    return {
      cardMock,
      slide: ref(1),
      fullscreen: ref(false),
-      handleDedicationSubmit,
      dedication,
+      dedicationAttrs,
+      onSubmit,
+      addCartLoadingBtn,
+      prevProduct,
+      currentProduct,
+      nextProduct,
+      currentData,
    };
  },
 });
@ -293,7 +383,7 @@ export default defineComponent({
            height: 68px;
            flex: 0 0 61px;
            &::after {
-              content: '';
+              content: "";
            }

            &.q-carousel__thumbnail--active {
@ -321,6 +411,9 @@ export default defineComponent({
          line-height: 21px;
          letter-spacing: 0.28px;
          color: $text-gray;
+          & .green-text {
+            display: inline-flex;
+          }
        }
      }

@ -432,7 +525,7 @@ export default defineComponent({
    & .product-pag-item {
      margin-top: 76px;
      &::before {
-        content: '';
+        content: "";
        display: none;
      }

@ -449,6 +542,15 @@ export default defineComponent({
        flex-wrap: nowrap;
      }

+      & .btn-pag-paragraphs {
+        & .product-paragraph-bottom {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 15ch;
+        }
+      }
+
      &.product-prev-btn {
        padding: 10px 55px 10px 20px;
      }
--- a/src/quasar.d.ts
+++ b/src/quasar.d.ts
@ -1,9 +0,0 @@
-/* eslint-disable */
-
-// Forces TS to apply `@quasar/app-vite` augmentations of `quasar` package
-// Removing this would break `quasar/wrappers` imports as those typings are declared
-//  into `@quasar/app-vite`
-// As a side effect, since `@quasar/app-vite` reference `quasar` to augment it,
-//  this declaration also apply `quasar` own
-//  augmentations (eg. adds `$q` into Vue component context)
-/// <reference types="@quasar/app-vite" />
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,12 +1,11 @@
-import { route } from 'quasar/wrappers';
+import { route } from "quasar/wrappers";
 import {
  createMemoryHistory,
  createRouter,
  createWebHashHistory,
  createWebHistory,
-} from 'vue-router';
-
-import routes from './routes';
+} from "vue-router";
+import routes from "./routes";

 /*
 * If not building with SSR mode, you can
@ -20,7 +19,9 @@ import routes from './routes';
 export default route(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
-    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
+    : process.env.VUE_ROUTER_MODE === "history"
+    ? createWebHistory
+    : createWebHashHistory;

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
--- a/src/router/routes.js
+++ b/src/router/routes.js
@ -0,0 +1,71 @@
+const routes = [
+  {
+    path: "/",
+    component: () => import("layouts/HomeLayout.vue"),
+    redirect: "/",
+    children: [
+      {
+        path: "",
+        name: "Home",
+        component: () => import("pages/HomePage.vue"),
+      },
+    ],
+  },
+  {
+    path: "/categoria",
+    component: () => import("layouts/CategoryLayout.vue"),
+    redirect: "/categoria",
+    children: [
+      {
+        path: "ramos",
+        name: "Category",
+        component: () => import("pages/CategoryPage.vue"),
+      },
+      {
+        path: "plantas",
+        name: "Plantas",
+        component: () => import("pages/CategoryPage.vue"),
+      },
+    ],
+  },
+  {
+    path: "/checkout",
+    component: () => import("layouts/CheckoutLayout.vue"),
+    redirect: "/checkout",
+    children: [
+      {
+        path: "",
+        name: "Checkout",
+        component: () => import("pages/CheckoutPage.vue"),
+      },
+    ],
+  },
+  {
+    path: "/product/:id",
+    component: () => import("layouts/DefaultLayout.vue"),
+    redirect: "/product/:id",
+    children: [
+      {
+        path: "",
+        name: "Product",
+        component: () => import("pages/ProductPage.vue"),
+      },
+    ],
+  },
+  {
+    path: "/faq",
+    name: "Faq",
+    component: () => import("pages/FaqPage.vue"),
+  },
+  {
+    path: "/contacta",
+    name: "Contacta",
+    component: () => import("pages/ContactaPage.vue"),
+  },
+  {
+    path: "/:catchAll(.*)*",
+    component: () => import("pages/ErrorNotFound.vue"),
+  },
+];
+
+export default routes;
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@ -1,73 +0,0 @@
-import { RouteRecordRaw } from 'vue-router';
-
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    component: () => import('layouts/HomeLayout.vue'),
-    redirect: '/',
-    children: [
-      {
-        path: '',
-        name: 'Home',
-        component: () => import('pages/HomePage.vue'),
-      },
-    ],
-  },
-  {
-    path: '/categoria',
-    component: () => import('layouts/CategoryLayout.vue'),
-    redirect: '/categoria',
-    children: [
-      {
-        path: 'ramos',
-        name: 'Category',
-        component: () => import('pages/CategoryPage.vue'),
-      },
-      {
-        path: 'plantas',
-        name: 'Plantas',
-        component: () => import('pages/CategoryPage.vue'),
-      },
-    ],
-  },
-  {
-    path: '/checkout',
-    component: () => import('layouts/CheckoutLayout.vue'),
-    redirect: '/checkout',
-    children: [
-      {
-        path: '',
-        name: 'Checkout',
-        component: () => import('pages/CheckoutPage.vue'),
-      },
-    ],
-  },
-  {
-    path: '/product/:id',
-    component: () => import('layouts/DefaultLayout.vue'),
-    redirect: '/product/:id',
-    children: [
-      {
-        path: '',
-        name: 'Product',
-        component: () => import('pages/ProductPage.vue'),
-      },
-    ],
-  },
-  {
-    path: '/faq',
-    name: 'Faq',
-    component: () => import('pages/FaqPage.vue'),
-  },
-  {
-    path: '/contacta',
-    name: 'Contacta',
-    component: () => import('pages/ContactaPage.vue'),
-  },
-  {
-    path: '/:catchAll(.*)*',
-    component: () => import('pages/ErrorNotFound.vue'),
-  },
-];
-
-export default routes;
--- a/src/services/json-server/db.json
+++ b/src/services/json-server/db.json
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@ -1,10 +0,0 @@
-/* eslint-disable */
-
-/// <reference types="vite/client" />
-
-// Mocks all files ending in `.vue` showing them as plain Vue instances
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
--- a/src/stores/cart.js
+++ b/src/stores/cart.js
@ -0,0 +1,112 @@
+import { defineStore } from "pinia";
+import { api } from "src/boot/axios";
+import { computed, reactive, ref } from "vue";
+
+export const useCartStore = defineStore("cart", () => {
+  const cart = ref([]);
+  const dedicationTxt = ref("");
+  const prevProduct = reactive({});
+  const currentProduct = reactive({});
+  const nextProduct = reactive({});
+  const addCartLoadingBtn = ref(false);
+  const cartLength = computed(() => cart.value.length);
+  const totalPrice = computed(() => {
+    return cart.value.reduce((acc, { price }) => {
+      if (price) {
+        const priceWithoutLetter = price?.replace("€", "");
+        return +priceWithoutLetter + acc;
+      }
+    }, 0);
+  });
+
+  /**
+   *
+   * @param debug Allow the data console - boolean
+   *
+   */
+  async function getCart({ debug }) {
+    try {
+      const { data } = await api.get("cart");
+      cart.value = data;
+
+      if (debug) {
+        console.groupCollapsed("%c Cart is fetched!", "color: green;");
+        console.table(cart.value);
+        console.groupEnd();
+      }
+    } catch (err) {
+      /* throw */ new Error(`FATAL ERROR ::: ${err}`);
+    }
+  }
+  getCart({ debug: true });
+
+  /**
+   *
+   * @param id Id to get product
+   * @returns 'id: number; title: string; description: string; price: string; sku: string; category: string; images: string[]'
+   *
+   */
+  async function getProduct(id) {
+    if (id) {
+      try {
+        const { data } = await api.get(`flowers/${id}`);
+        currentProduct.value = data;
+        const { data: dataNext } = await api.get(`flowers/${id + 1}`);
+        if (dataNext) {
+          nextProduct.value = dataNext;
+        }
+
+        console.groupCollapsed("%c Produtos recebido!", "color: green;");
+        if (id - 1 > 0) {
+          const { data: dataPrev } = await api.get(`flowers/${id - 1}`);
+          prevProduct.value = dataPrev;
+          console.table(prevProduct.value);
+        }
+        console.table(currentProduct.value);
+        console.table(nextProduct.value);
+        console.groupEnd();
+      } catch (err) {
+        new Error(`FATAL ERROR ::: ${err}`);
+      }
+    }
+  }
+
+  async function addToCart(product, dedication) {
+    cart.value.push({ ...product.value });
+    dedicationTxt.value = dedication;
+    addCartLoadingBtn.value = true;
+
+    try {
+      await api.post("cart", product);
+      addCartLoadingBtn.value = false;
+    } catch (err) {
+      addCartLoadingBtn.value = false;
+      new Error(`FATAL ERROR ::: ${err}`);
+    }
+
+    console.groupCollapsed("%c Adicionado com sucesso!", "color: green");
+    console.table(cart.value);
+    console.groupEnd();
+  }
+
+  function removeFromCart(id) {
+    cart.value = cart.value.filter((p) => p.id !== id);
+    api.delete(`cart/${id}`);
+  }
+
+  return {
+    cart,
+    totalPrice,
+    dedicationTxt,
+    cartLength,
+    prevProduct,
+    currentProduct,
+    nextProduct,
+    addCartLoadingBtn,
+
+    addToCart,
+    removeFromCart,
+    getProduct,
+    getCart,
+  };
+});
--- a/src/stores/forms.js
+++ b/src/stores/forms.js
@ -0,0 +1,58 @@
+import { defineStore } from "pinia";
+
+export const useFormStore = defineStore("forms", {
+  state: () => ({
+    sortProductFilters: {
+      isOpenOrderFilter: false,
+      order: undefined,
+      price: undefined,
+      category: "ramos",
+    },
+    question: {
+      name: "",
+      surname: "",
+      email: "",
+      phone: "",
+      query: "",
+      message: "",
+      terms: false,
+    },
+    availability: {
+      date: "",
+      postalCode: "",
+    },
+    checkout: {
+      name: "",
+      surname: "",
+      address: "",
+      postalCode: "",
+      city: "",
+      province: "",
+      phone: "",
+      senderName: "",
+      senderCifNif: "",
+      senderEmail: "",
+      senderPhone: "",
+      senderNotes: "",
+      paymentMethod: "credit",
+      terms: false,
+    },
+  }),
+
+  actions: {
+    handleQuestionData(values) {
+      console.log(values);
+      this.question = values;
+    },
+
+    handleAvailabilityData(values) {
+      console.log(values);
+      this.availability = values;
+    },
+
+    handleCheckoutData(values) {
+      // console.log(values);
+      this.checkout = values;
+    },
+  },
+});
--- a/src/stores/forms.ts
+++ b/src/stores/forms.ts
@ -1,75 +0,0 @@
-import { defineStore } from 'pinia';
-import { AvailabilityForm } from 'src/utils/zod/schemas/availabilitySchema';
-import type { CheckoutForm } from 'src/utils/zod/schemas/checkoutSchema';
-import type { QuestionForm } from 'src/utils/zod/schemas/questionSchema';
-
-export type Order = 'lowest-price' | 'highest-price' | 'latest' | 'recommended';
-export type Category = 'ramos' | 'plantas';
-interface UseFormStoreState {
-  sortProductFilters: {
-    isOpenOrderFilter: boolean;
-    order?: Order;
-    price?: number;
-    category: Category;
-  };
-  question: QuestionForm;
-  availability: AvailabilityForm;
-  checkout: CheckoutForm;
-}
-
-export const useFormStore = defineStore('forms', {
-  state: (): UseFormStoreState => ({
-    sortProductFilters: {
-      isOpenOrderFilter: false,
-      order: undefined,
-      price: undefined,
-      category: 'ramos',
-    },
-    question: {
-      name: '',
-      surname: '',
-      email: '',
-      phone: '',
-      query: '',
-      message: '',
-      terms: false,
-    },
-    availability: {
-      date: '',
-      postalCode: '',
-    },
-    checkout: {
-      name: '',
-      surname: '',
-      address: '',
-      postalCode: '',
-      city: '',
-      province: '',
-      phone: '',
-      senderName: '',
-      senderCifNif: '',
-      senderEmail: '',
-      senderPhone: '',
-      senderNotes: '',
-      paymentMethod: 'credit',
-      terms: false,
-    },
-  }),
-
-  actions: {
-    handleQuestionData(values: QuestionForm) {
-      console.log(values);
-      this.question = values;
-    },
-
-    handleAvailabilityData(values: typeof this.availability) {
-      console.log(values);
-      this.availability = values;
-    },
-
-    handleCheckoutData(values: CheckoutForm) {
-      // console.log(values);
-      this.checkout = values;
-    },
-  },
-});
--- a/src/stores/index.js
+++ b/src/stores/index.js
@ -0,0 +1,20 @@
+import { createPinia } from "pinia";
+import { store } from "quasar/wrappers";
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia();
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia;
+});
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@ -1,32 +0,0 @@
-import { createPinia } from 'pinia';
-import { store } from 'quasar/wrappers';
-import { Router } from 'vue-router';
-
-/*
- * When adding new properties to stores, you should also
- * extend the `PiniaCustomProperties` interface.
- * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
- */
-declare module 'pinia' {
-  export interface PiniaCustomProperties {
-    readonly router: Router;
-  }
-}
-
-/*
- * If not building with SSR mode, you can
- * directly export the Store instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Store instance.
- */
-
-export default store((/* { ssrContext } */) => {
-  const pinia = createPinia();
-
-  // You can add Pinia plugins here
-  // pinia.use(SomePiniaPlugin)
-
-  return pinia;
-});
--- a/src/stores/language.js
+++ b/src/stores/language.js
@ -0,0 +1,7 @@
+import { defineStore } from "pinia";
+
+export const useLanguageStore = defineStore("language", {
+  state: () => ({
+    lang: "es",
+  }),
+});
--- a/src/stores/language.ts
+++ b/src/stores/language.ts
@ -1,7 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useLanguageStore = defineStore('language', {
-  state: () => ({
-    lang: 'es',
-  }),
-});
--- a/src/stores/mobileNav.js
+++ b/src/stores/mobileNav.js
@ -1,6 +1,6 @@
-import { defineStore } from 'pinia';
+import { defineStore } from "pinia";

-export const useMobileStore = defineStore('mobile', {
+export const useMobileStore = defineStore("mobile", {
  state: () => ({
    isOpenNav: false,
    isCarouselVisible: false,
--- a/src/stores/modalStore.js
+++ b/src/stores/modalStore.js
@ -0,0 +1,26 @@
+import { defineStore } from "pinia";
+
+export const useModalStore = defineStore("modal", {
+  state: () => ({
+    isOpenAvailability: false,
+    isOpenFilters: false,
+  }),
+
+  actions: {
+    openModal({ modal }) {
+      const open = {
+        availability: () =>
+          (this.isOpenAvailability = !this.isOpenAvailability),
+        filters: () => (this.isOpenFilters = !this.isOpenFilters),
+      };
+      open[modal]();
+    },
+    handleSubmit({ isModalContent }) {
+      const isModal = {
+        isOpenAvailability: () => "Contenido modal availability",
+        isOpenFilters: () => "Contenido modal filters",
+      };
+      console.log(isModal[isModalContent]());
+    },
+  },
+});
--- a/src/stores/modalStore.ts
+++ b/src/stores/modalStore.ts
@ -1,35 +0,0 @@
-import { defineStore } from 'pinia';
-
-type Modal = 'availability' | 'filters';
-
-interface ModalParams {
-  modal: Modal;
-}
-interface HandleSubmitModalParams {
-  isModalContent: 'isOpenAvailability' | 'isOpenFilters';
-}
-
-export const useModalStore = defineStore('modal', {
-  state: () => ({
-    isOpenAvailability: false,
-    isOpenFilters: false,
-  }),
-
-  actions: {
-    openModal({ modal }: ModalParams) {
-      const open = {
-        availability: () =>
-          (this.isOpenAvailability = !this.isOpenAvailability),
-        filters: () => (this.isOpenFilters = !this.isOpenFilters),
-      };
-      open[modal]();
-    },
-    handleSubmit({ isModalContent }: HandleSubmitModalParams) {
-      const isModal = {
-        isOpenAvailability: () => 'Contenido modal availability',
-        isOpenFilters: () => 'Contenido modal filters',
-      };
-      console.log(isModal[isModalContent]());
-    },
-  },
-});
--- a/src/stores/rangePrice.js
+++ b/src/stores/rangePrice.js
@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+
+export const useRangePriceStore = defineStore("range-price", {
+  state: () => ({
+    rangeValue: {
+      min: 0,
+      max: 200,
+    },
+  }),
+
+  actions: {
+    handlePriceRange({ min, max }) {
+      console.log(min, max);
+      this.rangeValue = {
+        max,
+        min,
+      };
+    },
+  },
+});
--- a/src/stores/rangePrice.ts
+++ b/src/stores/rangePrice.ts
@ -1,25 +0,0 @@
-import { defineStore } from 'pinia';
-
-type HandlePriceRangeParams = {
-  min: number;
-  max: number;
-};
-
-export const useRangePriceStore = defineStore('range-price', {
-  state: () => ({
-    rangeValue: {
-      min: 0,
-      max: 200,
-    },
-  }),
-
-  actions: {
-    handlePriceRange({ min, max }: HandlePriceRangeParams) {
-      console.log(min, max);
-      this.rangeValue = {
-        max,
-        min,
-      };
-    },
-  },
-});
--- a/src/stores/textInput.js
+++ b/src/stores/textInput.js
@ -1,8 +1,8 @@
-import { defineStore } from 'pinia';
+import { defineStore } from "pinia";

-export const useTextInputStore = defineStore('text-input', {
+export const useTextInputStore = defineStore("text-input", {
  state: () => ({
-    dedication: '',
+    dedication: "",
  }),

  actions: {
--- a/src/types/global.ts
+++ b/src/types/global.ts
@ -1 +0,0 @@
-export type Modify<T, R> = Omit<T, keyof R> & R;
--- a/src/utils/zod/functions.js
+++ b/src/utils/zod/functions.js
@ -1,6 +1,6 @@
-export function handlePhoneVal(val: string) {
+export function handlePhoneVal(val) {
  const regex = /[\(\) ]/g;
-  const valWithoutSpaceAndParenteses = val.replace(regex, '');
+  const valWithoutSpaceAndParenteses = val.replace(regex, "");
  const valLength = valWithoutSpaceAndParenteses.length;

  return valLength > 0 && valLength === 11;
--- a/src/utils/zod/globalProperties.js
+++ b/src/utils/zod/globalProperties.js
@ -1,12 +1,12 @@
-import { z } from 'zod';
+import { z } from "zod";

-import * as M from './messages';
+import * as M from "./messages";

 export const postalCode = z
  .string({ required_error: M.requiredMessage })
  .refine((val) => {
-    const valWithoutHifen = val.replaceAll('-', '');
+    const valWithoutHifen = val.replaceAll("-", "");
    const valLength = valWithoutHifen.length;

    return valLength === 8 && valLength >= 1;
-  }, 'El código postal debe tener 8 caracteres numéricos válidos');
+  }, "El código postal debe tener 8 caracteres numéricos válidos");
--- a/src/utils/zod/index.js
+++ b/src/utils/zod/index.js
@ -0,0 +1,4 @@
+export * from "./functions";
+export * from "./globalProperties";
+export * from "./messages";
+export * from "./regex";
--- a/src/utils/zod/messages.js
+++ b/src/utils/zod/messages.js
@ -0,0 +1,9 @@
+export const nameMessage =
+  "Sólo se aceptan una palabra y caracteres no numéricos";
+export const phoneMessage =
+  "El número de teléfono debe contener 11 caracteres numéricos válidos";
+export const onlyMinimumTwoCharacters = "Añade al menos dos caracteres";
+export const onlyTextMessage = "Sólo son válidas las letras";
+export const requiredMessage = "Campo obligatorio";
+export const emailMessage =
+  "Introduzca una dirección de correo electrónico válida.";
--- a/src/utils/zod/messages.ts
+++ b/src/utils/zod/messages.ts
@ -1,7 +0,0 @@
-export const nameMessage =
-  'Sólo se aceptan una palabra y caracteres no numéricos';
-export const phoneMessage =
-  'El número de teléfono debe contener 11 caracteres numéricos válidos';
-export const requiredMessage = 'Campo obligatorio';
-export const emailMessage =
-  'Introduzca una dirección de correo electrónico válida.';
--- a/src/utils/zod/regex.js
+++ b/src/utils/zod/regex.js
@ -0,0 +1,2 @@
+export const justOneWord = /^[A-Za-z]+$/;
+export const justLetters = /^[A-Za-z ]+$/;
--- a/src/utils/zod/regex.ts
+++ b/src/utils/zod/regex.ts
@ -1 +0,0 @@
-export const justOneWord = /^[A-Za-z]+$/;
--- a/src/utils/zod/schemas/availabilitySchema.js
+++ b/src/utils/zod/schemas/availabilitySchema.js
@ -1,18 +1,17 @@
-import { z } from 'zod';
-import { postalCode } from './../globalProperties';
+import { z } from "zod";
+import { postalCode } from "..";

 const availabilityObj = {
  date: z.string().refine((val) => {
-    const [day, month, year] = val.split('/');
+    const [day, month, year] = val.split("/");
    const regex = /\//g;
-    const valWithoutSlash = val.replace(regex, '');
+    const valWithoutSlash = val.replace(regex, "");
    const data = new Date(`${year}-${month}-${day}`);
    const today = new Date();

    return valWithoutSlash.length === 8 && data >= today;
-  }, 'La fecha no puede ser inferior al día de hoy!'),
+  }, "La fecha no puede ser inferior al día de hoy!"),
  postalCode,
 };

 export const availabilitySchema = z.object(availabilityObj);
-export type AvailabilityForm = z.infer<typeof availabilitySchema>;
--- a/src/utils/zod/schemas/checkoutSchema.js
+++ b/src/utils/zod/schemas/checkoutSchema.js
@ -1,10 +1,8 @@
-import { z } from 'zod';
+import { z } from "zod";

-import { handlePhoneVal } from '../functions';
-import { postalCode } from '../globalProperties';
-import { justOneWord } from '../regex';
+import { handlePhoneVal, justLetters, justOneWord, postalCode } from "..";

-import * as M from '../messages';
+import * as M from "../messages";

 const checkoutObjVal = {
  name: z
@ -15,24 +13,27 @@ const checkoutObjVal = {
    .regex(justOneWord, M.nameMessage),
  address: z.string({ required_error: M.requiredMessage }),
  postalCode,
-  city: z.string({ required_error: M.requiredMessage }).min(3),
-  province: z.string({ required_error: M.requiredMessage }).min(3),
+  city: z
+    .string({ required_error: M.requiredMessage })
+    .min(2, M.onlyMinimumTwoCharacters)
+    .regex(justLetters, M.onlyTextMessage),
+  province: z.string({ required_error: M.requiredMessage }),
  phone: z
    .string({ required_error: M.requiredMessage })
    .refine(handlePhoneVal, M.phoneMessage),
  senderName: z.string().regex(justOneWord, M.nameMessage),
  senderCifNif: z
    .string()
-    .length(9, 'El código postal debe tener 9 caracteres numéricos válidos'),
+    .length(9, "El código postal debe tener 9 caracteres numéricos válidos"),
  senderEmail: z.string().email(M.emailMessage),
  senderPhone: z.string().refine(handlePhoneVal, M.phoneMessage),
  senderNotes: z.string(),
-  paymentMethod: z.enum(['credit', 'stripe'], {
-    required_error: 'Seleccione uno de los métodos de pago',
+  paymentMethod: z.enum(["credit", "stripe"], {
+    required_error: "Seleccione uno de los métodos de pago",
  }),
  terms: z.boolean().refine((val) => {
    return val === true;
-  }, 'Acepte las condiciones antes de continuar con la compra'),
+  }, "Acepte las condiciones antes de continuar con la compra"),
 };

 export const checkoutSchema = z.object(checkoutObjVal).partial({
@ -42,4 +43,3 @@ export const checkoutSchema = z.object(checkoutObjVal).partial({
  senderPhone: true,
  senderNotes: true,
 });
-export type CheckoutForm = z.infer<typeof checkoutSchema>;
--- a/src/utils/zod/schemas/dedicationSchema.js
+++ b/src/utils/zod/schemas/dedicationSchema.js
@ -0,0 +1,21 @@
+import { toTypedSchema } from "@vee-validate/zod";
+import { z } from "zod";
+
+const dedicationObj = {
+  id: z.number(),
+  title: z.string(),
+  description: z.string(),
+  price: z.string(),
+  sku: z.string(),
+  category: z.string(),
+
+  attributes: z.string().array(),
+  imgSrc: z.string(),
+  value: z.string(),
+  isNew: z.boolean(),
+  discount: z.string(),
+  dedication: z.string(),
+};
+export const dedicationSchema = toTypedSchema(
+  z.object(dedicationObj).partial()
+);
--- a/src/utils/zod/schemas/index.js
+++ b/src/utils/zod/schemas/index.js
@ -0,0 +1,4 @@
+export * from "./availabilitySchema";
+export * from "./checkoutSchema";
+export * from "./dedicationSchema";
+export * from "./questionSchema";
--- a/src/utils/zod/schemas/questionSchema.js
+++ b/src/utils/zod/schemas/questionSchema.js
@ -1,9 +1,8 @@
-import { toTypedSchema } from '@vee-validate/zod';
-import { z } from 'zod';
+import { toTypedSchema } from "@vee-validate/zod";
+import { z } from "zod";

-import { handlePhoneVal } from '../functions';
-import * as M from '../messages';
-import { justOneWord } from '../regex';
+import { handlePhoneVal, justOneWord } from "..";
+import * as M from "../messages";

 const questionObjVal = {
  name: z
@ -16,14 +15,13 @@ const questionObjVal = {
  phone: z
    .string({ required_error: M.requiredMessage })
    .refine(handlePhoneVal, M.phoneMessage),
-  query: z.string({ required_error: M.requiredMessage }),
-  message: z.string({ required_error: M.requiredMessage }),
+  query: z.string({ required_error: M.requiredMessage }).min(1),
+  message: z.string({ required_error: M.requiredMessage }).min(1),
  terms: z.boolean({ required_error: M.requiredMessage }).refine((val) => {
    return val === true;
  }),
 };

-const questionType = z.object(questionObjVal);
-export type QuestionForm = z.infer<typeof questionType>;
-
-export const questionSchema = toTypedSchema(z.object(questionObjVal));
+export const questionSchema = toTypedSchema(
+  z.object(questionObjVal).required()
+);
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,8 +0,0 @@
-{
-  "extends": "@quasar/app-vite/tsconfig-preset",
-  "compilerOptions": {
-    "baseUrl": "."
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}
--- a/yarn.lock
+++ b/yarn.lock
				`@ -1 +0,0 @@`
				`export type Modify<T, R> = Omit<T, keyof R> & R;`