feat: update tooling screens and add store update banner (#401)

tsyirvo · Nov 12, 2024 · fc2653a · fc2653a
1 parent a07cbe8
commit fc2653a
Show file tree

Hide file tree

Showing 15 changed files with 197 additions and 92 deletions.
diff --git a/src/app/blogPost/[id].tsx b/src/app/blogPost/[id].tsx
@@ -9,15 +9,17 @@ const BlogPostScreen = () => {
   const { t } = useTranslation();
 
   return (
-    <Screen>
+    <>
       <Stack.Screen
         options={{
           title: t('miscScreens.blogPost.screenTitle'),
         }}
       />
 
-      <BlogPostComponent id={id} />
-    </Screen>
+      <Screen>
+        <BlogPostComponent id={id} />
+      </Screen>
+    </>
   );
 };
 

diff --git a/src/app/dummyForm.tsx b/src/app/dummyForm.tsx
@@ -9,17 +9,19 @@ const DummyFormScreen = () => {
   const { t } = useTranslation();
 
   return (
-    <Screen isScrollable={false}>
+    <>
       <Stack.Screen
         options={{
           title: t('miscScreens.dummyForm.screenTitle'),
         }}
       />
 
-      <KeyboardAwareScrollView bottomOffset={50}>
-        <DummyFormComponent />
-      </KeyboardAwareScrollView>
-    </Screen>
+      <Screen isScrollable={false}>
+        <KeyboardAwareScrollView bottomOffset={50}>
+          <DummyFormComponent />
+        </KeyboardAwareScrollView>
+      </Screen>
+    </>
   );
 };
 

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -15,32 +15,34 @@ const HomeScreen = () => {
   };
 
   return (
-    <Screen p="zero">
+    <>
       <Stack.Screen
         options={{
           headerShown: false,
           title: t('homeScreen.navigation.screenTitle'),
         }}
       />
 
-      <Header />
+      <Screen p="zero">
+        <Header />
 
-      <Box pb="spacing_32" px="spacing_16">
-        <Text mt="spacing_32" variant="large">
-          {t('homeScreen.navigation.title')}
-        </Text>
+        <Box pb="spacing_32" px="spacing_16">
+          <Text mt="spacing_32" variant="large">
+            {t('homeScreen.navigation.title')}
+          </Text>
 
-        <Box mt="spacing_8">
-          <Button.Text testID="home-navigateCta" onPress={goToOtherScreen}>
-            {t('homeScreen.navigation.content')}
-          </Button.Text>
-        </Box>
+          <Box mt="spacing_8">
+            <Button.Text testID="home-navigateCta" onPress={goToOtherScreen}>
+              {t('homeScreen.navigation.content')}
+            </Button.Text>
+          </Box>
 
-        <Informations />
-      </Box>
+          <Informations />
+        </Box>
 
-      <Version />
-    </Screen>
+        <Version />
+      </Screen>
+    </>
   );
 };
 

diff --git a/src/app/other.tsx b/src/app/other.tsx
@@ -2,6 +2,8 @@ import { Stack, useRouter } from 'expo-router';
 import { useTranslation } from 'react-i18next';
 
 import { Notifications } from '$features/notifications';
+import { StoreUpdateAvailableBanner } from '$shared/components/StoreUpdateAvailableBanner';
+import { useIsNewStoreVersionAvailable } from '$shared/hooks';
 import { Button } from '$shared/uiKit/button';
 import { Box, Text } from '$shared/uiKit/primitives';
 import { Screen } from '$shared/uiKit/Screen';
