@mframework/layer-commerce 0.0.5 → 0.0.8

package/app/components/catalog/product/productCompareTable.vue

@@ -0,0 +1,441 @@
+<template>
+  <div class="product-compare-table">
+    <div class="sticky-header">
+      <div class="compare-header">
+        <div class="product-column">
+          <h3>Product Details</h3>
+        </div>
+        <div v-for="product in products" :key="product.uid" class="product-column">
+          <div class="product-card">
+            <div class="remove-product" @click="removeProduct(product.uid)">
+              <SfIconClose size="sm" />
+            </div>
+            <img :src="product.image?.url" :alt="product.name" class="product-image" />
+            <h4>{{ product.name }}</h4>
+            <div class="product-price">
+              <div class="current-price">
+                {{ product.price_range?.minimum_price?.regular_price?.currency }}
+                {{ product.price_range?.minimum_price?.regular_price?.value }}
+              </div>
+              <div v-if="product.price_history" class="price-history">
+                <div class="price-change" :class="getPriceChangeClass(product.price_history)">
+                  {{ getPriceChangeText(product.price_history) }}
+                </div>
+              </div>
+            </div>
+            <div class="product-actions">
+              <addToCartBtn :productId="product.uid" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="compare-body">
+      <!-- Basic Information -->
+      <div class="compare-row">
+        <div class="attribute-column">
+          <h4>Basic Information</h4>
+        </div>
+        <div v-for="product in products" :key="product.uid" class="product-column">
+          <div class="attribute-value">
+            <p>SKU: {{ product.sku }}</p>
+            <p>Category: {{ product.categories?.name }}</p>
+            <div class="rating-container">
+              <Ratings :value="product.rating_summary" :length="5" size="sm" :half-increment="true" />
+              <span class="review-count">({{ product.review_count }} reviews)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Price History -->
+      <div class="compare-row" v-if="hasPriceHistory">
+        <div class="attribute-column">
+          <h4>Price History</h4>
+        </div>
+        <div v-for="product in products" :key="product.uid" class="product-column">
+          <div class="attribute-value">
+            <div v-if="product.price_history" class="price-history-chart">
+              <div class="price-points">
+                <div v-for="(price, date) in product.price_history" :key="date" class="price-point">
+                  <div class="price-value">{{ price }}</div>
+                  <div class="price-date">{{ formatDate(date) }}</div>
+                </div>
+              </div>
+            </div>
+            <div v-else>No price history available</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Reviews Summary -->
+      <div class="compare-row" v-if="hasReviews">
+        <div class="attribute-column">
+          <h4>Reviews Summary</h4>
+        </div>
+        <div v-for="product in products" :key="product.uid" class="product-column">
+          <div class="attribute-value">
+            <div v-if="product.reviews_summary" class="reviews-summary">
+              <div v-for="(count, rating) in product.reviews_summary" :key="rating" class="rating-bar">
+                <div class="rating-label">{{ rating }} stars</div>
+                <div class="rating-bar-container">
+                  <div class="rating-bar-fill" :style="{ width: `${(count / product.review_count) * 100}%` }"></div>
+                </div>
+                <div class="rating-count">{{ count }}</div>
+              </div>
+            </div>
+            <div v-else>No reviews available</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Specifications -->
+      <div class="compare-row" v-if="hasSpecifications">
+        <div class="attribute-column">
+          <h4>Specifications</h4>
+        </div>
+        <div v-for="product in products" :key="product.uid" class="product-column">
+          <div class="attribute-value">
+            <div v-for="(value, key) in product.custom_attributes" :key="key">
+              <p><strong>{{ key }}:</strong> {{ value }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Features -->
+      <div class="compare-row" v-if="hasFeatures">
+        <div class="attribute-column">
+          <h4>Features</h4>
+        </div>
+        <div v-for="product in products" :key="product.uid" class="product-column">
+          <div class="attribute-value">
+            <ul>
+              <li v-for="feature in product.features" :key="feature">{{ feature }}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { SfIconClose } from '@storefront-ui/vue';
+import addToCartBtn from '~/components/partials/commerce/addToCartBtn.vue';
+import Ratings from '~/components/partials/commerce/ratings.vue';
+
+const props = defineProps({
+  products: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['remove-product']);
+
+// Computed properties to check if products have certain attributes
+const hasSpecifications = computed(() => {
+  return props.products.some(product => product.custom_attributes && Object.keys(product.custom_attributes).length > 0);
+});
+
+const hasFeatures = computed(() => {
+  return props.products.some(product => product.features && product.features.length > 0);
+});
+
+const hasPriceHistory = computed(() => {
+  return props.products.some(product => product.price_history && Object.keys(product.price_history).length > 0);
+});
+
+const hasReviews = computed(() => {
+  return props.products.some(product => product.reviews_summary && Object.keys(product.reviews_summary).length > 0);
+});
+
+const removeProduct = (productId) => {
+  emit('remove-product', productId);
+};
+
+const getPriceChangeClass = (priceHistory) => {
+  const prices = Object.values(priceHistory);
+  const currentPrice = prices[0];
+  const previousPrice = prices[1];
+  if (!previousPrice) return '';
+  return currentPrice > previousPrice ? 'price-increase' : 'price-decrease';
+};
+
+const getPriceChangeText = (priceHistory) => {
+  const prices = Object.values(priceHistory);
+  const currentPrice = prices[0];
+  const previousPrice = prices[1];
+  if (!previousPrice) return '';
+  const change = ((currentPrice - previousPrice) / previousPrice) * 100;
+  return `${change > 0 ? '+' : ''}${change.toFixed(1)}%`;
+};
+
+const formatDate = (dateString) => {
+  return new Date(dateString).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+};
+</script>
+
+<style scoped>
+.product-compare-table {
+  width: 100%;
+  overflow-x: auto;
+  margin: 2rem 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.sticky-header {
+  position: sticky;
+  top: 0;
+  background: white;
+  z-index: 10;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.compare-header {
+  display: flex;
+  min-width: 800px;
+}
+
+.compare-body {
+  min-width: 800px;
+}
+
+.product-column {
+  flex: 1;
+  min-width: 250px;
+  padding: 1rem;
+  border-right: 1px solid #e5e7eb;
+  position: relative;
+}
+
+.attribute-column {
+  flex: 0 0 200px;
+  padding: 1rem;
+  background: #f9fafb;
+  border-right: 1px solid #e5e7eb;
+}
+
+.compare-row {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.product-card {
+  text-align: center;
+  position: relative;
+}
+
+.remove-product {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: #6b7280;
+  transition: color 0.2s;
+}
+
+.remove-product:hover {
+  color: #ef4444;
+}
+
+.product-image {
+  width: 150px;
+  height: 150px;
+  object-fit: contain;
+  margin-bottom: 1rem;
+}
+
+.attribute-value {
+  padding: 0.5rem;
+}
+
+.attribute-value ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.attribute-value li {
+  margin-bottom: 0.5rem;
+}
+
+.product-actions {
+  margin-top: 1rem;
+}
+
+h3, h4 {
+  margin: 0 0 1rem 0;
+  color: #1f2937;
+}
+
+p {
+  margin: 0.5rem 0;
+  color: #4b5563;
+}
+
+.price-history {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.price-increase {
+  color: #ef4444;
+}
+
+.price-decrease {
+  color: #10b981;
+}
+
+.rating-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.review-count {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.price-history-chart {
+  margin-top: 0.5rem;
+}
+
+.price-points {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.price-point {
+  text-align: center;
+  font-size: 0.75rem;
+}
+
+.price-value {
+  font-weight: 500;
+}
+
+.price-date {
+  color: #6b7280;
+}
+
+.reviews-summary {
+  margin-top: 0.5rem;
+}
+
+.rating-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.rating-label {
+  width: 70px;
+  font-size: 0.875rem;
+}
+
+.rating-bar-container {
+  flex: 1;
+  height: 8px;
+  background: #e5e7eb;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.rating-bar-fill {
+  height: 100%;
+  background: #f59e0b;
+  border-radius: 4px;
+}
+
+.rating-count {
+  width: 30px;
+  text-align: right;
+  font-size: 0.875rem;
+}
+
+@media (max-width: 768px) {
+  .product-column {
+    min-width: 200px;
+  }
+
+  .attribute-column {
+    flex: 0 0 150px;
+  }
+
+  .product-image {
+    width: 120px;
+    height: 120px;
+  }
+
+  .price-points {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .rating-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .rating-label {
+    width: auto;
+  }
+
+  .rating-bar-container {
+    width: 100%;
+  }
+}
+  .rating-bar-fill {
+    height: 100%;
+    background: #f59e0b;
+    border-radius: 4px;
+  }
+  
+  .rating-count {
+    width: 30px;
+    text-align: right;
+    font-size: 0.875rem;
+  }
+  
+  @media (max-width: 768px) {
+    .product-column {
+      min-width: 200px;
+    }
+  
+    .attribute-column {
+      flex: 0 0 150px;
+    }
+  
+    .product-image {
+      width: 120px;
+      height: 120px;
+    }
+  
+    .price-points {
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+  
+    .rating-bar {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    .rating-label {
+      width: auto;
+    }
+  
+    .rating-bar-container {
+      width: 100%;
+    }
+  }
+  </style>

package/app/components/catalog/product/productDetails.vue

@@ -0,0 +1,120 @@
+<template>
+    <section class="product-details">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-12 col-md-6">
+                    <div v-if="product?.image?.filename_disk">
+                        <img :src="`${$directus.url}assets/${product.image.filename_disk}`" :alt="product.name"
+                            class="w-full rounded-md" />
+                    </div>
+                </div>
+                <div class="col-12 col-md-6">
+                    <div class="right">
+                        <h1 class="mb-1 font-bold typography-headline-4"><strong>{{ product?.name }}</strong></h1>
+                        <div class="price-line">
+                            <span class="block pb-2 font-bold typography-text-lg">
+                                {{ product?.price }}
+                            </span>
+                        </div>
+                        <p class="productRatings">
+                            <v-rating size="lg" :half-increment="true" :value="product?.ratings?.length || 0"
+                                :max="5" />
+                            <NuxtLink to="#" variant="secondary" class="ratingReviews ml-2 text-xs text-neutral-500">
+                                {{ product?.comments?.comments_id?.length || 0 }} reviews
+                            </NuxtLink>
+                        </p>
+                        <div class="py-4 mb-4 border-gray-200 border-y">
+                            <div class="row items-start xs:flex">
+                                <div class="col col-6 flex flex-col items-stretch xs:items-center xs:inline-flex">
+                                    <div class="flex border border-neutral-300 rounded-md">
+                                        <v-btn variant="flat" :disabled="count <= min" square class="rounded-r-none p-3"
+                                            :aria-controls="inputId" aria-label="Decrease value" @click="dec()">
+                                            <SfIconRemove />
+                                        </v-btn>
+                                        <input :id="inputId" v-model="count" type="number"
+                                            class="grow appearance-none mx-2 w-8 text-center bg-transparent font-medium"
+                                            :min="min" :max="max" @input="handleOnChange" />
+                                        <v-btn variant="flat" :disabled="count >= max" square class="rounded-l-none p-3"
+                                            :aria-controls="inputId" aria-label="Increase value" @click="inc()">
+                                            <SfIconAdd />
+                                        </v-btn>
+                                    </div>
+                                    <p class="self-center mt-1 mb-4 text-xs text-neutral-500 xs:mb-0">
+                                        <strong class="text-neutral-900">{{ product?.stock }}</strong> in stock
+                                    </p>
+                                </div>
+                                <div class="col col-6">
+                                    <addToCartBtn :product="product?.id" :quantity="count" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mbr-section-btn row align-items-stretch justify-content-center">
+                            <div class="col col-6">
+                                <createListBtn :lists="product?.id" />
+                            </div>
+                        </div>
+                        <div class="price-line1" v-for="tag in product?.tags" :key="tag.id">
+                            <p class="desc mbr-fonts-style display-7"><strong>Tags:</strong> <tagCard :tag="tag?.tag_id" />&nbsp;</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+    import {
+        ref
+    } from 'vue';
+    import {
+        SfIconAdd,
+        SfIconRemove,
+    } from '@storefront-ui/vue';
+    import {
+        clamp
+    } from '@storefront-ui/shared';
+    import {
+        useCounter
+    } from '@vueuse/core';
+    import tagCard from '#social/app/components/related/tag.vue';
+    import addToCartBtn from '../../partials/addToCartBtn.vue';
+    import createListBtn from '#lists/app/components/partials/createListBtn.vue';
+
+    const {
+        $directus,
+    } = useNuxtApp()
+    const inputId = useId();
+    const min = ref(1);
+    const max = ref(999);
+    const {
+        count,
+        inc,
+        dec,
+        set
+    } = useCounter(1, {
+        min: min.value,
+        max: max.value
+    });
+
+    function handleOnChange(event: Event) {
+        const currentValue = (event.target as HTMLInputElement)?.value;
+        const nextValue = Number.parseFloat(currentValue);
+        set(clamp(nextValue, min.value, max.value));
+    }
+
+    const props = defineProps({
+        product: {
+            type: Object,
+            required: true
+        },
+    });
+
+    const formatPrice = (amount: number) => {
+        if (!amount) return '$0.00';
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+        }).format(amount / 100);
+    };
+</script>

package/app/components/catalog/product/productFaqs.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <v-expansion-panels>
+      <v-expansion-panel :title="faqs?.question" :text="faqs?.answer">
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    faqs: {
+      type: String,
+      required: true,
+    },
+  });
+</script>

package/app/components/catalog/product/productGallery.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="relative flex w-full max-h-[600px] aspect-4/3">
+    <v-carousel>
+      <v-carousel-item
+        v-for="asset in assets"
+        :key="asset.id"
+        :src="asset.preview"
+        cover
+      />
+    </v-carousel>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps<{ assets: Array<{ id: string; preview: string }> }>();
+</script>

package/app/components/catalog/product/productQty.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-row>
+    <v-col cols="12">
+      <h6>Quantity</h6>
+    </v-col>
+
+    <v-col cols="12">
+      <div class="d-flex align-center mb-4">
+        <div class="d-flex align-center">
+          <v-btn square variant="secondary" :disabled="count <= min" @click="dec()" size="sm">
+            <SfIconRemove />
+          </v-btn>
+          <input :id="inputId" type="number" :min="min" :max="max" class="mx-2 w-16 text-center" :value="count"
+            @change="handleOnChange" :disabled="!isValidProduct" />
+          <v-btn square variant="secondary" :disabled="count >= max" @click="inc()" size="sm">
+            <SfIconAdd />
+          </v-btn>
+        </div>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+  import {
+    SfIconRemove,
+    SfIconAdd,
+    useId,
+  } from '@storefront-ui/vue';
+
+  // Counter setup
+  const inputId = useId()
+  const min = ref(1)
+  const max = ref(999)
+  const count = ref(1)
+  // Counter methods
+  function handleOnChange(event) {
+    const currentValue = event.target.value
+    const nextValue = parseFloat(currentValue)
+
+    if (isNaN(nextValue)) {
+      count.value = min.value
+    } else {
+      count.value = Math.min(Math.max(nextValue, min.value), max.value)
+    }
+  }
+
+  const props = defineProps({
+    productQty: {
+      type: String,
+      required: true,
+    },
+  });
+</script>

package/app/components/catalog/product/productReviews.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useVendureQuery } from "../../../composables/useVendureQuery";
+import getProductReviewsQuery from "#graphql/app/commerce/queries/getProductReviews.gql";
+
+const props = defineProps<{ productId: string }>();
+const { data } = useVendureQuery(getProductReviewsQuery, {
+  productId: props.productId,
+});
+const reviews = computed(() => data.value?.product?.reviews || []);
+
+const format: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  hour12: true,
+};
+const formatDate = (date: string) =>
+  new Date(date).toLocaleDateString("en-us", format);
+</script>
+
+<template>
+  <div>
+    <h4 class="text-xl font-bold dark:text-white mt-3">
+      {{ $t("product.reviews") }}
+    </h4>
+    <div v-if="reviews.length">
+      <div v-for="review in reviews" :key="review.id">
+        <div
+          v-if="review.createdAt"
+          class="mt-3 text-gray-600 text-sm"
+        >
+          <span>{{ formatDate(review.createdAt) }}</span>
+        </div>
+        <div class="inline-flex items-center mt-2">
+          <span
+            v-for="n in review.rating"
+            :key="n"
+            class="w-5 h-5 i-carbon-star-filled"
+          ></span>
+          <span
+            v-for="n in 5 - review.rating"
+            :key="n"
+            class="w-5 h-5 i-carbon-star"
+          ></span>
+          <span class="font-semibold ml-2">{{ review.summary }}</span>
+        </div>
+        <div class="mt-2">
+          <p class="wrap-break-word">{{ review.body }}</p>
+        </div>
+      </div>
+    </div>
+    <div v-else>{{ $t("product.noReviews") }}</div>
+  </div>
+</template>