Merge branch 'feature/Customize-tracking-categories-temperature' into 'main'

Feature: customize tracking categories temperature

See merge request bloodyhealth/drip!650

components/chart/chart.js

@@ -21,6 +21,7 @@ import {
   noteTrackingCategoryObservable,
   painTrackingCategoryObservable,
   sexTrackingCategoryObservable,
+  temperatureTrackingCategoryObservable,
 } from '../../local-storage'
 import { makeColumnInfo } from '../helpers/chart'
 
@@ -84,7 +85,11 @@ const CycleChart = ({ navigate, setDate }) => {
     }
   })
 
-  const shouldShowTemperatureColumn = chartSymptoms.indexOf('temperature') > -1
+  const isTemperatureEnabled = temperatureTrackingCategoryObservable.value
+  const shouldShowTemperatureColumn =
+    isTemperatureEnabled && chartSymptoms.indexOf('temperature') > -1
+  const shouldShowNoDataWarning =
+    isTemperatureEnabled && chartSymptoms.indexOf('temperature') <= -1
 
   const { width, height } = Dimensions.get('window')
   const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
@@ -135,7 +140,7 @@ const CycleChart = ({ navigate, setDate }) => {
     >
       <View style={styles.chartContainer}>
         {shouldShowHint && <Tutorial onClose={hideHint} />}
-        {!shouldShowTemperatureColumn && <NoTemperature />}
+        {shouldShowNoDataWarning && <NoTemperature />}
         <View style={styles.chartArea}>
           <YAxis
             height={columnHeight}

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

@@ -15,6 +15,7 @@ import {
   noteTrackingCategoryObservable,
   painTrackingCategoryObservable,
   sexTrackingCategoryObservable,
+  temperatureTrackingCategoryObservable,
 } from '../../local-storage'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
@@ -35,7 +36,9 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
   }
 
   const allEnabledSymptoms = SYMPTOMS.map((symptom) => {
-    if (symptom === 'sex') {
+    if (symptom === 'temperature') {
+      return temperatureTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'sex') {
       return sexTrackingCategoryObservable.value ? symptom : null
     } else if (symptom === 'desire') {
       return desireTrackingCategoryObservable.value ? symptom : null

components/settings/customization/index.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { Alert, Pressable } from 'react-native'
 
 import AppPage from '../../common/app-page'
 import AppSwitch from '../../common/app-switch'
@@ -12,18 +13,21 @@ import {
   noteTrackingCategoryObservable,
   painTrackingCategoryObservable,
   sexTrackingCategoryObservable,
+  temperatureTrackingCategoryObservable,
   saveDesireTrackingCategory,
   saveMoodTrackingCategory,
   saveNoteTrackingCategory,
   savePainTrackingCategory,
   savePeriodPrediction,
   saveSexTrackingCategory,
+  saveTemperatureTrackingCategory,
   saveUseCervix,
   periodPredictionObservable,
   useCervixObservable,
 } from '../../../local-storage'
 import { Colors } from '../../../styles'
 import labels from '../../../i18n/en/settings'
+import { SYMPTOMS } from '../../../config'
 
 const Settings = () => {
   const [shouldUseCervix, setShouldUseCervix] = useState(
@@ -34,6 +38,9 @@ const Settings = () => {
     periodPredictionObservable.value
   )
 
+  const [isTemperatureTrackingCategoryEnabled, setTemperatureTrackingCategory] =
+    useState(temperatureTrackingCategoryObservable.value)
+
   const [isSexTrackingCategoryEnabled, setSexTrackingCategory] = useState(
     sexTrackingCategoryObservable.value
   )
@@ -57,6 +64,11 @@ const Settings = () => {
   const [isEnabled, setIsEnabled] = useState(false)
   const toggleSwitch = () => setIsEnabled((previousState) => !previousState)
 
+  const temperatureTrackingCategoryToggle = (value) => {
+    setTemperatureTrackingCategory(value)
+    saveTemperatureTrackingCategory(value)
+  }
+
   const sexTrackingCategoryToggle = (value) => {
     setSexTrackingCategory(value)
     saveSexTrackingCategory(value)
@@ -97,36 +109,47 @@ const Settings = () => {
     ? labels.useCervix.cervixModeOn
     : labels.useCervix.cervixModeOff
 
+  const sliderDisabledPrompt = () => {
+    if (!isTemperatureTrackingCategoryEnabled) {
+      Alert.alert(labels.disabled.title, labels.disabled.message)
+    }
+  }
   return (
     <AppPage title={'Customization'}>
       <Segment title={'Tracking categories'}>
+        <AppSwitch
+          onToggle={temperatureTrackingCategoryToggle}
+          text={SYMPTOMS[1]}
+          value={isTemperatureTrackingCategoryEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
         <AppSwitch
           onToggle={sexTrackingCategoryToggle}
-          text={"sex: when turned off it won't show"}
+          text={SYMPTOMS[4]}
           value={isSexTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={desireTrackingCategoryToggle}
-          text={"desire: when turned off it won't show"}
+          text={SYMPTOMS[5]}
           value={isDesireTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={painTrackingCategoryToggle}
-          text={"pain: when turned off it won't show"}
+          text={SYMPTOMS[6]}
           value={isPainTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={moodTrackingCategoryToggle}
-          text={"mood: when turned off it won't show"}
+          text={SYMPTOMS[7]}
           value={isMoodTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={noteTrackingCategoryToggle}
-          text={"note: when turned off it won't show"}
+          text={SYMPTOMS[8]}
           value={isNoteTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
@@ -141,19 +164,35 @@ const Settings = () => {
         />
       </Segment>
 
-      <Segment title={labels.tempScale.segmentTitle}>
+      <Pressable onPress={sliderDisabledPrompt}>
-        <AppText>{labels.tempScale.segmentExplainer}</AppText>
+        <Segment title={labels.tempScale.segmentTitle}>
-        <TemperatureSlider />
+          {isTemperatureTrackingCategoryEnabled && (
-      </Segment>
+            <>
+              <AppText>{labels.tempScale.segmentExplainer}</AppText>
+              <TemperatureSlider />
+            </>
+          )}
+          {!isTemperatureTrackingCategoryEnabled && (
+            <AppText>{labels.disabled.message}</AppText>
+          )}
+        </Segment>
+      </Pressable>
 
-      <Segment title={labels.useCervix.title}>
+      <Pressable onPress={sliderDisabledPrompt}>
-        <AppSwitch
+        <Segment title={labels.useCervix.title}>
-          onToggle={onCervixToggle}
+          {isTemperatureTrackingCategoryEnabled && (
-          text={cervixText}
+            <AppSwitch
-          value={shouldUseCervix}
+              onToggle={onCervixToggle}
-          trackColor={{ true: Colors.turquoiseDark }}
+              text={cervixText}
-        />
+              value={shouldUseCervix}
-      </Segment>
+              trackColor={{ true: Colors.turquoiseDark }}
+            />
+          )}
+          {!isTemperatureTrackingCategoryEnabled && (
+            <AppText>{labels.disabled.message}</AppText>
+          )}
+        </Segment>
+      </Pressable>
 
       <Segment title={labels.periodPrediction.title} last>
         <AppSwitch

components/settings/reminders/reminders.js

@@ -9,6 +9,7 @@ import {
   periodReminderObservable,
   savePeriodReminder,
   periodPredictionObservable,
+  temperatureTrackingCategoryObservable,
 } from '../../../local-storage'
 
 import labels from '../../../i18n/en/settings'
@@ -34,6 +35,14 @@ const Reminders = () => {
     }
   }
 
+  const tempReminderDisabledPrompt = () => {
+    if (!temperatureTrackingCategoryObservable.value) {
+      Alert.alert(
+        labels.tempReminder.alertNoTempReminder.title,
+        labels.tempReminder.alertNoTempReminder.message
+      )
+    }
+  }
   return (
     <AppPage>
       <Pressable onPress={reminderDisabledPrompt}>
@@ -46,9 +55,11 @@ const Reminders = () => {
           />
         </Segment>
       </Pressable>
-      <Segment title={labels.tempReminder.title} last>
+      <Pressable onPress={tempReminderDisabledPrompt}>
-        <TemperatureReminder />
+        <Segment title={labels.tempReminder.title} last>
-      </Segment>
+          <TemperatureReminder />
+        </Segment>
+      </Pressable>
     </AppPage>
   )
 }

components/settings/reminders/temperature-reminder.js

@@ -7,6 +7,7 @@ import AppSwitch from '../../common/app-switch'
 import {
   saveTempReminder,
   tempReminderObservable,
+  temperatureTrackingCategoryObservable,
 } from '../../../local-storage'
 import padWithZeros from '../../helpers/pad-time-with-zeros'
 
@@ -51,6 +52,7 @@ const TemperatureReminder = () => {
         onToggle={temperatureReminderToggle}
         text={tempReminderText}
         value={isEnabled}
+        disabled={!temperatureTrackingCategoryObservable.value}
       />
       <DateTimePicker
         isVisible={isTimePickerVisible}

i18n/en/settings.js

@@ -38,11 +38,21 @@ export default {
     loadError: 'Could not load saved temperature scale settings',
     saveError: 'Could not save temperature scale settings',
   },
+  disabled: {
+    title: 'This feature is turned off',
+    message:
+      'Please first enable the temperature tracking category in the customization settings.',
+  },
   tempReminder: {
     title: 'Temperature reminder',
     noTimeSet: 'Set a time for a daily reminder to take your temperature',
     timeSet: (time) => `Daily reminder set for ${time}`,
     notification: 'Record your morning temperature',
+    alertNoTempReminder: {
+      title: 'Temperature turned off',
+      message:
+        'To use the temperature reminder please first enable the temperature tracking category in the customization settings.',
+    },
   },
   periodReminder: {
     title: 'Next period reminder',

local-storage.js

@@ -92,6 +92,21 @@ export async function setChartFlag() {
   await AsyncStorage.setItem('isFirstChartView', JSON.stringify(false))
 }
 
+export const temperatureTrackingCategoryObservable = Observable()
+setObvWithInitValue('temperature', temperatureTrackingCategoryObservable, true)
+
+export async function saveTemperatureTrackingCategory(bool) {
+  await AsyncStorage.setItem('temperature', JSON.stringify(bool))
+  temperatureTrackingCategoryObservable.set(bool)
+
+  if (!temperatureTrackingCategoryObservable.value) {
+    const result = await AsyncStorage.getItem('tempReminder')
+    if (JSON.parse(result).enabled) {
+      tempReminderObservable.set(false)
+    }
+  }
+}
+
 export const sexTrackingCategoryObservable = Observable()
 setObvWithInitValue('sex', sexTrackingCategoryObservable, true)