@planningcenter/chat-react-native 3.2.0-rc.1 → 3.2.0-rc.10

package/src/components/conversations/conversation_preview.tsx

@@ -1,17 +1,24 @@
 import React from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { ConversationResource } from '../../types'
 import { AvatarGroup, Heading, Text, Badge } from '../display'
 import { formatDatePreview } from '../../utils/date'
 import { useTheme } from '../../hooks'
 import { UnreadCountBadge } from './unread_count_badge'
+import { ConversationActions } from './conversation_actions'
+import { MuteIndicator } from './mute_indicator'
 
 interface ConversationPreviewProps {
   conversation: ConversationResource
   onPress: () => void
+  showBadges?: boolean
 }
 
-export const ConversationPreview = ({ conversation, onPress }: ConversationPreviewProps) => {
+export const ConversationPreview = ({
+  conversation,
+  onPress,
+  showBadges = true,
+}: ConversationPreviewProps) => {
   const styles = useStyles()
   const {
     lastMessageAuthorName,
@@ -21,9 +28,11 @@ export const ConversationPreview = ({ conversation, onPress }: ConversationPrevi
     title,
     unreadCount,
     badges,
+    muted,
   } = conversation
+
   return (
-    <Pressable style={styles.previewRow} onPress={onPress}>
+    <ConversationActions conversation={conversation} style={styles.previewRow} onPress={onPress}>
       <AvatarGroup size="lg" sourceUris={previewAvatarUrls || []} />
       <View style={styles.conversationBody}>
         <Heading numberOfLines={1} variant="h3" style={styles.title}>
@@ -32,23 +41,38 @@ export const ConversationPreview = ({ conversation, onPress }: ConversationPrevi
         <Text variant="tertiary" numberOfLines={2}>
           {lastMessageAuthorName}: {lastMessageTextPreview}
         </Text>
-        <View style={styles.badges}>
-          {badges?.map(badge => (
-            <Badge
-              key={badge.text}
-              variant="meta"
-              productLogoName={badge.appName}
-              label={badge.pcoResourceType}
-              metaLabel={badge.text || ''}
-            />
-          ))}
-        </View>
+        <ConversationBadges visible={showBadges} badges={badges} />
       </View>
       <View style={styles.metaContainer}>
         <Text variant="tertiary">{formatDatePreview(lastMessageCreatedAt)}</Text>
-        <UnreadCountBadge count={unreadCount} />
+        <View style={styles.statusContainer}>
+          <UnreadCountBadge count={unreadCount} showDot={muted} />
+          <MuteIndicator muted={muted} />
+        </View>
       </View>
-    </Pressable>
+    </ConversationActions>
+  )
+}
+
+const ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: any[] }) => {
+  const styles = useStyles()
+
+  if (!visible || !badges || badges.length === 0) {
+    return null
+  }
+
+  return (
+    <View style={styles.badges}>
+      {badges.map(badge => (
+        <Badge
+          key={badge.text}
+          variant="meta"
+          productLogoName={badge.appName}
+          label={badge.pcoResourceType}
+          metaLabel={badge.text || ''}
+        />
+      ))}
+    </View>
   )
 }
 
@@ -75,10 +99,16 @@ const useStyles = () => {
     },
     metaContainer: {
       rowGap: 4,
+      alignItems: 'flex-end',
     },
     badges: {
       marginTop: 4,
       alignItems: 'flex-start',
     },
+    statusContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
   })
 }

package/src/components/conversations/conversations.tsx

@@ -2,14 +2,12 @@ import { useNavigation } from '@react-navigation/native'
 import { FlashList } from '@shopify/flash-list'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
-import { useConversationsJoltEvents } from '../../hooks/use_conversation_jolt_events'
-import { useConversations } from '../../hooks/use_conversations'
 import { Text } from '../display'
-import { ConversationRequestArgs } from '../../utils/request/conversation'
 import { ConversationPreview } from './conversation_preview'
 
