@meeovi/layer-commerce 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meeovi/layer-commerce",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Commerce Layer for the Alternate Framework",
   "keywords": [
     "commerce",
@@ -39,5 +39,11 @@
     "jest-cucumber": "^4.5.0",
     "nuxt": "^4.3.0",
     "typescript": "^5.8.2"
-  }
+  },
+  "files": [
+    "nuxt.config.ts",
+    "layers",
+    "runtime",
+    "src"
+  ]
 }

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

@@ -1,39 +0,0 @@
-<template>
-  <div data-testid="product-accordion">
-    <UiAccordionItem
-      summary-class="md:rounded-md w-full hover:bg-neutral-100 py-2 pl-4 pr-3 flex justify-between items-center"
-      v-model="productDetailsOpen"
-    >
-      <template #summary>
-        <h2 class="font-bold font-headings text-lg leading-6 md:text-2xl">
-          {{ $t('productDetails') }}
-        </h2>
-      </template>
-      <p>{{ product.description }}</p>
-    </UiAccordionItem>
-    <UiDivider class="my-4" />
-    <UiAccordionItem
-      summary-class="md:rounded-md w-full hover:bg-neutral-100 py-2 pl-4 pr-3 flex justify-between items-center"
-    >
-      <template #summary>
-        <h2 class="font-bold font-headings text-lg leading-6 md:text-2xl">
-          {{ $t('customerReviews') }}
-        </h2>
-      </template>
-      <UiReview v-for="review in productReviews" :key="review.id" :review="review" class="mb-4" />
-    </UiAccordionItem>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { ProductAccordionPropsType } from '~/components/ProductAccordion/types';
-
-const props = defineProps<ProductAccordionPropsType>();
-
-const { product } = toRefs(props);
-const { data: productReviews, fetchProductReviews } = useProductReviews(product.value.slug);
-
-const productDetailsOpen = ref(true);
-
-fetchProductReviews(product.value.slug);
-</script>

package/app/components/catalog/product/ProductAccordion/__tests__/ProductAccordion.spec.ts

@@ -1,15 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ProductAccordion from '~/components/ProductAccordion/ProductAccordion.vue';
-import { mockProduct } from '~/composables/useProductAttribute/__tests__/useProduct.mock';
-
-describe('<ProductAccordion />', () => {
-  it('should render component', () => {
-    const { getByTestId } = mount(ProductAccordion, {
-      props: {
-        product: mockProduct,
-      },
-    });
-
-    expect(getByTestId('product-accordion'));
-  });
-});

package/app/components/catalog/product/ProductAccordion/types.ts

@@ -1,5 +0,0 @@
-import type { Product } from '../../../../composables/_types'
-
-export type ProductAccordionPropsType = {
-  product: Product
-}

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

@@ -1,50 +0,0 @@
-<template>
-  <div class="px-4" data-testid="product-properties">
-    <fieldset v-if="sizes?.length" class="pb-4">
-      <legend class="block mb-2 text-base font-medium leading-6 text-neutral-900">{{ $t('size') }}</legend>
-      <span v-for="{ label, value } in sizes" class="mr-2 mb-2 uppercase" :key="value">
-        <SfChip
-          class="min-w-[48px]"
-          size="sm"
-          :input-props="{
-            onClick: (e) => value == selectedSize && e.preventDefault(),
-          }"
-          :model-value="value === selectedSize"
-          @update:model-value="value !== selectedSize && setAttribute('size', value)"
-        >
-          {{ label }}
-        </SfChip>
-      </span>
-    </fieldset>
-    <fieldset v-if="sizes?.length" class="pb-2">
-      <legend class="block mb-2 text-base font-medium leading-6 text-neutral-900">{{ $t('color') }}</legend>
-      <span v-for="{ label, value } in colors" class="mr-2 mb-2 uppercase" :key="value">
-        <SfChip
-          class="min-w-[48px]"
-          size="sm"
-          :input-props="{
-            onClick: (e) => value == selectedSize && e.preventDefault(),
-          }"
-          :model-value="value === selectedColor"
-          @update:model-value="setAttribute('color', value)"
-        >
-          <template #prefix><SfThumbnail size="sm" :style="{ background: value }" /></template>
-          {{ label }}
-        </SfChip>
-      </span>
-    </fieldset>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SfChip, SfThumbnail } from '@storefront-ui/vue';
-import { ProductPropertiesProps } from '~/components/ProductProperties/types';
-
-const props = defineProps<ProductPropertiesProps>();
-
-const { getAttributeList, getAttribute, setAttribute } = useProductAttribute(props.product, ['color', 'size']);
-const sizes = getAttributeList('size');
-const colors = getAttributeList('color');
-const selectedSize = computed(() => getAttribute('size'));
-const selectedColor = computed(() => getAttribute('color'));
-</script>

