add large notice when user has a new offer to them

src/views/HomeView.vue

@@ -196,6 +196,32 @@
           </button>
         </h2>
       </div>
+
+      <div
+        v-if="numNewOffersToUser"
+        @click="goToActivityToUserPage"
+        class="border-t p-2 border-slate-300"
+      >
+        <div class="flex justify-center">
+          <div
+            v-if="numNewOffersToUser"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-4 py-4 rounded-md text-white"
+          >
+            <span class="block text-center text-6xl">
+              {{ numNewOffersToUser }}
+            </span>
+            <p>
+              new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you
+            </p>
+          </div>
+        </div>
+        <div class="flex justify-end mt-2">
+          <button class="text-blue-500">
+            View All New Activity For You
+          </button>
+        </div>
+      </div>
+
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul id="listLatestActivity" class="border-t border-slate-300">
           <li
@@ -204,7 +230,7 @@
             :key="record.jwtId"
           >
             <div
-              class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold text-sm"
+              class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
               v-if="record.jwtId == feedLastViewedClaimId"
             >
               You've already seen all the following
@@ -345,7 +371,7 @@ import {
 import { Contact } from "@/db/tables/contacts";
 import {
   BoundingBox,
-  isAnyFeedFilterOn,
+  checkIsAnyFeedFilterOn,
   MASTER_SETTINGS_KEY,
 } from "@/db/tables/settings";
 import {
@@ -354,6 +380,7 @@ import {
   didInfoForContact,
   fetchEndorserRateLimits,
   getHeaders,
+  getNewOffersToUser,
   getPlanFromCache,
   GiveSummaryRecord,
 } from "@/libs/endorserServer";
@@ -418,6 +445,8 @@ export default class HomeView extends Vue {
   isFeedFilteredByNearby = false;
   isFeedLoading = true;
   isRegistered = false;
+  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged
+  numNewOffersToUser: number = 0; // number of new offers-to-user
   searchBoxes: Array<{
     name: string;
     bbox: BoundingBox;
@@ -447,10 +476,11 @@ export default class HomeView extends Vue {
       this.isFeedFilteredByVisible = !!settings.filterFeedByVisible;
       this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
       this.isRegistered = !!settings.isRegistered;
+      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
       this.searchBoxes = settings.searchBoxes || [];
       this.showShortcutBvc = !!settings.showShortcutBvc;
 
-      this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+      this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
 
       if (!settings.finishedOnboarding) {
         (this.$refs.onboardingDialog as OnboardingDialog).open(
@@ -480,6 +510,12 @@ export default class HomeView extends Vue {
       // this returns a Promise but we don't need to wait for it
       this.updateAllFeed();
 
+      if (this.activeDid) {
+        this.numNewOffersToUser =
+          (await getNewOffersToUser(this.axios, this.apiServer, this.activeDid, this.lastAckedOfferToUserJwtId))
+          .length;
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings or feed.", err);
@@ -519,7 +555,7 @@ export default class HomeView extends Vue {
     const settings = await retrieveSettingsForActiveAccount();
     this.isFeedFilteredByVisible = !!settings.filterFeedByVisible;
     this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
-    this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+    this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
 
     this.feedData = [];
     this.feedPreviousOldestId = undefined;
@@ -782,6 +818,10 @@ export default class HomeView extends Vue {
     }
   }
 
+  goToActivityToUserPage() {
+    (this.$router as Router).push({ name: "new-activity" });
+  }
+
   onClickLoadClaim(jwtId: string) {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
@@ -820,7 +860,7 @@ export default class HomeView extends Vue {
     (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
   }
 
-  toastUser(message) {
+  toastUser(message: string) {
     this.$notify(
       {
         group: "alert",