Add confirming and failed states to gift card display card

Distinguish between awaiting blockchain confirmations (txid exists but
no voucher yet), pending voucher delivery, and failed/expired orders.
Failed cards are dimmed like redeemed cards.

Author: Jon Tzeng

src/components/cards/GiftCardDisplayCard.tsx

@@ -25,11 +25,18 @@ const ZOOM_FACTOR = 1.025
 
 /**
  * Card display states:
- * - pending: Order broadcasted but voucher not yet received
+ * - confirming: Payment tx broadcasted, awaiting blockchain confirmations
+ * - pending: Confirmations received, waiting for voucher from Phaze
  * - available: Voucher received, ready to redeem
+ * - failed: Order failed or expired
  * - redeemed: User has marked as redeemed
  */
-export type GiftCardStatus = 'pending' | 'available' | 'redeemed'
+export type GiftCardStatus =
+  | 'confirming'
+  | 'pending'
+  | 'available'
+  | 'failed'
+  | 'redeemed'
 
 interface Props {
   order: PhazeDisplayOrder
@@ -53,9 +60,9 @@ export const GiftCardDisplayCard: React.FC<Props> = props => {
   const code = order.vouchers?.[0]?.code
   const redemptionUrl = order.vouchers?.[0]?.url
 
-  // Redeemed cards are dimmed; pending cards use shimmer overlay instead
+  // Redeemed and failed cards are dimmed; pending/confirming use shimmer
   const cardContainerStyle =
-    status === 'redeemed'
+    status === 'redeemed' || status === 'failed'
       ? [styles.cardContainer, styles.dimmedCard]
       : styles.cardContainer
 
@@ -136,10 +143,18 @@ export const GiftCardDisplayCard: React.FC<Props> = props => {
             <View />
           )}
 
-          {status === 'pending' ? (
+          {status === 'confirming' ? (
+            <EdgeText style={styles.pendingText}>
+              {lstrings.gift_card_confirming}
+            </EdgeText>
+          ) : status === 'pending' ? (
             <EdgeText style={styles.pendingText}>
               {lstrings.gift_card_pending}
             </EdgeText>
+          ) : status === 'failed' ? (
+            <EdgeText style={styles.pendingText}>
+              {lstrings.gift_card_failed}
+            </EdgeText>
           ) : status === 'available' && redemptionUrl != null ? (
             <EdgeTouchableOpacity
               onPress={handleRedeem}
@@ -158,8 +173,8 @@ export const GiftCardDisplayCard: React.FC<Props> = props => {
         </View>
       </LinearGradient>
 
-      {/* Shimmer overlay for pending state */}
-      <Shimmer isShown={status === 'pending'} />
+      {/* Shimmer overlay for confirming/pending states */}
+      <Shimmer isShown={status === 'confirming' || status === 'pending'} />
     </View>
   )
 }

src/components/scenes/GiftCardListScene.tsx

@@ -224,15 +224,24 @@ export const GiftCardListScene: React.FC<Props> = (props: Props) => {
 
   /**
    * Derive card status from order data:
-   * - pending: Broadcasted but no voucher yet
+   * - confirming: Payment tx sent, awaiting blockchain confirmations
+   * - pending: Confirmations received, waiting for voucher
    * - available: Has voucher, not yet redeemed
+   * - failed: Order failed or expired
    * - redeemed: User marked as redeemed
    */
   const getCardStatus = React.useCallback(
     (order: PhazeDisplayOrder): GiftCardStatus => {
       if (order.redeemedDate != null) return 'redeemed'
-      if (order.vouchers.length === 0) return 'pending'
-      return 'available'
+      if (order.status === 'failed' || order.status === 'expired')
+        return 'failed'
+      if (order.vouchers.length > 0) return 'available'
+      // Phaze API status 'processing' means payment confirmed, generating
+      // vouchers. Otherwise txid present means tx broadcast, awaiting
+      // Phaze confirmation.
+      if (order.status === 'processing') return 'pending'
+      if (order.txid != null) return 'confirming'
+      return 'pending'
     },
     []
   )

src/locales/en_US.ts

@@ -1964,6 +1964,8 @@ const strings = {
   gift_card_redeemed_cards: 'Redeemed Cards',
   gift_card_unmark_as_redeemed: 'Unmark as Redeemed',
   gift_card_active_cards: 'Active Cards',
+  gift_card_confirming: 'Awaiting Payment Confirmations...',
+  gift_card_failed: 'Failed',
   gift_card_pending: 'Pending Delivery, Please Wait...',
   gift_card_pending_toast:
     'Your gift card is being delivered. Please wait for a few minutes for it to arrive.',

src/locales/strings/enUS.json

@@ -1526,6 +1526,8 @@
   "gift_card_redeemed_cards": "Redeemed Cards",
   "gift_card_unmark_as_redeemed": "Unmark as Redeemed",
   "gift_card_active_cards": "Active Cards",
+  "gift_card_confirming": "Awaiting Payment Confirmations...",
+  "gift_card_failed": "Failed",
   "gift_card_pending": "Pending Delivery, Please Wait...",
   "gift_card_pending_toast": "Your gift card is being delivered. Please wait for a few minutes for it to arrive.",
   "gift_card_quote_expired_toast": "Your quote has expired. Please try again.",