feat: refacto onboarding (#100)

* add step0 in onboardings

* feat(onbarding): nouvel écran choix de famille

* up ressenti

* screen onboarding drugs

* Update reminder.js

src/navigation/router.js

@@ -15,6 +15,7 @@ import Onboarding from '../scenes/onboarding';
 import Supported from '../scenes/onboarding/onboardingSupported';
 import OnboardingSymptoms from '../scenes/onboarding/onboardingSymptoms';
 import OnboardingDrugs from '../scenes/onboarding/onboardingDrugs';
+import OnboardingDrugsInformation from '../scenes/onboarding/onboardingDrugs/drugs-information';
 import OnboardingDrugsList from '../scenes/onboarding/onboardingDrugs/list';
 import CGU from '../scenes/legal/cgu-screen';
 import Privacy from '../scenes/legal/privacy-screen';
@@ -102,6 +103,10 @@ class Router extends React.Component {
             component={OnboardingSymptoms}
           />
           <Stack.Screen name="onboarding-drugs" component={OnboardingDrugs} />
+          <Stack.Screen
+            name="onboarding-drugs-information"
+            component={OnboardingDrugsInformation}
+          />
           <Stack.Screen
             name="onboarding-drugs-list"
             component={OnboardingDrugsList}

src/scenes/onboarding/onboarding.js

@@ -16,7 +16,7 @@ import logEvents from '../../services/logEvents';
 import Button from '../../components/Button';
 import ActiveDot from './ActiveDot';
 import BackButton from '../../components/BackButton';
-import {Screen1, Screen2, Screen3} from './screens';
+import {Screen0, Screen1, Screen2, Screen3} from './screens';
 
 const Onboarding = ({navigation}) => {
   const [isCguChecked, setIsCguChecked] = useState(false);
@@ -65,13 +65,14 @@ const Onboarding = ({navigation}) => {
           ref={swiperRef}
           // showsButtons
           activeDot={<ActiveDot />}>
+          <Screen0 />
           <Screen1 />
           <Screen2 />
           <Screen3 />
         </Swiper>
       </ScrollView>
       <View style={styles.CTAButtonContainer}>
-        {currentIndex === 2 ? (
+        {currentIndex === 3 ? (
           firstTime ? (
             <>
               <View style={styles.cgu}>

src/scenes/onboarding/onboardingDrugs/drugs-information.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  Image,
+  Linking,
+} from 'react-native';
+import Text from '../../../components/MyText';
+import {colors} from '../../../utils/colors';
+import BackButton from '../../../components/BackButton';
+import logEvents from '../../../services/logEvents';
+
+const OnboardingDrugsInformation = ({navigation}) => {
+  return (
+    <SafeAreaView style={styles.safe}>
+      <View style={styles.headerContainer}>
+        <BackButton onPress={navigation.goBack} />
+        <Image
+          style={styles.image}
+          source={require('../../../../assets/imgs/logo2.png')}
+        />
+      </View>
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
+        <View style={styles.paragraph}>
+          <Text style={styles.standardText}>
+            Les noms des médicaments et les posologies ne sont donnés qu'à titre
+            indicatif pour vous aider dans le suivi de votre traitement
+            médicamenteux. Il convient néanmoins de toujours se référer à la
+            prescription médicale vous concernant et à votre médecin référent
+            pour tout ce qui a trait à votre traitement médicamenteux en
+            particulier et à votre suivi en général.
+          </Text>
+        </View>
+        <View style={styles.paragraph}>
+          <Text style={styles.standardText}>
+            Voir plus d'informations sur les traitements médicamenteux :{' '}
+          </Text>
+          <TouchableOpacity
+            onPress={() => {
+              logEvents.logInfoClick('reseau_pic');
+              Linking.openURL(
+                'http://www.reseau-pic.info/?dest=fiches/nom.php',
+              );
+            }}>
+            <Text style={styles.link}>reseau-pic.com</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  paragraph: {
+    padding: 20,
+    fontSize: 18,
+    marginVertical: 15,
+  },
+  headerContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingRight: 20,
+  },
+  image: {
+    height: 50,
+    width: 50,
+  },
+  safe: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  scrollContainer: {
+    paddingBottom: 80,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  standardText: {
+    fontSize: 18,
+    color: colors.DARK_BLUE,
+    textAlign: 'center',
+  },
+  link: {
+    color: colors.LIGHT_BLUE,
+    textDecorationLine: 'underline',
+    fontSize: 18,
+    textAlign: 'center',
+  },
+});
+
+export default OnboardingDrugsInformation;

src/scenes/onboarding/onboardingDrugs/index.js

@@ -9,24 +9,19 @@ import {
 import Text from '../../../components/MyText';
 import {colors} from '../../../utils/colors';
 import {DiaryDataContext} from '../../../context/diaryData';
-import Button from '../../../components/Button';
 import BackButton from '../../../components/BackButton';
 import localStorage from '../../../utils/localStorage';
 import NoData from './no-data';
 import DrugItem from './drug-item';
 import {getDrugListWithLocalStorage} from '../../../utils/drugs-list';
-import Icon from '../../../components/Icon';
 import logEvents from '../../../services/logEvents';
-import DrugInformations from './drug-information';
-import {alertNoDataYesterday} from '../../survey/survey-data';
 import Logo from '../../../../assets/svg/drugs';
 import {ONBOARDING_STEPS} from '../../../utils/constants';
 
 const Drugs = ({navigation, route}) => {
   const [diaryData, setDiaryData] = useContext(DiaryDataContext);
   const [medicalTreatment, setMedicalTreatment] = useState();
   const [posology, setPosology] = useState([]);
-  const [showInfos, setShowInfos] = useState();
   const [listDrugs, setListDrugs] = useState();
 
   useEffect(() => {
@@ -121,11 +116,19 @@ const Drugs = ({navigation, route}) => {
   };
 
   const render = () => {
-    if (!medicalTreatment) {
+    if (!medicalTreatment || !medicalTreatment?.length) {
       return <NoData navigation={navigation} route={route} />;
     }
     return (
       <View>
+        <TouchableOpacity
+          onPress={() =>
+            navigation.navigate('onboarding-drugs-information', {
+              onboarding: true,
+            })
+          }>
+          <Text style={styles.link}>Informations sur les traitements</Text>
+        </TouchableOpacity>
         {medicalTreatment.map((e, i) => (
           <DrugItem
             key={i}
@@ -149,13 +152,8 @@ const Drugs = ({navigation, route}) => {
     );
   };
 
-  const toggleInfos = () => {
-    setShowInfos(!showInfos);
-  };
-
   return (
     <SafeAreaView style={styles.safe}>
-      <DrugInformations visible={showInfos} onClose={toggleInfos} />
       <BackButton onPress={navigation.goBack} />
       <ScrollView
         style={styles.scrollView}
@@ -166,16 +164,9 @@ const Drugs = ({navigation, route}) => {
             <Text style={styles.title}>
               {medicalTreatment?.length
                 ? 'Voici la liste des traitements que vous allez suivre :'
-                : 'Prenez-vous un traitement médicamenteux ?'}
+                : 'Quel traitement est-ce que je souhaite suivre ?'}
             </Text>
           </View>
-          <Icon
-            icon="InfoSvg"
-            color={colors.DARK_BLUE}
-            width={30}
-            height={30}
-            onPress={toggleInfos}
-          />
         </View>
         {render()}
       </ScrollView>
@@ -184,6 +175,14 @@ const Drugs = ({navigation, route}) => {
 };
 
 const styles = StyleSheet.create({
+  link: {
+    color: '#181818',
+    textDecorationLine: 'underline',
+    fontSize: 14,
+    marginBottom: 20,
+    fontWeight: '300',
+    textAlign: 'center',
+  },
   image: {
     color: colors.BLUE,
     height: 40,
@@ -212,7 +211,7 @@ const styles = StyleSheet.create({
     fontSize: 19,
   },
   scrollView: {
-    padding: 10,
+    paddingHorizontal: 20,
     backgroundColor: 'white',
   },
   scrollContainer: {
@@ -223,7 +222,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginBottom: 30,
+    marginBottom: 20,
   },
   safe: {
     flex: 1,