Merge branch 'main' into feature/category-review-display

.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/build-and-deploy.yaml

@@ -1,9 +1,10 @@
 name: Deploy
 on:
-  push:
-    branches:
-      - main
-      - force/*
+  # push:
+  #   branches:
+  #     - main
+  #     - force/*
+  workflow_dispatch:
 
 jobs:
   configure:

.github/workflows/conventional-pr-name.yml

@@ -15,6 +15,9 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:

.github/workflows/lint.yml

@@ -20,6 +20,9 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:
@@ -44,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

.github/workflows/run-lhci-test.yml

@@ -19,6 +19,9 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:

.github/workflows/e2e-tests.yaml → .github/workflows/tests.yaml

@@ -1,4 +1,4 @@
-name: e2e-tests
+name: tests
 
 on:
   workflow_dispatch:
@@ -9,13 +9,16 @@ permissions:
   packages: read
 
 jobs:
-  e2e-tests:
+  tests:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:
@@ -36,24 +39,30 @@ jobs:
             yarn config set npmScopes.plentymarkets.npmAuthToken $NODE_AUTH_TOKEN
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_BASE_URL: 'http://${{ env.ip_address }}:3000'
-          PAYPAL_EMAIL: ${{ secrets.PAYPAL_EMAIL }}
-          PAYPAL_PASSWORD: ${{ secrets.PAYPAL_PASSWORD }}
-
-      - name: Setup middleware env
-        run: |
-            touch apps/server/.env
-            echo API_ENDPOINT=https://mevofvd5omld.c01-14.plentymarkets.com >> apps/server/.env
 
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: yarn --immutable
 
-      - name: Build application
-        run: yarn build
+      - name: Unit tests
+        run: |
+          touch apps/server/.env
+          echo API_ENDPOINT=https://mevofvd5omld.c01-14.plentymarkets.com >> apps/server/.env
+          pushd ${{ github.workspace }}/apps/server/
+          yarn start &
+          pushd ${{ github.workspace }}/apps/web/
+          yarn test:coverage i18n.spec.ts
+          pushd -0 && dirs -c
 
-      - uses: cypress-io/github-action@v5
+      - name: E2E tests
+        uses: cypress-io/github-action@v5
         with:
+          build: yarn build
           command: yarn test:cypress
+          install: false
+        env:
+          PAYPAL_EMAIL: ${{ secrets.PAYPAL_EMAIL }}
+          PAYPAL_PASSWORD: ${{ secrets.PAYPAL_PASSWORD }}
+
       - uses: actions/upload-artifact@v3
         if: failure()
         with:

.github/workflows/upload.yml

@@ -24,6 +24,9 @@ jobs:
         with:
           ref: ${{ inputs.tag-version }}
 
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:

.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "main": "./src/index.ts",
   "license": "MIT",
   "scripts": {

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/__tests__/support/commands.ts

@@ -55,4 +55,4 @@ Cypress.Commands.add('visitAndHydrate', (url, options) => {
   cy.visit(url, options);
   // Wait until app is hydrated
   cy.get('body.hydrated');
-});
+});

apps/web/__tests__/support/pageObjects/CategoryObject.ts

@@ -1,7 +1,7 @@
 
 export class CategoryPageObject {
   get filterClickShouldReloadCategory() {
-    cy.intercept('http://localhost:8181/plentysystems/getFacet').as('getFacet');
+    cy.intercept('/plentysystems/getFacet').as('getFacet');
     cy.getByTestId('category-filter-0').first().click();
     cy.wait('@getFacet').its('response.statusCode').should('eq', 200)
     return this;

apps/web/__tests__/support/pageObjects/LanguageSelectObject.ts

@@ -0,0 +1,29 @@
+export class LanguageSelectObject {
+  checkIfModalIsOpen() {
+    cy.getByTestId('languageSelectList').first().should('be.visible');
+    return this;
+  }
+
+  checkOptions() {
+    cy.getByTestId('languageOption-en').should('be.visible');
+    cy.getByTestId('languageOption-de').should('be.visible');
+    // for consistency should also check for flags svg present
+    return this;
+  }
+
+  openModal() {
+    cy.getByTestId('open-languageselect-button').first().click();;
+    return this;
+  }
+
+  checkLanguageSelected(locale: string) {
+    cy.getCookie('vsf-locale').should('have.property', 'value', locale);
+
+    return this;
+  }
+
+  selectOption(option: string) {
+    cy.getByTestId(`languageOption-${option}`).first().click();;
+    return this;
+  }
+}

apps/web/__tests__/support/pageObjects/ProductListPageObject.ts

@@ -70,7 +70,7 @@ export class ProductListPageObject {
   }
 
   addToCart() {
-    this.products.first().find(`[data-testid="button"]`).click();
+    this.products.find(`[data-testid="add-to-basket-short"]`).first().click();
     return this;
   }