Fix: added context for ContactGiftingView

src/components/GiftedDialog.vue

@@ -151,10 +151,28 @@
                 :to="{
                   name: 'contact-gift',
                   query: {
+                    stepType: stepType,
+                    giverEntityType: giverEntityType,
+                    recipientEntityType: recipientEntityType,
+                    ...(stepType === 'giver'
+                      ? {
                           recipientProjectId: toProjectId,
-                    recipientProjectName: giver?.name,
+                          recipientProjectName: receiver?.name,
-                    recipientProjectImage: giver?.image,
+                          recipientProjectImage: receiver?.image,
-                    recipientProjectHandleId: giver?.handleId,
+                          recipientProjectHandleId: receiver?.handleId,
+                          recipientDid: receiver?.did,
+                        }
+                      : {
+                          giverProjectId: fromProjectId,
+                          giverProjectName: giver?.name,
+                          giverProjectImage: giver?.image,
+                          giverProjectHandleId: giver?.handleId,
+                          giverDid: giver?.did,
+                        }),
+                    fromProjectId: fromProjectId,
+                    toProjectId: toProjectId,
+                    showProjects: (showProjects || false).toString(),
+                    isFromProjectView: (isFromProjectView || false).toString(),
                   },
                 }"
               >
@@ -185,7 +203,10 @@
         <div class="grid grid-cols-2 gap-2 mb-4">
           <!-- Giver Button -->
           <button
-            v-if="(giverEntityType === 'person' || giverEntityType === 'project') && !(isFromProjectView && giverEntityType === 'project')"
+            v-if="
+              (giverEntityType === 'person' || giverEntityType === 'project') &&
+              !(isFromProjectView && giverEntityType === 'project')
+            "
             class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
             @click="goBackToStep1('giver')"
           >
@@ -283,16 +304,6 @@
             @click="goBackToStep1('recipient')"
           >
             <div>
-              <template v-if="recipientEntityType === 'project'">
-                <ProjectIcon
-                  v-if="receiver?.handleId"
-                  :entity-id="receiver.handleId"
-                  :icon-size="32"
-                  :image-url="receiver.image"
-                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
-                />
-              </template>
-              <template v-else>
               <EntityIcon
                 v-if="receiver?.did"
                 :contact="receiver"
@@ -303,16 +314,11 @@
                 icon="circle-question"
                 class="text-slate-400 text-3xl"
               />
-              </template>
             </div>
 
             <div class="text-start min-w-0">
               <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
-                {{
+                Given to:
-                  recipientEntityType === "project"
-                    ? "Given to project:"
-                    : "Given to:"
-                }}
               </p>
               <h3 class="font-semibold truncate">
                 {{ receiver?.name || "Unnamed" }}
@@ -324,11 +330,10 @@
             </p>
           </button>
           <div
-            v-else
+            v-else-if="recipientEntityType === 'project'"
             class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
           >
             <div>
-              <template v-if="recipientEntityType === 'project'">
               <ProjectIcon
                 v-if="receiver?.handleId"
                 :entity-id="receiver.handleId"
@@ -336,28 +341,11 @@
                 :image-url="receiver.image"
                 class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
               />
-              </template>
-              <template v-else>
-                <EntityIcon
-                  v-if="receiver?.did"
-                  :contact="receiver"
-                  class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
-                />
-                <font-awesome
-                  v-else
-                  icon="circle-question"
-                  class="text-slate-400 text-3xl"
-                />
-              </template>
             </div>
 
             <div class="text-start min-w-0">
               <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
-                {{
+                Given to project:
-                  recipientEntityType === "project"
-                    ? "Given to project:"
-                    : "Given to:"
-                }}
               </p>
               <h3 class="font-semibold truncate">
                 {{ receiver?.name || "Unnamed" }}
@@ -491,17 +479,17 @@ export default class GiftedDialog extends Vue {
   @Prop({ default: false }) showProjects = false;
   @Prop() isFromProjectView = false;
 
-  @Watch('showProjects')
+  @Watch("showProjects")
   onShowProjectsChange() {
     this.updateEntityTypes();
   }
 
-  @Watch('fromProjectId')
+  @Watch("fromProjectId")
   onFromProjectIdChange() {
     this.updateEntityTypes();
   }
 
-  @Watch('toProjectId')
+  @Watch("toProjectId")
   onToProjectIdChange() {
     this.updateEntityTypes();
   }
@@ -531,8 +519,9 @@ export default class GiftedDialog extends Vue {
 
   // Computed property to help debug template logic
   get shouldShowProjects() {
-    const result = (this.stepType === 'giver' && this.giverEntityType === 'project') ||
+    const result =
-                   (this.stepType === 'recipient' && this.recipientEntityType === 'project');
+      (this.stepType === "giver" && this.giverEntityType === "project") ||
+      (this.stepType === "recipient" && this.recipientEntityType === "project");
     return result;
   }
 

src/views/ContactGiftingView.vue

@@ -11,7 +11,7 @@
           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>
 
@@ -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>
 
@@ -101,6 +107,21 @@ export default class ContactGiftingView extends Vue {
   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 {
       let settings = await databaseUtil.retrieveSettingsForActiveAccount();
@@ -137,6 +158,31 @@ export default class ContactGiftingView extends Vue {
         (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);
@@ -154,33 +200,105 @@ export default class ContactGiftingView extends Vue {
     }
   }
 
-  openDialog(giver?: GiverReceiverInputInfo | "Unnamed") {
+  openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
-    const recipient = this.projectId
+    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 = {
+            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" };
+        }
       }
-      : { did: this.activeDid, name: "you" };
 
-    if (giver === "Unnamed") {
-      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
       (this.$refs.customDialog as GiftedDialog).open(
-        undefined,
+        giver,
         recipient,
         undefined,
-        "Given by Unnamed",
+        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,
-        "Given by " + (giver?.name || "someone not named"),
+        this.stepType === "giver"
+          ? "Given by " + (contact?.name || "someone not named")
+          : "Given to " + (contact?.name || "someone not named"),
         this.prompt,
       );
     }