From 94576ff3a48c8af83908757fa0a38696e4c9b3fd Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Fri, 18 Jul 2025 07:10:41 +0000
Subject: [PATCH] refactor: convert AmountInput to function props

- Convert AmountInput from @Emit("update:value") to onUpdateValue function prop
- Update GiftDetailsStep to use new function prop interface for amount handling

AmountInput now provides better parent control over validation and updates
---
 src/components/AmountInput.vue      | 30 ++++++++++++++---------------
 src/components/ContactInputForm.vue |  2 --
 src/components/GiftDetailsStep.vue  |  2 +-
 src/views/ContactsView.vue          | 10 ++++++----
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/AmountInput.vue b/src/components/AmountInput.vue
index d9284477..1e4ca75a 100644
--- a/src/components/AmountInput.vue
+++ b/src/components/AmountInput.vue
@@ -36,7 +36,7 @@ with increment/decrement buttons and validation. * * @author Matthew Raymer */
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch, Emit } from "vue-facing-decorator";
+import { Component, Prop, Vue, Watch } from "vue-facing-decorator";
 import { logger } from "@/utils/logger";
 
 /**
@@ -47,7 +47,8 @@ import { logger } from "@/utils/logger";
  * - Configurable min/max values and step size
  * - Input validation and formatting
  * - Disabled state handling for boundary values
- * - Emits update events for v-model compatibility
+ * - Function props for parent control over validation and updates
+ * - Maintains v-model compatibility through onUpdateValue function prop
  */
 @Component
 export default class AmountInput extends Vue {
@@ -71,6 +72,13 @@ export default class AmountInput extends Vue {
   @Prop({ default: "amount-input" })
   inputId!: string;
 
+  /**
+   * Function prop for handling value updates
+   * Called when the value changes, allowing parent to control validation and update behavior
+   */
+  @Prop({ type: Function, default: () => {} })
+  onUpdateValue!: (value: number) => void | Promise<void>;
+
   /** Internal display value for input field */
   private displayValue: string = "0";
 
@@ -173,7 +181,8 @@ export default class AmountInput extends Vue {
   }
 
   /**
-   * Update the value and emit change event
+   * Update the value and call parent function prop
+   * Allows parent to control validation and update behavior
    */
   private updateValue(newValue: number): void {
     logger.debug("[AmountInput] updateValue() called", {
@@ -182,27 +191,16 @@ export default class AmountInput extends Vue {
     });
     if (newValue !== this.value) {
       logger.debug(
-        "[AmountInput] updateValue() - values different, updating and emitting",
+        "[AmountInput] updateValue() - values different, updating and calling parent handler",
       );
       this.displayValue = newValue.toString();
-      this.emitUpdateValue(newValue);
+      this.onUpdateValue(newValue);
     } else {
       logger.debug(
         "[AmountInput] updateValue() - values same, skipping update",
       );
     }
   }
-
-  /**
-   * Emit update:value event
-   */
-  @Emit("update:value")
-  emitUpdateValue(value: number): number {
-    logger.debug("[AmountInput] emitUpdateValue() - emitting value", {
-      value,
-    });
-    return value;
-  }
 }
 </script>
 
diff --git a/src/components/ContactInputForm.vue b/src/components/ContactInputForm.vue
index 0ef2ded4..8d791eda 100644
--- a/src/components/ContactInputForm.vue
+++ b/src/components/ContactInputForm.vue
@@ -111,8 +111,6 @@ export default class ContactInputForm extends Vue {
   @Prop({ type: Function, default: () => {} })
   onNavigateOnboardMeeting!: () => void | Promise<void>;
 
-
-
   /**
    * Function prop for handling model value updates
    * Called when the input value changes for v-model binding
diff --git a/src/components/GiftDetailsStep.vue b/src/components/GiftDetailsStep.vue
index 7383e7a0..703e16fe 100644
--- a/src/components/GiftDetailsStep.vue
+++ b/src/components/GiftDetailsStep.vue
@@ -44,7 +44,7 @@ Template streamlined with computed CSS properties * * @author Matthew Raymer */
         :value="localAmount"
         :min="0"
         input-id="inputGivenAmount"
-        @update:value="handleAmountChange"
+        :on-update-value="handleAmountChange"
       />
 
       <select
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 4bb976b1..59584c71 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -36,8 +36,8 @@
       :on-navigate-onboard-meeting="
         () => $router.push({ name: 'onboard-meeting-list' })
       "
-      @qr-scan="handleQRCodeClick"
       :on-update-model-value="(value: string) => (contactInput = value)"
+      @qr-scan="handleQRCodeClick"
     />
 
     <ContactListHeader
@@ -1242,12 +1242,14 @@ export default class ContactsView extends Vue {
    * Handle QR code button click - route to appropriate scanner
    * Uses native scanner on mobile platforms, web scanner otherwise
    */
-  
 
   public handleQRCodeClick() {
     console.log("[ContactsView] handleQRCodeClick method called");
-    this.$logAndConsole("[ContactsView] handleQRCodeClick method called", false);
-    
+    this.$logAndConsole(
+      "[ContactsView] handleQRCodeClick method called",
+      false,
+    );
+
     if (Capacitor.isNativePlatform()) {
       console.log("[ContactsView] Navigating to contact-qr-scan-full");
       this.$router.push({ name: "contact-qr-scan-full" });