@meeovi/layer-commerce 1.0.10 → 1.0.13

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>

package/app/components/content/pages/pickup-locations.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="customerDashboard">
+    <v-row>
+      <v-toolbar color="transparent">
+        <v-toolbar-title>{{ pickupBlocks?.content?.[0]?.name }}</v-toolbar-title>
+      </v-toolbar>
+
+      <!-- Search and Filter Section -->
+      <v-col cols="12" class="mb-4">
+        <v-card>
+          <v-card-text>
+            <v-row>
+              <v-col cols="4">
+                <v-text-field v-model="searchAddress" label="Search by address"
+                  @keyup.enter="searchByAddress"></v-text-field>
+              </v-col>
+              <v-col cols="3">
+                <v-select v-model="selectedRadius" :items="radiusOptions" label="Search radius"></v-select>
+              </v-col>
+              <v-col cols="2">
+                <v-btn color="primary" @click="searchByAddress">Search</v-btn>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <!-- Locations List -->
+      <v-col cols="4">
+        <template v-if="pickupLocations.length">
+          <v-card class="mx-auto mb-4" prepend-icon="$vuetify" :subtitle="pickupBlocks?.content?.[0]?.url_name"
+            width="100%" v-for="location in pickupLocations" :key="location?.id" @click="selectLocation(location)">
+            <template v-slot:title>
+              <span class="font-weight-black">{{ location?.name }}</span>
+            </template>
+
+            <v-card-text class="bg-surface-light pt-4">
+              <div>{{ pickupBlocks?.menus?.[0]?.name }} {{ location?.street }}</div>
+              <div>{{ pickupBlocks?.menus?.[1]?.name }} {{ location?.city }}</div>
+              <div>{{ pickupBlocks?.menus?.[2]?.name }} {{ location?.postcode }}</div>
+              <div>{{ pickupBlocks?.menus?.[3]?.name }} {{ location?.phone }}</div>
+              <div>{{ pickupBlocks?.menus?.[4]?.name }} {{ location?.email }}</div>
+              <div>{{ pickupBlocks?.menus?.[5]?.name }} {{ location?.region }}</div>
+              <div>{{ pickupBlocks?.menus?.[6]?.name }} {{ location?.description }}</div>
+              <div v-if="location.distance">Distance: {{ formatDistance(location.distance) }}</div>
+            </v-card-text>
+          </v-card>
+        </template>
+        <template v-else>
+          <v-card class="mx-auto mb-4" width="100%" elevation="0">
+            <v-card-text class="text-center">
+              <p class="text-h6" v-dompurify-html="pickupBlocks?.content?.[0]?.content"></p>
+            </v-card-text>
+          </v-card>
+        </template>
+      </v-col>
+
+      <!-- Map Section -->
+      <v-col cols="8">
+        <client-only>
+          <Map style="height: 600px" :zoom="mapZoom" :center="mapCenter" :use-global-leaflet="false">
+            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              attribution="&copy; 'https://www.openstreetmap.org'; contributors" layer-type="base"
+              name="OpenStreetMap" />
+            <template v-if="pickupLocations.length">
+              <Marker v-for="location in pickupLocations" :key="location.id"
+                :lat-lng="[location?.latitude, location?.longitude]" @click="selectLocation(location)">
+                <Popup>{{ location?.name }}</Popup>
+              </Marker>
+            </template>
+          </Map>
+        </client-only>
+      </v-col>
+
+      <v-col cols="12">
+        <latestproducts />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+    computed,
+    onMounted
+  } from 'vue';
+  import latestproducts from '#commerce/app/components/catalog/product/latestproducts.vue';
+
+  // State
+  const locations = ref([]);
+  const selectedLocation = ref(null);
+  const searchAddress = ref('');
+  const selectedRadius = ref(25);
+  const mapZoom = ref(12);
+  const loading = ref(false);
+  const error = ref(null);
+
+  // Constants
+  const radiusOptions = [{
+      title: '10 miles',
+      value: 10
+    },
+    {
+      title: '25 miles',
+      value: 25
+    },
+    {
+      title: '50 miles',
+      value: 50
+    },
+    {
+      title: '100 miles',
+      value: 100
+    }
+  ];
+
+  // Computed
+  const mapCenter = computed(() => {
+    if (selectedLocation.value) {
+      return [selectedLocation.value.latitude, selectedLocation.value.longitude];
+    }
+    if (locations.value.length) {
+      return [locations.value[0].latitude, locations.value[0].longitude];
+    }
+    return [47.21322, -1.559482]; // Default center
+  });
+
+  // Methods
+  const loadLocations = async () => {
+    try {
+      loading.value = true;
+      const result = await getPickupLocations();
+      locations.value = result.items || [];
+    } catch (err) {
+      error.value = err.message;
+      console.error('Error loading locations:', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const searchByAddress = async () => {
+    try {
+      loading.value = true;
+      error.value = null;
+
+      // Get coordinates from address using browser's geolocation API
+      const coordinates = await getCoordinatesFromAddress(searchAddress.value);
+
+      const searchParams = {
+        searchTerm: searchAddress.value,
+        latitude: coordinates.latitude,
+        longitude: coordinates.longitude,
+        radius: selectedRadius.value
+      };
+
+      const result = await getPickupLocationsByDistance(searchParams);
+      locations.value = result.items || [];
+
+      if (locations.value.length) {
+        mapZoom.value = 12;
+        selectedLocation.value = locations.value[0];
+      }
+    } catch (err) {
+      error.value = err.message;
+      console.error('Error searching locations:', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const selectLocation = (location) => {
+    selectedLocation.value = location;
+    mapZoom.value = 15;
+  };
+
+  const formatDistance = (distance) => {
+    return `${Math.round(distance * 10) / 10} miles`;
+  };
+
+  // Helper function to get coordinates from address
+  const getCoordinatesFromAddress = async (address) => {
+    try {
+      // You might want to use a geocoding service here
+      // For now, returning mock coordinates
+      return {
+        latitude: 47.21322,
+        longitude: -1.559482
+      };
+    } catch (error) {
+      console.error('Error getting coordinates:', error);
+      throw new Error('Unable to get coordinates from address');
+    }
+  };
+
+  // Directus setup
+  const {
+    $directus,
+    $readItem
+  } = useNuxtApp();
+
+  const {
+    data: pickupBlocks
+  } = await useAsyncData('pickupBlocks', () => {
+    return $directus.request($readItem('page_blocks', '10', {
+      fields: ['*', 'media.directus_files_id.filename_disk', 'content.*'],
+    }))
+  });
+
+  const {
+    data: pickupLocations
+  } = await useAsyncData('pickupLocations', () => {
+    return $directus.request($readItem('pages', '33', {
+      fields: ['*', 'image.*'],
+    }))
+  });
+
+  // Initial load
+  onMounted(() => {
+    loadLocations();
+  });
+
+  // Meta
+  definePageMeta({
+    layout: 'nolive',
+  });
+
+  useHead({
+    title: 'Pickup Locations',
+  });
+</script>
+
+<style scoped>
+  .customerDashboard {
+    padding: 20px;
+  }
+</style>

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

@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <v-card variant="text">
+            <v-toolbar
+                :style="`background-color: ${showcasePage?.color}; color: ${showcasePage?.colortext} !important`">
+                <v-toolbar-title>{{ showcasePage?.name }}</v-toolbar-title>
+
+                <v-tabs v-model="currentTab" fixed-tabs>
+
+                    <v-tab :value="'create'">
+                        <createshowcase />
+                    </v-tab>
+                </v-tabs>
+            </v-toolbar>
+
+            <v-tabs-window v-model="currentTab">
+                <v-tabs-window-item v-for="(menu, index) in showcaseBar" :key="menu?.value ?? index"
+                    :value="menu?.value ?? menu">
+                    <component :is="contentComponents[index] || null" />
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card>
+
+        <section data-bs-version="5.1" class="features03 flavorm5 cid-uHg490M3EL" id="features03-at">
+            <div class="container">
+                <div class="row">
+                    <div class="item features-image col-12 col-lg-6" v-for="(list, index) in lists" :key="index">
+                        <listShowcases :list="list" />
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import createshowcase from '@/components/catalog/product/add-showcase.vue'
+    import listShowcases from '@/components/placeholders/ListShowcases.vue'
+
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+
+    // current selected tab value (matches menu.value)
+    const currentTab = ref(null);
+
+    const {
+        data: showcasePage
+    } = await useAsyncData('showcasePage', () => {
+        return $directus.request($readItem('pages', '115', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: lists
+    } = await useAsyncData('lists', () => {
+        return $directus.request($readItems('lists', {
+            fields: ['*', {
+                '*': ['*']
+            }],
+            filter: {
+                lists_type: {
+                    lists_type_id: {
+                        name: {
+                            _eq: "Showcase"
+                        }
+                    }
+                },
+                status: {
+                    _eq: "Public"
+                }
+            }
+        }))
+    })
+
+    const {
+        data: showcaseBar
+    } = await useAsyncData('showcaseBar', () => {
+        return $directus.request($readItem('navigation', '54', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <v-container class="text-center">
+    <v-row justify="center">
+      <v-col cols="12" md="8">
+        <v-card class="pa-6">
+          <v-icon color="success" size="64" class="mb-4">mdi-check-circle</v-icon>
+          <h1 class="text-h4 mb-4">Thank You for Your Purchase!</h1>
+          <p class="text-body-1 mb-4">
+            Your order has been successfully placed. We've sent a confirmation email to your registered email address.
+          </p>
+          <p class="text-body-1 mb-6">
+            Order ID: {{ orderId }}
+          </p>
+          <v-btn
+            color="primary"
+            @click="router.push('/')"
+            class="mr-4"
+          >
+            Continue Shopping
+          </v-btn>
+          <v-btn
+            color="secondary"
+            @click="router.push('/orders')"
+          >
+            View Orders
+          </v-btn>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const orderId = ref('');
+
+onMounted(async () => {
+  const sessionId = route.query.session_id;
+  if (sessionId) {
+    try {
+      // Here you would typically fetch the order details from your backend
+      // using the session ID
+      orderId.value = sessionId;
+    } catch (error) {
+      console.error('Error fetching order details:', error);
+    }
+  }
+});
+</script>
+
+<style scoped>
+.v-card {
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+</style> 

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

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