Merge branch 'main' into customization/blaze_slider

apps/web/__tests__/support/failOnError.ts

@@ -10,7 +10,7 @@ Cypress.on("window:before:load", (win) => {
   })
 });
 
-Cypress.on('uncaught:exception', (err, runnable) => {
+Cypress.on('uncaught:exception', (err) => {
   if (ignoreErrors.some(ignore => err.message.includes(ignore) || err.stack?.includes(ignore))) {
     return false;
   }

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

@@ -46,7 +46,7 @@ export class CartPageObject extends PageObject {
   }
 
   checkCart() {
-    cy.getFixture('products').then((fixture) => {
+    cy.getFixture('products').then(() => {
       this.assertCartPreviewElements();
     });
   }

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

@@ -1,10 +1,14 @@
 import { PageObject } from "./PageObject";
 
 export class CategoryPageObject extends PageObject {
-  get filterClickShouldReloadCategory() {
+  get categoryFilter() {
+    return cy.getByTestId('category-filter-0');
+  }
+
+  filterClickShouldReloadCategory = () => {
     cy.intercept('/plentysystems/getFacet').as('getFacet');
-    cy.getByTestId('category-filter-0').first().click();
+
+    this.categoryFilter.first().click();
     cy.wait('@getFacet').its('response.statusCode').should('eq', 200)
-    return this;
   }
 }

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

@@ -21,7 +21,7 @@ export class CookieBarObject extends PageObject {
   }
 
   checkExternalScript() {
-    return cy.document().then((doc) => {
+    return cy.document().then(() => {
       document.head.innerHTML.includes('test-cookie-external-script.js')
     })
   }

apps/web/__tests__/test/feature/languageSelect.cy.ts

@@ -66,16 +66,12 @@ describe('Feature: Language Selector', () => {
   });
 
   function setMobileState(
-      url: string = paths.home,
       width: number = 390,
       height: number = 844,
-      acceptCookie = true
   ) {
     cy.visitAndHydrate(paths.home);
     cy.viewport(width, height)
-
-    if (acceptCookie) {
-      cookieBar.acceptAll();
-    }
+
+    cookieBar.acceptAll();
   }
 });

apps/web/__tests__/test/smoke/categoryPage.cy.ts

@@ -14,7 +14,7 @@ describe('Smoke: Category Page', () => {
     // This way we are independet from the language and the url.
     cy.visitAndHydrate('/living-room');
 
-    category.filterClickShouldReloadCategory;
+    category.filterClickShouldReloadCategory();
   })
 
   it('[smoke] Category should load DE SSR on first visit where there are no browser cookies', () => {

apps/web/components/Editor/Editor.vue

@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import { SfIconCancel } from '@storefront-ui/vue';
+import { watchDebounced } from '@vueuse/core';
 
 const props = defineProps<{
   block: Block | null;
@@ -37,17 +38,19 @@ const { jsonText, errorMessage, lineCount, textarea, lineNumberContainer, syncSc
   JSON.stringify(props.block, null, 2),
 );
 
-watch(
-  () => props.block,
-  (updatedData) => {
-    jsonText.value = JSON.stringify(updatedData, null, 2);
-  },
-  { immediate: true, deep: true },
-);
-
 const closeEditor = () => {
   emit('update', props.index, JSON.parse(jsonText.value));
   const { isEditing } = useEditor();
   isEditing.value = false;
 };
+
+watchDebounced(
+  () => jsonText.value,
+  () => {
+    if (jsonText.value !== '') {
+      emit('update', props.index, JSON.parse(jsonText.value));
+    }
+  },
+  { debounce: 100 },
+);
 </script>

apps/web/components/ProductRecommendedProducts/ProductRecommendedProducts.vue

@@ -9,8 +9,8 @@
   </h2>
   <div v-if="text?.subtitle" class="text-2xl pb-1">{{ text.subtitle }}</div>
   <div
-    class="typography-text-sm md:typography-text-lg font-normal"
     v-if="text?.htmlDescription"
+    class="typography-text-sm md:typography-text-lg font-normal"
     v-html="text.htmlDescription"
   ></div>
   <ProductSlider v-if="recommendedProducts?.length" :items="recommendedProducts" />

apps/web/components/TextContent/TextContent.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="['w-full', 'space-y-4', textAlignmentClass]">
+    <div v-if="text?.pretitle" class="text-xl font-bold mb-2">{{ text.pretitle }}</div>
+    <h2 v-if="text?.title" class="text-2xl font-semibold mb-4">{{ text.title }}</h2>
+    <div v-if="text?.subtitle" class="text-lg font-semibold">{{ text.subtitle }}</div>
+    <div v-if="text?.htmlDescription" class="text-base" v-html="text.htmlDescription" />
+    <UiButton
+      v-if="button?.label && button?.link"
+      :tag="NuxtLink"
+      :to="localePath(button?.link ?? '')"
+      :variant="button?.variant ?? 'primary'"
+      class="mt-3 px-4 py-2"
+    >
+      {{ button?.label }}
+    </UiButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
+import type { TextContentProps } from '~/components/TextContent/types';
+
+const props = defineProps<TextContentProps>();
+
+const localePath = useLocalePath();
+const NuxtLink = resolveComponent('NuxtLink');
+
+const textAlignmentClass = computed(() => {
+  switch (props.text?.textAlignment) {
+    case 'center':
+      return 'text-center items-center';
+    case 'right':
+      return 'text-right items-end';
+    default:
+      return 'text-left items-start';
+  }
+});
+</script>

apps/web/components/TextContent/types.ts

@@ -0,0 +1,14 @@
+export type TextContentProps = {
+  text?: {
+    pretitle?: string;
+    title?: string;
+    subtitle?: string;
+    htmlDescription?: string;
+    textAlignment?: 'left' | 'center' | 'right';
+  };
+  button?: {
+    label?: string;
+    link?: string;
+    variant?: 'primary' | 'secondary';
+  };
+};

apps/web/components/ui/AccordionItem/AccordionItem.vue

@@ -4,7 +4,7 @@
       <slot name="summary">
         <p>{{ summary }}</p>
       </slot>
-      <SfIconChevronLeft :class="['text-neutral-500', modelValue ? 'rotate-90' : '-rotate-90']" />
+      <SfIconChevronLeft :class="['text-neutral-500', internalModelValue ? 'rotate-90' : '-rotate-90']" />
     </template>
     <div class="py-2 px-4">
       <slot />
@@ -18,7 +18,7 @@ import { useVModel } from '@vueuse/core';
 import type { AccordionItemProps } from '~/components/ui/AccordionItem/types';
 
 const props = defineProps<AccordionItemProps>();
-const { modelValue = false, summary = '', summaryClass = '' } = props;
+const { summary = '', summaryClass = '' } = props;
 const emit = defineEmits(['update:modelValue']);
 
 const internalModelValue = useVModel(props, 'modelValue', emit, { passive: true });