src/libs/endorserServer.ts

@@ -1140,6 +1140,28 @@ export const capitalizeAndInsertSpacesBeforeCaps = (text: string) => {
     : text[0].toUpperCase() + text.substr(1).replace(/([A-Z])/g, " $1");
 };
 
+/**
+ * Formats type string for display by adding spaces before capitals
+ * and optionally adds an appropriate article prefix (a/an)
+ *
+ * @param text - Text to format
+ * @returns Formatted string with article prefix
+ */
+export const capitalizeAndInsertSpacesBeforeCapsWithAPrefix = (
+  text: string,
+): string => {
+  const word = capitalizeAndInsertSpacesBeforeCaps(text);
+  if (word) {
+    // if the word starts with a vowel, use "an" instead of "a"
+    const firstLetter = word[0].toLowerCase();
+    const vowels = ["a", "e", "i", "o", "u"];
+    const particle = vowels.includes(firstLetter) ? "an" : "a";
+    return particle + " " + word;
+  } else {
+    return "";
+  }
+};
+
 /**
  return readable summary of claim, or something generic
 

src/views/ClaimView.vue

@@ -24,7 +24,9 @@
           <div class="flex columns-3">
             <h2 class="text-md font-bold w-full">
               {{
-                capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType || "")
+                serverUtil.capitalizeAndInsertSpacesBeforeCaps(
+                  veriClaim.claimType || "",
+                )
               }}
               <button
                 v-if="canEditClaim"
@@ -106,9 +108,9 @@
             </div>
 
             <!-- Fullfills Links -->
-
+            <div class="mt-4 empty:hidden">
               <!-- fullfills links for a give -->
-            <div v-if="detailsForGive?.fulfillsPlanHandleId" class="mt-4">
+              <div v-if="detailsForGive?.fulfillsPlanHandleId">
                 <router-link
                   :to="
                     '/project/' +
@@ -116,30 +118,35 @@
                   "
                   class="text-blue-500 mt-2"
                 >
-                Fulfills a bigger plan...
+                  This fulfills a bigger plan
+                  <font-awesome
+                    icon="arrow-up-right-from-square"
+                    class="fa-fw"
+                  />
                 </router-link>
               </div>
-            <!-- if there's another, it's probably fulfilling an offer, too -->
+
-            <div
+              <!-- Show offer fulfillment if this give fulfills an offer -->
-              v-if="
+              <div v-if="detailsForGiveOfferFulfillment?.offerHandleId">
-                detailsForGive?.fulfillsType &&
-                detailsForGive?.fulfillsType !== 'PlanAction' &&
-                detailsForGive?.fulfillsHandleId
-              "
-            >
                 <!-- router-link to /claim/ only changes URL path -->
                 <a
                   class="text-blue-500 mt-4 cursor-pointer"
                   @click="
-                  showDifferentClaimPage(detailsForGive?.fulfillsHandleId)
+                    showDifferentClaimPage(
+                      detailsForGiveOfferFulfillment.offerHandleId,
+                    )
                   "
                 >
-                Fulfills
+                  This fulfills
                   {{
-                  capitalizeAndInsertSpacesBeforeCaps(
+                    serverUtil.capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
-                    detailsForGive.fulfillsType,
+                      detailsForGiveOfferFulfillment.offerType || "Offer",
                     )
-                }}...
+                  }}
+                  <font-awesome
+                    icon="arrow-up-right-from-square"
+                    class="fa-fw"
+                  />
                 </a>
               </div>
 
@@ -152,12 +159,16 @@
                   "
                   class="text-blue-500 mt-4"
                 >
-                Offered to a bigger plan...
+                  Offered to a bigger plan
+                  <font-awesome
+                    icon="arrow-up-right-from-square"
+                    class="fa-fw"
+                  />
                 </router-link>
               </div>
 
               <!-- Providers -->
-            <div v-if="providersForGive?.length > 0" class="mt-4">
+              <div v-if="providersForGive?.length > 0">
                 <span>Other assistance provided by:</span>
                 <ul class="ml-4">
                   <li
@@ -171,7 +182,11 @@
                           class="text-blue-500 mt-4 cursor-pointer"
                           @click="handleProviderClick(provider)"
                         >
-                        an activity...
+                          an activity
+                          <font-awesome
+                            icon="arrow-up-right-from-square"
+                            class="fa-fw"
+                          />
                         </a>
                       </div>
                     </div>
@@ -182,6 +197,7 @@
           </div>
         </div>
       </div>
+    </div>
     <div class="mt-2">
       <font-awesome icon="comment" class="text-slate-400" />
       {{ issuerName }} posted that.
@@ -556,6 +572,17 @@ export default class ClaimView extends Vue {
     fulfillsPlanHandleId?: string;
     fulfillsType?: string;
     fulfillsHandleId?: string;
+    fullClaim?: {
+      fulfills?: Array<{
+        "@type": string;
+        identifier?: string;
+      }>;
+    };
+  } | null = null;
+  // Additional offer information extracted from the fulfills array
+  detailsForGiveOfferFulfillment: {
+    offerHandleId?: string;
+    offerType?: string;
   } | null = null;
   detailsForOffer: { fulfillsPlanHandleId?: string } | null = null;
   // Project information for fulfillsPlanHandleId
@@ -689,6 +716,7 @@ export default class ClaimView extends Vue {
     this.confsVisibleToIdList = [];
     this.detailsForGive = null;
     this.detailsForOffer = null;
+    this.detailsForGiveOfferFulfillment = null;
     this.projectInfo = null;
     this.fullClaim = null;
     this.fullClaimDump = "";
@@ -701,6 +729,33 @@ export default class ClaimView extends Vue {
     this.veriClaimDidsVisible = {};
   }
 
+  /**
+   * Extract offer fulfillment information from the fulfills array
+   */
+  extractOfferFulfillment() {
+    if (!this.detailsForGive?.fullClaim?.fulfills) {
+      this.detailsForGiveOfferFulfillment = null;
+      return;
+    }
+
+    const fulfills = this.detailsForGive.fullClaim.fulfills;
+    if (!Array.isArray(fulfills)) {
+      this.detailsForGiveOfferFulfillment = null;
+      return;
+    }
+
+    // Find the Offer in the fulfills array
+    const offerFulfill = fulfills.find((item) => item["@type"] === "Offer");
+    if (offerFulfill) {
+      this.detailsForGiveOfferFulfillment = {
+        offerHandleId: offerFulfill.identifier,
+        offerType: offerFulfill["@type"],
+      };
+    } else {
+      this.detailsForGiveOfferFulfillment = null;
+    }
+  }
+
   // =================================================
   // UTILITY METHODS
   // =================================================