package/app/components/catalog/product/ProductProperties/__tests__/ProductProperties.spec.ts

@@ -1,15 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ProductProperties from '~/components/ProductProperties/ProductProperties.vue';
-import { mockProduct } from '~/composables/useProductAttribute/__tests__/useProduct.mock';
-
-describe('<ProductProperties />', () => {
-  it('should render component', () => {
-    const { getByTestId } = mount(ProductProperties, {
-      props: {
-        product: mockProduct
-      }
-    });
-
-    expect(getByTestId('product-properties'));
-  });
-});

package/app/components/catalog/product/ProductProperties/types.ts

@@ -1,5 +0,0 @@
-import type { Product } from '../../../../composables/_types'
-
-export type ProductPropertiesProps = {
-  product: Product
-}

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

@@ -1,28 +0,0 @@
-<template>
-  <SfScrollable
-    buttons-placement="floating"
-    class="items-center pb-4"
-    :wrapper-class="wrapperClass"
-    data-testid="product-slider"
-  >
-    <UiProductCard
-      v-for="product in items"
-      :key="product.id"
-      class="max-w-[192px]"
-      :name="product.name ?? ''"
-      :slug="product.slug"
-      :image-url="product.primaryImage?.url ?? ''"
-      :image-alt="product.primaryImage?.alt ?? ''"
-      :price="product.price?.value.amount"
-      :rating-count="product.rating?.count"
-      :rating="product.rating?.average"
-    />
-  </SfScrollable>
-</template>
-
-<script setup lang="ts">
-import { SfScrollable } from '@storefront-ui/vue';
-import type { ProductSliderProps } from '~/components/ProductSlider/types';
-
-defineProps<ProductSliderProps>();
-</script>

package/app/components/catalog/product/ProductSlider/__tests__/ProductSlider.spec.ts

@@ -1,14 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ProductSlider from '~/components/ProductSlider/ProductSlider.vue';
-
-describe('<ProductSlider />', () => {
-  it('should render component', () => {
-    const { getByTestId } = mount(ProductSlider, {
-      props: {
-        items: [],
-      },
-    });
-
-    expect(getByTestId('product-slider'));
-  });
-});

package/app/components/catalog/product/ProductSlider/types.ts

@@ -1,7 +0,0 @@
-import type { HTMLAttributes } from 'vue'
-import type { Product } from '../../../../composables/_types'
-
-export type ProductSliderProps = {
-  items?: Product[]
-  wrapperClass?: HTMLAttributes['class']
-}

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

@@ -1,12 +0,0 @@
-<template>
-  <p data-testid="recommended-products" class="my-4 typography-text-lg">
-    {{ $t('recommendedProducts') }}
-  </p>
-  <ProductSlider :items="products" />
-</template>
-
-<script setup lang="ts">
-import type { RecommendedProductsProps } from '~/components/RecommendedProducts/types';
-
-defineProps<RecommendedProductsProps>();
-</script>

package/app/components/catalog/product/RecommendedProducts/types.ts

@@ -1,5 +0,0 @@
-import type { Product } from '../../../../composables/_types'
-
-export type RecommendedProductsProps = {
-  products: Product[]
-}

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

