add large notice when user has a new offer to them

src/views/NewActivityView.vue

@@ -0,0 +1,111 @@
+<template>
+  <QuickNav selected="Home"></QuickNav>
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7" >
+        <!-- Back -->
+        <fa
+          icon="chevron-left"
+          @click="$router.back()"
+          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        />
+        New Activity For You
+      </h1>
+    </div>
+
+    <!-- Display a single row with the name of "New Offers To You" with a count. -->
+    <div class="new-offers-row flex justify-between items-center mb-4">
+      <div class="flex justify-between items-center">
+        <span class="text-lg font-medium">New Offers To You</span>
+        <fa
+          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
+          class="cursor-pointer ml-4"
+          @click="showOffersDetails = !showOffersDetails"
+        />
+      </div>
+      <span class="text-lg font-medium">{{ newOffersToUser.length }}</span>
+    </div>
+
+    <div v-if="showOffersDetails" class="ml-4">
+      <ul>
+        <li v-for="offer in newOffersToUser" :key="offer.id" class="mt-2">
+          <span>{{ didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts) }}</span>
+          offers
+          <span v-if="offer.description">{{ offer.description }}</span>
+          <span v-if="offer.amount">{{ displayAmount(offer.unit, offer.amount) }}</span>
+          <router-link :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }" class="text-blue-500">
+            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import QuickNav from "@/components/QuickNav.vue";
+import EntityIcon from "@/components/EntityIcon.vue";
+import { NotificationIface } from "@/constants/app";
+import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import { didInfo,displayAmount, getNewOffersToUser, OfferSummaryRecord } from "@/libs/endorserServer";
+
+@Component({
+  components: { GiftedDialog, QuickNav, EntityIcon },
+})
+export default class NewActivityView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
+  apiServer = "";
+  lastAckedOfferToUserJwtId = "";
+  newOffersToUser: Array<OfferSummaryRecord> = [];
+
+  showOffersDetails = false;
+
+  didInfo = didInfo;
+  displayAmount = displayAmount;
+
+  async created() {
+    try {
+      const settings = await retrieveSettingsForActiveAccount();
+      this.apiServer = settings.apiServer || "";
+      this.activeDid = settings.activeDid || "";
+      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
+
+      this.allContacts = await db.contacts.toArray();
+
+      await accountsDB.open();
+      const allAccounts = await accountsDB.accounts.toArray();
+      if (allAccounts.length > 0) {
+        this.allMyDids = allAccounts.map((acc) => acc.did);
+      }
+      this.newOffersToUser =
+        await getNewOffersToUser(this.axios, this.apiServer, this.activeDid, this.lastAckedOfferToUserJwtId);
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      console.error("Error retrieving settings & contacts:", err);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            err.message ||
+            "There was an error retrieving your activity.",
+        },
+        5000,
+      );
+    }
+  }
+}
+</script>