@planningcenter/chat-react-native 4.4.1-qa-staging.13 → 4.4.1-qa-staging.15

package/src/screens/conversation_screen.tsx

@@ -40,6 +40,7 @@ import {
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
 import { useRestAwayFromDismissEdge } from '../hooks/use_rest_away_from_dismiss_edge'
+import { useUnarchiveConversationAction } from '../hooks/use_unarchive_conversation_action'
 import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt_events'
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
@@ -265,12 +266,13 @@ function ConversationBottomBar({
   onBeforeSubmit,
 }: ConversationBottomBarProps) {
   const messageLink = useMessageAvailableMembersAction(conversation)
+  const unarchiveAction = useUnarchiveConversationAction(conversation)
 
   if (conversation.disabled)
     return (
       <ConversationDisabledBanner
         message={conversation.disabledMessage ?? null}
-        messageLink={messageLink}
+        action={unarchiveAction ?? messageLink}
       />
     )
   if (!canReply) return <MemberMessagesDisabledBanner />

package/src/screens/design_system_screen.tsx

@@ -12,6 +12,7 @@ import {
   Button,
   ConversationAvatar,
   EmojiAvatar,
+  FilterDropdown,
   IconAvatar,
   ToggleButton,
   Heading,
@@ -82,6 +83,14 @@ const personChild = {
 
 const buttonPress = () => Alert.alert('Button clicked')
 
+const filterDropdownOptions = [
+  { id: 'all', label: 'All conversations' },
+  { id: 'groups', label: 'Groups' },
+  { id: 'teams', label: 'Teams' },
+  { id: 'dms', label: 'DMs' },
+  { id: 'unread', label: 'Unread' },
+]
+
 // =================================
 // ====== Component ================
 // =================================
@@ -213,6 +222,7 @@ function HeadingTextSection({ isLast }: SectionProps) {
 function PressablesSection({ isLast }: SectionProps) {
   const styles = useStyles()
   const [filterSelected, setFilterSelected] = useState('Groups')
+  const [dropdownSelected, setDropdownSelected] = useState('all')
 
   return (
     <CollapsableSection title="Pressables" isLast={isLast}>
@@ -388,6 +398,22 @@ function PressablesSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="FilterDropdown"
+        description="Trigger that opens the host's native menu of filter options plus a More filters action. Needs a menu adapter."
+      >
+        <Row style={styles.alignRowLeft}>
+          <FilterDropdown
+            options={filterDropdownOptions}
+            selectedId={dropdownSelected}
+            onSelect={setDropdownSelected}
+            onMoreFilters={() => Alert.alert('More filters')}
+            triggerLabel={
+              filterDropdownOptions.find(option => option.id === dropdownSelected)?.label ?? ''
+            }
+          />
+        </Row>
+      </Group>
       <Group
         title="IconButton"
         description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers."

package/src/screens/message_actions_screen.tsx

@@ -9,6 +9,7 @@ import { useReactionStyles } from '../components/conversation/message_reaction'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
+import { useConversation } from '../hooks/use_conversation'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
@@ -49,6 +50,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     { conversation_id },
     { refetchOnMount: false }
   )
+  const { data: conversation } = useConversation({ conversation_id }, { refetchOnMount: false })
   const message = messages.find(m => m.id === message_id)
 
   if (!message) return null
@@ -57,6 +59,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     <MessageActionsScreenContent
       message={message}
       conversation_id={conversation_id}
+      conversationDisabled={!!conversation.disabled}
       canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages || false}
       refetchMessages={refetch}
       inReplyScreen={inReplyScreen}
@@ -69,6 +72,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
 function MessageActionsScreenContent({
   message,
   conversation_id,
+  conversationDisabled,
   canDeleteNonAuthoredMessages,
   refetchMessages,
   inReplyScreen,
@@ -77,6 +81,7 @@ function MessageActionsScreenContent({
 }: {
   message: MessageResource
   conversation_id: number
+  conversationDisabled: boolean
   canDeleteNonAuthoredMessages: boolean
   refetchMessages: () => void
   inReplyScreen?: boolean
@@ -241,28 +246,32 @@ function MessageActionsScreenContent({
 
   const showReportMessageAction =
     !message?.mine && featureEnabled(availableFeatures.message_reporting)
+  const showDeleteMessageAction =
+    !conversationDisabled && (message?.mine || canDeleteNonAuthoredMessages)
 
   return (
     <FormSheet.Root style={styles.formSheetContent}>
-      <View style={styles.reactionList}>
-        {availableReactions.map((reaction, index) => (
-          <Reaction
-            key={index}
-            reaction={reaction}
-            onPress={() => {
-              Haptic.impactLight()
-              handleReactionToggle({
-                value: reaction.value,
-                mine: reaction.mine,
-              })
-              navigation.goBack()
-            }}
-          />
-        ))}
-      </View>
+      {!conversationDisabled && (
+        <View style={styles.reactionList}>
+          {availableReactions.map((reaction, index) => (
+            <Reaction
+              key={index}
+              reaction={reaction}
+              onPress={() => {
+                Haptic.impactLight()
+                handleReactionToggle({
+                  value: reaction.value,
+                  mine: reaction.mine,
+                })
+                navigation.goBack()
+              }}
+            />
+          ))}
+        </View>
+      )}
       {!isSystemMessage && (
         <View style={styles.actions}>
-          {!inReplyScreen && (
+          {!inReplyScreen && !conversationDisabled && (
             <FormSheet.Action
               onPress={handleReplyPress}
               title="Reply to message"
@@ -285,7 +294,7 @@ function MessageActionsScreenContent({
               accessibilityHint="Opens a form to report this message"
             />
           )}
-          {message?.mine && (
+          {message?.mine && !conversationDisabled && (
             <FormSheet.Action
               onPress={() => handleEditPress()}
               title="Edit message"
@@ -301,7 +310,7 @@ function MessageActionsScreenContent({
               accessibilityHint="Opens a modal with a list of people who read your message."
             />
           )}
-          {message?.mine && hasExpandedLink && (
+          {message?.mine && hasExpandedLink && !conversationDisabled && (
             <FormSheet.Action
               onPress={() => handleRemoveLinkPreviewConfirm()}
               title="Remove link preview"
@@ -309,7 +318,7 @@ function MessageActionsScreenContent({
               accessibilityHint="Removes an expanded link preview from the message."
             />
           )}
-          {(message?.mine || canDeleteNonAuthoredMessages) && (
+          {showDeleteMessageAction && (
             <FormSheet.Action
               onPress={() => handleDeleteConfirm()}
               title="Delete message"

package/src/types/resources/member_ability.ts

@@ -6,4 +6,6 @@ export interface MemberAbilityResource {
   leader: boolean
   canReply: boolean
   canMessageAvailableMembers: boolean
+  canArchive: boolean
+  canUnarchive: boolean
 }

package/src/utils/archived_conversation.ts

@@ -0,0 +1,13 @@
+import type { ConversationResource } from '../types/resources/conversation'
+
+export const ARCHIVED_DISABLED_REASON = 'archived'
+
+const DEFAULT_ARCHIVED_MESSAGE = 'This conversation is archived.'
+
+export const isArchivedConversation = (
+  conversation: Pick<ConversationResource, 'disabledReason'>
+) => conversation.disabledReason === ARCHIVED_DISABLED_REASON
+
+export const archivedConversationMessage = (
+  conversation: Pick<ConversationResource, 'disabledMessage'>
+) => conversation.disabledMessage || DEFAULT_ARCHIVED_MESSAGE

package/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './archived_conversation'
 export * from './assert_keys_are_numbers'
 export * from './attachment_kind'
 export * from './chat_type_label'

package/src/utils/native_adapters/__tests__/menu.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { MenuAdapter, MenuViewProps } from '../menu'
+
+const actions = [{ id: 'all', title: 'All' }]
+
+describe('MenuAdapter', () => {
+  it('renders the trigger and warns when the host configured no menu', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const { View } = new MenuAdapter()
+
+    render(
+      <View actions={actions}>
+        <Text>Trigger</Text>
+      </View>
+    )
+
+    expect(screen.getByText('Trigger')).toBeTruthy()
+    expect(warn).toHaveBeenCalledTimes(1)
+    warn.mockRestore()
+  })
+
+  it('renders through the view the host supplies', () => {
+    const HostMenuView = ({ actions: hostActions, children }: MenuViewProps) => (
+      <>
+        {children}
+        <Text>{hostActions.map(action => action.title).join(',')}</Text>
+      </>
+    )
+    const { View } = new MenuAdapter({ View: HostMenuView })
+
+    render(
+      <View actions={actions}>
+        <Text>Trigger</Text>
+      </View>
+    )
+
+    expect(screen.getByText('Trigger')).toBeTruthy()
+    expect(screen.getByText('All')).toBeTruthy()
+  })
+})

package/src/utils/native_adapters/configuration.ts

@@ -7,6 +7,7 @@ import { HapticAdapter } from './haptic'
 import { ImagePickerAdapter } from './image_picker'
 import { LinkingAdapter } from './linking'
 import { LogAdapter } from './log'
+import { MenuAdapter } from './menu'
 import { StorageAdapter } from './storage_adapter'
 import { VideoAdapter } from './video'
 
@@ -19,6 +20,7 @@ type ChatConfigurations = {
   log?: LogAdapter
   linking?: LinkingAdapter
   haptic?: HapticAdapter
+  menu?: MenuAdapter
 }
 
 export class ChatAdapters {
@@ -31,6 +33,7 @@ export class ChatAdapters {
     Log = configurations.log || new LogAdapter()
     Linking = configurations.linking || new LinkingAdapter(RNLinking)
     Haptic = configurations.haptic || new HapticAdapter()
+    Menu = configurations.menu || new MenuAdapter()
   }
 }
 
@@ -82,6 +85,8 @@ export let Linking: LinkingAdapter = new LinkingAdapter(RNLinking)
 
 export let Haptic: HapticAdapter = new HapticAdapter()
 
+export let Menu: MenuAdapter = new MenuAdapter()
+
 export let Storage = new StorageAdapter({
   getItem: AsyncStorage.getItem,
   setItem: AsyncStorage.setItem,

package/src/utils/native_adapters/index.ts

@@ -5,6 +5,7 @@ export * from './document_picker'
 export * from './image_picker'
 export * from './linking'
 export * from './log'
+export * from './menu'
 export * from './video'
 export * from './haptic'
 export * from './storage_adapter'

package/src/utils/native_adapters/menu.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react'
+import { StyleProp, View, ViewStyle } from 'react-native'
+
+// =================================
+// ====== Types ====================
+// =================================
+
+// Mirrors the props shared by `@expo/ui/community/menu` and
+// `@react-native-menu/menu`, so a host can pass either `MenuView` straight in.
+
+export type MenuActionState = 'on' | 'off'
+
+export interface MenuActionAttributes {
+  destructive?: boolean
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export interface MenuAction {
+  id?: string
+  title: string
+  state?: MenuActionState
+  attributes?: MenuActionAttributes
+  subactions?: MenuAction[]
+  displayInline?: boolean
+}
+
+export interface MenuActionEvent {
+  nativeEvent: { event: string }
+}
+
+export interface MenuViewProps {
+  actions: MenuAction[]
+  onPressAction?: (event: MenuActionEvent) => void
+  onOpenMenu?: () => void
+  onCloseMenu?: () => void
+  shouldOpenOnLongPress?: boolean
+  title?: string
+  style?: StyleProp<ViewStyle>
+  testID?: string
+  children?: React.ReactNode
+}
+
+export type MenuView = React.ComponentType<MenuViewProps>
+
+// =================================
+// ====== Adapter ==================
+// =================================
+
+function UnconfiguredMenuView({ children, style, testID }: MenuViewProps) {
+  useEffect(() => {
+    console.warn('ChatAdapters.configure() must include a menu adapter before rendering a menu')
+  }, [])
+
+  return (
+    <View style={style} testID={testID}>
+      {children}
+    </View>
+  )
+}
+
+export class MenuAdapter {
+  View: MenuView
+
+  constructor(methods?: { View: MenuView }) {
+    this.View = methods?.View ?? UnconfiguredMenuView
+  }
+}