@meeovi/layer-social 1.0.3

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

@@ -0,0 +1,93 @@
+<template>
+  <v-card>
+    <v-card-title>Language and Localization</v-card-title>
+    <v-card-text>
+      <v-select
+        v-model="selectedLanguage"
+        :items="languages"
+        label="Preferred Language"
+        item-title="label"
+        item-value="value"
+        :loading="loading"
+      ></v-select>
+      <v-btn @click="saveLanguagePreference" color="primary" :loading="saving">
+        Save Language Preference
+      </v-btn>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const config = useRuntimeConfig();
+const baseUrl = config.public.vendureUrl; // Magento API base URL
+
+const selectedLanguage = ref('');
+const languages = ref([]);
+const loading = ref(false);
+const saving = ref(false);
+
+// Fetch available languages
+const fetchLanguages = async () => {
+  loading.value = true;
+  try {
+    const response = await $fetch(`/api/store/storeConfigs`, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${config.public.vendureApiToken}`
+      },
+    });
+    
+    // Check if response is an array, if not, wrap it in an array
+    const storeConfigs = Array.isArray(response) ? response : [response];
+    
+    languages.value = storeConfigs.map(store => ({
+      label: store.locale,
+      value: store.code
+    }));
+
+    // Set default selected language if available
+    if (languages.value.length > 0) {
+      selectedLanguage.value = languages.value[0].value;
+    }
+  } catch (error) {
+    console.error('Error fetching languages:', error);
+    // You might want to add user-friendly error handling here
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Save language preference
+const saveLanguagePreference = async () => {
+  if (!selectedLanguage.value) return;
+
+  saving.value = true;
+  try {
+    await $fetch(`/api/customers/me`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('customerToken')}`,
+      },
+      body: {
+        customer: {
+          store_id: selectedLanguage.value,
+        },
+      },
+    });
+    console.log('Language preference saved successfully');
+    // You might want to add a success message here
+  } catch (error) {
+    console.error('Error saving language preference:', error);
+    // You might want to add an error message here
+  } finally {
+    saving.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchLanguages();
+});
+</script>

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

