Merge pull request #174 from hubblecommerce/rc2.6

Release Candidate 2.6

__tests__/module/fixture/locales/platformLanguages.json

@@ -0,0 +1,8 @@
+[
+    {
+        "route": "de",
+        "id": "2fbb5fe2e29a4d70aa5854ce7ce3e20b",
+        "code": "de-DE",
+        "name": "Deutsch"
+    }
+]

__tests__/module/fixture/nuxt.config.ts

@@ -10,6 +10,15 @@ export default defineNuxtConfig({
     hubble: {
         redirectDefaultLanguage: true
     },
+    i18n: {
+        locales: [
+            'en',
+            'de'
+        ],
+        defaultLocale: 'en',
+        strategy: 'prefix_and_default',
+        detectBrowserLanguage: false
+    },
     runtimeConfig: {
         public: {
             testPluginConfig2: 'Plugin config 2 overridden by nuxt.config'

cypress/e2e/module.cy.ts

@@ -1,4 +1,8 @@
 describe('TailwindCSS and DaisyUI integration', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080)
+    })
+
     it('apply tailwind utility classes', () => {
         cy.visit('/')
         cy.get('#tailwind-utility')

cypress/e2e/platform-sw.cy.ts

@@ -5,6 +5,10 @@ describe('Platform: Shopware', () => {
     const email = customFaker.internet.exampleEmail()
     const pw = customFaker.internet.password()
 
+    beforeEach(() => {
+        cy.viewport(1920, 1080)
+    })
+
     it('limits a listing', () => {
         cy.visit('/')
         cy.waitForHydration()
@@ -42,7 +46,7 @@ describe('Platform: Shopware', () => {
         cy.waitForHydration()
 
         // click search button in customer navigation
-        cy.get('.navbar-end > div:nth-child(2)').click()
+        cy.get('.navbar-end > div:nth-child(3)').click()
         cy.get('.drawer-side .form-control input').type('product')
         cy.get('.drawer-side .grid.grid-cols-2.gap-2').children().should('have.length.at.least', 1)
 
@@ -182,10 +186,10 @@ describe('Platform: Shopware', () => {
         // click on customer navigation icon
         cy.visit('/')
         cy.waitForHydration()
-        cy.get('.navbar-end > div:nth-child(3) .btn.btn-ghost').click()
+        cy.get('.navbar-end > div:nth-child(4) .btn.btn-ghost').click()
 
         // click logout button in customer navigation
-        cy.get('.navbar-end > div:nth-child(3) .menu.menu-compact li:last').click()
+        cy.get('.navbar-end > div:nth-child(4) .menu.menu-compact li:last').click()
         cy.url().should('include', 'customer/login')
     })
 
@@ -195,8 +199,8 @@ describe('Platform: Shopware', () => {
         // open customer/account via customer navigation
         cy.visit('/')
         cy.waitForHydration()
-        cy.get('.navbar-end > div:nth-child(3) .btn.btn-ghost').click()
-        cy.get('.navbar-end > div:nth-child(3) .menu.menu-compact li:nth-child(2)').click()
+        cy.get('.navbar-end > div:nth-child(4) .btn.btn-ghost').click()
+        cy.get('.navbar-end > div:nth-child(4) .menu.menu-compact li:nth-child(2)').click()
 
         // change account data
         cy.get('#firstName').clear().type('e2eFirstname')

cypress/support/commands.ts

@@ -54,12 +54,7 @@ Cypress.Commands.add('waitForHydration', (timeout = 10000) => {
 })
 
 Cypress.Commands.add('selectFirstCategory', () => {
-    if (Cypress.config('viewportWidth') < Cypress.env('mobileViewportWidthBreakpoint')) {
-        cy.get('.navbar-start .dropdown .btn-ghost').click()
-        cy.get('.menu.menu-compact > li:first > details > summary > a').click()
-    } else {
-        cy.get('.menu.menu-horizontal > li:first > details > summary > a').click()
-    }
+    cy.get('.menu.menu-horizontal > li:first > details > summary > a').click()
 })
 
 Cypress.Commands.add('selectRandomProduct', () => {
@@ -149,7 +144,7 @@ Cypress.Commands.add('loginCustomer', (email: string, pw: string) => {
     cy.visit('/')
     cy.waitForHydration()
     // click on customer navigation icon
-    cy.get('.navbar-end > div:nth-child(3) > a').click()
+    cy.get('.navbar-end > div:nth-child(4) > a').click()
 
     cy.get('form').within(($form) => {
         cy.get('#username').type(email)
@@ -162,5 +157,5 @@ Cypress.Commands.add('loginCustomer', (email: string, pw: string) => {
     cy.wait('@apiGetWishlist')
 
     // wait for logged state isset in app
-    cy.get('.navbar-end > div:nth-child(3) .text-success svg')
+    cy.get('.navbar-end > div:nth-child(4) .text-success svg')
 })

docs/pwa/architecture/preinstalledmodules.md

@@ -12,7 +12,8 @@ These modules are automatically installed and [configured](/pwa/configuration.ht
 - sass
 
 ### Multilanguage
-- @intlify/nuxt3
+- @intlify/nuxt3 (deprecated since 2.6.0)
+- @nuxtjs/i18n
 
 ### State Management
 - @pinia/nuxt

docs/pwa/shopware/mulitlanguage.md

@@ -1,17 +1,21 @@
 # i18n
 
-For translations the module @intlify/nuxt3 is used.
+For translations the module [@nuxtjs/i18n](https://i18n.nuxtjs.org/) is used.
+
+::: warning
+Since @hubblecommerce/hubble-frontend-pwa version 2.6.0 @intlify/nuxt3 was replaced by @nuxtjs/i18n.
+:::
+
 The middleware `change-vue-locale.global.ts` sets the language depending on the
 current localisation key of the url.
 
 Following files are related to the translation process:
 ```text
 /components
     /misc
-        /MiscDefineLink.ts
         /MiscLink.vue
 /locales
-    /availableLocales.json
+    /availableLocales.json (deprecated since 2.6.0)
     /platformLanguages.json
 /middleware
     /change-vue-locale.global.ts
@@ -21,12 +25,24 @@ Following files are related to the translation process:
             /sw-languages.js
         /composables
             /useLocalisation.ts
+/theme
+    /components
+        /layout
+            /LayoutLanguageSwitch.vue
 ```
 
 ### Configuration
+The module is preinstalled and registered, so you can configure it by using the i18n property in nuxt.config root 
+right away. 
+See the official [@nuxtjs/i18n documentation](https://i18n.nuxtjs.org/docs/options) for all possible module options.
+
 hubble sets some default configuration for intlify and vueI18n, to override them, they
 have to be set via hubble module options.
 
+::: warning
+Since @hubblecommerce/hubble-frontend-pwa version 2.6.0 @intlify/nuxt3 was replaced by @nuxtjs/i18n.
+:::
+
 ```js
 export default defineNuxtConfig({
     hubble: {
@@ -84,6 +100,9 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ```
 
 ### `locales/availableLocales.json`
+::: warning
+Deprecated since @hubblecommerce/hubble-frontend-pwa version 2.6.0
+:::
 Contains an array of language keys, used to generate localised routes of all available pages.
 The first language is set as the default / fallback language.
 
@@ -97,7 +116,7 @@ To connect a localised route to a platform language, add a "route" to the object
 ```js
 [
     {
-        "route": "de", // <= key from locales/availableLocales.json
+        "route": "de", // <= key from nuxt.config.ts -> i18n -> locales
         "id": "2fbb5fe2e29a4d70aa5854ce7ce3e20b",
         "code": "de-DE",
         "name": "Deutsch"
@@ -144,13 +163,27 @@ const { t } = useI18n()
 1. Add the required language in Admin -> Settings -> Languages
 2. Add the new language to your Sales-Channel in Sales-Channel -> Base Settings -> Languages
 3. Assign the language to an existing domain of your Sales-Channel or create a new domain
-4. Create a `/locales/availableLocales.json` file and define the languages you want to provide
-5. Download and save all languages available for your Sales-Channel from Shopware by execute this script in your projects root dir:
+4. Create a `/locales/availableLocales.json` file and define the languages you want to provide (deprecated since 2.6.0)
+5. Set @nuxtjs/i18n module options in nuxt.config.ts e.g.:
+```typescript
+export default defineNuxtConfig({
+    i18n: {
+        locales: [
+            'en',
+            'de'
+        ],
+        defaultLocale: 'en',
+        strategy: 'prefix_and_default',
+        detectBrowserLanguage: false
+    }
+})
+```
+6. Download and save all languages available for your Sales-Channel from Shopware by execute this script in your projects root dir:
 ```shell
 npm run hubble dev:sw sw-languages
 ```
-6. Edit the created `locales/platformLanguages.json` file and assign an available locale to
-   a downloaded language by adding a "route" key and the language key as a value. 
+7. Edit the created `locales/platformLanguages.json` file and assign an available locale to
+   a downloaded language by adding a "route" key and the language key (which you set in the nuxt.config.ts -> i18n -> locales) as a value. 
 
 ## Translation CSV export / import