Fix entity type matching in ClaimView

- Add recipientEntityTypeOverride prop to GiftedDialog component
- Add data-testid and data-recipient-entity-type-override attributes for testing
- Update updateEntityTypes() to respect recipientEntityTypeOverride when set
- Add watcher for recipientEntityTypeOverride prop changes
- Update ClaimView to pass recipient entity type override based on project context
- Improve recipient determination logic in ClaimView for person vs project recipients

src/components/GiftedDialog.vue

@@ -1,6 +1,10 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
-    <div class="dialog">
+    <div
+      class="dialog"
+      data-testid="gifted-dialog"
+      :data-recipient-entity-type-override="recipientEntityTypeOverride"
+    >
       <!-- Step 1: Entity Selection -->
       <EntitySelectionStep
         v-show="firstStep"
@@ -103,6 +107,7 @@ export default class GiftedDialog extends Vue {
   @Prop() toProjectId = "";
   @Prop({ default: false }) showProjects = false;
   @Prop() isFromProjectView = false;
+  @Prop() recipientEntityTypeOverride?: "person" | "project";
 
   @Watch("showProjects")
   onShowProjectsChange() {
@@ -119,6 +124,11 @@ export default class GiftedDialog extends Vue {
     this.updateEntityTypes();
   }
 
+  @Watch("recipientEntityTypeOverride")
+  onRecipientEntityTypeOverrideChange() {
+    this.updateEntityTypes();
+  }
+
   activeDid = "";
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
@@ -201,23 +211,40 @@ export default class GiftedDialog extends Vue {
     this.giverEntityType = "person";
     this.recipientEntityType = "person";
 
+    // If recipient entity type is explicitly overridden, use that
+    if (this.recipientEntityTypeOverride) {
+      this.recipientEntityType = this.recipientEntityTypeOverride;
+    }
+
     // Determine entity types based on current context
     if (this.showProjects) {
       // HomeView "Project" button or ProjectViewView "Given by This"
       this.giverEntityType = "project";
-      this.recipientEntityType = "person";
+      // Only override recipient if not already set by recipientEntityTypeOverride
+      if (!this.recipientEntityTypeOverride) {
+        this.recipientEntityType = "person";
+      }
     } else if (this.fromProjectId) {
       // ProjectViewView "Given by This" button (project is giver)
       this.giverEntityType = "project";
-      this.recipientEntityType = "person";
+      // Only override recipient if not already set by recipientEntityTypeOverride
+      if (!this.recipientEntityTypeOverride) {
+        this.recipientEntityType = "person";
+      }
     } else if (this.toProjectId) {
       // ProjectViewView "Given to This" button (project is recipient)
       this.giverEntityType = "person";
-      this.recipientEntityType = "project";
+      // Only override recipient if not already set by recipientEntityTypeOverride
+      if (!this.recipientEntityTypeOverride) {
+        this.recipientEntityType = "project";
+      }
     } else {
       // HomeView "Person" button
       this.giverEntityType = "person";
-      this.recipientEntityType = "person";
+      // Only override recipient if not already set by recipientEntityTypeOverride
+      if (!this.recipientEntityTypeOverride) {
+        this.recipientEntityType = "person";
+      }
     }
   }
 

src/views/ClaimView.vue

@@ -206,6 +206,7 @@
         detailsForOffer?.fulfillsPlanHandleId ||
         ''
       "
+      :recipient-entity-type-override="projectInfo ? 'project' : 'person'"
     />
 
     <div v-if="libsUtil.isGiveAction(veriClaim)">
@@ -1047,19 +1048,39 @@ export default class ClaimView extends Vue {
       ),
     };
 
-    // Use project info as recipient if available, otherwise use undefined
-    const recipient = this.projectInfo
-      ? {
-          did:
-            this.detailsForGive?.fulfillsPlanHandleId ||
-            this.detailsForOffer?.fulfillsPlanHandleId,
-          name: this.projectInfo.name,
-          handleId:
-            this.detailsForGive?.fulfillsPlanHandleId ||
-            this.detailsForOffer?.fulfillsPlanHandleId,
-          image: this.projectInfo.imageUrl,
-        }
-      : undefined;
+    // Determine recipient based on whether it's a project or person
+    let recipient: libsUtil.GiverReceiverInputInfo | undefined;
+
+    if (this.projectInfo) {
+      // Recipient is a project
+      recipient = {
+        did:
+          this.detailsForGive?.fulfillsPlanHandleId ||
+          this.detailsForOffer?.fulfillsPlanHandleId,
+        name: this.projectInfo.name,
+        handleId:
+          this.detailsForGive?.fulfillsPlanHandleId ||
+          this.detailsForOffer?.fulfillsPlanHandleId,
+        image: this.projectInfo.imageUrl,
+      };
+    } else {
+      // Recipient is a person - we need to determine who that person is
+      // For offers, the recipient is typically the person who made the offer
+      const offerClaim = this.veriClaim.claim as OfferClaim;
+      const recipientDid =
+        offerClaim.recipient?.identifier || this.veriClaim.issuer;
+
+      if (recipientDid) {
+        const recipientContact = serverUtil.contactForDid(
+          recipientDid,
+          this.allContacts,
+        );
+        recipient = {
+          did: recipientDid,
+          name: recipientContact?.name || recipientDid,
+        };
+      }
+    }
 
     // Extract offer information from the claim
     const offerClaim = this.veriClaim.claim as OfferClaim;