feat: change onboarding (#172)

* up * chore(version): ✨ minor `1.27.2` -> `1.28.0`
SocialGouv · Jun 22, 2022 · f4d992e · f4d992e
1 parent c1c5584
commit f4d992e
Show file tree

Hide file tree

Showing 13 changed files with 206 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![Mobile version](https://img.shields.io/badge/mobile%20app%20version-1.27.2-blue)
+![Mobile version](https://img.shields.io/badge/mobile%20app%20version-1.28.0-blue)
 
 # Mon Suivi Psy
 

diff --git a/app/android/app/build.gradle b/app/android/app/build.gradle
@@ -140,8 +140,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled true
-        versionCode 115
-        versionName "1.27.2"
+        versionCode 116
+        versionName "1.28.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
         if (isNewArchitectureEnabled()) {
             // We configure the NDK build only if you decide to opt-in for the New Architecture.

diff --git a/app/app.json b/app/app.json
@@ -2,7 +2,7 @@
   "name": "monsuivipsy",
   "displayName": "Mon Suivi Psy",
   "version": {
-    "buildNumber": 115,
-    "buildName": "1.27.2"
+    "buildNumber": 116,
+    "buildName": "1.28.0"
   }
 }
diff --git a/app/ios/monsuivipsy.xcodeproj/project.pbxproj b/app/ios/monsuivipsy.xcodeproj/project.pbxproj
@@ -708,13 +708,13 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 115;
+				CURRENT_PROJECT_VERSION = 116;
 				DEVELOPMENT_TEAM = 76GBKHVK25;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = monsuivipsy/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.27.2;
+				MARKETING_VERSION = 1.28.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -737,12 +737,12 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 115;
+				CURRENT_PROJECT_VERSION = 116;
 				DEVELOPMENT_TEAM = 76GBKHVK25;
 				INFOPLIST_FILE = monsuivipsy/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.27.2;
+				MARKETING_VERSION = 1.28.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monsuivipsy",
-  "version": "1.27.2",
+  "version": "1.28.0",
   "private": true,
   "scripts": {
     "android": "react-native run-android",

diff --git a/app/src/scenes/onboarding/onboardingSymptoms/AjoutIndicateurPerso.js b/app/src/scenes/onboarding/onboardingSymptoms/AjoutIndicateurPerso.js
@@ -28,7 +28,7 @@ const AjoutIndicateurPerso = ({
           <View style={styles.buttonPlusContainer}>
             <Plus opacity={1} color="white" width={19} height={19} />
           </View>
-          <Text style={styles.textAjouter}>Créer un élément personnalisé</Text>
+          <Text style={styles.textAjouter}>Créer un indicateur personnalisé</Text>
         </TouchableOpacity>
       ) : null}
       {isOpen ? (

diff --git a/app/src/scenes/onboarding/onboardingSymptoms/OnboardingElements.js b/app/src/scenes/onboarding/onboardingSymptoms/OnboardingElements.js
@@ -0,0 +1,95 @@
+import React from "react";
+import { TouchableOpacity, StyleSheet, View } from "react-native";
+import Text from "../../../components/MyText";
+import RoundButtonIcon from "../../../components/RoundButtonIcon";
+import AjoutIndicateurPerso from "./AjoutIndicateurPerso";
+
+const CategorieElements = ({
+  title,
+  options,
+  onClick,
+  indicateursSelection,
+  handleAddNewSymptom,
+  enableAddNewElement,
+}) => {
+  const [listeComplementaire, setListeComplementaire] = React.useState([]);
+  return (
+    <>
+      <View style={stylesA.listeContainer}>
+        {(options || []).concat(listeComplementaire).map((option) => {
+          const indicateurSelectionne = indicateursSelection[option.id];
+          return (
+            <TouchableOpacity
+              key={`${title}_${option.id}`}
+              style={[stylesA.choixContainer, indicateurSelectionne ? stylesA.choixContainerSelected : null]}
+              onPress={() => onClick({ id: option.id, value: !indicateurSelectionne })}
+            >
+              <Text style={stylesA.choixLabel}>{option.label}</Text>
+              {indicateurSelectionne ? (
+                <View>
+                  <RoundButtonIcon
+                    backgroundColor="#5DEE5A"
+                    iconColor="#fff"
+                    borderWidth={0.5}
+                    borderColor="#5DEE5A"
+                    icon="validate"
+                    visible={true}
+                    medium
+                  />
+                </View>
+              ) : (
+                <View>
+                  <RoundButtonIcon
+                    backgroundColor="#f4f4f4"
+                    iconColor="#e1e1e1"
+                    borderWidth={0.5}
+                    borderColor="#e1e1e1"
+                    icon="validate"
+                    visible={true}
+                    medium
+                  />
+                </View>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+        {enableAddNewElement ? (
+          <AjoutIndicateurPerso
+            onChange={(v) => {
+              if (Object.keys(indicateursSelection).find((e) => e === v)) return;
+              setListeComplementaire((prev) => [...prev, { id: v, label: v }]);
+              handleAddNewSymptom(v);
+            }}
+          />
+        ) : null}
+      </View>
+    </>
+  );
+};
+
+const stylesA = StyleSheet.create({
+  choixContainer: {
+    backgroundColor: "#fff",
+    borderColor: "#dadada",
+    borderBottomWidth: 0.5,
+    paddingHorizontal: 10,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: 44, // standard
+  },
+  choixContainerSelected: {
+    backgroundColor: "#EFFDEF",
+  },
+  listeContainer: {
+    marginBottom: 10,
+  },
+  choixLabel: {
+    fontSize: 15,
+    color: "#000",
+    flex: 1,
+  },
+});
+
+export default CategorieElements;
diff --git a/app/src/scenes/onboarding/onboardingSymptoms/index.js b/app/src/scenes/onboarding/onboardingSymptoms/index.js
@@ -9,9 +9,13 @@ import BackButton from "../../../components/BackButton";
 import Button from "../../../components/Button";
 import SurveyMenu from "../../../../assets/svg/SurveyMenu";
 import { ONBOARDING_STEPS } from "../../../utils/constants";
-import { INDICATEURS_LISTE_PAR_CATEGORIE } from "../../../utils/liste_indicateurs";
+import {
+  INDICATEURS_LISTE_PAR_CATEGORIE,
+  INDICATEURS_LISTE_ONBOARDING,
+} from "../../../utils/liste_indicateurs";
 import TextTag from "../../../components/TextTag";
 import CategorieElements from "./CategorieElements";
+import OnboardingElements from "./OnboardingElements";
 
 const SymptomScreen = ({ navigation, route }) => {
   const [indicateursSelection, setIndicateursSelection] = useState({});
@@ -73,22 +77,24 @@ const SymptomScreen = ({ navigation, route }) => {
       >
         <View style={styles.titleContainer}>
           <SurveyMenu style={styles.image} width={30} height={30} />
-          <Text style={styles.title}>Que souhaitez-vous suivre quotidiennement ?</Text>
+          <Text style={styles.title}>Que voulez-vous suivre dans votre questionnaire quotidien ?</Text>
         </View>
-        {Object.keys(INDICATEURS_LISTE_PAR_CATEGORIE).map((categorie) => {
-          const indicateurs = INDICATEURS_LISTE_PAR_CATEGORIE[categorie];
-          return (
-            <CategorieElements
-              key={categorie}
-              title={categorie}
-              options={indicateurs.map((e) => ({ id: e, label: e }))}
-              onClick={({ id, value }) => setToggleIndicateur({ indicateur: id, valeur: value })}
-              indicateursSelection={indicateursSelection}
-              handleAddNewSymptom={handleAddNewSymptom}
-              enableAddNewElement
-            />
-          );
-        })}
+        <View style={styles.titleContainer}>
+          <Text style={styles.sousTitre}>
+            Choisissez ou <Text style={[styles.sousTitre, styles.bold]}>créez vous-même</Text> les indicateurs
+            qui vous semblent <Text style={[styles.sousTitre, styles.bold]}>pertinents</Text> pour évaluer
+            votre état de santé mentale et ce qui influe dessus
+          </Text>
+        </View>
+        <OnboardingElements
+          key={"test"}
+          title={"test"}
+          options={INDICATEURS_LISTE_ONBOARDING.map((e) => ({ id: e, label: e }))}
+          onClick={({ id, value }) => setToggleIndicateur({ indicateur: id, valeur: value })}
+          indicateursSelection={indicateursSelection}
+          handleAddNewSymptom={handleAddNewSymptom}
+          enableAddNewElement
+        />
         {!getSelectionVide() ? (
           <>
             <View style={styles.divider} />
@@ -112,11 +118,17 @@ const SymptomScreen = ({ navigation, route }) => {
         ) : null}
         {getSelectionVide() ? (
           <View style={styles.buttonWrapperError}>
-            <Text style={[styles.alert, styles.spaceabove]}>Ajouter ou sélectionner au moins 1 élément</Text>
+            <Text style={[styles.alert, styles.spaceabove, styles.spacebottom]}>
+              Ajouter ou sélectionner au moins 1 indicateur
+            </Text>
           </View>
         ) : (
-          <Text style={[styles.h3, styles.spaceabove]}>
-            Vous pourrez modifier à tout moment ce que vous suivez via le menu "Réglages" de l'application
+          <Text style={[styles.h3, styles.spaceabove, styles.spacebottom]}>
+            Sélectionnez{" "}
+            <Text style={[styles.h3, styles.spaceabove, styles.medium]}>moins de 10 indicateurs</Text> pour
+            conserver un questionnaire rapide à remplir. Vous pourrez le faire évoluer à tout moment dans les{" "}
+            <Text style={[styles.h3, styles.spaceabove, styles.medium]}>paramètres</Text> de l’application, où
+            vous trouverez encore plus d’exemples !
           </Text>
         )}
         <View style={styles.buttonWrapper}>
@@ -201,12 +213,34 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
+  titleTextContainer: {
+    flex: 1,
+    borderColor: "red",
+    borderWidth: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
   title: {
     flex: 1,
     color: colors.BLUE,
     fontSize: 22,
     fontWeight: "700",
   },
+  sousTitre: {
+    paddingVertical: 15,
+    textAlign: "center",
+    flex: 1,
+    color: colors.BLUE,
+    fontSize: 15,
+    fontWeight: "400",
+  },
+  bold: {
+    fontWeight: "700",
+  },
+  medium: {
+    fontWeight: "500",
+  },
   h3: {
     color: "#181818",
     fontSize: 14,
@@ -217,6 +251,9 @@ const styles = StyleSheet.create({
   spaceabove: {
     marginTop: 15,
   },
+  spacebottom: {
+    marginBottom: 15,
+  },
   alert: {
     color: "red",
     fontSize: 13,

diff --git a/app/src/scenes/onboarding/onboardingSymptomsCustom/index.js b/app/src/scenes/onboarding/onboardingSymptomsCustom/index.js
@@ -107,7 +107,7 @@ const CustomSymptomScreen = ({ navigation, route, settings = false }) => {
           <SurveyMenu style={styles.image} width={30} height={30} />
           <Text style={styles.title}>
             <Text style={styles.bold}>Personnalisez votre questionnaire</Text> en ajoutant vos{" "}
-            <Text style={styles.bold}>propres éléments</Text>
+            <Text style={styles.bold}>propres indicateurs</Text>
           </Text>
         </View>
         <Text style={styles.subtitle}>Vous suivez actuellement :</Text>
@@ -164,7 +164,7 @@ const OldCriteria = ({ chosenCategories, addSymptom }) => {
   return (
     <View>
       <TouchableOpacity style={styles.flexRow} onPress={() => setShowOldCriteria((prev) => !prev)}>
-        <Text style={[styles.subtitle, styles.underline]}>Réactiver vos anciens éléments</Text>
+        <Text style={[styles.subtitle, styles.underline]}>Réactiver vos anciens indicateurs</Text>
         {showOldCriteria ? (
           <Icon icon="ChevronUpSvg" width={20} height={20} color={colors.BLUE} />
         ) : (

diff --git a/app/src/scenes/survey/Question.js b/app/src/scenes/survey/Question.js
@@ -74,7 +74,7 @@ const Question = ({ question, explanation, onPress, selected, isLast, onChangeUs
             onChangeUserComment({ key: question.id, userComment: v });
           }}
           value={text}
-          placeholder="Ajouter une note sur cet élément"
+          placeholder="Ajouter une note sur cet indicateur"
           style={styles.textArea}
           textAlignVertical={"top"}
           // onFocus={() => setInputFocused(true)}

diff --git a/app/src/scenes/survey/daySurvey.js b/app/src/scenes/survey/daySurvey.js
@@ -174,7 +174,7 @@ const DaySurvey = ({ navigation, route }) => {
             }}
           >
             <View style={styles.linkContainer}>
-              <Text style={styles.link}>Ajouter ou retirer des éléments de mon questionnaire</Text>
+              <Text style={styles.link}>Ajouter ou retirer des indicateurs de mon questionnaire</Text>
               <View style={styles.linkButtonContainer}>
                 <ArrowUpSvg color="#fff" />
               </View>

diff --git a/app/src/utils/liste_indicateurs.js b/app/src/utils/liste_indicateurs.js
@@ -7,6 +7,19 @@ import localStorage from "../utils/localStorage";
 //   return tempList;
 // };
 
+export const INDICATEURS_LISTE_ONBOARDING = [
+  "Humeur générale",
+  "Anxiété",
+  "Colère",
+  "Idées noires",
+  "Je suis fier(e) de moi",
+  "Confiance en soi",
+  "Qualité sommeil",
+  "Durée sommeil",
+  "Je fais une activité plaisir",
+  "Faire mes tâches ménagères",
+];
+
 export const INDICATEURS_LISTE_PAR_CATEGORIE = {
   "Les plus courants": [
     "Humeur générale",