Add birth date gating to moderation settings (#1435)

* Add birth date preference, modal to set, link in settings, and age gate in moderation

* Styling fixes for android

* Fix types

src/view/com/modals/BirthDateSettings.tsx

@@ -0,0 +1,132 @@
+import React, {useState} from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {Text} from '../util/text/Text'
+import {DateInput} from '../util/forms/DateInput'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {useStores} from 'state/index'
+import {s, colors} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {cleanError} from 'lib/strings/errors'
+
+export const snapPoints = ['50%']
+
+export const Component = observer(function Component({}: {}) {
+  const pal = usePalette('default')
+  const store = useStores()
+  const [date, setDate] = useState<Date>(
+    store.preferences.birthDate || new Date(),
+  )
+  const [isProcessing, setIsProcessing] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+  const {isMobile} = useWebMediaQueries()
+
+  const onSave = async () => {
+    setError('')
+    setIsProcessing(true)
+    try {
+      await store.preferences.setBirthDate(date)
+      store.shell.closeModal()
+    } catch (e) {
+      setError(cleanError(String(e)))
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  return (
+    <View
+      testID="birthDateSettingsModal"
+      style={[pal.view, styles.container, isMobile && {paddingHorizontal: 18}]}>
+      <View style={styles.titleSection}>
+        <Text type="title-lg" style={[pal.text, styles.title]}>
+          My Birthday
+        </Text>
+      </View>
+
+      <Text type="lg" style={[pal.textLight, {marginBottom: 10}]}>
+        This information is not shared with other users.
+      </Text>
+
+      <View>
+        <DateInput
+          testID="birthdayInput"
+          value={date}
+          onChange={setDate}
+          buttonType="default-light"
+          buttonStyle={[pal.border, styles.dateInputButton]}
+          buttonLabelType="lg"
+          accessibilityLabel="Birthday"
+          accessibilityHint="Enter your birth date"
+          accessibilityLabelledBy="birthDate"
+        />
+      </View>
+
+      {error ? (
+        <ErrorMessage message={error} style={styles.error} />
+      ) : undefined}
+
+      <View style={[styles.btnContainer, pal.borderDark]}>
+        {isProcessing ? (
+          <View style={styles.btn}>
+            <ActivityIndicator color="#fff" />
+          </View>
+        ) : (
+          <TouchableOpacity
+            testID="confirmBtn"
+            onPress={onSave}
+            style={styles.btn}
+            accessibilityRole="button"
+            accessibilityLabel="Save"
+            accessibilityHint="">
+            <Text style={[s.white, s.bold, s.f18]}>Save</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingBottom: isWeb ? 0 : 40,
+  },
+  titleSection: {
+    paddingTop: isWeb ? 0 : 4,
+    paddingBottom: isWeb ? 14 : 10,
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: '600',
+    marginBottom: 5,
+  },
+  error: {
+    borderRadius: 6,
+    marginTop: 10,
+  },
+  dateInputButton: {
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingVertical: 14,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.blue3,
+  },
+  btnContainer: {
+    paddingTop: 20,
+    paddingHorizontal: 20,
+  },
+})