@@ -758,13 +813,6 @@ export default class ClaimView extends Vue {
     this.canShare = !!navigator.share;
   }
 
-  // insert a space before any capital letters except the initial letter
-  // (and capitalize initial letter, just in case)
-  capitalizeAndInsertSpacesBeforeCaps(text: string): string {
-    if (!text) return "";
-    return text[0].toUpperCase() + text.substr(1).replace(/([A-Z])/g, " $1");
-  }
-
   totalConfirmers() {
     return (
       this.numConfsNotVisible +
@@ -821,6 +869,8 @@ export default class ClaimView extends Vue {
         });
         if (giveResp.status === 200 && giveResp.data.data?.length > 0) {
           this.detailsForGive = giveResp.data.data[0];
+          // Extract offer information from the fulfills array
+          this.extractOfferFulfillment();
         } else {
           await this.$logError(
             "Error getting detailed give info: " + JSON.stringify(giveResp),

src/views/ConfirmGiftView.vue

@@ -96,13 +96,15 @@
               </div>
 
               <!-- Fullfills Links -->
-
+              <div class="mt-4">
                 <!-- fullfills links for a give -->
-              <div v-if="giveDetails?.fulfillsPlanHandleId" class="mt-2">
+                <div v-if="giveDetails?.fulfillsPlanHandleId">
                   <router-link
                     :to="
                       '/project/' +
-                    encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '')
+                      encodeURIComponent(
+                        giveDetails?.fulfillsPlanHandleId || '',
+                      )
                     "
                     class="text-blue-500 mt-2 cursor-pointer"
                   >
@@ -113,26 +115,23 @@
                     />
                   </router-link>
                 </div>
-              <!-- if there's another, it's probably fulfilling an offer, too -->
+
-              <div
+                <!-- Show offer fulfillment if this give fulfills an offer -->
-                v-if="
+                <div v-if="giveDetailsOfferFulfillment?.offerHandleId">
-                  giveDetails?.fulfillsType &&
-                  giveDetails?.fulfillsType !== 'PlanAction' &&
-                  giveDetails?.fulfillsHandleId
-                "
-              >
                   <!-- router-link to /claim/ only changes URL path -->
                   <router-link
                     :to="
                       '/claim/' +
-                    encodeURIComponent(giveDetails?.fulfillsHandleId || '')
+                      encodeURIComponent(
+                        giveDetailsOfferFulfillment.offerHandleId || '',
+                      )
                     "
                     class="text-blue-500 mt-2 cursor-pointer"
                   >
                     This fulfills
                     {{
-                    capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
+                      serverUtil.capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
-                      giveDetails?.fulfillsType || "",
+                        giveDetailsOfferFulfillment.offerType || "Offer",
                       )
                     }}
                     <font-awesome
@@ -145,6 +144,7 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="mt-2">
         <font-awesome icon="comment" class="text-slate-400" />
         {{ issuerName }} posted that.
@@ -493,6 +493,11 @@ export default class ConfirmGiftView extends Vue {
   confsVisibleErrorMessage = "";
   confsVisibleToIdList: string[] = []; // list of DIDs that can see any confirmer
   giveDetails?: GiveSummaryRecord;
+  // Additional offer information extracted from the fulfills array
+  giveDetailsOfferFulfillment: {
+    offerHandleId?: string;
+    offerType?: string;
+  } | null = null;
   giverName = "";
   issuerName = "";
   isLoading = false;
@@ -648,6 +653,8 @@ export default class ConfirmGiftView extends Vue {
 
       if (resp.status === 200) {
         this.giveDetails = resp.data.data[0];
+        // Extract offer information from the fulfills array
+        this.extractOfferFulfillment();
       } else {
         throw new Error("Error getting detailed give info: " + resp.status);
       }
@@ -707,6 +714,33 @@ export default class ConfirmGiftView extends Vue {
     }
   }
 
+  /**
+   * Extract offer fulfillment information from the fulfills array
+   */
+  private extractOfferFulfillment() {
+    if (!this.giveDetails?.fullClaim?.fulfills) {
+      this.giveDetailsOfferFulfillment = null;
+      return;
+    }
+
+    const fulfills = this.giveDetails.fullClaim.fulfills;
+    if (!Array.isArray(fulfills)) {
+      this.giveDetailsOfferFulfillment = null;
+      return;
+    }
+
+    // Find the Offer in the fulfills array
+    const offerFulfill = fulfills.find((item) => item["@type"] === "Offer");
+    if (offerFulfill) {
+      this.giveDetailsOfferFulfillment = {
+        offerHandleId: offerFulfill.identifier,
+        offerType: offerFulfill["@type"],
+      };
+    } else {
+      this.giveDetailsOfferFulfillment = null;
+    }
+  }
+
   /**
    * Fetches confirmer information for the claim
    */
@@ -849,27 +883,6 @@ export default class ConfirmGiftView extends Vue {
     );
   }
 
-  /**
-   * Formats type string for display by adding spaces before capitals
-   * Optionally adds a prefix
-   *
-   * @param text - Text to format
-   * @param prefix - Optional prefix to add
-   * @returns Formatted string
-   */
-  capitalizeAndInsertSpacesBeforeCapsWithAPrefix(text: string): string {
-    const word = this.capitalizeAndInsertSpacesBeforeCaps(text);
-    if (word) {
-      // if the word starts with a vowel, use "an" instead of "a"
-      const firstLetter = word[0].toLowerCase();
-      const vowels = ["a", "e", "i", "o", "u"];
-      const particle = vowels.includes(firstLetter) ? "an" : "a";
-      return particle + " " + word;
-    } else {
-      return "";
-    }
-  }
-
   /**
    * Initiates sharing of claim information
    * Handles share functionality based on platform capabilities
@@ -894,11 +907,5 @@ export default class ConfirmGiftView extends Vue {
     this.veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
     this.veriClaimDump = "";
   }
-
-  capitalizeAndInsertSpacesBeforeCaps(text: string) {
-    return !text
-      ? ""
-      : text[0].toUpperCase() + text.substr(1).replace(/([A-Z])/g, " $1");
-  }
 }
 </script>