change the "give" action on contact page to use dialog box

src/components/GiftedDialog.vue

@@ -2,12 +2,12 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <h1 class="text-xl font-bold text-center mb-4">
-        {{ message }} {{ giver?.name || "somebody not named" }}
+        {{ customTitle || message + " " + giver?.name || "somebody not named" }}
       </h1>
       <input
         type="text"
         class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        placeholder="What was received"
+        placeholder="What was given"
         v-model="description"
       />
       <div class="flex flex-row justify-center">
@@ -42,12 +42,15 @@
               name: 'gifted-details',
               query: {
                 amountInput,
+                customTitle,
                 description,
                 giverDid: giver?.did,
                 giverName: giver?.name,
                 message,
                 offerId,
                 projectId,
+                recipientDid: receiver?.did,
+                recipientName: receiver?.name,
                 unitCode,
               },
             }"
@@ -90,7 +93,7 @@ import { NotificationIface } from "@/constants/app";
 import {
   createAndSubmitGive,
   didInfo,
-  GiverInputInfo,
+  GiverReceiverInputInfo,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
 import { accountsDB, db } from "@/db/index";
@@ -103,7 +106,6 @@ export default class GiftedDialog extends Vue {
 
   @Prop message = "";
   @Prop projectId = "";
-  @Prop showGivenToUser = false;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
@@ -111,22 +113,32 @@ export default class GiftedDialog extends Vue {
   apiServer = "";
 
   amountInput = "0";
+  callbackOnSuccess?: (amount: number) => void = () => {};
+  customTitle?: string;
   description = "";
-  givenToUser = false;
-  giver?: GiverInputInfo; // undefined means no identified giver agent
+  giver?: GiverReceiverInputInfo; // undefined means no identified giver agent
   isTrade = false;
   offerId = "";
+  receiver?: GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
 
   libsUtil = libsUtil;
 
-  async open(giver?: GiverInputInfo, offerId?: string) {
+  async open(
+    giver?: GiverReceiverInputInfo,
+    receiver?: GiverReceiverInputInfo,
+    offerId?: string,
+    customTitle?: string,
+    callbackOnSuccess?: (amount: number) => void,
+  ) {
+    this.customTitle = customTitle;
     this.description = "";
-    this.giver = giver || {};
+    this.giver = giver;
+    this.receiver = receiver;
     // if we show "given to user" selection, default checkbox to true
-    this.givenToUser = this.showGivenToUser;
     this.amountInput = "0";
+    this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
 
     try {
@@ -141,7 +153,7 @@ export default class GiftedDialog extends Vue {
       const allAccounts = await accountsDB.accounts.toArray();
       this.allMyDids = allAccounts.map((acc) => acc.did);
 
-      if (!this.giver.name) {
+      if (this.giver && !this.giver.name) {
         this.giver.name = didInfo(
           this.giver.did,
           this.activeDid,
@@ -196,7 +208,6 @@ export default class GiftedDialog extends Vue {
   eraseValues() {
     this.description = "";
     this.giver = undefined;
-    this.givenToUser = this.showGivenToUser;
     this.amountInput = "0";
     this.unitCode = "HUR";
   }
@@ -254,6 +265,7 @@ export default class GiftedDialog extends Vue {
     // this is asynchronous, but we don't need to wait for it to complete
     await this.recordGive(
       (this.giver?.did as string) || null,
+      (this.receiver?.did as string) || null,
       this.description,
       parseFloat(this.amountInput),
       this.unitCode,
@@ -265,14 +277,16 @@ export default class GiftedDialog extends Vue {
   /**
    *
    * @param giverDid may be null
+   * @param recipientDid may be null
    * @param description may be an empty string
-   * @param amountInput may be 0
+   * @param amount may be 0
    * @param unitCode may be omitted, defaults to "HUR"
    */
-  public async recordGive(
+  async recordGive(
     giverDid: string | null,
+    recipientDid: string | null,
     description: string,
-    amountInput: number,
+    amount: number,
     unitCode: string = "HUR",
   ) {
     try {
@@ -282,9 +296,9 @@ export default class GiftedDialog extends Vue {
         this.apiServer,
         identity,
         giverDid,
-        this.givenToUser ? this.activeDid : undefined,
+        this.receiver?.did as string,
         description,
-        amountInput,
+        amount,
         unitCode,
         this.projectId,
         this.offerId,
@@ -316,6 +330,9 @@ export default class GiftedDialog extends Vue {
           },
           7000,
         );
+        if (this.callbackOnSuccess) {
+          this.callbackOnSuccess(amount);
+        }
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {