APP-2997: Handle age assurance data load failures (#11612)

Co-authored-by: Eric Bailey <git@esb.lol>

src/components/Error.tsx

@@ -3,27 +3,38 @@ import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useGoBack} from '#/lib/hooks/useGoBack'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {type Props as SVGIconProps} from '#/components/icons/common'
 import * as Layout from '#/components/Layout'
+import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
 export function Error({
+  icon: Icon,
   title,
   message,
   onRetry,
   onGoBack,
   hideBackButton,
+  secondaryAction,
+  isRetrying,
 }: {
+  icon?: React.ComponentType<SVGIconProps>
   title?: string
   message?: string
   onRetry?: () => unknown
   onGoBack?: () => unknown
   hideBackButton?: boolean
+  isRetrying?: boolean
+  secondaryAction?: {
+    label: string
+    accessibilityLabel?: string
+    onPress: () => unknown
+  }
 }) {
   const {t: l} = useLingui()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
-  const goBack = useGoBack(onGoBack)
 
   return (
     <Layout.Center
@@ -35,8 +46,11 @@ export function Error({
         t.atoms.border_contrast_low,
         {paddingTop: 175, paddingBottom: 110},
       ]}>
-      <View style={[a.w_full, a.align_center, a.gap_lg]}>
-        <Text style={[a.font_semi_bold, a.text_3xl]}>{title}</Text>
+      <View style={[a.w_full, a.align_center, a.gap_lg, a.px_md]}>
+        {Icon && <Icon size="4xl" fill={t.atoms.text_contrast_medium.color} />}
+        <Text style={[a.font_semi_bold, a.text_3xl, a.text_center]}>
+          {title}
+        </Text>
         <Text
           style={[
             a.text_md,
@@ -51,29 +65,61 @@ export function Error({
       <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
         {onRetry && (
           <Button
-            variant="solid"
             color="primary"
             label={l`Press to retry`}
             onPress={onRetry}
+            disabled={isRetrying}
             size="large">
             <ButtonText>
               <Trans>Retry</Trans>
             </ButtonText>
+            {isRetrying && <ButtonIcon icon={Loader} />}
           </Button>
         )}
-        {!hideBackButton && (
+        {!hideBackButton && secondaryAction ? (
           <Button
-            variant="solid"
             color={onRetry ? 'secondary' : 'primary'}
-            label={l`Return to previous page`}
-            onPress={goBack}
+            label={secondaryAction.accessibilityLabel ?? secondaryAction.label}
+            onPress={secondaryAction.onPress}
+            disabled={isRetrying}
             size="large">
-            <ButtonText>
-              <Trans>Go Back</Trans>
-            </ButtonText>
+            <ButtonText>{secondaryAction.label}</ButtonText>
           </Button>
-        )}
+        ) : !hideBackButton ? (
+          <GoBackButton
+            hasRetry={Boolean(onRetry)}
+            isRetrying={isRetrying}
+            onGoBack={onGoBack}
+          />
+        ) : null}
       </View>
     </Layout.Center>
   )
 }
+
+function GoBackButton({
+  hasRetry,
+  isRetrying,
+  onGoBack,
+}: {
+  hasRetry: boolean
+  isRetrying?: boolean
+  onGoBack?: () => unknown
+}) {
+  const {t: l} = useLingui()
+  const goBack = useGoBack(onGoBack)
+
+  return (
+    <Button
+      variant="solid"
+      color={hasRetry ? 'secondary' : 'primary'}
+      label={l`Return to previous page`}
+      onPress={goBack}
+      disabled={isRetrying}
+      size="large">
+      <ButtonText>
+        <Trans>Go Back</Trans>
+      </ButtonText>
+    </Button>
+  )
+}