Merge branch 'main' into feat--implement-coupon

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,6 +5,7 @@ Closes: #ID
 ## Describe your changes
 
 ## Checklist before requesting a review
+
 - [ ] My code follows the code style of this project.
 - [ ] I have read the **CONTRIBUTING** document.
 - [ ] I have added tests to cover my changes.

.github/workflows/lint.yml

@@ -47,8 +47,8 @@ jobs:
       - name: Install Dependencies
         run: yarn --frozen-lockfile
 
-      - name: Build packages
-        run: yarn build
+      - name: Run prettier
+        run: yarn format
 
       - name: Run linter
         run: yarn lint

.prettierignore

@@ -1,3 +1,4 @@
 node_modules
+__tests__
 .nuxt
 .turbo

.prettierrc

@@ -6,11 +6,5 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "printWidth": 120,
-  "jsxSingleQuote": false,
-  "importOrder": [
-    "^vue",
-    "^(nuxt/(.*)$)|^(nuxt$)",
-    "<THIRD_PARTY_MODULES>",
-    "^[./]"
-  ]
+  "jsxSingleQuote": false
 }

GUIDE.md

@@ -139,7 +139,7 @@ Naming convention:
 - each composables should be prefixed with `use` keyword (`useProduct`)
 - composable should follow `Camel case` pattern (`useProductReviews`)
 
-We are using internal [Nuxt.js state management](https://nuxt.com/docs/getting-started/state-management) to lock the data responsibility along with the composition functions (composables). State connected to the certain composable is read-only and modified by the internal modifiers (functions). You can check the `useCart.ts` composable as a reference. 
+We are using internal [Nuxt.js state management](https://nuxt.com/docs/getting-started/state-management) to lock the data responsibility along with the composition functions (composables). State connected to the certain composable is read-only and modified by the internal modifiers (functions). You can check the `useCart.ts` composable as a reference.
 
 ### Components
 
@@ -191,7 +191,7 @@ Naming convention:
 
 The data fetching process is handled seamlessly by integrating VSF SDK, which acts as a robust communication layer between the application and the VSF Middleware. The SDK provides a set of convenient and optimized methods to fetch data from various APIs and services.
 
-To simplify the implementation and management of data fetching we're using native Nuxt's composables for [useAsyncData](https://nuxt.com/docs/api/composables/use-async-data) and [useState](https://nuxt.com/docs/getting-started/state-management).  It seamlessly integrates with VSF SDK and simplifies the process of caching, synchronizing, and managing the application's data. These functions provide an elegant and efficient way to handle asynchronous data fetching, automatically managing data caching, refetching, and background updates.
+To simplify the implementation and management of data fetching we're using native Nuxt's composables for [useAsyncData](https://nuxt.com/docs/api/composables/use-async-data) and [useState](https://nuxt.com/docs/getting-started/state-management). It seamlessly integrates with VSF SDK and simplifies the process of caching, synchronizing, and managing the application's data. These functions provide an elegant and efficient way to handle asynchronous data fetching, automatically managing data caching, refetching, and background updates.
 
 By combining VSF SDK with Nuxt's composables, this project ensures a reliable and performant data fetching experience for the application. Developers can easily fetch, update, and maintain data using composition declarative approach, while the VSF SDK handles the underlying communication and data retrieval tasks.
 
@@ -244,7 +244,7 @@ In order to optimize and enhance the performance of the application, several per
 > **Note**
 > To analyze your app bundles run `npx nuxi analyze` command.
 
-*You can use bundle analyzer to check the whole application structure along with server, or simply jump into the `apps/web` folder to analyze your web application.*
+_You can use bundle analyzer to check the whole application structure along with server, or simply jump into the `apps/web` folder to analyze your web application._
 
 #### Web performance automated testing
 

LICENSE.md

@@ -18,4 +18,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
 DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
 OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
-OR OTHER DEALINGS IN THE SOFTWARE.
+OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <a href="https://vuestorefront.io/"><img src="https://user-images.githubusercontent.com/1626923/137092657-fb398d20-b592-4661-a1f9-4135db0b61d5.png" alt="Vue Storefront" height="80px" /></a>
 
-  <a href="https://www.plentymarkets.com/"><img src="https://cdn01.plentymarkets.com/avw8j9fg70hi/frontend/plentyShop_LTS/plentysystems-logo.jpg" alt="plentysystems logo" height="160px" /></a>
+<a href="https://www.plentymarkets.com/"><img src="https://cdn01.plentymarkets.com/avw8j9fg70hi/frontend/plentyShop_LTS/plentysystems-logo.jpg" alt="plentysystems logo" height="160px" /></a>
 
   <h1 align="center">Vue Storefront 3 Integration With plentysystems</h1>
 </div>
@@ -25,20 +25,20 @@ For plentyShop PWA to run, you have to install plugins that provide additional R
 
 1. Log into your plentysystems system.
 2. [Install](https://knowledge.plentymarkets.com/en-gb/manual/main/plugins/installing-added-plugins.html#installing-plugins) the following plugins in the latest version:
-    - IO
-    - plentyShop LTS
-    - PayPal
-    - Cash in advance
-    - Pay upon pickup
-    - DHL Shipping (Versenden)
-    - Customer feedback
+   - IO
+   - plentyShop LTS
+   - PayPal
+   - Cash in advance
+   - Pay upon pickup
+   - DHL Shipping (Versenden)
+   - Customer feedback
 3. Set the priorities of the plugins, so that IO has the highest priority and plentyShop LTS the second highest. The priorities of all other plugins remains 0.
 
 ### System configuration
 
 1. Log into your plentysystems system.
 2. Go to **Setup » Guided Tours** and complete **Setting up plentyShop**.
-3. *Optional:* Go to **Setup » Orders » Payment » PayPal** and set up your PayPal account.
+3. _Optional:_ Go to **Setup » Orders » Payment » PayPal** and set up your PayPal account.
 
 ## Local dev setup
 
@@ -94,6 +94,7 @@ For detailed setup instructions, refer to the [deployment guide](./docs/deployme
 ## Resources
 
 ### Changelog
+
 [English](./docs/changelog/changelog_en.md) | [German](./docs/changelog/changelog_de.md)
 
 ### Features

apps/server/middleware.config.ts

@@ -7,10 +7,10 @@ const config = {
       location: '@plentymarkets/shop-api/server',
       configuration: {
         api: {
-          url: process.env.API_ENDPOINT
-        }
+          url: process.env.API_ENDPOINT,
+        },
       },
-    }
+    },
   },
 };
 

apps/server/tsup.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'tsup'
+import { defineConfig } from 'tsup';
 
 export default defineConfig({
   entry: ['src/index.ts'],
   splitting: false,
   sourcemap: true,
-  clean: true
-})
+  clean: true,
+});

