fix: earn section buttons (#2720)

__tests__/utils/earns-utils.test.ts

@@ -85,7 +85,7 @@ const expectedEnglishQuizSections = [
     section: { id: "WhatIsMoney", title: "What is Money? " },
     content: [
       {
-        id: "moneySocialAggrement",
+        id: "moneySocialAgreement",
         title: "Money is a social agreement.",
         text: "Money requires people to trust. \n\nPeople trust the paper dollar bills in their pocket. They trust the digits in their online bank account. They trust the balance on a store gift card will be redeemable. \n\nHaving money allows people to easy trade it immediately for a good, or a service.",
         question: "Why does money have value?",

app/i18n/en/index.ts

@@ -158,7 +158,7 @@ const en: BaseTranslation = {
       WhatIsMoney: {
         title: "What is Money? ",
         questions: {
-          moneySocialAggrement: {
+          moneySocialAgreement: {
             answers: [
               "Because people trust that other people will value money similarly",
               "Because your mother told you so",

app/i18n/i18n-types.ts

@@ -495,7 +495,7 @@ type RootTranslation = {
 				 */
 				title: string
 				questions: {
-					moneySocialAggrement: {
+					moneySocialAgreement: {
 						answers: {
 							/**
 							 * B​e​c​a​u​s​e​ ​p​e​o​p​l​e​ ​t​r​u​s​t​ ​t​h​a​t​ ​o​t​h​e​r​ ​p​e​o​p​l​e​ ​w​i​l​l​ ​v​a​l​u​e​ ​m​o​n​e​y​ ​s​i​m​i​l​a​r​l​y
@@ -9176,7 +9176,7 @@ export type TranslationFunctions = {
 				 */
 				title: () => LocalizedString
 				questions: {
-					moneySocialAggrement: {
+					moneySocialAgreement: {
 						answers: {
 							/**
 							 * Because people trust that other people will value money similarly

app/i18n/raw-i18n/source/en.json

@@ -149,7 +149,7 @@
             "WhatIsMoney": {
                 "title": "What is Money? ",
                 "questions": {
-                    "moneySocialAggrement": {
+                    "moneySocialAgreement": {
                         "answers": [
                             "Because people trust that other people will value money similarly",
                             "Because your mother told you so",

app/screens/earns-map-screen/earns-map-screen.stories.tsx

@@ -92,7 +92,7 @@ const mocksSection0 = [
                 __typename: "Quiz",
               },
               {
-                id: "moneySocialAggrement",
+                id: "moneySocialAgreement",
                 amount: 4,
                 completed: false,
                 __typename: "Quiz",
@@ -259,7 +259,7 @@ const mocksSection1 = [
                 __typename: "Quiz",
               },
               {
-                id: "moneySocialAggrement",
+                id: "moneySocialAgreement",
                 amount: 4,
                 completed: false,
                 __typename: "Quiz",

app/screens/earns-screen/earn-svg-factory.tsx

@@ -6,8 +6,8 @@ import WhereBitcoinExistSVG from "./03-where-do-the-bitcoins-exist-01.svg"
 import WhoControlsBitcoinSVG from "./04-who-controls-Bitcoin-01.svg"
 import CopyBitcoinSVG from "./05-cant-copy-bitcoin-01.svg"
 
-import MoneySocialAggrement from "./01-money-is-a-social-agreement-01.svg"
-import MoneySocialAggrementDark from "./01-money-is-a-social-agreement-02.svg"
+import MoneySocialAgreement from "./01-money-is-a-social-agreement-01.svg"
+import MoneySocialAgreementDark from "./01-money-is-a-social-agreement-02.svg"
 import CoincidenceOfWants from "./02-coincidence-of-wants-01.svg"
 import MoneyEvolution from "./03-money-has-evolved-01.svg"
 import WhyStonesShellGold from "./04-why-used-as-money-01.svg"
@@ -158,11 +158,11 @@ export const SVGs = ({ name, width, theme }: ISVGs): React.ReactNode => {
     case "copyBitcoin":
       return <CopyBitcoinSVG width={rWidth} />
 
-    case "moneySocialAggrement":
+    case "moneySocialAgreement":
       return theme === "dark" ? (
-        <MoneySocialAggrementDark width={rWidth} />
+        <MoneySocialAgreementDark width={rWidth} />
       ) : (
-        <MoneySocialAggrement width={rWidth} />
+        <MoneySocialAgreement width={rWidth} />
       )
     case "coincidenceOfWants":
       return <CoincidenceOfWants width={rWidth} />

app/screens/earns-screen/earns-quiz.tsx

@@ -2,8 +2,13 @@
 import { Button } from "@rneui/base"
 import * as React from "react"
 import { useEffect, useState } from "react"
-import { Text, View } from "react-native"
-import { ScrollView, TouchableWithoutFeedback } from "react-native-gesture-handler"
+import {
+  Text,
+  TouchableOpacity,
+  View,
+  ScrollView,
+  TouchableWithoutFeedback,
+} from "react-native"
 import Modal from "react-native-modal"
 import { SafeAreaView } from "react-native-safe-area-context"
 import Icon from "react-native-vector-icons/Ionicons"
@@ -27,9 +32,11 @@ import { makeStyles, useTheme } from "@rneui/themed"
 
 const useStyles = makeStyles(({ colors }) => ({
   answersView: {
-    flex: 1,
-    marginHorizontal: 10,
-    marginTop: 6,
+    rowGap: 20,
+    padding: 20,
+  },
+  scrollViewStyle: {
+    width: "100%",
   },
 
   bottomContainer: {
@@ -57,12 +64,14 @@ const useStyles = makeStyles(({ colors }) => ({
 
   correctAnswerText: {
     color: colors.green,
+    flex: 1,
     fontSize: 16,
   },
 
   incorrectAnswerText: {
     color: colors.error,
     fontSize: 16,
+    flex: 1,
   },
 
   keepDiggingContainerStyle: {
@@ -79,47 +88,51 @@ const useStyles = makeStyles(({ colors }) => ({
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     justifyContent: "flex-end",
-    minHeight: 630,
+    height: 630,
   },
 
   quizButtonContainerStyle: {
     marginVertical: 12,
     width: 48,
   },
 
+  buttonRow: {
+    flexDirection: "row",
+    columnGap: 20,
+    alignItems: "center",
+  },
+
   quizButtonStyle: {
     backgroundColor: colors._lightBlue,
-    borderRadius: 32,
-    padding: 12,
+    height: 50,
+    width: 50,
+    borderRadius: 50,
+    alignItems: "center",
+    justifyContent: "center",
   },
 
   quizButtonTitleStyle: {
     color: colors._white,
     fontWeight: "bold",
+    fontSize: 16,
   },
 
   quizCorrectButtonStyle: {
     backgroundColor: colors.green,
-    borderRadius: 32,
-    padding: 12,
-  },
-
-  quizTextAnswer: {
-    color: colors._darkGrey,
-    textAlign: "left",
-    width: "100%",
-  },
-
-  quizTextContainerStyle: {
-    alignItems: "flex-start",
-    marginLeft: 12,
-    marginRight: 36,
+    height: 50,
+    width: 50,
+    borderRadius: 50,
+    alignItems: "center",
+    justifyContent: "center",
   },
 
   quizWrongButtonStyle: {
     backgroundColor: colors.error,
-    borderRadius: 32,
-    padding: 12,
+    height: 50,
+    width: 50,
+    borderRadius: 50,
+    alignItems: "center",
+    justifyContent: "center",
   },
 
   svgContainer: {
@@ -131,6 +144,11 @@ const useStyles = makeStyles(({ colors }) => ({
     fontSize: 24,
   },
 
+  answerChoiceText: {
+    fontSize: 20,
+    flex: 1,
+  },
+
   textContainer: {
     marginHorizontal: 24,
     paddingBottom: 48,
@@ -153,6 +171,11 @@ const useStyles = makeStyles(({ colors }) => ({
     fontSize: 18,
     fontWeight: "bold",
   },
+
+  buttonRowWithFeedback: {
+    rowGap: 10,
+    flex: 1,
+  },
 }))
 
 const mappingLetter = { 0: "A", 1: "B", 2: "C" }
@@ -209,7 +232,7 @@ export const EarnQuiz = ({ route }: Props) => {
   const card = augmentCardWithGqlData({ card: cardNoMetadata, quizServerData })
   const { title, text, amount, answers, feedback, question, completed } = card
 
-  const [quizCompleted] = useQuizCompletedMutation()
+  const [quizCompleted, { loading: quizCompletedLoading }] = useQuizCompletedMutation()
   const [quizVisible, setQuizVisible] = useState(false)
   const [recordedAnswer, setRecordedAnswer] = useState<number[]>([])
 
@@ -221,10 +244,11 @@ export const EarnQuiz = ({ route }: Props) => {
 
   useEffect(() => {
     ;(async () => {
-      if (recordedAnswer.indexOf(0) !== -1) {
+      if (recordedAnswer.indexOf(0) !== -1 && !completed && !quizCompletedLoading) {
         const { data } = await quizCompleted({
           variables: { input: { id } },
         })
+
         if (data?.quizCompleted?.errors?.length) {
           // FIXME: message is hidden by the modal
           toastShow({
@@ -234,7 +258,7 @@ export const EarnQuiz = ({ route }: Props) => {
         }
       }
     })()
-  }, [recordedAnswer, id, quizCompleted, LL])
+  }, [recordedAnswer, id, quizCompleted, LL, completed, quizCompletedLoading])
 
   const close = async () => {
     if (quizVisible) {
@@ -257,38 +281,22 @@ export const EarnQuiz = ({ route }: Props) => {
   let j: ZeroTo2 = 0
   permutation.forEach((i) => {
     answersShuffled.push(
-      <TouchableWithoutFeedback>
-        <View key={i} style={{ width: "100%" }}>
-          <View style={{ flexDirection: "row", alignItems: "center", width: "90%" }}>
-            <Button
-              title={mappingLetter[j]}
-              buttonStyle={buttonStyleHelper(i)}
-              disabledStyle={buttonStyleHelper(i)}
-              titleStyle={styles.quizButtonTitleStyle}
-              disabledTitleStyle={styles.quizButtonTitleStyle}
-              containerStyle={styles.quizButtonContainerStyle}
-              onPress={() => addRecordedAnswer(i)}
-              disabled={recordedAnswer.indexOf(0) !== -1}
-            />
-            <Button
-              title={answers[i]}
-              titleStyle={styles.quizTextAnswer}
-              disabledTitleStyle={styles.quizTextAnswer}
-              containerStyle={styles.quizTextContainerStyle}
-              // disabledStyle={styles.quizTextContainerStyle}
-              type="clear"
-              onPress={() => addRecordedAnswer(i)}
-              disabled={recordedAnswer.indexOf(0) !== -1}
-            />
+      <View style={styles.buttonRowWithFeedback}>
+        <TouchableOpacity key={i} onPress={() => addRecordedAnswer(i)}>
+          <View style={styles.buttonRow}>
+            <View style={buttonStyleHelper(i)}>
+              <Text style={styles.quizButtonTitleStyle}>{mappingLetter[j]}</Text>
+            </View>
+            <Text style={styles.answerChoiceText}>{answers[i]}</Text>
           </View>
-          {recordedAnswer.length > 0 &&
-          recordedAnswer.indexOf(i) === recordedAnswer.length - 1 ? (
-            <Text style={i === 0 ? styles.correctAnswerText : styles.incorrectAnswerText}>
-              {feedback[i]}
-            </Text>
-          ) : null}
-        </View>
-      </TouchableWithoutFeedback>,
+        </TouchableOpacity>
+        {recordedAnswer.length > 0 &&
+        recordedAnswer.indexOf(i) === recordedAnswer.length - 1 ? (
+          <Text style={i === 0 ? styles.correctAnswerText : styles.incorrectAnswerText}>
+            {feedback[i]}
+          </Text>
+        ) : null}
+      </View>,
     )
     j = (j + 1) as ZeroTo2
   })
@@ -318,7 +326,10 @@ export const EarnQuiz = ({ route }: Props) => {
               style={{ height: 40, top: -30 }}
             />
           </View>
-          <ScrollView style={styles.answersView}>
+          <ScrollView
+            style={styles.scrollViewStyle}
+            contentContainerStyle={styles.answersView}
+          >
             <Text style={styles.title}>{question ?? title}</Text>
             {answersShuffled}
           </ScrollView>

app/screens/earns-screen/earns-sections.stories.tsx

@@ -92,7 +92,7 @@ const mocksSection0 = [
                 __typename: "Quiz",
               },
               {
-                id: "moneySocialAggrement",
+                id: "moneySocialAgreement",
                 amount: 4,
                 completed: false,
                 __typename: "Quiz",

app/screens/earns-screen/sections.ts

@@ -12,7 +12,7 @@ export const earnSections = {
   },
   WhatIsMoney: {
     questions: [
-      "moneySocialAggrement",
+      "moneySocialAgreement",
       "coincidenceOfWants",
       "moneyEvolution",
       "whyStonesShellGold",