feat: adding precision field on other response selection in referent … (

#419) * feat: adding precision field on other response selection in referent intention measuremen * feat: referent intention css positionning
SocialGouv · Jul 22, 2022 · 2b1f9bf · 2b1f9bf
1 parent ca000c8
commit 2b1f9bf
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 76 deletions.
diff --git a/back-strapi/api/referent-survey/models/referent-survey.settings.json b/back-strapi/api/referent-survey/models/referent-survey.settings.json
@@ -16,10 +16,13 @@
       "type": "boolean"
     },
     "detailed_informations": {
-      "type": "text"
+      "type": "string"
     },
     "utilisateurs_mobile": {
       "model": "utilisateurs-mobile"
+    },
+    "other_informations": {
+      "type": "text"
     }
   }
 }
diff --git a/tumeplayMobile/src/components/Orders/ReferentIntention.js b/tumeplayMobile/src/components/Orders/ReferentIntention.js
@@ -1,4 +1,11 @@
-import {View, Image, StyleSheet, Alert} from 'react-native';
+import {
+  View,
+  Image,
+  StyleSheet,
+  Alert,
+  TextInput,
+  ScrollView,
+} from 'react-native';
 import Text from '../../components/Text';
 import React, {useState, useEffect} from 'react';
 import warning from '../../assets/Exclamation.png';