-interface ConversationsProps extends Partial<ConversationRequestArgs> {
+interface ConversationsProps {
   ListHeaderComponent?:
     | React.ComponentType<any>
     | React.ReactElement<any, string | React.JSXElementConstructor<any>>
@@ -17,24 +15,20 @@ interface ConversationsProps extends Partial<ConversationRequestArgs> {
     | undefined
 }
 
-export const Conversations = ({
-  ListHeaderComponent,
-  filter,
-  group,
-  gids,
-  group_source_app_name,
-}: ConversationsProps) => {
+export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
   const styles = useStyles()
 
-  const { conversations, fetchNextPage, refetch, isRefetching, isFetched } = useConversations({
-    filter,
-    group,
-    gids,
-    group_source_app_name,
-  })
+  const {
+    conversations,
+    fetchNextPage,
+    refetch,
+    isRefetching,
+    isFetched,
+    args: { chat_group_graph_id },
+  } = useConversationsContext()
   const navigation = useNavigation()
 
-  useConversationsJoltEvents()
+  const showBadges = !chat_group_graph_id
 
   return (
     <View style={styles.container}>
@@ -54,6 +48,7 @@ export const Conversations = ({
           <ConversationPreview
             conversation={item}
             onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}
+            showBadges={showBadges}
           />
         )}
         onEndReached={() => fetchNextPage()}

package/src/components/conversations/mute_indicator.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { Icon } from '../display'
+import { useTheme } from '../../hooks'
+
+export const MuteIndicator = ({ muted }: { muted: boolean }) => {
+  const styles = useStyles()
+
+  if (!muted) return null
+
+  return <Icon name="general.bellMuted" size={16} style={styles.mutedIcon} />
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    mutedIcon: {
+      color: colors.iconColorDefaultDim,
+    },
+  })
+}

package/src/components/conversations/unread_count_badge.tsx

@@ -4,11 +4,12 @@ import { Text } from '../display'
 import { useTheme } from '../../hooks'
 import { platformFontWeightBold } from '../../utils'
 
-export const UnreadCountBadge = ({ count }: { count: number }) => {
+export const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: boolean }) => {
   const styles = useStyles()
   const displayCount = count > 99 ? '99+' : count
 
   if (count === 0) return null
+  if (showDot) return <View style={styles.dot} />
 
   return (
     <View style={styles.badge}>
@@ -34,5 +35,11 @@ const useStyles = () => {
       fontWeight: platformFontWeightBold,
       color: 'white',
     },
+    dot: {
+      width: 8,
+      height: 8,
+      borderRadius: 8,
+      backgroundColor: colors.fillColorInteractionDefault,
+    },
   })
 }

package/src/components/display/action_button.tsx

@@ -32,7 +32,7 @@ export const ActionButton = ({
   return (
     <Animated.View style={styles.container}>
       {Boolean(infoText) && (
-        <Text style={styles.infoText} variant="tertiary">
+        <Text style={styles.infoText} variant="footnote">
           {infoText}
         </Text>
       )}
@@ -56,7 +56,6 @@ const useStyles = () => {
     },
     infoText: {
       textAlign: 'center',
-      color: colors.textColorDefaultSecondary,
     },
   })
 }

package/src/components/display/badge.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import type { TextStyle, ViewProps, ViewStyle } from 'react-native'
 import { Pressable, StyleSheet, View } from 'react-native'
 import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
 import { platformFontWeightMedium, space } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
