fix(native-app): Multiple license fixes

apps/native/app/src/messages/en.ts

@@ -259,6 +259,13 @@ export const en: TranslatedMessages = {
     'At the moment it is not possible to add driving licenses to the phone.',
   'walletPass.moreInfo': 'More information',
   'walletPass.alertClose': 'Cancel',
+  'walletPass.errorCannotAddPasses':
+    'You cannot add passes. Please make sure you have Smartwallet installed on your device.',
+  'walletPass.errorAddingOrFetching': 'Failed to fetch or add pass.',
+  'walletPass.errorNotPossibleOnThisDevice':
+    'You cannot add passes on this device.',
+  'walletPass.errorNotConnectedNoBarcode':
+    'Not possible to scan barcode if the device is not connected to the internet.',
 
   // wallet passport
   'walletPassport.screenTitle': 'Passport',

apps/native/app/src/messages/is.ts

@@ -395,6 +395,14 @@ export const is = {
     'Í augnablikinu er ekki hægt að senda ökuskírteini í síma.',
   'walletPass.moreInfo': 'Nánari upplýsingar',
   'walletPass.alertClose': 'Loka',
+  'walletPass.errorCannotAddPasses':
+    'Þú getur ekki bætt við skírteini. Vinsamlegast vertu viss um að þú sért með Smartwallet appið sett upp á tækinu.',
+  'walletPass.errorAddingOrFetching':
+    'Tókst ekki að sækja eða bæta við skírteini.',
+  'walletPass.errorNotPossibleOnThisDevice':
+    'Þú getur ekki bætt við skírteinum á þetta tæki.',
+  'walletPass.errorNotConnectedNoBarcode':
+    'Ekki er hægt að skanna skírteini nema að tækið sé nettengt.',
 
   // wallet passport
   'walletPassport.screenTitle': 'Vegabréf',

apps/native/app/src/screens/document-detail/document-detail.tsx

@@ -102,6 +102,14 @@ const useHtmlStyles = () => {
       color: ${theme.color.blue400};
       text-decoration: none;
     }
+    svg {
+      max-width: 100%;
+      display: block;
+    }
+    img {
+      max-width: 100%;
+      display: block;
+    }
     </style>
     <meta name="viewport" content="width=device-width">`
 }

apps/native/app/src/screens/vehicles/vehicles-detail.tsx

@@ -14,6 +14,10 @@ const { getNavigationOptions, useNavigationOptions } =
     topBar: {
       visible: true,
     },
+    bottomTabs: {
+      visible: false,
+      drawBehind: true,
+    },
   }))
 
 export const VehicleDetailScreen: NavigationFunctionComponent<{

apps/native/app/src/screens/wallet-pass/wallet-pass.tsx

@@ -22,6 +22,7 @@ import {
 import { NavigationFunctionComponent } from 'react-native-navigation'
 import PassKit, { AddPassButton } from 'react-native-passkit-wallet'
 import styled, { useTheme } from 'styled-components/native'
+
 import { useFeatureFlag } from '../../contexts/feature-flag-provider'
 import {
   GenericLicenseType,
@@ -35,6 +36,7 @@ import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator
 import { isAndroid, isIos } from '../../utils/devices'
 import { screenWidth } from '../../utils/dimensions'
 import { FieldRender } from './components/field-render'
+import { useOfflineStore } from '../../stores/offline-store'
 
 const INFORMATION_BASE_TOP_SPACING = 70
 
@@ -77,6 +79,8 @@ const LicenseCardWrapper = styled(SafeAreaView)`
 const ButtonWrapper = styled(SafeAreaView)<{ floating?: boolean }>`
   margin-left: ${({ theme }) => theme.spacing[2]}px;
   margin-right: ${({ theme }) => theme.spacing[2]}px;
+  margin-bottom: ${({ theme, floating }) =>
+    floating ? 0 : theme.spacing[6]}px;
 
   ${({ floating, theme }) =>
     floating &&
@@ -143,6 +147,7 @@ export const WalletPassScreen: NavigationFunctionComponent<{
   const [addingToWallet, setAddingToWallet] = useState(false)
   const isBarcodeEnabled = useFeatureFlag('isBarcodeEnabled', false)
   const fadeInAnim = useRef(new Animated.Value(0)).current
+  const isConnected = useOfflineStore(({ isConnected }) => isConnected)
 
   const [generatePkPass] = useGeneratePkPassMutation()
   const res = useGetLicenseQuery({
@@ -167,6 +172,21 @@ export const WalletPassScreen: NavigationFunctionComponent<{
   const barcodeHeight = barcodeWidth / 3
   const updated = data?.fetch?.updated
 
+  const { loading } = res
+
+  const informationTopSpacing =
+    (allowLicenseBarcode && ((loading && !data?.barcode) || data?.barcode)) ||
+    (!isConnected && isBarcodeEnabled)
+      ? barcodeHeight + LICENSE_CARD_ROW_GAP
+      : 0
+
+  const [key, setKey] = useState(0)
+  useEffect(() => {
+    // Used to rerender ScrollView to have correct ContentInset based on barcode/no barcode
+    // Remove once barcodes are live
+    setKey((prev) => prev + 1)
+  }, [isBarcodeEnabled])
+
   const fadeIn = () => {
     Animated.timing(fadeInAnim, {
       toValue: 1,
@@ -226,11 +246,22 @@ export const WalletPassScreen: NavigationFunctionComponent<{
           addPass(pkPassContentUri, 'com.snjallveskid').catch(() => {
             if (!canAddPass) {
               Alert.alert(
-                'Villa',
-                'You cannot add passes. Please make sure you have Smartwallet installed on your device.',
+                intl.formatMessage({
+                  id: 'walletPass.errorTitle',
+                }),
+                intl.formatMessage({
+                  id: 'walletPass.errorCannotAddPasses',
+                }),
               )
             } else {
-              Alert.alert('Villa', 'Failed to fetch or add pass')
+              Alert.alert(
+                intl.formatMessage({
+                  id: 'walletPass.errorTitle',
+                }),
+                intl.formatMessage({
+                  id: 'walletPass.errorAddingOrFetching',
+                }),
+              )
             }
           })
           setAddingToWallet(false)
@@ -258,7 +289,12 @@ export const WalletPassScreen: NavigationFunctionComponent<{
       } catch (err) {
         if (!canAddPass) {
           Alert.alert(
-            'You cannot add passes. Please make sure you have Smartwallet installed on your device.',
+            intl.formatMessage({
+              id: 'walletPass.errorTitle',
+            }),
+            intl.formatMessage({
+              id: 'walletPass.errorCannotAddPasses',
+            }),
           )
         } else {
           Alert.alert(
@@ -269,7 +305,9 @@ export const WalletPassScreen: NavigationFunctionComponent<{
               ? intl.formatMessage({
                   id: 'walletPass.errorNotPossibleToAddDriverLicense',
                 })
-              : 'Failed to fetch or add pass',
+              : intl.formatMessage({
+                  id: 'walletPass.errorAddingOrFetching',
+                }),
             item?.license?.type === 'DriversLicense'
               ? [
                   {
@@ -294,7 +332,9 @@ export const WalletPassScreen: NavigationFunctionComponent<{
         console.error(err)
       }
     } else {
-      Alert.alert('You cannot add passes on this device')
+      Alert.alert(
+        intl.formatMessage({ id: 'walletPass.errorNotPossibleOnThisDevice' }),
+      )
     }
   }
 
@@ -315,13 +355,6 @@ export const WalletPassScreen: NavigationFunctionComponent<{
     }
   }
 
-  const { loading } = res
-
-  const informationTopSpacing =
-    allowLicenseBarcode && ((loading && !data?.barcode) || data?.barcode)
-      ? barcodeHeight + LICENSE_CARD_ROW_GAP
-      : 0
-
   const renderButtons = () => {
     if (isIos) {
       return (
@@ -378,13 +411,28 @@ export const WalletPassScreen: NavigationFunctionComponent<{
               height: barcodeHeight,
             },
           })}
+          showBarcodeOfflineMessage={!isConnected && isBarcodeEnabled}
         />
       </LicenseCardWrapper>
       <Information
-        contentInset={{ bottom: 162 }}
+        contentInset={{
+          bottom:
+            informationTopSpacing || (!isConnected && isBarcodeEnabled)
+              ? 162
+              : 0,
+        }}
+        key={key}
         topSpacing={informationTopSpacing}
       >
-        <SafeAreaView style={{ marginHorizontal: theme.spacing[2] }}>
+        <SafeAreaView
+          style={{
+            marginHorizontal: theme.spacing[2],
+            marginBottom:
+              pkPassAllowed && !isBarcodeEnabled && isIos
+                ? theme.spacing[15]
+                : theme.spacing[2],
+          }}
+        >
           {/* Show info alert if PCard or Ehic */}
           {(licenseType === GenericLicenseType.PCard ||
             licenseType === GenericLicenseType.Ehic) && (
@@ -439,7 +487,6 @@ export const WalletPassScreen: NavigationFunctionComponent<{
           </Animated.View>
         </ButtonWrapper>
       )}
-
       {addingToWallet && (
         <LoadingOverlay>
           <ActivityIndicator

apps/native/app/src/ui/lib/card/license-card.tsx

@@ -33,6 +33,8 @@ import LogoAOSH from '../../assets/card/vinnueftirlitid-logo.png'
 import BackgroundVinnuvelar from '../../assets/card/vinnuvelar-bg.png'
 import { dynamicColor, theme } from '../../utils'
 import { font } from '../../utils/font'
+import { Typography } from '../typography/typography'
+import { screenWidth } from '../../../utils/dimensions'
 
 export const LICENSE_CARD_ROW_GAP = theme.spacing.p2
 
@@ -111,6 +113,12 @@ const ValidationWrap = styled.View`
   margin-bottom: 4px;
 `
 
+const OfflineMessage = styled(Typography)`
+  opacity: 1;
+  padding: ${({ theme }) => theme.spacing[3]}px;
+  text-align: center;
+`
+
 const Validation = styled.Text<{ color: string }>`
   ${font({
     fontWeight: '600',
@@ -264,6 +272,7 @@ interface LicenseCardProps {
   logo?: ImageSourcePropType | string
   backgroundImage?: ImageSourcePropType
   backgroundColor?: string
+  showBarcodeOfflineMessage?: boolean
   barcode?: {
     value?: string | null
     loading?: boolean
@@ -281,6 +290,7 @@ export function LicenseCard({
   status,
   type,
   barcode,
+  showBarcodeOfflineMessage,
   ...props
 }: LicenseCardProps) {
   const theme = useTheme()
@@ -299,6 +309,10 @@ export function LicenseCard({
     status === 'VALID' &&
     !!((barcode && barcode?.value) || (barcode?.loading && !barcode?.value))
 
+  const barcodeWidth =
+    screenWidth - theme.spacing[4] * 2 - theme.spacing.smallGutter * 2
+  const barcodeHeight = barcodeWidth / 3
+
   return (
     <Host>
       <BackgroundImage
@@ -383,6 +397,19 @@ export function LicenseCard({
           )}
         </BarcodeWrapper>
       )}
+      {showBarcodeOfflineMessage && !showBarcodeView && (
+        <BarcodeWrapper minHeight={barcodeHeight}>
+          <BarcodeContainer
+            style={{ backgroundColor: 'rgba(255,255,255,0.4)' }}
+          >
+            <OfflineMessage variant="body3" style={{ opacity: 1 }}>
+              {intl.formatMessage({
+                id: 'walletPass.errorNotConnectedNoBarcode',
+              })}
+            </OfflineMessage>
+          </BarcodeContainer>
+        </BarcodeWrapper>
+      )}
     </Host>
   )
 }

apps/native/app/src/ui/lib/field/field-card.tsx

@@ -151,7 +151,9 @@ export function FieldCard(props: FieldCardProps) {
 
   return (
     <Host>
-      {props.title !== null || (props.title !== undefined && props.code) ? (
+      {(props.title !== null &&
+        !(props.title === undefined && props.code === undefined)) ||
+      (props.title !== undefined && props.code) ? (
         <Header hideBorder={!props.hasFields}>
           <HeaderTextBold rightSpacing={!props.hasFields}>
             {props.code}

apps/native/app/src/ui/lib/field/field.tsx

@@ -23,6 +23,7 @@ const Label = styled.Text`
 `
 
 const Value = styled.Text<{ size?: 'large' | 'small' }>`
+  margin-right: ${({ theme }) => theme.spacing[2]}px;
   ${font({
     fontWeight: '600',
     fontSize: (props) => (props.size === 'large' ? 20 : 16),