WIP: two-step dialog + functionality

- Dialog is now presented as two distinct steps
- Gifting functionality reinstated
- Minor UI tweaks
- IN PROGRESS: ensuring calls to dialog from other parts of the app remain functional

src/components/GiftedDialog.vue

@@ -1,15 +1,15 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <!-- Step 1: Recipient -->
+      <!-- Step 1: Giver -->
-      <div id="sectionGiftedRecipient">
+      <div id="sectionGiftedGiver" v-show="currentStep === 1">
         <label class="block font-bold mb-4">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="openDialog()">
+          <li @click="selectGiver()">
             <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"
@@ -23,7 +23,7 @@
           <li
             v-for="contact in allContacts.slice(0, 10)"
             :key="contact.did"
-            @click="openDialog(contact)"
+            @click="selectGiver(contact)"
             class="cursor-pointer"
           >
             <div class="relative w-fit mx-auto">
@@ -68,13 +68,24 @@
       </div>
 
       <!-- Step 2: Gift -->
-      <div id="sectionGiftedGift">
+      <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">
+        <button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4" @click="goBackToStep1">
-					<img src="https://placehold.co/480?text=(Image)" class="size-8 object-cover rounded-full">
+          <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>
 
-					<div class="text-start">
+					<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">Matthew Raymer</h3>
+						<h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
 					</div>
 
 					<p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
@@ -105,7 +116,7 @@
             <font-awesome icon="chevron-right" />
 					</button>
 
-					<select class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
+					<select v-model="unitCode" class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
 						<option value="HUR">Hours</option>
 						<option value="USD">US $</option>
 						<option value="BTC">BTC</option>
@@ -202,6 +213,7 @@ export default class GiftedDialog extends Vue {
   receiver?: libsUtil.GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
+  currentStep = 1;
 
   libsUtil = libsUtil;
 
@@ -221,6 +233,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
+    this.currentStep = giver ? 2 : 1;
 
     try {
       const settings = await retrieveSettingsForActiveAccount();
@@ -289,6 +302,7 @@ export default class GiftedDialog extends Vue {
     this.amountInput = "0";
     this.prompt = "";
     this.unitCode = "HUR";
+    this.currentStep = 1;
   }
 
   async confirm() {
@@ -468,6 +482,25 @@ export default class GiftedDialog extends Vue {
       -1,
     );
   }
+
+  selectGiver(contact?: Contact) {
+    if (contact) {
+      this.giver = {
+        did: contact.did,
+        name: contact.name || contact.did
+      };
+    } else {
+      this.giver = {
+        did: '',
+        name: 'Unnamed'
+      };
+    }
+    this.currentStep = 2;
+  }
+
+  goBackToStep1() {
+    this.currentStep = 1;
+  }
 }
 </script>
 

src/views/HomeView.vue

@@ -313,7 +313,7 @@ import {
 import { GiveSummaryRecord } from "../interfaces";
 import * as serverUtil from "../libs/endorserServer";
 import { logger } from "../utils/logger";
-import { GiveRecordWithContactInfo } from "types";
+import { GiveRecordWithContactInfo } from "../types";
 
 /**
  * HomeView Component