Merge branch '178-add-hints-for-required-selections' into 'master'

Resolve "Change symptom category descriptions to make clear which are required (for mucus and cervix) for fertility detection"

Closes #178

See merge request bloodyhealth/drip!153

components/app-text.js

@@ -21,6 +21,19 @@ export function AppTextLight(props) {
   )
 }
 
+export function ActionHint(props) {
+  if(props.isVisible) {
+    return (
+      <AppText
+        style={[styles.actionHint, props.style]}>
+        {props.children}
+      </AppText>
+    )
+  } else {
+    return null
+  }
+}
+
 export function SymptomSectionHeader(props) {
   return (
     <AppText style={styles.symptomViewHeading}>

components/cycle-day/symptoms/cervix.js

@@ -10,6 +10,7 @@ import { cervix as labels } from '../../../i18n/en/cycle-day'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import { ActionHint } from '../../app-text'
 
 export default class Cervix extends Component {
   constructor(props) {
@@ -35,6 +36,7 @@ export default class Cervix extends Component {
       { label: labels.position.categories[1], value: 1 },
       { label: labels.position.categories[2], value: 2 }
     ]
+    const mandatoryNotCompletedYet = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
@@ -81,6 +83,7 @@ export default class Cervix extends Component {
             />
           </SymptomSection>
         </ScrollView>
+        <ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
         <ActionButtonFooter
           symptom='cervix'
           date={this.props.date}
@@ -93,7 +96,7 @@ export default class Cervix extends Component {
               exclude: Boolean(this.state.exclude)
             })
           }}
-          saveDisabled={typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'}
+          saveDisabled={mandatoryNotCompletedYet}
           navigate={this.props.navigate}
         />
       </View>

components/cycle-day/symptoms/mucus.js

@@ -11,7 +11,7 @@ import computeNfpValue from '../../../lib/nfp-mucus'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
-
+import { ActionHint } from '../../app-text'
 
 export default class Mucus extends Component {
   constructor(props) {
@@ -34,6 +34,7 @@ export default class Mucus extends Component {
       { label: labels.texture.categories[1], value: 1 },
       { label: labels.texture.categories[2], value: 2 }
     ]
+    const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
@@ -70,6 +71,7 @@ export default class Mucus extends Component {
             />
           </SymptomSection>
         </ScrollView>
+        <ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
         <ActionButtonFooter
           symptom='mucus'
           date={this.props.date}
@@ -84,7 +86,7 @@ export default class Mucus extends Component {
               exclude: Boolean(this.state.exclude)
             })
           }}
-          saveDisabled={typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'}
+          saveDisabled={mandatoryNotCompletedYet}
           navigate={this.props.navigate}
         />
       </View>