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. 24
      src/views/ContactGiftingView.vue

14
src/components/EntitySelectionStep.vue

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

3
src/components/GiftedDialog.vue

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

24
src/views/ContactGiftingView.vue

@ -102,9 +102,11 @@ export default class ContactGiftingView extends Vue {
activeDid = ""; activeDid = "";
allContacts: Array<Contact> = []; allContacts: Array<Contact> = [];
apiServer = ""; apiServer = "";
description = "";
projectId = ""; projectId = "";
prompt = ""; prompt = "";
description = "";
amountInput = "0";
unitCode = "HUR";
recipientProjectName = ""; recipientProjectName = "";
recipientProjectImage = ""; recipientProjectImage = "";
recipientProjectHandleId = ""; recipientProjectHandleId = "";
@ -143,6 +145,9 @@ export default class ContactGiftingView extends Vue {
this.recipientProjectHandleId = this.recipientProjectHandleId =
(this.$route.query["recipientProjectHandleId"] as string) || ""; (this.$route.query["recipientProjectHandleId"] as string) || "";
this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt; 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 // Read new context parameters
this.stepType = (this.$route.query["stepType"] as string) || "giver"; this.stepType = (this.$route.query["stepType"] as string) || "giver";
@ -182,7 +187,7 @@ export default class ContactGiftingView extends Vue {
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") { openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
if (contact === "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 recipient: GiverReceiverInputInfo;
let giver: GiverReceiverInputInfo | undefined; let giver: GiverReceiverInputInfo | undefined;
@ -226,9 +231,17 @@ export default class ContactGiftingView extends Vue {
recipient, recipient,
undefined, undefined,
this.prompt, 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 { } else {
// Regular case: contact is a GiverReceiverInputInfo // Regular case: contact is a GiverReceiverInputInfo
let giver: GiverReceiverInputInfo; let giver: GiverReceiverInputInfo;
@ -276,6 +289,9 @@ export default class ContactGiftingView extends Vue {
recipient, recipient,
undefined, undefined,
this.prompt, this.prompt,
this.description,
this.amountInput,
this.unitCode,
); );
} }
} }

Loading…
Cancel
Save