Merge branch 'gifting-periphery-improvements' into build-improvement

src/views/ContactGiftingView.vue

@@ -4,14 +4,14 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="text-2xl text-center font-semibold relative px-7">
         <!-- Back -->
         <router-link
           :to="{ name: 'home' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </router-link>
-        Given by...
+        {{ stepType === "giver" ? "Given by..." : "Given to..." }}
       </h1>
     </div>
 
@@ -19,19 +19,18 @@
     <ul class="border-t border-slate-300">
       <li class="border-b border-slate-300 py-3">
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow">
-            <img
-              src="../assets/blank-square.svg"
-              width="32"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+          <span class="grow flex gap-2 items-center font-medium">
+            <font-awesome
+              icon="circle-question"
+              class="text-slate-400 text-4xl"
             />
-            Unnamed/Unknown
+            <span class="italic text-slate-400">(Unnamed/Unknown)</span>
           </span>
           <span class="text-right">
             <button
               type="button"
               class="block w-full text-center text-sm uppercase 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-3 py-1.5 rounded-md"
-              @click="openDialog()"
+              @click="openDialog('Unnamed')"
             >
               <font-awesome icon="gift" class="fa-fw"></font-awesome>
             </button>
@@ -44,13 +43,14 @@
         class="border-b border-slate-300 py-3"
       >
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow font-semibold">
+          <span class="grow flex gap-2 items-center font-medium">
             <EntityIcon
               :contact="contact"
-              :icon-size="32"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+              :icon-size="34"
+              class="inline-block align-middle border border-slate-300 rounded-full overflow-hidden"
             />
-            {{ contact.name || "(no name)" }}
+            <span v-if="contact.name">{{ contact.name }}</span>
+            <span v-else class="italic text-slate-400">(No name)</span>
           </span>
           <span class="text-right">
             <button
@@ -65,7 +65,13 @@
       </li>
     </ul>
 
-    <GiftedDialog ref="customDialog" :to-project-id="projectId" />
+    <GiftedDialog
+      ref="customDialog"
+      :from-project-id="fromProjectId"
+      :to-project-id="toProjectId"
+      :show-projects="showProjects"
+      :is-from-project-view="isFromProjectView"
+    />
   </section>
 </template>
 