@@ -0,0 +1,130 @@
+<template>
+  <v-card>
+    <v-card-title>Payment Methods</v-card-title>
+    <v-card-text>
+      <v-alert v-if="error" type="error">{{ error }}</v-alert>
+      <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
+      <v-list v-else>
+        <v-list-item v-for="(method, index) in paymentMethods" :key="index">
+          <v-list-item-title>{{ method.type }} ending in {{ method.last4 }}</v-list-item-title>
+          <template v-slot:append>
+            <v-btn icon @click="removePaymentMethod(method.id)">
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </template>
+        </v-list-item>
+      </v-list>
+      <div ref="paypalButtonContainer"></div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRuntimeConfig } from '#imports'
+
+const config = useRuntimeConfig()
+const paymentMethods = ref([]);
+const loading = ref(false);
+const error = ref(null);
+const paypalButtonContainer = ref(null);
+
+const fetchPaymentMethods = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await $fetch('/api/customers/me/payment-methods', {
+      method: 'GET',
+      headers: {
+        // Include any necessary authentication headers
+        'Authorization': `Bearer ${config.public.vendureApiToken}`
+      }
+    });
+    
+    console.log('API Response:', response);
+    
+    if (typeof response === 'string' && response.startsWith('<!DOCTYPE html>')) {
+      throw new Error('Received HTML response instead of JSON. This might indicate an authentication issue or incorrect API endpoint.');
+    }
+    
+    if (Array.isArray(response)) {
+      paymentMethods.value = response.map(method => ({
+        id: method.id || '',
+        type: method.type || '',
+        last4: method.last4 || ''
+      }));
+    } else if (response && typeof response === 'object') {
+      // If the response is an object, it might contain a data property with the array
+      const methodsArray = response.data || [];
+      if (Array.isArray(methodsArray)) {
+        paymentMethods.value = methodsArray.map(method => ({
+          id: method.id || '',
+          type: method.type || '',
+          last4: method.last4 || ''
+        }));
+      } else {
+        throw new Error(`Unexpected response format: ${JSON.stringify(response)}`);
+      }
+    } else {
+      throw new Error(`Unexpected response format: ${JSON.stringify(response)}`);
+    }
+    
+    console.log('Processed payment methods:', paymentMethods.value);
+  } catch (err) {
+    error.value = 'Failed to fetch payment methods: ' + (err.message || 'Unknown error');
+    console.error('Error fetching payment methods:', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const initializePayPalButton = () => {
+  if (window.paypal) {
+    window.paypal.Buttons({
+      createOrder: (data, actions) => {
+        // This function sets up the details of the transaction
+        return actions.order.create({
+          purchase_units: [{
+            amount: {
+              value: '0.01' // Set this to the appropriate amount or handle it dynamically
+            }
+          }]
+        });
+      },
+      onApprove: async (data, actions) => {
+        // This function captures the funds from the transaction
+        const order = await actions.order.capture();
+        console.log('Transaction completed', order);
+        
+        // Here you would typically send the order details to your server
+        // to save the new payment method
+        try {
+          await fetch('/api/customers/me/payment-methods', {
+            method: 'POST',
+            body: JSON.stringify({
+              paypalOrderId: order.id,
+              // Include any other necessary details
+            })
+          });
+          await fetchPaymentMethods(); // Refresh the list of payment methods
+        } catch (err) {
+          error.value = 'Failed to save new payment method';
+          console.error(err);
+        }
+      }
+    }).render(paypalButtonContainer.value);
+  } else {
+    console.error('PayPal SDK not loaded');
+  }
+};
+
+onMounted(() => {
+  fetchPaymentMethods();
+  
+  // Load PayPal SDK
+  const script = document.createElement('script');
+  script.src = `https://www.paypal.com/sdk/js?client-id=YOUR_PAYPAL_CLIENT_ID`;
+  script.addEventListener('load', initializePayPalButton);
+  document.body.appendChild(script);
+});
+</script>

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

@@ -0,0 +1,152 @@
+<template>
+  <v-card>
+    <v-card-title>Personalization</v-card-title>
+    <v-card-text>
+      <v-select
+        v-model="preferredCategories"
+        :items="categories"
+        item-title="title"
+        item-value="value"
+        label="Preferred Categories"
+        multiple
+        chips
+        :loading="!categories.length"
+      ></v-select>
+      <v-select
+        v-model="preferredBrands"
+        :items="brands"
+        item-title="title"
+        item-value="value"
+        label="Preferred Brands"
+        multiple
+        chips
+        :loading="!brands.length"
+      ></v-select>
+      <v-switch
+        v-model="enableRecommendations"
+        label="Enable Product Recommendations"
+      ></v-switch>
+      <v-btn @click="savePersonalization" color="primary" :loading="loading">
+        Save Preferences
+      </v-btn>
+      <v-alert v-if="successMessage" type="success" class="mt-3">
+        {{ successMessage }}
+      </v-alert>
+      <v-alert v-if="errorMessage" type="error" class="mt-3">
+        {{ errorMessage }}
+      </v-alert>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRuntimeConfig } from '#imports';
+
+const config = useRuntimeConfig();
+const preferredCategories = ref([]);
+const preferredBrands = ref([]);
+const enableRecommendations = ref(true);
+
+// These would typically come from your backend
+const categories = ref([]);
+const brands = ref([]);
+
+const loading = ref(false);
+const successMessage = ref('');
+const errorMessage = ref('');
+
+const fetchCategories = async () => {
+  try {
+    const response = await $fetch(`${config.public.vendureUrl}/V1/categories`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        // If your API requires authentication for this endpoint, include the token
+        'Authorization': `Bearer ${config.public.vendureApiToken}`
+      }
+    });
+
+    // Magento returns a category tree, so we need to flatten it
+    const flattenCategories = (category) => {
+      let result = [{
+        value: category.id,
+        title: category.name
+      }];
+      if (category.children_data) {
+        category.children_data.forEach(child => {
+          result = result.concat(flattenCategories(child));
+        });
+      }
+      return result;
+    };
+
+    categories.value = flattenCategories(response);
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+    errorMessage.value = 'Failed to load categories. Please refresh the page.';
+  }
+};
+
+// New function to fetch brands
+const fetchBrands = async () => {
+  try {
+    const response = await $fetch('/api/commerce/catalog/brands')
+    brands.value = response.map(brand => ({
+      value: brand.brand_id,
+      title: brand.brand_name
+    }))
+  } catch (error) {
+    console.error('Error fetching brands:', error)
+    errorMessage.value = 'Failed to load brands. Please refresh the page.'
+  }
+}
+
+// Fetch categories when the component is mounted
+onMounted(() => {
+  fetchCategories();
+  fetchBrands()
+});
+
+const savePersonalization = async () => {
+  loading.value = true;
+  successMessage.value = '';
+  errorMessage.value = '';
+
+  try {
+    const response = await $fetch(`${config.public.vendureUrl}/V1/customers/me`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${config.public.vendureApiToken}` // You need to obtain and store the customer token
+      },
+      body: JSON.stringify({
+        customer: {
+          custom_attributes: [
+            {
+              attribute_code: 'preferred_categories',
+              value: JSON.stringify(preferredCategories.value)
+            },
+            {
+              attribute_code: 'preferred_brands',
+              value: JSON.stringify(preferredBrands.value)
+            },
+            {
+              attribute_code: 'enable_recommendations',
+              value: enableRecommendations.value ? '1' : '0'
+            }
+          ]
+        }
+      })
+    });
+
+    successMessage.value = 'Personalization preferences saved successfully!';
+  } catch (error) {
+    console.error('Error saving personalization preferences:', error);
+    errorMessage.value = 'Failed to save preferences. Please try again.';
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+

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

@@ -0,0 +1,90 @@
+<template>
+  <v-card>
+    <v-card-title>Privacy and Data</v-card-title>
+    <v-card-text>
+      <!--<v-switch
+        v-model="dataSharing"
+        label="Allow Data Sharing for Personalized Experiences"
+        @change="updateDataSharingPreference"
+      ></v-switch>-->
+      <v-row>
+        <v-col><v-btn @click="requestDataReport" class="mb-4">Request Personal Data Report</v-btn></v-col>
+        <v-col><v-btn @click="deleteAccount" color="error">Delete Account</v-btn></v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useUserStore } from '#auth/app/stores/user';
+
+const customerStore = useUserStore();
+
+const dataSharing = ref(true);
+
+onMounted(async () => {
+  await fetchPrivacySettings();
+});
+
+const fetchPrivacySettings = async () => {
+  try {
+    const settings = await customerStore.getPrivacySettings();
+    dataSharing.value = settings.data_sharing_enabled;
+  } catch (error) {
+    console.error('Error fetching privacy settings:', error);
+  }
+};
+
+const requestDataReport = async () => {
+  try {
+    const response = await $fetch('/api/customer/gdpr/delete-customer', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        // Add any necessary authentication headers
+      },
+    });
+    console.log('Personal data report requested successfully');
+    // Handle the response as needed
+  } catch (error) {
+    console.error('Error requesting personal data report:', error);
+  }
+};
+
+const deleteAccount = async () => {
+  try {
+    const response = await $fetch('/api/customers/me', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        // Add any necessary authentication headers
+      },
+    });
+    console.log('Account deletion process initiated');
+    // Handle the response, e.g., log out the user and redirect
+  } catch (error) {
+    console.error('Error initiating account deletion:', error);
+  }
+};
+
+const updateDataSharingPreference = async () => {
+  try {
+    const response = await $fetch('/api/customers/me/data-sharing', {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        // Add any necessary authentication headers
+      },
+      body: JSON.stringify({
+        data_sharing_enabled: dataSharing.value
+      }),
+    });
+    console.log('Data sharing preference updated successfully');
+    // Handle the response as needed
+  } catch (error) {
+    console.error('Error updating data sharing preference:', error);
+  }
+};
+</script>
+

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

@@ -0,0 +1,84 @@
+<template>
+  <v-card>
+    <v-card-title>Security Settings</v-card-title>
+    <v-card-text>
+      <v-switch v-model="twoFactorAuth" label="Enable Two-Factor Authentication"
+        @change="toggleTwoFactorAuth"></v-switch>
+      <!--<v-row>
+        <v-col><v-btn @click="viewLoginHistory" class="mb-4">View Login History</v-btn></v-col>
+        <v-col><v-btn @click="manageActiveSessions" color="warning">Manage Active Sessions</v-btn></v-col>
+      </v-row>-->
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+  import {
+    ref
+  } from 'vue';
+
+  const config = useRuntimeConfig();
+  const twoFactorAuth = ref(false);
+
+  const toggleTwoFactorAuth = async () => {
+    try {
+      const response = await $fetch(`/api/V1/tfa/google/configure`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${config.public.vendureApiToken}` // Replace with actual auth token
+        },
+        body: JSON.stringify({
+          'tfa_enabled': twoFactorAuth.value
+        })
+      });
+      console.log('2FA status updated:', response);
+    } catch (error) {
+      console.error('Error updating 2FA status:', error);
+    }
+  };
+
+  const viewLoginHistory = async () => {
+    try {
+      const response = await $fetch(`/api/V1/customer/login-history`, {
+        headers: {
+          'Authorization': `Bearer ${config.public.vendureApiToken}` // Replace with actual auth token
+        }
+      });
+      console.log('Login history:', response);
+      // You can then update the UI to display this information
+    } catch (error) {
+      console.error('Error fetching login history:', error);
+    }
+  };
+
+  const manageActiveSessions = async () => {
+    try {
+      const response = await $fetch(`/api/V1/customer/active-sessions`, {
+        headers: {
+          'Authorization': `Bearer ${config.public.vendureApiToken}` // Replace with actual auth token
+        }
+      });
+      console.log('Active sessions:', response);
+      // You can then update the UI to display this information and allow management
+    } catch (error) {
+      console.error('Error fetching active sessions:', error);
+    }
+  };
+
+  const terminateSession = async (sessionId) => {
+    try {
+      const response = await $fetch(`/api/V1/customer/terminate-session/${sessionId}`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${config.public.vendureApiToken}` // Replace with actual auth token
+        }
+      });
+      console.log('Session terminated:', response);
+      // Refresh the list of active sessions
+      await manageActiveSessions();
+    } catch (error) {
+      console.error('Error terminating session:', error);
+    }
+  };
+</script>