Merge branch 'main' into 'feature/prods'

# Conflicts:
#   components/cycle-day/symptom-edit-view.js
#   i18n/en/cycle-day.js

components/cycle-day/cycle-day-overview.js

@@ -9,6 +9,16 @@ import SymptomPageTitle from './symptom-page-title'
 import { getCycleDay } from '../../db'
 import { getData, nextDate, prevDate } from '../helpers/cycle-day'
 
+import {
+  desireTrackingCategoryObservable,
+  moodTrackingCategoryObservable,
+  noteTrackingCategoryObservable,
+  painTrackingCategoryObservable,
+  sexTrackingCategoryObservable,
+  temperatureTrackingCategoryObservable,
+  mucusTrackingCategoryObservable,
+  cervixTrackingCategoryObservable,
+} from '../../local-storage'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
@@ -27,6 +37,29 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
     setDate(prevDate(date))
   }
 
+  const allEnabledSymptoms = SYMPTOMS.map((symptom) => {
+    if (symptom === 'temperature') {
+      return temperatureTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'sex') {
+      return sexTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'mucus') {
+      return mucusTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'cervix') {
+      return cervixTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'desire') {
+      return desireTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'pain') {
+      return painTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'mood') {
+      return moodTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'note') {
+      return noteTrackingCategoryObservable.value ? symptom : null
+    } else {
+      return symptom
+    }
+  })
+  const cleanSymptoms = allEnabledSymptoms.filter(Boolean)
+
   return (
     <AppPage>
       <SymptomPageTitle
@@ -35,7 +68,7 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
         onPrevCycleDay={showPrevCycleDay}
       />
       <View style={styles.container}>
-        {SYMPTOMS.map((symptom) => {
+        {cleanSymptoms.map((symptom) => {
           const symptomData =
             cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
 

components/cycle-day/select-tab-group.js

@@ -1,22 +1,61 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Alert, StyleSheet, TouchableOpacity, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
 import { Colors, Containers } from '../../styles'
+import labels from '../../i18n/en/settings'
+
+export default function SelectTabGroup({
+  activeButton,
+  buttons,
+  onSelect,
+  disabled,
+}) {
+  // TODO https://gitlab.com/bloodyhealth/drip/-/issues/707
+  const oneTimeTransformIntoNumber =
+    typeof activeButton === 'boolean' && Number(activeButton)
+  const isSecondarySymptomSwitch =
+    buttons[0]['label'] === labels.secondarySymptom.mucus
+
+  // Disable is only used for secondarySymptom in customization, if more come up maybe consider more tidy solution
+  const showDisabledAlert = (label) => {
+    if (
+      label === labels.secondarySymptom.cervix ||
+      label === labels.secondarySymptom.mucus
+    ) {
+      Alert.alert(
+        labels.secondarySymptom.disabled.title,
+        labels.secondarySymptom.disabled.message
+      )
+    }
+  }
 
-export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
   return (
     <View style={styles.container}>
       {buttons.map(({ label, value }, i) => {
-        const isActive = value === activeButton
-        const boxStyle = [styles.box, isActive && styles.boxActive]
-        const textStyle = [styles.text, isActive && styles.textActive]
+        const isActive =
+          value === activeButton || value === oneTimeTransformIntoNumber
+        const boxStyle = [
+          styles.box,
+          isActive && styles.boxActive,
+          isSecondarySymptomSwitch && styles.purpleBox,
+          isSecondarySymptomSwitch && isActive && styles.activePurpleBox,
+          disabled && styles.disabledBox,
+        ]
+        const textStyle = [
+          styles.text,
+          isSecondarySymptomSwitch && styles.purpleText,
+          isActive && styles.textActive,
+          disabled && styles.greyText,
+        ]
 
         return (
           <TouchableOpacity
-            onPress={() => onSelect(value)}
+            onPress={() =>
+              !disabled ? onSelect(value) : showDisabledAlert(label)
+            }
             key={i}
             style={boxStyle}
           >
@@ -32,6 +71,7 @@ SelectTabGroup.propTypes = {
   activeButton: PropTypes.number,
   buttons: PropTypes.array.isRequired,
   onSelect: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
@@ -50,4 +90,20 @@ const styles = StyleSheet.create({
   textActive: {
     color: 'white',
   },
+  purpleBox: {
+    borderColor: Colors.purple,
+  },
+  activePurpleBox: {
+    backgroundColor: Colors.purple,
+  },
+  purpleText: {
+    color: Colors.purple,
+  },
+  greyText: {
+    color: Colors.grey,
+  },
+  disabledBox: {
+    borderColor: Colors.grey,
+    backgroundColor: Colors.turquoiseLight,
+  },
 })

components/cycle-day/symptom-box.js

@@ -20,7 +20,7 @@ const SymptomBox = ({
   editedSymptom,
   setEditedSymptom,
 }) => {
-  const { t } = useTranslation(null, { keyPrefix: 'cycleDay.symptomBox' })
+  const { t } = useTranslation(null, { keyPrefix: 'symptoms' })
   const isSymptomEdited = editedSymptom === symptom
   const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
   const isExcluded = symptomData !== null ? symptomData.exclude : false

components/cycle-day/symptom-edit-view.js

@@ -15,6 +15,7 @@ import Temperature from './temperature'
 import { blank, save, shouldShow, symptomPage } from '../helpers/cycle-day'
 import { showToast } from '../helpers/general'
 
+import { fertilityTrackingObservable } from '../../local-storage'
 import { shared as sharedLabels } from '../../i18n/en/labels'
 import info from '../../i18n/en/symptom-info'
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
@@ -26,6 +27,8 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
   const isBleeding = symptom === 'bleeding'
   const getParsedData = () => JSON.parse(JSON.stringify(data))
   const onPressLearnMore = () => setShouldShowInfo(!shouldShowInfo)
+  const isFertilityTrackingEnabled = fertilityTrackingObservable.value
+
   const onEditNote = (note) => {
     const parsedData = getParsedData()
 
@@ -102,8 +105,7 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
   const onSelectTab = (group, value) => {
     const parsedData = getParsedData()
 
-    Object.assign(parsedData, { [group.key]: value })
-
+    parsedData[group.key] = parsedData[group.key] !== value ? value : null
     setData(parsedData)
   }
   const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
@@ -187,9 +189,18 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
               </Segment>
             )
           })}
-
-        {!isBleeding && excludeToggle}
-
+        {/* show exclude AppSwitch for bleeding, mucus, cervix, temperature */}
+        {/* but if fertility is off only for bleeding */}
+        {shouldShow(symptomConfig.excludeText) &&
+          (symptom === 'bleeding' || isFertilityTrackingEnabled) && (
+            <Segment style={styles.segmentBorder}>
+              <AppSwitch
+                onToggle={onExcludeToggle}
+                text={symtomPage[symptom].excludeText}
+                value={data.exclude}
+              />
+            </Segment>
+          )}
         {shouldShow(symptomConfig.note) && (
           <Segment style={styles.segmentBorder}>
             <AppText>{symptomPage[symptom].note}</AppText>

components/cycle-day/temperature.js

@@ -108,6 +108,7 @@ const styles = StyleSheet.create({
   hint: {
     fontStyle: 'italic',
     fontSize: Sizes.small,
+    color: Colors.orange,
   },
   hintContainer: {
     marginVertical: Spacing.tiny,