@mframework/layer-commerce 0.0.5 → 0.0.8

package/app/components/sales/orders.vue

@@ -0,0 +1,378 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+            <div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+            <div class="align-center container">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-lg-8">
+                        <h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+                            <strong> {{ ordersPage?.name }}</strong>
+                        </h3>
+                        <p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="ordersPage?.content"></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <v-card variant="text">
+            <v-toolbar :style="`background-color: ${orderBar?.color}; color: ${orderBar?.colortext} !important`">
+                <v-toolbar-title>{{ orderBar?.name }}</v-toolbar-title>
+
+
+                <v-tabs v-model="tab" align-tabs="center">
+                    <div v-for="(menu, index) in orderBar?.menus" :key="index">
+                        <v-tab :value="menu?.value">
+                            <v-btn variant="text"
+                                :style="`color: ${orderBar?.colortext} !important`">{{ menu?.name }}</v-btn>
+                        </v-tab>
+                    </div>
+                </v-tabs>
+            </v-toolbar>
+        </v-card>
+
+        <v-tabs-window v-model="tab">
+            <!--Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[0]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="orders?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="order in orders" :key="order.id">
+                            <orderCard :order="order" />
+                        </v-col>
+                    </template>
+                    <div class="center-text" v-else>No Activity yet</div>
+                </v-row>
+            </v-tabs-window-item>
+
+            <!--Pending Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[1]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="pending?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="pendingOrder in pending"
+                            :key="pendingOrder.id">
+                            <orderCard :order="pendingOrder" />
+                        </v-col>
+                    </template>
+                    <div class="center-text" v-else>No Pending Orders</div>
+                </v-row>
+            </v-tabs-window-item>
+
+            <!--Processing Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[2]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="processing?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="processingOrder in processing"
+                            :key="processingOrder.id">
+                            <orderCard :order="processingOrder" />
+                        </v-col>
+                    </template>
+
+                    <div class="center-text" v-else>No Processing Orders</div>
+                </v-row>
+            </v-tabs-window-item>
+
+            <!--On Hold Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[3]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="onHold?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="onHoldOrder in onHold"
+                            :key="onHoldOrder.id">
+                            <orderCard :order="onHoldOrder" />
+                        </v-col>
+                    </template>
+
+                    <div class="center-text" v-else>No On Hold Orders</div>
+                </v-row>
+            </v-tabs-window-item>
+
+            <!--Failed Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[4]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="failed?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="failedOrder in failed"
+                            :key="failedOrder.id">
+                            <orderCard :order="failedOrder" />
+                        </v-col>
+                    </template>
+
+                    <div class="center-text" v-else>No Failed Orders</div>
+                </v-row>
+            </v-tabs-window-item>
+
+            <!--Disputed Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[2]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="disputed?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="disputedOrder in disputed"
+                            :key="disputedOrder.id">
+                            <orderCard :order="disputedOrder" />
+                        </v-col>
+                    </template>
+
+                    <div class="center-text" v-else>No Disputed Orders</div>
+                </v-row>
+            </v-tabs-window-item>
+
+            <!--Completed Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[5]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="completed?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="completedOrder in completed"
+                            :key="completedOrder.id">
+                            <orderCard :order="completedOrder" />
+                        </v-col>
+                    </template>
+                    <div class="center-text" v-else>No Completed Orders</div>
+                </v-row>
+            </v-tabs-window-item>
+
+            <!--Refunded Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[4]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="refunded?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="refundedOrder in refunded"
+                            :key="refundedOrder.id">
+                            <orderCard :order="refundedOrder" />
+                        </v-col>
+                    </template>
+                    <div class="center-text" v-else>No Refunded Orders</div>
+                </v-row>
+            </v-tabs-window-item>
+
+            <!--Cancelled Orders-->
+            <v-tabs-window-item :value="orderBar?.menus?.[2]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="cancelled?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="cancelOrder in cancelled"
+                            :key="cancelOrder.id">
+                            <orderCard :order="cancelOrder" />
+                        </v-col>
+                    </template>
+
+                    <div class="center-text" v-else>No Cancelled Orders</div>
+                </v-row>
+            </v-tabs-window-item>
+        </v-tabs-window>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed
+    } from 'vue'
+    import orderCard from '~/components/related/order.vue'
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const user = useSupabaseUser()
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+    const tab = ref(null);
+
+    const {
+        data: orderBar
+    } = await useAsyncData('orderBar', async () => {
+        const resp = await $directus.request($readItem('navigation', '84', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+        return resp?.data ?? resp ?? null
+    })
+
+    const {
+        data: ordersPage
+    } = await useAsyncData('ordersPage', () => {
+        return $directus.request($readItem('pages', '86', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: orders
+    } = await useAsyncData('orders', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: pending
+    } = await useAsyncData('pending', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                payment_status: {
+                    _eq: 'pending'
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: processing
+    } = await useAsyncData('processing', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                payment_status: {
+                    _eq: 'processing'
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: onHold
+    } = await useAsyncData('onHold', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                payment_status: {
+                    _eq: 'on-hold'
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: failed
+    } = await useAsyncData('failed', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                payment_status: {
+                    _eq: 'failed'
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: disputed
+    } = await useAsyncData('disputed', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                payment_status: {
+                    _eq: 'disputed'
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: completed
+    } = await useAsyncData('completed', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                payment_status: {
+                    _eq: 'completed'
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: refunded
+    } = await useAsyncData('refunded', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                payment_status: {
+                    _eq: 'refunded'
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    const {
+        data: cancelled
+    } = await useAsyncData('cancelled', async () => {
+        const resp = await $directus.request($readItems('orders', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                },
+                payment_status: {
+                    _eq: 'cancelled'
+                }
+            },
+            sort: '-dated_created'
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    useHead({
+        title: 'Activity Feed',
+    })
+</script>

package/app/components/sales/shipments.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <!--<profilebar />-->
+        <section class="firmm4_features1 features1">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12 title_block">
+                        <h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
+                            <strong>Shipments</strong>
+                        </h3>
+                    </div>
+                </div>
+                <div class="row justify-content-center">
+                    <div class="card col-12 col-lg-3 col-md-6 col-sm-6" v-for="shipment in shipments" :key="shipment.id">
+                        <div class="card_wrapper">
+                            <div class="card-box">
+                                <div class="icon_block">
+                                    <div class="iconfont-wrapper">
+                                        <span class="mbr-iconfont mobi-mbri-cart-full mobi-mbri"></span>
+                                    </div>
+                                </div>
+                                <p class="card-text mbr-fonts-style display-4">Shipment: {{ shipment.id }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Ship Date: {{ new Date(shipment.createdAt).toLocaleDateString() }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Order #: {{ shipment.order?.code }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Total Quantity: {{ shipment.lines?.length }}</p>
+                                <p class="btn_link mbr-fonts-style display-4"><a :href="`/account/user/shipment/${shipment.id}`" class="text-secondary">View<span class="mobi-mbri mobi-mbri-right mbr-iconfont"></span></a></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {
+        ref,
+        onMounted
+    } from 'vue';
+    import {
+        useVendureQuery
+    } from '../../composables/useVendureQuery';
+    import getCustomerShipmentsQuery from '#graphql/app/commerce/queries/getCustomerShipments.gql';
+
+    const shipments = ref([]);
+    const {
+        data,
+        refetch
+    } = useVendureQuery(getCustomerShipmentsQuery);
+
+    onMounted(() => {
+        if (data.value?.activeCustomer?.shipments?.items) {
+            shipments.value = data.value.activeCustomer.shipments.items;
+        }
+    });
+
+    useHead({
+        title: 'Shipments',
+    })
+
+    definePageMeta({
+        //middleware: ['auth-logged-in'],
+    })
+</script>

package/app/components/sales/transactions.vue

@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="info1 cid-v5A0K07pfT" id="info1-bd" data-sortbtn="btn-primary">
+            <div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(68, 121, 217);"></div>
+            <div class="align-center container">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-lg-8">
+                        <h3 class="mbr-section-title mb-4 mbr-fonts-style display-1">
+                            <strong> {{ transactionPage?.name }}</strong>
+                        </h3>
+                        <p class="mbr-section-title mb-4 mbr-fonts-style display-7" v-dompurify-html="transactionPage?.content"></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <v-card variant="text">
+            <v-toolbar
+                :style="`background-color: ${transactionBar?.color}; color: ${transactionBar?.colortext} !important`">
+                <v-toolbar-title>{{ transactionBar?.name }}</v-toolbar-title>
+
+
+                <v-tabs v-model="tab" align-tabs="center">
+                    <div v-for="(menu, index) in transactionBar?.menus" :key="index">
+                        <v-tab :value="menu?.value">
+                            <v-btn variant="text"
+                                :style="`color: ${transactionBar?.colortext} !important`">{{ menu?.name }}</v-btn>
+                        </v-tab>
+                    </div>
+                </v-tabs>
+            </v-toolbar>
+        </v-card>
+
+        <v-tabs-window v-model="tab">
+            <!--Transactions-->
+            <v-tabs-window-item :value="transactionBar?.menus?.[0]?.value">
+                <v-row class="media-container-row">
+                    <template v-if="transactions?.length">
+                        <v-col class="wrap col-sm-12 col-lg-4 feedPost" v-for="transaction in transactions" :key="transaction.id">
+                            <postCard :post="transaction" />
+                        </v-col>
+                    </template>
+                    <div class="center-text" v-else>No Transactions Available</div>
+                </v-row>
+            </v-tabs-window-item>
+        </v-tabs-window>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed
+    } from 'vue'
+    import postCard from '~/components/related/post.vue'
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const user = useSupabaseUser()
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+    const tab = ref(null);
+
+    const {
+        data: transactionBar
+    } = await useAsyncData('transactionBar', async () => {
+        const resp = await $directus.request($readItem('navigation', '118', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+        return resp?.data ?? resp ?? null
+    })
+
+    const {
+        data: transactionPage
+    } = await useAsyncData('transactionPage', () => {
+        return $directus.request($readItem('pages', '86', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: transactions
+    } = await useAsyncData('transactions', async () => {
+        const resp = await $directus.request($readItems('transactions', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                user_id: {
+                    _eq: user?.id
+                }
+            }
+        }))
+        return resp?.data ?? resp ?? []
+    })
+
+    useHead({
+        title: 'Transactions',
+    })
+</script>

package/app/components/shop/add-shop.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 Shop
+        </v-btn>
+      </template>
+      <v-card class="b-1">
+        <v-card-title>
+          <h3>Create New Shop</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 shopFields" :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('shops', async () => {
+  return $directus.request($readFieldsByCollection('shops'))
+})
+
+// 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: 'Shop not found'
+  })
+}
+
+const shopFields = data
+
+
+// use composable for form handling (validation, submit, provide context)
+const { form, formError, formSuccess, submitForm } = useDirectusForm('shops', shopFields, { clearOnSuccess: true, closeDialogRef: dialog })
+</script>