-import { Icon } from './icon'
+import { Icon, IconString } from './icon'
 import { Text } from './text'
 import { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'
 
@@ -37,11 +37,14 @@ type VariantStyles = Record<
 >
 
 type ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'
+type ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element
 
-const PRODUCT_LOGO_COMPONENT_MAP = {
+const PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {
+  Groups: GroupsLogo,
   groups: GroupsLogo,
   services: ServicesIcon,
-} as const
+  Services: ServicesIcon,
+}
 
 // =================================
 // ====== Component ================
@@ -71,11 +74,11 @@ interface BadgeProps {
   /**
    * Shows an icon of the user choice to the left of the text.
    */
-  iconName?: string
+  iconName?: IconString
   /**
    * Shows an icon of the user choice to the right of the text.
    */
-  iconNameRight?: string
+  iconNameRight?: IconString
   /**
    * Styles badge wrapper.
    */
@@ -109,7 +112,7 @@ export function Badge({
   const hasMetaLabel = Boolean(metaLabel)
 
   const showLogo = showBadgeProductLogo && productLogoName
-  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName?.toLowerCase()]
+  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]
   const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label
 
   return (
@@ -117,7 +120,7 @@ export function Badge({
       <View style={styles.badge}>
         {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}
         {iconName && <Icon name={iconName} style={styles.icon} />}
-        <Text variant="footnote" style={styles.label}>
+        <Text variant="footnote" style={styles.label} numberOfLines={1}>
           {badgeLabel}
         </Text>
         {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}
@@ -238,6 +241,7 @@ const useStyles = ({
       fontWeight: variantStylesMap[variant].fontWeight,
       fontSize: badgeFontSize,
       lineHeight: 15 * fontScale,
+      flexShrink: 1,
     },
     metaLabel: {
       paddingHorizontal: variantStylesMap[variant].paddingHorizontal,

package/src/components/display/button.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import type { PressableProps, ViewStyle } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
-import { Icon } from './icon'
+import { Icon, IconString } from './icon'
 import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'
@@ -74,11 +74,11 @@ export interface ButtonProps extends PressableProps {
   /**
    * Generates an icon to the left of the button text
    */
-  iconNameLeft?: string
+  iconNameLeft?: IconString
   /**
    * Generates an icon to the right of the button text
    */
-  iconNameRight?: string
+  iconNameRight?: IconString
   /**
    * Disables the button and replaces its content with a spinner
    */

package/src/components/display/icon.tsx

@@ -4,14 +4,24 @@ import type { ColorValue, StyleProp, ViewStyle } from 'react-native'
 import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
+
+// @ts-ignore
 import * as api from '@planningcenter/icons/paths/api'
+// @ts-ignore
 import * as brand from '@planningcenter/icons/paths/brand'
+// @ts-ignore
 import * as calendar from '@planningcenter/icons/paths/calendar'
+// @ts-ignore
 import * as churchCenter from '@planningcenter/icons/paths/church-center'
+// @ts-ignore
 import * as general from '@planningcenter/icons/paths/general'
+// @ts-ignore
 import * as groups from '@planningcenter/icons/paths/groups'
+// @ts-ignore
 import * as logomark from '@planningcenter/icons/paths/logomark'
+// @ts-ignore
 import * as people from '@planningcenter/icons/paths/people'
+// @ts-ignore
 import * as services from '@planningcenter/icons/paths/services'
 
 // =================================
@@ -37,6 +47,9 @@ type IconStyle = ViewStyle & {
   color?: string
 }
 
+export type IconSetName = keyof typeof ICONS
+export type IconString = `${IconSetName}.${(typeof ICONS)[IconSetName]}`
+
 // =================================
 // ====== Component ================
 // =================================
@@ -46,7 +59,7 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
    * Made up of the set.iconName.
    * Example: "general.textMessage"
    */
-  name: string
+  name: IconString
   /**
    * This sets a static size for the icon.
    * Providing a fontSize style will allow the icon to scale with the device's text a11y size.
@@ -112,10 +125,10 @@ const useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?
   return size || FALLBACK_SIZE
 }
 
-const getIconPath = (name: string): string => {
+const getIconPath = (name: IconString): string => {
   const [setName, iconName] = name.split('.')
 
-  return ICONS[setName]?.[iconName]
+  return ICONS[setName as IconSetName]?.[iconName]
 }
 
 // =================================

package/src/components/display/icon_button.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Pressable, StyleSheet } from 'react-native'
 import type { PressableProps, ViewStyle } from 'react-native'
 import { Icon } from './icon'
-import type { IconProps } from './icon'
+import type { IconProps, IconString } from './icon'
 import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'
 import { platformPressedOpacityStyle } from '../../utils'
 import { Spinner } from './spinner'
@@ -67,7 +67,7 @@ interface IconButtonProps extends PressableProps {
   /**
    * Generates an icon from `@planningcenter/icons`
    */
-  name: string
+  name: IconString
   /**
    * Changes the overall size of the button and its contents
    */

package/src/components/display/person.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, type ViewStyle } from 'react-native'
 import { platformFontWeightMedium } from '../../utils/styles'
 import { MemberResource } from '../../types'
 import { Avatar } from './avatar'
@@ -13,13 +13,14 @@ import { space } from '../../utils'
 
 interface PersonProps {
   person: MemberResource
+  style?: ViewStyle
 }
 
-export function Person({ person }: PersonProps) {
+export function Person({ person, style }: PersonProps) {
   const styles = useStyles()
 
   return (
-    <View style={styles.wrapper}>
+    <View style={[styles.wrapper, style]}>
       <Avatar sourceUri={person.avatar} />
       <View style={styles.content}>
         <Text style={styles.name}>{person.name}</Text>

package/src/components/display/text.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '../../hooks'
 import React from 'react'
-import { Platform, StyleSheet, Text as ReactNativeText } from 'react-native'
+import { StyleSheet, Text as ReactNativeText } from 'react-native'
 import type { TextStyle, TextProps as ReactNativeTextProps } from 'react-native'
 import { tokens } from '../../vendor/tapestry/tokens'
 

package/src/components/display/toggle_button.tsx

@@ -5,7 +5,7 @@ import { Text } from './text'
 import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'
 import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'
 import colorFunction from 'color'
-import { Icon } from './icon'
+import { Icon, IconString } from './icon'
 import { tokens } from '../../vendor/tapestry/tokens'
 
 // =================================
@@ -28,11 +28,11 @@ export interface ToggleButtonProps extends PressableProps {
   /**
    * Generates an icon to the left of the button text
    */
-  iconNameLeft?: string
+  iconNameLeft?: IconString
   /**
    * Generates an icon to the right of the button text
    */
-  iconNameRight?: string
+  iconNameRight?: IconString
   /**
    * Specifies the maximum size a font can reach when allowFontScaling is enabled.
    */

package/src/components/display/utils/button_colors.ts

@@ -89,12 +89,17 @@ function useGradientColorMap(): GradientColorMap {
 // ====== Functions ================
 // =================================
 
-interface GetColorKeyArgs {
+interface GetColorKeyArgs<T> {
   disabled: boolean | null
   loading?: boolean
-  appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion
+  appearance: T
 }
-function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs) {
+
+function getColorKey<T extends ButtonAppearanceUnion | IconButtonAppearanceUnion>({
+  disabled,
+  loading,
+  appearance,
+}: GetColorKeyArgs<T>) {
   if (disabled || loading) return 'disabled'
   return appearance
 }

package/src/components/primitive/avatar_primitive.tsx

@@ -168,10 +168,11 @@ interface AvatarGroupProps {
   sourceUris: string[]
 }
 
+type AvatarIndex = 0 | 1 | 2 | 3
 function AvatarGroup({ sourceUris }: AvatarGroupProps) {
   const styles = useStyles()
   const { setAllImagesLoaded } = useAvatarContext()
-  const [loadingStatus, setLoadingStatus] = useState({
+  const [loadingStatus, setLoadingStatus] = useState<Record<AvatarIndex, boolean>>({
     0: false,
     1: false,
     2: false,
@@ -180,7 +181,7 @@ function AvatarGroup({ sourceUris }: AvatarGroupProps) {
   const displayUris = sourceUris.slice(0, 4)
   const hasDisplayUris = displayUris.length > 0
 
-  const handleImageLoaded = index => {
+  const handleImageLoaded = (index: AvatarIndex) => {
     setLoadingStatus(prev => ({
       ...prev,
       [index]: true,
@@ -189,7 +190,8 @@ function AvatarGroup({ sourceUris }: AvatarGroupProps) {
 
   useEffect(() => {
     const allImagesLoaded =
-      hasDisplayUris && displayUris.every((_, index) => loadingStatus[index] === true)
+      hasDisplayUris &&
+      displayUris.every((_, index) => loadingStatus[index as AvatarIndex] === true)
 
     setAllImagesLoaded(allImagesLoaded)
   }, [displayUris, hasDisplayUris, loadingStatus, setAllImagesLoaded])

package/src/components/primitive/banner_primitive.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { useCreateAndroidRippleColor, useFontScale } from '../../hooks'
-import { Icon } from '../display/icon'
+import { Icon, IconString } from '../display/icon'
 import { Heading } from '../display/heading'
 import { Text } from '../display/text'
 import { TextInlineButton } from '../display/text_inline_button'
@@ -161,7 +161,7 @@ BannerContent.displayName = 'Banner.Content'
 // ========================================
 
 interface BannerStatusIconProps {
-  iconName?: string
+  iconName?: IconString
 }
 
 function BannerStatusIcon({ iconName }: BannerStatusIconProps) {
@@ -271,7 +271,6 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
       padding: space(1.5),
       gap: space(1),
       borderRadius: tokens.borderRadiusMd,
-      flex: 1,
     },
     content: {
       gap: space(0.5),

package/src/contexts/api_provider.tsx

@@ -48,7 +48,7 @@ function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): bool
   return Boolean(prevToken && newToken !== prevToken) || Boolean(prevEnv && newEnv !== prevEnv)
 }
 
-function usePrevious<T>(value) {
+function usePrevious<T>(value: T): T {
   const ref = useRef<T>(value)
 
   useEffect(() => {

package/src/contexts/chat_context.tsx

@@ -11,6 +11,7 @@ export type ChatContextValue = {
   theme: ChatTheme
   env?: ENV
   session: Session
+  giphyApiKey?: string
 }
 
 export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'theme' | 'session'> {
@@ -23,10 +24,11 @@ export const ChatContext = createContext<ChatContextValue>({
   env: undefined,
   onUnauthorizedResponse: () => {},
   session: new Session(),
+  giphyApiKey: undefined,
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {
-  const { env, token, onUnauthorizedResponse } = value
+  const { env, token, onUnauthorizedResponse, giphyApiKey } = value
   const theme = useCreateChatTheme(value.theme || {})
   const session = useMemo(() => new Session({ token, env }), [env, token])
 
@@ -36,6 +38,7 @@ export function ChatProvider({ children, value }: { children: any; value: ChatPr
     onUnauthorizedResponse,
     session,
     theme,
+    giphyApiKey,
   }
 
   return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>
@@ -46,6 +49,10 @@ export interface CreateChatThemeProps {
   colorScheme?: ColorSchemeName
 }
 
+export const useChatContext = () => {
+  return React.useContext(ChatContext)
+}
+
 export const useCreateChatTheme = ({
   theme: customTheme = {},
   colorScheme: appColorScheme,

package/src/contexts/conversations_context.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
+import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
+import { useConversations, UseConversationsValue } from '../hooks/use_conversations'
+import {
+  FetchNextPageOptions,
+  InfiniteQueryObserverResult,
+  InfiniteData,
+} from '@tanstack/react-query'
+import { ApiCollection, ConversationResource } from '../types'
+import { useConversationsJoltEvents } from '../hooks/use_conversations_jolt_events'
+
+interface ConversationsContextValue extends UseConversationsValue {
+  activeConversationId?: number
+  setActiveConversationId: (_id: number) => void
+  args: ConversationFiltersParams
+}
+
+const defaultQueryValue: UseConversationsValue = {
+  conversations: [],
+  refetch: () => Promise.resolve(null),
+  error: null,
+  isError: false,
+  fetchNextPage,
+  hasNextPage: false,
+  isFetching: false,
+  isFetched: false,
+  isRefetching: false,
+}
+
+const ConversationsContext = createContext<ConversationsContextValue>({
+  args: {},
+  activeConversationId: undefined,
+  setActiveConversationId: () => {},
+  ...defaultQueryValue,
+})
+
+export const ConversationsContextProvider = ({
+  children,
+  args,
+}: PropsWithChildren<{ args: ConversationFiltersParams }>) => {
+  const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
+  const { chat_group_graph_id, group_source_app_name } = args
+
+  const query = useConversations({ chat_group_graph_id, group_source_app_name })
+
+  const value = useMemo(
+    () => ({
+      args,
+      activeConversationId,
+      setActiveConversationId,
+      ...query,
+    }),
+    [args, activeConversationId, query]
+  )
+
+  useConversationsJoltEvents(args)
+
+  return <ConversationsContext.Provider value={value}>{children}</ConversationsContext.Provider>
+}
+
+function fetchNextPage(
+  _options?: FetchNextPageOptions
+): Promise<
+  InfiniteQueryObserverResult<InfiniteData<ApiCollection<ConversationResource>, unknown>, Response>
+> {
+  throw new Error('Function not implemented.')
+}
+
+export const useConversationsContext = () => useContext(ConversationsContext)