@meeovi/layer-commerce 1.0.6 → 1.0.7

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

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

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

@@ -1,116 +0,0 @@
-<template>
-  <v-table>
-    <tbody>
-      <tr>
-        <th>Released</th>
-        <td>{{ new Date(product?.created_at).toLocaleDateString() }}</td>
-      </tr>
-      <tr>
-        <th>Updated</th>
-        <td>{{ new Date(product?.updated_at).toLocaleDateString() }}</td>
-      </tr>
-      <tr>
-        <th>Name</th>
-        <td>{{ product?.name }}</td>
-      </tr>
-      <tr>
-        <th>Category Name</th>
-        <td><div style="display: inline-block;" v-for="categories in product?.categories" :key="categories">{{ categories?.categories_id?.name.join(', ') }}</div></td>
-      </tr>
-      <tr>
-        <th>Price</th>
-        <td>
-          <strong><div style="display: inline-block;" v-for="currency in product?.currency" :key="currency">{{ currency?.currency_id?.symbol }}</div></strong>
-          {{ product?.price }}
-        </td>
-      </tr>
-      <tr>
-        <th>Average Rating</th>
-        <td><ratings :rating="product?.rating" /></td>
-      </tr>
-      <tr>
-        <th># of Reviews</th>
-        <td>{{ product?.review_count }}</td>
-      </tr>
-      <tr>
-        <th>Sku</th>
-        <td>{{ product?.sku }}</td>
-      </tr>
-      <tr>
-        <th>How many items are left?</th>
-        <td>{{ product?.stock }}</td>
-      </tr>
-      <tr>
-        <th>Visibility</th>
-        <td>{{ product?.visibility }}</td>
-      </tr>
-      <tr>
-        <th>Weight</th>
-        <td>{{ product?.weight }}</td>
-      </tr>
-      <tr>
-        <th>Height</th>
-        <td>{{ product?.height }}</td>
-      </tr>
-      <tr>
-        <th>Format</th>
-        <td v-dompurify-html="product?.format"></td>
-      </tr>
-      <tr>
-        <th>Product Color</th>
-        <td>{{ product?.color }}</td>
-      </tr>
-      <tr>
-        <th>Product Size</th>
-        <td>{{ product?.size }}</td>
-      </tr>
-      <tr>
-        <th>Product Manufacturer</th>
-        <td>{{ product?.manufacturer?.manufacturer_id?.name }}</td>
-      </tr>
-      <tr>
-        <th>Product Description</th>
-        <td><div v-dompurify-html="product?.content"></div></td>
-      </tr>
-      <tr>
-        <th>Is Gift Message Available</th>
-        <td>{{ product?.gift_message_available }}</td>
-      </tr>
-      <tr>
-        <th>Special to Date</th>
-        <td><div style="display: inline-block;" v-for="currency in product?.currency" :key="currency">{{ currency?.currency_id?.symbol }}</div> {{ product?.special_to_date }}</td>
-      </tr>
-      <tr>
-        <th>Special Price</th>
-        <td><div style="display: inline-block;" v-for="currency in product?.currency" :key="currency">{{ currency?.currency_id?.symbol }}</div> {{ product?.special_price  }}</td>
-      </tr>
-      <tr>
-        <th>Is Featured</th>
-        <td>{{ product?.is_featured }}</td>
-      </tr>
-      <tr>
-        <th>Product URL Key</th>
-        <td>{{ product?.url_key }}</td>
-      </tr>
-      <tr>
-        <th>Product URL Path</th>
-        <td>{{ product?.url_path }}</td>
-      </tr>
-      <tr>
-        <th>Product Gift Message Availability</th>
-        <td>{{ product?.gift_message_available }}</td>
-      </tr>
-    </tbody>
-  </v-table>
-</template>
-
-<script setup>
-import ratings from '../../partials/ratings.vue'
-
-const props = defineProps({
-  product: {
-    type: Object,
-    required: true,
-  },
-});
-</script>

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

