feat: Enhance UX of My Rewards Overview Widget Drawer - MEED-7373 - M…

…eeds-io/MIPs#155 (#548)

wallet-services/src/main/resources/locale/addon/Wallet_en.properties

@@ -494,3 +494,8 @@ wallet.administration.initialFundsMessagePlaceholder=Enter a default message to
 wallet.administration.apply=Apply
 wallet.administration.cancel=Cancel
 wallet.administration.reset=Reset
+
+wallet.overview.rewards.title=My Wallet History
+wallet.overview.points=Points
+wallet.overview.rewards=Rewards
+wallet.overview.transactions=Activity

wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-overview/components/WalletOverview.vue

@@ -57,10 +57,8 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
         </div>
       </div>
     </div>
-
     <wallet-overview-drawer
-      ref="walletOverviewDrawer"
-      :symbol="currencySymbol" />
+      ref="walletOverviewDrawer" />
   </v-app>
 </template>
 

wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-overview/components/WalletOverviewDrawer.vue

@@ -17,21 +17,49 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 <template>
   <exo-drawer
     ref="drawer"
+    v-model="drawer"
     :right="!$vuetify.rtl"
     :loading="loading"
-    class="rewardsOverviewDrawer">
+    class="rewardsOverviewDrawer"
+    allow-expand>
     <template slot="title">
-      {{ title }}
+      {{ $t('wallet.overview.rewards.title') }}
     </template>
-    <template slot="content">
-      <v-list v-if="rewardsList">
-        <wallet-overview-reward-item
-          v-for="reward in rewardsList"
-          :key="reward.technicalId"
-          :reward-item="reward"
-          :symbol="symbol"
-          class="border-color border-radius ma-4" />
-      </v-list>
+    <template v-if="drawer" slot="content">
+      <v-tabs
+        v-model="tabName"
+        slider-size="4">
+        <v-tab
+          tab-value="rewards"
+          href="#rewards">
+          {{ $t('wallet.overview.rewards') }}
+        </v-tab>
+        <v-tab
+          tab-value="transactions"
+          href="#transactions">
+          {{ $t('wallet.overview.transactions') }}
+        </v-tab>
+      </v-tabs>
+      <v-tabs-items
+        v-model="tabName"
+        class="px-4">
+        <v-tab-item value="rewards">
+          <v-list v-if="rewardsList">
+            <wallet-overview-reward-item
+              v-for="reward in rewardsList"
+              :key="reward.technicalId"
+              :reward-item="reward"
+              :symbol="symbol"
+              class="border-color border-radius mb-2" />
+          </v-list>
+        </v-tab-item>
+        <v-tab-item value="transactions">
+          <wallet-reward-transactions-list
+            :wallet="wallet"
+            :contract-details="contract"
+            class="lastTransactionsList overflow-x-hidden mb-2" />
+        </v-tab-item>
+      </v-tabs-items>
     </template>
     <template v-if="hasMore" slot="footer">
       <v-spacer />
@@ -47,38 +75,66 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     </template>
   </exo-drawer>
 </template>
