Add new chat notification preferences (#10972)

src/screens/Messages/Settings.tsx

@@ -1,13 +1,19 @@
 import {useCallback} from 'react'
-import {View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {Trans, useLingui} from '@lingui/react/macro'
 import {type NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {type CommonNavigatorParams} from '#/lib/routes/types'
 import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration'
+import {
+  type NotificationSettingsPreference,
+  useChatNotificationSettingsQuery,
+} from '#/state/queries/notifications/settings'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {ExportCarDialog} from '#/screens/Settings/components/ExportCarDialog'
+import {ChatNotificationDialogs} from '#/screens/Settings/NotificationSettings/components/ChatNotificationDialogs'
+import {SettingPreview} from '#/screens/Settings/NotificationSettings/components/SettingPreview'
 import {atoms as a, useTheme} from '#/alf'
 import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
@@ -18,7 +24,10 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Bell_Stroke2_Corner0_Rounded as BellIcon} from '#/components/icons/Bell'
 import {Car_Stroke2_Corner2_Rounded as CarIcon} from '#/components/icons/Car'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
+import {Envelope_Stroke2_Corner2_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
+import {Message_Stroke2_Corner0_Rounded as MessageIcon} from '#/components/icons/Message'
 import * as Layout from '#/components/Layout'
+import * as Skele from '#/components/Skeleton'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
 import {useAgeAssurance} from '#/ageAssurance'
@@ -52,8 +61,12 @@ export function MessagesSettingsScreenInner({}: Props) {
   const {data: profile} = useProfileQuery({
     did: currentAccount!.did,
   })
+  const {data: chatNotificationSettings, isError: chatSettingsError} =
+    useChatNotificationSettingsQuery()
   const {preferences, setPref} = useBackgroundNotificationPreferences()
 
+  const chatDialogControl = Dialog.useDialogControl()
+  const chatRequestDialogControl = Dialog.useDialogControl()
   const exportCarControl = Dialog.useDialogControl()
 
   const isGroupChatEnabled = !ax.features.enabled(ax.features.GroupChatsDisable)
@@ -237,6 +250,54 @@ export function MessagesSettingsScreenInner({}: Props) {
               <Divider style={{marginVertical: 10}} />
             </>
           ) : null}
+          <View style={[a.px_xl, a.gap_lg]}>
+            <Text style={[a.pb_xs, a.text_md, a.font_semi_bold, t.atoms.text]}>
+              <Trans>Notifications</Trans>
+            </Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={l`Settings for notifications for new messages`}
+              accessibilityHint={undefined}
+              style={[a.flex_row, a.align_start, a.justify_between, a.gap_sm]}
+              onPress={() => {
+                chatDialogControl.open()
+              }}>
+              <MessageIcon style={[a.mr_2xs, t.atoms.text]} size="lg" />
+              <View style={[a.flex_1, a.flex_grow]}>
+                <Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
+                  <Trans>New messages</Trans>
+                </Text>
+                <NotificationPreferenceSubtitle
+                  preference={chatNotificationSettings?.chat}
+                  isLoading={!chatNotificationSettings}
+                  isError={chatSettingsError}
+                />
+              </View>
+              <ChevronRightIcon style={[a.ml_2xs, t.atoms.text]} size="lg" />
+            </Pressable>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={l`Settings for notifications for new message requests`}
+              accessibilityHint={undefined}
+              style={[a.flex_row, a.align_start, a.justify_between, a.gap_sm]}
+              onPress={() => {
+                chatRequestDialogControl.open()
+              }}>
+              <EnvelopeIcon style={[a.mr_2xs, t.atoms.text]} size="lg" />
+              <View style={[a.flex_1, a.flex_grow]}>
+                <Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
+                  <Trans>New message requests</Trans>
+                </Text>
+                <NotificationPreferenceSubtitle
+                  preference={chatNotificationSettings?.chatRequest}
+                  isLoading={!chatNotificationSettings}
+                  isError={chatSettingsError}
+                />
+              </View>
+              <ChevronRightIcon style={[a.ml_2xs, t.atoms.text]} size="lg" />
+            </Pressable>
+          </View>
+          <Divider style={{marginVertical: 10}} />
           {IS_NATIVE && (
             <>
               <View style={[a.px_xl]}>
@@ -263,12 +324,12 @@ export function MessagesSettingsScreenInner({}: Props) {
             </>
           )}
           <View style={[a.px_xl]}>
-            <Toggle.Item
-              label={l`Export my chat data`}
-              name="playSoundChat"
-              value={preferences.playSoundChat}
-              style={[a.flex_row, a.align_center, a.justify_between]}
-              onChange={() => {
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={l`Export my chat data`}
+              accessibilityHint={undefined}
+              style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm]}
+              onPress={() => {
                 exportCarControl.open()
               }}>
               <CarIcon style={[a.mr_2xs, t.atoms.text]} size="lg" />
@@ -277,12 +338,46 @@ export function MessagesSettingsScreenInner({}: Props) {
                 <Trans>Export my chat data</Trans>
               </Text>
               <ChevronRightIcon style={[a.ml_2xs, t.atoms.text]} size="lg" />
-            </Toggle.Item>
+            </Pressable>
           </View>
           <Divider style={{marginVertical: 10}} />
         </View>
       </Layout.Content>
+      <ChatNotificationDialogs
+        chatControl={chatDialogControl}
+        chatRequestControl={chatRequestDialogControl}
+      />
       <ExportCarDialog control={exportCarControl} />
     </Layout.Screen>
   )
 }
+
+function NotificationPreferenceSubtitle({
+  preference,
+  isLoading,
+  isError,
+}: {
+  preference?: NotificationSettingsPreference
+  isLoading: boolean
+  isError: boolean
+}) {
+  const t = useTheme()
+
+  if (isError) {
+    return (
+      <Text style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_snug]}>
+        <Trans>Failed to load notification settings.</Trans>
+      </Text>
+    )
+  }
+
+  if (isLoading) {
+    return <Skele.Text style={[a.text_sm, {width: 120}]} />
+  }
+
+  return (
+    <Text style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_snug]}>
+      <SettingPreview preference={preference} />
+    </Text>
+  )
+}