diff --git a/native/chat/settings/thread-settings-push-notifs.react.js b/native/chat/settings/thread-settings-push-notifs.react.js index 485668b2f..e1a953317 100644 --- a/native/chat/settings/thread-settings-push-notifs.react.js +++ b/native/chat/settings/thread-settings-push-notifs.react.js @@ -1,118 +1,178 @@ // @flow import * as React from 'react'; -import { View, Switch } from 'react-native'; +import { View, Switch, TouchableOpacity, Platform } from 'react-native'; +import Alert from 'react-native/Libraries/Alert/Alert'; +import Linking from 'react-native/Libraries/Linking/Linking'; import { updateSubscriptionActionTypes, updateSubscription, } from 'lib/actions/user-actions'; import type { SubscriptionUpdateRequest, SubscriptionUpdateResult, } from 'lib/types/subscription-types'; import { type ThreadInfo } from 'lib/types/thread-types'; import type { DispatchActionPromise } from 'lib/utils/action-utils'; import { useServerCall, useDispatchActionPromise, } from 'lib/utils/action-utils'; import { SingleLine } from '../../components/single-line.react'; +import SWMansionIcon from '../../components/swmansion-icon.react'; +import { useSelector } from '../../redux/redux-utils'; import { useStyles } from '../../themes/colors'; type BaseProps = { +threadInfo: ThreadInfo, }; type Props = { ...BaseProps, // Redux state +styles: typeof unboundStyles, // Redux dispatch functions +dispatchActionPromise: DispatchActionPromise, // async functions that hit server APIs + +hasPushPermissions: boolean, +updateSubscription: ( subscriptionUpdate: SubscriptionUpdateRequest, ) => Promise, }; type State = { +currentValue: boolean, }; class ThreadSettingsPushNotifs extends React.PureComponent { constructor(props: Props) { super(props); this.state = { currentValue: props.threadInfo.currentUser.subscription.pushNotifs, }; } render() { const componentLabel = 'Push notifs'; + let notificationsSettingsLinkingIcon = undefined; + if (!this.props.hasPushPermissions) { + notificationsSettingsLinkingIcon = ( + + + + + + ); + } return ( {componentLabel} + {notificationsSettingsLinkingIcon} ); } onValueChange = (value: boolean) => { this.setState({ currentValue: value }); this.props.dispatchActionPromise( updateSubscriptionActionTypes, this.props.updateSubscription({ threadID: this.props.threadInfo.id, updatedFields: { pushNotifs: value, }, }), ); }; + + onNotificationsSettingsLinkingIconPress = () => { + const alertTitle = + Platform.OS === 'ios' + ? 'Need notif permissions' + : 'Unable to initialize notifs'; + let alertMessage; + if (Platform.OS === 'ios' && this.state.currentValue) { + alertMessage = + 'Notifs for this thread are enabled, but cannot be delivered ' + + 'to this device because you haven’t granted notif permissions to Comm. ' + + 'Please enable them in Settings App → Notifications → Comm'; + } else if (Platform.OS === 'ios') { + alertMessage = + 'In order to enable push notifs for this thread, ' + + 'you need to first grant notif permissions to Comm. ' + + 'Please enable them in Settings App → Notifications → Comm'; + } else { + alertMessage = + 'Please check your network connection, make sure Google Play ' + + 'services are installed and enabled, and confirm that your Google ' + + 'Play credentials are valid in the Google Play Store.'; + } + Alert.alert(alertTitle, alertMessage, [ + { + text: 'Go to settings', + onPress: () => Linking.openSettings(), + }, + { + text: 'Cancel', + style: 'cancel', + }, + ]); + }; } const unboundStyles = { currentValue: { alignItems: 'flex-end', margin: 0, paddingLeft: 4, paddingRight: 0, paddingVertical: 0, }, label: { color: 'panelForegroundTertiaryLabel', fontSize: 16, flex: 1, }, row: { alignItems: 'center', backgroundColor: 'panelForeground', flexDirection: 'row', paddingHorizontal: 24, paddingVertical: 3, }, + infoIcon: { + paddingRight: 20, + }, }; const ConnectedThreadSettingsPushNotifs: React.ComponentType = React.memo( function ConnectedThreadSettingsPushNotifs(props: BaseProps) { const styles = useStyles(unboundStyles); const dispatchActionPromise = useDispatchActionPromise(); const callUpdateSubscription = useServerCall(updateSubscription); + const hasPushPermissions = useSelector( + state => state.deviceToken !== null && state.deviceToken !== undefined, + ); return ( ); }, ); export default ConnectedThreadSettingsPushNotifs;