@meeovi/layer-social 1.0.3

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

@@ -0,0 +1,320 @@
+<template>
+    <div>
+        <!---->
+        <v-toolbar color="transparent" density="compact" title="My Reviews">
+            <v-spacer />
+            <v-text-field
+                v-model="search"
+                append-icon="fas:fa fa-search"
+                label="Search Reviews"
+                single-line
+                hide-details
+                density="compact"
+                class="search-field"
+            />
+        </v-toolbar>
+
+        <v-card>
+            <v-tabs v-model="tab" bg-color="transparent">
+                <v-tab value="written">Reviews Written</v-tab>
+                <v-tab value="pending">Pending Reviews</v-tab>
+            </v-tabs>
+
+            <v-card-text>
+                <v-tabs-window v-model="tab">
+                    <v-tabs-window-item value="written">
+                        <v-table>
+                            <thead>
+                                <tr>
+                                    <th class="text-left">Product</th>
+                                    <th class="text-left">Rating</th>
+                                    <th class="text-left">Review</th>
+                                    <th class="text-left">Date</th>
+                                    <th class="text-left">Status</th>
+                                    <th class="text-left">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="review in filteredReviews" :key="review.id">
+                                    <td>
+                                        <div class="d-flex align-center">
+                                            <v-img
+                                                :src="review.product_image"
+                                                width="50"
+                                                height="50"
+                                                class="mr-2"
+                                            />
+                                            {{ review.product_name }}
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <v-rating
+                                            :model-value="review.rating"
+                                            readonly
+                                            density="compact"
+                                        />
+                                    </td>
+                                    <td>{{ review.title }}</td>
+                                    <td>{{ formatDate(review.created_at) }}</td>
+                                    <td>
+                                        <v-chip
+                                            :color="review.status === 'approved' ? 'success' : 'warning'"
+                                            size="small"
+                                        >
+                                            {{ review.status }}
+                                        </v-chip>
+                                    </td>
+                                    <td>
+                                        <v-btn
+                                            icon="fas:fa fa-edit"
+                                            color="primary"
+                                            size="small"
+                                            @click="editReview(review)"
+                                        />
+                                        <v-btn
+                                            icon="fas:fa fa-trash"
+                                            color="error"
+                                            size="small"
+                                            @click="deleteReview(review.id)"
+                                        />
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </v-table>
+                    </v-tabs-window-item>
+
+                    <v-tabs-window-item value="pending">
+                        <v-table>
+                            <thead>
+                                <tr>
+                                    <th class="text-left">Product</th>
+                                    <th class="text-left">Order Date</th>
+                                    <th class="text-left">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="order in pendingReviews" :key="order.id">
+                                    <td>
+                                        <div class="d-flex align-center">
+                                            <v-img
+                                                :src="order.product_image"
+                                                width="50"
+                                                height="50"
+                                                class="mr-2"
+                                            />
+                                            {{ order.product_name }}
+                                        </div>
+                                    </td>
+                                    <td>{{ formatDate(order.created_at) }}</td>
+                                    <td>
+                                        <v-btn
+                                            color="primary"
+                                            size="small"
+                                            @click="writeReview(order)"
+                                        >
+                                            Write Review
+                                        </v-btn>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </v-table>
+                    </v-tabs-window-item>
+                </v-tabs-window>
+            </v-card-text>
+
+            <v-pagination
+                v-model="page"
+                :length="totalPages"
+                @update:model-value="loadReviews"
+            />
+        </v-card>
+
+        <!-- Review Dialog -->
+        <v-dialog v-model="showReviewDialog" max-width="600px">
+            <v-card>
+                <v-card-title>
+                    {{ editingReview ? 'Edit Review' : 'Write Review' }}
+                </v-card-title>
+                <v-card-text>
+                    <v-form ref="reviewForm" v-model="reviewValid">
+                        <DirectusFormElement 
+                            v-for="field in reviewFields" 
+                            :key="field.field" 
+                            :field="field"
+                            v-model="reviewForm[field.field]"
+                        />
+                    </v-form>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn color="error" @click="showReviewDialog = false">Cancel</v-btn>
+                    <v-btn
+                        color="primary"
+                        @click="saveReview"
+                        :loading="saving"
+                        :disabled="!reviewValid"
+                    >
+                        Save Review
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        computed,
+        onMounted
+    } from 'vue'
+
+    const { $directus, $readFieldsByCollection, $createItem, $updateItem, $deleteItem } = useNuxtApp()
+
+    const reviews = ref([])
+    const pendingReviews = ref([])
+    const search = ref('')
+    const page = ref(1)
+    const totalPages = ref(1)
+    const showReviewDialog = ref(false)
+    const reviewValid = ref(false)
+    const saving = ref(false)
+    const editingReview = ref(null)
+    const reviewFields = ref([])
+
+    const reviewForm = ref({
+        rating: 0,
+        title: '',
+        detail: '',
+        product_id: null
+    })
+
+    const filteredReviews = computed(() => {
+        if (!search.value) return reviews.value
+        const searchLower = search.value.toLowerCase()
+        return reviews.value.filter(review => 
+            review.product_name.toLowerCase().includes(searchLower) ||
+            review.title.toLowerCase().includes(searchLower)
+        )
+    })
+
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleDateString()
+    }
+
+    const loadReviewFields = async () => {
+        try {
+            const fields = await $directus.request($readFieldsByCollection('reviews'))
+            reviewFields.value = fields.filter(field => 
+                ['rating', 'title', 'detail'].includes(field.field)
+            )
+        } catch (error) {
+            console.error('Failed to load review fields:', error)
+        }
+    }
+
+    const loadReviews = async () => {
+        try {
+            const response = await $directus.request($readItems('reviews', {
+                params: {
+                    page: page.value,
+                    limit: 10,
+                    filter: {
+                        status: { _neq: 'pending' }
+                    }
+                }
+            }))
+            reviews.value = response.data
+            totalPages.value = Math.ceil(response.meta.total_count / 10)
+        } catch (error) {
+            console.error('Failed to load reviews:', error)
+        }
+    }
+
+    const loadPendingReviews = async () => {
+        try {
+            const response = await $directus.request($readItems('reviews', {
+                params: {
+                    filter: {
+                        status: 'pending'
+                    }
+                }
+            }))
+            pendingReviews.value = response.data
+        } catch (error) {
+            console.error('Failed to load pending reviews:', error)
+        }
+    }
+
+    const editReview = (review) => {
+        editingReview.value = review
+        reviewForm.value = {
+            rating: review.rating,
+            title: review.title,
+            detail: review.detail,
+            product_id: review.product_id
+        }
+        showReviewDialog.value = true
+    }
+
+    const writeReview = (order) => {
+        editingReview.value = null
+        reviewForm.value = {
+            rating: 0,
+            title: '',
+            detail: '',
+            product_id: order.product_id
+        }
+        showReviewDialog.value = true
+    }
+
+    const saveReview = async () => {
+        try {
+            saving.value = true
+            if (editingReview.value) {
+                await $directus.request($updateItem('reviews', editingReview.value.id, reviewForm.value))
+            } else {
+                await $directus.request($createItem('reviews', {
+                    ...reviewForm.value,
+                    status: 'pending'
+                }))
+            }
+            showReviewDialog.value = false
+            await loadReviews()
+            await loadPendingReviews()
+        } catch (error) {
+            console.error('Failed to save review:', error)
+        } finally {
+            saving.value = false
+        }
+    }
+
+    const deleteReview = async (reviewId) => {
+        if (!confirm('Are you sure you want to delete this review?')) return
+        
+        try {
+            await $directus.request($deleteItem('reviews', reviewId))
+            await loadReviews()
+        } catch (error) {
+            console.error('Failed to delete review:', error)
+        }
+    }
+
+    const tab = ref(null)
+
+    onMounted(() => {
+        loadReviewFields()
+        loadReviews()
+        loadPendingReviews()
+    })
+
+    useHead({
+        title: 'My Reviews'
+    })
+</script>
+
+<style scoped>
+.search-field {
+    max-width: 300px;
+}
+</style>

