@shopware/cms-base-layer 1.5.0 → 2.0.0

package/app/components/SwProductListingFilters.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import type {
+  CmsElementProductListing,
+  CmsElementSidebarFilter,
+} from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { defu } from "defu";
+import { computed, reactive } from "vue";
+import type { ComputedRef, UnwrapNestedRefs } from "vue";
+import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
+import { useCategoryListing } from "#imports";
+import type { Schemas, operations } from "#shopware";
+
+const props = defineProps<{
+  content: CmsElementProductListing | CmsElementSidebarFilter;
+  listingType?: string;
+}>();
+
+type Translations = {
+  listing: {
+    filters: string;
+    sort: string;
+    resetFilters: string;
+  };
+};
+
+type FilterState = {
+  manufacturer: Set<string>;
+  properties: Set<string>;
+  "min-price": number | undefined;
+  "max-price": number | undefined;
+  rating: number | undefined;
+  "shipping-free": boolean | undefined;
+};
+
+let translations: Translations = {
+  listing: {
+    filters: "Filters",
+    sort: "Sort",
+    resetFilters: "Reset filters",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const route = useRoute();
+const router = useRouter();
+
+const {
+  changeCurrentSortingOrder,
+  getCurrentFilters,
+  getCurrentSortingOrder,
+  getInitialFilters,
+  getSortingOrders,
+  search,
+} = useCategoryListing();
+
+const sidebarSelectedFilters: UnwrapNestedRefs<FilterState> =
+  reactive<FilterState>({
+    manufacturer: new Set(),
+    properties: new Set(),
+    "min-price": undefined,
+    "max-price": undefined,
+    rating: undefined,
+    "shipping-free": undefined,
+  });
+
+const showResetFiltersButton = computed<boolean>(() => {
+  if (
+    sidebarSelectedFilters.manufacturer.size !== 0 ||
+    sidebarSelectedFilters.properties.size !== 0 ||
+    sidebarSelectedFilters["max-price"] ||
+    sidebarSelectedFilters["min-price"] ||
+    sidebarSelectedFilters.rating ||
+    sidebarSelectedFilters["shipping-free"]
+  ) {
+    return true;
+  }
+
+  return false;
+});
+
+const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
+  computed(() => ({
+    manufacturer: [
+      ...(sidebarSelectedFilters.manufacturer as Set<string>),
+    ]?.join("|"),
+    properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
+      "|",
+    ),
+    "min-price": sidebarSelectedFilters["min-price"] as number,
+    "max-price": sidebarSelectedFilters["max-price"] as number,
+    order: getCurrentSortingOrder.value as string,
+    "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
+    rating: sidebarSelectedFilters.rating as number,
+    search: "",
+    limit: route.query.limit ? Number(route.query.limit) : 15,
+  }));
+
+for (const param in route.query) {
+  if (param in sidebarSelectedFilters) {
+    const queryValue = route.query[param];
+
+    // Skip arrays
+    if (Array.isArray(queryValue)) continue;
+
+    if (["manufacturer", "properties"].includes(param)) {
+      if (typeof queryValue === "string") {
+        const elements = queryValue.split("|");
+        const targetSet = sidebarSelectedFilters[
+          param as keyof FilterState
+        ] as Set<string>;
+        for (const element of elements) {
+          targetSet.add(element);
+        }
+      }
+    } else if (queryValue && typeof queryValue === "string") {
+      // Fix: Use specific property assignments instead of generic keyof
+      if (param === "min-price") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters["min-price"] = numValue;
+        }
+      } else if (param === "max-price") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters["max-price"] = numValue;
+        }
+      } else if (param === "rating") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters.rating = numValue;
+        }
+      } else if (param === "shipping-free") {
+        sidebarSelectedFilters["shipping-free"] = queryValue === "true";
+      }
+    }
+  }
+}
+
+const handleFilterChange = async (event: {
+  code: string;
+  value: string | number | boolean;
+}) => {
+  try {
+    const { code, value } = event;
+
+    if (code === "manufacturer" || code === "properties") {
+      const filterSet = sidebarSelectedFilters[code];
+      const stringValue = String(value);
+
+      if (filterSet.has(stringValue)) {
+        filterSet.delete(stringValue);
+      } else {
+        filterSet.add(stringValue);
+      }
+    } else if (code === "min-price" || code === "max-price") {
+      sidebarSelectedFilters[code] =
+        typeof value === "number" ? value : Number(value);
+    } else if (code === "rating") {
+      sidebarSelectedFilters.rating = Number(value);
+    } else if (code === "shipping-free") {
+      sidebarSelectedFilters["shipping-free"] = Boolean(value);
+    }
+
+    await executeSearch();
+  } catch (error) {
+    console.error("Filter update failed:", error);
+  }
+};
+
+const executeSearch = async () => {
+  try {
+    await search(searchCriteriaForRequest.value);
+
+    // Build query directly from searchCriteriaForRequest which already has pipe-separated strings
+    const criteria = searchCriteriaForRequest.value;
+    const query: Record<string, unknown> = {};
+
+    if (criteria.manufacturer) query.manufacturer = criteria.manufacturer;
+    if (criteria.properties) query.properties = criteria.properties;
+    if (criteria["min-price"]) query["min-price"] = criteria["min-price"];
+    if (criteria["max-price"]) query["max-price"] = criteria["max-price"];
+    if (criteria.rating) query.rating = criteria.rating;
+    if (criteria["shipping-free"])
+      query["shipping-free"] = criteria["shipping-free"];
+    if (criteria.order) query.order = criteria.order;
+
+    await router.push({
+      query: query as LocationQueryRaw,
+    });
+  } catch (error) {
+    console.error("Search execution failed:", error);
+  }
+};
+
+const clearFilters = () => {
+  (sidebarSelectedFilters.manufacturer as Set<string>).clear();
+  (sidebarSelectedFilters.properties as Set<string>).clear();
+  sidebarSelectedFilters["min-price"] = undefined;
+  sidebarSelectedFilters["max-price"] = undefined;
+  sidebarSelectedFilters.rating = undefined;
+  sidebarSelectedFilters["shipping-free"] = undefined;
+};
+
+const currentSortingOrder = computed({
+  get: (): string => getCurrentSortingOrder.value || "",
+  set: async (order: string): Promise<void> => {
+    try {
+      await router.push({
+        query: {
+          ...route.query,
+          order,
+        },
+      });
+
+      await changeCurrentSortingOrder(order, {
+        ...(route.query as unknown as operations["searchPage post /search"]["body"]),
+        limit: route.query.limit ? Number(route.query.limit) : 15,
+      });
+    } catch (error) {
+      console.error("Sorting order change failed:", error);
+    }
+  },
+});
+
+async function invokeCleanFilters() {
+  try {
+    clearFilters();
+    await executeSearch();
+  } catch (error) {
+    console.error("Clear filters failed:", error);
+  }
+}
+
+const isDefaultSidebarFilter =
+  props.content.type === "sidebar-filter" &&
+  props.content.config?.boxLayout?.value === "standard";
+
+const handleSortChange = (sortKey: string) => {
+  currentSortingOrder.value = sortKey;
+};
+
+const handleRemoveFilterChip = async (chip: {
+  code: string;
+  value: string | number;
+}) => {
+  if (chip.code === "properties" || chip.code === "manufacturer") {
+    const filterSet = sidebarSelectedFilters[chip.code] as Set<string>;
+    filterSet.delete(String(chip.value));
+  } else if (chip.code === "price") {
+    sidebarSelectedFilters["min-price"] = undefined;
+    sidebarSelectedFilters["max-price"] = undefined;
+  } else if (chip.code === "rating") {
+    sidebarSelectedFilters.rating = undefined;
+  } else if (chip.code === "shipping-free") {
+    sidebarSelectedFilters["shipping-free"] = undefined;
+  }
+
+  await executeSearch();
+};
+</script>
+<template>
+  <div>
+    <!-- Active Filter Chips -->
+    <SwFilterChips
+      :filters="sidebarSelectedFilters"
+      :available-filters="getInitialFilters"
+      @remove="handleRemoveFilterChip"
+    />
+
+    <!-- Filters Header -->
+    <div class="self-stretch flex flex-col justify-start items-start gap-4">
+      <div
+        class="flex flex-row items-center justify-between w-full mb-4 py-3 border-b border-outline-outline-variant">
+        <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+          {{ translations.listing.filters }}
+        </div>
+        <SwSortDropdown
+          :sort-options="getSortingOrders ?? []"
+          :current-sort="getCurrentSortingOrder ?? ''"
+          :label="translations.listing.sort"
+          @sort-change="handleSortChange"
+        />
+      </div>
+    </div>
+
+    <!-- Filters List -->
+    <div class="self-stretch flex flex-col justify-start items-start gap-4">
+      <SwProductListingFilter v-for="filter in getInitialFilters" :key="filter.id"
+        :filter="filter"
+        :selected-manufacturer="sidebarSelectedFilters.manufacturer"
+        :selected-properties="sidebarSelectedFilters.properties"
+        :selected-min-price="sidebarSelectedFilters['min-price']"
+        :selected-max-price="sidebarSelectedFilters['max-price']"
+        :selected-rating="sidebarSelectedFilters.rating"
+        :selected-shipping-free="sidebarSelectedFilters['shipping-free']"
+        @filter-change="handleFilterChange"
+        class="w-full" />
+      <div v-if="showResetFiltersButton" class="w-full">
+        <SwBaseButton variant="primary" size="medium" block @click="invokeCleanFilters" type="button">
+          {{ translations.listing.resetFilters }}
+          <span class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"></span>
+        </SwBaseButton>
+      </div>
+    </div>
+  </div>
+</template>

