@shopware/cms-base-layer 1.4.1 → 1.5.0

package/README.md

@@ -36,6 +36,9 @@ pnpm install -D @shopware/cms-base-layer
 
 # bun
 bun install -D @shopware/cms-base-layer
+
+# deno
+deno install --dev @shopware/cms-base-layer
 ```
 
 <!-- /automd -->
@@ -129,21 +132,21 @@ No additional packages needed to be installed.
 
 Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/CHANGELOG.md)
 
-### Latest changes: 1.4.1
+### Latest changes: 1.5.0
 
-### Patch Changes
+### Minor Changes
 
-- [#1685](https://github.com/shopware/frontends/pull/1685) [`7324620`](https://github.com/shopware/frontends/commit/7324620a3f39c1b62f7cc294192a3e8b8b336d09) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Remove `salutationId` as a required field from the forms:
+- [#1727](https://github.com/shopware/frontends/pull/1727) [`94872b7`](https://github.com/shopware/frontends/commit/94872b7c6f6337ff8ce0bcfd9320e4178a4927f0) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Added CmsBlockHtml to render html blocks.
+  Added CmsElementHtml to render html element.
 
-  - SwNewsletterForm
-  - SwContactForm
+### Patch Changes
 
-- [#1659](https://github.com/shopware/frontends/pull/1659) [`7c10417`](https://github.com/shopware/frontends/commit/7c10417e9c0bb9fe049a0e36abf115be6c63c945) Thanks [@patzick](https://github.com/patzick)! - SwVariantConfigurator - URL prefix on Variant Change
+- [#1843](https://github.com/shopware/frontends/pull/1843) [`1859893`](https://github.com/shopware/frontends/commit/1859893ec3fe1cdead4b1c39e34943d9a70deaa4) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Enhance form error handling and fix TS errors
 
-- [#1677](https://github.com/shopware/frontends/pull/1677) [`d663627`](https://github.com/shopware/frontends/commit/d663627aaa00abc797f5c2413c4e978f95bd6f89) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Fix displaying product variants on the product page
+- [#1812](https://github.com/shopware/frontends/pull/1812) [`c28810d`](https://github.com/shopware/frontends/commit/c28810d0ca503b97c232438e200bbf5ba5dab403) Thanks [@patzick](https://github.com/patzick)! - Fix date formatting based on locale, previously always returned en-US format
 
-- [#1692](https://github.com/shopware/frontends/pull/1692) [`2440a55`](https://github.com/shopware/frontends/commit/2440a55066d31edf2942dbab19a7b5043cdff532) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Change `h5` HTML tag to `div` for better accessibility structure - for ProductCard component
+- [#1857](https://github.com/shopware/frontends/pull/1857) [`e78d51e`](https://github.com/shopware/frontends/commit/e78d51e6af0726b12620d9f7e8f2c3150aa80cfa) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Fix wrong `SharedPrice` component in `SwListingProductPrice.vue` file
 
-- Updated dependencies [[`7324620`](https://github.com/shopware/frontends/commit/7324620a3f39c1b62f7cc294192a3e8b8b336d09)]:
-  - @shopware/api-client@1.2.1
-  - @shopware/composables@1.8.1
+- Updated dependencies [[`d016d6b`](https://github.com/shopware/frontends/commit/d016d6b845bff9a148405a74dae88d7fc81ec99c), [`c28810d`](https://github.com/shopware/frontends/commit/c28810d0ca503b97c232438e200bbf5ba5dab403), [`a7ff606`](https://github.com/shopware/frontends/commit/a7ff60681d1a164d5c9f2020c506262e96fad5dc), [`d016d6b`](https://github.com/shopware/frontends/commit/d016d6b845bff9a148405a74dae88d7fc81ec99c), [`bd70905`](https://github.com/shopware/frontends/commit/bd70905b8443fd57d8d8cb3cfc6501a9117dea49)]:
+  - @shopware/api-client@1.3.0
+  - @shopware/composables@1.9.0

package/components/SwContactForm.vue

@@ -213,7 +213,7 @@ const invokeSubmit = async () => {
             v-if="$v.firstName.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.firstName.$errors[0].$message }}
+            {{ $v.firstName.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-4">
@@ -237,7 +237,7 @@ const invokeSubmit = async () => {
             v-if="$v.lastName.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.lastName.$errors[0].$message }}
+            {{ $v.lastName.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-6">
@@ -261,7 +261,7 @@ const invokeSubmit = async () => {
             v-if="$v.email.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.email.$errors[0].$message }}
+            {{ $v.email.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-6">
@@ -285,7 +285,7 @@ const invokeSubmit = async () => {
             v-if="$v.phone.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.phone.$errors[0].$message }}
+            {{ $v.phone.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-12">
@@ -309,7 +309,7 @@ const invokeSubmit = async () => {
             v-if="$v.subject.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.subject.$errors[0].$message }}
+            {{ $v.subject.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-12">
@@ -334,7 +334,7 @@ const invokeSubmit = async () => {
             v-if="$v.comment.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.comment.$errors[0].$message }}
+            {{ $v.comment.$errors[0]?.$message || '' }}
           </span>
         </div>
         <div class="col-span-12">

package/components/SwListingProductPrice.vue

@@ -12,6 +12,7 @@ type Translations = {
   listing: {
     variantsFrom: string;
     previously: string;
+    from: string;
     to: string;
   };
 };
@@ -78,7 +79,7 @@ const {
     <template v-if="regulationPrice">
       <div class="flex gap-2 justify-end text-gray-500 text-3.5 mb-2">
         {{ translations.listing.previously }}
-        <SharedPrice :value="regulationPrice" />
+        <SwSharedPrice :value="regulationPrice" />
       </div>
     </template>
     <template v-if="!regulationPrice">

package/components/SwNewsletterForm.vue

@@ -79,7 +79,7 @@ const { newsletterSubscribe, newsletterUnsubscribe } = useNewsletter();
 
 const getFormTitle = computed(() => getConfigValue("title"));
 const state = reactive({
-  option: subscriptionOptions[0].value,
+  option: subscriptionOptions[0]?.value ?? "",
   salutationId: "",
   firstName: "",
   lastName: "",
@@ -216,7 +216,7 @@ const invokeSubmit = async () => {
             v-if="$v.email?.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.email?.$errors[0].$message }}
+            {{ $v.email?.$errors[0]?.$message || '' }}
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
@@ -260,7 +260,7 @@ const invokeSubmit = async () => {
             v-if="$v.firstName?.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.firstName?.$errors[0].$message }}
+            {{ $v.firstName?.$errors[0]?.$message || '' }}
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
@@ -284,7 +284,7 @@ const invokeSubmit = async () => {
             v-if="$v.lastName?.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.lastName?.$errors[0].$message }}
+            {{ $v.lastName?.$errors[0]?.$message || '' }}
           </span>
         </div>
         <div class="col-span-12">

package/components/SwProductAddToCart.vue

@@ -51,7 +51,8 @@ const addToCartProxy = async () => {
   const errors = getErrorsCodes();
   for (const element of errors) {
     const { messageKey, params } = resolveCartError(element);
-    pushError(getCmsTranslate(translations.errors[messageKey], params));
+    if (translations.errors[messageKey])
+      pushError(getCmsTranslate(translations.errors[messageKey], params));
   }
 
   if (!errors.length)

package/components/SwProductCard.vue

@@ -127,7 +127,8 @@ const addToCartProxy = async () => {
   const errors = getErrorsCodes();
   for (const element of errors) {
     const { messageKey, params } = resolveCartError(element);
-    pushError(getCmsTranslate(translations.errors[messageKey], params));
+    if (translations.errors[messageKey])
+      pushError(getCmsTranslate(translations.errors[messageKey], params));
   }
 
   if (!errors.length)

package/components/SwProductReviews.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { defu } from "defu";
 import { computed, onMounted, ref, toRefs } from "vue";
-import { useCmsTranslations, useProductReviews } from "#imports";
+import {
+  useCmsTranslations,
+  useProductReviews,
+  useShopwareContext,
+} from "#imports";
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -12,12 +16,14 @@ const props = defineProps<{
 type Translations = {
   product: {
     noReviews: string;
+    reviewNotAccepted: string;
   };
 };
 
 let translations: Translations = {
   product: {
     noReviews: "No reviews yet.",
+    reviewNotAccepted: "Your review has not been approved yet",
   },
 };
 
@@ -42,15 +48,17 @@ const reviewsList = computed<Schemas["ProductReview"][]>(
 
 const format: Intl.DateTimeFormatOptions = {
   year: "numeric",
-  month: "short",
+  month: "numeric",
   day: "numeric",
   hour: "numeric",
   minute: "numeric",
-  hour12: true,
 };
 
-const formatDate = (date: string) =>
-  new Date(date).toLocaleDateString("en-us", format);
+const { browserLocale } = useShopwareContext();
+
+const formatDate = (date: string) => {
+  return new Intl.DateTimeFormat(browserLocale, format).format(new Date(date));
+};
 </script>
 
 <template>
@@ -70,6 +78,13 @@ const formatDate = (date: string) =>
       >
         <span>{{ formatDate(review.createdAt) }}</span>
       </div>
+      <div
+          v-if="!review.status"
+          class="mt-2 text-3 p-2 bg-[#d4f0f5] flex gap-2 items-center"
+        >
+        <div class="w-6 h-6 i-carbon-warning" />
+        {{ translations.product.reviewNotAccepted }}
+      </div>
       <div
         class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2"
       >

package/components/SwSlider.vue

@@ -38,9 +38,11 @@ const { getConfigValue } = useCmsElementConfig({
   config: SliderElementConfig;
 });
 
-const slots = useSlots();
+const slots = useSlots() as {
+  default?: () => { children: VNodeArrayChildren }[];
+};
 const childrenRaw = computed(
-  () => (slots?.default?.()[0].children as VNodeArrayChildren) ?? [],
+  () => (slots?.default?.()[0]?.children as VNodeArrayChildren) ?? [],
 );
 const slidesToScroll = computed(() =>
   props.slidesToScroll >= props.slidesToShow
@@ -184,7 +186,7 @@ function buildImageSliderTrackStyle(
       const childComponent =
         imageSliderTrack.value?.children[transformIndex + 1];
       // If image exist
-      height = childComponent?.children[0].children[0].clientHeight
+      height = childComponent?.children[0]?.children[0]?.clientHeight
         ? `${childComponent.clientHeight}px`
         : "auto";
     }

package/components/public/cms/element/CmsBlockHtml.md

@@ -0,0 +1 @@
+Render a HTML section

package/components/public/cms/element/CmsBlockHtml.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockHtml } from "@shopware/composables";
+
+defineProps<{
+  content: CmsBlockHtml;
+}>();
+</script>
+
+<template>
+  <div>
+    <CmsGenericElement
+      v-for="slot in content.slots"
+      :key="slot.versionId"
+      :content="slot"
+    />
+  </div>
+</template>

package/components/public/cms/element/CmsElementCrossSelling.vue

@@ -82,7 +82,7 @@ const toggleTab = (index: number) => {
         :autoplay="false"
       >
         <SwProductCard
-          v-for="product of crossSellCollections[currentTabIndex].products"
+          v-for="product of crossSellCollections[currentTabIndex]?.products"
           :key="product.id"
           class="w-[300px]"
           :product="product"

package/components/public/cms/element/CmsElementHtml.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { CmsElementHtml } from "@shopware/composables";
+
+import { getCmsLayoutConfiguration } from "@shopware/helpers";
+import { h } from "vue";
+
+const props = defineProps<{
+  content: CmsElementHtml;
+}>();
+
+const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
+
+const HtmlComponent = () => {
+  return h("div", {
+    class: cssClasses,
+    style: layoutStyles,
+    innerHTML: props.content.data.content || "",
+  });
+};
+</script>
+
+<template>
+  <HtmlComponent />
+</template>

package/components/public/cms/element/CmsElementProductDescriptionReviews.vue

@@ -3,25 +3,32 @@ import type { CmsElementProductDescriptionReviews } from "@shopware/composables"
 import { useCmsTranslations } from "@shopware/composables";
 import { getProductName, getTranslatedProperty } from "@shopware/helpers";
 import { defu } from "defu";
-import { computed, ref } from "vue";
+import { type Ref, computed, onMounted, ref } from "vue";
 import xss from "xss";
 import { useProduct } from "#imports";
+import type { Schemas } from "#shopware";
 
 const props = defineProps<{
   content: CmsElementProductDescriptionReviews;
 }>();
 
 type Translations = {
-  products: {
+  product: {
     description: string;
     reviews: string;
+    messages: {
+      reviewAdded: string;
+    };
   };
 };
 
 let translations: Translations = {
-  products: {
+  product: {
     description: "Description",
     reviews: "Reviews",
+    messages: {
+      reviewAdded: "Thank you for submitting your review",
+    },
   },
 };
 translations = defu(useCmsTranslations(), translations) as Translations;
@@ -37,7 +44,13 @@ const toggleTabs = (tabNumber: number) => {
   currentTab.value = tabNumber;
 };
 
-const reviews = computed(() => props.content.data.reviews.elements);
+const reviews: Ref<Schemas["ProductReview"][]> = ref([]);
+
+onMounted(async () => {
+  if (props.content.data?.reviews?.elements) {
+    reviews.value = props.content.data.reviews.elements;
+  }
+});
 </script>
 
 <template>
@@ -60,7 +73,7 @@ const reviews = computed(() => props.content.data.reviews.elements);
             @click="() => toggleTabs(1)"
           >
             <i class="fas fa-space-shuttle text-base mr-1" />
-            {{ translations.products.description }}
+            {{ translations.product.description }}
           </a>
         </li>
         <li class="mr-2 text-center">
@@ -71,10 +84,11 @@ const reviews = computed(() => props.content.data.reviews.elements);
                 ? 'text-secondary-500 bg-white'
                 : 'text-white bg-secondary-500',
             ]"
+            data-testid="product-reviews-tab"
             @click="() => toggleTabs(2)"
           >
             <i class="fas fa-cog text-base mr-1" />
-            {{ translations.products.reviews }}
+            {{ translations.product.reviews }} ({{ reviews.length }})
           </a>
         </li>
       </ul>

package/nuxt.config.ts

@@ -17,5 +17,7 @@ export default defineNuxtConfig({
   build: {
     transpile: ["@shopware/cms-base-layer"],
   },
-  telemetry: false,
+  telemetry: {
+    enabled: false,
+  },
 }) as NuxtConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -29,32 +29,32 @@
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.15.4",
-    "@tresjs/cientos": "4.0.2",
-    "@tresjs/core": "4.3.1",
+    "@nuxt/kit": "3.16.2",
+    "@tresjs/cientos": "4.3.0",
+    "@tresjs/core": "4.3.3",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "12.5.0",
+    "@vueuse/core": "13.1.0",
     "entities": "6.0.0",
     "html-to-ast": "0.0.6",
     "three": "0.173.0",
     "vue": "3.5.13",
     "xss": "1.0.15",
-    "@shopware/composables": "1.8.1",
-    "@shopware/api-client": "1.2.1",
-    "@shopware/helpers": "1.4.0"
+    "@shopware/composables": "1.9.0",
+    "@shopware/helpers": "1.4.0",
+    "@shopware/api-client": "1.3.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "3.15.4",
+    "@nuxt/schema": "3.16.2",
     "@types/three": "0.173.0",
-    "@vitest/coverage-v8": "3.0.5",
-    "nuxt": "3.15.4",
-    "typescript": "5.6.3",
+    "@vitest/coverage-v8": "3.1.1",
+    "nuxt": "3.16.2",
+    "typescript": "5.8.3",
     "unbuild": "2.0.0",
-    "vitest": "3.0.5",
+    "vitest": "3.1.1",
     "vue-router": "4.5.0",
-    "vue-tsc": "2.2.0",
+    "vue-tsc": "2.2.8",
     "tsconfig": "0.0.0"
   },
   "scripts": {