Merge branch '683-ui-scaffold-for-customization' into 'main'

Resolve "UI scaffold for customization"

Closes #683

See merge request bloodyhealth/drip!642

components/common/app-switch.js

@@ -6,13 +6,18 @@ import AppText from './app-text'
 
 import { Containers } from '../../styles'
 
-const AppSwitch = ({ onToggle, text, value }) => {
+const AppSwitch = ({ onToggle, text, value, trackColor }) => {
   return (
     <View style={styles.container}>
       <View style={styles.textContainer}>
         <AppText>{text}</AppText>
       </View>
-      <Switch onValueChange={onToggle} style={styles.switch} value={value} />
+      <Switch
+        onValueChange={onToggle}
+        style={styles.switch}
+        value={value}
+        trackColor={trackColor}
+      />
     </View>
   )
 }
@@ -21,6 +26,7 @@ AppSwitch.propTypes = {
   onToggle: PropTypes.func.isRequired,
   text: PropTypes.string,
   value: PropTypes.bool,
+  trackColor: PropTypes.string,
 }
 
 const styles = StyleSheet.create({

components/pages.js

@@ -37,13 +37,17 @@ export const pages = [
     parent: 'SettingsMenu',
   },
   {
-    component: 'NfpSettings',
+    component: 'Customization',
     parent: 'SettingsMenu',
   },
   {
     component: 'DataManagement',
     parent: 'SettingsMenu',
   },
+  {
+    component: 'Info',
+    parent: 'SettingsMenu',
+  },
   {
     component: 'Password',
     parent: 'SettingsMenu',

components/settings/Info.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+
+import AppIcon from '../common/app-icon'
+import AppPage from '../common/app-page'
+import AppText from '../common/app-text'
+import Segment from '../common/segment'
+
+import { Colors, Spacing, Typography } from '../../styles'
+import labels from '../../i18n/en/settings'
+
+const Info = () => {
+  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.info' })
+  return (
+    <AppPage title={t('title')}>
+      <Segment last>
+        <View style={styles.line}>
+          <AppIcon
+            color={Colors.purple}
+            name="info-with-circle"
+            style={styles.icon}
+          />
+          <AppText style={styles.title}>{labels.preOvu.title}</AppText>
+        </View>
+        <AppText>{labels.preOvu.note}</AppText>
+      </Segment>
+    </AppPage>
+  )
+}
+
+Info.propTypes = {
+  children: PropTypes.node,
+}
+
+export default Info
+
+const styles = StyleSheet.create({
+  icon: {
+    marginRight: Spacing.base,
+  },
+  line: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    ...Typography.subtitle,
+  },
+})

components/settings/customization/index.js

@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+
+import AppPage from '../../common/app-page'
+import AppSwitch from '../../common/app-switch'
+import AppText from '../../common/app-text'
+import TemperatureSlider from './temperature-slider'
+import Segment from '../../common/segment'
+
+import { useCervixObservable, saveUseCervix } from '../../../local-storage'
+import { Colors } from '../../../styles'
+import labels from '../../../i18n/en/settings'
+
+const Settings = () => {
+  const [shouldUseCervix, setShouldUseCervix] = useState(
+    useCervixObservable.value
+  )
+
+  const [isEnabled, setIsEnabled] = useState(true)
+  const toggleSwitch = () => setIsEnabled((previousState) => !previousState)
+
+  const onCervixToggle = (value) => {
+    setShouldUseCervix(value)
+    saveUseCervix(value)
+  }
+
+  const cervixText = shouldUseCervix
+    ? labels.useCervix.cervixModeOn
+    : labels.useCervix.cervixModeOff
+
+  return (
+    <AppPage title={'Customization'}>
+      <Segment title={'Tracking categories'}>
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'temperature'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'cervical mucus'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'cervix'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'sex'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'desire'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'pain'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'mood'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'note'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+      </Segment>
+
+      <Segment title={'Fertility feature'}>
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={'If turned on ...'}
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+      </Segment>
+
+      <Segment title={labels.tempScale.segmentTitle}>
+        <AppText>{labels.tempScale.segmentExplainer}</AppText>
+        <TemperatureSlider />
+      </Segment>
+
+      <Segment title={labels.useCervix.title}>
+        <AppSwitch
+          onToggle={onCervixToggle}
+          text={cervixText}
+          value={shouldUseCervix}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+      </Segment>
+
+      <Segment title={'Period prediction'}>
+        <AppSwitch
+          onToggle={toggleSwitch}
+          text={
+            'If turned on drip will predict your next menstrual bleeding, after you have tracked 3 complete menstrual cycles.'
+          }
+          value={isEnabled}
+          trackColor={{ true: Colors.turquoiseDark }}
+        />
+      </Segment>
+    </AppPage>
+  )
+}
+
+export default Settings

components/settings/index.js

@@ -1,6 +1,7 @@
 import Reminders from './reminders/reminders'
-import NfpSettings from './nfp-settings'
+import Customization from './customization'
 import DataManagement from './data-management/DataManagement'
+import Info from './Info'
 import Password from './password'
 import About from './About'
 import License from './License'
@@ -8,8 +9,9 @@ import PrivacyPolicy from './privacy-policy'
 
 export default {
   Reminders,
-  NfpSettings,
+  Customization,
   DataManagement,
+  Info,
   Password,
   About,
   License,

components/settings/nfp-settings/index.js

@@ -1,73 +0,0 @@
-import React, { useState } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
-
-import AppIcon from '../../common/app-icon'
-import AppPage from '../../common/app-page'
-import AppSwitch from '../../common/app-switch'
-import AppText from '../../common/app-text'
-import TemperatureSlider from './temperature-slider'
-import Segment from '../../common/segment'
-
-import { useCervixObservable, saveUseCervix } from '../../../local-storage'
-import { Colors, Spacing, Typography } from '../../../styles'
-import labels from '../../../i18n/en/settings'
-
-const Settings = () => {
-  const [shouldUseCervix, setShouldUseCervix] = useState(
-    useCervixObservable.value
-  )
-
-  const onCervixToggle = (value) => {
-    setShouldUseCervix(value)
-    saveUseCervix(value)
-  }
-
-  const cervixText = shouldUseCervix
-    ? labels.useCervix.cervixModeOn
-    : labels.useCervix.cervixModeOff
-
-  return (
-    <AppPage>
-      <Segment title={labels.useCervix.title}>
-        <AppSwitch
-          onToggle={onCervixToggle}
-          text={cervixText}
-          value={shouldUseCervix}
-        />
-      </Segment>
-      {/* for iOS disabled temporarily, TODO https://gitlab.com/bloodyhealth/drip/-/issues/545 */}
-      {Platform.OS !== 'ios' && (
-        <Segment title={labels.tempScale.segmentTitle}>
-          <AppText>{labels.tempScale.segmentExplainer}</AppText>
-          <TemperatureSlider />
-        </Segment>
-      )}
-      <Segment last>
-        <View style={styles.line}>
-          <AppIcon
-            color={Colors.purple}
-            name="info-with-circle"
-            style={styles.icon}
-          />
-          <AppText style={styles.title}>{labels.preOvu.title}</AppText>
-        </View>
-        <AppText>{labels.preOvu.note}</AppText>
-      </Segment>
-    </AppPage>
-  )
-}
-
-export default Settings
-
-const styles = StyleSheet.create({
-  icon: {
-    marginRight: Spacing.base,
-  },
-  line: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  title: {
-    ...Typography.subtitle,
-  },
-})

components/settings/settings-menu.js

@@ -7,10 +7,11 @@ import MenuItem from './menu-item'
 import { useTranslation } from 'react-i18next'
 
 const menuItems = [
+  { label: 'customization', componentName: 'Customization' },
   { label: 'reminders', componentName: 'Reminders' },
-  { label: 'nfpSettings', componentName: 'NfpSettings' },
   { label: 'dataManagement', componentName: 'DataManagement' },
   { label: 'password', componentName: 'Password' },
+  { label: 'info', componentName: 'Info' },
 ]
 
 const SettingsMenu = ({ navigate }) => {

i18n/en.json

@@ -116,9 +116,9 @@
           "name": "Data",
           "text": "import, export or delete your data"
         },
-        "nfpSettings": {
-          "name": "NFP settings",
-          "text": "define how you want to use NFP"
+        "customization": {
+          "name": "Customization",
+          "text": "define how you want to use drip"
         },
         "password": {
           "name": "Password",
@@ -127,9 +127,16 @@
         "reminders": {
           "name": "Reminders",
           "text": "turn on/off reminders"
+        },
+        "info": {
+          "name": "Info",
+          "text": "Learn more about how drip works"
         }
       },
       "title": "Settings"
+    },
+    "info": {
+      "title": "info"
     }
   },
   "stats": {