@@ -1,36 +0,0 @@
-<template>
-    <div>
-        <v-card color="#b02564">
-            <div class="d-flex flex-no-wrap justify-space-between">
-                <div>
-                    <v-card-title class="text-h5">
-                        {{ radio?.name }}
-                    </v-card-title>
-
-                    <v-card-subtitle>{{ radio?.description }}</v-card-subtitle>
-
-                    <v-card-actions>
-                        <v-btn class="ms-2" size="small" text="LISTEN" variant="outlined"
-                            :href="`/departments/categories/station/${radio?.id}`"></v-btn>
-                    </v-card-actions>
-                </div>
-
-                <v-avatar class="ma-3" rounded="0" size="125">
-                    <NuxtImg :src="`${$directus.url}/assets/${radio?.image?.filename_disk}`" />
-                </v-avatar>
-            </div>
-        </v-card>
-    </div>
-</template>
-
-<script setup>
-    const props = defineProps({
-        radio: {
-            type: Object,
-            required: true,
-        },
-    });
-    const {
-        radio
-    } = props;
-</script>

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

@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
-      data-sortbtn="btn-primary">
-      <div class="container-fluid">
-        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
-          Recently Viewed</h2>
-        <div class="underline align-left pb-3">
-          <div class="line"></div>
-        </div>
-        <v-sheet class="mx-auto">
-          <v-slide-group v-model="model" class="pa-4" show-arrows>
-            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
-              v-for="(products, index) in recentlyViewed" :key="index">
-              <productCard :product="products" :class="['ma-4', selectedClass]" @click="toggle" />
-
-              <div class="d-flex fill-height align-center justify-center">
-                <v-scale-transition>
-                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
-                </v-scale-transition>
-              </div>
-            </v-slide-group-item>
-          </v-slide-group>
-        </v-sheet>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-  import productCard from './productCard.vue'
-
-  const model = ref(null)
-
-  import { onMounted } from 'vue'
-  import { useRecentlyViewed } from '#commerce/app/composables/products/useRecentlyViewed'
-
-  const { products: recentlyViewed, load } = useRecentlyViewed()
-
-  onMounted(() => {
-    load()
-  })
-</script>

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

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
-      data-sortbtn="btn-primary">
-      <div class="container-fluid">
-        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
-          Related Brands</h2>
-        <div class="underline align-left pb-3">
-          <div class="line"></div>
-        </div>
-        <v-sheet class="mx-auto">
-          <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
-              v-for="(brand, index) in relatedbrands" :key="index">
-              <brandCard :product="brand" :class="['ma-4', selectedClass]" @click="toggle" />
-
-              <div class="d-flex fill-height align-center justify-center">
-                <v-scale-transition>
-                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
-                </v-scale-transition>
-              </div>
-            </v-slide-group-item>
-          </v-slide-group>
-        </v-sheet>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import brandCard from '../../related/brandCard.vue'
-
-  const model = ref(null)
-  const {
-    $directus,
-    $readItems
-  } = useNuxtApp()
-
-  const {
-    data: relatedbrands
-  } = await useAsyncData('relatedbrands', () => {
-    return $directus.request($readItems('brands', {
-      fields: ['*',
-        'image.*',
-      ],
-      limit: 10,
-      filter: {
-        status: {
-          _eq: "published"
-        }
-      }
-    }))
-  })
-</script>

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

@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
-      data-sortbtn="btn-primary">
-      <div class="container-fluid">
-        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
-          Related Products</h2>
-        <div class="underline align-left pb-3">
-          <div class="line"></div>
-        </div>
-        <v-sheet class="mx-auto">
-          <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
-              v-for="(products, index) in related" :key="index">
-              <productCard :product="products" :class="['ma-4', selectedClass]" @click="toggle" />
-
-              <div class="d-flex fill-height align-center justify-center">
-                <v-scale-transition>
-                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
-                </v-scale-transition>
-              </div>
-            </v-slide-group-item>
-          </v-slide-group>
-        </v-sheet>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import productCard from './productCard.vue'
-import { useCatalogFallback } from '../../../composables/useCatalog'
-
-  const model = ref(null)
-  const catalog = useCatalogFallback()
-
-  const {
-    data: related
-  } = await useAsyncData('related', async () => {
-    // delegate to adapter when available, otherwise fallback to Directus via composable
-    return await catalog.listProducts({ limit: 10, filter: { status: { _eq: 'published' } } })
-  })
-</script>

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