@@ -1,11 +0,0 @@
-<template>
-  <NuxtLazyHydrate when-visible>
-    <ProductSlider v-bind="$attrs" :wrapper-class="['max-w-screen-3xl mx-auto px-4 md:px-10 mb-20', $attrs.class]" />
-  </NuxtLazyHydrate>
-</template>
-
-<script>
-export default {
-  inheritAttrs: false,
-};
-</script>

package/app/components/catalog/product/add-attribute.vue

@@ -1,54 +0,0 @@
-<template>
-  <v-row justify="center">
-    <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition">
-      <template v-slot:activator="{ props }">
-        <v-btn v-bind="props" class="rightAddBtn">
-          <v-icon start icon="fas:fa fa-plus"></v-icon>Create a Attribute
-        </v-btn>
-      </template>
-      <v-card class="b-1">
-        <v-card-title>
-          <h3>Create New Attribute</h3>
-        </v-card-title>
-
-        <v-card-text>
-          <div v-if="formError" class="error">{{ formError }}</div>
-          <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
-          <form @submit.prevent="submitForm">
-            <DirectusFormElement v-for="field in attributeFields" :key="field.field" :field="field" v-model="form[field.field]" />
-            <v-btn type="submit">Submit</v-btn>
-          </form>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </v-row>
-
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
-import { useDirectusForm } from '#shared/app/composables/globals/useDirectusForm'
-
-const dialog = ref(false)
-const { $directus, $readFieldsByCollection } = useNuxtApp()
-
-const { data, error } = await useAsyncData('attributes', async () => {
-  return $directus.request($readFieldsByCollection('attributes'))
-})
-
-// guard against undefined/null data.value and empty arrays
-if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
-  console.error(error)
-  throw createError({
-    statusCode: 404,
-    statusMessage: 'Attribute not found'
-  })
-}
-
-const attributeFields = data
-
-
-// use composable for form handling (validation, submit, provide context)
-const { form, formError, formSuccess, submitForm } = useDirectusForm('attributes', attributeFields, { clearOnSuccess: true, closeDialogRef: dialog })
-</script>

package/app/components/catalog/product/add-product-type.vue

@@ -1,54 +0,0 @@
-<template>
-  <v-row justify="center">
-    <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition">
-      <template v-slot:activator="{ props }">
-        <v-btn v-bind="props" class="rightAddBtn">
-          <v-icon start icon="fas:fa fa-plus"></v-icon>Create a Product Type
-        </v-btn>
-      </template>
-      <v-card class="b-1">
-        <v-card-title>
-          <h3>Create New Product Type</h3>
-        </v-card-title>
-
-        <v-card-text>
-          <div v-if="formError" class="error">{{ formError }}</div>
-          <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
-          <form @submit.prevent="submitForm">
-            <DirectusFormElement v-for="field in productTypeFields" :key="field.field" :field="field" v-model="form[field.field]" />
-            <v-btn type="submit">Submit</v-btn>
-          </form>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </v-row>
-
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
-import { useDirectusForm } from '#shared/app/composables/globals/useDirectusForm'
-
-const dialog = ref(false)
-const { $directus, $readFieldsByCollection } = useNuxtApp()
-
-const { data, error } = await useAsyncData('product_types', async () => {
-  return $directus.request($readFieldsByCollection('product_types'))
-})
-
-// guard against undefined/null data.value and empty arrays
-if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
-  console.error(error)
-  throw createError({
-    statusCode: 404,
-    statusMessage: 'Product Type not found'
-  })
-}
-
-const productTypeFields = data
-
-
-// use composable for form handling (validation, submit, provide context)
-const { form, formError, formSuccess, submitForm } = useDirectusForm('product_types', productTypeFields, { clearOnSuccess: true, closeDialogRef: dialog })
-</script>

package/app/components/catalog/product/add-product.vue

