show a 'give' button directly on offers in the ProjectView

src/views/ClaimView.vue

@@ -47,27 +47,31 @@
     <div class="columns-3">
       <button
         class="col-span-1 bg-blue-600 text-white px-4 py-2 rounded-md"
-        v-if="userCanConfirm(veriClaim, activeDid, confirmerIdList)"
+        v-if="
+          libsUtil.giveRecordTheUserCanConfirm(
+            veriClaim,
+            activeDid,
+            confirmerIdList,
+          )
+        "
         @click="confirmClaim(veriClaim.id)"
       >
         Confirm
+        <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
       </button>
 
       <button
-        v-if="canFulfillOffer()"
-        @click="openGiftDialog()"
+        v-if="libsUtil.canFulfillOffer(veriClaim)"
+        @click="openFulfillGiftDialog()"
         class="col-span-1 block w-fit text-center text-md bg-blue-600 text-white px-1.5 py-2 rounded-md"
       >
         Affirm Delivery
+        <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
       </button>
     </div>
-    <GiftedDialog
-      ref="customGiveDialog"
-      message="Offer fulfilled by"
-      :offerId="veriClaim.handleId"
-    />
+    <GiftedDialog ref="customGiveDialog" message="Offer fulfilled by" />
 
-    <div v-if="isConfirmable(veriClaim)">
+    <div v-if="libsUtil.giveIsConfirmable(veriClaim)">
       <h2 class="font-bold uppercase text-xl mt-8 mb-2">Confirmations</h2>
 
       <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
@@ -148,7 +152,7 @@
         You cannot confirm this because you issued this claim, so you already
         count as confirming it.
       </div>
-      <div v-else-if="containsHiddenDid(veriClaim.claim)">
+      <div v-else-if="serverUtil.containsHiddenDid(veriClaim.claim)">
         You cannot confirm this because it contains hidden identifiers.
       </div>
     </div>
@@ -206,7 +210,7 @@ import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import * as serverUtil from "@/libs/endorserServer";
-import { isConfirmable, userCanConfirm } from "@/libs/util";
+import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { Account } from "@/db/tables/accounts";
@@ -240,9 +244,8 @@ export default class ClaimView extends Vue {
   veriClaimDump = "";
 
   yaml = yaml;
-  containsHiddenDid = serverUtil.containsHiddenDid;
-  isConfirmable = isConfirmable;
-  userCanConfirm = userCanConfirm;
+  libsUtil = libsUtil;
+  serverUtil = serverUtil;
 
   async created() {
     await db.open();
@@ -284,28 +287,6 @@ export default class ClaimView extends Vue {
       : text[0].toUpperCase() + text.substr(1).replace(/([A-Z])/g, " $1");
   }
 
-  offerGiverDid(): string | undefined {
-    let giver;
-    if (
-      this.veriClaim.claim.offeredBy?.identifier &&
-      !serverUtil.isHiddenDid(
-        this.veriClaim.claim.offeredBy.identifier as string,
-      )
-    ) {
-      giver = this.veriClaim.claim.offeredBy.identifier;
-    } else if (
-      this.veriClaim.issuer &&
-      !serverUtil.isHiddenDid(this.veriClaim.issuer)
-    ) {
-      giver = this.veriClaim.issuer;
-    }
-    return giver;
-  }
-
-  canFulfillOffer() {
-    return this.veriClaim.claimType === "Offer" && this.offerGiverDid();
-  }
-
   totalConfirmers() {
     return (
       this.numConfsNotVisible +
@@ -531,11 +512,14 @@ export default class ClaimView extends Vue {
     }
   }
 
-  openGiftDialog() {
+  openFulfillGiftDialog() {
     const giver: GiverInputInfo = {
-      did: this.offerGiverDid(),
+      did: libsUtil.offerGiverDid(this.veriClaim),
     };
-    (this.$refs.customGiveDialog as GiftedDialog).open(giver);
+    (this.$refs.customGiveDialog as GiftedDialog).open(
+      giver,
+      this.veriClaim.handleId,
+    );
   }
 }
 </script>