First step for fertilityTracking Toggle

components/settings/customization/index.js

@@ -10,6 +10,7 @@ import SelectTabGroup from '../../cycle-day/select-tab-group'
 
 import {
   desireTrackingCategoryObservable,
+  fertilityTrackingObservable,
   moodTrackingCategoryObservable,
   noteTrackingCategoryObservable,
   painTrackingCategoryObservable,
@@ -18,6 +19,7 @@ import {
   mucusTrackingCategoryObservable,
   cervixTrackingCategoryObservable,
   saveDesireTrackingCategory,
+  saveFertilityTrackingEnabled,
   saveMoodTrackingCategory,
   saveNoteTrackingCategory,
   savePainTrackingCategory,
@@ -75,8 +77,13 @@ const Settings = () => {
   const [isSecondarySymptomDisabled, setIsSecondarySymptomDisabled] =
     useState(false)
 
-  const [isEnabled, setIsEnabled] = useState(false)
+  const [isFertilityTrackingEnabled, setFertilityTrackingEnabled] = useState(
-  const toggleSwitch = () => setIsEnabled((previousState) => !previousState)
+    fertilityTrackingObservable.value
+  )
+  const fertilityTrackingToggle = (value) => {
+    setFertilityTrackingEnabled(value)
+    saveFertilityTrackingEnabled(value)
+  }
 
   const temperatureTrackingCategoryToggle = (value) => {
     setTemperatureTrackingCategory(value)
@@ -112,6 +119,11 @@ const Settings = () => {
     setPeriodPrediction(value)
     savePeriodPrediction(value)
   }
+
+  const fertilityTrackingText = isFertilityTrackingEnabled
+    ? labels.fertilityTracking.on
+    : labels.fertilityTracking.off
+
   const periodPredictionText = isPeriodPredictionEnabled
     ? labels.periodPrediction.on
     : labels.periodPrediction.off
@@ -234,12 +246,11 @@ const Settings = () => {
           value={isNoteTrackingCategoryEnabled}
         />
       </Segment>
-
+      <Segment title={labels.fertilityTracking.title}>
-      <Segment title={'Fertility feature'}>
         <AppSwitch
-          onToggle={toggleSwitch}
+          onToggle={fertilityTrackingToggle}
-          text={'If turned on ...'}
+          text={fertilityTrackingText}
-          value={isEnabled}
+          value={isFertilityTrackingEnabled}
         />
       </Segment>
 

i18n/en/settings.js

@@ -66,6 +66,11 @@ export default {
         'To use the period reminder please first enable period predictions in the customization settings.',
     },
   },
+  fertilityTracking: {
+    title: 'Fertility phases calculation',
+    on: 'The quick brown fox jumps over the lazy dog',
+    off: 'No no',
+  },
   secondarySymptom: {
     title: 'Secondary symptom',
     cervixModeOn:

local-storage.js

@@ -170,6 +170,14 @@ export async function saveNoteTrackingCategory(bool) {
   noteTrackingCategoryObservable.set(bool)
 }
 
+export const fertilityTrackingObservable = Observable()
+setObvWithInitValue('fertilityTracking', fertilityTrackingObservable, true)
+
+export async function saveFertilityTrackingEnabled(bool) {
+  await AsyncStorage.setItem('fertilityTracking', JSON.stringify(bool))
+  fertilityTrackingObservable.set(bool)
+}
+
 async function setObvWithInitValue(key, obv, defaultValue) {
   const result = await AsyncStorage.getItem(key)
   let value