@@ -1,53 +0,0 @@
-<template>
-  <v-row justify="center">
-    <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition">
-      <template v-slot:activator="{ props }">
-        <v-btn v-bind="props" class="rightAddBtn">
-          <v-icon start icon="fas:fa fa-plus"></v-icon>Create a Product
-        </v-btn>
-      </template>
-      <v-card class="b-1">
-        <v-card-title>
-          <h3>Create New Product</h3>
-        </v-card-title>
-
-        <v-card-text>
-          <div v-if="formError" class="error">{{ formError }}</div>
-          <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
-          <form @submit.prevent="submitForm">
-            <DirectusFormElement v-for="field in productFields" :key="field.field" :field="field" v-model="form[field.field]" />
-            <v-btn type="submit">Submit</v-btn>
-          </form>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </v-row>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
-import { useDirectusForm } from '#shared/app/composables/globals/useDirectusForm'
-
-const dialog = ref(false)
-const { $directus, $readFieldsByCollection } = useNuxtApp()
-
-const { data, error } = await useAsyncData('products', async () => {
-  return $directus.request($readFieldsByCollection('products'))
-})
-
-// guard against undefined/null data.value and empty arrays
-if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
-  console.error(error)
-  throw createError({
-    statusCode: 404,
-    statusMessage: 'Product not found'
-  })
-}
-
-const productFields = data
-
-
-// use composable for form handling (validation, submit, provide context)
-const { form, formError, formSuccess, submitForm } = useDirectusForm('products', productFields, { clearOnSuccess: true, closeDialogRef: dialog })
-</script>

package/app/components/catalog/product/add-showcase.vue

@@ -1,52 +0,0 @@
-<template>
-  <v-row justify="center">
-    <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition">
-      <template v-slot:activator="{ props }">
-        <v-btn v-bind="props" class="rightAddBtn">
-          <v-icon start icon="fas:fa fa-plus"></v-icon>Create a Showcase
-        </v-btn>
-      </template>
-      <v-card class="b-1">
-        <v-card-title>
-          <h3>Create New Showcase</h3>
-        </v-card-title>
-
-        <v-card-text>
-          <div v-if="formError" class="error">{{ formError }}</div>
-          <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
-          <form @submit.prevent="submitForm">
-            <DirectusFormElement v-for="field in showcaseFields" :key="field.field" :field="field" v-model="form[field.field]" />
-            <v-btn type="submit">Submit</v-btn>
-          </form>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </v-row>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
-import { useDirectusForm } from '#shared/app/composables/globals/useDirectusForm'
-
-const dialog = ref(false)
-const { $directus, $readFieldsByCollection } = useNuxtApp()
-
-const { data, error } = await useAsyncData('showcases', async () => {
-  return $directus.request($readFieldsByCollection('showcases'))
-})
-
-// guard against undefined/null data.value and empty arrays
-if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
-  console.error(error)
-  throw createError({
-    statusCode: 404,
-    statusMessage: 'Showcase not found'
-  })
-}
-
-const showcaseFields = data
-
-// use composable for form handling (validation, submit, provide context)
-const { form, formError, formSuccess, submitForm } = useDirectusForm('showcases', showcaseFields, { clearOnSuccess: true, closeDialogRef: dialog })
-</script>

package/app/components/catalog/product/add-station.vue

@@ -1,54 +0,0 @@
-<template>
-  <v-row justify="center">
-    <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition">
-      <template v-slot:activator="{ props }">
-        <v-btn v-bind="props" class="rightAddBtn">
-          <v-icon start icon="fas:fa fa-plus"></v-icon>Create a Station
-        </v-btn>
-      </template>
-      <v-card class="b-1">
-        <v-card-title>
-          <h3>Create New Station</h3>
-        </v-card-title>
-
-        <v-card-text>
-          <div v-if="formError" class="error">{{ formError }}</div>
-          <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
-          <form @submit.prevent="submitForm">
-            <DirectusFormElement v-for="field in stationFields" :key="field.field" :field="field" v-model="form[field.field]" />
-            <v-btn type="submit">Submit</v-btn>
-          </form>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </v-row>
-
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
-import { useDirectusForm } from '#shared/app/composables/globals/useDirectusForm'
-
-const dialog = ref(false)
-const { $directus, $readFieldsByCollection } = useNuxtApp()
-
-const { data, error } = await useAsyncData('radios', async () => {
-  return $directus.request($readFieldsByCollection('radios'))
-})
-
-// guard against undefined/null data.value and empty arrays
-if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
-  console.error(error)
-  throw createError({
-    statusCode: 404,
-    statusMessage: 'Station not found'
-  })
-}
-
-const stationFields = data
-
-
-// use composable for form handling (validation, submit, provide context)
-const { form, formError, formSuccess, submitForm } = useDirectusForm('radios', stationFields, { clearOnSuccess: true, closeDialogRef: dialog })
-</script>

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

