@meeovi/layer-commerce 1.0.10 → 1.0.13

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

@@ -0,0 +1,372 @@
+<template>
+    <div>
+        <form>
+            <v-toolbar dark color="rgb(var(--v-theme-primary))!important">
+                <v-card-title>
+                    <span class="text-h6">Update Product</span>
+                </v-card-title>
+            </v-toolbar>
+            <v-card-text>
+                <v-container>
+                    <v-row>
+                        <v-col cols="12">
+                            <v-text-field v-model="searchSku" label="Search Product by SKU" append-icon="mdi-magnify"
+                                @click:append="fetchProduct(searchSku)"></v-text-field>
+                        </v-col>
+                        <v-col cols="12">
+                            <h5>Basic Information</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+                        <v-col cols="6">
+                            <v-select v-model="status" :items="['Enable', 'Disable']" label="Status*"></v-select>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-select v-model="type" :items="['simple', 'configurable', 'virtual', 'downloadable']"
+                                label="Product Type*"></v-select>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-text-field v-model="name" label="Product Name*" required></v-text-field>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-text-field v-model="sku" type="number" label="SKU*" required></v-text-field>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-text-field v-model="price" type="number" label="Price*" required></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-select v-model="tax_class" :items="[
+    { text: 'None', value: 0 },
+    { text: 'Taxable Goods', value: 2 },
+    { text: 'Shipping', value: 4 }
+]" label="Tax Class"></v-select>
+
+                        </v-col>
+                        <v-col cols="6">
+                            <v-text-field v-model="quantity_per_source" type="number" label="Quantity"></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-text-field v-model="weight" type="number" label="Weight"></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-text-field v-model="height" type="number" label="Height"></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-autocomplete v-model="catalog_visibility" :items="['public', 'private']"
+                                label="Visibility">
+                            </v-autocomplete>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-autocomplete v-model="categories" :items="['public']" label="Categories">
+                            </v-autocomplete>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-autocomplete v-model="manufacture" :items="['public']" label="Manufacture">
+                            </v-autocomplete>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-autocomplete v-model="country" :items="['public']" label="Country of Manufacture">
+                            </v-autocomplete>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-select v-model="tax_status" :items="['0-17']" label="Tags">
+                            </v-select>
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Content</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="12">
+                            <v-textarea v-model="short_description" label="Short Description*"></v-textarea>
+                        </v-col>
+                        <v-col cols="12">
+                            <h6>Description</h6>
+                            <editor />
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Images and Files</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="12">
+                            <v-file-input label="Product Image*" multiple required></v-file-input>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-file-input label="Product Thumbnails" multiple></v-file-input>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-file-input label="Product Files" multiple></v-file-input>
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Related Products, Up-Sells, and Cross-Sells</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="12">
+                            <v-select v-model="related_ids" :items="['0-17']" label="Related Products">
+                            </v-select>
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Other Information</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="6">
+                            <v-text-field v-model="width" type="number" label="Part Number"></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-text-field v-model="manufacturer_part_number" type="number"
+                                label="Manufacturer Part Number"></v-text-field>
+                        </v-col>
+
+                        <v-col cols="12">
+                            <h5>Downloadable Information</h5>
+                        </v-col>
+                        <v-divider></v-divider>
+
+                        <v-col cols="6">
+                            <v-select v-model="format" :items="['Downloadable', 'Not Downloadable']" label="format">
+                            </v-select>
+                        </v-col>
+                    </v-row>
+                </v-container>
+                <small>*indicates required field</small>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="red-darken-1" variant="text" @click="deleteProduct">
+                    Delete
+                </v-btn>
+                <v-btn color="blue-darken-1" variant="text" @click="dialog = false">
+                    Close
+                </v-btn>
+                <v-btn color="blue-darken-1" variant="text" @click="updateProduct">
+                    Update Product
+                </v-btn>
+            </v-card-actions>
+
+        </form>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref
+    } from 'vue'
+
+    import editor from '~/components/partials/globals/editor.vue'
+
+    const config = useRuntimeConfig();
+    const name = ref('');
+    const status = ref('');
+    const short_description = ref('');
+    const description = ref('');
+    const type = ref('');
+    const sku = ref('');
+    const image = ref('');
+    const height = ref('');
+    const weight = ref('');
+    const tax_status = ref('');
+    const price = ref('');
+    const tax_class = ref('');
+    const catalog_visibility = ref('');
+    const related_ids = ref('');
+    const categories = ref('');
+    const manufacture = ref('');
+    const country = ref('');
+    const brand = ref('');
+    const width = ref('');
+    const format = ref('');
+    const errorMessage = ref('');
+    const successMessage = ref('');
+    const searchSku = ref('');
+
+    const updateProduct = async () => {
+        try {
+            const UPDATE_PRODUCT = `
+            mutation updateProduct(
+                $sku: String!
+                $name: String
+                $price: Float
+                $status: Int
+                $weight: Float
+                $description: String
+                $short_description: String
+                $tax_class_id: Int
+            ) {
+                updateSimpleProduct(
+                    input: {
+                        sku: $sku
+                        name: $name
+                        price: $price
+                        status: $status
+                        weight: $weight
+                        description: { html: $description }
+                        short_description: { html: $short_description }
+                        tax_class_id: $tax_class_id
+                    }
+                ) {
+                    product {
+                        id
+                        name
+                        sku
+                        price {
+                            regularPrice {
+                                amount {
+                                    value
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        `;
+
+            const variables = {
+                sku: sku.value,
+                name: name.value,
+                price: parseFloat(price.value),
+                status: status.value === 'Enable' ? 1 : 2,
+                weight: parseFloat(weight.value),
+                description: description.value,
+                short_description: short_description.value,
+                tax_class_id: parseInt(tax_class.value)
+            };
+
+            const response = await fetch(`${config.public.commerceUrl}/graphql`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${config.public.commerceApiToken}`
+                },
+                body: JSON.stringify({
+                    query: UPDATE_PRODUCT,
+                    variables
+                })
+            });
+
+            const result = await response.json();
+            if (result.errors) {
+                throw new Error(result.errors[0].message);
+            }
+
+            successMessage.value = 'Product updated successfully';
+        } catch (error) {
+            errorMessage.value = error.message;
+        }
+    };
+
+    const deleteProduct = async () => {
+        try {
+            const DELETE_PRODUCT = `
+            mutation deleteProduct($sku: String!) {
+                deleteProducts(
+                    skus: [$sku]
+                ) {
+                    result
+                }
+            }
+        `;
+
+            const variables = {
+                sku: sku.value
+            };
+
+            const response = await fetch(`${config.public.commerceUrl}/graphql`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${config.public.commerceApiToken}`
+                },
+                body: JSON.stringify({
+                    query: DELETE_PRODUCT,
+                    variables
+                })
+            });
+
+            const result = await response.json();
+            if (result.errors) {
+                throw new Error(result.errors[0].message);
+            }
+
+            successMessage.value = 'Product deleted successfully';
+        } catch (error) {
+            errorMessage.value = error.message;
+        }
+    };
+
+    // Add a method to fetch product data for editing
+    const fetchProduct = async (sku) => {
+        try {
+            const GET_PRODUCT = `
+            query getProduct($sku: String!) {
+                products(filter: { sku: { eq: $sku } }) {
+                    items {
+                        name
+                        sku
+                        price {
+                            regularPrice {
+                                amount {
+                                    value
+                                }
+                            }
+                        }
+                        status
+                        weight
+                        description {
+                            html
+                        }
+                        short_description {
+                            html
+                        }
+                        tax_class_id
+                    }
+                }
+            }
+        `;
+
+            const response = await fetch(`${config.public.commerceUrl}/graphql`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${config.public.commerceApiToken}`
+                },
+                body: JSON.stringify({
+                    query: GET_PRODUCT,
+                    variables: {
+                        sku
+                    }
+                })
+            });
+
+            const result = await response.json();
+            if (result.errors) {
+                throw new Error(result.errors[0].message);
+            }
+
+            const product = result.data.products.items[0];
+            if (product) {
+                // After successful update or delete
+                dialog.value = false;
+                name.value = product.name;
+                sku.value = product.sku;
+                price.value = product.price.regularPrice.amount.value;
+                status.value = product.status === 1 ? 'Enable' : 'Disable';
+                weight.value = product.weight;
+                description.value = product.description.html;
+                short_description.value = product.short_description.html;
+                tax_class.value = product.tax_class_id;
+            }
+        } catch (error) {
+            errorMessage.value = error.message;
+        }
+    };
+
+    useHead({
+        title: 'Update Product',
+    })
+</script>

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

@@ -0,0 +1,153 @@
+<template>
+    <div>
+        <v-card elevation="0">
+            <v-toolbar title="Update A Showcase"></v-toolbar>
+            <v-form @submit.prevent="updateShowcase">
+                <v-container>
+                    <v-row>
+                        <v-col cols="6">
+                            <v-text-field v-model="title" label="Showcase Name" required></v-text-field>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-combobox v-model="type" label="Status" :items="['Public', 'Private']"></v-combobox>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-file-input clearable label="Showcase Image"></v-file-input>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-textarea v-model="description" label="Showcase Description"></v-textarea>
+                        </v-col>
+                        <v-col cols="12">
+                            <v-card title="Choose a Product for your Showcase">
+                                <v-card-text>
+                                    <v-text-field density="compact" variant="solo" label="Search Meeovi for products"
+                                        append-inner-icon="fas:fa fa-search" single-line hide-details
+                                        @click:append-inner="onClick"></v-text-field>
+                                    <v-spacer></v-spacer>
+                                    <div class="d-flex pa-4">
+                                        <v-checkbox-btn v-model="includeFiles" class="pe-2" color="orange">
+                                        </v-checkbox-btn>
+                                        <!--<NuxtLink :to="`/product/${products.id}`">
+                                        <v-card class="ma-4" height="580" width="250" @click="toggle">
+                                            <NuxtImg loading="lazy" class="align-end text-white" height="280"
+                                                :src="`${products.featuredAsset.preview}`" :alt="products.name" cover />
+
+                                            <v-card-title class="pt-4">
+                                                {{ products.name }}
+                                            </v-card-title>
+
+                                            <v-card-text>
+                                                <div>Sku: {{ products.variants.sku }}</div>
+                                            </v-card-text>
+
+                                            <v-card-actions>
+                                                <v-card-title>$ {{ products.variants.price }}
+                                                </v-card-title>
+                                            </v-card-actions>
+                                            <div class="d-flex fill-height align-center justify-center">
+                                                <v-scale-transition>
+                                                    <v-icon v-if="isSelected" color="white" size="48"
+                                                        icon="mdi-close-circle-outline"></v-icon>
+                                                </v-scale-transition>
+                                            </div>
+                                        </v-card>
+                                    </NuxtLink>-->
+                                    </div>
+                                </v-card-text>
+                            </v-card>
+                        </v-col>
+                    </v-row>
+                </v-container>
+
+                <v-divider class="mt-12"></v-divider>
+                <v-card-actions>
+                    <v-btn color="blue-darken-1" variant="text" type="submit" @click.prevent="deleteShowcaseAndRefresh">
+                        Delete
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue-darken-1" variant="text" type="submit" @click.prevent="updateShowcaseAndRefresh">
+                        Update
+                    </v-btn>
+                </v-card-actions>
+            </v-form>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import { useRoute, useRouter } from 'vue-router';
+/*import { UPDATE_SHOWCASE, DELETE_SHOWCASE } from '#graphql/cms/queries/showcases'
+
+const route = useRoute();
+const router = useRouter();
+const id = route.params.id;
+
+const dialog = ref(false)
+const includeFiles = ref(true)
+const enabled = ref(false)
+const name = ref('');
+const title = ref('');
+const color = ref('');
+const colortext = ref('');
+const showcaseFields = ref('');
+const description = ref('');
+const image = ref('');
+const rating = ref('');
+const products = ref('');
+
+const { client: apolloClient } = useApolloClient();
+
+const updateShowcase = async () => {
+  try {
+    const { data } = await apolloClient.mutate({
+      mutation: UPDATE_SHOWCASE,
+      variables: {
+        name: name.value,
+        title: title.value,
+        color: showcaseFields.color.value,
+        colortext: showcaseFields.colortext.value,
+        description: showcaseFields.description.value,
+        image: showcaseFields.image.node.sourceUrl,
+        id: id,
+      },
+    });
+    console.log('Showcase updated:', data.updateShowcase.showcase);
+  } catch (error) {
+    console.error('Error updating showcase:', error);
+  }
+};
+
+const deleteShowcase = async () => {
+  try {
+    const { data } = await apolloClient.mutate({
+      mutation: DELETE_SHOWCASE,
+      variables: {
+        id: id,
+      },
+    });
+    console.log('Showcase deleted:', data.deleteShowcase.showcase.id);
+  } catch (error) {
+    console.error('Error deleting showcase:', error);
+  }
+};
+
+const deleteShowcaseAndRefresh = async () => {
+  await deleteShowcase();
+  router.push('/product/showcase/showcases');  // Refresh the current route
+};
+
+const updateShowcaseAndRefresh = async () => {
+  await updateShowcase();
+  router.go(0);  // Refresh the current route
+};
+
+const reset = () => {
+  router.go(0);
+};*/
+
+    useHead({
+        title: 'Update Showcase',
+    })
+</script>

package/app/components/catalog/shops/relatedstores.vue

@@ -0,0 +1,37 @@
+<template>
+    <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center" elevation="0">
+        <v-toolbar title="Stores on Meeovi" color="transparent">
+            <div>
+                <NuxtLink to="/shops/">All Stores</NuxtLink>
+            </div>
+        </v-toolbar>
+        <v-slide-group v-model="model" class="pa-4" selected-class="bg-primary" show-arrows>
+            <v-slide-group-item v-for="store in shops" :key="store" v-slot="{ toggle, selectedClass }">
+                <store :store="store" />
+            </v-slide-group-item>
+        </v-slide-group>
+
+        <v-expand-transition>
+            <v-sheet v-if="model != null" height="200">
+                <div class="d-flex fill-height align-center justify-center">
+                    <h3 class="text-h6">
+                        Selected {{ model }}
+                    </h3>
+                </div>
+            </v-sheet>
+        </v-expand-transition>
+    </v-sheet>
+</template>
+
+<script setup>
+    import { ref } from 'vue'
+    import store from './stores.vue'
+    import { useContentFallback } from '../../../composables/useContent'
+
+    const model = ref(null)
+    const content = useContentFallback()
+
+    const { data: shops } = await useAsyncData('shops', () => {
+        return content.listShops({ fields: ['*', { '*': ['*'] }] })
+    })
+</script>

package/app/components/catalog/shops/restaurant.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <div v-if="restaurant">
+            <section data-bs-version="5.1" class="features01 stockm5 cid-uwd9RxG0Y8" id="features01-aa">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="title-wrapper">
+                                <div class="desc-wrapper">
+                                    <p class="mbr-desc mbr-fonts-style display-4">
+                                        Restaurants
+                                    </p>
+                                </div>
+                                <div class="title-wrap">
+                                    <h2 class="mbr-section-title mbr-fonts-style display-2">
+                                        <strong><span><b>Great Tastes</b></span> near you!</strong>
+                                    </h2>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row items-wrapper">
+                        <div class="item features-image col-12 col-lg-4">
+                            <div class="item-wrapper">
+                                <div class="item-img">
+                                    <NuxtLink :to="`/shops/${restaurant?.id}`"><img loading="lazy" class="align-end text-white" v-if="restaurant?.image"
+                            :src="`${$directus.url}assets/${restaurant?.image?.filename_disk}`" :alt="restaurant?.name"></NuxtLink>
+                                </div>
+                                <div class="item-content">
+                                    <div class="desc-wrap">
+                                        <p class="item-desc desc_1 mbr-fonts-style display-4">
+                                            {{ restaurant?.food_offered }}
+                                        </p>
+                                    </div>
+                                    <h4 class="item-title mbr-fonts-style display-5">
+                                        <strong>{{ restaurant?.name }}</strong>
+                                    </h4>
+                                    <p class="item-text mbr-fonts-style display-4" v-dompurify-html="restaurant?.description"></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+        <p v-else>No restaurants found.</p>
+    </div>
+</template>
+
+<script setup>
+    import {
+        useRuntimeConfig
+    } from '#imports';
+
+    const config = useRuntimeConfig();
+    const props = defineProps({
+        restaurant: {
+            type: Object,
+            required: true,
+        },
+    });
+
+    const {
+        restaurant
+    } = props;
+</script>

package/app/components/catalog/shops/stores.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div v-if="store">
+            <div class="card col-12 col-md-6 col-lg-4">
+                <div class="card-wrapper">
+                    <div class="img-wrapper">
+                        <NuxtImg loading="lazy" class="align-end text-white" v-if="store?.image"
+                            :src="`${$directus.url}/assets/${store?.image?.filename_disk}`" :alt="store?.name"
+                            cover />
+                    </div>
+                    <div class="card-box align-center">
+                        <h5 class="card-title mbr-fonts-style display-5">
+                            {{ store?.name }}
+                        </h5>
+                        <p class="mbr-text mbr-fonts-style display-4">{{ store?.description }}</p>
+                    </div>
+                    <div class="mbr-section-btn mt-3">
+                        <NuxtLink class="btn btn-secondary display-4" :href="`/shops/${store?.id}`">Enter
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <p v-else>No stores found.</p>
+    </div>
+</template>
+
+<script setup>
+    import {
+        useRuntimeConfig
+    } from '#imports';
+
+    const config = useRuntimeConfig();
+    const props = defineProps({
+        store: {
+            type: Object,
+            required: true,
+        },
+    });
+
+    const {
+        store
+    } = props;
+</script>

package/app/components/catalog/vendor/README.md

@@ -0,0 +1,3 @@
+## Dashboard Directory
+
+This is part of the admin panel for the marketplace functionality also called the Seller's Dashboard on the frontend.