Add functionality to turn on/off period predictions

components/settings/customization/index.js

@@ -6,7 +6,12 @@ import AppText from '../../common/app-text'
 import TemperatureSlider from './temperature-slider'
 import Segment from '../../common/segment'
 
-import { useCervixObservable, saveUseCervix } from '../../../local-storage'
+import {
+  periodPredictionObservable,
+  savePeriodPrediction,
+  useCervixObservable,
+  saveUseCervix,
+} from '../../../local-storage'
 import { Colors } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 
@@ -15,9 +20,22 @@ const Settings = () => {
     useCervixObservable.value
   )
 
-  const [isEnabled, setIsEnabled] = useState(true)
+  const [isPeriodPredictionEnabled, setPeriodPrediction] = useState(
+    periodPredictionObservable.value
+  )
+
+  const [isEnabled, setIsEnabled] = useState(false)
   const toggleSwitch = () => setIsEnabled((previousState) => !previousState)
 
+  const onPeriodPredictionToggle = (value) => {
+    setPeriodPrediction(value)
+    savePeriodPrediction(value)
+  }
+
+  const periodPredictionText = isPeriodPredictionEnabled
+    ? labels.periodPrediction.on
+    : labels.periodPrediction.off
+
   const onCervixToggle = (value) => {
     setShouldUseCervix(value)
     saveUseCervix(value)
@@ -103,13 +121,11 @@ const Settings = () => {
         />
       </Segment>
 
-      <Segment title={'Period prediction'}>
+      <Segment title={labels.periodPrediction.title} last>
         <AppSwitch
-          onToggle={toggleSwitch}
+          onToggle={onPeriodPredictionToggle}
-          text={
+          text={periodPredictionText}
-            'If turned on drip will predict your next menstrual bleeding, after you have tracked 3 complete menstrual cycles.'
+          value={isPeriodPredictionEnabled}
-          }
-          value={isEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
       </Segment>

i18n/en/settings.js

@@ -58,6 +58,11 @@ export default {
     cervixModeOff:
       'By default, cervical mucus values are being used for symptothermal fertility detection. You can switch here to use cervix values for symptothermal fertility detection',
   },
+  periodPrediction: {
+    title: 'Period prediction',
+    on: 'drip predicts your 3 next menstrual bleedings based on the statistics of your previously tracked cycles, min 3 complete cycles.',
+    off: 'There are no predictions for menstrual cycles displayed. If turned on the calendar and on home period predictions will be displayed.',
+  },
   passwordSettings: {
     title: 'App password',
     explainerDisabled:

local-storage.js

@@ -44,6 +44,16 @@ export async function savePeriodReminder(reminder) {
   periodReminderObservable.set(reminder)
 }
 
+export const periodPredictionObservable = Observable()
+setObvWithInitValue('periodPrediction', periodPredictionObservable, {
+  enabled: true,
+})
+
+export async function savePeriodPrediction(bool) {
+  await AsyncStorage.setItem('periodPrediction', JSON.stringify(bool))
+  periodPredictionObservable.set(bool)
+}
+
 export const useCervixObservable = Observable()
 setObvWithInitValue('useCervix', useCervixObservable, false)