diff --git a/core/i18n/locales/de.json b/core/i18n/locales/de.json index 9c66305d8f9154e0ad093e5a7a5363bc10ecff10..3850556c93f019d311fae18a71c9d4164cc028bb 100644 --- a/core/i18n/locales/de.json +++ b/core/i18n/locales/de.json @@ -1493,6 +1493,11 @@ "user.engagementLevel.title.INTERESTED": "Interessiert", "user.interests.form.headline": "Beteilige dich an dem, was dir wichtig ist", "user.interests.form.subline": "Wir passen die Empfehlungen basierend auf deiner Auswahl an. Du kannst deine Themen jederzeit in deinen Profileinstellungen ändern.", + "user.profile.connections.confirmation.confirm": "Entfernen", + "user.profile.connections.confirmation.description": "Möchtest du die Verbindung mit {{name}} entfernen?", + "user.profile.connections.confirmation.dismiss": "Nein, Abbrechen", + "user.profile.connections.confirmation.success": "Verbindung entfernt", + "user.profile.connections.confirmation.title": "Verbindung entfernen", "user.profile.connections.title.empty": "Benutzer:in hat noch keine Kontakte", "user.profile.own.connections.title.empty": "Du hast noch keine Verbindungen", "user.profile.validation.avatar.invalid_image": "Die hochgeladene Datei ist entweder kein valides Bild oder die Datei ist beschädigt", diff --git a/core/i18n/locales/en.json b/core/i18n/locales/en.json index 0011629e28737fa622b6db9f5297f793baed0150..1c375a63f2cdd1974d4b64b212625030087af4d8 100644 --- a/core/i18n/locales/en.json +++ b/core/i18n/locales/en.json @@ -1498,6 +1498,11 @@ "user.engagementLevel.title.INTERESTED": "Interested", "user.interests.form.headline": "Get engaged in topics that matter to you", "user.interests.form.subline": "We'll customize recommendations based on your selection. You can change your topics any time in your profile settings.", + "user.profile.connections.confirmation.confirm": "Remove", + "user.profile.connections.confirmation.description": "Would you like to remove the connection with {{name}}?", + "user.profile.connections.confirmation.dismiss": "No, cancel", + "user.profile.connections.confirmation.success": "Connection removed", + "user.profile.connections.confirmation.title": "Remove connection", "user.profile.connections.title.empty": "This user doesn't have any connections yet", "user.profile.own.connections.title.empty": "You don't have any connections yet", "user.profile.validation.avatar.invalid_image": "The file you uploaded is not a valid image or the file is corrupt", diff --git a/core/screens/userprofile/components/OwnConnectionsTab.tsx b/core/screens/userprofile/components/OwnConnectionsTab.tsx index 33bcb00234ed2fad56665eeeb9417aa41f78819b..b37910a456fb0e6a86842a95973e2199a6fecd92 100644 --- a/core/screens/userprofile/components/OwnConnectionsTab.tsx +++ b/core/screens/userprofile/components/OwnConnectionsTab.tsx @@ -26,6 +26,11 @@ import { HoliIcon } from '@holi/icons/src/HoliIcon' import { Chat3, Flag, User, UserUnfollow } from '@holi/icons/src/generated' import { HoliToastType, useToast } from '@holi/ui/components/molecules/HoliToastProvider' import { HoliGap } from '@holi/ui/components/atoms/HoliGap' +import { useUserConnection } from '@holi/core/helpers' +import { useLoggedInUser } from '@holi/core/auth/hooks/useLoggedInUser' +import useTracking from '@holi/core/tracking/hooks/useTracking' +import { TrackingEvent } from '@holi/core/tracking' +import HoliConfirmation from '@holi/ui/components/molecules/HoliConfirmation' export interface ConnectionsTabProps { emptyText: string @@ -38,9 +43,13 @@ const ConnectionsTab = ({ emptyText, emptyCallToAction }: ConnectionsTabProps) = const styles = useMemo(() => getStyles(theme), [theme]) const { navigate } = useRouting() const { openToast } = useToast() + const { disconnect } = useUserConnection() + const { user: loggedInUser } = useLoggedInUser() + const { track } = useTracking() const [selectedConnection, setSelectedConnection] = useState<Connection>() const { visible, show, hide } = useModalState() + const { visible: confirmationVisible, show: confirmationShow, hide: confirmationHide } = useModalState() const { data, refetch } = useQuery<MyConnectionsResponse>(myConnectionsQuery, { variables: { offset: 0, limit: 10 }, @@ -49,7 +58,7 @@ const ConnectionsTab = ({ emptyText, emptyCallToAction }: ConnectionsTabProps) = }) useOnRefresh(refetch) - const connections = data?.myConnections.data ?? [] + const [connections, setConnections] = useState<Connection[]>(data?.myConnections.data ?? []) const animKey = !data ? 'loading' : data.myConnections.totalResults > 0 ? 'ready' : 'empty' const onSelectConnection = useCallback( @@ -60,6 +69,18 @@ const ConnectionsTab = ({ emptyText, emptyCallToAction }: ConnectionsTabProps) = [show] ) + const revokeConnection = useCallback(() => { + if (selectedConnection && loggedInUser) { + disconnect(selectedConnection?.id || '') + track(TrackingEvent.UserConnectionRevoked(loggedInUser.id, selectedConnection.id)) + setConnections((prevConnections) => + prevConnections.filter((connection) => connection.id !== selectedConnection.id) + ) + hide() + openToast(t('user.profile.connections.confirmation.success'), HoliToastType.SUCCESS) + } + }, [disconnect, hide, selectedConnection, loggedInUser, track, openToast, t]) + const handleNavigation = useCallback( (id: string) => { hide() @@ -176,8 +197,8 @@ const ConnectionsTab = ({ emptyText, emptyCallToAction }: ConnectionsTabProps) = inline transparent label={t('user.profileView.connection.confirmation.title.CONNECTED')} - onPress={() => openToast(t('global.comingSoon'), HoliToastType.SUCCESS)} - testID={'connections-send-message-btn'} + onPress={confirmationShow} + testID={'connections-revoke-connection-btn'} > <HoliIcon icon={UserUnfollow} color={styles.actionItemIcon.color} /> <HoliText style={styles.actionItemText}> @@ -196,6 +217,19 @@ const ConnectionsTab = ({ emptyText, emptyCallToAction }: ConnectionsTabProps) = <HoliText style={styles.actionItemText}>{t('spaces.invite.connections.report')}</HoliText> </HoliButton> </View> + + <HoliConfirmation + label={t('user.profile.connections.confirmation.title')} + description={t('user.profile.connections.confirmation.description', { name: selectedConnection?.fullName })} + title={t('user.profile.connections.confirmation.title')} + primaryButtonVariant="danger" + primaryText={t('user.profile.connections.confirmation.confirm')} + secondaryText={t('user.profile.connections.confirmation.dismiss')} + onPrimary={revokeConnection} + onDismiss={confirmationHide} + visible={confirmationVisible} + show={confirmationVisible} + /> </HoliContainer> </HoliModal> </HoliTransition.FadeSwitch> diff --git a/core/tracking/events.ts b/core/tracking/events.ts index 981ed28105b1e81c1e6cab626042717932c856be..36c6851238a9e8250599699372f8afae6b2fb247 100644 --- a/core/tracking/events.ts +++ b/core/tracking/events.ts @@ -446,6 +446,13 @@ export namespace TrackingEvent { properties: { requesterId, recipientId }, ...versionOne, }) + + export const UserConnectionRevoked = (requesterId: string, recipientId: string): TrackingEvent => ({ + name: 'userConnectionRevoked', + properties: { requesterId, recipientId }, + ...versionOne, + }) + export const PollVoteSubmitted = (pollId: string): TrackingEvent => ({ name: 'pollVoteSubmitted', properties: { pollId },