From b87142d3edc78ba8d7bc30517b730e24ca5bee21 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Fri, 21 Jun 2024 19:13:19 -0600
Subject: [PATCH] give-detail page: add more-correct parameters from
 confirm-give page, and allow toggling of project & user-recipient

---
 src/main.ts                   |   2 +
 src/views/ConfirmGiftView.vue | 163 +++++++++++++++-------------------
 src/views/GiftedDetails.vue   |  58 +++++++++---
 3 files changed, 121 insertions(+), 102 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 8b33ed368..384c64823 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -69,6 +69,7 @@ import {
   faRotate,
   faShareNodes,
   faSpinner,
+  faSquare,
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
@@ -138,6 +139,7 @@ library.add(
   faRotate,
   faShareNodes,
   faSpinner,
+  faSquare,
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
diff --git a/src/views/ConfirmGiftView.vue b/src/views/ConfirmGiftView.vue
index 7fdf25870..d9ae30057 100644
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -27,7 +27,7 @@
       </h1>
     </div>
 
-    <div v-if="detailsForGive">
+    <div v-if="giveDetails">
       <div class="flex justify-center">
         <button
           class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
@@ -69,19 +69,19 @@
                 {{ giverName }}
               </div>
               <div class="ml-6">gave</div>
-              <div v-if="veriClaim.claim?.object">
+              <div v-if="giveDetails.amount">
                 <fa icon="hand-holding-dollar" class="fa-fw text-slate-400" />
                 {{
                   displayAmount(
-                    veriClaim.claim.object.unitCode,
-                    veriClaim.claim.object.amountOfThisGood,
+                      giveDetails.unit,
+                      giveDetails.amount,
                   )
                 }}
               </div>
-              <div>
+              <div v-if="giveDetails.description">
                 <fa icon="message" class="fa-fw text-slate-400" />
-                {{ veriClaim.claim?.object ? "and:" : "" }}
-                {{ veriClaim.claim?.description }}
+                {{ giveDetails.amount ? "and:" : "" }}
+                {{ giveDetails.description }}
               </div>
               <div class="ml-6">to</div>
               <div>
@@ -91,17 +91,17 @@
               <div>
                 <fa icon="calendar" class="fa-fw text-slate-400" />
                 on
-                {{ veriClaim.issuedAt?.substring(0, 10) }}
+                {{ giveDetails.issuedAt.substring(0, 10) }}
               </div>
 
               <!-- Fullfills Links -->
 
               <!-- fullfills links for a give -->
-              <div class="mt-2" v-if="detailsForGive?.fulfillsPlanHandleId">
+              <div class="mt-2" v-if="giveDetails?.fulfillsPlanHandleId">
                 <router-link
                   :to="
                     '/project/' +
-                    encodeURIComponent(detailsForGive?.fulfillsPlanHandleId)
+                    encodeURIComponent(giveDetails?.fulfillsPlanHandleId)
                   "
                   class="text-blue-500 mt-2 cursor-pointer"
                   target="_blank"
@@ -113,16 +113,16 @@
               <!-- if there's another, it's probably fulfilling an offer, too -->
               <div
                 v-if="
-                  detailsForGive?.fulfillsType &&
-                  detailsForGive?.fulfillsType !== 'PlanAction' &&
-                  detailsForGive?.fulfillsHandleId
+                  giveDetails?.fulfillsType &&
+                  giveDetails?.fulfillsType !== 'PlanAction' &&
+                  giveDetails?.fulfillsHandleId
                 "
               >
                 <!-- router-link to /claim/ only changes URL path -->
                 <router-link
                   :to="
                     '/claim/' +
-                    encodeURIComponent(detailsForGive?.fulfillsHandleId)
+                    encodeURIComponent(giveDetails?.fulfillsHandleId)
                   "
                   class="text-blue-500 mt-2 cursor-pointer"
                   target="_blank"
@@ -130,7 +130,7 @@
                   This fulfills
                   {{
                     capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
-                      detailsForGive.fulfillsType,
+                      giveDetails.fulfillsType,
                     )
                   }}
                   <fa icon="arrow-up-right-from-square" class="fa-fw" />
@@ -254,7 +254,7 @@
         <div v-if="confirmerIdList.includes(activeDid)">
           You have confirmed this claim.
         </div>
-        <div v-else-if="veriClaim.issuer == activeDid">
+        <div v-else-if="giveDetails.agentDid == activeDid">
           You cannot confirm this because you issued this claim, so you already
           count as confirming it.
         </div>
@@ -428,7 +428,7 @@ export default class ClaimView extends Vue {
   confirmerIdList: string[] = []; // list of DIDs that have confirmed this claim excluding the issuer
   confsVisibleErrorMessage = "";
   confsVisibleToIdList: string[] = []; // list of DIDs that can see any confirmer
-  detailsForGive = null;
+  giveDetails = null;
   giverName = "";
   issuerName = "";
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
@@ -449,7 +449,7 @@ export default class ClaimView extends Vue {
     this.confirmerIdList = [];
     this.confsVisibleErrorMessage = "";
     this.confsVisibleToIdList = [];
-    this.detailsForGive = null;
+    this.giveDetails = null;
     this.numConfsNotVisible = 0;
     this.urlForNewGive = "";
     this.veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
@@ -603,64 +603,7 @@ export default class ClaimView extends Vue {
 
       this.issuerName = this.didInfo(this.veriClaim.issuer);
 
-      this.urlForNewGive = "/gifted-details?";
-      if (this.veriClaim.claim.object) {
-        if (this.veriClaim.claim.object.amountOfThisGood) {
-          this.urlForNewGive +=
-            "&amountInput=" +
-            encodeURIComponent(
-              String(this.veriClaim.claim.object.amountOfThisGood),
-            );
-        }
-        if (this.veriClaim.claim.object.unitCode) {
-          this.urlForNewGive +=
-            "&unitCode=" +
-            encodeURIComponent(this.veriClaim.claim.object.unitCode as string);
-        }
-      }
-      if (this.veriClaim.claim.description) {
-        this.urlForNewGive +=
-          "&description=" +
-          encodeURIComponent(this.veriClaim.claim.description as string);
-      }
-      this.giverName = this.didInfo(
-        this.veriClaim.claim.agent?.identifier as string,
-      );
-      if (this.veriClaim.claim.agent) {
-        this.urlForNewGive +=
-          "&giverDid=" +
-          encodeURIComponent(this.veriClaim.claim.agent.identifier as string) +
-          "&giverName=" +
-          encodeURIComponent(this.giverName);
-      }
-      this.recipientName = this.didInfo(
-        this.veriClaim.claim.recipient?.identifier as string,
-      );
-      if (this.veriClaim.claim.recipient) {
-        this.urlForNewGive +=
-          "&recipientDid=" +
-          encodeURIComponent(
-            this.veriClaim.claim.recipient.identifier as string,
-          ) +
-          "&recipientName=" +
-          encodeURIComponent(this.recipientName);
-      }
-      if (this.veriClaim.claim.image) {
-        this.urlForNewGive +=
-          "&image=" + encodeURIComponent(this.veriClaim.claim.image as string);
-      }
-      if (this.veriClaim.claim.fulfills) {
-        this.urlForNewGive += this.fulfillsUrlSnippet(
-          this.veriClaim.claim.fulfills,
-        );
-        if (Array.isArray(this.veriClaim.claim.fulfills)) {
-          for (const fulfills of this.veriClaim.claim.fulfills) {
-            console.log("adding fulfills:", fulfills);
-            this.urlForNewGive += this.fulfillsUrlSnippet(fulfills);
-          }
-        }
-      }
-
+      // use give record when possible since it may include edits
       const giveUrl =
         this.apiServer +
         "/api/v2/report/gives?handleId=" +
@@ -671,7 +614,7 @@ export default class ClaimView extends Vue {
       });
       // giveResp.data is a Give from https://api.endorser.ch/api-docs/
       if (giveResp.status === 200) {
-        this.detailsForGive = giveResp.data.data[0];
+        this.giveDetails = giveResp.data.data[0];
       } else {
         console.error("Error getting detailed give info:", giveResp);
         this.$notify(
@@ -685,6 +628,52 @@ export default class ClaimView extends Vue {
         );
       }
 
+      this.urlForNewGive = "/gifted-details?";
+      if (this.giveDetails.amount) {
+        this.urlForNewGive +=
+          "&amountInput=" + encodeURIComponent(String(this.giveDetails.amount));
+      }
+      if (this.giveDetails.unit) {
+        this.urlForNewGive +=
+          "&unitCode=" + encodeURIComponent(this.giveDetails.unit);
+      }
+      if (this.giveDetails.description) {
+        this.urlForNewGive +=
+          "&description=" + encodeURIComponent(this.giveDetails.description);
+      }
+      this.giverName = this.didInfo(this.giveDetails.agentDid);
+      if (this.giveDetails.agentDid) {
+        this.urlForNewGive +=
+          "&giverDid=" +
+          encodeURIComponent(this.giveDetails.agentDid) +
+          "&giverName=" +
+          encodeURIComponent(this.giverName);
+      }
+      this.recipientName = this.didInfo(this.giveDetails.recipientDid);
+      if (this.giveDetails.recipientDid) {
+        this.urlForNewGive +=
+          "&recipientDid=" +
+          encodeURIComponent(this.giveDetails.recipientDid) +
+          "&recipientName=" +
+          encodeURIComponent(this.recipientName);
+      }
+      if (this.giveDetails.fullClaim.image) {
+        this.urlForNewGive +=
+          "&image=" + encodeURIComponent(this.giveDetails.fullClaim.image);
+      }
+      if (
+        this.giveDetails.type == "Offer" &&
+        this.giveDetails.fulfillsHandleId
+      ) {
+        this.urlForNewGive +=
+          "&offerId=" + encodeURIComponent(this.giveDetails.fulfillsHandleId);
+      }
+      if (this.giveDetails.fulfillsPlanHandleId) {
+        this.urlForNewGive +=
+          "&projectId=" +
+          encodeURIComponent(this.giveDetails.fulfillsPlanHandleId);
+      }
+
       // retrieve the list of confirmers
       const confirmUrl =
         this.apiServer +
@@ -698,7 +687,7 @@ export default class ClaimView extends Vue {
         const resultList1 = response.data.result || [];
         const resultList2 = R.reject(serverUtil.isHiddenDid, resultList1);
         const resultList3 = R.reject(
-          (did: string) => did === this.veriClaim.issuer,
+          (did: string) => did === this.giveDetails.agentDid,
           resultList2,
         );
         this.confirmerIdList = resultList3;
@@ -729,16 +718,6 @@ export default class ClaimView extends Vue {
     }
   }
 
-  fulfillsUrlSnippet(object) {
-    if (object["@type"] === "PlanAction") {
-      return "&projectId=" + encodeURIComponent(object.identifier);
-    } else if (object["@type"] === "OfferAction") {
-      return "&offerId=" + encodeURIComponent(object.identifier);
-    } else {
-      return "";
-    }
-  }
-
   confirmConfirmClaim() {
     this.$notify(
       {
@@ -785,7 +764,7 @@ export default class ClaimView extends Vue {
           title: "Success",
           text: "Confirmation submitted.",
         },
-        5000,
+        3000,
       );
     } else {
       console.error("Got error submitting the confirmation:", result);
@@ -818,7 +797,7 @@ export default class ClaimView extends Vue {
     (this.$refs.customGiveDialog as GiftedDialog).open(
       giver,
       undefined,
-      this.veriClaim.handleId,
+      this.giveDetails.handleId,
       "Offer fulfilled by " + (giver?.name || "someone not named"),
     );
   }
@@ -860,7 +839,7 @@ export default class ClaimView extends Vue {
         },
         3000,
       );
-    } else if (this.veriClaim.issuer == this.activeDid) {
+    } else if (this.giveDetails.agentDid == this.activeDid) {
       this.$notify(
         {
           group: "alert",
@@ -870,7 +849,7 @@ export default class ClaimView extends Vue {
         },
         3000,
       );
-    } else if (serverUtil.containsHiddenDid(this.veriClaim.claim)) {
+    } else if (serverUtil.containsHiddenDid(this.giveDetails.fullClaim)) {
       this.$notify(
         {
           group: "alert",
diff --git a/src/views/GiftedDetails.vue b/src/views/GiftedDetails.vue
index 34c29f29f..e73bba903 100644
--- a/src/views/GiftedDetails.vue
+++ b/src/views/GiftedDetails.vue
@@ -76,17 +76,40 @@
     </div>
     <ImageMethodDialog ref="imageDialog" />
 
-    <div v-if="projectId" class="mt-4">
+    <div class="mt-4">
+      <input
+        v-if="!givenToUser"
+        type="checkbox"
+        class="h-6 w-6 mr-2"
+        v-model="givenToProject"
+      />
       <fa
-        icon="check"
-        class="bg-slate-500 text-white h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
+        v-else
+        icon="square"
+        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
+        @click="
+          notifyUser('Cannot be both given to you and also given to a project.')
+        "
       />
-      <label class="text-sm">This is given to {{ projectName }}</label>
+      <label class="text-sm">This was given to {{ projectName }}</label>
     </div>
 
-    <div v-if="showGivenToUser" class="mt-4">
-      <input type="checkbox" class="h-6 w-6 mr-2" v-model="givenToUser" />
-      <label class="text-sm">Given to you</label>
+    <div class="mt-4">
+      <input
+        v-if="!givenToProject"
+        type="checkbox"
+        class="h-6 w-6 mr-2"
+        v-model="givenToUser"
+      />
+      <fa
+        v-else
+        icon="square"
+        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
+        @click="
+          notifyUser('Cannot be both given to a project and also given to you.')
+        "
+      />
+      <label class="text-sm">This was given to you</label>
     </div>
 
     <div class="mt-4">
@@ -148,6 +171,7 @@ export default class GiftedDetails extends Vue {
   amountInput = "0";
   description = "";
   destinationNameAfter = "";
+  givenToProject = false;
   givenToUser = false;
   giverDid: string | undefined;
   giverName = "";
@@ -215,7 +239,8 @@ export default class GiftedDetails extends Vue {
         this.recipientName =
           this.recipientDid === this.activeDid ? "you" : "someone not named";
       }
-      this.showGivenToUser =
+      this.givenToProject = !!this.projectId;
+      this.givenToUser =
         !this.projectId && this.recipientDid === this.activeDid;
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -241,7 +266,7 @@ export default class GiftedDetails extends Vue {
         this.axios,
         this.apiServer,
       );
-      // console.log("Got project name from cache", project);
+      console.log("Got project name from cache", project);
       this.projectName = project?.name
         ? "the project: " + project.name
         : "a project";
@@ -413,6 +438,18 @@ export default class GiftedDetails extends Vue {
     await this.recordGive();
   }
 
+  notifyUser(message: string) {
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: "Error",
+        text: message,
+      },
+      3000,
+    );
+  }
+
   /**
    *
    * @param giverDid may be null
@@ -429,6 +466,7 @@ export default class GiftedDetails extends Vue {
             ? this.activeDid
             : undefined
           : this.recipientDid;
+      const projectId = this.givenToProject ? this.projectId : undefined;
       const result = await createAndSubmitGive(
         this.axios,
         this.apiServer,
@@ -438,7 +476,7 @@ export default class GiftedDetails extends Vue {
         this.description,
         parseFloat(this.amountInput),
         this.unitCode,
-        this.projectId,
+        projectId,
         this.offerId,
         this.isTrade,
         this.imageUrl,