Vitaliy/pro 222 create related page and markup according

runtime/dapp-frontend-vue/resources/i18n/en/Medals.json

@@ -0,0 +1,15 @@
+{
+    "medals": {
+        "badge_title": "My Badge",
+        "badge_description": "Keep recording your exercise efforts",
+        "medal_condition": "Condition:",
+        "medal_activities": "Eligible Activities:",
+        "medal_board": " Medal Board",
+        "referrals_title": "Referral",
+        "referrals_description": "Invite your friends to join and earn more medal!",
+        "distance_title": "Distance",
+        "distance_description": "Start workout and reach the target distance!",
+        "month_title": "Breast Cancer Month",
+        "month_description": "workout during the Breast Cancer Month to get special medals!"
+    }
+}

runtime/dapp-frontend-vue/resources/i18n/index.ts

@@ -15,6 +15,7 @@ import dashboardTranslations from "./en/Dashboard.json";
 import settingsTranslations from "./en/Settings.json";
 import activitiesTranslations from "./en/Activities.json";
 import legalTranslations from "./en/Legal.json";
+import medalsTranslations from "./en/Medals.json";
 
 // bundle all .JSON together
 export default {
@@ -26,4 +27,5 @@ export default {
   ...settingsTranslations,
   ...activitiesTranslations,
   ...legalTranslations,
+  ...medalsTranslations,
 };

runtime/dapp-frontend-vue/src/App.scss

@@ -15,6 +15,15 @@
   color: #2c3e50;
 }
 
