@planningcenter/chat-react-native 3.21.2-rc.4 → 3.22.0-rc.0

package/src/__tests__/contexts/session_context.tsx

@@ -0,0 +1,420 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React, { useContext, Suspense } from 'react'
+import {
+  SessionContext,
+  SessionContextProvider,
+  SessionContextConfig,
+} from '../../contexts/session_context'
+import { StorageAdapter } from '../../utils/native_adapters/storage_adapter'
+import { OAuthToken, FailedResponse } from '../../types'
+
+jest.useFakeTimers()
+
+afterAll(() => {
+  jest.useRealTimers()
+})
+
+let mockStorage: StorageAdapter
+let mockSecureStorage: StorageAdapter
+let mockRefreshTokenFn: jest.Mock
+let mockOnLogout: jest.Mock
+
+const createMockStorage = (): StorageAdapter => {
+  const storage: Record<string, string> = {}
+  return new StorageAdapter({
+    getItem: async (key: string) => {
+      return storage[key] || null
+    },
+    setItem: async (key: string, value: string) => {
+      storage[key] = value
+    },
+    removeItem: async (key: string) => {
+      delete storage[key]
+    },
+  })
+}
+
+// Helper to wait for Suspense and async operations to resolve
+const waitForQuery = async () => {
+  await act(async () => {
+    await Promise.resolve()
+    await Promise.resolve()
+    await Promise.resolve()
+  })
+}
+
+const createWrapper = (config: SessionContextConfig) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <Suspense fallback={null}>
+        <SessionContextProvider queryClient={queryClient} config={config}>
+          {children}
+        </SessionContextProvider>
+      </Suspense>
+    </QueryClientProvider>
+  )
+}
+
+beforeEach(() => {
+  mockStorage = createMockStorage()
+  mockSecureStorage = createMockStorage()
+  mockRefreshTokenFn = jest.fn()
+  mockOnLogout = jest.fn()
+
+  // Set default env
+  mockStorage.setItem('env', 'production')
+})
+
+afterEach(() => {
+  jest.restoreAllMocks()
+})
+
+const createConfig = (overrides?: Partial<SessionContextConfig>): SessionContextConfig => ({
+  storage: mockStorage,
+  secureStorage: mockSecureStorage,
+  refreshTokenFn: mockRefreshTokenFn,
+  onLogout: mockOnLogout,
+  ...overrides,
+})
+
+const useSessionContext = () => {
+  return useContext(SessionContext)
+}
+
+describe('SessionContextProvider', () => {
+  describe('initialization', () => {
+    it('should initialize with default environment', async () => {
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      expect(result.current.env).toBe('production')
+      expect(result.current.token).toBeUndefined()
+    })
+
+    it('should use custom default environment', async () => {
+      await mockStorage.setItem('env', 'staging')
+      const config = createConfig({ defaultEnv: 'staging' })
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      expect(result.current.env).toBe('staging')
+    })
+  })
+
+  describe('logout', () => {
+    it('should clear sessions and call onLogout', async () => {
+      const token: OAuthToken = {
+        access_token: 'test-token',
+        refresh_token: 'test-refresh',
+        expires_in: 3600,
+        token_type: 'Bearer',
+        scope: 'read write',
+        created_at: Date.now(),
+      }
+
+      // Set up a session with a token
+      const sessionString = JSON.stringify({ env: 'production', token })
+      await mockSecureStorage.setItem(
+        'sessions-storage',
+        JSON.stringify({ production: sessionString })
+      )
+
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      expect(result.current.token).toBeDefined()
+
+      // Logout
+      await act(async () => {
+        await result.current.logout()
+      })
+
+      await waitForQuery()
+
+      expect(mockOnLogout).toHaveBeenCalledTimes(1)
+
+      // Verify session was cleared
+      const sessionsAfterLogout = await mockSecureStorage.getItem('sessions-storage')
+      const parsedSessions = sessionsAfterLogout ? JSON.parse(sessionsAfterLogout) : {}
+      const productionSession = parsedSessions.production
+        ? JSON.parse(parsedSessions.production)
+        : null
+
+      expect(productionSession.token).toBeUndefined()
+    })
+
+    it('should clear query clients on logout', async () => {
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      // Note: We can't spy on the queryClient since it's created inside createWrapper
+      // But we can verify logout was called
+      await act(async () => {
+        await result.current.logout()
+      })
+
+      expect(mockOnLogout).toHaveBeenCalled()
+    })
+  })
+
+  describe('token refresh', () => {
+    it('should refresh token when handleUnauthorizedResponse is called with expired token', async () => {
+      const token: OAuthToken = {
+        access_token: 'old-token',
+        refresh_token: 'refresh-token',
+        expires_in: 3600,
+        token_type: 'Bearer',
+        scope: 'read write',
+        created_at: Date.now(),
+      }
+
+      const newToken: OAuthToken = {
+        access_token: 'new-token',
+        refresh_token: 'new-refresh-token',
+        expires_in: 3600,
+        token_type: 'Bearer',
+        scope: 'read write',
+        created_at: Date.now(),
+      }
+
+      mockRefreshTokenFn.mockResolvedValue(newToken)
+
+      const sessionString = JSON.stringify({ env: 'production', token })
+      await mockSecureStorage.setItem(
+        'sessions-storage',
+        JSON.stringify({ production: sessionString })
+      )
+
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      expect(result.current.token).toBeDefined()
+
+      const failedResponse: FailedResponse = {
+        status: 401,
+        statusText: 'Unauthorized',
+        errors: [{ detail: 'baboon', title: 'Token Expired', status: '401' }],
+      } as FailedResponse
+
+      await act(async () => {
+        result.current.handleUnauthorizedResponse(failedResponse)
+      })
+
+      await waitForQuery()
+
+      expect(mockRefreshTokenFn).toHaveBeenCalledWith({
+        refresh_token: 'refresh-token',
+        env: 'production',
+      })
+
+      await waitForQuery()
+
+      const sessions = await mockSecureStorage.getItem('sessions-storage')
+      expect(sessions).toContain('new-token')
+    })
+
+    it('should handle multiple unauthorized responses', async () => {
+      const token: OAuthToken = {
+        access_token: 'old-token',
+        refresh_token: 'refresh-token',
+        expires_in: 3600,
+        token_type: 'Bearer',
+        scope: 'read write',
+        created_at: Date.now(),
+      }
+
+      const newToken: OAuthToken = {
+        access_token: 'new-token',
+        refresh_token: 'new-refresh-token',
+        expires_in: 3600,
+        token_type: 'Bearer',
+        scope: 'read write',
+        created_at: Date.now(),
+      }
+
+      mockRefreshTokenFn.mockResolvedValue(newToken)
+
+      const sessionString = JSON.stringify({ env: 'production', token })
+      await mockSecureStorage.setItem(
+        'sessions-storage',
+        JSON.stringify({ production: sessionString })
+      )
+
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      expect(result.current.token).toBeDefined()
+
+      const failedResponse: FailedResponse = {
+        status: 401,
+        statusText: 'Unauthorized',
+        errors: [{ detail: 'other-error', title: 'Unauthorized', status: '401' }],
+      } as FailedResponse
+
+      // Call handleUnauthorizedResponse - should trigger refresh
+      await act(async () => {
+        result.current.handleUnauthorizedResponse(failedResponse)
+      })
+
+      await waitForQuery()
+
+      // Verify refresh was called
+      expect(mockRefreshTokenFn).toHaveBeenCalled()
+    })
+
+    it('should logout on forced logout error (capuchin)', async () => {
+      const token: OAuthToken = {
+        access_token: 'old-token',
+        refresh_token: 'refresh-token',
+        expires_in: 3600,
+        token_type: 'Bearer',
+        scope: 'read write',
+        created_at: Date.now(),
+      }
+
+      const sessionString = JSON.stringify({ env: 'production', token })
+      await mockSecureStorage.setItem(
+        'sessions-storage',
+        JSON.stringify({ production: sessionString })
+      )
+
+      mockRefreshTokenFn.mockRejectedValue({
+        status: 401,
+        errors: [{ detail: 'capuchin', title: 'Forced Logout', status: '401' }],
+      })
+
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      expect(result.current.token).toBeDefined()
+
+      // Trigger refresh that will fail with capuchin
+      const failedResponse: FailedResponse = {
+        status: 401,
+        statusText: 'Unauthorized',
+        errors: [{ detail: 'baboon', title: 'Token Expired', status: '401' }],
+      } as FailedResponse
+
+      await act(async () => {
+        result.current.handleUnauthorizedResponse(failedResponse)
+      })
+
+      await waitForQuery()
+
+      expect(mockRefreshTokenFn).toHaveBeenCalled()
+
+      await waitForQuery()
+
+      expect(mockOnLogout).toHaveBeenCalled()
+    })
+
+    it('should ignore TRASH_PANDA errors', async () => {
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      const failedResponse: FailedResponse = {
+        status: 401,
+        statusText: 'Unauthorized',
+        errors: [{ detail: 'TRASH_PANDA', title: 'Unauthorized', status: '401' }],
+      } as FailedResponse
+
+      await act(async () => {
+        result.current.handleUnauthorizedResponse(failedResponse)
+      })
+
+      await waitForQuery()
+
+      expect(mockRefreshTokenFn).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('setToken', () => {
+    it('should update token in storage', async () => {
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      const newToken: OAuthToken = {
+        access_token: 'new-token',
+        refresh_token: 'new-refresh',
+        expires_in: 3600,
+        token_type: 'Bearer',
+        scope: 'read write',
+        created_at: Date.now(),
+      }
+
+      await act(async () => {
+        await result.current.setToken(newToken)
+      })
+
+      // Verify storage was updated correctly
+      const sessions = await mockSecureStorage.getItem('sessions-storage')
+      expect(sessions).toBeTruthy()
+      const parsedSessions = JSON.parse(sessions!)
+      const productionSession = JSON.parse(parsedSessions.production)
+      expect(productionSession.token.access_token).toBe('new-token')
+    })
+  })
+
+  describe('setEnv', () => {
+    it('should change environment and clear query clients', async () => {
+      const config = createConfig()
+      const { result } = renderHook(() => useSessionContext(), {
+        wrapper: createWrapper(config),
+      })
+
+      await waitForQuery()
+
+      await act(async () => {
+        result.current.setEnv('staging')
+      })
+
+      // Verify storage was updated correctly (it's JSON stringified)
+      const env = await mockStorage.getItem('env')
+      expect(env).toBe('"staging"')
+    })
+  })
+})

package/src/components/conversation/attachments/attachment_card.tsx

@@ -37,6 +37,7 @@ const useStyles = () => {
       minWidth: '100%',
       minHeight: 60,
       justifyContent: 'center',
+      position: 'relative',
     },
     title: {
       color: colors.textColorDefaultPrimary,

package/src/components/conversation/attachments/attachment_deleting_overlay.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { Spinner } from '../../display'
+import { useTheme } from '../../../hooks'
+
+export function AttachmentDeletingOverlay() {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.overlay} />
+      <Spinner size={24} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 8,
+      overflow: 'hidden',
+    },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: colors.fillColorNeutral070,
+      opacity: 0.5,
+    },
+  })
+}

