Fix: gifting error messages

- Replaced error messages in GiftedDetailsView
- Maintained consistency between GiftedDialog and GiftedDetailsView (error message constants, amountInput)

src/components/GiftedDialog.vue

@@ -81,6 +81,12 @@ import GiftDetailsStep from "../components/GiftDetailsStep.vue";
 import { PlanData } from "../interfaces/records";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import {
+  NOTIFY_GIFT_ERROR_NEGATIVE_AMOUNT,
+  NOTIFY_GIFT_ERROR_NO_DESCRIPTION,
+  NOTIFY_GIFTED_DETAILS_NO_IDENTIFIER,
+  NOTIFY_GIFTED_DETAILS_RECORDING_GIVE,
+} from "@/constants/notifications";
 
 @Component({
   components: {
@@ -288,23 +294,24 @@ export default class GiftedDialog extends Vue {
   async confirm() {
     if (!this.activeDid) {
       this.safeNotify.error(
-        "You must select an identifier before you can record a give.",
+        NOTIFY_GIFTED_DETAILS_NO_IDENTIFIER.message,
-        TIMEOUTS.STANDARD,
+        TIMEOUTS.SHORT,
       );
       return;
     }
     if (parseFloat(this.amountInput) < 0) {
       this.safeNotify.error(
-        "You may not send a negative number.",
+        NOTIFY_GIFT_ERROR_NEGATIVE_AMOUNT.message,
         TIMEOUTS.SHORT,
       );
       return;
     }
     if (!this.description && !parseFloat(this.amountInput)) {
       this.safeNotify.error(
-        `You must enter a description or some number of ${
+        NOTIFY_GIFT_ERROR_NO_DESCRIPTION.message.replace(
-          this.libsUtil.UNIT_LONG[this.unitCode]
+          "{unit}",
-        }.`,
+          this.libsUtil.UNIT_SHORT[this.unitCode] || this.unitCode,
+        ),
         TIMEOUTS.SHORT,
       );
       return;
@@ -320,7 +327,11 @@ export default class GiftedDialog extends Vue {
     }
 
     this.close();
-    this.safeNotify.toast("Recording the give...", undefined, TIMEOUTS.BRIEF);
+    this.safeNotify.toast(
+      NOTIFY_GIFTED_DETAILS_RECORDING_GIVE.message,
+      undefined,
+      TIMEOUTS.BRIEF,
+    );
     // this is asynchronous, but we don't need to wait for it to complete
     await this.recordGive(
       (this.giver?.did as string) || null,

src/views/GiftedDetailsView.vue

@@ -48,24 +48,12 @@
       placeholder="What was received"
     />
     <div class="flex mb-4">
-      <button
+      <AmountInput
-        class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
+        :value="parseFloat(amountInput) || 0"
-        @click="amountInput === '0' ? null : decrement()"
+        :min="0"
-      >
+        input-id="inputGivenAmount"
-        <font-awesome icon="chevron-left" />
+        :on-update-value="handleAmountChange"
-      </button>
-      <input
-        id="inputGivenAmount"
-        v-model="amountInput"
-        type="number"
-        class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
       />
-      <button
-        class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
-        @click="increment()"
-      >
-        <font-awesome icon="chevron-right" />
-      </button>
 
       <select
         v-model="unitCode"
@@ -275,6 +263,7 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
+import AmountInput from "../components/AmountInput.vue";
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "../constants/app";
 import { GenericCredWrapper, GiveActionClaim } from "../interfaces";
 import {
@@ -296,9 +285,11 @@ import {
   NOTIFY_GIFTED_DETAILS_DELETE_IMAGE_CONFIRM,
   NOTIFY_GIFTED_DETAILS_DELETE_IMAGE_ERROR,
   NOTIFY_GIFTED_DETAILS_NO_IDENTIFIER,
+  NOTIFY_GIFT_ERROR_NEGATIVE_AMOUNT,
   NOTIFY_GIFTED_DETAILS_RECORDING_GIVE,
   NOTIFY_GIFTED_DETAILS_CREATE_GIVE_ERROR,
   NOTIFY_GIFTED_DETAILS_GIFT_RECORDED,
+  NOTIFY_GIFT_ERROR_NO_DESCRIPTION,
 } from "@/constants/notifications";
 
 @Component({
@@ -306,6 +297,7 @@ import {
     ImageMethodDialog,
     QuickNav,
     TopMessage,
+    AmountInput,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -528,6 +520,10 @@ export default class GiftedDetails extends Vue {
     )}`;
   }
 
+  handleAmountChange(value: number): void {
+    this.amountInput = value.toString();
+  }
+
   cancel() {
     this.deleteImage(); // not awaiting, so they'll go back immediately
     if (this.destinationPathAfter) {
@@ -609,14 +605,17 @@ export default class GiftedDetails extends Vue {
     }
     if (parseFloat(this.amountInput) < 0) {
       this.notify.error(
-        NOTIFY_GIFTED_DETAILS_NO_IDENTIFIER.message,
+        NOTIFY_GIFT_ERROR_NEGATIVE_AMOUNT.message,
         TIMEOUTS.SHORT,
       );
       return;
     }
     if (!this.description && !parseFloat(this.amountInput)) {
       this.notify.error(
-        NOTIFY_GIFTED_DETAILS_NO_IDENTIFIER.message,
+        NOTIFY_GIFT_ERROR_NO_DESCRIPTION.message.replace(
+          "{unit}",
+          this.libsUtil.UNIT_SHORT[this.unitCode] || this.unitCode,
+        ),
         TIMEOUTS.SHORT,
       );
       return;
@@ -625,7 +624,7 @@ export default class GiftedDetails extends Vue {
     this.notify.toast(
       NOTIFY_GIFTED_DETAILS_RECORDING_GIVE.message,
       undefined,
-      TIMEOUTS.SHORT,
+      TIMEOUTS.BRIEF,
     );
 
     // this is asynchronous, but we don't need to wait for it to complete