Sync with fedibtc/fedi f2dd70deb07d5562846a88fc8e084bbebf7558b4 (#14)

Co-authored-by: Fedi CI <ci@fedi.xyz>

.github/workflows/upload-android-apk.yml

@@ -63,8 +63,8 @@ jobs:
             - name: Create draft GitHub release with APK
               uses: softprops/action-gh-release@v2
               with:
-                  tag_name: v${{ steps.prep-apk.outputs.APK_VERSION }}
-                  name: 'v${{ steps.prep-apk.outputs.APK_VERSION }}'
+                  tag_name: ${{ steps.prep-apk.outputs.APK_VERSION }}
+                  name: '${{ steps.prep-apk.outputs.APK_VERSION }}'
                   body: 'Built from commit: ${{ github.sha }}'
                   draft: true
                   append_body: true

ui/common/hooks/chat.ts

@@ -37,6 +37,7 @@ export function usePublishNotificationToken(
     appName: string,
     permissionGranted: boolean,
     secondaryPublish: (token: string, dispatch: CommonDispatch) => void,
+    secondaryPermissionGranted: boolean,
     currentToken: string | null,
 ) {
     const dispatch = useCommonDispatch()
@@ -97,10 +98,12 @@ export function usePublishNotificationToken(
                 })
 
             // Zendesk
-            secondaryPublish(newToken, dispatch)
-            log.debug(
-                'Successfully updated secondary publish push notification token',
-            )
+            if (secondaryPermissionGranted) {
+                secondaryPublish(newToken, dispatch)
+                log.debug(
+                    'Successfully updated secondary publish push notification token',
+                )
+            }
         }
 
         publishToken()
@@ -112,6 +115,7 @@ export function usePublishNotificationToken(
         permissionGranted,
         currentToken,
         secondaryPublish,
+        secondaryPermissionGranted,
     ])
 
     return null

ui/common/redux/support.ts

@@ -9,6 +9,7 @@ const initialState = {
     supportPermissionGranted: false,
     zendeskPushNotificationToken: null as string | null,
     zendeskInitialized: false,
+    zendeskUnreadMessageCount: 0,
 }
 
 export type SupportState = typeof initialState