package/app/components/features/account/setting/accessibility.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-card>
+    <v-card-title>Accessibility Settings</v-card-title>
+    <v-card-text>
+      <v-switch
+        v-model="highContrast"
+        label="High Contrast Mode"
+      ></v-switch>
+      <v-slider
+        v-model="fontSize"
+        label="Font Size"
+        min="12"
+        max="24"
+        step="2"
+        thumb-label
+      ></v-slider>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { useAccessibilitySettings } from '~/composables/settings/useAccessibilitySettings'
+
+const { highContrast, fontSize } = useAccessibilitySettings()
+</script>
+
+<style>
+/* Add these styles to your global CSS */
+body {
+  transition: background-color 0.3s, color 0.3s;
+}
+
+body.high-contrast {
+  background-color: #000;
+  color: #fff;
+}
+
+body.high-contrast a {
+  color: #ffff00;
+}
+
+/* Adjust Vuetify components for high contrast mode */
+body.high-contrast .v-card {
+  background-color: #333;
+  color: #fff;
+}
+
+body.high-contrast .v-switch__track {
+  background-color: #666 !important;
+}
+
+body.high-contrast .v-switch__thumb {
+  background-color: #fff !important;
+}
+
+/* Add more high-contrast styles for other components as needed */
+</style>

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