package/{components → app/components}/SwProductReviews.vue

@@ -17,6 +17,7 @@ type Translations = {
   product: {
     noReviews: string;
     reviewNotAccepted: string;
+    reviewFeedback: string;
   };
 };
 
@@ -24,6 +25,7 @@ let translations: Translations = {
   product: {
     noReviews: "No reviews yet.",
     reviewNotAccepted: "Your review has not been approved yet",
+    reviewFeedback: "Shop feedback",
   },
 };
 
@@ -64,40 +66,50 @@ const formatDate = (date: string) => {
 <template>
   <div
     v-if="loadingReviews"
-    class="absolute inset-0 flex items-center justify-center z-10 bg-white/75"
+    class="absolute inset-0 flex items-center justify-center z-10 bg-surface-surface/75"
   >
     <div
-      class="h-15 w-15 i-carbon-progress-bar-round animate-spin c-gray-500"
+      class="h-15 w-15 i-carbon-progress-bar-round animate-spin text-outline-outline"
     />
   </div>
-  <div v-else-if="reviewsList.length">
-    <div v-for="review in reviews" :key="review.id">
+  <div v-else-if="reviewsList.length" class="flex flex-col gap-6">
+    <div
+      v-for="(review, index) in reviewsList"
+      :key="review.id"
+      class="pb-6"
+      :class="{ 'border-b border-surface-surface-container-highest': index < reviewsList.length - 1 }"
+    >
       <div
         v-if="review.createdAt"
-        class="cms-block-product-description-reviews__reviews-time mt-3 text-gray-600 text-sm"
+        class="cms-block-product-description-reviews__reviews-time text-surface-on-surface-variant text-sm"
       >
+        <span v-if="review.externalUser">{{ review.externalUser }} - </span>
         <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"
+          class="mt-2 text-3 p-2 bg-states-info-container text-states-on-info-container 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"
+        role="img"
+        :aria-label="`${review.points} out of 5 stars`"
       >
-        <div
+        <SwStarIcon
           v-for="_ in review.points"
           :key="`filled-star-${_}`"
-          class="w-5 h-5 i-carbon-star-filled"
-        ></div>
-        <div
+          :filled="true"
+          :size="20"
+        />
+        <SwStarIcon
           v-for="_ in 5 - (review.points || 0)"
           :key="`empty-star-${_}`"
-          class="w-5 h-5 i-carbon-star"
-        ></div>
+          :filled="false"
+          :size="20"
+        />
         <div
           class="cms-block-product-description-reviews__reviews-title font-semibold ml-2"
         >
@@ -105,7 +117,10 @@ const formatDate = (date: string) => {
         </div>
       </div>
       <div class="cms-block-product-description-reviews__reviews-content mt-2">
-        <span>{{ review.content }}</span>
+        <p class="break-words">{{ review.content }}</p>
+        <p v-if="review.comment" class="text-surface-on-surface-variant mt-2">
+          - {{ translations.product.reviewFeedback }}: {{ review.comment }}
+        </p>
       </div>
     </div>
   </div>

package/app/components/SwProductReviewsForm.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { ApiClientError } from "@shopware/api-client";
+import type { ApiError } from "@shopware/api-client";
+import { useCmsTranslations } from "@shopware/composables";
+import { useVuelidate } from "@vuelidate/core";
+import type { ValidationRuleWithoutParams } from "@vuelidate/core";
+import { minLength, required } from "@vuelidate/validators";
+import { defu } from "defu";
+import { computed, reactive, ref } from "vue";
+import { useShopwareContext } from "#imports";
+
+const props = defineProps<{
+  productId: string;
+}>();
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+type Translations = {
+  product: {
+    addReview: string;
+    reviewsForm: {
+      title: string;
+      titlePlaceholder: string;
+      review: string;
+      reviewPlaceholder: string;
+      submit: string;
+      rating: string;
+    };
+    errors: {
+      reviewAlreadyExists: string;
+    };
+  };
+  errors?: {
+    [key: string]: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    addReview: "Add review",
+    reviewsForm: {
+      title: "Title",
+      titlePlaceholder: "Enter a title for your review",
+      review: "Your review",
+      reviewPlaceholder:
+        "Share your experience with this product (minimum 40 characters)",
+      submit: "Submit",
+      rating: "Your rating",
+    },
+    errors: {
+      reviewAlreadyExists:
+        "You have already submitted a review for this product",
+    },
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+type State = {
+  rating: number | null;
+  title: string;
+  review: string;
+};
+
+const state = reactive<State>({
+  rating: null,
+  title: "",
+  review: "",
+});
+
+const isLoading = ref(false);
+const errorMessages = ref<ApiError[]>([]);
+
+const rules = computed(() => ({
+  rating: {
+    required: required as ValidationRuleWithoutParams,
+  },
+  title: {
+    required: required as ValidationRuleWithoutParams,
+    minLength: minLength(5),
+  },
+  review: {
+    required: required as ValidationRuleWithoutParams,
+    minLength: minLength(40),
+  },
+}));
+
+const { apiClient } = useShopwareContext();
+
+const $v = useVuelidate(rules, state);
+
+const invokeSend = async () => {
+  $v.value.$touch();
+  const valid = await $v.value.$validate();
+
+  if (!valid) {
+    return;
+  }
+
+  try {
+    isLoading.value = true;
+    await apiClient.invoke(
+      "saveProductReview post /product/{productId}/review",
+      {
+        pathParams: {
+          productId: props.productId,
+        },
+        body: {
+          title: state.title,
+          content: state.review,
+          points: state.rating || 0,
+        },
+      },
+    );
+
+    // Reset form state after successful submission
+    state.rating = null;
+    state.title = "";
+    state.review = "";
+    $v.value.$reset();
+    errorMessages.value = [];
+
+    emit("success");
+  } catch (error) {
+    if (error instanceof ApiClientError) {
+      // Resolve error messages using i18n translations when available
+      errorMessages.value = error.details.errors.map((err: ApiError) => {
+        // Try to get translation from i18n errors namespace (if template provides it)
+        const translatedMessage =
+          (err.code && translations.errors?.[err.code]) ??
+          // Fall back to product-specific error translations
+          (err.code === "VIOLATION::ENTITY_EXISTS"
+            ? translations.product.errors.reviewAlreadyExists
+            : undefined) ??
+          // Fall back to API error detail
+          err.detail;
+
+        return {
+          ...err,
+          detail: translatedMessage,
+        };
+      });
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const invokeRating = (value: number) => {
+  state.rating = value;
+};
+</script>
+
+<template>
+  <form class="flex flex-col gap-4 md:gap-5 relative" @submit.prevent="invokeSend">
+    <div
+      v-if="isLoading"
+      class="absolute inset-0 flex items-center justify-center z-10 bg-surface-surface/80 rounded-md"
+    >
+      <div
+        class="h-12 w-12 i-carbon-progress-bar-round animate-spin text-brand-primary"
+      />
+    </div>
+    <div>
+      <div class="flex flex-col gap-2">
+        <h4 class="text-lg md:text-xl font-bold text-surface-on-surface mt-3">
+          {{ translations.product.addReview }}
+        </h4>
+        <span class="text-sm text-surface-on-surface-variant">{{
+          translations.product.reviewsForm.rating
+        }}</span>
+        <div class="flex flex-row gap-2" role="group" :aria-label="translations.product.reviewsForm.rating">
+          <SwStarIcon
+            v-for="index in state.rating || 0"
+            :key="`filled-${index}`"
+            :filled="true"
+            :size="24"
+            role="button"
+            :aria-label="`Rate ${index} out of 5 stars`"
+            tabindex="0"
+            class="cursor-pointer hover:opacity-80 transition-opacity active:scale-95 focus:outline-none focus:ring-2 focus:ring-brand-primary rounded"
+            data-testid="review-filled-star"
+            @click="invokeRating(index)"
+            @keydown.enter.prevent="invokeRating(index)"
+            @keydown.space.prevent="invokeRating(index)"
+          />
+          <SwStarIcon
+            v-for="index in 5 - (state.rating || 0)"
+            :key="`empty-${index}`"
+            :filled="false"
+            :size="24"
+            role="button"
+            :aria-label="`Rate ${(state.rating || 0) + index} out of 5 stars`"
+            tabindex="0"
+            class="cursor-pointer hover:opacity-80 transition-opacity active:scale-95 focus:outline-none focus:ring-2 focus:ring-brand-primary rounded"
+            data-testid="review-empty-star"
+            @click="invokeRating((state.rating || 0) + index)"
+            @keydown.enter.prevent="invokeRating((state.rating || 0) + index)"
+            @keydown.space.prevent="invokeRating((state.rating || 0) + index)"
+          />
+        </div>
+        <span
+          v-if="$v.rating.$error && $v.rating.$errors[0]?.$message"
+          class="pt-1 text-sm text-states-error"
+        >
+          {{ $v.rating.$errors[0].$message }}
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="errorMessages.length"
+      class="p-3 mb-4 bg-surface-surface-container border border-states-error rounded-md flex gap-2 md:gap-3 items-start"
+    >
+      <div class="w-5 h-5 text-states-error flex-shrink-0 mt-0.5">
+        <SwExclamationIcon :size="20" />
+      </div>
+      <div class="flex-1">
+        <p v-for="(error, index) in errorMessages" :key="index" class="text-sm text-states-error">
+          {{ error.detail }}
+        </p>
+      </div>
+    </div>
+    <div>
+      <label
+        for="title"
+        class="block mb-2 text-sm font-medium text-surface-on-surface"
+        >{{ translations.product.reviewsForm.title }}</label
+      >
+      <input
+        id="title"
+        v-model="state.title"
+        class="block w-full px-3 py-2.5 md:py-2 border rounded-md text-base md:text-sm text-surface-on-surface bg-surface-surface placeholder-surface-on-surface-variant focus:outline-none focus:ring-2 focus:ring-outline-outline"
+        :class="[
+          $v.title.$error
+            ? 'border-states-error focus:ring-states-error'
+            : 'border-outline-outline',
+        ]"
+        type="text"
+        :placeholder="translations.product.reviewsForm.titlePlaceholder"
+        :disabled="isLoading"
+        data-testid="review-title-input"
+        @blur="$v.title.$touch()"
+      />
+      <span
+        v-if="$v.title.$error && $v.title.$errors[0]?.$message"
+        class="pt-1 text-sm text-states-error"
+      >
+        {{ $v.title.$errors[0].$message }}
+      </span>
+    </div>
+    <div>
+      <label
+        for="review"
+        class="block mb-2 text-sm font-medium text-surface-on-surface"
+        >{{ translations.product.reviewsForm.review }}</label
+      >
+      <textarea
+        id="review"
+        v-model="state.review"
+        class="block w-full px-3 py-2.5 md:py-2 border rounded-md text-base md:text-sm text-surface-on-surface bg-surface-surface placeholder-surface-on-surface-variant focus:outline-none focus:ring-2 focus:ring-outline-outline min-h-32 md:min-h-40"
+        :class="[
+          $v.review.$error
+            ? 'border-states-error focus:ring-states-error'
+            : 'border-outline-outline',
+        ]"
+        :placeholder="translations.product.reviewsForm.reviewPlaceholder"
+        :disabled="isLoading"
+        data-testid="review-text-input"
+        @blur="$v.review.$touch()"
+      />
+      <span
+        v-if="$v.review.$error && $v.review.$errors[0]?.$message"
+        class="pt-1 text-sm text-states-error"
+      >
+        {{ $v.review.$errors[0].$message }}
+      </span>
+    </div>
+    <SwBaseButton
+      type="submit"
+      variant="primary"
+      size="medium"
+      :disabled="isLoading"
+      :loading="isLoading"
+      class="mt-4 w-full md:w-auto md:self-start"
+      data-testid="review-submit-button"
+    >
+      {{ translations.product.reviewsForm.submit }}
+    </SwBaseButton>
+  </form>
+</template>