@@ -28,6 +29,9 @@ export const supportSlice = createSlice({
         setZendeskInitialized(state, action: PayloadAction<boolean>) {
             state.zendeskInitialized = action.payload
         },
+        setZendeskUnreadMessageCount(state, action: PayloadAction<number>) {
+            state.zendeskUnreadMessageCount = action.payload
+        },
     },
     extraReducers: builder => {
         builder.addCase(loadFromStorage.fulfilled, (state, action) => {
@@ -50,6 +54,7 @@ export const {
     setSupportPermission,
     setZendeskPushNotificationToken,
     setZendeskInitialized,
+    setZendeskUnreadMessageCount,
 } = supportSlice.actions
 
 /*** Selectors ***/
@@ -63,6 +68,9 @@ export const selectZendeskPushNotificationToken = (s: CommonState) =>
 export const selectZendeskInitialized = (s: CommonState) =>
     s.support.zendeskInitialized
 
+export const selectZendeskUnreadMessageCount = (s: CommonState) =>
+    s.support.zendeskUnreadMessageCount
+
 /*** Synchronous wrapper actions ***/
 
 export const grantSupportPermission = () => (dispatch: Dispatch) => {
@@ -73,3 +81,8 @@ export const saveZendeskPushNotificationToken =
     (token: string) => (dispatch: Dispatch) => {
         dispatch(setZendeskPushNotificationToken(token))
     }
+
+export const updateZendeskUnreadMessageCount =
+    (count: number) => (dispatch: Dispatch) => {
+        dispatch(setZendeskUnreadMessageCount(count))
+    }

ui/native/android/app/build.gradle

@@ -122,7 +122,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 240051929
-        versionName "25.2.3"
+        versionName "25.2.5"
     }
 
     packagingOptions {

ui/native/components/feature/settings/GeneralSettings.tsx

@@ -7,23 +7,13 @@ import { requestNotifications } from 'react-native-permissions'
 
 import { EULA_URL } from '@fedi/common/constants/tos'
 import { useNuxStep } from '@fedi/common/hooks/nux'
-import { ToastHandler, useToast } from '@fedi/common/hooks/toast'
 import { selectDeveloperMode } from '@fedi/common/redux/environment'
 
 import { usePinContext } from '../../../state/contexts/PinContext'
 import { useAppSelector } from '../../../state/hooks'
 import { NavigationHook } from '../../../types/navigation'
 import { useNotificationsPermission } from '../../../utils/hooks'
-import {
-    useNpub,
-    useSupportPermission,
-    useZendeskInitialization,
-} from '../../../utils/hooks/support'
-import {
-    useDisplayName,
-    zendeskInitialize,
-    zendeskOpenMessagingView,
-} from '../../../utils/support'
+import { useLaunchZendesk } from '../../../utils/hooks/support'
 import SettingsItem from './SettingsItem'
 
 export const GeneralSettings = () => {
@@ -33,13 +23,7 @@ export const GeneralSettings = () => {
     const navigation = useNavigation<NavigationHook>()
     const { notificationsPermission } = useNotificationsPermission()
 
-    const { supportPermissionGranted } = useSupportPermission()
-    const displayName = useDisplayName()
-    const nostrPublic = useNpub()
-    const toast = useToast()
-    const nostrNpub = nostrPublic ?? null
-    const { zendeskInitialized, handleZendeskInitialization } =
-        useZendeskInitialization()
+    const { launchZendesk } = useLaunchZendesk()
 
     const developerMode = useAppSelector(selectDeveloperMode)
     const [hasPerformedPersonalBackup] = useNuxStep(
@@ -59,23 +43,6 @@ export const GeneralSettings = () => {
         }
     }
 
-    const handleSupportPress = () => {
-        if (!zendeskInitialized) {
-            zendeskInitialize(
-                nostrNpub,
-                displayName,
-                handleZendeskInitialization,
-                toast as unknown as ToastHandler,
-                t,
-            )
-        }
-        if (supportPermissionGranted && zendeskInitialized) {
-            zendeskOpenMessagingView()
-        } else {
-            navigation.navigate('HelpCentre')
-        }
-    }
-
     const handleNotificationSettings = useCallback(async () => {
         // If not granted, ask for permission
         if (notificationsPermission !== 'granted') {
@@ -153,7 +120,7 @@ export const GeneralSettings = () => {
             <SettingsItem
                 icon="SmileMessage"
                 label={t('feature.support.title')}
-                onPress={handleSupportPress}
+                onPress={() => launchZendesk()}
             />
             <SettingsItem
                 icon="SpeakerPhone"

ui/native/components/feature/support/SupportChat.tsx

@@ -1,127 +1,36 @@
-import { useFocusEffect } from '@react-navigation/native'
+import { useNavigation } from '@react-navigation/native'
 import { Button, useTheme, Theme, Text } from '@rneui/themed'
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, View, Linking } from 'react-native'
-import * as Zendesk from 'react-native-zendesk-messaging'
 
-import { usePushNotificationToken } from '@fedi/common/hooks/matrix'
-import { ToastHandler, useToast } from '@fedi/common/hooks/toast'
-import { makeLog } from '@fedi/common/utils/log'
+import { grantSupportPermission } from '@fedi/common/redux/support'
 import SvgImage from '@fedi/native/components/ui/SvgImage'
 
 import { HELP_URL, PRIVACY_POLICY_URL } from '../../../constants'
-import { useSupportPermission, useNpub } from '../../../utils/hooks/support'
-import { zendeskInitialize, useDisplayName } from '../../../utils/support'
+import { useAppDispatch } from '../../../state/hooks'
+import { useLaunchZendesk } from '../../../utils/hooks/support'
 import HoloGuidance from '../../ui/HoloGuidance'
 
-const log = makeLog('SupportChat')
-
-type SupportChatProps = {
-    zendeskInitialized: boolean
-    setZendeskInitialized: (value: boolean) => void
-}
-
-const SupportChat: React.FC<SupportChatProps> = ({
-    zendeskInitialized,
-    setZendeskInitialized,
-}) => {
+const SupportChat: React.FC = () => {
     const { theme } = useTheme()
     const { t } = useTranslation()
-    const toast = useToast()
-
+    const navigation = useNavigation()
     const style = styles(theme)
+    const dispatch = useAppDispatch()
 
-    const {
-        supportPermissionGranted,
-        grantPermission,
-        zendeskPushNotificationToken,
-        savePushNotificationToken,
-    } = useSupportPermission()
-    const pushNotificationToken = usePushNotificationToken()
-    const nostrPublic = useNpub()
-    const nostrNpub = nostrPublic ?? null
-    const displayName = useDisplayName()
-
-    useEffect(() => {
-        if (nostrNpub && displayName && !zendeskInitialized) {
-            zendeskInitialize(
-                nostrNpub,
-                displayName,
-                setZendeskInitialized,
-                toast as unknown as ToastHandler,
-                t,
-            )
-        }
-    }, [
-        nostrNpub,
-        displayName,
-        setZendeskInitialized,
-        zendeskInitialized,
-        toast,
-        t,
-    ])
-
-    useFocusEffect(
-        useCallback(() => {
-            if (zendeskInitialized && supportPermissionGranted) {
-                Zendesk.openMessagingView()
-                    .then(() =>
-                        log.debug('Zendesk messaging shown successfully'),
-                    )
-                    .catch(error => {
-                        log.error('Zendesk messaging failed to show', error)
-                        toast.error(
-                            t,
-                            error,
-                            'feature.support.zendesk-initialization-failed',
-                        )
-                    })
-            }
-        }, [zendeskInitialized, supportPermissionGranted, toast, t]),
-    )
-
-    useEffect(() => {
-        if (
-            supportPermissionGranted &&
-            pushNotificationToken &&
-            pushNotificationToken !== zendeskPushNotificationToken
-        ) {
-            Zendesk.updatePushNotificationToken(pushNotificationToken)
-            savePushNotificationToken(pushNotificationToken)
-            log.debug(
-                'Zendesk push notification token updated: ' +
-                    pushNotificationToken,
-            )
-        }
-    }, [
-        supportPermissionGranted,
-        pushNotificationToken,
-        zendeskPushNotificationToken,
-        savePushNotificationToken,
-    ])
+    const { launchZendesk } = useLaunchZendesk()
 
     const handlePrivacyPolicyPress = () => {
         Linking.openURL(PRIVACY_POLICY_URL)
     }
 
-    const grantSupportPermission = () => {
-        if (!supportPermissionGranted) {
-            grantPermission()
-        }
-    }
-
-    const handleZendeskPress = () => {
-        if (!supportPermissionGranted) {
-            grantPermission()
-        } else {
-            Zendesk.openMessagingView()
-                .then(() => log.debug('Zendesk messaging shown successfully'))
-                .catch(error =>
-                    log.error('Zendesk messaging failed to show', error),
-                )
-        }
-    }
+    const grantPermission = useCallback(() => {
+        dispatch(grantSupportPermission())
+        launchZendesk(true)
+        // Close the Permission screen while the modal opens
+        navigation.goBack()
+    }, [dispatch, launchZendesk, navigation])
 
     const handleHelpCenterPress = () => {
         Linking.openURL(HELP_URL)
@@ -164,16 +73,8 @@ const SupportChat: React.FC<SupportChatProps> = ({
             <View style={style.overlayButtonsContainer}>
                 <Button
                     fullWidth
-                    onPress={
-                        supportPermissionGranted
-                            ? handleZendeskPress
-                            : grantSupportPermission
-                    }
-                    title={
-                        supportPermissionGranted
-                            ? t('feature.support.open-chat')
-                            : t('phrases.i-understand')
-                    }
+                    onPress={grantPermission}
+                    title={t('phrases.i-understand')}
                 />
             </View>
         </View>

ui/native/components/feature/support/ZendeskBadge.tsx

@@ -0,0 +1,47 @@
+import { useTheme, Theme, Text } from '@rneui/themed'
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import { selectZendeskUnreadMessageCount } from '@fedi/common/redux/support'
+
+import { useAppSelector } from '../../../state/hooks'
+
+const ZendeskBadge: React.FC<{ title: string }> = ({ title }) => {
+    const { theme } = useTheme()
+    const unreadCount = useAppSelector(selectZendeskUnreadMessageCount)
+    const style = styles(theme)
+
+    // Show badge ONLY if title is "Ask Fedi" and count is > 0
+    if (title.toLowerCase() !== 'ask fedi' || unreadCount === 0) {
+        return null
+    }
+
+    return (
+        <View style={style.badge}>
+            <Text style={style.badgeText}>{unreadCount}</Text>
+        </View>
+    )
+}
+
+const styles = (theme: Theme) =>
+    StyleSheet.create({
+        badge: {
+            position: 'absolute',
+            zIndex: 1000,
+            top: -3,
+            right: 32,
+            backgroundColor: theme.colors.red,
+            borderRadius: 10,
+            width: 20,
+            height: 20,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        badgeText: {
+            color: theme.colors.white,
+            fontSize: 12,
+            fontWeight: 'bold',
+        },
+    })
+
+export default ZendeskBadge