@meeovi/layer-commerce 1.0.5 → 1.0.7

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

@@ -1,441 +0,0 @@
-<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

@@ -1,126 +0,0 @@
-<template>
-    <section class="product-details">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col-12 col-md-6">
-                    <div v-if="displayProduct?.image?.filename_disk || displayProduct?.imageUrl">
-                        <img v-if="$directus && displayProduct?.image?.filename_disk"
-                            :src="`${$directus.url}assets/${displayProduct.image.filename_disk}`" :alt="displayProduct.name"
-                            class="w-full rounded-md" />
-                        <img v-else-if="displayProduct?.imageUrl" :src="displayProduct?.imageUrl" :alt="displayProduct?.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>{{ displayProduct?.name }}</strong></h1>
-                        <div class="price-line">
-                                <span class="block pb-2 font-bold typography-text-lg">
-                                {{ displayProduct?.price }}
-                            </span>
-                        </div>
-                        <p class="productRatings">
-                                <v-rating size="lg" :half-increment="true" :value="displayProduct?.ratings?.length || 0"
-                                :max="5" />
-                            <NuxtLink to="#" variant="secondary" class="ratingReviews ml-2 text-xs text-neutral-500">
-                                {{ displayProduct?.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">{{ displayProduct?.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="displayProduct?.id" />
-                            </div>
-                        </div>
-                        <div class="price-line1" v-for="tag in displayProduct?.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,
-        computed
-    } from 'vue';
-    import {
-        SfIconAdd,
-        SfIconRemove,
-    } from '@storefront-ui/vue';
-    import {
-        clamp
-    } from '@storefront-ui/shared';
-    import {
-        useCounter
-    } from '@vueuse/core';
-    import tagCard from '@/components/placeholders/Tag.vue';
-    import addToCartBtn from '../../partials/addToCartBtn.vue';
-    import createListBtn from '@/components/placeholders/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 displayProduct = computed(() => props.product)
-
-    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

@@ -1,17 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-<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>