@meeovi/layer-social 1.0.3

package/app/components/features/account/addresses.vue

@@ -0,0 +1,279 @@
+<template>
+    <div>
+        <v-toolbar color="transparent" density="compact" title="My Addresses">
+            <v-btn color="primary" @click="showAddAddress = true">
+                Add New Address
+            </v-btn>
+        </v-toolbar>
+
+        <v-card>
+            <v-tabs v-model="tab" bg-color="transparent">
+                <v-tab value="billing">Billing Addresses</v-tab>
+                <v-tab value="shipping">Shipping Addresses</v-tab>
+            </v-tabs>
+
+            <v-card-text>
+                <v-tabs-window v-model="tab">
+                    <v-tabs-window-item value="billing">
+                        <v-table fixed-header>
+                            <thead>
+                                <tr>
+                                    <th class="text-left">Type</th>
+                                    <th class="text-left">Name</th>
+                                    <th class="text-left">Company</th>
+                                    <th class="text-left">Street</th>
+                                    <th class="text-left">City</th>
+                                    <th class="text-left">Region</th>
+                                    <th class="text-left">Postcode</th>
+                                    <th class="text-left">Country</th>
+                                    <th class="text-left">Phone</th>
+                                    <th class="text-left">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="address in addresses" :key="address.id">
+                                    <td>{{ address.default_billing ? 'Default Billing' : 'Billing' }}</td>
+                                    <td>{{ address.firstname }} {{ address.lastname }}</td>
+                                    <td>{{ address.company }}</td>
+                                    <td>{{ address.street.join(', ') }}</td>
+                                    <td>{{ address.city }}</td>
+                                    <td>{{ address.region?.region }}</td>
+                                    <td>{{ address.postcode }}</td>
+                                    <td>{{ address.country_id }}</td>
+                                    <td>{{ address.telephone }}</td>
+                                    <td>
+                                        <v-btn icon="fas:fa fa-edit" color="primary" size="small" @click="editAddress(address)" />
+                                        <v-btn icon="fas:fa fa-trash" color="error" size="small" @click="deleteAddress(address.id)" />
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </v-table>
+                    </v-tabs-window-item>
+
+                    <v-tabs-window-item value="shipping">
+                        <v-table fixed-header>
+                            <thead>
+                                <tr>
+                                    <th class="text-left">Type</th>
+                                    <th class="text-left">Name</th>
+                                    <th class="text-left">Company</th>
+                                    <th class="text-left">Street</th>
+                                    <th class="text-left">City</th>
+                                    <th class="text-left">Region</th>
+                                    <th class="text-left">Postcode</th>
+                                    <th class="text-left">Country</th>
+                                    <th class="text-left">Phone</th>
+                                    <th class="text-left">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="address in addresses" :key="address.id">
+                                    <td>{{ address.default_shipping ? 'Default Shipping' : 'Shipping' }}</td>
+                                    <td>{{ address.firstname }} {{ address.lastname }}</td>
+                                    <td>{{ address.company }}</td>
+                                    <td>{{ address.street.join(', ') }}</td>
+                                    <td>{{ address.city }}</td>
+                                    <td>{{ address.region?.region }}</td>
+                                    <td>{{ address.postcode }}</td>
+                                    <td>{{ address.country_id }}</td>
+                                    <td>{{ address.telephone }}</td>
+                                    <td>
+                                        <v-btn icon="fas:fa fa-edit" color="primary" size="small" @click="editAddress(address)" />
+                                        <v-btn icon="fas:fa fa-trash" color="error" size="small" @click="deleteAddress(address.id)" />
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </v-table>
+                    </v-tabs-window-item>
+                </v-tabs-window>
+            </v-card-text>
+        </v-card>
+
+        <!-- Add/Edit Address Dialog -->
+        <v-dialog v-model="showAddAddress" max-width="600px">
+            <v-card>
+                <v-card-title>
+                    {{ editingAddress ? 'Edit Address' : 'Add New Address' }}
+                </v-card-title>
+                <v-card-text>
+                    <v-form ref="form" v-model="valid">
+                        <v-row>
+                            <v-col cols="6">
+                                <v-text-field
+                                    v-model="addressForm.firstname"
+                                    label="First Name"
+                                    required
+                                />
+                            </v-col>
+                            <v-col cols="6">
+                                <v-text-field
+                                    v-model="addressForm.lastname"
+                                    label="Last Name"
+                                    required
+                                />
+                            </v-col>
+                        </v-row>
+                        <v-text-field
+                            v-model="addressForm.company"
+                            label="Company"
+                        />
+                        <v-text-field
+                            v-model="addressForm.street[0]"
+                            label="Street Address"
+                            required
+                        />
+                        <v-text-field
+                            v-model="addressForm.street[1]"
+                            label="Street Address Line 2"
+                        />
+                        <v-row>
+                            <v-col cols="6">
+                                <v-text-field
+                                    v-model="addressForm.city"
+                                    label="City"
+                                    required
+                                />
+                            </v-col>
+                            <v-col cols="6">
+                                <v-text-field
+                                    v-model="addressForm.postcode"
+                                    label="Postal Code"
+                                    required
+                                />
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col cols="6">
+                                <v-select
+                                    v-model="addressForm.country_id"
+                                    :items="countries"
+                                    label="Country"
+                                    required
+                                />
+                            </v-col>
+                            <v-col cols="6">
+                                <v-text-field
+                                    v-model="addressForm.telephone"
+                                    label="Phone Number"
+                                    required
+                                />
+                            </v-col>
+                        </v-row>
+                        <v-checkbox
+                            v-model="addressForm.default_billing"
+                            label="Set as default billing address"
+                        />
+                        <v-checkbox
+                            v-model="addressForm.default_shipping"
+                            label="Set as default shipping address"
+                        />
+                    </v-form>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn color="error" @click="showAddAddress = false">Cancel</v-btn>
+                    <v-btn color="primary" @click="saveAddress" :disabled="!valid">Save</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useMagentoApi } from '#commerce/app/composables/useMagentoApi'
+
+const tab = ref('billing')
+const addresses = ref([])
+const showAddAddress = ref(false)
+const editingAddress = ref(null)
+const valid = ref(false)
+const form = ref(null)
+
+const addressForm = ref({
+    firstname: '',
+    lastname: '',
+    company: '',
+    street: ['', ''],
+    city: '',
+    postcode: '',
+    country_id: '',
+    telephone: '',
+    default_billing: false,
+    default_shipping: false
+})
+
+const countries = ref([
+    { title: 'United States', value: 'US' },
+    { title: 'Canada', value: 'CA' },
+    // Add more countries as needed
+])
+
+const { getCustomerAddresses, fetchMagento } = useMagentoApi()
+
+const loadAddresses = async () => {
+    try {
+        addresses.value = await getCustomerAddresses()
+    } catch (error) {
+        console.error('Failed to load addresses:', error)
+    }
+}
+
+const editAddress = (address) => {
+    editingAddress.value = address
+    addressForm.value = { ...address }
+    showAddAddress.value = true
+}
+
+const deleteAddress = async (addressId) => {
+    try {
+        await fetchMagento(`customer/addresses/${addressId}`, {
+            method: 'DELETE'
+        })
+        await loadAddresses()
+    } catch (error) {
+        console.error('Failed to delete address:', error)
+    }
+}
+
+const saveAddress = async () => {
+    try {
+        if (editingAddress.value) {
+            await fetchMagento(`customer/addresses/${editingAddress.value.id}`, {
+                method: 'PUT',
+                body: addressForm.value
+            })
+        } else {
+            await fetchMagento('customer/addresses', {
+                method: 'POST',
+                body: addressForm.value
+            })
+        }
+        showAddAddress.value = false
+        editingAddress.value = null
+        addressForm.value = {
+            firstname: '',
+            lastname: '',
+            company: '',
+            street: ['', ''],
+            city: '',
+            postcode: '',
+            country_id: '',
+            telephone: '',
+            default_billing: false,
+            default_shipping: false
+        }
+        await loadAddresses()
+    } catch (error) {
+        console.error('Failed to save address:', error)
+    }
+}
+
+onMounted(() => {
+    loadAddresses()
+})
+
+useHead({
+    title: 'My Addresses'
+})
+</script>