package/src/components/conversation/attachments/audio_attachment.tsx

@@ -6,13 +6,16 @@ import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
 import { useTheme } from '../../../hooks'
 import { Audio } from '../../../utils/native_adapters'
 import { PlatformPressable } from '@react-navigation/elements'
+import { AttachmentDeletingOverlay } from './attachment_deleting_overlay'
 
 export function AudioAttachment({
   attachment,
   onMessageAttachmentLongPress,
+  isDeleting,
 }: {
   attachment: DenormalizedMessageAttachmentResource
   onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  isDeleting: boolean
 }) {
   const styles = useStyles()
   const { colors } = useTheme()
@@ -34,9 +37,10 @@ export function AudioAttachment({
 
   return (
     <PlatformPressable
-      onLongPress={() => onMessageAttachmentLongPress(attachment)}
+      onLongPress={() => !isDeleting && onMessageAttachmentLongPress(attachment)}
       android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
       accessibilityHint="Long press for more options"
+      disabled={isDeleting}
     >
       <AttachmentCard>
         <View style={styles.container}>
@@ -46,7 +50,7 @@ export function AudioAttachment({
             size="md"
             accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'}
             onPress={toggleAudio}
-            disabled={!sound}
+            disabled={!sound || isDeleting}
             style={styles.button}
             iconStyle={styles.buttonIcon}
           />
@@ -64,6 +68,7 @@ export function AudioAttachment({
             )}
           </View>
         </View>
+        {isDeleting && <AttachmentDeletingOverlay />}
       </AttachmentCard>
     </PlatformPressable>
   )

package/src/components/conversation/attachments/generic_file_attachment.tsx

@@ -7,13 +7,16 @@ import { useTheme } from '../../../hooks'
 import { PlatformPressable } from '@react-navigation/elements'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { Linking } from '../../../utils'
+import { AttachmentDeletingOverlay } from './attachment_deleting_overlay'
 
 export function GenericFileAttachment({
   attachment,
   onMessageAttachmentLongPress,
+  isDeleting,
 }: {
   attachment: DenormalizedMessageAttachmentResource
   onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  isDeleting: boolean
 }) {
   const styles = useStyles()
   const { colors } = useTheme()
@@ -32,10 +35,11 @@ export function GenericFileAttachment({
   return (
     <PlatformPressable
       onPress={handleDownload}
-      onLongPress={() => onMessageAttachmentLongPress(attachment)}
+      onLongPress={() => !isDeleting && onMessageAttachmentLongPress(attachment)}
       android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
       accessibilityRole="link"
       accessibilityHint={`Press to open ${fileTypeLabel} in a browser. Long press for more options`}
+      disabled={isDeleting}
     >
       <AttachmentCard>
         <View style={styles.container}>
@@ -44,6 +48,7 @@ export function GenericFileAttachment({
             <AttachmentCardTitle>{filename}</AttachmentCardTitle>
           </View>
         </View>
+        {isDeleting && <AttachmentDeletingOverlay />}
       </AttachmentCard>
     </PlatformPressable>
   )

package/src/components/conversation/attachments/image_attachment.tsx

@@ -34,6 +34,7 @@ import { DenormalizedMessageAttachmentResource } from '../../../types/resources/
 import { PlatformPressable } from '@react-navigation/elements'
 import { useTheme } from '../../../hooks'
 import { Haptic, platformFontWeightMedium } from '../../../utils'
+import { AttachmentDeletingOverlay } from './attachment_deleting_overlay'
 
 const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window')
 const DISMISS_PAN_THRESHOLD = 175
@@ -64,12 +65,14 @@ export function ImageAttachment({
   currentImageIndex,
   metaProps,
   onMessageAttachmentLongPress,
+  isDeleting,
 }: {
   attachment: DenormalizedMessageAttachmentResource
   imageAttachments: DenormalizedMessageAttachmentResource[]
   currentImageIndex: number
   metaProps: MetaProps
   onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  isDeleting: boolean
 }) {
   const { attributes } = attachment
   const { url, urlMedium, filename, metadata = {} } = attributes
@@ -87,12 +90,15 @@ export function ImageAttachment({
       <PlatformPressable
         style={styles.container}
         onPress={() => {
-          setModalKey(prev => prev + 1)
-          setVisible(true)
+          if (!isDeleting) {
+            setModalKey(prev => prev + 1)
+            setVisible(true)
+          }
         }}
-        onLongPress={() => onMessageAttachmentLongPress(attachment)}
+        onLongPress={() => !isDeleting && onMessageAttachmentLongPress(attachment)}
         android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
         accessibilityHint="Long press for more options"
+        disabled={isDeleting}
       >
         <Image
           source={{ uri: urlMedium || url }}
@@ -100,6 +106,7 @@ export function ImageAttachment({
           wrapperStyle={styles.attachmentImageWrapper}
           alt={filename}
         />
+        {isDeleting && <AttachmentDeletingOverlay />}
       </PlatformPressable>
       <LightboxModal
         key={modalKey}
@@ -931,6 +938,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {})
   return StyleSheet.create({
     container: {
       maxWidth: '100%',
+      position: 'relative',
     },
     touchEventIsolator: {
       flex: 1,

package/src/components/conversation/attachments/video_attachment.tsx

@@ -7,13 +7,16 @@ import { Video, VideoPlayerHandle } from '../../../utils/native_adapters'
 import { PlatformPressable } from '@react-navigation/elements'
 import { useTheme } from '../../../hooks'
 import { tokens } from '../../../vendor/tapestry/tokens'
+import { AttachmentDeletingOverlay } from './attachment_deleting_overlay'
 
 export function VideoAttachment({
   attachment,
   onMessageAttachmentLongPress,
+  isDeleting,
 }: {
   attachment: DenormalizedMessageAttachmentResource
   onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  isDeleting: boolean
 }) {
   const { colors } = useTheme()
   const styles = useStyles()
@@ -45,10 +48,11 @@ export function VideoAttachment({
     <View style={styles.container} ref={viewRef}>
       <PlatformPressable
         onPress={openVideo}
-        onLongPress={() => onMessageAttachmentLongPress(attachment)}
+        onLongPress={() => !isDeleting && onMessageAttachmentLongPress(attachment)}
         android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
         accessibilityLabel="Play Video"
         accessibilityHint="Press to play video. Long press for more options"
+        disabled={isDeleting}
       >
         <View style={styles.thumbnailOverlay} />
         <Video.Player
@@ -58,7 +62,7 @@ export function VideoAttachment({
           style={styles.video}
           onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}
         />
-        {!isOpen && (
+        {!isOpen && !isDeleting && (
           <View style={styles.playContainer}>
             <View style={styles.playCircle}>
               <Icon
@@ -69,6 +73,7 @@ export function VideoAttachment({
             </View>
           </View>
         )}
+        {isDeleting && <AttachmentDeletingOverlay />}
       </PlatformPressable>
     </View>
   )