@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <v-sheet class="mx-auto row align-items-stretch items-row">
-      <v-toolbar title="Radio Stations from the community" color="transparent">
-        <NuxtLink to="/departments/categories/stations/">All Radio Stations</NuxtLink>
-      </v-toolbar>
-      <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-        <v-slide-group-item v-slot="{ toggle, selectedClass }" v-for="(result, index) in stationSlide" :key="index">
-          <stations style="margin: 10px;" :radio="result" :class="['ma-4', selectedClass]" @click="toggle" />
-        </v-slide-group-item>
-      </v-slide-group>
-    </v-sheet>
-  </div>
-</template>
-
-<script setup>
-  import {
-    ref,
-  } from 'vue';
-  import stations from './radiostation.vue'
-
-  const model = ref(null);
-  const {
-    $directus,
-    $readItems
-  } = useNuxtApp()
-
-  const {
-    data: stationSlide
-  } = await useAsyncData('stationSlide', () => {
-    return $directus.request($readItems('radios', {
-      fields: ['*', { '*': ['*'] }],
-      filter: {
-        status: {
-          _eq: "published"
-        }
-      }
-    }))
-  })
-</script>

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

@@ -1,41 +0,0 @@
-<template>
-    <v-row>
-        <v-col cols="12">
-            <h6>Delivery</h6>
-        </v-col>
-
-        <v-col cols="12">
-            <v-select v-model="selected" :items="shippingOptions" item-title="name" item-value="id"
-                label="Select Delivery Method" single-line variant="solo" :loading="loading"
-                :disabled="loading || shippingOptions.length === 0"></v-select>
-        </v-col>
-    </v-row>
-</template>
-
-<script setup>
-import { onMounted, watch } from 'vue'
-import { useShippingSelection } from '~/app/composables/cart/useShippingSelection'
-
-const props = defineProps({
-    modelValue: { type: [String, Number, null], default: null }
-})
-const emit = defineEmits(['shippingOption-selected', 'update:modelValue'])
-
-const { shippingOptions, selected, loading, load } = useShippingSelection(props.modelValue)
-
-onMounted(() => {
-    load()
-})
-
-watch(() => props.modelValue, (val) => {
-    if (val === selected.value) return
-    selected.value = val
-})
-
-watch(selected, async (val) => {
-    const option = shippingOptions.value.find((s) => s.id === val) || null
-    // update parent v-model
-    emit('update:modelValue', val)
-    emit('shippingOption-selected', option)
-})
-</script>

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

@@ -1,42 +0,0 @@
-<template>
-    <v-row>
-        <v-col cols="12">
-            <h6>Size</h6>
-        </v-col>
-
-        <v-col cols="12">
-            <v-select v-model="selectedSize" :items="sizes" label="Select Size" item-value="id" item-title="name" single-line variant="solo" />
-        </v-col>
-    </v-row>
-</template>
-
-<script setup>
-import { ref, onMounted, watch } from 'vue'
-const emit = defineEmits(['size-selected'])
-const sizes = ref([])
-const selectedSize = ref(null)
-
-
-const catalog = useCatalogFallback()
-
-const loadSizes = async () => {
-    try {
-        // adapter may expose attributes; composable falls back to Directus
-        const res = await catalog.listAttributes({ filter: { attribute_code: { _eq: 'size' } }, sort: ['id'] })
-
-        const attr = (res && res[0]) || null
-        const opts = attr?.options || []
-        sizes.value = opts.map((o, i) => ({ id: `${attr?.id || 'size'}-${i}`, name: o.name }))
-    } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn('Failed to load size attributes', e)
-        sizes.value = []
-    }
-}
-
-watch(selectedSize, (newSize) => emit('size-selected', newSize))
-
-onMounted(() => {
-    loadSizes()
-})
-</script>