@@ -0,0 +1,133 @@
+<template>
+  <form class="form-widget" @submit.prevent="updateProfile">
+    <avatar v-model:path="avatar_path" @upload="updateProfile" />
+    <div>
+      <v-text-field label="Email" id="email" type="email" :value="user.email" disabled />
+    </div>
+    <div>
+      <v-text-field label="Username" id="username" v-model="username" />
+    </div>
+
+    <div>
+      <v-text-field label="Date of Birth" id="date_of_birth" v-model="date_of_birth" />
+    </div>
+
+    <div>
+      <v-text-field label="Default Billing Address" id="default_billing" v-model="default_billing" />
+    </div>
+
+    <div>
+      <v-text-field label="Default Shipping Address" id="default_shipping" v-model="default_shipping" />
+    </div>
+
+    <div>
+      <v-text-field label="Prefix" id="prefix" v-model="prefix" />
+    </div>
+
+    <div>
+      <v-text-field label="First Name" id="firstname" v-model="firstname" />
+    </div>
+
+    <div>
+      <v-text-field label="Middle Name" id="middlename" v-model="middlename" />
+    </div>
+
+    <div>
+      <v-text-field label="Last Name" id="lastname" v-model="lastname" />
+    </div>
+
+    <div>
+      <v-text-field label="Suffix" id="suffix" v-model="suffix" />
+    </div>
+
+    <div>
+      <v-text-field label="Job Title" id="job_title" v-model="job_title" />
+    </div>
+
+    <div>
+      <v-text-field label="Gender" id="gender" v-model="gender" />
+    </div>
+
+    <div>
+      <v-text-field label="Company" id="companies" v-model="companies" />
+    </div>
+
+    <div>
+      <v-text-field label="Role" id="role" v-model="role" />
+    </div>
+
+    <div>
+      <v-text-field label="Tax VAT" id="taxvat" v-model="taxvat" />
+    </div>
+
+    <div>
+      <v-text-field label="Team" id="team" v-model="team" />
+    </div>
+
+    <div>
+      <v-text-field label="Phone Number" id="telephone" v-model="telephone" />
+    </div>
+
+    <div>
+      <v-text-field label="Website" id="website" v-model="website" />
+    </div>
+
+    <div>
+      <v-btn class="btn btn-info display-7" type="submit" :value="loading ? 'Loading ...' : 'Update'"
+        :disabled="loading" />
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useMutation } from '@vue/apollo-composable';
+import { UPDATE_CUSTOMER } from '#graphql/commerce/mutations/updateCustomer.gql?raw';
+
+const firstname = ref('');
+const middlename = ref('');
+const lastname = ref('');
+const prefix = ref('');
+const suffix = ref('');
+const dob = ref('');
+const default_billing = ref('');
+const default_shipping = ref('');
+const job_title = ref('');
+const gender = ref('');
+const company = ref('');
+const role = ref('');
+const taxvat = ref('');
+const team = ref('');
+const telephone = ref('');
+const website = ref('');
+const avatar_path = ref('');
+
+const { mutate: updateCustomer, loading, error } = useMutation(UPDATE_CUSTOMER);
+
+const updateProfile = async () => {
+  try {
+    await updateCustomer({
+      firstname: firstname.value,
+      middlename: middlename.value,
+      lastname: lastname.value,
+      prefix: prefix.value,
+      suffix: suffix.value,
+      dob: dob.value,
+      default_billing: default_billing.value,
+      default_shipping: default_shipping.value,
+      job_title: job_title.value,
+      gender: Number.parseInt(gender.value), // Convert to integer if required
+      company: company.value,
+      role: role.value,
+      taxvat: taxvat.value,
+      team: team.value,
+      telephone: telephone.value,
+      website: website.value,
+      avatar_path: avatar_path.value,
+    });
+    console.log('Profile updated successfully');
+  } catch (err) {
+    console.error('Error updating profile', err);
+  }
+};
+</script>

