src/libs/util.ts

@@ -165,11 +165,18 @@ export interface OfferFulfillment {
   offerType: string;
 }
 
+interface FulfillmentObject {
+  "@type": string;
+  identifier?: string;
+}
+
 /**
  * Extract offer fulfillment information from the fulfills field
  * Handles both array and single object cases
  */
-export const extractOfferFulfillment = (fulfills: any): OfferFulfillment | null => {
+export const extractOfferFulfillment = (
+  fulfills: FulfillmentObject | FulfillmentObject[] | null | undefined,
+): OfferFulfillment | null => {
   if (!fulfills) {
     return null;
   }

src/views/ClaimView.vue

@@ -736,7 +736,7 @@ export default class ClaimView extends Vue {
    */
   extractOfferFulfillment() {
     this.detailsForGiveOfferFulfillment = libsUtil.extractOfferFulfillment(
-      this.detailsForGive?.fullClaim?.fulfills
+      this.detailsForGive?.fullClaim?.fulfills,
     );
   }
 

src/views/ConfirmGiftView.vue

@@ -723,7 +723,7 @@ export default class ConfirmGiftView extends Vue {
    */
   private extractOfferFulfillment() {
     this.giveDetailsOfferFulfillment = libsUtil.extractOfferFulfillment(
-      this.giveDetails?.fullClaim?.fulfills
+      this.giveDetails?.fullClaim?.fulfills,
     );
   }
 

src/views/NewActivityView.vue

@@ -32,9 +32,9 @@
           @click="expandOffersToUserAndMarkRead()"
         />
       </div>
-      <router-link to="/recent-offers-to-user" class="text-blue-500">
+      <a class="text-blue-500 cursor-pointer" @click="handleSeeAllOffersToUser">
         See&nbsp;all
-      </router-link>
+      </a>
     </div>
 
     <div v-if="showOffersDetails" class="ml-4 mt-4">
@@ -99,9 +99,12 @@
           @click="expandOffersToUserProjectsAndMarkRead()"
         />
       </div>
-      <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
+      <a
+        class="text-blue-500 cursor-pointer"
+        @click="handleSeeAllOffersToUserProjects"
+      >
         See&nbsp;all
-      </router-link>
+      </a>
     </div>
 
     <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
@@ -239,18 +242,18 @@ export default class NewActivityView extends Vue {
     }
   }
 
-  async expandOffersToUserAndMarkRead() {
+  async expandOffersToUserAndMarkRead(fromSeeAll: boolean = false) {
     this.showOffersDetails = !this.showOffersDetails;
-    if (this.showOffersDetails) {
+    if (this.showOffersDetails && this.newOffersToUser.length > 0) {
       await this.$updateSettings({
         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.info(
-        "The offers are marked as viewed. Click in the list to keep them as new.",
-        TIMEOUTS.LONG,
-      );
+      const message = fromSeeAll
+        ? "The offers are marked as viewed."
+        : "The offers are marked as viewed. Click in the list to keep them as new.";
+      this.notify.info(message, TIMEOUTS.LONG);
     }
   }
 
@@ -275,20 +278,23 @@ export default class NewActivityView extends Vue {
     );
   }
 
-  async expandOffersToUserProjectsAndMarkRead() {
+  async expandOffersToUserProjectsAndMarkRead(fromSeeAll: boolean = false) {
     this.showOffersToUserProjectsDetails =
       !this.showOffersToUserProjectsDetails;
-    if (this.showOffersToUserProjectsDetails) {
+    if (
+      this.showOffersToUserProjectsDetails &&
+      this.newOffersToUserProjects.length > 0
+    ) {
       await this.$updateSettings({
         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.info(
-        "The offers are now marked as viewed. Click in the list to keep them as new.",
-        TIMEOUTS.LONG,
-      );
+      const message = fromSeeAll
+        ? "The offers are marked as viewed."
+        : "The offers are marked as viewed. Click in the list to keep them as new.";
+      this.notify.info(message, TIMEOUTS.LONG);
     }
   }
 
@@ -314,5 +320,13 @@ export default class NewActivityView extends Vue {
       TIMEOUTS.STANDARD,
     );
   }
+
+  async handleSeeAllOffersToUser() {
+    this.$router.push("/recent-offers-to-user");
+  }
+
+  async handleSeeAllOffersToUserProjects() {
+    this.$router.push("/recent-offers-to-user-projects");
+  }
 }
 </script>

src/views/RecentOffersToUserProjectsView.vue

@@ -32,20 +32,20 @@
     </div>
 
     <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
-      <ul
-        data-testId="listRecentOffersToUserProjects"
-        class="border-t border-slate-300"
-      >
+      <ul data-testId="listRecentOffersToUserProjects">
         <li
           v-for="offer in newOffersToUserProjects"
           :key="offer.jwtId"
           class="mt-4 relative group"
         >
+          <!-- Last viewed separator -->
           <div
             v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
           >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
           </div>
 
           <span>{{
@@ -142,6 +142,15 @@ export default class RecentOffersToUserView extends Vue {
       this.newOffersToUserProjects = offersToUserProjectsData.data;
       this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
 
+      // Mark offers as read after data is loaded
+      if (this.newOffersToUserProjects.length > 0) {
+        await this.$updateSettings({
+          lastAckedOfferToUserProjectsJwtId:
+            this.newOffersToUserProjects[0].jwtId,
+        });
+        this.notify.info("The offers are marked as viewed.", TIMEOUTS.LONG);
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);

src/views/RecentOffersToUserView.vue

@@ -27,20 +27,20 @@
       </p>
     </div>
     <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
-      <ul
-        data-testId="listRecentOffersToUser"
-        class="border-t border-slate-300"
-      >
+      <ul data-testId="listRecentOffersToUser">
         <li
           v-for="offer in newOffersToUser"
           :key="offer.jwtId"
           class="mt-4 relative group"
         >
+          <!-- Last viewed separator -->
           <div
             v-if="offer.jwtId == lastAckedOfferToUserJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
           >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
           </div>
 
           <span>{{
@@ -133,6 +133,14 @@ export default class RecentOffersToUserView extends Vue {
       this.newOffersToUser = offersToUserData.data;
       this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
 
+      // Mark offers as read after data is loaded
+      if (this.newOffersToUser.length > 0) {
+        await this.$updateSettings({
+          lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
+        });
+        this.notify.info("The offers are marked as viewed.", TIMEOUTS.LONG);
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);