@@ -20,6 +27,7 @@ const ReferentIntention = props => {
   const {user} = props;
   const [selectedAnswer, setSelectedAnswer] = useState(null);
   const [precisedAnswer, setPrecisedAnswer] = useState(null);
+  const [otherInformations, setOtherInformations] = useState(null);
   const [isDone, setIsDone] = useState(false);
   const [answers] = useState([
     {
@@ -36,7 +44,7 @@ const ReferentIntention = props => {
 
   const [create_referent_intention] = useMutation(CREATE_REFERENT_INTENTION, {
     onError(error) {
-      console.log('error on signup', error);
+      console.log('error on intention creation', error);
     },
     onCompleted() {
       setIsDone(true);
@@ -104,8 +112,8 @@ const ReferentIntention = props => {
       key: 3,
     },
     {
-      label: 'Autre (Précise la raison en quelques mots)',
-      value: 'Autre (Précise la raison en quelques mots)',
+      label: 'Autre (Précise la raison)',
+      value: 'Autre (Précise la raison)',
       key: 4,
     },
   ];
@@ -124,6 +132,7 @@ const ReferentIntention = props => {
         variables: {
           is_interested: selectedAnswer === 1 ? true : false,
           detailed_informations: precisedAnswer.toString(),
+          other_informations: otherInformations.toString(),
           utilisateurs_mobile: user.id,
         },
       });
@@ -133,66 +142,81 @@ const ReferentIntention = props => {
   };
 
   return (
-    <View style={styles.container}>
-      <Image source={warning} style={styles.image} />
-      <Text
-        style={[
-          styles.title,
-          {alignSelf: 'center', textAlign: 'center', paddingHorizontal: 35},
-        ]}>
-        La livraison de kit chez un référent{' '}
-        <Text style={styles.bold}>n'est pas encore disponible.</Text>
-      </Text>
-      <View style={styles.middleContainer}>
-        <Image source={hand} style={styles.imageHand} />
-        <Text style={styles.description}>
-          Un.e référent.e t'accompagne pour répondre à tes questions autour de
-          la sexualité :
-        </Text>
-      </View>
-      <View style={{paddingLeft: 10, width: '90%', marginBottom: 10}}>
-        <RenderHTML
-          source={htmlText}
-          contentWidth={config.deviceWidth * 0.8}
-          baseStyle={styles.description}
-        />
-      </View>
-      {!isDone && (
-        <Text style={[styles.title, styles.bold]}>
-          Serais-tu intéressé.e pour récupérer ton kit auprès d'un référent.e ?
+    <View style={{flex: 1}}>
+      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+        <Image source={warning} style={styles.image} />
+        <Text
+          style={[
+            styles.title,
+            {alignSelf: 'center', textAlign: 'center', paddingHorizontal: 35},
+          ]}>
+          La livraison de kit chez un référent{' '}
+          <Text style={styles.bold}>n'est pas encore disponible.</Text>
         </Text>
-      )}
-      {!isDone &&
-        answers.map((answer, _i) => {
-          return (
-            <RadioButton
-              key={answer.id}
-              text={answer.text}
-              selected={answer.id === selectedAnswer}
-              onPress={() => handleAnswerSelection(answer)}
-            />
-          );
-        })}
-      {!isDone && selectedAnswer && (
-        <RNPickerSelect
-          placeholder={{label: 'Pour quelle raison ?', value: null}}
-          name={selectedAnswer === 1 ? 'yesAnswer' : 'noAnswer'}
-          items={selectedAnswer === 1 ? yes_picker_props : no_picker_props}
-          onValueChange={e => handlePickerAnswerSelection(e)}
-          style={{...pickerSelectStyle}}
-          useNativeAndroidPickerStyle={false}
-          pickerProps={{numberOfLines: 10}}
-          textInputProps={{multiline: true}}
-          Icon={() => (
-            <Icon
-              name="chevron-down"
-              size={20}
-              style={pickerSelectStyle.icon}
-              color={Colors.grey}
-            />
-          )}
-        />
-      )}
+        <View style={styles.middleContainer}>
+          <Image source={hand} style={styles.imageHand} />
+          <Text style={styles.description}>
+            Un.e référent.e t'accompagne pour répondre à tes questions autour de
+            la sexualité :
+          </Text>
+        </View>
+        <View style={{paddingLeft: 10, width: '90%', marginBottom: 10}}>
+          <RenderHTML
+            source={htmlText}
+            contentWidth={config.deviceWidth * 0.8}
+            baseStyle={styles.description}
+          />
+        </View>
+        {!isDone && (
+          <Text style={[styles.title, styles.bold]}>
+            Serais-tu intéressé.e pour récupérer ton kit auprès d'un référent.e
+            ?
+          </Text>
+        )}
+        {!isDone &&
+          answers.map((answer, _i) => {
+            return (
+              <RadioButton
+                key={answer.id}
+                text={answer.text}
+                selected={answer.id === selectedAnswer}
+                onPress={() => handleAnswerSelection(answer)}
+              />
+            );
+          })}
+        {!isDone && selectedAnswer && (
+          <RNPickerSelect
+            placeholder={{label: 'Pour quelle raison ?', value: null}}
+            name={selectedAnswer === 1 ? 'yesAnswer' : 'noAnswer'}
+            items={selectedAnswer === 1 ? yes_picker_props : no_picker_props}
+            onValueChange={e => handlePickerAnswerSelection(e)}
+            style={{...pickerSelectStyle}}
+            useNativeAndroidPickerStyle={false}
+            pickerProps={{numberOfLines: 10}}
+            textInputProps={{multiline: true}}
+            Icon={() => (
+              <Icon
+                name="chevron-down"
+                size={20}
+                style={pickerSelectStyle.icon}
+                color={Colors.grey}
+              />
+            )}
+          />
+        )}
+        {!isDone && precisedAnswer === 'Autre (Précise la raison)' && (
+          <TextInput
+            style={styles.textInput}
+            placeholder="Précise la raison"
+            onChangeText={e => setOtherInformations(e)}
+          />
+        )}
+        {isDone && (
+          <Text style={[styles.title, styles.bold, {alignSelf: 'center'}]}>
+            Merci ! Ton retour a été envoyé !
+          </Text>
+        )}
+      </ScrollView>
       {!isDone && precisedAnswer !== null && (
         <Button
           style={styles.button}
@@ -202,22 +226,17 @@ const ReferentIntention = props => {
           icon={true}
         />
       )}
-      {isDone && (
-        <Text style={[styles.title, styles.bold, {alignSelf: 'center'}]}>
-          Merci ! Ton retour a été envoyé !
-        </Text>
-      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
     marginTop: 10,
-    padding: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 5,
+    position: 'relative',
+    marginBottom: 110,
   },
   image: {
     alignSelf: 'center',
@@ -248,14 +267,25 @@ const styles = StyleSheet.create({
   button: {
     position: 'absolute',
     alignSelf: 'center',
-    bottom: 20,
+    bottom: 30,
     marginVertical: '5%',
   },
   imageHand: {
     width: 30,
     height: 30,
     left: -10,
   },
+  textInput: {
+    width: '100%',
+    borderBottomWidth: 0.5,
+    borderBottomColor: Colors.grey,
+    height: 50,
+    marginTop: 10,
+    fontSize: 18,
+    color: 'black',
+    paddingBottom: 5,
+    textAlignVertical: 'center',
+  },
 });
 
 const pickerSelectStyle = StyleSheet.create({

diff --git a/tumeplayMobile/src/services/api/referents.js b/tumeplayMobile/src/services/api/referents.js
@@ -12,13 +12,15 @@ export const CREATE_REFERENT_INTENTION = gql`
   mutation createSurveyReferent(
     $is_interested: Boolean
     $detailed_informations: String
+    $other_informations: String
     $utilisateurs_mobile: ID
   ) {
     createReferentSurvey(
       input: {
         data: {
           is_interested: $is_interested
           detailed_informations: $detailed_informations
+          other_informations: $other_informations
           utilisateurs_mobile: $utilisateurs_mobile
         }
       }
@@ -29,5 +31,3 @@ export const CREATE_REFERENT_INTENTION = gql`
     }
   }
 `;
-
-