Merge branch 'main' into feat/robots_for_category_page

apps/server/middleware.config.ts

@@ -1,11 +1,13 @@
 import dotenv from 'dotenv';
 import * as path from 'path';
-
 dotenv.config({
   path: path.resolve(__dirname, '../web/.env'),
 });
 
 const config = {
+  logger: {
+    verbosity: process.env.LOG_LEVEL ?? 'info',
+  },
   integrations: {
     plentysystems: {
       location: '@plentymarkets/shop-api/server',

apps/server/package.json

@@ -12,14 +12,12 @@
   },
   "dependencies": {
     "@types/cors": "^2.8.17",
-    "@vue-storefront/middleware": "3.10.0",
+    "@vue-storefront/middleware": "5.3.2",
     "consola": "^3.2.3",
     "cors": "^2.8.5",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.2"
+    "dotenv": "^16.4.5"
   },
   "devDependencies": {
-    "@types/express": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-prettier": "5.1.3",
     "nodemon": "^3.1.4",

apps/server/src/index.ts

@@ -1,8 +1,6 @@
 import { createServer } from '@vue-storefront/middleware';
 import consola from 'consola';
-import cors from 'cors';
 import config from '../middleware.config';
-import * as express from 'express';
 
 const useIPV6 = process.env.USE_IPV6 === 'true';
 
@@ -19,29 +17,28 @@ const checkEnvironments = (integrations: any) => {
   }
 };
 
-const setCorsMiddleware = (app: any) => {
-  const CORS_MIDDLEWARE_NAME = 'corsMiddleware';
-  const corsMiddleware = app._router.stack.find((middleware: any) => middleware.name === CORS_MIDDLEWARE_NAME);
-  corsMiddleware.handle = cors({
-    origin: ['http://localhost:3000', ...(process.env.MIDDLEWARE_ALLOWED_ORIGINS?.split(',') ?? [])],
-    credentials: true,
-  });
-};
-
-const setJsonMiddleware = (app: any) => {
-  const jsonMiddleware = app._router.stack.find((layer: any) => layer.name === 'jsonParser');
-  if (jsonMiddleware) {
-    jsonMiddleware.handle = express.json({ limit: '13.5mb' }); // 13,3mb for 10mb upload file
-  }
-};
-
 (async () => {
-  const app = await createServer({ integrations: config.integrations });
+  const app = await createServer(
+    { integrations: config.integrations },
+    {
+      cors: {
+        origin: 'http://localhost:3000',
+        credentials: true,
+      },
+      bodyParser: {
+        limit: '50mb',
+      },
+      fileUpload: {
+        enabled: true,
+        maxFileSize: 14_155_776, // 13,3mb for 10mb upload file
+        maxFiles: 5,
+      },
+    },
+  );
+
   const host = useIPV6 ? '::' : '0.0.0.0';
   const port = Number(process.argv[3]) || 8181;
 
-  setCorsMiddleware(app);
-  setJsonMiddleware(app);
   checkEnvironments(config.integrations);
 
   app.listen(port, host, () => {

apps/server/tsconfig.json

@@ -19,8 +19,8 @@
     "strict": true,
     "target": "ES2019",
     "types": [
-      "@types/express",
-      "jest"
+      "jest",
+      "@vue-storefront/middleware",
     ],
     "rootDir": ".",
     "outDir": "lib"

apps/web/.env.example

@@ -9,3 +9,4 @@ ENABLE_QUICK_CHECKOUT_TIMER=1
 NEWSLETTERFORM=true
 NEWSLETTERFORMNAMES=false
 DEFAULT_FEEDBACK_ITEMS_PER_PAGE=10
+LOG_LEVEL=info

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

@@ -48,11 +48,19 @@ export class EditorObject extends PageObject {
   get bottomBlockButton(){
     return cy.getByTestId('bottom-add-block')
   }
-  
+
   get deleteBlockButton(){
     return cy.getByTestId('delete-block-button')
   }
 
+  get recommendedProducts() {
+    return cy.getByTestId('product-slider');
+  }
+
+  get languageSwitcher() {
+    return cy.getByTestId('editor-language-select');
+  }
+
   togglePreviewMode() {
     this.editPreviewButton.should('be.enabled').click();
     this.editPreviewButton.should('contain.text', 'Preview');
@@ -151,5 +159,41 @@ export class EditorObject extends PageObject {
       this.blockWrapper.should('have.length', initialLength - 1);
     });
    }
+
+   recommendedProductsExist() {
+      this.recommendedProducts.should('exist');
+   }
+
+   switchLanguage() {
+    cy.intercept('/plentysystems/getCart').as('getCart');
+    cy.intercept('/plentysystems/getCategoryTree').as('getCategoryTree');
+    cy.intercept('/plentysystems/getFacet').as('getFacet');
+
+    this.editPreviewButton.click();
+    this.languageSwitcher.should('exist');
+    this.languageSwitcher.select('de');
+    cy.wait(['@getCart', '@getCategoryTree', '@getFacet']);
+    this.headline.first().should('have.text', 'Sound auf höchstem Niveau');
+  }
+
+  addBlockTop() {
+    this.blockWrapper.then(initialBlocks => {
+      const initialLength = initialBlocks.length;
+      this.topBlockButton.invoke('removeClass', 'opacity-0');
+      this.topBlockButton.first().should('exist').click();
+      cy.wait(1000);
+      this.blockWrapper.should('have.length', initialLength + 1);
+    });
+  }
+
+  addBlockBottom() {
+    this.blockWrapper.then(initialBlocks => {
+      const initialLength = initialBlocks.length;
+      this.bottomBlockButton.invoke('removeClass', 'opacity-0');
+      this.bottomBlockButton.first().should('exist').click();
+      cy.wait(1000);
+      this.blockWrapper.should('have.length', initialLength + 1);
+    });
+  }
 }
 

apps/web/__tests__/test/editor/blocks.cy.ts

@@ -3,14 +3,19 @@ import { EditorObject } from '../../support/pageObjects/EditorObject';
 
 describe('Blocks', () => {
     const editor = new EditorObject();
-  
+
     beforeEach(() => {
       cy.visitAndHydrate(paths.home);
     });
-  
+
     it('should ensure correct block logic and template', () => {
         editor.buttonsExistWithGroupClasses();
         editor.deleteBlock();
+        editor.addBlockTop();
+        editor.addBlockBottom();
+    });
+
+    it('should check for recommended products', () => {
+      editor.recommendedProductsExist();
     });
   });
-

apps/web/__tests__/test/editor/editMode.cy.ts

@@ -17,4 +17,9 @@ describe('EditMode', () => {
     editor.replaceEditorContent(JSON.stringify(newContent, null, 2));
     editor.checkEditorChanges();
   });
+
+  it('should switch language and check editor content', () => {
+     editor.switchLanguage();
+  });
+
 });

apps/web/components/CategoryFilters/Filter.vue

@@ -60,7 +60,7 @@
           </template>
           {{ $t('apply') }}
         </UiButton>
-        <UiButton type="reset" @click="resetPriceFilter" class="h-10" variant="secondary">
+        <UiButton type="reset" @click="resetPriceFilter" class="h-10" variant="secondary" :aria-label="$t('clear')">
           <SfIconClose />
         </UiButton>
       </div>

apps/web/components/CategoryPageContent/CategoryPageContent.vue

@@ -41,7 +41,7 @@
               :rating="productGetters.getAverageRating(product, 'half')"
               :image-url="addModernImageExtension(productGetters.getCoverImage(product))"
               :image-alt="
-                productImageGetters.getImageAlternate(productImageGetters.getFirstImage(product)) ||
+                'alt-' + productImageGetters.getImageAlternate(productImageGetters.getFirstImage(product)) ||
                 productGetters.getName(product) ||
                 ''
               "

apps/web/components/OrderSummary/__tests__/ContactInformation.spec.ts

@@ -56,7 +56,8 @@ const cart: Cart =   {
       "setComponents": [],
       "itemType": 1
     }
-  ]
+  ],
+  "maxDeliveryDays": []
 };
 
 describe('<OrderSummary />', () => {

apps/web/components/PageBlock/PageBlock.vue

@@ -14,7 +14,7 @@
     <button
       v-if="disableActions && isPreview"
       @click.stop="addNewBlock(index, -1)"
-      class="z-10 absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-[18px] p-[6px] bg-[#538aea] text-white opacity-0 hover:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
+      class="z-[0] md:z-[0] lg:z-[10] absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-[18px] p-[6px] bg-[#538aea] text-white opacity-0 hover:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
       :class="[{ 'opacity-100': isClicked && clickedBlockIndex === index }]"
       data-testid="top-add-block"
     >
@@ -41,7 +41,7 @@
     <button
       v-if="disableActions && isPreview"
       @click.stop="addNewBlock(index, 1)"
-      class="z-10 absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rounded-[18px] p-[6px] bg-[#538aea] text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100"
+      class="z-[0] md:z-[0] lg:z-[10] absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rounded-[18px] p-[6px] bg-[#538aea] text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100"
       :class="[{ 'opacity-100': isClicked && clickedBlockIndex === index }]"
       data-testid="bottom-add-block"
     >

apps/web/components/ShippingMethod/ShippingMethod.vue

@@ -32,6 +32,15 @@
             <span>{{ shippingProviderGetters.getShippingMethodName(method) }}</span>
             <span class="ml-auto">{{ getShippingAmount(shippingProviderGetters.getShippingAmount(method)) }}</span>
           </div>
+          <div v-if="getDeliveryDays(shippingProviderGetters.getParcelServicePresetId(method))">
+            <span class="text-sm">
+              {{
+                t('shippingMethod.maxDeliveryDays', {
+                  days: getDeliveryDays(shippingProviderGetters.getParcelServicePresetId(method)),
+                })
+              }}</span
+            >
+          </div>
         </SfListItem>
       </ul>
 
@@ -53,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { AddressType, shippingProviderGetters } from '@plentymarkets/shop-api';
+import { AddressType, shippingProviderGetters, cartGetters } from '@plentymarkets/shop-api';
 import { SfIconWarning, SfListItem, SfRadio } from '@storefront-ui/vue';
 import { type CheckoutShippingEmits, type ShippingMethodProps } from './types';
 
@@ -74,6 +83,10 @@ const showShippingPrivacy = computed(
     shippingProviderGetters.getDataPrivacyAgreementHint(selectedMethod.value),
 );
 
+const getDeliveryDays = (method: string) => {
+  return cartGetters.getMaxDeliveryDays(cart.value, Number(method));
+};
+
 const updateShippingMethod = (shippingId: string) => {
   if (disabled) return;
   radioModel.value = shippingId;

apps/web/components/ui/BlockActions/BlockActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute z-50 right-0 top-0 flex items-center space-x-4 border border-[#538AEA] bg-white p-2 shadow-md"
+    class="absolute z-[0] md:z-[1] lg:z-[50] right-0 top-0 flex items-center space-x-4 border border-[#538AEA] bg-white p-2 shadow-md"
     data-testid="edit-block-actions"
   >
     <button @click="triggerEdit" class="text-black hover:bg-gray-100 p-1 rounded" data-testid="open-editor-button">

apps/web/components/ui/LanguageEditor/LanguageEditor.vue

@@ -16,6 +16,7 @@
         "
         :disabled="isEditing || disableActions"
         :class="{ 'cursor-not-allowed': isEditing || disableActions }"
+        data-testid="editor-language-select"
       >
         <option v-for="locale in localeCodes" :key="locale" :value="locale" class="font-medium text-sm md:text-base">
           {{ $t(`lang.${locale}`) }}

apps/web/components/ui/MediaCard/MediaCard.vue

@@ -4,11 +4,7 @@
       <img :src="image" :alt="alt" width="728" height="485" class="w-full h-auto object-cover" />
     </div>
 
-    <div
-      v-if="text && text.trim() !== ''"
-      :class="['w-full no-preflight', textWidthClass, textAlignmentClass]"
-      v-html="text"
-    ></div>
+    <div v-if="text && text.trim() !== ''" :class="['w-full no-preflight', textWidthClass]" v-html="text"></div>
   </div>
 </template>
 
@@ -40,6 +36,6 @@ const showComponent = computed(() => {
 const textWidthClass = computed(() => {
   return !props.image || props.image.trim() === '' ? 'w-full' : 'md:w-1/2';
 });
+
 const positionClass = computed(() => (props.alignment === 'right' ? 'md:flex-row-reverse' : 'md:flex-row'));
-const textAlignmentClass = computed(() => (!props.image || props.image.trim() === '' ? 'text-center' : ''));
 </script>

apps/web/components/ui/Toolbar/Toolbar.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="sticky top-0 bg-white z-[1] md:z-[1] lg:z-[100]" data-testid="edit-mode-toolbar">
+  <div class="sticky top-0 bg-white z-[1] md:z-[10] lg:z-[100]" data-testid="edit-mode-toolbar">
     <div class="relative flex items-center pr-5">
       <UiBrandLogo />
 
       <div class="absolute left-1/2 transform -translate-x-1/2">
-        <UiLanguageEditor v-if="experimentalAddBlock" />
+        <UiLanguageEditor />
       </div>
       <div class="ml-auto flex space-x-2">
         <button
@@ -61,7 +61,6 @@ const { loading } = useHomepage();
 const { updatePageTemplate } = useUpdatePageTemplate();
 
 const homepageCategoryId = runtimeConfig.public.homepageCategoryId;
-const experimentalAddBlock = runtimeConfig.public.experimentalAddBlock;
 
 const isLocalTemplate = () => typeof homepageCategoryId === 'number';
 

apps/web/composables/useHomepage/homepageTemplateDataDe.json

@@ -43,7 +43,7 @@
     },
     {
       "name": "UiMediaCard",
-      "options":     {
+      "options": {
         "text": "<div class='flex flex-col mt-5 sm:mt-20 mt-0 sm:p-0 p-5 text-center sm:text-left'><span class='text-xl font-bold mb-2'>Die Zukunft des Klangs</span><h2 class='text-2xl font-semibold mb-4'>Das neue Hörerlebnis</h2><p class='typography-text-sm md:typography-text-lg mb-6 padding-right-desktop'>Unsere Kopfhörer-Kollektion setzt neue Maßstäbe in Sachen Audio-Präzision. Mit tiefem Bass, klaren Höhen und einem eindrucksvollen Klangbild bieten diese Kopfhörer ein einzigartiges Hörerlebnis für jedes Musikgenre. Mit Ihrer Kombination aus modernem Design, höchstem Komfort und neuester Technologie sind sie die perfekte Wahl für alle, die keine Kompromisse bei der Klangqualität eingehen möchten.</p><ul class='list-disc list-inside typography-text-sm md:typography-text-lg '><li>Premium-Sound in Studioqualität</li><li>Elegant und formschön</li><li>Lange Akkulaufzeit</li><li>Kabellose Verbindung via Bluetooth</li></ul></div>",
         "image": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
         "alt": "Headphones",
@@ -56,7 +56,7 @@
     },
     {
       "name": "NewsletterSubscribe",
-      "options":  {
+      "options": {
         "email": "E-Mail",
         "firstName": "Vorname",
         "heading": "Abonnieren Sie unseren Newsletter",
@@ -68,9 +68,7 @@
       }
     }
   ],
-    "meta": {
-        "isDefault": null
-    }
+  "meta": {
+    "isDefault": null
+  }
 }
-
-

apps/web/composables/useHomepage/useHomepage.ts

@@ -38,6 +38,16 @@ export const useHomepage: UseHomepageDataReturn = () => {
     state.value.loading = false;
   };
 
+  watch(
+    () => currentLocale.value,
+    // eslint-disable-next-line unicorn/no-keyword-prefix
+    async (newLocale) => {
+      // eslint-disable-next-line unicorn/no-keyword-prefix
+      currentLocale.value = newLocale;
+      await fetchPageTemplate();
+    },
+  );
+
   watch(
     () => state.value.data,
     (updatedData) => {

apps/web/lang/de.json

@@ -898,7 +898,8 @@
     "free": "Kostenlos",
     "heading": "Versandart",
     "noMethodsAvailable": "Es sind keine Versandarten verfügbar. Bitte kontaktieren Sie den Webshop-Anbieter.",
-    "showDataPrivacyAgreementHint": "Ich bin damit einverstanden, dass meine E-Mail-Adresse bzw. meine Telefonnummer an {parcelServiceInformation} weitergegeben wird, damit der Paketdienstleister vor der Zustellung der Ware zum Zwecke der Abstimmung eines Liefertermins per E-Mail oder Telefon Kontakt mit mir aufnehmen bzw. Statusinformationen zur Sendungszustellung übermitteln kann. Meine diesbezüglich erteilte Einwilligung kann ich jederzeit widerrufen"
+    "showDataPrivacyAgreementHint": "Ich bin damit einverstanden, dass meine E-Mail-Adresse bzw. meine Telefonnummer an {parcelServiceInformation} weitergegeben wird, damit der Paketdienstleister vor der Zustellung der Ware zum Zwecke der Abstimmung eines Liefertermins per E-Mail oder Telefon Kontakt mit mir aufnehmen bzw. Statusinformationen zur Sendungszustellung übermitteln kann. Meine diesbezüglich erteilte Einwilligung kann ich jederzeit widerrufen",
+    "maxDeliveryDays": "Lieferung in {days} Tagen"
   },
   "showAllReviews": "Alle Bewertungen anzeigen",
   "showLess": "Weniger anzeigen",