diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js index f2839d7..22c0c88 100644 --- a/components/cycle-day/select-tab-group.js +++ b/components/cycle-day/select-tab-group.js @@ -7,12 +7,18 @@ 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 + return ( {buttons.map(({ label, value }, i) => { @@ -23,16 +29,18 @@ export default function SelectTabGroup({ activeButton, buttons, onSelect }) { isActive && styles.boxActive, isSecondarySymptomSwitch && styles.purpleBox, isSecondarySymptomSwitch && isActive && styles.activePurpleBox, + disabled && styles.inActiveBox, ] const textStyle = [ styles.text, isSecondarySymptomSwitch && styles.purpleText, isActive && styles.textActive, + disabled && styles.greyText, ] return ( onSelect(value)} + onPress={() => !disabled && onSelect(value)} key={i} style={boxStyle} > @@ -75,4 +83,11 @@ const styles = StyleSheet.create({ purpleText: { color: Colors.purple, }, + greyText: { + color: Colors.grey, + }, + inActiveBox: { + borderColor: Colors.grey, + backgroundColor: Colors.turquoiseLight, + }, }) diff --git a/components/settings/customization/index.js b/components/settings/customization/index.js index 1d6cc3f..5614bd4 100644 --- a/components/settings/customization/index.js +++ b/components/settings/customization/index.js @@ -143,6 +143,7 @@ const Settings = () => { }, ] + // NOTE: when disabled (!isFertilityTrackingEnabled) button press doesn't yet trigger alert const onSelectTab = (value) => { if (isMucusTrackingCategoryEnabled && isCervixTrackingCategoryEnabled) { setUseCervixAsSecondarySymptom(value) @@ -178,7 +179,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 @@ -186,6 +194,10 @@ const Settings = () => { } } + const manageFertilityFeature = + isTemperatureTrackingCategoryEnabled && + (isMucusTrackingCategoryEnabled || isCervixTrackingCategoryEnabled) + const cervixText = useCervixAsSecondarySymptom ? labels.secondarySymptom.cervixModeOn : labels.secondarySymptom.cervixModeOff @@ -196,6 +208,14 @@ const Settings = () => { } } + const fertilityDisabledPrompt = () => { + if (!isFertilityTrackingEnabled) { + Alert.alert(labels.disabled.title, labels.fertilityTracking.disabled) + } + } + + console.log('useCervixAsSecondarySymptom :>> ', useCervixAsSecondarySymptom) + return ( @@ -244,53 +264,42 @@ const Settings = () => { value={isNoteTrackingCategoryEnabled} /> - + - {isTemperatureTrackingCategoryEnabled && - (isMucusTrackingCategoryEnabled || - isCervixTrackingCategoryEnabled) ? ( - <> - {labels.fertilityTracking.message} - - - ) : ( - {labels.disabled.message} - )} + {labels.fertilityTracking.message} + + {/* NOTE: still needs to be greyed out and not moveable */} - {isTemperatureTrackingCategoryEnabled && ( - <> - {labels.tempScale.segmentExplainer} - - - )} - {!isTemperatureTrackingCategoryEnabled && ( - {labels.disabled.message} - )} + {/* {isTemperatureTrackingCategoryEnabled && ( + <> */} + {labels.tempScale.segmentExplainer} + + {/* + )} + {!isTemperatureTrackingCategoryEnabled && ( + {labels.disabled.message} + )} */} - {!isFertilityTrackingEnabled ? ( - {labels.secondarySymptom.disabled.message} - ) : ( - <> - {cervixText} - onSelectTab(value)} - /> - - )} + {cervixText} + onSelectTab(value)} + disabled={!isFertilityTrackingEnabled} + /> diff --git a/i18n/en/settings.js b/i18n/en/settings.js index 6f4ae40..aec4513 100644 --- a/i18n/en/settings.js +++ b/i18n/en/settings.js @@ -36,7 +36,7 @@ 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', @@ -72,6 +72,8 @@ export default { }, fertilityTracking: { title: 'Fertility phases calculation', + disabled: + 'To use this feature please enable temperature tracking and cervical mucus or cervix tracking.', 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.', on: 'If you switch this off, drip will not show fertility related information.', @@ -80,13 +82,13 @@ export default { secondarySymptom: { title: 'Secondary symptom', cervixModeOn: - 'Cervix values are being used for symptothermal fertility detection. You can switch here to use cervical mucus values for symptothermal fertility detection', + 'Cervix values are being used for fertility detection according to the sympto-thermal rules.', 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', + 'Cervical mucus values are being used for fertility detection according to the sympto-thermal rules.', 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.', },