package/app/components/features/account/setting/communications.vue

@@ -0,0 +1,125 @@
+<template>
+  <v-card>
+    <v-card-title>Communication Preferences</v-card-title>
+    <v-card-text>
+      <!-- Newsletter subscriptions -->
+      <v-list v-if="newsletters.length">
+        <v-list-subheader>Your Newsletter Subscriptions:</v-list-subheader>
+        <v-list-item v-for="newsletter in newsletters" :key="newsletter.id">
+          <v-list-item-content>
+            <v-list-item-title>{{ newsletter.name }}</v-list-item-title>
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-switch v-model="newsletter.subscribed" @change="updateSubscription(newsletter)"></v-switch>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+      <v-alert v-else type="info">You are not subscribed to any newsletters.</v-alert>
+      
+      <!-- SMS Notifications -->
+      <v-switch
+        v-model="smsNotifications.enabled"
+        label="Receive SMS Notifications"
+        @change="updateSmsNotifications"
+      ></v-switch>
+      <v-text-field
+        v-if="smsNotifications.enabled"
+        v-model="smsNotifications.phoneNumber"
+        label="Phone Number for SMS"
+        placeholder="Enter your phone number"
+        @input="updateSmsNotifications"
+      ></v-text-field>
+
+      <!-- Push Notifications -->
+      <v-switch
+        v-model="pushNotifications.enabled"
+        label="Receive Push Notifications"
+        @change="updatePushNotifications"
+      ></v-switch>
+      
+      <v-btn @click="savePreferences" color="primary">Save Preferences</v-btn>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const { $magento } = useNuxtApp();
+
+const newsletters = ref([]);
+const smsNotifications = ref({
+  enabled: false,
+  phoneNumber: ''
+});
+const pushNotifications = ref({
+  enabled: false
+});
+
+const fetchNewsletterSubscriptions = async () => {
+  try {
+    const response = await $magento.customer.getNewsletterSubscriptions();
+    newsletters.value = response.map(subscription => ({
+      id: subscription.id,
+      name: subscription.name,
+      subscribed: subscription.subscribed
+    }));
+  } catch (error) {
+    console.error('Error fetching newsletter subscriptions:', error);
+  }
+};
+
+const updateSubscription = async (newsletter) => {
+  try {
+    await $magento.customer.updateNewsletterSubscription(newsletter.id, newsletter.subscribed);
+  } catch (error) {
+    console.error('Error updating subscription:', error);
+    newsletter.subscribed = !newsletter.subscribed;
+  }
+};
+
+const updateSmsNotifications = async () => {
+  try {
+    await $magento.customer.updateSmsNotifications(smsNotifications.value);
+  } catch (error) {
+    console.error('Error updating SMS notifications:', error);
+  }
+};
+
+const updatePushNotifications = async () => {
+  try {
+    await $magento.customer.updatePushNotifications(pushNotifications.value.enabled);
+  } catch (error) {
+    console.error('Error updating push notifications:', error);
+  }
+};
+
+const savePreferences = async () => {
+  try {
+    await Promise.all([
+      updateSmsNotifications(),
+      updatePushNotifications()
+    ]);
+    console.log('Saving communication preferences');
+    // Optionally, show a success message
+  } catch (error) {
+    console.error('Error saving preferences:', error);
+    // Handle error (e.g., show an error message to the user)
+  }
+};
+
+const fetchPreferences = async () => {
+  try {
+    const preferences = await $magento.customer.getCommunicationPreferences();
+    smsNotifications.value = preferences.smsNotifications;
+    pushNotifications.value = preferences.pushNotifications;
+  } catch (error) {
+    console.error('Error fetching preferences:', error);
+  }
+};
+
+onMounted(() => {
+  fetchNewsletterSubscriptions();
+  fetchPreferences();
+});
+</script>