WIP Show modal if version not big enough

- Use storeurl as a build config
sos-lapsikyla · Oct 6, 2024 · 5682ae9 · 5682ae9
1 parent c62fc4e
commit 5682ae9
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -23,17 +23,18 @@ cp config.template.ios.json config.json
 
 You can edit the config file as suited:
 
-| Parameter          | Description                      |
-| --------------     | ---------------------------------|
-| `baseUrl`          | Ylitse API base URL              |
-| `loginUrl`         | Ylitse service login URL         |
-| `feedBackUrl`      | Feedback form URL                |
-| `termsUrl`         | Terms and conditions URL         |
-| `userGuideUrl`     | User's manual URL                |
-| `apuuUrl`          | Apuu-chat URL                    |
-| `sekasinUrl`       | Sekasin-chat URL                 |
-| `saferSpaceUrl`    | Principals of a safer space URL  |
-| `messageFetchDelay`| Delay between polling            |
+| Parameter          | Description                            |
+| -----------------  | ---------------------------------------|
+| `baseUrl`          | Ylitse API base URL                    |
+| `loginUrl`         | Ylitse service login URL               |
+| `feedBackUrl`      | Feedback form URL                      |
+| `termsUrl`         | Terms and conditions URL               |
+| `userGuideUrl`     | User's manual URL                      |
+| `apuuUrl`          | Apuu-chat URL                          |
+| `sekasinUrl`       | Sekasin-chat URL                       |
+| `saferSpaceUrl`    | Principals of a safer space URL        |
+| `storeUrl`         | App marketplace URL (build specific)   |
+| `messageFetchDelay`| Delay between polling                  |
 
 
 ### Running on iOS

diff --git a/appcenter-pre-build.sh b/appcenter-pre-build.sh
@@ -12,6 +12,7 @@ tee config.json > /dev/null <<EOF
     "userGuideUrl": "$YLITSE_USERGUIDEURL",
     "apuuUrl": "$YLITSE_APUUURL",
     "sekasinUrl": "$YLITSE_SEKASINURL",
+    "storeUrl": "$YLITSE_STOREURL",
     "saferSpaceUrl": "$YLITSE_SAFERSPACEURL",
     "messageFetchDelay": $YLITSE_MESSAGEFETCHDELAY
 }

diff --git a/config.template.android.json b/config.template.android.json
@@ -7,5 +7,6 @@
   "apuuUrl": "http://10.0.2.2:3000",
   "sekasinUrl": "http://10.0.2.2:3000",
   "saferSpaceUrl": "http://10.0.2.2:3000",
+  "storeUrl":"http://localhost:3000", 
   "messageFetchDelay": 2000
 }
diff --git a/config.template.ios.json b/config.template.ios.json
@@ -6,6 +6,7 @@
   "userGuideUrl": "http://localhost:3000",
   "apuuUrl": "http://localhost:3000",
   "sekasinUrl": "http://localhost:3000",
+  "storeUrl":"http://localhost:3000", 
   "saferSpaceUrl": "http://10.0.2.2:3000",
   "messageFetchDelay": 2000
 }
diff --git a/src/Screens/Main/Tabs.tsx b/src/Screens/Main/Tabs.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import * as RN from 'react-native';
 
 import * as ReactRedux from 'react-redux';
 import * as redux from 'redux';
 import { selectFirstQuestion } from '../../state/reducers/questions';
 
 import { selectIsVersionBigEnough } from '../../state/reducers/minimumVersion';
+import { storeUrl } from '../../api/config';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import * as actions from '../../state/actions';
 
@@ -21,6 +23,7 @@ import Settings, { SettingsRoute } from './Settings';
 import QuestionModal from '../components/QuestionModal';
 import { Answer } from '../../api/feedback';
 import { TabBar } from './TabBar';