+@font-face {
+  font-family: "Joystix Monospace";
+  src: url("fonts/JoystixMonospace.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+  letter-spacing: -0.05em;
+}
+
 nav {
   padding: 30px;
 

runtime/dapp-frontend-vue/src/App.ts

@@ -57,7 +57,11 @@ export default class App extends MetaView {
         text: "Dashboard",
         icon: "icons/menu-dashboard.svg",
       },
-      { path: "#1", text: "Rewards", icon: "icons/menu-rewards.svg" },
+      {
+        path: { name: "app.medals" },
+        text: "Rewards",
+        icon: "icons/menu-rewards.svg",
+      },
       {
         path: { name: "app.settings" },
         text: "Settings",

runtime/dapp-frontend-vue/src/_vars.scss

@@ -13,6 +13,7 @@ $white: #ffffff;
 $black: #000000;
 $base-grey: #f6f6f6;
 $base-grey-lighter: #f7f7f7;
+$base-grey-darker: #F9F8F8;
 $grey-darker: #d7dbe8;
 $system-grey-60: #7e7b93;
 $button-text-dark: #09090a;
@@ -42,6 +43,9 @@ $trendline-positive: #3d7773;
 $trendline-negative: #f8503e;
 $tooltip-dark: #181818;
 $tooltip-grey-light: #f5f5f5;
+$blue-1: #6EE7EE;
+
+$notifications-border-grey: #D9D9D9;
 
 // overlays
 $modal-overlay: rgba(19, 30, 25, 0.7);

runtime/dapp-frontend-vue/src/components/AppHeader/AppHeader.ts

@@ -22,6 +22,9 @@ import MobileNavigationButton from "../MobileNavigationButton/MobileNavigationBu
 import Dropdown from "../Dropdown/Dropdown.vue";
 import UserBalance from "../UserBalance/UserBalance.vue";
 import UiButton from "../UiButton/UiButton.vue";
+import Notifications from "../Notifications/Notifications.vue";
+
+import { Notification } from "../Notifications/Notifications";
 
 // style resource
 import "./AppHeader.scss";
@@ -40,6 +43,7 @@ export interface HeaderLink {
     Dropdown,
     UserBalance,
     UiButton,
+    Notifications,
   },
   computed: {
     ...mapGetters({
@@ -138,6 +142,15 @@ export default class AppHeader extends MetaView {
     ];
   }
 
+  /**
+   * This computed defines *temporary* items
+   * for the notifications component.
+   * @todo remove once implement notifications on backend
+   *
+   * @access public
+   */
+  public tempNotifications: Notification[] | never[] = [];
+
   /**
    * Watcher that sets overflowY hidden,
    * to prevent scrolling of body when mobile menu opened
@@ -160,4 +173,53 @@ export default class AppHeader extends MetaView {
       this.isMenuOpen = false;
     }
   }
+
+  public handleNotificationView(notification: Notification) {
+    this.tempNotifications = this.tempNotifications.map(
+      (notificationItem: Notification) => ({
+        ...notificationItem,
+        viewed:
+          notification.id === notificationItem.id
+            ? false
+            : notificationItem.viewed,
+      })
+    );
+  }
+
+  public mounted() {
+    this.tempNotifications = [
+      {
+        createdAt: "2h",
+        title: "Congratulations!",
+        description: "You have completed 10KM!",
+        icon: "dhealth-notifications-icon.svg",
+        viewed: true,
+        id: 0,
+        medal: {
+          image: "medals/10.svg",
+          condition: "Finish your first 10KM in one go to get!",
+          received: true,
+          relatedActivities: "Running, Walking, Swimming, Cycling",
+          assetId: process.env.VUE_APP_ASSETS_BOOST5_IDENTIFIER as string,
+        },
+      },
+      {
+        createdAt: "1d",
+        title: "Breast Cancer Month",
+        description:
+          "Get an energy boost with Breast Cancer Month special event!",
+        icon: "dhealth-notifications-icon.svg",
+        viewed: true,
+        id: 1,
+      },
+      {
+        createdAt: "1d",
+        title: "ELEVATE",
+        description: "Welcome to your Notification Inbox!",
+        icon: "dhealth-notifications-icon.svg",
+        viewed: false,
+        id: 3,
+      },
+    ];
+  }
 }

runtime/dapp-frontend-vue/src/components/AppHeader/AppHeader.vue

@@ -121,6 +121,10 @@
       </nav>
       <div class="lg-max:hidden py-6">
         <div class="dapp-screen-header__account-actions">
+          <Notifications
+            :items="tempNotifications"
+            @notification-viewed="handleNotificationView"
+          />
           <Dropdown :items="dropDownItems" />
           <UserBalance />
         </div>

runtime/dapp-frontend-vue/src/components/Notifications/Notifications.scss

@@ -0,0 +1,72 @@
+/**
+ * This file is part of dHealth dApps Framework shared under LGPL-3.0
+ * Copyright (C) 2022-present dHealth Network, All rights reserved.
+ *
+ * @package     dHealth dApps Framework
+ * @subpackage  Vue Frontend
+ * @author      dHealth Network <[email protected]>
+ * @license     LGPL-3.0
+ */
+
+ @import "../../vars.scss";
+
+ .dapp-notifications {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 10px;
+    position: relative;
+
+    &__list {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 326px;
+        background-color: $base-grey-balance;
+        padding: 34px 25px 24px 25px;
+        box-shadow: 3px 3px 0px $black;
+        border: 1px solid $black;
+        border-radius: 8px;
+        text-align: left;
+
+        .notification-item {
+            padding-bottom: 11px;
+            margin-bottom: 8px;
+            border-bottom: 1px solid $notifications-border-grey;
+
+            &:last-child {
+                border-bottom: none;
+                padding-bottom: 0;
+                margin-bottom: 0;
+            }
+
+            h3 {
+                font-size: 13px;
+                font-weight: 700;
+                font-size: 13px;
+                line-height: 130%;
+            }
+
+            p {
+                font-weight: 400;
+                font-size: 11px;
+                line-height: 130%;
+            }
+
+            .icon-wrapper {
+                flex: 1 0 44px;
+            }
+
+            .state {
+                text-align: center;
+
+                .unread-circle {
+                    width: 6px;
+                    height: 6px;
+                    display: inline-block;
+                    border-radius: 50%;
+                    background-color: $grey-system-dark;
+                }
+            }
+        }
+    }
+ }

runtime/dapp-frontend-vue/src/components/Notifications/Notifications.ts

@@ -0,0 +1,91 @@
+/**
+ * This file is part of dHealth dApps Framework shared under LGPL-3.0
+ * Copyright (C) 2022-present dHealth Network, All rights reserved.
+ *
+ * @package     dHealth dApps Framework
+ * @subpackage  Vue Frontend
+ * @author      dHealth Network <[email protected]>
+ * @license     LGPL-3.0
+ */
+// external dependencies
+import { Component, Prop } from "vue-property-decorator";
+import InlineSvg from "vue-inline-svg";
+
+// internal dependencies
+import { MetaView } from "@/views/MetaView";
+import { MedalItem } from "../RewardsList/RewardsList";
+
+// style resource
+import "./Notifications.scss";
+
+export interface Notification {
+  createdAt: string | number;
+  title: string;
+  description: string;
+  icon: string;
+  viewed: boolean;
+  medal?: MedalItem;
+  id: number | string;
+}
+
+/*
+ * @class Notifications
+ * @description This class implements a Vue component to display
+ * latest notifications received by user
+ *
+ * @since v0.3.0
+ */
+@Component({
+  components: {
+    InlineSvg,
+  },
+  methods: {},
+  computed: {},
+})
+export default class Notifications extends MetaView {
+  /**
+   * Prop which defines items for available notifications.
+   *
+   * @access protected
+   * @var {Notification[]}
+   */
+  @Prop({ default: () => [] }) protected items?: Notification[];
+
+  isOpen = false;
+
+  /**
+   * This computed checks if list contains
+   * item with "viewed: false" prop.
+   *
+   * @access protected
+   * @returns boolean
+   */
+  public get unreadExist(): boolean {
+    const unread = this.items?.filter(
+      (notification: Notification) => notification.viewed === true
+    );
+    return !!unread && unread.length > 0;
+  }
+
+  public viewNotification(medalNotification: Notification) {
+    this.$emit("notification-viewed", medalNotification);
+    if (medalNotification.medal) {
+      const relatedMedal = medalNotification.medal;
+      this.$root.$emit("modal", {
+        type: "medal",
+        overlayColor: "rgba(0, 0, 0, 0.2)",
+        width: 720,
+        modalBg: "#FFFFFF",
+        medal: relatedMedal.image,
+        condition: relatedMedal.condition,
+        activities: relatedMedal.relatedActivities,
+      });
+    }
+  }
+
+  hideNotifications() {
+    if (this.isOpen) {
+      this.isOpen = false;
+    }
+  }
+}