Com 1466 2 - Survey Card

src/components/cards/QuestionCardFooter.tsx

@@ -3,37 +3,47 @@ import { View, StyleSheet } from 'react-native';
 import ArrowButton from '../ArrowButton';
 import { navigate } from '../../navigationRef';
 import { LEFT } from '../../core/data/constants';
-import { WHITE, PINK, GREY } from '../../styles/colors';
+import { WHITE } from '../../styles/colors';
 import { FIRA_SANS_MEDIUM } from '../../styles/fonts';
 import { MARGIN } from '../../styles/metrics';
 import Button from '../form/Button';
 
 interface QuestionCardFooterProps {
   index: number,
-  expectedColor: string,
-  isPressed: boolean,
+  buttonVisible?: boolean,
+  arrowColor: string,
+  buttonColor: string,
+  buttonCaption?: string,
+  buttonDisabled?: boolean,
 }
 
-const QuestionCardFooter = ({ index, expectedColor, isPressed }: QuestionCardFooterProps) => {
-  const leftRemoved = index === 0;
-  const style = styles(index);
+const QuestionCardFooter = ({
+  index,
+  buttonVisible = true,
+  arrowColor,
+  buttonColor,
+  buttonCaption = 'Continuer',
+  buttonDisabled = false,
+}: QuestionCardFooterProps) => {
+  const arrowButtonVisible = !(index === 0);
+  const style = styles(arrowButtonVisible);
 
   return (
     <View style={style.container}>
-      {!leftRemoved && <ArrowButton color={isPressed ? expectedColor : PINK['500']} direction={LEFT}
-        onPress={() => navigate(`card-${index - 1}`)} />}
-      {isPressed &&
-      <View style={style.button}>
-        <Button bgColor={isPressed ? expectedColor : GREY['300']}
-          color={WHITE} borderColor={isPressed ? expectedColor : GREY['300']}
-          caption='Continuer' onPress={() => navigate(`card-${index + 1}`)}/>
-      </View>
+      {arrowButtonVisible &&
+        <ArrowButton color={arrowColor} direction={LEFT}
+          onPress={() => navigate(`card-${index - 1}`)} />}
+      {buttonVisible &&
+        <View style={style.button}>
+          <Button bgColor={buttonColor} color={WHITE} borderColor={buttonColor} disabled={buttonDisabled}
+            caption={buttonCaption} onPress={() => navigate(`card-${index + 1}`)} />
+        </View>
       }
     </View>
   );
 };
 
-const styles = (index: number) => StyleSheet.create({
+const styles = (arrowButtonVisible: boolean) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -44,7 +54,7 @@ const styles = (index: number) => StyleSheet.create({
   },
   button: {
     flexGrow: 1,
-    marginLeft: index > 0 ? MARGIN.LG : 0,
+    marginLeft: arrowButtonVisible ? MARGIN.LG : 0,
   },
   text: {
     ...FIRA_SANS_MEDIUM.LG,

src/components/cards/SurveyScoreSelector.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { GREY, PINK } from '../../styles/colors';
+import { FIRA_SANS_REGULAR } from '../../styles/fonts';
+import { BORDER_WIDTH, ICON, PADDING } from '../../styles/metrics';
+
+interface SurveyScoreSelectorProps {
+  onPressScore: (score: number) => void,
+  selectedScore: number | null,
+}
+
+const SurveyScoreSelector = ({ onPressScore, selectedScore }: SurveyScoreSelectorProps) => {
+  const scores = Array.from({ length: 5 }, (_, i) => i + 1);
+
+  const scoreItem = (score: number) => (
+    <TouchableOpacity key={score.toString()} style={styles.buttonContainer} onPress={() => onPressScore(score)}
+      hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} activeOpacity={1}>
+      <View style={styles.button}>
+        <View style={ score === selectedScore ? styles.selectedCircle : styles.circle} />
+      </View>
+      <Text style={ score === selectedScore ? styles.selectedText : styles.text}>{score}</Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.line} />
+      <View style={styles.scoreContainer}>
+        {scores.map(score => scoreItem(score))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: PADDING.LG,
+  },
+  line: {
+    position: 'relative',
+    borderWidth: BORDER_WIDTH,
+    borderColor: GREY[200],
+    top: ICON.XL / 2 + BORDER_WIDTH,
+    marginRight: ICON.XL / 2,
+    marginLeft: ICON.XL / 2,
+  },
+  scoreContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  buttonContainer: {
+    width: ICON.XL,
+    height: ICON.XL,
+    alignItems: 'center',
+    marginBottom: PADDING.XL,
+  },
+  button: {
+    justifyContent: 'center',
+    height: ICON.XL,
+  },
+  circle: {
+    height: ICON.XS,
+    width: ICON.XS,
+    borderRadius: ICON.XS / 2,
+    backgroundColor: GREY[200],
+  },
+  selectedCircle: {
+    height: ICON.XL,
+    width: ICON.XL,
+    borderRadius: ICON.XL / 2,
+    backgroundColor: PINK[300],
+    borderWidth: 2,
+    borderColor: PINK[500],
+  },
+  text: {
+    ...FIRA_SANS_REGULAR.MD,
+    textAlign: 'center',
+  },
+  selectedText: {
+    ...FIRA_SANS_REGULAR.XL,
+    textAlign: 'center',
+    color: PINK[600],
+  },
+});
+
+export default SurveyScoreSelector;

src/components/form/Button.tsx

@@ -12,16 +12,26 @@ interface ButtonProps {
   loading?: boolean,
   bgColor?: string,
   color?: string,
-  borderColor?: string
+  borderColor?: string,
+  disabled?: boolean,
 }
 
 const Button = (
-  { style, caption, onPress, loading = false, bgColor = PINK[500], color = WHITE, borderColor = PINK[500] }: ButtonProps
+  {
+    style,
+    caption,
+    onPress,
+    loading = false,
+    bgColor = PINK[500],
+    color = WHITE,
+    borderColor = PINK[500],
+    disabled = false,
+  }: ButtonProps
 ) => {
   const buttonStyle = { ...styles.button, backgroundColor: bgColor, borderColor };
 
   return (
-    <TouchableOpacity style={[style, buttonStyle]} onPress={onPress} disabled={loading} testID={caption}>
+    <TouchableOpacity style={[style, buttonStyle]} onPress={onPress} disabled={loading || disabled} testID={caption}>
       {!loading && <Text style={{ ...styles.textButton, color }}>{caption}</Text>}
       {loading && <ActivityIndicator style={commonStyle.disabled} color={color} size="small" />}
     </TouchableOpacity>

src/screens/courses/cardTemplates/CardTemplate.tsx

@@ -5,13 +5,14 @@ import { connect } from 'react-redux';
 import { StateType, ActionType } from '../../../types/store/StoreType';
 import Transition from './Transition';
 import CardFooter from '../../../components/cards/CardFooter';
-import { TRANSITION, TITLE_TEXT_MEDIA, SINGLE_CHOICE_QUESTION, TEXT_MEDIA } from '../../../core/data/constants';
+import { TRANSITION, TITLE_TEXT_MEDIA, SINGLE_CHOICE_QUESTION, TEXT_MEDIA, SURVEY } from '../../../core/data/constants';
 import CardHeader from '../../../components/cards/CardHeader';
 import TitleTextMediaCard from './TitleTextMediaCard';
 import TextMediaCard from './TextMediaCard';
 import { ActivityType } from '../../../types/ActivityType';
 import Actions from '../../../store/activities/actions';
 import SingleChoiceQuestionCard from './SingleChoiceQuestionCard';
+import SurveyCard from './SurveyCard';
 
 interface CardTemplateProps {
   index: number,
@@ -37,6 +38,8 @@ const CardTemplate = ({ index, activity, setCardIndex }: CardTemplateProps) => {
       return <SingleChoiceQuestionCard />;
     case TEXT_MEDIA:
       return <TextMediaCard />;
+    case SURVEY:
+      return <SurveyCard />;
 
     default:
       return (

src/screens/courses/cardTemplates/SingleChoiceQuestionCard.tsx

@@ -7,15 +7,15 @@ import { StateType } from '../../../types/store/StoreType';
 import { getCard } from '../../../store/activities/selectors';
 import CardHeader from '../../../components/cards/CardHeader';
 import { FIRA_SANS_MEDIUM, FIRA_SANS_REGULAR } from '../../../styles/fonts';
-import { GREY, GREEN, ORANGE } from '../../../styles/colors';
+import { GREY, GREEN, ORANGE, PINK } from '../../../styles/colors';
 import { MARGIN } from '../../../styles/metrics';
 import QuestionCardFooter from '../../../components/cards/QuestionCardFooter';
 import SingleChoiceQuestionAnswer from '../../../components/cards/SingleChoiceQuestionAnswer';
 import { SINGLE_CHOICE_QUESTION } from '../../../core/data/constants';
 
 interface SingleChoiceQuestionCard {
   card: SingleChoiceQuestionType,
-  index: number
+  index: number,
 }
 
 const SingleChoiceQuestionCard = ({ card, index }: SingleChoiceQuestionCard) => {
@@ -59,7 +59,8 @@ const SingleChoiceQuestionCard = ({ card, index }: SingleChoiceQuestionCard) =>
       </ScrollView>
       <View style={style.footerContainer}>
         {isPressed && <Text style={style.explanation}>{card.explanation}</Text>}
-        <QuestionCardFooter expectedColor={expectedColors.button} index={index} isPressed={isPressed} />
+        <QuestionCardFooter index={index} arrowColor={isPressed ? expectedColors.button : PINK['500']}
+          buttonVisible={isPressed} buttonColor={isPressed ? expectedColors.button : GREY['300']} />
       </View>
     </>
   );

src/screens/courses/cardTemplates/SurveyCard.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { connect } from 'react-redux';
+import { SurveyType } from '../../../types/CardType';
+import CardHeader from '../../../components/cards/CardHeader';
+import { FIRA_SANS_REGULAR } from '../../../styles/fonts';
+import { GREY, PINK } from '../../../styles/colors';
+import { MARGIN, PADDING } from '../../../styles/metrics';
+import QuestionCardFooter from '../../../components/cards/QuestionCardFooter';
+import { StateType } from '../../../types/store/StoreType';
+import { getCard } from '../../../store/activities/selectors';
+import SurveyScoreSelector from '../../../components/cards/SurveyScoreSelector';
+import { SURVEY } from '../../../core/data/constants';
+
+interface SurveyCard {
+  card: SurveyType,
+  index: number
+}
+
+const SurveyCard = ({ card, index }: SurveyCard) => {
+  const [selectedScore, setSelectedScore] = useState<number | null>(null);
+
+  if (!card || card.template !== SURVEY) return null;
+
+  return (
+    <>
+      <CardHeader />
+      <View style={styles.container}>
+        <Text style={styles.question}>{card.question}</Text>
+        <View style={styles.surveyScoreContainer}>
+          <SurveyScoreSelector onPressScore={score => setSelectedScore(score)} selectedScore={selectedScore} />
+          <View style={styles.labelContainer}>
+            {card.label?.left && card.label?.right && (
+              <>
+                <Text style={{ ...styles.text, ...styles.textLeft }}>{card.label.left}</Text>
+                <Text style={{ ...styles.text, ...styles.textRight }}>{card.label.right}</Text>
+              </>
+            )}
+          </View>
+        </View>
+      </View>
+      <QuestionCardFooter index={index} buttonColor={selectedScore ? PINK['500'] : GREY['300']}
+        arrowColor={PINK['500']} buttonCaption='Valider' buttonDisabled={!selectedScore} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: MARGIN.LG,
+  },
+  surveyScoreContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  question: {
+    ...FIRA_SANS_REGULAR.LG,
+    color: GREY['800'],
+    justifyContent: 'flex-start',
+  },
+  labelContainer: {
+    paddingTop: PADDING.XL,
+    paddingHorizontal: PADDING.LG,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  text: {
+    width: 88,
+    color: PINK[500],
+  },
+  textLeft: {
+    textAlign: 'left',
+  },
+  textRight: {
+    textAlign: 'right',
+  },
+});
+
+const mapStateToProps = (state: StateType) => ({ card: getCard(state), index: state.activities.cardIndex });
+
+export default connect(mapStateToProps)(SurveyCard);

src/types/CardType.tsx

@@ -35,3 +35,10 @@ export interface TextMediaType {
   },
   text: string,
 }
+
+export interface SurveyType {
+  _id: string,
+  template: string,
+  question: string,
+  label?: { left: string, right: string},
+}