@@ -10,6 +12,8 @@ const OtherScreen = () => {
   const router = useRouter();
   const { t } = useTranslation();
 
+  const { shouldShowBanner } = useIsNewStoreVersionAvailable();
+
   const goToBlogPost = () => {
     router.push('/blogPost/1');
   };
@@ -19,41 +23,49 @@ const OtherScreen = () => {
   };
 
   return (
-    <Screen testID="otherScreen-screen">
+    <>
       <Stack.Screen options={{ title: t('otherScreen.navigation.title') }} />
 
-      <Box borderBottomColor="bg_focus" borderBottomWidth={1} pb="spacing_16">
-        <Text testID="otherScreen-blogPost-title" variant="large">
-          {t('otherScreen.graphql.title')}
-        </Text>
-
-        <Box alignItems="flex-start" mt="spacing_8">
-          <Button.Text
-            testID="otherScreen-blogPost-navigateCta"
-            onPress={goToBlogPost}
-          >
-            {t('otherScreen.graphql.cta')}
-          </Button.Text>
+      <Screen testID="otherScreen-screen">
+        {shouldShowBanner ? (
+          <Box pb="spacing_16">
+            <StoreUpdateAvailableBanner />
+          </Box>
+        ) : null}
+
+        <Box borderBottomColor="bg_focus" borderBottomWidth={1} pb="spacing_16">
+          <Text testID="otherScreen-blogPost-title" variant="large">
+            {t('otherScreen.graphql.title')}
+          </Text>
+
+          <Box alignItems="flex-start" mt="spacing_8">
+            <Button.Text
+              testID="otherScreen-blogPost-navigateCta"
+              onPress={goToBlogPost}
+            >
+              {t('otherScreen.graphql.cta')}
+            </Button.Text>
+          </Box>
         </Box>
-      </Box>
-
-      <Box borderBottomColor="bg_focus" borderBottomWidth={1} py="spacing_16">
-        <Text variant="large">{t('otherScreen.form.title')}</Text>
-
-        <Box alignItems="flex-start" mt="spacing_8">
-          <Button.Text
-            testID="otherScreen-dummyForm-navigateCta"
-            onPress={goToDummyForm}
-          >
-            {t('otherScreen.form.cta')}
-          </Button.Text>
+
+        <Box borderBottomColor="bg_focus" borderBottomWidth={1} py="spacing_16">
+          <Text variant="large">{t('otherScreen.form.title')}</Text>
+
+          <Box alignItems="flex-start" mt="spacing_8">
+            <Button.Text
+              testID="otherScreen-dummyForm-navigateCta"
+              onPress={goToDummyForm}
+            >
+              {t('otherScreen.form.cta')}
+            </Button.Text>
+          </Box>
         </Box>
-      </Box>
 
-      <Box borderBottomColor="bg_focus" borderBottomWidth={1} py="spacing_16">
-        <Notifications />
-      </Box>
-    </Screen>
+        <Box borderBottomColor="bg_focus" borderBottomWidth={1} py="spacing_16">
+          <Notifications />
+        </Box>
+      </Screen>
+    </>
   );
 };
 

diff --git a/src/core/featureFlags/defaultFlags.ts b/src/core/featureFlags/defaultFlags.ts
@@ -7,4 +7,5 @@ export const defaultFlags: Record<
   'my-custom-flag': { enabled: false },
   'is-maintenance-mode': { enabled: false },
   'last-supported-app-version': { enabled: true, value: '2.0.0' },
+  'latest-released-app-version': { enabled: true, value: '2.1.0' },
 };
diff --git a/src/core/featureFlags/featureFlags.types.ts b/src/core/featureFlags/featureFlags.types.ts
@@ -3,7 +3,8 @@ export type FlagsmithValue<T = string | number | boolean | null> = T;
 export type FlagOptions =
   | 'my-custom-flag'
   | 'is-maintenance-mode'
-  | 'last-supported-app-version';
+  | 'last-supported-app-version'
+  | 'latest-released-app-version';
 
 export type TraitOptions =
   | 'user-trait-1'

diff --git a/src/core/i18n/resources/en/messages.ts b/src/core/i18n/resources/en/messages.ts
@@ -39,6 +39,10 @@ export const messages = {
         'Please go update the application to access the latest features',
       title: 'Your app is outdated',
     },
