Feature: Project Gifting

- Gifting dialog: added ability to pick a project to benefit from
- Project view: modified dialog calls in Project view to toggle between giving to and benefiting from a project
- Project view: removed redundant person selection
- Project view: benefiting from a project locks the project selection in dialog to enforce context.

src/components/GiftedDialog.vue

@@ -3,63 +3,104 @@
     <div class="dialog">
       <!-- Step 1: Giver -->
       <div id="sectionGiftedGiver" v-show="currentStep === 1">
-        <label class="block font-bold mb-4">Choose a person to receive from:</label>
+        <label class="block font-bold mb-4">
+          {{ showProjects ? 'Choose a project to benefit from:' : 'Choose a person to receive from:' }}
+        </label>
 
-        <!-- Quick-pick grid -->
-				<ul
-          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
-        >
-          <li
-            @click="selectGiver()"
-            class="cursor-pointer"
-          >
-            <font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
-            <h3
-              class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
-            >
-              Unnamed
-            </h3>
-          </li>
-          <li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic">
-            (Add friends to see more people worthy of recognition.)
-          </li>
-          <li
-            v-for="contact in allContacts.slice(0, 10)"
-            :key="contact.did"
-            @click="selectGiver(contact)"
-            class="cursor-pointer"
-          >
-            <div class="relative w-fit mx-auto">
-              <EntityIcon
-                :contact="contact"
-                class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
-              />
-
-              <div
-                class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
-              >
-                <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
-              </div>
-            </div>
-            <h3
-              class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-            >
-              {{ contact.name || contact.did }}
-            </h3>
-          </li>
-          <li v-if="allContacts.length > 0">
-            <router-link
-              :to="{ name: 'contact-gift' }"
+        <!-- Unified Quick-pick grid for People and Projects -->
+        <ul :class="showProjects ? 'grid grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-4 text-center mb-4' : 'grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4'">
+          <template v-if="showProjects">
+            <li
+              v-for="project in projects.slice(0, 7)"
+              :key="project.handleId"
+              @click="selectProject(project)"
               class="cursor-pointer"
             >
-              <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
-              <h3
-                class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
-              >
-                Show All
+              <div class="relative w-fit mx-auto">
+                <ProjectIcon
+                  :entity-id="project.handleId"
+                  :icon-size="48"
+                  :image-url="project.image"
+                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+                />
+              </div>
+              <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+                {{ project.name }}
               </h3>
-            </router-link>
-          </li>
+              <div class="text-xs text-slate-500 truncate">
+                <font-awesome icon="user" class="fa-fw text-slate-400" />
+                {{ didInfo(project.issuerDid, activeDid, allMyDids, allContacts) }}
+              </div>
+            </li>
+            <li v-if="projects.length === 0" class="text-xs text-slate-500 italic col-span-full">
+              (No projects found.)
+            </li>
+            <li v-if="projects.length > 0">
+              <router-link
+                :to="{ name: 'discover' }"
+                class="cursor-pointer"
+              >
+                <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
+                <h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
+                  Show All
+                </h3>
+              </router-link>
+            </li>
+          </template>
+          <template v-else>
+            <li
+              v-if="isFromProjectView && activeDid"
+              @click="selectGiver({ did: activeDid, name: 'You' })"
+              class="cursor-pointer"
+            >
+              <font-awesome icon="hand" class="text-blue-500 text-5xl mb-1" />
+              <h3 class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+                You
+              </h3>
+            </li>
+            <li
+              @click="selectGiver()"
+              class="cursor-pointer"
+            >
+              <font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
+              <h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
+                Unnamed
+              </h3>
+            </li>
+            <li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic col-span-full">
+              (Add friends to see more people worthy of recognition.)
+            </li>
+            <li
+              v-for="contact in allContacts.slice(0, 10)"
+              :key="contact.did"
+              @click="selectGiver(contact)"
+              class="cursor-pointer"
+            >
+              <div class="relative w-fit mx-auto">
+                <EntityIcon
+                  :contact="contact"
+                  class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+                />
+                <div class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3">
+                  <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
+                </div>
+              </div>
+              <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
+                {{ contact.name || contact.did }}
+              </h3>
+            </li>
+            <li v-if="allContacts.length > 0">
+              <router-link
+                :to="{ name: 'contact-gift' }"
+                class="cursor-pointer"
+              >
+                <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
+                <h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
+                  Show All
+                </h3>
+              </router-link>
+            </li>
+          </template>
         </ul>
 
         <button
@@ -72,27 +113,72 @@
 
       <!-- Step 2: Gift -->
       <div id="sectionGiftedGift" v-show="currentStep === 2">
-        <button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4" @click="goBackToStep1">
+        <button 
+          v-if="!fromProjectId"
+          class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4" 
+          @click="goBackToStep1"
+        >
           <div>
