@mframework/layer-commerce 0.0.5 → 0.0.8

package/app/components/catalog/vendor/pages/orders.vue

@@ -0,0 +1,68 @@
+<template>
+    <v-card>
+        <v-toolbar color="" title="Orders"></v-toolbar>
+        <v-tabs v-model="tab" bg-color="primary">
+            <v-tab value="one">Orders</v-tab>
+            <v-tab value="two">Returns</v-tab>
+        </v-tabs>
+        <v-card-text>
+            <v-tabs-window v-model="tab">
+                <v-tabs-window-item value="one">
+                    <div v-if="orders.length">
+                        <div v-for="order in orders" :key="order.id">
+                            <p>Order #: {{ order.code }}</p>
+                            <p>Status: {{ order.state }}</p>
+                            <p>Total: {{ formatPrice(order.totalWithTax) }}</p>
+                        </div>
+                    </div>
+                    <div v-else>No orders found.</div>
+                </v-tabs-window-item>
+                <v-tabs-window-item value="two">
+                    <!-- Returns tab can be filled with returns/refunds if needed -->
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+    import {
+        ref,
+        onMounted
+    } from 'vue';
+    import {
+        useVendureQuery
+    } from '@/app/composables/useVendureQuery';
+    import getOrderListQuery from '#graphql/app/commerce/queries/getOrderList.gql';
+
+    const tab = ref('one');
+    const orders = ref([]);
+    const {
+        data,
+        refetch
+    } = useVendureQuery(getOrderListQuery);
+
+    onMounted(() => {
+        if (data.value?.orders?.items) {
+            orders.value = data.value.orders.items;
+        }
+    });
+
+    const formatPrice = (amount: number) => {
+        if (!amount) return '$0.00';
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+        }).format(amount / 100);
+    };
+
+
+    definePageMeta({
+      layout: "sellers",
+      middleware: ['authenticated'],
+    });
+
+    useHead({
+        title: 'Sellers Orders'
+    })
+</script>

package/app/components/catalog/vendor/pages/products.vue

@@ -0,0 +1,55 @@
+<template>
+    <v-card>
+        <v-toolbar color="" title="Products">
+            <addproduct />
+        </v-toolbar>
+        <v-tabs v-model="tab" bg-color="primary">
+            <v-tab value="one">My Products</v-tab>
+        </v-tabs>
+        <v-card-text>
+            <v-tabs-window v-model="tab">
+                <v-tabs-window-item value="one">
+                    <div v-if="products.length">
+                        <productCard v-for="product in products" :key="product.id" :product="product" />
+                    </div>
+                    <div v-else>No products found.</div>
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+    import {
+        ref,
+        onMounted
+    } from 'vue';
+    import {
+        useVendureQuery
+    } from '@/app/composables/useVendureQuery';
+    import getProductListQuery from '#graphql/app/commerce/queries/getProductList.gql';
+    import addproduct from '~/components/crud/create/add-product.vue';
+    import productCard from '~/components/productCard.vue';
+
+    const tab = ref('one');
+    const products = ref([]);
+    const {
+        data,
+        refetch
+    } = useVendureQuery(getProductListQuery);
+
+    onMounted(() => {
+        if (data.value?.products?.items) {
+            products.value = data.value.products.items;
+        }
+    });
+
+    definePageMeta({
+        layout: 'sellers',
+        middleware: ['authenticated'],
+    });
+
+    useHead({
+        title: 'Sellers Products',
+    });
+</script>

package/app/components/catalog/vendor/pages/reviews.vue

@@ -0,0 +1,48 @@
+<template>
+    <v-card>
+        <v-toolbar color="" title="Product Reviews"></v-toolbar>
+        <v-card-text>
+            <div v-if="reviews.length">
+                <div v-for="review in reviews" :key="review.id">
+                    <p><strong>{{ review.author?.firstName }} {{ review.author?.lastName }}</strong> ({{ new Date(review.createdAt).toLocaleDateString() }})</p>
+                    <p>Rating: {{ review.rating }}</p>
+                    <p>{{ review.summary }}</p>
+                    <p>{{ review.body }}</p>
+                </div>
+            </div>
+            <div v-else>No reviews found.</div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+    import {
+        ref,
+        onMounted
+    } from 'vue'
+    import {
+        useVendureQuery
+    } from '@/app/composables/useVendureQuery';
+    import getProductReviewsQuery from '#graphql/app/commerce/queries/getProductReviews.gql';
+
+    const reviews = ref([]);
+    const {
+        data,
+        refetch
+    } = useVendureQuery(getProductReviewsQuery);
+
+    onMounted(() => {
+        if (data.value?.product?.reviews?.items) {
+            reviews.value = data.value.product.reviews.items;
+        }
+    });
+
+    definePageMeta({
+      layout: "sellers",
+      middleware: ['authenticated'],
+    });
+
+    useHead({
+        title: 'Sellers Stores'
+    })
+</script>

package/app/components/catalog/vendor/pages/shipments.vue

@@ -0,0 +1,43 @@
+<template>
+    <v-card>
+        <v-toolbar color="" title="Stores"></v-toolbar>
+        <v-tabs v-model="tab" bg-color="primary">
+            <v-tab value="one">My Stores</v-tab>
+            <!--<v-tab value="two">Item Two</v-tab>
+            <v-tab value="three">Item Three</v-tab>-->
+        </v-tabs>
+
+        <v-card-text>
+            <v-tabs-window v-model="tab">
+                <v-tabs-window-item value="one">
+                    One
+                </v-tabs-window-item>
+
+                <v-tabs-window-item value="two">
+                    Two
+                </v-tabs-window-item>
+
+                <v-tabs-window-item value="three">
+                    Three
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+
+    const tab = ref(null);
+
+    definePageMeta({
+      layout: "sellers",
+      middleware: ['authenticated'],
+    });
+
+    useHead({
+        title: 'Sellers Stores'
+    })
+</script>

