add new projects to front page

src/db/tables/settings.ts

@@ -32,7 +32,8 @@ export type Settings = {
   imageServer?: string;
   lastName?: string; // deprecated - put all names in firstName
 
-  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged
+  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
 
   // The claim list has a most recent one used in notifications that's separate from the last viewed
   lastNotifiedClaimId?: string;

src/libs/endorserServer.ts

@@ -112,6 +112,10 @@ export interface OfferSummaryRecord {
   validThrough: string;
 }
 
+export interface OfferToPlanSummaryRecord extends OfferSummaryRecord {
+  planName: string;
+}
+
 // a summary record; the VC is not currently part of this record
 export interface PlanSummaryRecord {
   agentDid?: string; // optional, if the issuer wants someone else to manage as well
@@ -603,6 +607,22 @@ export async function getNewOffersToUser(
   return offers;
 }
 
+export async function getNewOffersToUserProjects(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  lastAckedOfferToUserProjectsJwtId?: string,
+) {
+  let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
+  if (lastAckedOfferToUserProjectsJwtId) {
+    url += "?afterId=" + lastAckedOfferToUserProjectsJwtId;
+  }
+  const headers = await getHeaders(activeDid);
+  const response = await axios.get(url, { headers });
+  const offers = response.data.data;
+  return offers;
+}
+
 /**
  * Construct GiveAction VC for submission to server
  *

src/views/HomeView.vue

@@ -197,14 +197,14 @@
       </div>
 
       <div
-        v-if="numNewOffersToUser"
+        v-if="numNewOffersToUser || numNewOffersToUserProjects"
         @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"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
           >
             <span
               class="block text-center text-6xl"
@@ -214,6 +214,21 @@
             </span>
             <p>new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you</p>
           </div>
+          <div
+            v-if="numNewOffersToUserProjects"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+          >
+            <span
+              class="block text-center text-6xl"
+              data-testId="newOffersToUserProjectsActivityNumber"
+            >
+              {{ numNewOffersToUserProjects }}
+            </span>
+            <p>
+              new offer{{ numNewOffersToUserProjects === 1 ? "" : "s" }} to your
+              projects
+            </p>
+          </div>
         </div>
         <div class="flex justify-end mt-2">
           <button class="text-blue-500">View All New Activity For You</button>
@@ -379,6 +394,7 @@ import {
   fetchEndorserRateLimits,
   getHeaders,
   getNewOffersToUser,
+  getNewOffersToUserProjects,
   getPlanFromCache,
   GiveSummaryRecord,
 } from "@/libs/endorserServer";
@@ -443,8 +459,10 @@ 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
+  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
   numNewOffersToUser: number = 0; // number of new offers-to-user
+  numNewOffersToUserProjects: number = 0; // number of new offers-to-user's-projects
   searchBoxes: Array<{
     name: string;
     bbox: BoundingBox;
@@ -475,6 +493,8 @@ export default class HomeView extends Vue {
       this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
       this.isRegistered = !!settings.isRegistered;
       this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
+      this.lastAckedOfferToUserProjectsJwtId =
+        settings.lastAckedOfferToUserProjectsJwtId;
       this.searchBoxes = settings.searchBoxes || [];
       this.showShortcutBvc = !!settings.showShortcutBvc;
 
@@ -519,6 +539,17 @@ export default class HomeView extends Vue {
         ).length;
       }
 
+      if (this.activeDid) {
+        this.numNewOffersToUserProjects = (
+          await getNewOffersToUserProjects(
+            this.axios,
+            this.apiServer,
+            this.activeDid,
+            this.lastAckedOfferToUserProjectsJwtId,
+          )
+        ).length;
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings or feed.", err);

src/views/NewActivityView.vue

@@ -16,12 +16,13 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
-    <div class="mb-4">
+    <div>
       <span class="text-lg font-medium">{{ newOffersToUser.length }}</span>
       <span class="text-lg font-medium ml-4"
         >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
       >
       <fa
+        v-if="newOffersToUser.length > 0"
         :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
         class="cursor-pointer ml-4 text-lg"
         @click="expandOffersToUserAndMarkRead()"
@@ -29,11 +30,11 @@
       />
     </div>
 
-    <div v-if="showOffersDetails" class="ml-4">
+    <div v-if="showOffersDetails" class="ml-4 mt-4">
       <ul class="list-disc ml-4">
         <li
           v-for="offer in newOffersToUser"
-          :key="offer.id"
+          :key="offer.jwtId"
           class="mt-4 relative group"
         >
           <span>{{
@@ -64,6 +65,64 @@
         </li>
       </ul>
     </div>
+
+    <!-- Display a single row with the name of "New Offers To Your Projects" with a count. -->
+    <div class="mt-4">
+      <span class="text-lg font-medium">{{
+        newOffersToUserProjects.length
+      }}</span>
+      <span class="text-lg font-medium ml-4"
+        >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To Your
+        Projects</span
+      >
+      <fa
+        v-if="newOffersToUserProjects.length > 0"
+        :icon="
+          showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
+        "
+        class="cursor-pointer ml-4 text-lg"
+        @click="expandOffersToUserProjectsAndMarkRead()"
+        data-testid="showOffersToUserProjects"
+      />
+    </div>
+
+    <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
+      <ul class="list-disc ml-4">
+        <li
+          v-for="offer in newOffersToUserProjects"
+          :key="offer.jwtId"
+          class="mt-4 relative group"
+        >
+          <span>{{
+            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
+          }}</span>
+          offers
+          <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>
+          <!-- New line that appears on hover -->
+          <div
+            @click="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+          >
+            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+            Click to keep all above as new offers
+          </div>
+        </li>
+      </ul>
+    </div>
   </section>
 </template>
 
@@ -85,7 +144,9 @@ import {
   didInfo,
   displayAmount,
   getNewOffersToUser,
+  getNewOffersToUserProjects,
   OfferSummaryRecord,
+  OfferToPlanSummaryRecord,
 } from "@/libs/endorserServer";
 
 @Component({
@@ -99,10 +160,12 @@ export default class NewActivityView extends Vue {
   allMyDids: string[] = [];
   apiServer = "";
   lastAckedOfferToUserJwtId = "";
+  lastAckedOfferToUserProjectsJwtId = "";
   newOffersToUser: Array<OfferSummaryRecord> = [];
+  newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
 
   showOffersDetails = false;
-
+  showOffersToUserProjectsDetails = false;
   didInfo = didInfo;
   displayAmount = displayAmount;
 
@@ -112,6 +175,8 @@ export default class NewActivityView extends Vue {
       this.apiServer = settings.apiServer || "";
       this.activeDid = settings.activeDid || "";
       this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
+      this.lastAckedOfferToUserProjectsJwtId =
+        settings.lastAckedOfferToUserProjectsJwtId || "";
 
       this.allContacts = await db.contacts.toArray();
 
@@ -126,6 +191,12 @@ export default class NewActivityView extends Vue {
         this.activeDid,
         this.lastAckedOfferToUserJwtId,
       );
+      this.newOffersToUserProjects = await getNewOffersToUserProjects(
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+        this.lastAckedOfferToUserProjectsJwtId,
+      );
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -144,13 +215,12 @@ export default class NewActivityView extends Vue {
 
   async expandOffersToUserAndMarkRead() {
     this.showOffersDetails = !this.showOffersDetails;
-    if (this.newOffersToUser.length > 0) {
+    if (this.showOffersDetails) {
       await updateAccountSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
       });
       // note that we don't update this.lastAckedOfferToUserJwtId in case they
       // later choose the last one to keep the offers as new
-    }
       this.$notify(
         {
           group: "alert",
@@ -161,6 +231,7 @@ export default class NewActivityView extends Vue {
         5000,
       );
     }
+  }
 
   async markOffersAsReadStartingWith(jwtId: string) {
     const index = this.newOffersToUser.findIndex(
@@ -187,5 +258,55 @@ export default class NewActivityView extends Vue {
       3000,
     );
   }
+
+  async expandOffersToUserProjectsAndMarkRead() {
+    this.showOffersToUserProjectsDetails =
+      !this.showOffersToUserProjectsDetails;
+    if (this.showOffersToUserProjectsDetails) {
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.newOffersToUserProjects[0].jwtId,
+      });
+      // note that we don't update this.lastAckedOfferToUserProjectsJwtId in case
+      // they later choose the last one to keep the offers as new
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Marked as Read",
+          text: "The offers are marked as viewed. Click in the list to keep them as new.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async markOffersToUserProjectsAsReadStartingWith(jwtId: string) {
+    const index = this.newOffersToUserProjects.findIndex(
+      (offer) => offer.jwtId === jwtId,
+    );
+    if (index !== -1 && index < this.newOffersToUserProjects.length - 1) {
+      // Set to the next offer's jwtId
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.newOffersToUserProjects[index + 1].jwtId,
+      });
+    } else {
+      // it's the last entry (or not found), so just keep it the same
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.lastAckedOfferToUserProjectsJwtId,
+      });
+    }
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Marked as Unread",
+        text: "All offers above that one are marked as unread.",
+      },
+      3000,
+    );
+  }
 }
 </script>

test-playwright/60-new-activity.spec.ts

@@ -47,7 +47,7 @@ test('New offers for another user', async ({ page }) => {
   await expect(offerNumElem).toHaveText('2');
   await offerNumElem.click();
 
-  await expect(page.getByText('New Offers To You')).toBeVisible();
+  await expect(page.getByText('New Offers To You', { exact: true })).toBeVisible();
   await page.getByTestId('showOffersToUser').click();
   // note that they show in reverse chronologicalorder
   await expect(page.getByText(`help of ${randomString2} from #000`)).toBeVisible();
@@ -68,7 +68,7 @@ test('New offers for another user', async ({ page }) => {
   offerNumElem = page.getByTestId('newDirectOffersActivityNumber');
   await expect(offerNumElem).toHaveText('1');
   await offerNumElem.click();
-  await expect(page.getByText('New Offer To You')).toBeVisible();
+  await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
   await page.getByTestId('showOffersToUser').click();
 
   // now see that no offers are shown as new