Browse Source

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
gifting-ui-2025-05
Jose Olarte III 3 weeks ago
parent
commit
4b355a5448
  1. 53
      src/components/GiftedDialog.vue
  2. 2
      src/views/HomeView.vue

53
src/components/GiftedDialog.vue

@ -1,15 +1,15 @@
<template>
<div v-if="visible" class="dialog-overlay">
<div class="dialog">
<!-- Step 1: Recipient -->
<div id="sectionGiftedRecipient">
<!-- Step 1: Giver -->
<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">
<button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4">
<img src="https://placehold.co/480?text=(Image)" class="size-8 object-cover rounded-full">
<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">
<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>

2
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

Loading…
Cancel
Save