Merged PR 85: Added information about pricing and a return btn

Added information about pricing and a return btn

src/views/main/Wallet.vue

@@ -1,57 +1,124 @@
 <template>
   <v-container class="mt-10 bg-gray-100 py-10 rounded-lg shadow-lg border border-fuchsia-500 mb-15">
-    <div class="flex justify-center text-6xl mb-4 font-sans font-weight-bold">Portefeuille</div>
+    <div class="flex justify-center text-6xl mb-12 font-sans font-weight-bold">Portefeuille</div>
     <div class="flex justify-between mb-4">
       <div class="text-left">
-        <span class="font-bold">Montant Total : </span>
+        <span class="font-bold">Montant Total : {{ formattedBalance }}</span>
       </div>
-      <div class="text-center">
-        <span class="font-bold">Nombre total de transactions : </span>
+      <div class="text-right">
+        <span class="font-bold">Nombre de transactions total : {{ transactionCount }}</span>
       </div>
     </div>
-    <v-data-table 
+    <v-data-table
         :headers="headers"
-        :items="transactions"
+        :items="formattedTransactions"
         class="elevation-1 text-black"
         :items-per-page="5"
         show-group-by
-    >   
-    </v-data-table>    
+    >
+    </v-data-table>
+    <div class="flex justify-end mt-4">
+      <v-btn icon @click="openModal">
+        <v-icon class="text-[#A30E79]">mdi-information</v-icon>
+      </v-btn>
+    </div>
+    <v-dialog v-model="isModalOpen" max-width="500px">
+      <v-card>
+        <v-card-title>
+          Tarification
+        </v-card-title>
+        <v-card-text class="scrollable-content">
+          Découvrez Hutopy, l'endroit où la valorisation de votre travail atteint son apogée. Avec une commission réduite à seulement 9 %, notre engagement envers votre succès est palpable. Chaque pourcentage prélevé est réinvesti avec soin pour catalyser votre croissance : du développement de fonctionnalités innovantes à la maintenance d'une infrastructure technologique de pointe, en passant par un support utilisateur de premier ordre. Notre objectif ? Amplifier votre expansion et garantir une expérience utilisateur sans précédent.
+          Pour chaque transaction, un frais minime assure la sécurité et la fiabilité de vos paiements, grâce à un partenaire de confiance à la renommée mondiale. Ce dernier sécurise pour des milliards en transaction chaque année pour une diversité d'entreprises, allant des startups dynamiques aux conglomérats établis. Ce gage de sécurité est disponible pour une modique somme : 2,9 % plus 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et la protection de vos revenus.
+          Notre modèle tarifaire a été pensé dans un esprit de simplicité et de transparence, avec l'ambition ultime d'optimiser vos gains. Chez Hutopy, la notion de partenariat prend tout son sens : votre épanouissement est au cœur de nos préoccupations. Bénéficiez d'une plateforme qui élargit votre horizon créatif et entrepreneurial, tout en vous assurant que vos intérêts sont précieusement gardés.
+          Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de succès que nous pouvons emprunter ensemble, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
+        </v-card-text>
+        <v-card-actions>
+          <v-btn text class="ml-auto" @click="isModalOpen = false">Fermer</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <div class="flex justify-center mt-4 ">
+      <v-btn text class="transparent-btn text-lg  px-12" @click="navigateToHome">Retour</v-btn>
+    </div>
   </v-container>
-  
-  
-  
 </template>
 
-<script async setup>
-import { onBeforeMount, ref } from 'vue';
-import {useClient} from "@/plugins/api.js";
-import MyUserModel from "@/models/myUserModel.js";
-const client = useClient();
+<script setup>
+import { onBeforeMount, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useClient } from "@/plugins/api.js";
 
-const total = ref(false);
-const drawer = ref(false);
-const currentUserName = ref("INVITÉ");
-let currentUser = null;
+const client = useClient();
+const router = useRouter();
+
+const userTransactions = ref([]);
+const totalBalance = ref(0);
+const isModalOpen = ref(false);
+
+const formattedTransactions = computed(() => {
+  return userTransactions.value.map(transaction => ({
+    ...transaction,
+    created: transaction.created.split('T')[0]
+  }));
+});
+
+const formattedBalance = computed(() => {
+  const balanceStr = totalBalance.value.toString();
+  const integerPart = balanceStr.slice(0, -2) || '0';
+  const decimalPart = balanceStr.slice(-2);
+  return integerPart + ',' + decimalPart + ' $';
+});
+
+const transactionCount = computed(() => userTransactions.value.length);
 
 onBeforeMount(async () => {
   try {
     const myUser = await client.get("/api/GetMyUser");
-    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
-    currentUser = currentUserModel;
-    currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName
-    
-  } catch(error) {
-    console.log("User not logged")
+    userTransactions.value = myUser.data.userTransactions;
+    totalBalance.value = myUser.data.totalBalance;
+  } catch (error) {
+    navigateToHome();
   }
-})
+});
 
-function logout(){
-  localStorage.removeItem('jwt');
-  window.location.reload();
-}
+const headers = ref([
+  { title: 'Montant', value: 'amount', width: '20%', key: "amount" },
+  { title: 'Date', value: 'created', width: '20%', key: "created" },
+  { title: 'Message', value: 'tipMessage', width: '60%' }
+]);
 
+const navigateToHome = () => {
+  router.push('/');
+};
+
+const openModal = () => {
+  isModalOpen.value = true;
+};
 </script>
 
 <style scoped>
+.scrollable-content {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.scrollable-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollable-content::-webkit-scrollbar-thumb {
+  background-color: #A30E79;
+  border-radius: 10px;
+}
+
+.scrollable-content::-webkit-scrollbar-thumb:hover {
+  background-color: #a21caf;
+}
+
+.transparent-btn {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+}
 </style>

src/views/manualusers/ARPS.vue

@@ -124,6 +124,9 @@
     </template>
   </v-dialog>
   
+ 
+  
+  
 </template>
 
 
@@ -131,6 +134,7 @@
 <script setup>
 import CreatorFeed from "@/views/main/CreatorFeed.vue";
 import {ref} from 'vue';
+import DonationPopup from "@/views/main/DonationPopup.vue";
 
 let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
 let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';