@shopware/cms-base-layer 1.5.1 → 2.1.0

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>

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

@@ -4,15 +4,10 @@ import { defu } from "defu";
 import { computed } from "vue";
 import type { Schemas } from "#shopware";
 
-const props = withDefaults(
-  defineProps<{
-    product: Schemas["Product"];
-    showContent?: boolean;
-  }>(),
-  {
-    showContent: true,
-  },
-);
+const { product, showContent = true } = defineProps<{
+  product: Schemas["Product"];
+  showContent?: boolean;
+}>();
 
 type Translations = {
   product: {
@@ -28,22 +23,22 @@ let translations: Translations = {
 
 translations = defu(useCmsTranslations(), translations) as Translations;
 
-const purchaseUnit = computed(() => props.product?.purchaseUnit);
-const unitName = computed(() => props.product?.unit?.translated.name);
+const purchaseUnit = computed(() => product?.purchaseUnit);
+const unitName = computed(() => product?.unit?.translated.name);
 const referencePrice = computed(
-  () => props.product?.calculatedPrice?.referencePrice?.price,
+  () => product?.calculatedPrice?.referencePrice?.price,
 );
 const referenceUnit = computed(
-  () => props.product?.calculatedPrice?.referencePrice?.referenceUnit,
+  () => product?.calculatedPrice?.referencePrice?.referenceUnit,
 );
 const referenceUnitName = computed(
-  () => props.product?.calculatedPrice?.referencePrice?.unitName,
+  () => product?.calculatedPrice?.referencePrice?.unitName,
 );
 </script>
 
 <template>
   <div v-if="purchaseUnit" class="flex text-gray-500 justify-end gap-1">
-    <template v-if="props.showContent">
+    <template v-if="showContent">
       {{ translations.product.content }}: {{ purchaseUnit }} {{ unitName }}
     </template>
     <template v-if="referencePrice">

package/app/components/SwQuantitySelect.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { defu } from "defu";
+import { computed, useId } from "vue";
+import { useCmsTranslations } from "#imports";
+
+type Translations = {
+  form: {
+    quantitySelect: {
+      label: string;
+      increaseButton: string;
+      decreaseButton: string;
+    };
+  };
+};
+
+let translations = {
+  form: {
+    quantitySelect: {
+      label: "Quantity",
+      increaseButton: "Increase quantity",
+      decreaseButton: "Decrease quantity",
+    },
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const quantity = defineModel<number>({
+  required: true,
+});
+
+const {
+  size = "large",
+  steps,
+  max,
+  min,
+  id: propId,
+} = defineProps<{
+  size?: "small" | "large";
+  steps?: number;
+  min?: number;
+  max?: number;
+  id?: string;
+}>();
+
+// generate an id that prefers a provided prop and otherwise uses Vue's useId for SSR/CSR consistency
+const generatedId = useId();
+const inputId = computed(() => propId || generatedId);
+
+function increaseQty() {
+  quantity.value++;
+}
+
+function decreaseQty() {
+  if (quantity.value > 1) {
+    quantity.value--;
+  }
+}
+
+const sizeClasses = {
+  small: "w-8 h-8",
+  large: "w-10 h-10",
+};
+</script>
+<template>
+  <div class="rounded outline outline-1 outline-offset-[-1px] outline-outline-outline inline-flex">
+    <button
+      type="button"
+      :class="sizeClasses[size]"
+      class="bg-surface-surface border-0 border-r-1 cursor-pointer hover:bg-brand-tertiary-hover font-semibold"
+      @click="decreaseQty"
+      :aria-label="translations.form.quantitySelect.decreaseButton"
+    >
+      -
+    </button>
+    <div class="bg-white border-l border-r border-outline-outline inline-flex flex-col justify-center items-center">
+      <!-- visually hidden label for screen readers -->
+      <label :for="inputId" class="sr-only">{{ translations.form.quantitySelect.label }}</label>
+
+      <input
+        :id="inputId"
+        v-model="quantity"
+        type="number"
+        :min="min"
+        :max="max"
+        :step="steps"
+        data-testid="product-quantity"
+        :class="sizeClasses[size]"
+        class="self-stretch text-center justify-start text-surface-on-surface text-xs font-bold leading-[18px] appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        :aria-label="translations.form.quantitySelect.label"
+      />
+    </div>
+    <button
+      type="button"
+      :class="sizeClasses[size]"
+      class="w-10 bg-surface-surface border-0 border-l-1 cursor-pointer hover:bg-brand-tertiary-hover font-semibold"
+      @click="increaseQty"
+      :aria-label="translations.form.quantitySelect.increaseButton"
+    >
+      +
+    </button>
+  </div>
+</template>