@@ -1,57 +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">
-          Best Sellers</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 bestsellers" :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 { useCatalogFallback } from '../../../composables/useCatalog'
-  const catalog = useCatalogFallback()
-
-  const {
-    data: bestsellers
-  } = await useAsyncData('bestsellers', async () => {
-    return await catalog.listProducts({
-      fields: ['*', 'products.products_id.*', 'products.products_id.image.*', 'currency.currency_id.*', 'brands.brands_id.*', 'image.*'],
-      limit: 10,
-      filter: {
-        lists: {
-          lists_id: {
-            lists_types: {
-              lists_types_id: {
-                name: { _eq: 'Best Sellers' }
-              }
-            }
-          }
-        },
-        status: { _eq: 'published' }
-      }
-    })
-  })
-</script>

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

@@ -1,93 +0,0 @@
-<template>
-    <div class="auction-item">
-        <h2>{{ item.name }}</h2>
-        <NuxtImg loading="lazy" :src="item.image" :alt="item.name" />
-        <p>Current Bid: ${{ currentBid }}</p>
-        <p>Time Left: {{ timeLeft }}</p>
-        <input v-model.number="bidAmount" type="number" :min="minBid" step="0.01" />
-        <button @click="placeBid" :disabled="!canBid">Place Bid</button>
-        <div v-if="bidHistory.length > 0">
-            <h3>Bid History</h3>
-            <ul>
-                <li v-for="bid in bidHistory" :key="bid.id">
-                    {{ bid.user }}: ${{ bid.amount }}
-                </li>
-            </ul>
-        </div>
-    </div>
-</template>
-
-<script setup>
-    import {
-        ref,
-        computed,
-        onMounted,
-        onUnmounted
-    } from 'vue'
-    import {
-        useUserStore
-    } from '#auth/app/stores/user'
-
-    const {
-        $io
-    } = useNuxtApp()
-    const userStore = useUserStore()
-
-    const props = defineProps({
-        itemId: {
-            type: String,
-            required: true
-        }
-    })
-
-    const item = ref({})
-    const currentBid = ref(0)
-    const timeLeft = ref('')
-    const bidAmount = ref(0)
-    const bidHistory = ref([])
-
-    const minBid = computed(() => currentBid.value + 1)
-    const canBid = computed(() => bidAmount.value >= minBid.value)
-
-    onMounted(async () => {
-        // Fetch initial item data
-        const {
-            data
-        } = await useFetch(`/api/items/${props.itemId}`)
-        item.value = data.value
-        currentBid.value = item.value.startingBid
-
-        $io.emit('join-auction', props.itemId)
-
-        $io.on('new-bid', (bid) => {
-            currentBid.value = bid.amount
-            bidHistory.value.unshift(bid)
-        })
-
-        $io.on('auction-time-update', (time) => {
-            timeLeft.value = time
-        })
-
-        $io.on('auction-ended', (winner) => {
-            alert(`Auction ended! Winner: ${winner}`)
-        })
-    })
-
-    const placeBid = () => {
-        if (canBid.value) {
-            $io.emit('place-bid', {
-                itemId: props.itemId,
-                amount: bidAmount.value,
-                user: userStore.currentUser.name
-            })
-            bidAmount.value = 0
-        }
-    }
-
-    onUnmounted(() => {
-        $io.off('new-bid')
-        $io.off('auction-time-update')
-        $io.off('auction-ended')
-        $io.emit('leave-auction', props.itemId)
-    })
-</script>