package/app/components/features/account/dashboard.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="contentPage">
+        <v-card>
+            <v-layout>
+                <v-toolbar color="primary">
+                    <v-toolbar-title>{{ page?.name }}</v-toolbar-title>
+                    <v-toolbar-items>
+                        <v-btn prepend-icon="fas:fa fa-th" color="white" @click.stop="drawer = !drawer">
+                            {{ customerInfo?.firstname }} {{ customerInfo?.lastname }}
+                        </v-btn>
+                    </v-toolbar-items>
+                </v-toolbar>
+
+                <div class="d-flex flex-row">
+                    <v-navigation-drawer v-model="drawer" temporary>
+                        <v-tabs v-model="tab" color="primary" direction="vertical">
+                            <v-tab value="orders">Orders</v-tab>
+                            <v-tab value="addresses">Addresses</v-tab>
+                            <v-tab value="settings">Account Settings</v-tab>
+                            <v-tab value="downloads">Downloads</v-tab>
+                            <v-tab value="reviews">Reviews</v-tab>
+                        </v-tabs>
+                    </v-navigation-drawer>
+
+                    <v-main style="height: 100vh">
+                        <v-tabs-window v-model="tab" style="width: 100%;">
+                            <v-tabs-window-item value="orders">
+                                <v-card flat>
+                                    <v-card-text>
+                                        <orders />
+                                    </v-card-text>
+                                </v-card>
+                            </v-tabs-window-item>
+
+                            <v-tabs-window-item value="addresses">
+                                <v-card flat>
+                                    <v-card-text>
+                                        <addresses />
+                                    </v-card-text>
+                                </v-card>
+                            </v-tabs-window-item>
+
+                            <v-tabs-window-item value="settings">
+                                <v-card flat>
+                                    <v-card-text>
+                                        <settings />
+                                    </v-card-text>
+                                </v-card>
+                            </v-tabs-window-item>
+
+                            <v-tabs-window-item value="downloads">
+                                <v-card flat>
+                                    <v-card-text>
+                                        <downloads />
+                                    </v-card-text>
+                                </v-card>
+                            </v-tabs-window-item>
+
+                            <v-tabs-window-item value="reviews">
+                                <v-card flat>
+                                    <v-card-text>
+                                        <reviews />
+                                    </v-card-text>
+                                </v-card>
+                            </v-tabs-window-item>
+                        </v-tabs-window>
+                    </v-main>
+                </div>
+            </v-layout>
+        </v-card>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import orders from '#commerce/app/components/orders/orders/my-orders.vue'
+import addresses from '~/components/account/addresses.vue'
+import settings from '~/components/account/settings.vue'
+import downloads from '~/components/account/downloads.vue'
+import reviews from '~/components/account/reviews.vue'
+import { useMagentoApi } from '#commerce/app/composables/useMagentoApi'
+
+const tab = ref('orders')
+const drawer = ref(null)
+const customerInfo = ref(null)
+const { getCustomerInfo } = useMagentoApi()
+
+onMounted(async () => {
+    try {
+        customerInfo.value = await getCustomerInfo()
+    } catch (error) {
+        console.error('Failed to fetch customer info:', error)
+    }
+})
+
+definePageMeta({
+    layout: 'nolive',
+    middleware: ['authenticated'],
+})
+
+useHead({
+    title: "Account Dashboard"
+})
+</script>