-            <EntityIcon
-              v-if="giver?.did"
-              :contact="giver"
-              class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
-            />
-            <font-awesome
-              v-else
-              icon="circle-question"
-              class="text-slate-400 text-3xl"
-            />
-					</div>
+            <template v-if="showProjects">
+              <ProjectIcon
+                v-if="giver?.handleId"
+                :entity-id="giver.handleId"
+                :icon-size="32"
+                :image-url="giver.image"
+                class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+              />
+            </template>
+            <template v-else>
+              <EntityIcon
+                v-if="giver?.did"
+                :contact="giver"
+                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">Received from:</p>
-						<h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
-					</div>
+          <div class="text-start min-w-0">
+            <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefited from:' : 'Received from:' }}</p>
+            <h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
+          </div>
 
-					<p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
-				</button>
+          <p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
+        </button>
+        <div v-else class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4">
+          <div>
+            <template v-if="showProjects">
+              <ProjectIcon
+                v-if="giver?.handleId"
+                :entity-id="giver.handleId"
+                :icon-size="32"
+                :image-url="giver.image"
+                class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
+              />
+            </template>
+            <template v-else>
+              <EntityIcon
+                v-if="giver?.did"
+                :contact="giver"
+                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">{{ showProjects ? 'Benefited from:' : 'Received from:' }}</p>
+            <h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
+          </div>
+        </div>
         <input
           v-model="description"
           type="text"
@@ -182,6 +268,7 @@ import {
   createAndSubmitGive,
   didInfo,
   serverMessageForUser,
+  getHeaders,
 } from "../libs/endorserServer";
 import * as libsUtil from "../libs/util";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
