enabling alert for disabled button in tab group

components/cycle-day/select-tab-group.js

@@ -1,6 +1,6 @@
 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'
 
@@ -19,6 +19,16 @@ export default function SelectTabGroup({
   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 showDisableAlert = (label) => {
+    if (label === 'cervix' || 'mucus') {
+      Alert.alert(
+        labels.secondarySymptom.disabled.title,
+        labels.secondarySymptom.disabled.message
+      )
+    }
+  }
+
   return (
     <View style={styles.container}>
       {buttons.map(({ label, value }, i) => {
@@ -40,7 +50,9 @@ export default function SelectTabGroup({
 
         return (
           <TouchableOpacity
-            onPress={() => !disabled && onSelect(value)}
+            onPress={() =>
+              !disabled ? onSelect(value) : showDisableAlert(label)
+            }
             key={i}
             style={boxStyle}
           >

components/settings/customization/index.js

@@ -148,7 +148,12 @@ const Settings = () => {
     if (isMucusTrackingCategoryEnabled && isCervixTrackingCategoryEnabled) {
       setUseCervixAsSecondarySymptom(value)
       saveUseCervixAsSecondarySymptom(value)
+      console.log('show SecSymp value :>> ', value)
+    } else if (!isFertilityTrackingEnabled) {
+      console.log('2 show SecSymp value :>> ', value)
+      secondarySymptomDisabledPrompt()
     } else {
+      console.log('3 show SecSymp value :>> ', value)
       secondarySymptomDisabledPrompt()
     }
   }