@mframework/layer-commerce 0.0.5 → 0.0.8

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 '#lists/app/components/related/list.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>

package/app/components/marketing/promotions/giftcards.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <!---->
+        <v-row>
+            <v-col cols="12">
+                <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+                    <h4 style="left: 15px; position: relative;">{{ callouts?.menus?.[0]?.name }}</h4>
+                    <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                        <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
+                            v-for="products in mycards" :key="products">
+                            <productCard :product="products" :class="['ma-4', selectedClass]"
+                                @click="toggle" />
+                            <div class="d-flex fill-height align-center justify-center">
+                                <v-scale-transition>
+                                    <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline"
+                                        size="48"></v-icon>
+                                </v-scale-transition>
+                            </div>
+                        </v-slide-group-item>
+                    </v-slide-group>
+                </v-sheet>
+            </v-col>
+
+            <v-col cols="12">
+                <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+                    <h4 style="left: 15px; position: relative;">{{ callouts?.menus?.[1]?.name }}</h4>
+                    <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                        <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
+                            v-for="products in cards" :key="products">
+                            <productCard :product="products" :class="['ma-4', selectedClass]"
+                                @click="toggle" />
+                            <div class="d-flex fill-height align-center justify-center">
+                                <v-scale-transition>
+                                    <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline"
+                                        size="48"></v-icon>
+                                </v-scale-transition>
+                            </div>
+                        </v-slide-group-item>
+                    </v-slide-group>
+                </v-sheet>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup>
+    import productCard from '~/components/catalog/product/productCard.vue'
+    import {
+        ref,
+        onMounted
+    } from 'vue';
+    import {
+        useUserStore
+    } from '#auth/app/stores/user'
+
+    const model = ref(null);
+    const userStore = useUserStore()
+
+    const userDisplayName = computed(() => {
+        return userStore.name || userStore.username || 'User'
+    })
+
+    const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: cards
+    } = await useAsyncData('cards', () => {
+        return $directus.request($readItems('products', {
+            fields: ['*',
+                'image.*',
+                'currency.currency_id.*'
+            ],
+            filter: {
+                product_types: {
+                    product_types_id: {
+                        name: {
+                            _eq: "Gift Card"
+                        }
+                    }
+                }
+            }
+        }))
+    })
+
+    const {
+        data: mycards
+    } = await useAsyncData('mycards', () => {
+        return $directus.request($readItems('products', {
+            fields: ['*',
+                'image.*',
+                'currency.currency_id.*'
+            ],
+            filter: {
+                product_types: {
+                    product_types_id: {
+                        name: {
+                            _eq: "Gift Card"
+                        }
+                    }
+                },
+                user: {
+                    directus_users: {
+                        _eq: `${userDisplayName.user.displayName}`
+                    }
+                }
+            }
+        }))
+    })
+
+    const {
+        data: callouts
+    } = await useAsyncData('callouts', () => {
+        return $directus.request($readItem('callouts', '4'))
+    })
+
+    useHead({
+        title: 'Gift Cards',
+    })
+
+    definePageMeta({
+        middleware: ['authenticated'],
+    })
+</script>