@@ -191,10 +278,13 @@ import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import EntityIcon from "../components/EntityIcon.vue";
+import ProjectIcon from "../components/ProjectIcon.vue";
+import { PlanData } from "../interfaces/records";
 
 @Component({
   components: {
     EntityIcon,
+    ProjectIcon,
   },
 })
 export default class GiftedDialog extends Vue {
@@ -202,6 +292,8 @@ export default class GiftedDialog extends Vue {
 
   @Prop() fromProjectId = "";
   @Prop() toProjectId = "";
+  @Prop({ default: false }) showProjects = false;
+  @Prop() isFromProjectView = false;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
@@ -222,6 +314,10 @@ export default class GiftedDialog extends Vue {
 
   libsUtil = libsUtil;
 
+  projects: PlanData[] = [];
+
+  didInfo = didInfo;
+
   async open(
     giver?: libsUtil.GiverReceiverInputInfo,
     receiver?: libsUtil.GiverReceiverInputInfo,
@@ -234,7 +330,6 @@ export default class GiftedDialog extends Vue {
     this.giver = giver;
     this.prompt = prompt || "";
     this.receiver = receiver;
-    // if we show "given to user" selection, default checkbox to true
     this.amountInput = "0";
     this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
@@ -269,7 +364,10 @@ export default class GiftedDialog extends Vue {
           this.allContacts,
         );
       }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+      if (this.showProjects) {
+        await this.loadProjects();
+      }
     } catch (err: any) {
       logger.error("Error retrieving settings from database:", err);
       this.$notify(
@@ -404,7 +502,7 @@ export default class GiftedDialog extends Vue {
         this.axios,
         this.apiServer,
         this.activeDid,
-        giverDid as string,
+        this.showProjects ? undefined : giverDid as string,
         recipientDid as string,
         description,
         amount,
@@ -413,7 +511,7 @@ export default class GiftedDialog extends Vue {
         this.offerId,
         false,
         undefined,
-        this.fromProjectId,
+        this.showProjects ? this.giver?.handleId : undefined,
       );
 
       if (!result.success) {
@@ -506,6 +604,49 @@ export default class GiftedDialog extends Vue {
   goBackToStep1() {
     this.currentStep = 1;
   }
+
+  async loadProjects() {
+    try {
+      const response = await fetch(this.apiServer + "/api/v2/report/plans", {
+        method: "GET",
+        headers: await getHeaders(this.activeDid),
+      });
+
+      if (response.status !== 200) {
+        throw new Error("Failed to load projects");
+      }
+
+      const results = await response.json();
+      if (results.data) {
+        this.projects = results.data;
+      }
+    } catch (error) {
+      logger.error("Error loading projects:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to load projects",
+        },
+        3000,
+      );
+    }
+  }
+
+  selectProject(project: PlanData) {
+    this.giver = {
+      did: project.handleId,
+      name: project.name,
+      image: project.image,
+      handleId: project.handleId
+    };
+    this.receiver = {
+      did: this.activeDid,
+      name: "You"
+    };
+    this.currentStep = 2;
+  }
 }
 </script>
 

src/libs/util.ts

@@ -49,6 +49,8 @@ import { insertDidSpecificSettings, parseJsonField } from "../db/databaseUtil";
 export interface GiverReceiverInputInfo {
   did?: string;
   name?: string;
+  image?: string;
+  handleId?: string;
 }
 
 export enum OnboardPage {

src/views/HomeView.vue

@@ -132,7 +132,7 @@ Raymer * @version 1.0.0 */
               <div class="grid grid-cols-2 gap-2">
                 <button
                   type="button"
-                  @click="openDialog()"
+                  @click="openDialogPerson()"
                   class="text-center text-base 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-2 rounded-lg"
                 >
                   <font-awesome icon="user" />
@@ -140,7 +140,7 @@ Raymer * @version 1.0.0 */
                 </button>
                 <button
                   type="button"
-                  @click="openDialog()"
+                  @click="openProjectDialog()"
                   class="text-center text-base 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-2 rounded-lg"
                 >
                   <font-awesome icon="folder-open" />
@@ -153,7 +153,7 @@ Raymer * @version 1.0.0 */
       </div>
     </div>
 
-    <GiftedDialog ref="customDialog" />
+    <GiftedDialog ref="customDialog" :show-projects="showProjectsDialog" />
     <GiftedPrompts ref="giftedPrompts" />
     <FeedFilters ref="feedFilters" />
 
@@ -439,6 +439,7 @@ export default class HomeView extends Vue {
   selectedImageData: Blob | null = null;
   isImageViewerOpen = false;
   imageCache: Map<string, Blob | null> = new Map();
+  showProjectsDialog = false;
 
   /**
    * Initializes the component on mount
@@ -1862,5 +1863,15 @@ export default class HomeView extends Vue {
       this.$router.push({ name: "contact-qr" });
     }
   }
+
+  openDialogPerson(giver?: GiverReceiverInputInfo | "Unnamed", description?: string) {
+    this.showProjectsDialog = false;
+    this.openDialog(giver, description);
+  }
+
+  openProjectDialog() {
+    this.showProjectsDialog = true;
+    (this.$refs.customDialog as any).open();
+  }
 }
 </script>

src/views/ProjectViewView.vue

@@ -196,63 +196,7 @@
       </div>
     </div>
 
-    <div v-if="activeDid && isRegistered">
-      <div class="text-center">
-        <p class="mt-2 mt-4 text-center">Record a contribution from:</p>
-      </div>
-      <ul
-        class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5 mt-2"
-      >
-        <li @click="openGiftDialogToProject({ name: 'you', did: activeDid })">
-          <font-awesome
-            icon="hand"
-            class="fa-fw text-blue-500 text-5xl cursor-pointer"
-          />
-          <h3
-            class="mt-5 text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-          >
-            You
-          </h3>
-        </li>
-        <li @click="openGiftDialogToProject()">
-          <img
-            src="../assets/blank-square.svg"
-            class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
-          />
-          <h3
-            class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-          >
-            Unnamed/Unknown
-          </h3>
-        </li>
-        <li
-          v-for="contact in allContacts.slice(0, 5)"
-          :key="contact.did"
-          @click="openGiftDialogToProject(contact)"
-        >
-          <EntityIcon
-            :contact="contact"
-            :icon-size="64"
-            class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
-          />
-          <h3
-            class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-          >
-            {{ contact.name || "(no name)" }}
-          </h3>
-        </li>
-        <li>
-          <span
-            v-if="allContacts.length >= 5"
-            class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
-            @click="onClickAllContactsGifting()"
-          >
-            ... or someone else...
-          </span>
-        </li>
-      </ul>
-    </div>
-    <GiftedDialog ref="giveDialogToThis" :to-project-id="projectId" />
+    <GiftedDialog ref="giveDialogToThis" :to-project-id="projectId" :is-from-project-view="true" />
 
     <!-- Offers & Gifts to & from this -->
     <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
@@ -518,7 +462,7 @@
             </button>
           </div>
         </div>
-        <GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" />
+        <GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" :show-projects="true" />
 
         <h3 class="text-lg font-bold mb-3 mt-4">
           Benefitted From This Project
@@ -1241,21 +1185,26 @@ export default class ProjectViewView extends Vue {
       // Immediately select "Unnamed" and move to Step 2
       (this.$refs.giveDialogToThis as GiftedDialog).selectGiver();
     } else {
+      // Set only the project as recipient, allowing user to select giver in Step 1
       (this.$refs.giveDialogToThis as GiftedDialog).open(
-        contact,
         undefined,
+        { did: this.issuer, name: this.name, handleId: this.projectId, image: this.imageUrl },
         undefined,
-        (contact?.name || "Someone not named") + ` gave to this project`,
+        `Given to ${this.name}`,
       );
     }
   }
 
   openGiftDialogFromProject() {
+    // Set the project as giver and the current user as recipient
     (this.$refs.giveDialogFromThis as GiftedDialog).open(
-      undefined,
+      { did: undefined, name: this.name, handleId: this.projectId, image: this.imageUrl },
       { did: this.activeDid, name: "You" },
       undefined,
-      `This project gave to you`,
+      `${this.name} gave to you`,
+      undefined,
+      undefined,
+      true
     );
   }
 
@@ -1530,3 +1479,4 @@ export default class ProjectViewView extends Vue {
   }
 }
 </script>
+