@mframework/layer-commerce 0.0.7 → 0.0.8

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

@@ -0,0 +1,41 @@
+<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 { useProductReviews } from '~/composables/useProductReviews';
+import type { ProductAccordionPropsType } from './types';
+import { toRefs, ref } from 'vue';
+
+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

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

@@ -0,0 +1,5 @@
+import { SfProduct } from "~/composables";
+
+export type ProductAccordionPropsType = {
+  product: SfProduct;
+};

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

@@ -0,0 +1,52 @@
+<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 './types';
+import { computed } from 'vue';
+import { useProductAttribute } from '~/composables/useProductAttribute';
+
+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

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

@@ -0,0 +1,5 @@
+import { SfProduct } from "~/composables";
+
+export type ProductPropertiesProps = {
+  product: SfProduct;
+};

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

@@ -0,0 +1,28 @@
+<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 './types';
+
+defineProps<ProductSliderProps>();
+</script>

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { SfProduct } from "~/composables";
+
+export type RecommendedProductsProps = {
+  products: SfProduct[];
+};

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

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

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

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

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

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

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

@@ -0,0 +1,69 @@
+<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);
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  const {
+    data: bestsellers
+  } = await useAsyncData('bestsellers', () => {
+    return $directus.request($readItems('products', {
+      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

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