apps/web/.eslintrc.cjs

@@ -32,5 +32,7 @@ module.exports = {
     'unicorn/filename-case': 'off',
     'no-undef': 'off',
     'vue/no-setup-props-destructure': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
   },
 };

apps/web/components/Cookiebar/Cookiebar.vue

@@ -111,7 +111,7 @@
             class="w-full"
             :aria-disabled="false"
             type="button"
-            aria-label="button"
+            :aria-label="$t('CookieBar.Accept All')"
             @click="setAllCookiesState(true)"
           >
             {{ $t('CookieBar.Accept All') }}
@@ -122,14 +122,21 @@
             class="w-full"
             :aria-disabled="false"
             type="button"
-            aria-label="button"
+            :aria-label="$t('CookieBar.Reject All')"
             @click="setAllCookiesState(false)"
           >
             {{ $t('CookieBar.Reject All') }}
           </SfButton>
         </div>
         <div class="flex-1">
-          <SfButton variant="secondary" class="w-full" :aria-disabled="false" type="button" @click="setConsent()">
+          <SfButton
+            variant="secondary"
+            class="w-full"
+            :aria-disabled="false"
+            type="button"
+            :aria-label="$t('CookieBar.Accept Selection')"
+            @click="setConsent()"
+          >
             {{ $t('CookieBar.Accept Selection') }}
           </SfButton>
         </div>
@@ -140,7 +147,7 @@
       v-else
       variant="secondary"
       class="z-10 fixed bottom-2 xl:bottom-2 xl:left-auto xl:right-2 bg-white"