package/app/components/features/account/downloads.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <v-toolbar color="transparent" density="compact" title="My Downloads">
+      <v-spacer />
+      <v-text-field
+        v-model="search"
+        append-icon="fas:fa fa-search"
+        label="Search Downloads"
+        single-line
+        hide-details
+        density="compact"
+        class="search-field"
+      />
+    </v-toolbar>
+
+    <v-card>
+      <v-table>
+        <thead>
+          <tr>
+            <th class="text-left">Product Name</th>
+            <th class="text-left">Order #</th>
+            <th class="text-left">Date</th>
+            <th class="text-left">Status</th>
+            <th class="text-left">Remaining Downloads</th>
+            <th class="text-left">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="download in filteredDownloads" :key="download.id">
+            <td>{{ download.product_name }}</td>
+            <td>{{ download.order_increment_id }}</td>
+            <td>{{ formatDate(download.created_at) }}</td>
+            <td>
+              <v-chip
+                :color="download.status === 'available' ? 'success' : 'error'"
+                size="small"
+              >
+                {{ download.status }}
+              </v-chip>
+            </td>
+            <td>{{ download.downloads_remaining }}</td>
+            <td>
+              <v-btn
+                v-if="download.status === 'available'"
+                color="primary"
+                size="small"
+                @click="downloadFile(download)"
+                :loading="downloading === download.id"
+              >
+                Download
+              </v-btn>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+
+      <v-pagination
+        v-model="page"
+        :length="totalPages"
+        @update:model-value="loadDownloads"
+      />
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useMagentoApi } from '#commerce/app/composables/useMagentoApi'
+
+const downloads = ref([])
+const search = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+const downloading = ref(null)
+
+const { fetchMagento } = useMagentoApi()
+
+const filteredDownloads = computed(() => {
+  if (!search.value) return downloads.value
+  const searchLower = search.value.toLowerCase()
+  return downloads.value.filter(download => 
+    download.product_name.toLowerCase().includes(searchLower) ||
+    download.order_increment_id.toLowerCase().includes(searchLower)
+  )
+})
+
+const formatDate = (dateString) => {
+  return new Date(dateString).toLocaleDateString()
+}
+
+const loadDownloads = async () => {
+  try {
+    const response = await fetchMagento('downloadable/customer/downloads', {
+      params: {
+        page: page.value,
+        limit: 10
+      }
+    })
+    downloads.value = response.items
+    totalPages.value = Math.ceil(response.total_count / 10)
+  } catch (error) {
+    console.error('Failed to load downloads:', error)
+  }
+}
+
+const downloadFile = async (download) => {
+  try {
+    downloading.value = download.id
+    const response = await fetchMagento(`downloadable/customer/downloads/${download.id}/link`, {
+      method: 'GET',
+      responseType: 'blob'
+    })
+    
+    // Create a download link and trigger it
+    const url = window.URL.createObjectURL(new Blob([response]))
+    const link = document.createElement('a')
+    link.href = url
+    link.setAttribute('download', download.product_name)
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    window.URL.revokeObjectURL(url)
+    
+    // Reload downloads to update remaining count
+    await loadDownloads()
+  } catch (error) {
+    console.error('Failed to download file:', error)
+  } finally {
+    downloading.value = null
+  }
+}
+
+onMounted(() => {
+  loadDownloads()
+})
+
+useHead({
+  title: 'My Downloads'
+})
+</script>
+
+<style scoped>
+.search-field {
+  max-width: 300px;
+}
+</style>