diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js index f2839d7..25db72a 100644 --- a/components/cycle-day/select-tab-group.js +++ b/components/cycle-day/select-tab-group.js @@ -1,18 +1,34 @@ import React from 'react' import PropTypes from 'prop-types' -import { StyleSheet, TouchableOpacity, View } from 'react-native' +import { Alert, StyleSheet, TouchableOpacity, View } from 'react-native' import AppText from '../common/app-text' import { Colors, Containers } from '../../styles' import labels from '../../i18n/en/settings' -export default function SelectTabGroup({ activeButton, buttons, onSelect }) { -// TODO https://gitlab.com/bloodyhealth/drip/-/issues/707 +export default function SelectTabGroup({ + activeButton, + buttons, + onSelect, + disabled, +}) { + // TODO https://gitlab.com/bloodyhealth/drip/-/issues/707 const oneTimeTransformIntoNumber = typeof activeButton === 'boolean' && Number(activeButton) const isSecondarySymptomSwitch = buttons[0]['label'] === labels.secondarySymptom.mucus + + // Disable is only used for secondarySymptom in customization, if more come up maybe consider more tidy solution + const showDisabledAlert = (label) => { + if (label === 'cervix' || label === 'mucus') { + Alert.alert( + labels.secondarySymptom.disabled.title, + labels.secondarySymptom.disabled.message + ) + } + } + return ( {buttons.map(({ label, value }, i) => { @@ -23,16 +39,20 @@ export default function SelectTabGroup({ activeButton, buttons, onSelect }) { isActive && styles.boxActive, isSecondarySymptomSwitch && styles.purpleBox, isSecondarySymptomSwitch && isActive && styles.activePurpleBox, + disabled && styles.disabledBox, ] const textStyle = [ styles.text, isSecondarySymptomSwitch && styles.purpleText, isActive && styles.textActive, + disabled && styles.greyText, ] return ( onSelect(value)} + onPress={() => + !disabled ? onSelect(value) : showDisabledAlert(label) + } key={i} style={boxStyle} > @@ -48,6 +68,7 @@ SelectTabGroup.propTypes = { activeButton: PropTypes.number, buttons: PropTypes.array.isRequired, onSelect: PropTypes.func.isRequired, + disabled: PropTypes.bool, } const styles = StyleSheet.create({ @@ -75,4 +96,11 @@ const styles = StyleSheet.create({ purpleText: { color: Colors.purple, }, + greyText: { + color: Colors.grey, + }, + disabledBox: { + borderColor: Colors.grey, + backgroundColor: Colors.turquoiseLight, + }, }) diff --git a/components/settings/customization/index.js b/components/settings/customization/index.js index 6b236a5..d1381aa 100644 --- a/components/settings/customization/index.js +++ b/components/settings/customization/index.js @@ -20,6 +20,8 @@ import { temperatureTrackingCategoryObservable, mucusTrackingCategoryObservable, cervixTrackingCategoryObservable, + periodPredictionObservable, + useCervixAsSecondarySymptomObservable, saveDesireTrackingCategory, saveFertilityTrackingEnabled, saveMoodTrackingCategory, @@ -31,8 +33,6 @@ import { saveSexTrackingCategory, saveTemperatureTrackingCategory, saveUseCervixAsSecondarySymptom, - periodPredictionObservable, - useCervixAsSecondarySymptomObservable, } from '../../../local-storage' import labels from '../../../i18n/en/settings' import { SYMPTOMS } from '../../../config' @@ -81,6 +81,7 @@ const Settings = () => { const [isFertilityTrackingEnabled, setFertilityTrackingEnabled] = useState( fertilityTrackingObservable.value ) + const fertilityTrackingToggle = (value) => { setFertilityTrackingEnabled(value) saveFertilityTrackingEnabled(value) @@ -179,7 +180,14 @@ const Settings = () => { } const secondarySymptomDisabledPrompt = () => { - if (!isMucusTrackingCategoryEnabled == isCervixTrackingCategoryEnabled) { + if (!isFertilityTrackingEnabled) { + Alert.alert( + labels.secondarySymptom.disabled.title, + labels.secondarySymptom.disabled.message + ) + } else if ( + !isMucusTrackingCategoryEnabled == isCervixTrackingCategoryEnabled + ) { Alert.alert( labels.secondarySymptom.disabled.title, labels.secondarySymptom.disabled.noSecondaryEnabled @@ -187,13 +195,26 @@ const Settings = () => { } } + const manageFertilityFeature = + isTemperatureTrackingCategoryEnabled && + (isMucusTrackingCategoryEnabled || isCervixTrackingCategoryEnabled) + const cervixText = useCervixAsSecondarySymptom ? labels.secondarySymptom.cervixModeOn : labels.secondarySymptom.cervixModeOff const sliderDisabledPrompt = () => { if (!isTemperatureTrackingCategoryEnabled) { - Alert.alert(labels.disabled.title, labels.disabled.message) + Alert.alert(labels.tempScale.disabled, labels.tempScale.disabledMessage) + } + } + + const fertilityDisabledPrompt = () => { + if (!manageFertilityFeature) { + Alert.alert( + labels.fertilityTracking.disabledTitle, + labels.fertilityTracking.disabled + ) } } @@ -253,53 +274,34 @@ const Settings = () => { symptom={SYMPTOMS[8]} /> - + - {isTemperatureTrackingCategoryEnabled && - (isMucusTrackingCategoryEnabled || - isCervixTrackingCategoryEnabled) ? ( - <> - {labels.fertilityTracking.message} - - - ) : ( - {labels.disabled.message} - )} + {labels.fertilityTracking.message} + - {isTemperatureTrackingCategoryEnabled && ( - <> - {labels.tempScale.segmentExplainer} - - - )} - {!isTemperatureTrackingCategoryEnabled && ( - {labels.disabled.message} - )} + {labels.tempScale.segmentExplainer} + - {!isFertilityTrackingEnabled ? ( - {labels.secondarySymptom.disabled.message} - ) : ( - <> - {cervixText} - onSelectTab(value)} - /> - - )} + {cervixText} + onSelectTab(value)} + disabled={!isFertilityTrackingEnabled} + /> diff --git a/components/settings/customization/temperature-slider.js b/components/settings/customization/temperature-slider.js index 2019d55..7d91f7a 100644 --- a/components/settings/customization/temperature-slider.js +++ b/components/settings/customization/temperature-slider.js @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { StyleSheet, View } from 'react-native' +import PropTypes from 'prop-types' import Slider from '@ptomasroos/react-native-multi-slider' import alertError from '../common/alert-error' @@ -10,7 +11,7 @@ import { Colors, Sizes } from '../../../styles' import labels from '../../../i18n/en/settings' import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config' -const TemperatureSlider = () => { +const TemperatureSlider = ({ disabled }) => { const savedValue = scaleObservable.value const [minTemperature, setMinTemperature] = useState(savedValue.min) const [maxTemperature, setMaxTemperature] = useState(savedValue.max) @@ -25,6 +26,14 @@ const TemperatureSlider = () => { } } + const sliderAccentBackground = disabled + ? styles.disabledSliderAccentBackground + : styles.sliderAccentBackground + + const sliderBackground = disabled + ? styles.disabledSliderBackground + : styles.sliderBackground + return ( { max={TEMP_MAX} min={TEMP_MIN} onValuesChange={onTemperatureSliderChange} - selectedStyle={styles.sliderAccentBackground} step={TEMP_SLIDER_STEP} trackStyle={styles.slider} - unselectedStyle={styles.sliderBackground} values={[minTemperature, maxTemperature]} + enabledOne={!disabled} + enabledTwo={!disabled} + selectedStyle={sliderAccentBackground} + unselectedStyle={sliderBackground} /> ) @@ -47,6 +58,10 @@ const TemperatureSlider = () => { export default TemperatureSlider +TemperatureSlider.propTypes = { + disabled: PropTypes.bool, +} + const styles = StyleSheet.create({ container: { alignItems: 'center', @@ -54,6 +69,7 @@ const styles = StyleSheet.create({ }, marker: { backgroundColor: Colors.turquoiseDark, + borderRadius: 50, elevation: 4, height: Sizes.subtitle, @@ -66,7 +82,13 @@ const styles = StyleSheet.create({ sliderAccentBackground: { backgroundColor: Colors.turquoiseDark, }, + disabledSliderAccentBackground: { + backgroundColor: Colors.grey, + }, sliderBackground: { backgroundColor: Colors.turquoise, }, + disabledSliderBackground: { + backgroundColor: Colors.greyLight, + }, }) diff --git a/i18n/en/settings.js b/i18n/en/settings.js index 0e5f5a1..5748d02 100644 --- a/i18n/en/settings.js +++ b/i18n/en/settings.js @@ -36,17 +36,16 @@ export default { tempScale: { segmentTitle: 'Temperature scale', segmentExplainer: - 'Change the minimum and maximum value for the temperature chart', + 'Change the minimum and maximum value for the temperature chart.', min: 'Min', 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 temperature tracking 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', @@ -72,21 +71,24 @@ export default { }, fertilityTracking: { title: 'Fertility phases calculation', + disabledTitle: 'Disabled', + disabled: + 'To use fertility phases calculation please enable temperature tracking and cervical mucus or cervix tracking above.', message: - 'If you enter menstrual bleeding, temperature and cervical mucus or cervix data according to the sympto-thermal rules, drip will calculate cycle phases with the provided data.', + 'If you enter menstrual bleeding, temperature and cervical mucus or cervix data according to the sympto-thermal method, drip will calculate cycle phases with the provided data.', on: 'If you switch this off, drip will not show fertility related information.', off: 'If you switch this on, drip will show fertility related information.', }, secondarySymptom: { title: 'Secondary symptom', cervixModeOn: - 'Cervix values are being used for sympto-thermal fertility detection. You can switch here to use cervical mucus values for sympto-thermal fertility detection', + 'Cervix values are being used for fertility detection according to the sympto-thermal method.', cervixModeOff: - 'By default, cervical mucus values are being used for sympto-thermal fertility detection. You can switch here to use cervix values for sympto-thermal fertility detection', + 'Cervical mucus values are being used for fertility detection according to the sympto-thermal method.', disabled: { title: 'Disabled', message: - 'To set a secondary symptom please first enable the temperature, cervical mucus or cervix tracking category as well as the fertility feature above.', + 'To set a secondary symptom please first enable the cervical mucus or cervix tracking category as well as temperature and fertility phases calculation above.', noSecondaryEnabled: 'To switch the secondary symptom both cervical mucus and cervix need to be enabled above.', },