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>

i18n/en/cycle-day.js

@@ -25,7 +25,8 @@ export const cervix = {
   position: {
     categories: ['low', 'medium', 'high'],
     explainer: 'How high up in the vagina is the cervix?'
-  }
+  },
+  actionHint: 'Choose values for at least "Opening" and "Firmness" to save.'
 }
 
 export const mucus = {
@@ -37,7 +38,8 @@ export const mucus = {
     categories: ['nothing', 'creamy', 'egg white'],
     explainer: "Looking at and touching your cervical mucus, which describes it best?"
   },
-  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
+  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection",
+  actionHint: 'Choose values for both "Feeling" and "Texture" to save.'
 }
 
 export const desire = {

styles/index.js

@@ -17,6 +17,7 @@ const fontRegular = 'Prompt-Light'
 const fontLight = 'Prompt-Thin'
 
 const regularSize = 16
+const hintSize = 14
 
 const defaultBottomMargin = 5
 const defaultIndentation = 10
@@ -34,6 +35,12 @@ export default StyleSheet.create({
     fontFamily: fontLight,
     fontSize: regularSize
   },
+  actionHint: {
+    color: secondaryColor,
+    fontFamily: fontRegular,
+    fontSize: hintSize,
+    margin: defaultIndentation
+  },
   paragraph: {
     marginBottom: defaultBottomMargin
   },