do the same for the recipient: allow editing on the details page

src/views/GiftedDetailsView.vue

@@ -160,57 +160,46 @@
       <div
         class="sm:flex-grow sm:w-1/2 border border-slate-400 p-2 rounded-md overflow-hidden"
       >
-        <div class="flex items-center">
-          <input
-            v-if="recipientDid && !givenToProject"
-            v-model="givenToRecipient"
-            type="checkbox"
-            class="flex-shrink-0 h-6 w-6 mr-2"
-          />
-          <font-awesome
-            v-else
-            icon="square"
-            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
-          />
-          <label class="text-sm truncate">
-            {{
-              recipientDid
-                ? "This was given to " + recipientName + "."
-                : "No named individual benefitted."
-            }}
-          </label>
-          <font-awesome
-            v-if="!recipientDid || givenToProject"
-            icon="info-circle"
-            class="text-base cursor-pointer bg-white text-slate-500 ms-1"
-            @click="notifyUserOfRecipient()"
-          />
+        <!-- Recipient Selection Display -->
+        <div
+          v-if="!showRecipientSelection"
+          class="cursor-pointer"
+          @click="openRecipientSelection"
+        >
+          <div class="flex items-center">
+            <label class="text-sm flex-1">
+              {{
+                givenToProjectFunction() && fulfillsProjectName
+                  ? "To " + fulfillsProjectName
+                  : givenToPersonFunction() && recipientName
+                    ? "To " + recipientName
+                    : "Unnamed recipient"
+              }}
+            </label>
+            <span class="text-sm text-blue-500">Change</span>
+            <font-awesome icon="chevron-right" class="text-blue-500 ms-2" />
+          </div>
         </div>
 
-        <div class="flex items-center">
-          <input
-            v-if="fulfillsProjectId && !givenToRecipient"
-            v-model="givenToProject"
-            type="checkbox"
-            class="flex-shrink-0 h-6 w-6 mr-2"
-          />
-          <font-awesome
-            v-else
-            icon="square"
-            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
-          />
-          <label class="text-sm truncate">
-            {{
-              fulfillsProjectId
-                ? "This was given to " + fulfillsProjectName + ". "
-                : "No project benefitted."
-            }}
-          </label>
-          <font-awesome
-            v-if="!fulfillsProjectId || givenToRecipient"
-            icon="info-circle"
-            class="text-base cursor-pointer bg-white text-slate-500 ms-1"
-            @click="notifyUserFulfillsProject()"
+        <!-- Recipient Selection Interface -->
+        <div v-if="showRecipientSelection">
+          <EntitySelectionStep
+            step-type="recipient"
+            :all-contacts="allContacts"
+            :active-did="activeDid"
+            :all-my-dids="allMyDids"
+            :conflict-checker="wouldCreateConflict"
+            :from-project-id="providerProjectId"
+            :to-project-id="fulfillsProjectId"
+            :giver="currentGiver"
+            :receiver="currentReceiver"
+            :description="description"
+            :amount-input="amountInput"
+            :unit-code="unitCode"
+            :offer-id="offerId"
+            :notify="$notify"
+            @entity-selected="handleRecipientEntitySelected"
+            @cancel="closeRecipientSelection"
           />
         </div>
       </div>
@@ -335,6 +324,7 @@ export default class GiftedDetails extends Vue {
   recipientName = "";
   showGeneralAdvanced = false;
   showGiverSelection = false;
+  showRecipientSelection = false;
   unitCode = "HUR";
 
   libsUtil = libsUtil;
@@ -743,12 +733,12 @@ export default class GiftedDetails extends Vue {
           this.axios,
           this.apiServer,
           this.activeDid,
-          giverDid,
-          recipientDid,
+          this.giverDid,
+          this.recipientDid,
           this.description,
           parseFloat(this.amountInput),
           this.unitCode,
-          fulfillsProjectId,
+          this.fulfillsProjectId,
           this.offerId,
           false,
           this.imageUrl,
@@ -887,7 +877,6 @@ export default class GiftedDetails extends Vue {
       const contact = entity.data as Contact;
       this.giverDid = contact.did;
       this.giverName = contact.name || "";
-      this.providedByGiver = true;
       this.providerProjectId = "";
     } else if (entity.type === "project") {
       const project = entity.data as PlanData;
@@ -895,21 +884,65 @@ export default class GiftedDetails extends Vue {
       this.providerProjectName = project.name
         ? `the project "${project.name}"`
         : "a project";
-      this.providedByGiver = false;
       this.giverDid = "";
     }
     this.showGiverSelection = false;
   }
 
+  /**
+   * Open recipient selection interface
+   */
+  openRecipientSelection() {
+    this.showRecipientSelection = true;
+  }
+
+  /**
+   * Close recipient selection interface
+   */
+  closeRecipientSelection() {
+    this.showRecipientSelection = false;
+  }
+
+  /**
+   * Handle recipient entity selection
+   */
+  handleRecipientEntitySelected(entity: {
+    type: "person" | "project";
+    data: Contact | PlanData;
+    stepType: "giver" | "recipient";
+  }) {
+    if (entity.type === "person") {
+      const contact = entity.data as Contact;
+      this.recipientDid = contact.did;
+      this.recipientName = contact.name || "";
+      this.fulfillsProjectId = "";
+    } else if (entity.type === "project") {
+      const project = entity.data as PlanData;
+      this.fulfillsProjectId = project.handleId || "";
+      this.fulfillsProjectName = project.name
+        ? `the project "${project.name}"`
+        : "a project";
+      this.recipientDid = "";
+    }
+    this.showRecipientSelection = false;
+  }
+
   /**
    * Check if selecting an entity would create a conflict
    */
   wouldCreateConflict(identifier: string): boolean {
-    // Check if it would conflict with recipient
-    if (this.givenToRecipient && this.recipientDid === identifier) {
+    // Check if it would conflict with giver
+    if (this.giverDid === identifier) {
       return true;
     }
-    if (this.givenToProject && this.fulfillsProjectId === identifier) {
+    if (this.providerProjectId === identifier) {
+      return true;
+    }
+    // Check if it would conflict with recipient
+    if (this.recipientDid === identifier) {
+      return true;
+    }
+    if (this.fulfillsProjectId === identifier) {
       return true;
     }
     return false;