disable temperature slider when fertility or temperature turned off

components/settings/customization/disabled-temperature-slider.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import Slider from '@ptomasroos/react-native-multi-slider'
+
+import SliderLabel from './slider-label'
+
+import { scaleObservable } from '../../../local-storage'
+import { Colors, Sizes } from '../../../styles'
+
+import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
+
+const DisabledTemperatureSlider = () => {
+  const savedValue = scaleObservable.value
+  const minTemperature = savedValue.min
+  const maxTemperature = savedValue.max
+
+  return (
+    <View style={styles.container}>
+      <Slider
+        customLabel={SliderLabel}
+        enableLabel={true}
+        markerStyle={styles.marker}
+        markerOffsetY={Sizes.tiny}
+        max={TEMP_MAX}
+        min={TEMP_MIN}
+        selectedStyle={styles.sliderAccentBackground}
+        step={TEMP_SLIDER_STEP}
+        trackStyle={styles.slider}
+        unselectedStyle={styles.sliderBackground}
+        values={[minTemperature, maxTemperature]}
+        enabledOne={false}
+        enabledTwo={false}
+      />
+    </View>
+  )
+}
+
+export default DisabledTemperatureSlider
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingTop: Sizes.base,
+  },
+  marker: {
+    backgroundColor: Colors.grey,
+    borderRadius: 50,
+    elevation: 4,
+    height: Sizes.subtitle,
+    width: Sizes.subtitle,
+  },
+  slider: {
+    borderRadius: 25,
+    height: Sizes.small,
+  },
+  sliderAccentBackground: {
+    backgroundColor: Colors.grey,
+  },
+  sliderBackground: {
+    backgroundColor: Colors.greyLight,
+  },
+})

components/settings/customization/index.js

@@ -19,6 +19,8 @@ import {
   temperatureTrackingCategoryObservable,
   mucusTrackingCategoryObservable,
   cervixTrackingCategoryObservable,
+  periodPredictionObservable,
+  useCervixAsSecondarySymptomObservable,
   saveDesireTrackingCategory,
   saveFertilityTrackingEnabled,
   saveMoodTrackingCategory,
@@ -30,11 +32,10 @@ import {
   saveSexTrackingCategory,
   saveTemperatureTrackingCategory,
   saveUseCervixAsSecondarySymptom,
-  periodPredictionObservable,
-  useCervixAsSecondarySymptomObservable,
 } from '../../../local-storage'
 import labels from '../../../i18n/en/settings'
 import { SYMPTOMS } from '../../../config'
+import DisabledTemperatureSlider from './disabled-temperature-slider'
 
 const Settings = () => {
   const { t } = useTranslation(null, { keyPrefix: 'symptoms' })
@@ -143,17 +144,11 @@ const Settings = () => {
     },
   ]
 
-  // NOTE: when disabled (!isFertilityTrackingEnabled) button press doesn't yet trigger alert
   const onSelectTab = (value) => {
     if (isMucusTrackingCategoryEnabled && isCervixTrackingCategoryEnabled) {
       setUseCervixAsSecondarySymptom(value)
       saveUseCervixAsSecondarySymptom(value)
-      console.log('show SecSymp value :>> ', value)
-    } else if (!isFertilityTrackingEnabled) {
-      console.log('2 show SecSymp value :>> ', value)
-      secondarySymptomDisabledPrompt()
     } else {
-      console.log('3 show SecSymp value :>> ', value)
       secondarySymptomDisabledPrompt()
     }
   }
@@ -208,8 +203,8 @@ const Settings = () => {
     : labels.secondarySymptom.cervixModeOff
 
   const sliderDisabledPrompt = () => {
-    if (!isTemperatureTrackingCategoryEnabled) {
-      Alert.alert(labels.disabled.title, labels.disabled.message)
+    if (!isFertilityTrackingEnabled) {
+      Alert.alert(labels.tempScale.disabled, labels.tempScale.disabledMessage)
     }
   }
 
@@ -219,8 +214,6 @@ const Settings = () => {
     }
   }
 
-  console.log('useCervixAsSecondarySymptom :>> ', useCervixAsSecondarySymptom)
-
   return (
     <AppPage title={labels.customization.title}>
       <Segment title={labels.customization.trackingCategories}>
@@ -280,19 +273,19 @@ const Settings = () => {
           />
         </Segment>
       </Pressable>
-
-      {/* NOTE: still needs to be greyed out and not moveable */}
+      {/* Not ideal to have a extra DisabledTemperatureSlider but right now hard to have always the correct state of fertilityTrackingObservable in TemperatureSlider */}
       <Pressable onPress={sliderDisabledPrompt}>
         <Segment title={labels.tempScale.segmentTitle}>
-          {/* {isTemperatureTrackingCategoryEnabled && (
-          <> */}
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
-          <TemperatureSlider />
-          {/* </>
-        )}
-        {!isTemperatureTrackingCategoryEnabled && (
-          <AppText>{labels.disabled.message}</AppText>
-        )} */}
+          {isTemperatureTrackingCategoryEnabled & isFertilityTrackingEnabled ? (
+            <>
+              <TemperatureSlider />
+            </>
+          ) : (
+            <>
+              <DisabledTemperatureSlider />
+            </>
+          )}
         </Segment>
       </Pressable>
 

i18n/en/settings.js

@@ -41,12 +41,11 @@ export default {
     max: 'Max',
     loadError: 'Could not load saved temperature scale settings',
     saveError: 'Could not save temperature scale settings',
+    disabled: 'Disabled',
+    disabledMessage:
+      'To use the temperature scale please first enable both temperature tracking and fertility phase calculation above.',
   },
-  disabled: {
-    title: 'This feature is turned off',
-    message:
-      'To use the temperature scale please first enable the temperature tracking category above.',
-  },
+
   tempReminder: {
     title: 'Temperature reminder',
     noTimeSet: 'Set a time for a daily reminder to take your temperature',