-
 <script>
 export default {
-  props: {
-    symbol: {
-      type: String,
-      default: 'sent',
-    },
-  },
   data: () => ({
+    drawer: false,
     pageSize: 20,
     limit: 20,
     rewardsList: [],
     loading: false,
+    contract: null,
+    wallet: null,
+    tabName: 'rewards',
   }),
   computed: {
     hasMore() {
       return this.rewardsList.length >= this.limit;
     },
+    symbol() {
+      return this.contract?.symbol;
+    },
+    identity() {
+      return {
+        id: this.wallet?.technicalId,
+        enabled: !this.wallet?.disabledUser,
+        deleted: this.wallet?.deletedUser,       
+        fullName: this.wallet?.name,
+        avatar: this.wallet?.avatar,
+        external: false,
+      };
+    },
+    balanceToDisplay() {
+      return Number.isFinite(Number(this.wallet?.tokenBalance))
+        ? new Intl.NumberFormat(eXo.env.portal.language, {
+          style: 'decimal',
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).format(Math.trunc(this.wallet?.tokenBalance))
+        : 0;
+    },
+  },
+  created() {
+    this.$root.$on('wallet-overview-drawer', this.open);
   },
   methods: {
+    open(tabName) {
+      this.tabName = tabName || 'rewards';
+      this.reset();
+      this.retrieveList();
+      this.$refs.drawer.open();
+    },
     reset() {
       this.limit = 20;
       this.size = 0;
+      this.wallet = window.walletSettings.wallet
+        && {...window.walletSettings.wallet}
+        || {};
+      this.contract = window.walletSettings.contractDetail
+        && {...window.walletSettings.contractDetail}
+        || {};
       this.rewardsList = [];
     },
-    open(title) {
-      this.title = title;
-      this.reset();
-      this.retrieveList();
-      this.$refs.drawer.open();
-    },
     loadMore() {
       this.limit += this.pageSize;
       this.retrieveList();

wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-overview/components/WalletOverviewRewardItem.vue

@@ -19,17 +19,16 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     <v-list-item>
       <v-list-item-content class="align-end text-start">
         <v-list-item-title :title="period">
-          <i class="fa fa-trophy px-2 tertiary--text"></i>
+          <v-icon class="me-2 tertiary--text">fa-calendar</v-icon>
           {{ periodShort }}
         </v-list-item-title>
-        <v-list-item-subtitle class="ps-10">
+        <v-list-item-subtitle class="ps-8">
           {{ $t('exoplatform.wallet.label.sentDate') }}: {{ sentDate }}
         </v-list-item-subtitle>
       </v-list-item-content>
-      <v-list-item-icon class="my-auto">
-        <span class="primary--text">
-          {{ rewardAmount }}
-        </span>
+      <v-list-item-icon class="d-flex flex-row justify-center align-center mt-3 mb-auto font-weight-bold">
+        <span class="tertiary-color me-2 ">{{ symbol }}</span>
+        <span>{{ rewardAmount }}</span>
       </v-list-item-icon>
     </v-list-item>
 

wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-overview/components/WalletOverviewRewardPluginItem.vue

@@ -15,22 +15,17 @@ along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <v-list-item v-if="pluginEarnedAmount" dense>
-    <v-list-item-icon class="my-auto" />
+  <v-list-item v-if="pluginName === 'Gamification'" dense>
+    <v-list-item-icon class="me-2">
+      <v-icon size="18">fa-trophy</v-icon>
+    </v-list-item-icon>
     <v-list-item-content class="align-end text-start">
       <v-list-item-subtitle>
-        <span class="text-sub-title caption uiIcon" :class="iconClass"></span>
-        <span class="text-sub-title caption">{{ plugin.points }} {{ pluginName }}</span>
+        <span class="text-sub-title caption">{{ plugin.points }} {{ $t('wallet.overview.points') }}</span>
       </v-list-item-subtitle>
     </v-list-item-content>
-    <v-list-item-icon class="my-auto">
-      <span class="text-sub-title caption">
-        {{ pluginAmount }}
-      </span>
-    </v-list-item-icon>
   </v-list-item>
 </template>
-
 <script>
 export default {
   props: {
@@ -51,15 +46,9 @@ export default {
     pluginName() {
       return this.plugin.pluginId.charAt(0).toUpperCase() + this.plugin.pluginId.slice(1);
     },
-    iconClass() {
-      return `uiIconReward${this.pluginName}`;
-    },
     pluginEarnedAmount() {
       return parseInt(this.plugin.amount * 100) / 100;
     },
-    pluginAmount() {
-      return `${this.pluginEarnedAmount} ${this.symbol}`;
-    },
   },
 };
 </script>

wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-user-balance/components/WalletUserBalance.vue

@@ -1,35 +1,27 @@
 <template>
-  <v-app id="WalletApp" class="ma-0">
-    <div
+  <div>
+    <v-card
       v-show="!loading"
-      class="clickable"
-      @click="$refs.accountDetail.open()">
+      flat>
       <div class="pa-0 d-flex justify-center flex-nowrap text-color font-weight-bold big-number">
         <span class="my-2 tertiary-color">{{ symbol }}</span>
         <span
-          :class="typographyClass"
           class="ma-2 text-color text-h5 font-weight-bold d-flex align-self-center">
           {{ balanceToDisplay || '-' }}
         </span>
       </div>
-    </div>
-    <wallet-reward-account-detail
-      ref="accountDetail"
-      :fiat-symbol="symbol"
-      :wallet="wallet"
-      :contract-details="contractDetails" />
-  </v-app>
+    </v-card>
+    <wallet-overview-drawer
+      ref="walletOverviewDrawer"
+      :symbol="currencySymbol" />
+  </div>
 </template>
 <script>
 export default {
   data: () => ({
     wallet: null,
     contractDetails: null,
     loading: true,
-    isOverviewDisplay: {
-      type: Boolean,
-      default: () => false,
-    },
   }),
   computed: {
     symbol() {
@@ -39,31 +31,25 @@ export default {
       return this.wallet?.tokenBalance;
     },
     balanceToDisplay() {
-      return Number.isFinite(Number(this.balance)) ? Math.trunc(this.balance) : '';
-    },
-    typographyClass() {
-      switch (String(this.balanceToDisplay).length) {
-      case 1:
-      case 2:
-      case 3:
-      case 4:
-      case 5:
-        return 'text-h4';
-      case 6:
-        return 'text-h5';
-      case 7:
-      case 8:
-        return 'text-h6';
-      default:
-        return 'body-1';
-      }
+      return Number.isFinite(Number(this.balance))
+        ? new Intl.NumberFormat(eXo.env.portal.language, {
+          style: 'decimal',
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).format(Math.trunc(this.balance))
+        : 0;
     },
   },
   created() {
     this.walletUtils.initSettings(false, true, true)
       .then(() => {
-        this.wallet = Object.assign({}, window.walletSettings.wallet);
-        this.contractDetails = Object.assign({},window.walletSettings.contractDetail); 
+        this.wallet = window.walletSettings.wallet
+          && {...window.walletSettings.wallet}
+          || {};
+        this.contractDetails = window.walletSettings.contractDetail
+          && {...window.walletSettings.contractDetail}
+          || {};
+        this.$root.$emit('wallet-loaded', this.wallet?.tokenBalance);
       })
       .finally(() => this.loading = false);
   }

wallet-webapps/src/main/webapp/vue-app/wallet-common/weekly-earnings/components/WeeklyEarnings.vue

@@ -15,25 +15,19 @@ along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div v-show="!loading" class="ma-0">
-    <div
-      class="clickable"
-      @click="openDrawer">
-      <div class="pa-0 d-flex justify-center flex-nowrap text-color font-weight-bold big-number">
-        <span class="my-2 tertiary-color">{{ symbol }}</span>
-        <span
-          :class="typographyClass"
-          class="ma-2 text-color text-h5 font-weight-bold d-flex align-self-center">
-          {{ lastRewardToDisplay || '-' }}
-        </span>
-      </div>
+  <v-card
+    v-show="!loading"
+    flat>
+    <div class="pa-0 d-flex justify-center flex-nowrap text-color font-weight-bold big-number">
+      <span class="my-2 tertiary-color">{{ symbol }}</span>
+      <span
+        :class="typographyClass"
+        class="ma-2 text-color text-h5 font-weight-bold d-flex align-self-center">
+        {{ lastRewardToDisplay || '-' }}
+      </span>
     </div>
-    <wallet-overview-drawer
-      ref="walletOverviewDrawer"
-      :symbol="symbol" />
-  </div>
+  </v-card>
 </template>
-
 <script>
 export default {
   data: () => ({
@@ -50,6 +44,15 @@ export default {
     lastRewardToDisplay() {
       return Number.isFinite(Number(this.lastReward)) ? Math.trunc(this.lastReward) : 0;
     },
+    balanceToDisplay() {
+      return Number.isFinite(Number(this.balance))
+        ? new Intl.NumberFormat(eXo.env.portal.language, {
+          style: 'decimal',
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).format(Math.trunc(this.balance))
+        : 0;
+    },
   },
   watch: {
     lastReward() {
@@ -65,8 +68,12 @@ export default {
       return this.walletUtils.initSettings(false, true, true)
         .then(() => {
           if (window.walletSettings) {
-            this.wallet = Object.assign({}, window.walletSettings.wallet);    
-            this.contractDetails = Object.assign({},window.walletSettings.contractDetail); 
+            this.wallet = window.walletSettings.wallet
+              && {...window.walletSettings.wallet}
+              || {};
+            this.contractDetails = window.walletSettings.contractDetail
+              && {...window.walletSettings.contractDetail}
+              || {};
           }
           return this.$nextTick();
         })
@@ -77,9 +84,6 @@ export default {
         .then(rewards => rewards.find(r => r.transaction && r.status === 'success'))
         .then(reward => this.lastReward = reward?.tokensToSend || 0);
     },
-    openDrawer() {
-      this.$refs.walletOverviewDrawer.open(this.$t('exoplatform.wallet.title.rewardedBalance'));
-    }
   },
 };
 </script>