package/app/components/catalog/vendor/pages/stores.vue

@@ -0,0 +1,43 @@
+<template>
+    <v-card>
+        <v-toolbar color="" title="Stores"></v-toolbar>
+        <v-tabs v-model="tab" bg-color="primary">
+            <v-tab value="one">My Stores</v-tab>
+            <!--<v-tab value="two">Item Two</v-tab>
+            <v-tab value="three">Item Three</v-tab>-->
+        </v-tabs>
+
+        <v-card-text>
+            <v-tabs-window v-model="tab">
+                <v-tabs-window-item value="one">
+                    One
+                </v-tabs-window-item>
+
+                <v-tabs-window-item value="two">
+                    Two
+                </v-tabs-window-item>
+
+                <v-tabs-window-item value="three">
+                    Three
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+
+    const tab = ref(null);
+
+    definePageMeta({
+      layout: "sellers",
+      middleware: ['authenticated'],
+    });
+
+    useHead({
+        title: 'Sellers Stores'
+    })
+</script>

package/app/components/content/blocks/videoproduct.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <video :src="product?.product_links?.sku" controls></video>
+    </div>
+</template>
+
+<script setup>
+
+</script>

package/app/components/content/pages/checkout.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <form id="payment-form">
+      <div id="payment-element">
+        <!-- Stripe Elements will inject the payment form here -->
+      </div>
+      <button id="submit" :disabled="isLoading">
+        <span v-if="isLoading">Processing...</span>
+        <span v-else>Pay now</span>
+      </button>
+      <div v-if="errorMessage" class="error-message">
+        {{ errorMessage }}
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+const { $stripe } = useNuxtApp()
+const elements = ref(null)
+const isLoading = ref(false)
+const errorMessage = ref('')
+
+// Initialize payment element
+onMounted(async () => {
+  // Get clientSecret from your server
+  const response = await fetch('/api/payment/create-payment-intent', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      amount: 1000, // Amount in cents
+      currency: 'usd'
+    })
+  })
+  const { clientSecret } = await response.json()
+
+  elements.value = $stripe.elements({
+    clientSecret,
+    appearance: {
+      theme: 'stripe'
+    }
+  })
+
+  const paymentElement = elements.value.create('payment')
+  paymentElement.mount('#payment-element')
+})
+
+// Handle form submission
+const handleSubmit = async (e) => {
+  e.preventDefault()
+  
+  if (!elements.value) {
+    return
+  }
+
+  isLoading.value = true
+
+  try {
+    const { error } = await $stripe.confirmPayment({
+      elements: elements.value,
+      confirmParams: {
+        return_url: `${window.location.origin}/payment-completion`,
+      }
+    })
+
+    if (error) {
+      errorMessage.value = error.message
+    }
+  } catch (e) {
+    errorMessage.value = 'An unexpected error occurred.'
+  }
+
+  isLoading.value = false
+}
+</script>
+
+<style scoped>
+form {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+#payment-element {
+  margin-bottom: 24px;
+}
+
+button {
+  background: #5469d4;
+  color: #ffffff;
+  border-radius: 4px;
+  border: 0;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  transition: all 0.2s ease;
+}
+
+button:hover {
+  filter: brightness(1.1);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.error-message {
+  color: rgb(205, 53, 53);
+  margin-top: 12px;
+  text-align: center;
+}
+</style>

package/app/components/content/pages/meeoviGlobal.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="globalPage">
+        <v-row>
+            <v-col cols="6">
+                <v-list>
+                    <v-list-item>
+                        <h5>{{ page?.repeaterTextBox?.[0]?.description }}</h5>
+                    </v-list-item>
+
+                    <v-list-item>
+                        <p>{{ page?.repeaterTextBox?.[1]?.description }}</p>
+                    </v-list-item>
+
+                    <v-list-item>
+                        <v-menu>
+                            <template v-slot:activator="{ props }">
+                                <v-btn color="warning" v-bind="props">
+                                    {{ page?.repeaterTextBox?.[2]?.description }}
+                                </v-btn>
+                            </template>
+                            <v-list>
+                                <v-list-item v-for="(sites, index) in sites" :key="index" :value="index">
+                                    <v-list-item :prepend-icon="sites?.icon" :href="`https://www.meeovi${sites?.url}`">{{ sites?.name }}</v-list-item>
+                                </v-list-item>
+                            </v-list>
+                        </v-menu>
+                    </v-list-item>
+
+                    <v-list-item>
+                        <div style="display: inline-block;"><p><strong>Note: </strong>{{ page?.repeaterTextBox?.[3]?.description }}</p></div>
+                    </v-list-item>
+                </v-list>
+            </v-col>
+
+            <v-col cols="6">
+                <v-list>
+                    <v-list-item>
+                        <h5>{{ page?.repeaterTextBox?.[4]?.description }}</h5>
+                    </v-list-item>
+
+                    <v-list-item>
+                        <p>{{ page?.repeaterTextBox?.[5]?.description }}</p>
+                    </v-list-item>
+                </v-list>
+            </v-col>
+
+            <v-divider></v-divider>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: page
+    } = await useAsyncData('page', () => {
+        return $directus.request($readItem('page', '46', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>