Add Get Help to kebab menu and failed card button

Add a 'Get Help' row to the gift card kebab menu that navigates to the
new Gift Card Account Information scene with the quoteId. Also surface
a 'Get Help' button on failed cards, reusing the existing redeem button
pattern.

Author: Jon Tzeng

src/components/cards/GiftCardDisplayCard.tsx

@@ -43,6 +43,8 @@ interface Props {
   /** Display state of the card */
   status: GiftCardStatus
   onMenuPress: () => void
+  /** Called when user taps the "Get Help" button on failed cards */
+  onGetHelpPress?: () => void
   /** Called when user taps redeem and completes viewing (webview closes) */
   onRedeemComplete?: () => void
 }
@@ -53,7 +55,7 @@ interface Props {
  * and redemption link overlaid.
  */
 export const GiftCardDisplayCard: React.FC<Props> = props => {
-  const { order, status, onMenuPress, onRedeemComplete } = props
+  const { order, status, onMenuPress, onGetHelpPress, onRedeemComplete } = props
   const theme = useTheme()
   const styles = getStyles(theme)
 
@@ -152,9 +154,19 @@ export const GiftCardDisplayCard: React.FC<Props> = props => {
               {lstrings.gift_card_pending}
             </EdgeText>
           ) : status === 'failed' ? (
-            <EdgeText style={styles.pendingText}>
-              {lstrings.gift_card_failed}
-            </EdgeText>
+            <EdgeTouchableOpacity
+              onPress={onGetHelpPress}
+              style={styles.redeemContainer}
+            >
+              <EdgeText style={styles.redeemText}>
+                {lstrings.gift_card_get_help}
+              </EdgeText>
+              <ChevronRightIcon
+                size={theme.rem(1)}
+                color={theme.iconTappable}
+                style={styles.embossedShadow}
+              />
+            </EdgeTouchableOpacity>
           ) : status === 'available' && redemptionUrl != null ? (
             <EdgeTouchableOpacity
               onPress={handleRedeem}

src/components/modals/GiftCardMenuModal.tsx

@@ -9,7 +9,7 @@ import { useWatch } from '../../hooks/useWatch'
 import { lstrings } from '../../locales/strings'
 import type { PhazeDisplayOrder } from '../../plugins/gift-cards/phazeGiftCardTypes'
 import { useSelector } from '../../types/reactRedux'
-import { ArrowRightIcon, CheckIcon } from '../icons/ThemedIcons'
+import { ArrowRightIcon, CheckIcon, QuestionIcon } from '../icons/ThemedIcons'
 import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
 import { EdgeText } from '../themed/EdgeText'
 import { SelectableRow } from '../themed/SelectableRow'
@@ -19,6 +19,7 @@ export type GiftCardMenuResult =
   | { type: 'goToTransaction'; transaction: EdgeTransaction; walletId: string }
   | { type: 'markAsRedeemed' }
   | { type: 'unmarkAsRedeemed' }
+  | { type: 'getHelp' }
   | undefined
 
 interface Props {
@@ -93,6 +94,10 @@ export const GiftCardMenuModal: React.FC<Props> = props => {
     })
   })
 
+  const handleGetHelp = useHandler(() => {
+    bridge.resolve({ type: 'getHelp' })
+  })
+
   // Determine "Go to Transaction" state
   const hasTx = transaction != null
   const canNavigate = hasTx && order.walletId != null
@@ -140,6 +145,15 @@ export const GiftCardMenuModal: React.FC<Props> = props => {
           </View>
         }
       />
+      <SelectableRow
+        title={lstrings.gift_card_get_help}
+        onPress={handleGetHelp}
+        icon={
+          <View style={styles.iconContainer}>
+            <QuestionIcon size={iconSize} color={iconColor} />
+          </View>
+        }
+      />
     </EdgeModal>
   )
 }

src/components/scenes/GiftCardListScene.tsx

@@ -186,6 +186,10 @@ export const GiftCardListScene: React.FC<Props> = (props: Props) => {
         await saveOrderAugment(account, order.quoteId, {
           redeemedDate: undefined
         })
+      } else if (result.type === 'getHelp') {
+        navigation.navigate('giftCardAccountInfo', {
+          quoteId: order.quoteId
+        })
       }
     }
   )
@@ -285,6 +289,15 @@ export const GiftCardListScene: React.FC<Props> = (props: Props) => {
           onMenuPress={() => {
             handleMenuPress(order, false).catch(() => {})
           }}
+          onGetHelpPress={
+            status !== 'failed'
+              ? undefined
+              : () => {
+                  navigation.navigate('giftCardAccountInfo', {
+                    quoteId: order.quoteId
+                  })
+                }
+          }
           onRedeemComplete={
             status !== 'available'
               ? undefined