@meeovi/layer-commerce 1.0.0 → 1.0.2

package/app/pages/compare.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="compare-page">
+    <div class="container mx-auto px-4 py-8">
+      <h1 class="text-3xl font-bold mb-8">Compare Products</h1>
+      
+      <div v-if="loading" class="text-center">
+        <p>Loading products...</p>
+      </div>
+      
+      <div v-else-if="error" class="text-center text-red-500">
+        <p>Error loading products: {{ error.message }}</p>
+      </div>
+      
+      <div v-else-if="!products.length" class="text-center">
+        <p>No products selected for comparison. Add products to your compare list to see them here.</p>
+        <NuxtLink to="/" class="mt-4 inline-block text-blue-500 hover:text-blue-700">
+          Continue Shopping
+        </NuxtLink>
+      </div>
+      
+      <div v-else>
+        <productCompareTable 
+          :products="products" 
+          @remove-product="handleRemoveProduct"
+        />
+        
+        <div class="mt-8 flex justify-between">
+          <button 
+            @click="clearCompareList" 
+            class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          >
+            Clear Compare List
+          </button>
+          <NuxtLink 
+            to="/" 
+            class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Continue Shopping
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useQuery, useMutation } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+import productCompareTable from '~/components/catalog/product/productCompareTable.vue';
+
+// GraphQL query to get compared products
+const COMPARED_PRODUCTS_QUERY = gql`
+  query GetComparedProducts {
+    customer {
+      compare_list {
+        items {
+          product {
+            uid
+            sku
+            name
+            image {
+              url
+            }
+            price_range {
+              minimum_price {
+                regular_price {
+                  currency
+                  value
+                }
+              }
+            }
+            categories {
+              name
+            }
+            rating_summary
+            review_count
+            reviews_summary
+            price_history
+            custom_attributes
+            features
+          }
+        }
+      }
+    }
+  }
+`;
+
+// GraphQL mutation to clear compare list
+const CLEAR_COMPARE_LIST_MUTATION = gql`
+  mutation ClearCompareList {
+    clearCompareList {
+      compare_list {
+        items {
+          product {
+            uid
+          }
+        }
+      }
+    }
+  }
+`;
+
+// GraphQL mutation to remove a single product from compare list
+const REMOVE_PRODUCT_MUTATION = gql`
+  mutation RemoveFromCompareList($productId: ID!) {
+    removeProductsFromCompareList(input: { product_ids: [$productId] }) {
+      compare_list {
+        items {
+          product {
+            uid
+          }
+        }
+      }
+    }
+  }
+`;
+
+const { result, loading, error, refetch } = useQuery(COMPARED_PRODUCTS_QUERY);
+const { mutate: clearCompareListMutation } = useMutation(CLEAR_COMPARE_LIST_MUTATION);
+const { mutate: removeProductMutation } = useMutation(REMOVE_PRODUCT_MUTATION);
+
+const products = computed(() => {
+  return result.value?.customer?.compare_list?.items?.map(item => item.product) || [];
+});
+
+const clearCompareList = async () => {
+  try {
+    await clearCompareListMutation();
+    await refetch();
+  } catch (error) {
+    console.error('Failed to clear compare list:', error);
+  }
+};
+
+const handleRemoveProduct = async (productId) => {
+  try {
+    await removeProductMutation({
+      variables: {
+        productId
+      }
+    });
+    await refetch();
+  } catch (error) {
+    console.error('Failed to remove product from compare list:', error);
+  }
+};
+
+onMounted(async () => {
+  await refetch();
+});
+</script>
+
+<style scoped>
+.compare-page {
+  min-height: 100vh;
+  background-color: #f9fafb;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+</style> 

package/app/pages/incentive/[...id].vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" class="firmm4_features1 features1 cid-uhBuptnWmV" id="features1-9v"
+            data-sortbtn="btn-primary">
+            <div class="container-fluid">
+                <div class="row justify-content-center">
+                    <div class="card">
+                        <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">Invoice: {{ invoice?.id }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Invoice Date: {{ new Date(invoice?.created_at).toLocaleDateString() }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Order #: {{ invoice?.order_id?.orders_id?.id }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Order Date: {{ new Date(invoice?.updated_at).toLocaleDateString() }}
+                                </p>
+                                <p class="card-text mbr-fonts-style display-4">Bill to Name: {{ invoice?.user?.first_name }} {{ invoice?.user?.last_name }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Status: {{ invoice?.state }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Grand Total (Base): {{ invoice?.base_grand_total }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Grand Total (Purchased): {{ invoice?.grand_total }}</p>
+                                <p class="btn_link mbr-fonts-style display-4"><NuxtLink :to="`/commerce/invoice/${invoice?.id}`" class="text-secondary">View<span class="mobi-mbri mobi-mbri-right mbr-iconfont"></span></NuxtLink></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted
+    } from 'vue';
+    const route = useRoute();
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const user = useSupabaseUser()
+
+    const {
+        data: invoice
+    } = await useAsyncData('invoice', () => {
+        return $directus.request($readItem('invoices', route.params.id, {
+            filter: {
+                user: {
+                    _eq: `${user?.id}`
+                }
+            },
+            limit: 1
+        })).then(response => response?.[0])
+    })
+
+    useHead({
+        title: 'Invoice' + invoice?.value?.id || 'Invoice Page',
+    })
+
+    definePageMeta({
+        //middleware: ['auth-logged-in'],
+    })
+</script>

package/app/pages/invoice/[id].vue

@@ -0,0 +1,309 @@
+<template>
+    <div>
+        <profilebar />
+        <section data-bs-version="5.1" class="features07 scalem5 cid-uhB4hw1yxB mbr-fullscreen" id="features07-9l">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 col-lg-10 card">
+                        <div class="title-wrapper">
+                            <h2 class="mbr-section-title mbr-fonts-style display-5">
+                                View Invoice</h2>
+                        </div>
+                    </div>
+                    <div class="col-12 col-lg-8">
+                        <div class="items-wrapper">
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-growing-chart mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Order Information
+                                        </h4>
+                                        <NuxtLink class="card-text mbr-fonts-style display-7" :to="`/order/${invoice?.order_id}`">Order #:
+                                            {{ invoice?.order_id }}</NuxtLink>
+                                        <p class="card-text mbr-fonts-style display-7">Order Date:
+                                            {{ new Date(invoice?.created_at).toLocaleDateString() }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Order Status:
+                                            {{ invoice?.state }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Purchased From: {{ invoice?.store_id }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-globe-2 mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Account Information
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">Customer Name: </p>
+                                        <p class="card-text mbr-fonts-style display-7">Email: {{ invoice?.email_sent }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Customer Group: </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-delivery mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Billing Address
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">{{ invoice?.billing_address_id }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-refresh mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Shipping Address
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">{{ invoice?.shipping_address_id }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-responsive-2 mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Payment Information
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">The order was placed using
+                                            {{ invoice?.order_currency_code }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-cash mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Shipping Information
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">{{ invoice?.shipping_address_id }}
+                                        </p>
+                                        <p class="card-text mbr-fonts-style display-7">Total Shipping Charges: {{ invoice?.shipping_amount }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">
+                                            {{ invoice?.shipping_discount_tax_compensation_amount }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">{{ invoice?.shipping_incl_tax }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">{{ invoice?.shipping_tax_amount }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <img src="../../assets/images/background2.jpg" alt="Invoices">
+        </section>
+
+        <v-card title="Invoice Items" flat>
+            <div class="container">
+                <v-data-table :headers="headers" :items="invoice?.items" :items-per-page="5" class="elevation-1">
+                    <template v-slot:[`item.name`]="{ item }">
+                        <strong>{{ item.name }}</strong>
+                    </template>
+                    <template v-slot:[`item.price_incl_tax`]="{ item }">
+                        {{ item.price_incl_tax }}
+                    </template>
+                    <template v-slot:[`item.qty`]="{ item }">
+                        {{ item.qty }}
+                    </template>
+                    <template v-slot:[`item.price`]="{ item }">
+                        {{ item.price }}
+                    </template>
+                    <template v-slot:[`item.tax_amount`]="{ item }">
+                        <span v-dompurify-html="item.tax_amount"></span>
+                    </template>
+                    <template v-slot:[`item.discount_amount`]="{ item }">
+                        {{ item.discount_amount }}
+                    </template>
+                    <template v-slot:[`item.row_total`]="{ item }">
+                        {{ item.row_total }}
+                    </template>
+                </v-data-table>
+            </div>
+        </v-card>
+        <section data-bs-version="5.1" class="pricing1 lodgem5 cid-uhBqGPVpcI" id="apricing1-9s">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12">
+                        <div class="mbr-section-head">
+                            <h3 class="mbr-section-title mbr-fonts-style mb-0 display-5">
+                                Invoice Totals</h3>
+
+                        </div>
+                        <div class="tabl-container">
+                            <div class="tabl-item-row">
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        Subtotal
+                                    </p>
+                                </div>
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        {{ invoice?.subtotal }}
+                                    </p>
+                                </div>
+
+                            </div>
+
+                            <div class="tabl-item-row">
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        Shipping & Handling
+                                    </p>
+                                </div>
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        {{ invoice?.base_shipping_incl_tax }}
+                                    </p>
+                                </div>
+
+                            </div>
+                            <div class="tabl-item-row">
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        Adjustment Refund
+                                    </p>
+                                </div>
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        {{ invoice?.adjustment_negative }} {{ invoice?.adjustment }}
+                                        {{ invoice?.adjustment_positive }}
+                                    </p>
+                                </div>
+
+                            </div>
+                            <div class="tabl-item-row">
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        Adjustment Fee
+                                    </p>
+                                </div>
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        {{ invoice?.base_adjustment_negative }} {{ invoice?.base_adjustment }}
+                                        {{ invoice?.base_adjustment_positive }}
+                                    </p>
+                                </div>
+
+                            </div>
+                            <div class="tabl-item-row">
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        Tax
+                                    </p>
+                                </div>
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        {{ invoice?.tax_amount }}
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="tabl-item-row">
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        <strong>Grand Total</strong>
+                                    </p>
+                                </div>
+                                <div class="tabl-item-column">
+                                    <p class="card-text mbr-fonts-style mb-0 display-7">
+                                        <strong>{{ invoice?.grand_total }}</strong>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data: () => ({
+            headers: [{
+                    text: 'Product',
+                    value: 'name'
+                },
+                {
+                    text: 'Price',
+                    value: 'price_incl_tax'
+                },
+                {
+                    text: 'Quantity',
+                    value: 'qty'
+                },
+                {
+                    text: 'Subtotal',
+                    value: 'price'
+                },
+                {
+                    text: 'Tax Amount',
+                    value: 'tax_amount'
+                },
+                {
+                    text: 'Discount Amount',
+                    value: 'discount_amount'
+                },
+                {
+                    text: 'Row Total',
+                    value: 'tow_total',
+                },
+            ],
+        }),
+    }
+</script>
+
+<script setup>
+    const route = useRoute();
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const user = useSupabaseUser()
+
+    const {
+        data: invoice
+    } = await useAsyncData('invoice', () => {
+        return $directus.request($readItem('invoices', route.params.id, {
+            filter: {
+                user: {
+                    _eq: `${user?.id}`
+                }
+            },
+            limit: 1
+        })).then(response => response?.[0])
+    })
+
+    useHead({
+        title: 'Invoice' + invoice?.value?.id || 'Invoice Page',
+    })
+
+
+    definePageMeta({
+        //middleware: ['auth-logged-in'],
+    })
+</script>