feat: integrating aime specific code for demo purpose (#466)

* feat: intagrating aime specific code for demo purpose * feat: image css overirde * feat: adjusting image size + removing last quizz bad behavior * feat: override CSS rules * fix: image display Co-authored-by: Clément <[email protected]>
SocialGouv · Nov 29, 2022 · 3ac6576 · 3ac6576
1 parent b60c1cc
commit 3ac6576
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 68 deletions.
diff --git a/tumeplay-app/App.js b/tumeplay-app/App.js
@@ -16,7 +16,6 @@ import Styles from './src/styles/Styles';
 const AppContainer = createAppContainer(AppStack);
 
 export default function App() {
-
   const [showRealApp, setShowRealApp] = useState(false);
 
   function _renderItem({item}) {
@@ -95,7 +94,7 @@ const App: () => React$Node = () => {
         <ScrollView
           contentInsetAdjustmentBehavior="automatic"
           style={styles.scrollView}>
-          
+
           {global.HermesInternal == null ? null : (
             <View style={styles.engine}>
               <Text style={styles.footer}>Engine: Hermes</Text>
@@ -117,7 +116,7 @@ const App: () => React$Node = () => {
                 <DebugInstructions />
               </Text>
             </View>
-            
+
           </View>
         </ScrollView>
       </SafeAreaView>

diff --git a/tumeplay-app/public/assets/css/page.css b/tumeplay-app/public/assets/css/page.css
@@ -25,6 +25,16 @@ p {
   padding: 0 0 1rem 0;
 }
 
+.css-accessibilityImage-9pa8cd {
+  inset: 0px;
+  height: 50%;
+  opacity: 0;
+  position: relative;
+  width: 100%;
+  z-index: -1;
+  object-fit: cover;
+}
+
 h3 {
   text-decoration: underline;
 }

diff --git a/tumeplay-app/public/index.html b/tumeplay-app/public/index.html
@@ -54,6 +54,14 @@
         left: 0 !important;
       }
 
+      .css-accessibilityImage-9pa8cd {
+        inset: 0px;
+        height: auto;
+        opacity: 0;
+        position: relative;
+        z-index: -1;
+      }
+
       @media (min-width: 768px) {
         #root,
         .top-menu-portal > div {

diff --git a/tumeplay-app/src/App.js b/tumeplay-app/src/App.js
@@ -10,12 +10,12 @@ import Tracking from './services/Tracking';
 import useIsMounted from './hooks/isMounted';
 
 import localBoarding from './models/defaults/Boarding';
+import AimeOnboarding from './screens/AimeOnboarding';
 
 const AppContainer = createAppContainer(AppStack);
 
 const App = () => {
   const [showRealApp, setShowRealApp] = useState(false);
-  const [slides, setSlides] = useState([]);
   const isMounted = useIsMounted();
 
   useEffect(() => {
@@ -51,10 +51,16 @@ const App = () => {
     setShowRealApp(true);
   }
 
+  const REACT_APP_ZONE = process.env.REACT_APP_ZONE;
+
   if (showRealApp) {
     return <AppContainer style={{flex: 1, flexGrow: 1}} />;
   } else {
-    return <Onboarding onDone={_onDone} slides={localBoarding} />;
+    if (REACT_APP_ZONE === 'aime') {
+      return <AimeOnboarding onDone={_onDone} />;
+    } else {
+      return <Onboarding onDone={_onDone} slides={localBoarding} />;
+    }
   }
 };
 

diff --git a/tumeplay-app/src/assets/onboardingAime.png b/tumeplay-app/src/assets/onboardingAime.png
diff --git a/tumeplay-app/src/screens/AimeOnboarding.js b/tumeplay-app/src/screens/AimeOnboarding.js
@@ -0,0 +1,60 @@
+import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import React from 'react';
+import Colors from '../styles/Color';
+import Styles from '../styles/Styles';
+import img from '../assets/onboardingAime.png';
+
+const AimeOnboarding = ({onDone}) => {
+  return (
+    <View style={{flex: 1, height: '100%', paddingVertical: 20}}>
+      <Text style={styles.title}>Bienvenue sur Aime,</Text>
+      <Text style={styles.subtitle}>
+        L'application sur la santé sexuelle qui te permet de mieux comprendre
+        ton corps et les relations amoureuses en France
+      </Text>
+      <Image source={img} style={styles.image} />
+      <TouchableOpacity
+        style={[Styles.tunnelButton, styles.button]}
+        onPress={onDone}>
+        <Text style={[Styles.tunnelButtonText, styles.buttonText]}>
+          Continuer
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 40,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: 'white',
+    fontFamily: Colors.appTitleFont,
+  },
+  subtitle: {
+    fontSize: 20,
+    color: 'white',
+    textAlign: 'center',
+    fontFamily: Colors.titleCard,
+    marginBottom: 30,
+  },
+  button: {
+    width: 'fit-content',
+    alignSelf: 'center',
+    paddingHorizontal: 40,
+    paddingVertical: 10,
+  },
+  buttonText: {
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  image: {
+    marginBottom: 30,
+    width: '70%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+});
+
+export default AimeOnboarding;
diff --git a/tumeplay-app/src/screens/ContentScreen.js b/tumeplay-app/src/screens/ContentScreen.js
@@ -1,5 +1,5 @@
-import React, {useState, useRef, useEffect, useMemo} from 'react';
-import {ScrollView, SafeAreaView, View} from 'react-native';
+import React, {useState, useRef, useEffect} from 'react';
+import {SafeAreaView, View} from 'react-native';
 import {EventRegister} from 'react-native-event-listeners';
 
 import Modal from 'react-native-modal';
@@ -132,7 +132,11 @@ export default function ContentScreen(props) {
         <ContentCards
           activeOpacity={activeOpacity}
           style={{flex: 0.8}}
-          localContents={_.shuffle(contents)}
+          localContents={
+            REACT_APP_ZONE === 'aime'
+              ? _.orderBy(contents, 'title', 'asc')
+              : _.shuffle(contents)
+          }
         />
       );
     }
@@ -293,20 +297,17 @@ export default function ContentScreen(props) {
   return (
     <SafeAreaView style={[Styles.safeAreaView]}>
       <View style={[Styles.safeAreaViewInner, {flex: 1, paddingTop: 40}]}>
-        <ScrollView style={{flex: 0.8}}>
-          {DisplayContentCards()}
-
-          {REACT_APP_ZONE !== 'aime' && (
-            <>
-              <ContactButton />
-              <CustomFooter
-                style={{flex: 0.2}}
-                navigation={props.navigation}
-                containerStyle={{paddingLeft: 0, paddingRight: 0}}
-              />
-            </>
-          )}
-        </ScrollView>
+        {DisplayContentCards()}
+        {REACT_APP_ZONE !== 'aime' && (
+          <>
+            <ContactButton />
+            <CustomFooter
+              style={{flex: 0.2}}
+              navigation={props.navigation}
+              containerStyle={{paddingLeft: 0, paddingRight: 0}}
+            />
+          </>
+        )}
       </View>
 
       <Modal

diff --git a/tumeplay-app/src/screens/QuizzFinishScreen.js b/tumeplay-app/src/screens/QuizzFinishScreen.js
@@ -19,6 +19,8 @@ QuizzFinishScreen.propTypes = {
 };
 
 export default function QuizzFinishScreen(props) {
+  const REACT_APP_ZONE = process.env.REACT_APP_ZONE;
+
   const [availableTokens, setAvailableTokens] = useState(props.availableTokens);
 
   const [eventListener, setEventListener] = useState(false);
@@ -124,7 +126,7 @@ export default function QuizzFinishScreen(props) {
                 Bravo !
               </UnderlineText>
             )}
-            {!hasEnoughTokens && (
+            {!hasEnoughTokens && REACT_APP_ZONE !== 'aime' && (
               <UnderlineText borderColor={'#F1732E'} borderMargin={-15}>
                 Presque !
               </UnderlineText>
@@ -133,7 +135,7 @@ export default function QuizzFinishScreen(props) {
         </View>
       </View>
       <View style={{flex: 0.15, paddingLeft: 15, paddingRight: 15}}>
-        {hasEnoughTokens && (
+        {hasEnoughTokens && REACT_APP_ZONE !== 'aime' && (
           <Text
             style={{
               textAlign: 'center',
@@ -144,7 +146,7 @@ export default function QuizzFinishScreen(props) {
             Tu as gagné assez de points pour recevoir ta box gratuitement !
           </Text>
         )}
-        {!hasEnoughTokens && (
+        {!hasEnoughTokens && REACT_APP_ZONE !== 'aime' && (
           <Text
             style={{
               textAlign: 'center',
@@ -156,28 +158,40 @@ export default function QuizzFinishScreen(props) {
             box gratuitement.
           </Text>
         )}
+        {REACT_APP_ZONE === 'aime' && (
+          <Text
+            style={{
+              textAlign: 'center',
+              fontSize: 20,
+              color: Colors.mainButton,
+              fontFamily: Colors.titleCard,
+            }}>
+            Merci d'avoir répondu à notre quizz !
+          </Text>
+        )}
       </View>
-
-      <View style={{flex: 0.3, alignItems: 'center'}}>
-        <Image
-          style={Styles.PictureFinish}
-          source={require('../assets/pictures/header-right.png')}
-        />
-        <Text
-          style={[
-            headerStyle.text,
-            Styles.withShadow,
-            {height: 40, minHeight: 40},
-          ]}>
-          {availableTokens} points !
-        </Text>
-      </View>
-
-      <View style={{flex: 0.2}}></View>
-
+      {REACT_APP_ZONE !== 'aime' && (
+        <>
+          <View style={{flex: 0.3, alignItems: 'center'}}>
+            <Image
+              style={Styles.PictureFinish}
+              source={require('../assets/pictures/header-right.png')}
+            />
+            <Text
+              style={[
+                headerStyle.text,
+                Styles.withShadow,
+                {height: 40, minHeight: 40},
+              ]}>
+              {availableTokens} points !
+            </Text>
+          </View>
+          <View style={{flex: 0.2}}></View>)
+        </>
+      )}
       <View
         style={{position: 'absolute', width: '100%', bottom: 25, zIndex: 1}}>
-        {hasEnoughTokens && (
+        {hasEnoughTokens && REACT_APP_ZONE !== 'aime' && (
           <TouchableOpacity
             style={[Styles.bottomButton, {borderRadius: 25}]}
             onPress={props.onOrder}>

diff --git a/tumeplay-app/src/screens/QuizzScreen.js b/tumeplay-app/src/screens/QuizzScreen.js
@@ -185,7 +185,8 @@ export default function QuizzScreen(props) {
             alignSelf: 'center',
             height: '20%',
           }}>
-          {['guyane', 'aime'].includes(REACT_APP_ZONE) ? (
+          {['guyane', 'aime'].includes(REACT_APP_ZONE) &&
+          _currentQuestion.sound_question ? (
             <TextWithSound
               sound={
                 _currentQuestion.sound_question

diff --git a/tumeplay-app/src/screens/components/content/ContentCard.js b/tumeplay-app/src/screens/components/content/ContentCard.js
@@ -6,8 +6,6 @@ import ExpandableText from '../global/ExpandableText';
 import CustomTouchableOpacity from '../global/CustomTouchableOpacity';
 import Tracking from '../../../services/Tracking';
 
-const REACT_APP_API_URL = process.env.REACT_APP_API_URL;
-
 ContentCard.propTypes = {
   item: PropTypes.object,
   activeOpacity: PropTypes.number,
@@ -90,7 +88,7 @@ export default function ContentCard(props) {
           readMoreLink={content.link}
           lessPicture={'minus-orange.png'}
           morePicture={'plus-orange.png'}
-          sound={content.sound !== null ? content.sound.url : ' '}
+          sound={content.sound !== null ? content.sound.url : null}
           onReadMore={() => {
             Tracking.knowMoreTriggered('contenu', content.id);
           }}

diff --git a/tumeplay-app/src/screens/components/global/ExpandableText.js b/tumeplay-app/src/screens/components/global/ExpandableText.js
@@ -39,13 +39,8 @@ ExpandableText.propTypes = {
 };
 
 export default function ExpandableText(props) {
-  const [measured, setMeasured] = useState(false);
-  const [shouldShowReadMore, setShouldShowReadMore] = useState(false);
   const [showAllText, setShowAllText] = useState(props.isExpanded);
-  const isMounted = useIsMounted();
-  const _text = useRef();
   const [lines, setLines] = useState(0);
-  const [cardHeight, setCardHeight] = useState();
 
   const soundIconStyle = props.soundStyle || {
     position: 'absolute',
@@ -216,7 +211,7 @@ export default function ExpandableText(props) {
           }}
           style={[cardStyle.text, {...props.textStyle}]}
         />
-        {props.sound && ['guyane', 'aime'].includes(REACT_APP_ZONE) && (
+        {props.sound !== null && ['guyane', 'aime'].includes(REACT_APP_ZONE) && (
           <CustomTouchableOpacity
             onPress={e => {
               togglePlay(e);
@@ -234,14 +229,15 @@ export default function ExpandableText(props) {
             />
           </CustomTouchableOpacity>
         )}
-        {props.sound && ['guyane', 'aime'].includes(REACT_APP_ZONE) && (
-          <ReactHowler
-            src={REACT_APP_API_URL + props.sound}
-            onEnd={onPlayStop}
-            onStop={onPlayStop}
-            playing={play}
-          />
-        )}
+        {props.sound !== null &&
+          ['guyane', 'aime'].includes(REACT_APP_ZONE) && (
+            <ReactHowler
+              src={REACT_APP_API_URL + props.sound}
+              onEnd={onPlayStop}
+              onStop={onPlayStop}
+              playing={play}
+            />
+          )}
         {_maybeRenderReadMore()}
       </View>
     </View>