From dacf1f80839867bca38ec1fe4d9aa3a383de7fa8 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Fri, 18 Jul 2025 07:23:20 +0000
Subject: [PATCH] refactor: convert GiftDetailsStep update handlers from emits
 to function props

- Replace @Emit("update:description"), @Emit("update:amount"), @Emit("update:unitCode") with function props
- Add onUpdateDescription, onUpdateAmount, onUpdateUnitCode function props with TypeScript typing
- Update GiftedDialog to use new function prop interface for update handlers
- Remove emit decorators and methods for update events
- Keep emit pattern for non-update events (edit-entity, explain-data, submit, cancel)
- Improve component documentation to reflect new architecture

This change provides better parent control over validation and update behavior
for form fields while maintaining existing functionality for other events.
---
 src/components/GiftDetailsStep.vue | 54 +++++++++++++++++-------------
 src/components/GiftedDialog.vue    |  6 ++--
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/components/GiftDetailsStep.vue b/src/components/GiftDetailsStep.vue
index 703e16fe..26009d98 100644
--- a/src/components/GiftDetailsStep.vue
+++ b/src/components/GiftDetailsStep.vue
@@ -5,7 +5,8 @@ with edit capability * - Gift description input with placeholder support * -
 Amount input with increment/decrement controls * - Unit code selection (HUR,
 USD, BTC, etc.) * - Photo & more options navigation * - Conflict detection and
 warning display * - Form validation and submission * - Cancel functionality * -
-Template streamlined with computed CSS properties * * @author Matthew Raymer */
+Template streamlined with computed CSS properties * - Function props for parent
+control over updates and validation * * @author Matthew Raymer */
 <template>
   <div id="sectionGiftedGift">
     <!-- Entity Summary Buttons -->
@@ -130,6 +131,7 @@ interface EntityData {
  * - Form validation and submission
  * - Cancel functionality
  * - Template streamlined with computed CSS properties
+ * - Function props for parent control over updates and validation
  */
 @Component({
   components: {
@@ -190,6 +192,27 @@ export default class GiftDetailsStep extends Vue {
   @Prop({ default: "" })
   toProjectId!: string;
 
+  /**
+   * Function prop for handling description updates
+   * Called when the description input changes, allowing parent to control validation
+   */
+  @Prop({ type: Function, default: () => {} })
+  onUpdateDescription!: (description: string) => void | Promise<void>;
+
+  /**
+   * Function prop for handling amount updates
+   * Called when the amount changes, allowing parent to control validation
+   */
+  @Prop({ type: Function, default: () => {} })
+  onUpdateAmount!: (amount: number) => void | Promise<void>;
+
+  /**
+   * Function prop for handling unit code updates
+   * Called when the unit code selection changes, allowing parent to control validation
+   */
+  @Prop({ type: Function, default: () => {} })
+  onUpdateUnitCode!: (unitCode: string) => void | Promise<void>;
+
   /** Local reactive copies of props for v-model */
   private localDescription: string = "";
   private localAmount: number = 0;
@@ -310,13 +333,15 @@ export default class GiftDetailsStep extends Vue {
 
   /**
    * Handle description input changes
+   * Calls the onUpdateDescription function prop for parent control
    */
   handleDescriptionChange(): void {
-    this.emitUpdateDescription(this.localDescription);
+    this.onUpdateDescription(this.localDescription);
   }
 
   /**
    * Handle amount input changes
+   * Calls the onUpdateAmount function prop for parent control
    */
   handleAmountChange(newAmount: number): void {
     logger.debug("[GiftDetailsStep] handleAmountChange() called", {
@@ -324,14 +349,15 @@ export default class GiftDetailsStep extends Vue {
       newAmount,
     });
     this.localAmount = newAmount;
-    this.emitUpdateAmount(newAmount);
+    this.onUpdateAmount(newAmount);
   }
 
   /**
    * Handle unit code selection changes
+   * Calls the onUpdateUnitCode function prop for parent control
    */
   handleUnitCodeChange(): void {
-    this.emitUpdateUnitCode(this.localUnitCode);
+    this.onUpdateUnitCode(this.localUnitCode);
   }
 
   /**
@@ -381,25 +407,7 @@ export default class GiftDetailsStep extends Vue {
     this.emitCancel();
   }
 
-  // Emit methods using @Emit decorator
-
-  @Emit("update:description")
-  emitUpdateDescription(description: string): string {
-    return description;
-  }
-
-  @Emit("update:amount")
-  emitUpdateAmount(amount: number): number {
-    logger.debug("[GiftDetailsStep] emitUpdateAmount() - emitting amount", {
-      amount,
-    });
-    return amount;
-  }
-
-  @Emit("update:unitCode")
-  emitUpdateUnitCode(unitCode: string): string {
-    return unitCode;
-  }
+  // Emit methods using @Emit decorator (keeping these for non-update events)
 
   @Emit("edit-entity")
   emitEditEntity(data: {
diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 5e5e4bed..127c2e2e 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -39,9 +39,9 @@
         :offer-id="offerId"
         :from-project-id="fromProjectId"
         :to-project-id="toProjectId"
-        @update:description="description = $event"
-        @update:amount="handleAmountUpdate"
-        @update:unit-code="unitCode = $event"
+        :on-update-description="(desc: string) => (description = desc)"
+        :on-update-amount="handleAmountUpdate"
+        :on-update-unit-code="(code: string) => (unitCode = code)"
         @edit-entity="handleEditEntity"
         @explain-data="explainData"
         @submit="handleSubmit"