@@ -96,6 +102,24 @@ export default class ContactGiftingView extends Vue {
   description = "";
   projectId = "";
   prompt = "";
+  recipientProjectName = "";
+  recipientProjectImage = "";
+  recipientProjectHandleId = "";
+
+  // New context parameters
+  stepType = "giver";
+  giverEntityType = "person" as "person" | "project";
+  recipientEntityType = "person" as "person" | "project";
+  giverProjectId = "";
+  giverProjectName = "";
+  giverProjectImage = "";
+  giverProjectHandleId = "";
+  giverDid = "";
+  recipientDid = "";
+  fromProjectId = "";
+  toProjectId = "";
+  showProjects = false;
+  isFromProjectView = false;
 
   async created() {
     try {
@@ -111,9 +135,41 @@ export default class ContactGiftingView extends Vue {
         dbAllContacts,
       ) as unknown as Contact[];
 
-      this.projectId = (this.$route.query["projectId"] as string) || "";
+      this.projectId =
+        (this.$route.query["recipientProjectId"] as string) || "";
+      this.recipientProjectName =
+        (this.$route.query["recipientProjectName"] as string) || "";
+      this.recipientProjectImage =
+        (this.$route.query["recipientProjectImage"] as string) || "";
+      this.recipientProjectHandleId =
+        (this.$route.query["recipientProjectHandleId"] as string) || "";
       this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
 
+      // Read new context parameters
+      this.stepType = (this.$route.query["stepType"] as string) || "giver";
+      this.giverEntityType =
+        (this.$route.query["giverEntityType"] as "person" | "project") ||
+        "person";
+      this.recipientEntityType =
+        (this.$route.query["recipientEntityType"] as "person" | "project") ||
+        "person";
+      this.giverProjectId =
+        (this.$route.query["giverProjectId"] as string) || "";
+      this.giverProjectName =
+        (this.$route.query["giverProjectName"] as string) || "";
+      this.giverProjectImage =
+        (this.$route.query["giverProjectImage"] as string) || "";
+      this.giverProjectHandleId =
+        (this.$route.query["giverProjectHandleId"] as string) || "";
+      this.giverDid = (this.$route.query["giverDid"] as string) || "";
+      this.recipientDid = (this.$route.query["recipientDid"] as string) || "";
+      this.fromProjectId = (this.$route.query["fromProjectId"] as string) || "";
+      this.toProjectId = (this.$route.query["toProjectId"] as string) || "";
+      this.showProjects =
+        (this.$route.query["showProjects"] as string) === "true";
+      this.isFromProjectView =
+        (this.$route.query["isFromProjectView"] as string) === "true";
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);
@@ -131,17 +187,108 @@ export default class ContactGiftingView extends Vue {
     }
   }
 
-  openDialog(giver?: GiverReceiverInputInfo) {
-    const recipient = this.projectId
-      ? undefined
-      : { did: this.activeDid, name: "you" };
-    (this.$refs.customDialog as GiftedDialog).open(
-      giver,
-      recipient,
-      undefined,
-      "Given by " + (giver?.name || "someone not named"),
-      this.prompt,
-    );
+  openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
+    if (contact === "Unnamed") {
+      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
+      let recipient: GiverReceiverInputInfo;
+      let giver: GiverReceiverInputInfo | undefined;
+
+      if (this.stepType === "giver") {
+        // We're selecting a giver, so recipient is either a project or the current user
+        if (this.recipientEntityType === "project") {
+          recipient = {
+            did: this.recipientProjectHandleId,
+            name: this.recipientProjectName,
+            image: this.recipientProjectImage,
+            handleId: this.recipientProjectHandleId,
+          };
+        } else {
+          recipient = { did: this.activeDid, name: "You" };
+        }
+        giver = undefined; // Will be set to "Unnamed" in GiftedDialog
+      } else {
+        // We're selecting a recipient, so recipient is "Unnamed" and giver is preserved from context
+        recipient = { did: "", name: "Unnamed" };
+
+        // Preserve the existing giver from the context
+        if (this.giverEntityType === "project") {
+          giver = {
+            // no did, because it's a project
+            name: this.giverProjectName,
+            image: this.giverProjectImage,
+            handleId: this.giverProjectHandleId,
+          };
+        } else if (this.giverDid) {
+          giver = {
+            did: this.giverDid,
+            name: this.giverProjectName || "Someone",
+          };
+        } else {
+          giver = { did: this.activeDid, name: "You" };
+        }
+      }
+
+      (this.$refs.customDialog as GiftedDialog).open(
+        giver,
+        recipient,
+        undefined,
+        this.stepType === "giver" ? "Given by Unnamed" : "Given to Unnamed",
+        this.prompt,
+      );
+      // Immediately select "Unnamed" and move to Step 2
+      (this.$refs.customDialog as GiftedDialog).selectGiver();
+    } else {
+      // Regular case: contact is a GiverReceiverInputInfo
+      let giver: GiverReceiverInputInfo;
+      let recipient: GiverReceiverInputInfo;
+
+      if (this.stepType === "giver") {
+        // We're selecting a giver, so the contact becomes the giver
+        giver = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
+
+        // Recipient is either a project or the current user
+        if (this.recipientEntityType === "project") {
+          recipient = {
+            did: this.recipientProjectHandleId,
+            name: this.recipientProjectName,
+            image: this.recipientProjectImage,
+            handleId: this.recipientProjectHandleId,
+          };
+        } else {
+          recipient = { did: this.activeDid, name: "You" };
+        }
+      } else {
+        // We're selecting a recipient, so the contact becomes the recipient
+        recipient = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
+
+        // Preserve the existing giver from the context
+        if (this.giverEntityType === "project") {
+          giver = {
+            did: this.giverProjectHandleId,
+            name: this.giverProjectName,
+            image: this.giverProjectImage,
+            handleId: this.giverProjectHandleId,
+          };
+        } else if (this.giverDid) {
+          giver = {
+            did: this.giverDid,
+            name: this.giverProjectName || "Someone",
+          };
+        } else {
+          giver = { did: this.activeDid, name: "You" };
+        }
+      }
+
+      (this.$refs.customDialog as GiftedDialog).open(
+        giver,
+        recipient,
+        undefined,
+        this.stepType === "giver"
+          ? "Given by " + (contact?.name || "someone not named")
+          : "Given to " + (contact?.name || "someone not named"),
+        this.prompt,
+      );
+    }
   }
 }
 </script>