Add form field preservation in gifting flow

- Preserve description, amount, and unit code when navigating between gifting steps
- Add form field props to EntitySelectionStep and GiftedDialog components
- Update ContactGiftingView to handle form state persistence in URL parameters
This commit is contained in:
Jose Olarte III
2025-08-01 11:36:17 +08:00
parent 8b2c6714ec
commit 404a7cbc71
3 changed files with 37 additions and 4 deletions

View File

@@ -102,9 +102,11 @@ export default class ContactGiftingView extends Vue {
activeDid = "";
allContacts: Array<Contact> = [];
apiServer = "";
description = "";
projectId = "";
prompt = "";
description = "";
amountInput = "0";
unitCode = "HUR";
recipientProjectName = "";
recipientProjectImage = "";
recipientProjectHandleId = "";
@@ -143,6 +145,9 @@ export default class ContactGiftingView extends Vue {
this.recipientProjectHandleId =
(this.$route.query["recipientProjectHandleId"] as string) || "";
this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
this.description = (this.$route.query["description"] as string) || "";
this.amountInput = (this.$route.query["amountInput"] as string) || "0";
this.unitCode = (this.$route.query["unitCode"] as string) || "HUR";
// Read new context parameters
this.stepType = (this.$route.query["stepType"] as string) || "giver";
@@ -182,7 +187,7 @@ export default class ContactGiftingView extends Vue {
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
if (contact === "Unnamed") {
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
// Special case: Handle "Unnamed" contacts for both givers and recipients
let recipient: GiverReceiverInputInfo;
let giver: GiverReceiverInputInfo | undefined;
@@ -226,9 +231,17 @@ export default class ContactGiftingView extends Vue {
recipient,
undefined,
this.prompt,
this.description,
this.amountInput,
this.unitCode,
);
// Immediately select "Unnamed" and move to Step 2
(this.$refs.giftedDialog as GiftedDialog).selectGiver();
// Immediately select "Unnamed" and move to Step 2 based on stepType
if (this.stepType === "giver") {
(this.$refs.giftedDialog as GiftedDialog).selectGiver();
} else {
(this.$refs.giftedDialog as GiftedDialog).selectRecipient();
}
} else {
// Regular case: contact is a GiverReceiverInputInfo
let giver: GiverReceiverInputInfo;
@@ -276,6 +289,9 @@ export default class ContactGiftingView extends Vue {
recipient,
undefined,
this.prompt,
this.description,
this.amountInput,
this.unitCode,
);
}
}