+import Modal from '../components/Modal';
 
 export type TabsRoute = {
   'Main/Tabs': {
@@ -37,9 +40,10 @@ type Props = {} & StackScreenProps<StackRoutes, 'Main/Tabs'>;
 const Main = ({ navigation, route }: Props) => {
   const dispatch = ReactRedux.useDispatch<redux.Dispatch<actions.Action>>();
   const initialRouteName = route.params?.initial;
+  const appClient = getClient();
 
   const isAppVersionBigEnough = ReactRedux.useSelector(
-    selectIsVersionBigEnough(getClient()),
+    selectIsVersionBigEnough(appClient),
   );
 
   const handleRefetchData = () => {
@@ -61,6 +65,8 @@ const Main = ({ navigation, route }: Props) => {
     callback: handleRefetchData,
   });
 
+  const openStore = () => RN.Linking.openURL(storeUrl);
+
   React.useEffect(() => {
     navigation.dispatch(state => {
       const routes = state.routes.filter(r => !r.name.includes('Onboarding'));
@@ -77,8 +83,6 @@ const Main = ({ navigation, route }: Props) => {
     dispatch({ type: 'minimumVersion/get/start', payload: undefined });
   }, []);
 
-  console.log('is app version is big enough:', isAppVersionBigEnough);
-
   return (
     <>
       <Tab.Navigator
@@ -97,6 +101,15 @@ const Main = ({ navigation, route }: Props) => {
           onAnswer={handleAnswer}
         />
       )}
+      {isAppVersionBigEnough && (
+        <Modal
+          modalType="danger"
+          title="main.version.not.big.enough.title"
+          messageId="main.version.not.big.enough.text"
+          primaryButtonMessage="main.version.not.big.enough.button"
+          onPrimaryPress={openStore}
+        />
+      )}
     </>
   );
 };

diff --git a/src/Screens/components/Modal/index.tsx b/src/Screens/components/Modal/index.tsx
@@ -36,49 +36,44 @@ const Modal: React.FC<Props> = props => {
   } as const;
 
   return (
-    <RN.View style={styles.container}>
-      <RN.Modal animationType="fade" transparent={true} visible={true}>
-        <RN.View style={styles.background}>
-          <RN.View style={[props.style, styles.modalContainer]}>
-            <RN.View style={[styles.titleContainer, { backgroundColor }]}>
-              <RN.Image style={styles.image} source={icon} />
-              <Message id={props.title} style={styles.title} />
-            </RN.View>
+    <RN.Modal animationType="fade" transparent={true} visible={true}>
+      <RN.View style={styles.background}>
+        <RN.View style={[props.style, styles.modalContainer]}>
+          <RN.View style={[styles.titleContainer, { backgroundColor }]}>
+            <RN.Image style={styles.image} source={icon} />
+            <Message id={props.title} style={styles.title} />
+          </RN.View>
 
-            <RN.View style={styles.textContainer}>
-              <Message id={props.messageId} style={styles.text} />
-            </RN.View>
+          <RN.View style={styles.textContainer}>
+            <Message id={props.messageId} style={styles.text} />
+          </RN.View>
 
-            <RN.View style={[styles.buttonContainer, justifyButtons]}>
-              {props.onSecondaryPress && (
-                <Button
-                  onPress={props.onSecondaryPress}
-                  messageId={props.secondaryButtonMessage ?? 'meta.ok'}
-                  style={[styles.button, styles.secondaryButton]}
-                  emphasis="medium"
-                />
-              )}
-              {props.onPrimaryPress && (
-                <Button
-                  onPress={props.onPrimaryPress}
-                  messageId={
-                    props.primaryButtonMessage ?? 'components.remoteData.retry'
-                  }
-                  style={[styles.button, styles.primaryButton]}
-                />
-              )}
-            </RN.View>
+          <RN.View style={[styles.buttonContainer, justifyButtons]}>
+            {props.onSecondaryPress && (
+              <Button
+                onPress={props.onSecondaryPress}
+                messageId={props.secondaryButtonMessage ?? 'meta.ok'}
+                style={[styles.button, styles.secondaryButton]}
+                emphasis="medium"
+              />
+            )}
+            {props.onPrimaryPress && (
+              <Button
+                onPress={props.onPrimaryPress}
+                messageId={
+                  props.primaryButtonMessage ?? 'components.remoteData.retry'
+                }
+                style={[styles.button, styles.primaryButton]}
+              />
+            )}
           </RN.View>
         </RN.View>
-      </RN.Modal>
-    </RN.View>
+      </RN.View>
+    </RN.Modal>
   );
 };
 
 const styles = RN.StyleSheet.create({
-  container: {
-    flex: 1,
-  },
   background: {
     backgroundColor: colors.transparentBlack,
     position: 'absolute',

diff --git a/src/api/config.ts b/src/api/config.ts
@@ -9,3 +9,4 @@ export const apuuUrl = config.apuuUrl;
 export const sekasinUrl = config.sekasinUrl;
 export const saferSpaceUrl = config.saferSpaceUrl;
 export const messageFetchDelay = config.messageFetchDelay;
+export const storeUrl = config.storeUrl;
diff --git a/src/localization/en.ts b/src/localization/en.ts
@@ -159,6 +159,11 @@ export const messages: { [key in MessageId]: string } = {
     'SOS-Lapsikylä representative will contact you after the investigation.',
   'main.userreport.title': 'Report',
 
+  'main.version.not.big.enough.button': 'Update',
+  'main.version.not.big.enough.text':
+    'An update is necessary to continue using the app. Click below to download the latest version.',
+  'main.version.not.big.enough.title': 'Update required',
+
   'meta.back': 'Back',
   'meta.blank': ' ',
   'meta.cancel': 'Cancel',

diff --git a/src/localization/fi.ts b/src/localization/fi.ts
@@ -159,6 +159,11 @@ export const messages = {
     'SOS-Lapsikylän työntekijä selvittää tilanteen ja ottaa sinuun yhteyttä.',
   'main.userreport.title': 'Ilmianna',
 
+  'main.version.not.big.enough.button': 'Päivitä nyt',
+  'main.version.not.big.enough.text':
+    'Päivitys on tarpeen sovelluksen käytön jatkamiseksi. Napsauta alla olevaa painiketta ladataksesi uusimman version',
+  'main.version.not.big.enough.title': 'Päivitys saatavilla',
+
   'meta.back': 'Takaisin',
   'meta.blank': ' ',
   'meta.cancel': 'Peru',