-      aria-label="Cookie control"
+      :aria-label="$t('CookieBar.Cookie Settings')"
       @click="changeVisibilityState"
     >
       <SfIconCheckBox />

apps/web/docs/.vitepress/config.ts

@@ -1,15 +1,15 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from 'vitepress';
 import typedocSidebar from '../reference/composables/typedoc-sidebar.json';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "plentyShop PWA Docs",
-  description: "Documentation of plentyShop PWA",
+  title: 'plentyShop PWA Docs',
+  description: 'Documentation of plentyShop PWA',
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Composables', link: '/reference/composables/' }
+      { text: 'Composables', link: '/reference/composables/' },
     ],
 
     sidebar: [
@@ -19,8 +19,6 @@ export default defineConfig({
       },
     ],
 
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ]
-  }
-})
+    socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }],
+  },
+});

apps/web/docs/index.md

@@ -3,7 +3,7 @@
 layout: home
 
 hero:
-  name: "plentyShop PWA"
+  name: 'plentyShop PWA'
   tagline: Composables documentation
   actions:
     - theme: brand
@@ -21,4 +21,3 @@ features:
   - title: Functions
     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
-

apps/web/lang/de.json

@@ -31,6 +31,7 @@
     "asterixHint": "* markierte Zustimmungen sind erforderlich"
   },
   "CookieBar": {
+    "Cookie Settings": "Cookie-Einstellungen",
     "Privacy Settings": "Datenschutzeinstellungen",
     "More information": "Mehr Informationen",
     "Further Settings": "Weitere Einstellungen",

apps/web/lang/en.json

@@ -31,6 +31,7 @@
     "asterixHint": "* marked consents are required"
   },
   "CookieBar": {
+    "Cookie Settings": "Cookie Settings",
     "Privacy Settings": "Privacy Settings",
     "More information": "More information",
     "Further Settings": "Further Settings",

apps/web/package.json

@@ -12,7 +12,7 @@
     "docs:build": "yarn publish-typedoc && vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "publish-typedoc": "yarn typedoc",
-    "lint": "nuxt typecheck && eslint --ext .vue,.js,.ts .",
+    "lint": "eslint --ext .vue,.js,.ts .",
     "lint:fix": "eslint --ext .vue,.js,.ts . --fix",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
@@ -48,7 +48,7 @@
     "cypress-real-events": "^1.10.0",
     "cypress-wait-until": "^2.0.0",
     "eslint": "^8.50.0",
-    "eslint-plugin-prettier": "5.0.1",
+    "eslint-config-prettier": "^9.0.0",
     "happy-dom": "^12.0.0",
     "nuxt": "^3.6.5",
     "nuxt-vitest": "^0.10.1",

apps/web/pages/index.vue

@@ -2,7 +2,11 @@
   <div class="relative min-h-[600px]">
     <picture>
       <source srcset="/images/homepage-hero-bg.webp" media="(min-width: 768px)" />
-      <img src="/images/homepage-hero-bg-mobile.webp" class="absolute w-full h-full z-[-1] md:object-cover" />
+      <img
+        src="/images/homepage-hero-bg-mobile.webp"
+        alt="Hero mobile background"
+        class="absolute w-full h-full z-[-1] md:object-cover"
+      />
     </picture>
     <div class="md:flex md:flex-row-reverse md:justify-center max-w[1536px] mx-auto md:min-h-[600px]">
       <div class="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
@@ -30,26 +34,24 @@
       <div
         v-for="{ title, image } in categories"
         :key="title"
+        role="img"
+        :aria-label="title"
+        :aria-labelledby="`image-${title}`"
         class="relative flex-col min-w-[140px] max-w-[360px] justify-center group"
       >
-        <a
-          class="absolute w-full h-full z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
-          href="#"
-          :aria-label="title"
-        />
         <img
           class="rounded-full bg-neutral-100 group-hover:shadow-xl group-active:shadow-none"
           :src="image"
           :alt="title"
           width="360"
           height="360"
         />
-        <div class="flex justify-center">
-          <a
-            class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:underline group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal"
+        <div :id="`image-${title}`" class="flex justify-center">
+          <div
+            class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal"
           >
             {{ title }}
-          </a>
+          </div>
         </div>
       </div>
     </div>

docs/changelog/changelog_de.md

@@ -13,6 +13,7 @@
 ### Geändert
 
 - Die Cookiebar Logik wurde überarbeitet.
+- Die ARIA-Labels von Schaltflächen der Cookiebar wurden übersetzt.
 - Die Sprachauswahl wurde überarbeitet und zeigt jetzt Länderflaggen an.
 - Die Checkout-Seite wurde überarbeitet, um weniger Daten zu laden.
 
@@ -22,7 +23,7 @@
 - Beim Unterschreiten der Mindestkaufpreisanforderung wurde beim Bezahlvorgang kein Fehler ausgegeben.
 - UI Benachrichtigungen führten zu einer Layoutverschiebung für den Benutzer.
 - Kategorien wurden in der falschen Sprache geladen, wenn die Website zum ersten Mal mit SSR gerendert wurde.
-– Die Variationsauswahl hat die Variation nicht aus der URL entfernt, wenn die Basisvariation ausgewählt wurde.
+  – Die Variationsauswahl hat die Variation nicht aus der URL entfernt, wenn die Basisvariation ausgewählt wurde.
 - Produkte auf der Bestellbestätigungsseite haben nicht auf das korrekte Produkt verlinkt.
 
 ## v1.1.0 (03.11.2023) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.0.0...v1.1.0" target="_blank" rel="noopener"><b>Übersicht aller Änderungen</b></a>

docs/changelog/changelog_en.md

@@ -13,6 +13,7 @@
 ### Changed
 
 - Reworked logic of cookie bar.
+- Added ARIA label translations for cookie bar buttons.
 - The language select has been refactored and is now showing country flags.
 - Refactored the checkout page to load less data.
 

docs/config/middleware.md

@@ -15,6 +15,7 @@ Create a `.env` file in the `apps/server` directory with the following content:
 ```
 API_ENDPOINT=https://mevofvd5omld.c01-14.plentymarkets.com
 ```
+
 Replace the API_ENDPOINT url with the shop domain of your plentyShop.
 
 In the local development environment, the app connects to the provided URL. In production, it connects to the plentysystems system that hosts the app.

docs/deployment/deployment.md

@@ -32,10 +32,10 @@ Creating the application adds a new table entry. In the next part, you'll need t
 5. Fill in the information according to the table below.
 6. Repeat steps 4-5 for the second secret.
 
-| Name      | Value |
-| ----------- | ----------- |
-| `URL_ENDPOINT` | **Upload Endpoint** |
-| `URL_ENDPOINT_TOKEN` | **Access key** |
+| Name                 | Value               |
+| -------------------- | ------------------- |
+| `URL_ENDPOINT`       | **Upload Endpoint** |
+| `URL_ENDPOINT_TOKEN` | **Access key**      |
 
 ### System URL
 
@@ -46,8 +46,8 @@ Creating the application adds a new table entry. In the next part, you'll need t
 5. Click on **New repository variable**.
 6. Fill in the information according to the table below.
 
-| Name      | Value |
-| ----------- | ----------- |
+| Name      | Value            |
+| --------- | ---------------- |
 | `API_URL` | Your shop domain |
 
 ### Upload
@@ -75,7 +75,6 @@ The workflow takes several minutes to complete. You can monitor the progress in
 The activation makes the application reachable on the configured domain.
 It can take up to 1 hour for the changes to take effect.
 
-
 ## Preview
 
 1. Log into your plentysystems system.

package.json

@@ -16,7 +16,8 @@
     "start": "turbo run start",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint:fix",
-    "format": "prettier --write \"**/*.{ts,vue,css,scss,md}\"",
+    "format": "prettier --check \"**/*.{ts,vue,css,scss,md}\"",
+    "format:fix": "prettier --write \"**/*.{ts,vue,css,scss,md}\"",
     "clean": "npx rimraf ./**/node_modules && rm yarn.lock",
     "clean:hard": "npx rimraf ./**/node_modules && npx rimraf ./**/lib && rm yarn.lock && npx rimraf ./**/.turbo && npx rimraf ./**/.nuxt",
     "test": "turbo run test",