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

Feature: customize tracking categories temperature

See merge request bloodyhealth/drip!650

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}>
-        <AppText>{labels.tempScale.segmentExplainer}</AppText>
-        <TemperatureSlider />
-      </Segment>
+      <Pressable onPress={sliderDisabledPrompt}>
+        <Segment title={labels.tempScale.segmentTitle}>
+          {isTemperatureTrackingCategoryEnabled && (
+            <>
+              <AppText>{labels.tempScale.segmentExplainer}</AppText>
+              <TemperatureSlider />
+            </>
+          )}
+          {!isTemperatureTrackingCategoryEnabled && (
+            <AppText>{labels.disabled.message}</AppText>
+          )}
+        </Segment>
+      </Pressable>
 
-      <Segment title={labels.useCervix.title}>
-        <AppSwitch
-          onToggle={onCervixToggle}
-          text={cervixText}
-          value={shouldUseCervix}
-          trackColor={{ true: Colors.turquoiseDark }}
-        />
-      </Segment>
+      <Pressable onPress={sliderDisabledPrompt}>
+        <Segment title={labels.useCervix.title}>
+          {isTemperatureTrackingCategoryEnabled && (
+            <AppSwitch
+              onToggle={onCervixToggle}
+              text={cervixText}
+              value={shouldUseCervix}
+              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>
-        <TemperatureReminder />
-      </Segment>
+      <Pressable onPress={tempReminderDisabledPrompt}>
+        <Segment title={labels.tempReminder.title} last>
+          <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}