Add form field-level validation to Purchase scene

Author: Jon Tzeng

src/components/scenes/GiftCardPurchaseScene.tsx

@@ -231,6 +231,9 @@ export const GiftCardPurchaseScene: React.FC<Props> = props => {
   const [amountText, setAmountText] = React.useState<string>(
     hasFixedDenominations ? String(sortedDenominations[0]) : ''
   )
+  const [amountInputError, setAmountInputError] = React.useState<
+    string | undefined
+  >()
 
   // Update selection when denominations become available (e.g., after brand fetch)
   React.useEffect(() => {
@@ -247,6 +250,7 @@ export const GiftCardPurchaseScene: React.FC<Props> = props => {
     setMinimumWarning(null)
     setProductUnavailable(false)
     setError(null)
+    setAmountInputError(undefined)
 
     // Only allow numbers and decimal point
     const cleaned = text.replace(/[^0-9.]/g, '')
@@ -262,12 +266,38 @@ export const GiftCardPurchaseScene: React.FC<Props> = props => {
     }
   })
 
+  // Validate amount on blur for variable range cards
+  const handleAmountBlur = useHandler(() => {
+    if (!hasVariableRange || amountText === '') return
+
+    const parsed = parseFloat(amountText)
+    if (isNaN(parsed)) return
+
+    const fiatSymbol = getFiatSymbol(brand.currency)
+    if (parsed < minVal) {
+      setAmountInputError(
+        sprintf(
+          lstrings.card_amount_min_error_message_1s,
+          `${fiatSymbol}${minVal}`
+        )
+      )
+    } else if (parsed > maxVal) {
+      setAmountInputError(
+        sprintf(
+          lstrings.card_amount_max_error_message_1s,
+          `${fiatSymbol}${maxVal}`
+        )
+      )
+    }
+  })
+
   // Handle MAX button press
   const handleMaxPress = useHandler(() => {
     if (hasVariableRange) {
       setMinimumWarning(null)
       setProductUnavailable(false)
       setError(null)
+      setAmountInputError(undefined)
       setAmountText(String(maxVal))
       setSelectedAmount(maxVal)
     }
@@ -732,10 +762,13 @@ export const GiftCardPurchaseScene: React.FC<Props> = props => {
               <FilledTextInput
                 value={amountText}
                 onChangeText={handleAmountChange}
+                onBlur={handleAmountBlur}
                 keyboardType="decimal-pad"
+                returnKeyType="done"
                 placeholder={`${minVal} ${brand.currency} - ${maxVal} ${brand.currency}`}
                 clearIcon
                 textsizeRem={1.5}
+                error={amountInputError}
               />
               <EdgeTouchableOpacity
                 style={styles.maxButton}

src/locales/en_US.ts

@@ -2378,6 +2378,8 @@ const strings = {
   buy_new_card_button: `Buy New Card`,
   card_amount_max_error_message_s: `Maximum card purchase amount is $%s`,
   card_amount_min_error_message_s: `Minimum card purchase amount is $%s`,
+  card_amount_max_error_message_1s: 'Maximum card purchase amount is %1$s',
+  card_amount_min_error_message_1s: 'Minimum card purchase amount is %1$s',
   delete_card_confirmation_title: 'Delete Card?',
   getting_payment_invoice_message: 'Getting payment invoice',
   learn_more_button: `Learn More`,

src/locales/strings/enUS.json

@@ -1857,6 +1857,8 @@
   "buy_new_card_button": "Buy New Card",
   "card_amount_max_error_message_s": "Maximum card purchase amount is $%s",
   "card_amount_min_error_message_s": "Minimum card purchase amount is $%s",
+  "card_amount_max_error_message_1s": "Maximum card purchase amount is %1$s",
+  "card_amount_min_error_message_1s": "Minimum card purchase amount is %1$s",
   "delete_card_confirmation_title": "Delete Card?",
   "getting_payment_invoice_message": "Getting payment invoice",
   "learn_more_button": "Learn More",