revision of customization texts and refactoring behavior when disabled

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 (
     <View style={styles.container}>
       {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 (
           <TouchableOpacity
-            onPress={() => 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,
+  },
 })

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 (
     <AppPage title={labels.customization.title}>
       <Segment title={labels.customization.trackingCategories}>
@@ -244,53 +264,42 @@ const Settings = () => {
           value={isNoteTrackingCategoryEnabled}
         />
       </Segment>
-      <Pressable onPress={sliderDisabledPrompt}>
+      <Pressable onPress={fertilityDisabledPrompt}>
         <Segment title={labels.fertilityTracking.title}>
-          {isTemperatureTrackingCategoryEnabled &&
-          (isMucusTrackingCategoryEnabled ||
-            isCervixTrackingCategoryEnabled) ? (
-            <>
-              <AppText>{labels.fertilityTracking.message}</AppText>
-              <AppSwitch
-                onToggle={fertilityTrackingToggle}
-                text={fertilityTrackingText}
-                value={isFertilityTrackingEnabled}
-              />
-            </>
-          ) : (
-            <AppText>{labels.disabled.message}</AppText>
-          )}
+          <AppText>{labels.fertilityTracking.message}</AppText>
+          <AppSwitch
+            onToggle={fertilityTrackingToggle}
+            text={fertilityTrackingText}
+            value={isFertilityTrackingEnabled}
+            disabled={!manageFertilityFeature}
+          />
         </Segment>
       </Pressable>
 
+      {/* NOTE: still needs to be greyed out and not moveable */}
       <Pressable onPress={sliderDisabledPrompt}>
         <Segment title={labels.tempScale.segmentTitle}>
-          {isTemperatureTrackingCategoryEnabled && (
-            <>
-              <AppText>{labels.tempScale.segmentExplainer}</AppText>
-              <TemperatureSlider />
-            </>
-          )}
-          {!isTemperatureTrackingCategoryEnabled && (
-            <AppText>{labels.disabled.message}</AppText>
-          )}
+          {/* {isTemperatureTrackingCategoryEnabled && (
+          <> */}
+          <AppText>{labels.tempScale.segmentExplainer}</AppText>
+          <TemperatureSlider />
+          {/* </>
+        )}
+        {!isTemperatureTrackingCategoryEnabled && (
+          <AppText>{labels.disabled.message}</AppText>
+        )} */}
         </Segment>
       </Pressable>
 
       <Pressable onPress={secondarySymptomDisabledPrompt}>
         <Segment title={labels.secondarySymptom.title}>
-          {!isFertilityTrackingEnabled ? (
-            <AppText>{labels.secondarySymptom.disabled.message}</AppText>
-          ) : (
-            <>
-              <AppText>{cervixText}</AppText>
-              <SelectTabGroup
-                activeButton={useCervixAsSecondarySymptom}
-                buttons={secondarySymptomButtons}
-                onSelect={(value) => onSelectTab(value)}
-              />
-            </>
-          )}
+          <AppText>{cervixText}</AppText>
+          <SelectTabGroup
+            activeButton={useCervixAsSecondarySymptom}
+            buttons={secondarySymptomButtons}
+            onSelect={(value) => onSelectTab(value)}
+            disabled={!isFertilityTrackingEnabled}
+          />
         </Segment>
       </Pressable>