add pages to see all the offers to user and offers to user's projects

src/libs/endorserServer.ts

@@ -591,36 +591,50 @@ export async function setPlanInCache(
   planCache.set(handleId, planSummary);
 }
 
+/**
+ *
+ * @returns { data: Array<OfferSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
+ */
 export async function getNewOffersToUser(
   axios: Axios,
   apiServer: string,
   activeDid: string,
-  lastAckedOfferToUserJwtId?: string,
+  afterOfferJwtId?: string,
+  beforeOfferJwtId?: string,
 ) {
   let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
-  if (lastAckedOfferToUserJwtId) {
+  if (afterOfferJwtId) {
-    url += "&afterId=" + lastAckedOfferToUserJwtId;
+    url += "&afterId=" + afterOfferJwtId;
+  }
+  if (beforeOfferJwtId) {
+    url += "&beforeId=" + beforeOfferJwtId;
   }
   const headers = await getHeaders(activeDid);
   const response = await axios.get(url, { headers });
-  const offers = response.data.data;
+  return response.data;
-  return offers;
 }
-
+/**
+ *
+ * @returns { data: Array<OfferToPlanSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
+ */
 export async function getNewOffersToUserProjects(
   axios: Axios,
   apiServer: string,
   activeDid: string,
-  lastAckedOfferToUserProjectsJwtId?: string,
+  afterOfferJwtId?: string,
+  beforeOfferJwtId?: string,
 ) {
   let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
-  if (lastAckedOfferToUserProjectsJwtId) {
+  if (afterOfferJwtId) {
-    url += "?afterId=" + lastAckedOfferToUserProjectsJwtId;
+    url += "?afterId=" + afterOfferJwtId;
+  }
+  if (beforeOfferJwtId) {
+    url += afterOfferJwtId ? "&" : "?";
+    url += "beforeId=" + beforeOfferJwtId;
   }
   const headers = await getHeaders(activeDid);
   const response = await axios.get(url, { headers });
-  const offers = response.data.data;
+  return response.data;
-  return offers;
 }
 
 /**

src/router/index.ts

@@ -184,6 +184,16 @@ const routes: Array<RouteRecordRaw> = [
     name: "quick-action-bvc-end",
     component: () => import("../views/QuickActionBvcEndView.vue"),
   },
+  {
+    path: "/recent-offers-to-user",
+    name: "recent-offers-to-user",
+    component: () => import("../views/RecentOffersToUserView.vue"),
+  },
+  {
+    path: "/recent-offers-to-user-projects",
+    name: "recent-offers-to-user-projects",
+    component: () => import("../views/RecentOffersToUserProjectsView.vue"),
+  },
   {
     path: "/scan-contact",
     name: "scan-contact",

src/views/DIDView.vue

@@ -41,8 +41,8 @@
           class="ml-2 mr-2 mt-4"
         >
           Details
-          <fa v-if="showDidDetails" icon="chevron-up" class="text-blue-400" />
+          <fa v-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
-          <fa v-else icon="chevron-down" class="text-blue-400" />
+          <fa v-else icon="chevron-right" class="text-blue-400" />
         </button>
         <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
         <pre

src/views/HomeView.vue

@@ -197,7 +197,6 @@
       </div>
 
       <div
-        v-if="numNewOffersToUser || numNewOffersToUserProjects"
         @click="goToActivityToUserPage()"
         class="border-t p-2 border-slate-300"
       >
@@ -210,9 +209,11 @@
               class="block text-center text-6xl"
               data-testId="newDirectOffersActivityNumber"
             >
-              {{ numNewOffersToUser }}
+              {{ numNewOffersToUser }}{{ newOffersToUserHitLimit ? "+" : "" }}
             </span>
-            <p>new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you</p>
+            <p class="text-center">
+              new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you
+            </p>
           </div>
           <div
             v-if="numNewOffersToUserProjects"
@@ -222,9 +223,10 @@
               class="block text-center text-6xl"
               data-testId="newOffersToUserProjectsActivityNumber"
             >
-              {{ numNewOffersToUserProjects }}
+              {{ numNewOffersToUserProjects
+              }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}
             </span>
-            <p>
+            <p class="text-center">
               new offer{{ numNewOffersToUserProjects === 1 ? "" : "s" }} to your
               projects
             </p>
@@ -461,6 +463,8 @@ export default class HomeView extends Vue {
   isRegistered = false;
   lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
   lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  newOffersToUserHitLimit: boolean = false;
+  newOffersToUserProjectsHitLimit: boolean = false;
   numNewOffersToUser: number = 0; // number of new offers-to-user
   numNewOffersToUserProjects: number = 0; // number of new offers-to-user's-projects
   searchBoxes: Array<{
@@ -529,25 +533,25 @@ export default class HomeView extends Vue {
       this.updateAllFeed();
 
       if (this.activeDid) {
-        this.numNewOffersToUser = (
+        const offersToUserData = await getNewOffersToUser(
-          await getNewOffersToUser(
+          this.axios,
-            this.axios,
+          this.apiServer,
-            this.apiServer,
+          this.activeDid,
-            this.activeDid,
+          this.lastAckedOfferToUserJwtId,
-            this.lastAckedOfferToUserJwtId,
+        );
-          )
+        this.numNewOffersToUser = offersToUserData.data.length;
-        ).length;
+        this.newOffersToUserHitLimit = offersToUserData.hitLimit;
       }
 
       if (this.activeDid) {
-        this.numNewOffersToUserProjects = (
+        const offersToUserProjects = await getNewOffersToUserProjects(
-          await getNewOffersToUserProjects(
+          this.axios,
-            this.axios,
+          this.apiServer,
-            this.apiServer,
+          this.activeDid,
-            this.activeDid,
+          this.lastAckedOfferToUserProjectsJwtId,
-            this.lastAckedOfferToUserProjectsJwtId,
+        );
-          )
+        this.numNewOffersToUserProjects = offersToUserProjects.data.length;
-        ).length;
+        this.newOffersToUserProjectsHitLimit = offersToUserProjects.hitLimit;
       }
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/NewActivityView.vue

@@ -16,18 +16,26 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
-    <div>
+    <div class="flex justify-between">
-      <span class="text-lg font-medium">{{ newOffersToUser.length }}</span>
+      <div>
-      <span class="text-lg font-medium ml-4"
+        <span class="text-lg font-medium"
-        >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
+          >{{ newOffersToUser.length
-      >
+          }}{{ newOffersToUserHitLimit ? "+" : "" }}</span
-      <fa
+        >
-        v-if="newOffersToUser.length > 0"
+        <span class="text-lg font-medium ml-4"
-        :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
+          >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
-        class="cursor-pointer ml-4 text-lg"
+        >
-        @click="expandOffersToUserAndMarkRead()"
+        <fa
-        data-testid="showOffersToUser"
+          v-if="newOffersToUser.length > 0"
-      />
+          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
+          class="cursor-pointer ml-4 text-lg"
+          @click="expandOffersToUserAndMarkRead()"
+          data-testid="showOffersToUser"
+        />
+      </div>
+      <router-link to="/recent-offers-to-user" class="text-blue-500">
+        See all
+      </router-link>
     </div>
 
     <div v-if="showOffersDetails" class="ml-4 mt-4">
@@ -40,7 +48,7 @@
           <span>{{
             didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
           }}</span>
-          offers
+          offered
           <span v-if="offer.objectDescription">{{
             offer.objectDescription
           }}</span
@@ -67,23 +75,29 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To Your Projects" with a count. -->
-    <div class="mt-4">
+    <div class="mt-4 flex justify-between">
-      <span class="text-lg font-medium">{{
+      <div>
-        newOffersToUserProjects.length
+        <span class="text-lg font-medium"
-      }}</span>
+          >{{ newOffersToUserProjects.length
-      <span class="text-lg font-medium ml-4"
+          }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}</span
-        >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To Your
+        >
-        Projects</span
+        <span class="text-lg font-medium ml-4"
-      >
+          >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To
-      <fa
+          Your Projects</span
-        v-if="newOffersToUserProjects.length > 0"
+        >
-        :icon="
+        <fa
-          showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
+          v-if="newOffersToUserProjects.length > 0"
-        "
+          :icon="
-        class="cursor-pointer ml-4 text-lg"
+            showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
-        @click="expandOffersToUserProjectsAndMarkRead()"
+          "
-        data-testid="showOffersToUserProjects"
+          class="cursor-pointer ml-4 text-lg"
-      />
+          @click="expandOffersToUserProjectsAndMarkRead()"
+          data-testid="showOffersToUserProjects"
+        />
+      </div>
+      <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
+        See all
+      </router-link>
     </div>
 
     <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
@@ -96,7 +110,7 @@
           <span>{{
             didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
           }}</span>
-          offers
+          offered
           <span v-if="offer.objectDescription">{{
             offer.objectDescription
           }}</span
@@ -162,7 +176,9 @@ export default class NewActivityView extends Vue {
   lastAckedOfferToUserJwtId = "";
   lastAckedOfferToUserProjectsJwtId = "";
   newOffersToUser: Array<OfferSummaryRecord> = [];
+  newOffersToUserHitLimit = false;
   newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
+  newOffersToUserProjectsHitLimit = false;
 
   showOffersDetails = false;
   showOffersToUserProjectsDetails = false;
@@ -185,18 +201,24 @@ export default class NewActivityView extends Vue {
       if (allAccounts.length > 0) {
         this.allMyDids = allAccounts.map((acc) => acc.did);
       }
-      this.newOffersToUser = await getNewOffersToUser(
+
+      const offersToUserData = await getNewOffersToUser(
         this.axios,
         this.apiServer,
         this.activeDid,
         this.lastAckedOfferToUserJwtId,
       );
-      this.newOffersToUserProjects = await getNewOffersToUserProjects(
+      this.newOffersToUser = offersToUserData.data;
+      this.newOffersToUserHitLimit = offersToUserData.hitLimit;
+
+      const offersToUserProjectsData = await getNewOffersToUserProjects(
         this.axios,
         this.apiServer,
         this.activeDid,
         this.lastAckedOfferToUserProjectsJwtId,
       );
+      this.newOffersToUserProjects = offersToUserProjectsData.data;
+      this.newOffersToUserProjectsHitLimit = offersToUserProjectsData.hitLimit;
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {

src/views/RecentOffersToUserProjectsView.vue

@@ -0,0 +1,150 @@
+<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"
+        />
+        Offers to Your Projects
+      </h1>
+    </div>
+
+    <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
+      <ul id="listLatestActivity" class="border-t border-slate-300">
+        <li
+          v-for="offer in newOffersToUserProjects"
+          :key="offer.jwtId"
+          class="mt-4 relative group"
+        >
+          <div
+            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
+          >
+            You've already seen all the following
+          </div>
+
+          <span>{{
+            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
+          }}</span>
+          offered
+          <span v-if="offer.objectDescription">{{
+            offer.objectDescription
+          }}</span
+          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
+          <span v-if="offer.amount">{{
+            displayAmount(offer.unit, offer.amount)
+          }}</span>
+          to
+          <span>{{ offer.planName }}</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>
+    </InfiniteScroll>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import EntityIcon from "@/components/EntityIcon.vue";
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
+import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import {
+  didInfo,
+  displayAmount,
+  getNewOffersToUserProjects,
+  OfferToPlanSummaryRecord,
+} from "@/libs/endorserServer";
+
+@Component({
+  components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },
+})
+export default class RecentOffersToUserView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
+  apiServer = "";
+  lastAckedOfferToUserProjectsJwtId = "";
+  newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
+  newOffersToUserProjectsAtEnd = false;
+
+  showOffersDetails = false;
+  showOffersToUserProjectsDetails = false;
+  didInfo = didInfo;
+  displayAmount = displayAmount;
+
+  async created() {
+    try {
+      const settings = await retrieveSettingsForActiveAccount();
+      this.apiServer = settings.apiServer || "";
+      this.activeDid = settings.activeDid || "";
+      this.lastAckedOfferToUserProjectsJwtId =
+        settings.lastAckedOfferToUserProjectsJwtId || "";
+
+      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);
+      }
+
+      const offersToUserProjectsData = await getNewOffersToUserProjects(
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+        undefined,
+        undefined,
+      );
+      this.newOffersToUserProjects = offersToUserProjectsData.data;
+      this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
+
+      // 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,
+      );
+    }
+  }
+
+  async loadMoreOffersToUserProjects() {
+    if (this.newOffersToUserProjectsAtEnd) {
+      return;
+    }
+    const offersToUserProjectsData = await getNewOffersToUserProjects(
+      this.axios,
+      this.apiServer,
+      this.activeDid,
+      undefined,
+      this.newOffersToUserProjects[this.newOffersToUserProjects.length - 1]
+        .jwtId,
+    );
+    this.newOffersToUserProjects.push(...offersToUserProjectsData.data);
+    this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
+  }
+}
+</script>

src/views/RecentOffersToUserView.vue

@@ -0,0 +1,146 @@
+<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"
+        />
+        Offers to You
+      </h1>
+    </div>
+
+    <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
+      <ul id="listLatestActivity" class="border-t border-slate-300">
+        <li
+          v-for="offer in newOffersToUser"
+          :key="offer.jwtId"
+          class="mt-4 relative group"
+        >
+          <div
+            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            v-if="offer.jwtId == lastAckedOfferToUserJwtId"
+          >
+            You've already seen all the following
+          </div>
+
+          <span>{{
+            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
+          }}</span>
+          offered
+          <span v-if="offer.objectDescription">{{
+            offer.objectDescription
+          }}</span
+          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
+          <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>
+    </InfiniteScroll>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import EntityIcon from "@/components/EntityIcon.vue";
+import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import QuickNav from "@/components/QuickNav.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: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },
+})
+export default class RecentOffersToUserView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
+  apiServer = "";
+  lastAckedOfferToUserJwtId = "";
+  newOffersToUser: Array<OfferSummaryRecord> = [];
+  newOffersToUserAtEnd = false;
+
+  showOffersDetails = false;
+  showOffersToUserProjectsDetails = 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);
+      }
+
+      const offersToUserData = await getNewOffersToUser(
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+        undefined,
+        undefined,
+      );
+      this.newOffersToUser = offersToUserData.data;
+      this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
+
+      // 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,
+      );
+    }
+  }
+
+  async loadMoreOffersToUser() {
+    if (this.newOffersToUserAtEnd) {
+      return;
+    }
+    const offersToUserData = await getNewOffersToUser(
+      this.axios,
+      this.apiServer,
+      this.activeDid,
+      undefined,
+      this.newOffersToUser[this.newOffersToUser.length - 1].jwtId,
+    );
+    this.newOffersToUser.push(...offersToUserData.data);
+    this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
+  }
+}
+</script>

test-playwright/50-record-offer.spec.ts

@@ -72,7 +72,7 @@ test('Record an offer', async ({ page }) => {
   // go to the home page and check that the offer is shown as new
   await page.goto('./');
   const offerNumElem = page.getByTestId('newOffersToUserProjectsActivityNumber');
-  await expect(offerNumElem).toHaveText('50');
+  await expect(offerNumElem).toHaveText('50+');
 
   // click on the number of new offers to go to the list page
   await offerNumElem.click();