+    newStoreVersion: {
+      title: 'An update is available on the stores',
+      cta: 'Go update now',
+    },
     blogPost: {
       screenTitle: 'Blog post',
       title: 'Blog post fetched with GraphQL',

diff --git a/src/core/i18n/resources/fr/messages.ts b/src/core/i18n/resources/fr/messages.ts
@@ -41,6 +41,10 @@ export const messages: MessagesTypes = {
         'Merci de la mettre à jour pour utiliser les dernières fonctionnalités',
       title: 'Votre app est trop vieille',
     },
+    newStoreVersion: {
+      title: 'Une mise à jour est disponible sur les stores',
+      cta: 'Mettre à jour maintenant',
+    },
     blogPost: {
       screenTitle: 'Article de blog',
       title: 'Article récupéré avec GraphQL',

diff --git a/src/shared/components/AppUpdateNeeded.tsx b/src/shared/components/AppUpdateNeeded.tsx
@@ -11,7 +11,7 @@ import { Button } from '$shared/uiKit/button';
 import { Box, Text } from '$shared/uiKit/primitives';
 
 export const AppUpdateNeeded = () => {
-  const [isAppUnsupported, setIsAppUnsupported] = useState(false);
+  const [isAppSupported, setIsAppSupported] = useState(true);
 
   const { t } = useTranslation();
 
@@ -25,12 +25,9 @@ export const AppUpdateNeeded = () => {
       return;
     }
 
-    if (typeof config.version === 'string') {
-      const isSupported =
-        semverGte(config.version, lastSupportedVersion) || false;
+    const isSupported = semverGte(config.version, lastSupportedVersion);
 
-      setIsAppUnsupported(!isSupported);
-    }
+    setIsAppSupported(isSupported);
   });
 
   const onPress = async () => {
@@ -46,19 +43,17 @@ export const AppUpdateNeeded = () => {
     } catch (error) {
       Logger.error({
         error,
-        message: 'Failed to open app store',
-        level: 'warning',
+        message: 'Failed to open app store to update the app',
       });
     }
   };
 
-  if (!isAppUnsupported) {
-    return null;
-  }
+  if (isAppSupported) return null;
 
   return (
     <Box
       alignItems="center"
+      bg="bg"
       height="100%"
       justifyContent="center"
       px="spacing_32"

diff --git a/src/shared/components/FullscreenErrorBoundary.tsx b/src/shared/components/FullscreenErrorBoundary.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { ErrorMonitoring } from '$core/monitoring';
 import { Button } from '$shared/uiKit/button';
 import { Box, Text } from '$shared/uiKit/primitives';
-import { SafeView } from '$shared/uiKit/SafeView';
 
 const FullscreenErrorBoundary = () => {
   const { t } = useTranslation();
@@ -15,29 +14,29 @@ const FullscreenErrorBoundary = () => {
     });
 
   return (
-    <SafeView>
-      <Box
-        alignItems="center"
-        alignSelf="center"
-        flex={1}
-        justifyContent="center"
-        width="80%"
-      >
-        <Text mb="spacing_8" variant="large">
-          {t('miscScreens.errorBoundary.title')}
-        </Text>
+    <Box
+      alignItems="center"
+      alignSelf="center"
+      bg="bg"
+      height="100%"
+      justifyContent="center"
+      px="spacing_24"
+      width="100%"
+    >
+      <Text mb="spacing_8" variant="large">
+        {t('miscScreens.errorBoundary.title')}
+      </Text>
 
-        <Text textAlign="center" variant="medium">
-          {t('miscScreens.errorBoundary.description')}
-        </Text>
+      <Text textAlign="center" variant="medium">
+        {t('miscScreens.errorBoundary.description')}
+      </Text>
 
-        <Box mt="spacing_32">
-          <Button.Text onPress={reloadApp}>
-            {t('miscScreens.errorBoundary.cta')}
-          </Button.Text>
-        </Box>
+      <Box mt="spacing_32">
+        <Button.Text onPress={reloadApp}>
+          {t('miscScreens.errorBoundary.cta')}
+        </Button.Text>
       </Box>
-    </SafeView>
+    </Box>
   );
 };
 

diff --git a/src/shared/components/MaintenanceMode.tsx b/src/shared/components/MaintenanceMode.tsx
@@ -11,13 +11,12 @@ export const MaintenanceMode = () => {
     'is-maintenance-mode',
   );
 
-  if (!isMaintenanceModeEnabled) {
-    return null;
-  }
+  if (!isMaintenanceModeEnabled) return null;
 
   return (
     <Box
       alignItems="center"
+      bg="bg"
       height="100%"
       justifyContent="center"
       px="spacing_32"