@meeovi/layer-commerce 1.0.10 → 1.0.13

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>

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

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

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

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

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

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

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

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

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