Browse Source

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
pull/158/head
Jose Olarte III 2 weeks ago
parent
commit
404a7cbc71
  1. 14
      src/components/EntitySelectionStep.vue
  2. 3
      src/components/GiftedDialog.vue
  3. 22
      src/views/ContactGiftingView.vue

14
src/components/EntitySelectionStep.vue

@ -136,6 +136,16 @@ export default class EntitySelectionStep extends Vue {
@Prop()
receiver?: EntityData | null;
/** Form field values to preserve when navigating to "Show All" */
@Prop({ default: "" })
description!: string;
@Prop({ default: "0" })
amountInput!: string;
@Prop({ default: "HUR" })
unitCode!: string;
/** Notification function from parent component */
@Prop()
notify?: (notification: NotificationIface, timeout?: number) => void;
@ -228,6 +238,10 @@ export default class EntitySelectionStep extends Vue {
stepType: this.stepType,
giverEntityType: this.giverEntityType,
recipientEntityType: this.recipientEntityType,
// Form field values to preserve
description: this.description,
amountInput: this.amountInput,
unitCode: this.unitCode,
...(this.stepType === "giver"
? {
recipientProjectId: this.toProjectId || "",

3
src/components/GiftedDialog.vue

@ -18,6 +18,9 @@
:to-project-id="toProjectId"
:giver="giver"
:receiver="receiver"
:description="description"
:amount-input="amountInput"
:unit-code="unitCode"
:notify="$notify"
@entity-selected="handleEntitySelected"
@cancel="cancel"

22
src/views/ContactGiftingView.vue

@ -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
// 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,
);
}
}

Loading…
Cancel
Save