@planningcenter/chat-react-native 3.15.0 → 3.16.0-rc.1

package/src/components/conversation/reply_connectors.tsx

@@ -0,0 +1,192 @@
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import { useTheme } from '../../hooks'
+import { MessageResource } from '../../types'
+import {
+  CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+  MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+} from '../../utils/styles'
+import { REPLIES_FEATURE_ENABLED } from '../../screens/conversation_screen'
+
+const MY_REPLY_CONNECTOR_WIDTH = 38
+const CONNECTOR_BORDER_WIDTH = 4
+
+interface ReplyConnectorProps {
+  message: MessageResource
+  messageBubbleHeight: number
+}
+
+export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
+  const styles = useStyles()
+
+  if (!REPLIES_FEATURE_ENABLED) return null
+
+  // TODO: Need to remove, just adding this to remove the lint warning about message being unused
+  console.log('message', message)
+
+  const connectorMap: Record<string, React.ReactNode | null> = {
+    shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,
+    verticalLine: <VerticalLineConnector />,
+    default: null,
+  }
+
+  // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.
+  const getConnectorKey = () => {
+    // TODO: if (message.previousMessageIsTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage) return 'shortTailCurve'
+    // TODO: if (message.isRootMessage || (message.isTheirReplyMessage && message.nextMessageIsTheirReplyMessage) || (message.isTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage && !message.nextMessageIsMyMessage)) return 'verticalLine'
+    return 'default'
+  }
+
+  const ConnectorComponent = connectorMap[getConnectorKey()]
+
+  if (!ConnectorComponent) return null
+
+  return <View style={styles.theirReplyConnectorContainer}>{ConnectorComponent}</View>
+}
+
+// TODO: Refactor how we choose the correct connector once we have the logic in place
+export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
+  const styles = useStyles()
+
+  if (!REPLIES_FEATURE_ENABLED) return null
+
+  // TODO: Need to remove, just adding this to remove the lint warning about message being unused
+  console.log('message', message)
+
+  const connectorMap: Record<string, React.ReactNode | null> = {
+    longTailCurve: (
+      <LongTailCurveConnector
+        height={messageBubbleHeight / 2}
+        style={styles.myReplyConnectorPosition}
+      />
+    ),
+    longHeadCurve: (
+      <LongHeadCurveConnector
+        height={messageBubbleHeight / 2}
+        style={styles.myReplyConnectorPosition}
+      />
+    ),
+    verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,
+    swirl: <SwirlConnector style={styles.myReplyConnectorPosition} />,
+    default: null,
+  }
+
+  // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.
+  const getConnectorKey = () => {
+    // TODO: if (message.currentMessageIsReply && (message.nextMessageIsNotReplyMessage || message.nextMessageIsDifferentReplyRootId)) return 'longTailCurve'
+    // TODO: if (message.currentMessageIsReplyRoot && message.nextMessageIsMyReply) return 'longHeadCurve'
+    // TODO: if (message.currentMessageIsReply && message.nextMessageIsReply) return 'verticalLine'
+    // TODO: if (message.currentMessageIsReply && message.previousMessageSomeoneElseReply && (message.nextMessageIsSomeoneElseReply || message.nextMessageIsMyReply)) return 'swirl'
+    return 'default'
+  }
+
+  const ConnectorComponent = connectorMap[getConnectorKey()]
+
+  if (!ConnectorComponent) return null
+
+  return <View style={styles.myReplyConnectorContainer}>{ConnectorComponent}</View>
+}
+
+function VerticalLineConnector({ style }: { style?: ViewStyle }) {
+  const styles = useStyles()
+  return <View style={[styles.verticalLineConnector, style]} />
+}
+
+function LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
+  const styles = useStyles()
+  return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]} />
+}
+
+function LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
+  const styles = useStyles()
+  return <View style={[styles.longTailCurveConnector, { height }, style]} />
+}
+
+function ShortTailCurveConnector({ height }: { height: number }) {
+  const styles = useStyles()
+  return <View style={[styles.shortTailCurveConnector, { height }]} />
+}
+
+function SwirlConnector({ style }: { style?: ViewStyle }) {
+  const styles = useStyles()
+  const { colors } = useTheme()
+  const borderColor = colors.borderColorDefaultBase
+
+  return (
+    <View style={[styles.swirlConnectorContainer, style]}>
+      <View style={styles.swirlConnectorVerticalLineHead} />
+      <Svg width={27} height={34} fill="none">
+        <Path
+          stroke={borderColor}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+          d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"
+        />
+      </Svg>
+      <View style={styles.swirlConnectorVerticalLineTail} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const borderColor = colors.borderColorDefaultBase
+
+  return StyleSheet.create({
+    theirReplyConnectorContainer: {
+      width: '50%',
+      alignSelf: 'flex-end',
+      flex: 1,
+    },
+    myReplyConnectorContainer: {
+      width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+      position: 'absolute',
+      left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+      top: 0,
+      bottom: 0,
+    },
+    myReplyConnectorPosition: {
+      left: '50%',
+    },
+    verticalLineConnector: {
+      flex: 1,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderLeftColor: borderColor,
+    },
+    longHeadCurveConnector: {
+      width: MY_REPLY_CONNECTOR_WIDTH,
+      borderColor: borderColor,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderTopWidth: CONNECTOR_BORDER_WIDTH,
+      borderTopLeftRadius: 16,
+      flex: 1,
+    },
+    longTailCurveConnector: {
+      width: MY_REPLY_CONNECTOR_WIDTH,
+      borderColor: borderColor,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderBottomWidth: CONNECTOR_BORDER_WIDTH,
+      borderBottomLeftRadius: 16,
+    },
+    shortTailCurveConnector: {
+      borderColor: borderColor,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderBottomWidth: CONNECTOR_BORDER_WIDTH,
+      borderBottomLeftRadius: 16,
+    },
+    swirlConnectorContainer: {
+      flex: 1,
+    },
+    swirlConnectorVerticalLineHead: {
+      backgroundColor: borderColor,
+      width: CONNECTOR_BORDER_WIDTH,
+      flex: 1,
+      marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector
+    },
+    swirlConnectorVerticalLineTail: {
+      backgroundColor: borderColor,
+      width: CONNECTOR_BORDER_WIDTH,
+      flex: 1,
+      marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector
+    },
+  })
+}

package/src/components/display/avatar.tsx

@@ -14,6 +14,7 @@ interface AvatarProps {
   fallbackIconName?: IconString
   style?: AvatarRootProps['style']
   maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
+  minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier']
 }
 
 export function Avatar({
@@ -24,11 +25,17 @@ export function Avatar({
   fallbackIconName = 'general.person',
   style,
   maxFontSizeMultiplier,
+  minFontSizeMultiplier,
 }: AvatarProps) {
   const shouldShowFallback = showFallback || !sourceUri
 
   return (
-    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
+    <AvatarPrimitive.Root
+      size={size}
+      style={style}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      minFontSizeMultiplier={minFontSizeMultiplier}
+    >
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/display/avatar_group.tsx

@@ -12,6 +12,7 @@ interface AvatarGroupDisplayProps {
   size?: AvatarRootProps['size']
   style?: AvatarRootProps['style']
   maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
+  minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier']
 }
 
 export function AvatarGroup({
@@ -21,11 +22,17 @@ export function AvatarGroup({
   size = 'lg',
   style,
   maxFontSizeMultiplier,
+  minFontSizeMultiplier,
 }: AvatarGroupDisplayProps) {
   const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0
 
   return (
-    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
+    <AvatarPrimitive.Root
+      size={size}
+      style={style}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      minFontSizeMultiplier={minFontSizeMultiplier}
+    >
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/primitive/avatar_primitive.tsx

@@ -86,6 +86,7 @@ interface AvatarContextType {
   allImagesLoaded: boolean
   setAllImagesLoaded: React.Dispatch<React.SetStateAction<boolean>>
   maxFontSizeMultiplier: number
+  minFontSizeMultiplier?: number
 }
 
 const AvatarContext = createContext<AvatarContextType | null>(null)
@@ -107,6 +108,7 @@ interface AvatarRootProps {
   size?: AvatarSize
   style?: ViewProps['style']
   maxFontSizeMultiplier?: number
+  minFontSizeMultiplier?: number
 }
 
 function AvatarRoot({
@@ -114,13 +116,20 @@ function AvatarRoot({
   size = 'md',
   style,
   maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  minFontSizeMultiplier = undefined,
 }: AvatarRootProps) {
   const [allImagesLoaded, setAllImagesLoaded] = useState(false)
-  const styles = useStyles({ size, maxFontSizeMultiplier })
+  const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return (
     <AvatarContext.Provider
-      value={{ size, allImagesLoaded, setAllImagesLoaded, maxFontSizeMultiplier }}
+      value={{
+        size,
+        allImagesLoaded,
+        setAllImagesLoaded,
+        maxFontSizeMultiplier,
+        minFontSizeMultiplier,
+      }}
     >
       <View style={[styles.rootContainer, style]}>{children}</View>
     </AvatarContext.Provider>
@@ -136,8 +145,8 @@ AvatarRoot.displayName = 'Avatar.Root'
 type AvatarMaskProps = ViewProps
 
 function AvatarMask({ children, ...props }: AvatarMaskProps) {
-  const { maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
+  const { maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return (
     <View style={styles.mask} {...props}>
@@ -157,8 +166,8 @@ interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
 }
 
 function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledAvatarSize = AVATAR_PX[size] * fontScale
 
   return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt="" />
@@ -183,9 +192,9 @@ interface AvatarImageFallbackProps {
 }
 
 function AvatarImageFallback({ name = 'general.person' }: AvatarImageFallbackProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale
 
   return (
@@ -213,8 +222,8 @@ interface AvatarGroupProps {
 type AvatarIndex = 0 | 1 | 2 | 3
 
 function AvatarGroup({ sourceUris }: AvatarGroupProps) {
-  const { setAllImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier })
+  const { setAllImagesLoaded, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const [loadingStatus, setLoadingStatus] = useState<Record<AvatarIndex, boolean>>({
     0: false,
     1: false,
@@ -323,9 +332,9 @@ AvatarGroup.displayName = 'Avatar.Group'
 // =================================
 
 function AvatarGroupLoader() {
-  const { size, allImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ size, maxFontSizeMultiplier })
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const { size, allImagesLoaded, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const scaledSpinnerSize = AVATAR_PX[size] * fontScale
 
   if (allImagesLoaded) return null
@@ -348,8 +357,8 @@ interface AvatarPresenceProps extends ViewProps {
 }
 
 function AvatarPresence({ presence, ...props }: AvatarPresenceProps) {
-  const { size, maxFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ size, presence, maxFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, presence, maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return <View style={styles.presence} {...props} />
 }
@@ -364,15 +373,17 @@ interface Styles {
   size?: AvatarSize
   presence?: AvatarPresenceType
   maxFontSizeMultiplier?: number
+  minFontSizeMultiplier?: number
 }
 
 const useStyles = ({
   size = 'md',
   presence = 'offline',
   maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+  minFontSizeMultiplier = undefined,
 }: Styles = {}) => {
   const { colors } = useTheme()
-  const fontScale = useFontScale({ maxFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier })
   const PRESENCE_COLOR = {
     online: colors.fillColorInteractionOnlineDefault,
     offline: colors.iconColorDefaultDisabled,

package/src/screens/conversation_screen.tsx

@@ -35,6 +35,8 @@ import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 
+export const REPLIES_FEATURE_ENABLED = false
+
 export type ConversationRouteProps = {
   conversation_id: number
   chat_group_graph_id?: string

package/src/screens/conversations/conversations_screen.tsx

@@ -55,7 +55,7 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
   }
 
   const handleGetHelp = useCallback(() => {
-    navigation.navigate('GetHelp')
+    navigation.navigate('GetHelp', { type: 'chat' })
   }, [navigation])
 
   return (

package/src/screens/get_help_screen.tsx

@@ -1,13 +1,16 @@
-import { useNavigation } from '@react-navigation/native'
-import { NativeStackScreenProps } from '@react-navigation/native-stack'
-import { useCallback } from 'react'
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import { useCallback, useMemo } from 'react'
 import { Linking, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
 import { ResourceObject } from '../types'
 
-type GetHelpScreenProps = NativeStackScreenProps<{}>
+type GetHelpScreenRouteProps = {
+  type?: 'chat' | 'general'
+}
+
+type GetHelpScreenProps = StaticScreenProps<GetHelpScreenRouteProps>
 
 interface OrganizationResource extends ResourceObject {
   id: number
@@ -37,16 +40,42 @@ const useOrganization = () => {
   return organization
 }
 
-export const GetHelpScreen = ({}: GetHelpScreenProps) => {
+interface HelpUrlResource extends ResourceObject {
+  id: number
+  link: string
+  title: string
+  product: 'services' | 'churchcenter'
+  type: 'chat' | 'general'
+}
+
+const useHelpUrls = () => {
+  const { data: helpUrls = [] } = useApiGet<HelpUrlResource[]>({
+    url: '/help_urls',
+    data: {
+      fields: {
+        HelpUrl: [],
+      },
+    },
+  })
+
+  return helpUrls
+}
+
+export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
+  const { type = 'chat' } = route.params || {}
   const styles = useStyles()
   const appName = useAppName()
-  const isChurchCenter = appName === 'churchcenter'
   const navigation = useNavigation()
   const organization = useOrganization()
   const contactPresent = organization?.contactEmail || organization?.contactPhoneNumber
-  const getHelpLink = isChurchCenter
-    ? organization?.churchCenterChatHelpUrl
-    : organization?.servicesChatHelpUrl
+  const helpUrls = useHelpUrls()
+  const appSpecificHelpUrls = useMemo(
+    () =>
+      helpUrls
+        .filter(helpUrl => helpUrl.product === appName)
+        .filter(helpUrl => helpUrl.type.includes(type)),
+    [helpUrls, appName, type]
+  )
 
   const handleNavigateToBugReport = useCallback(() => {
     navigation.navigate('BugReport')
@@ -54,15 +83,20 @@ export const GetHelpScreen = ({}: GetHelpScreenProps) => {
 
   return (
     <View style={[styles.container]}>
-      <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
-        How-to articles
-      </Heading>
-      <PressableRow
-        onPress={() => Linking.openURL(getHelpLink || '')}
-        text="Get help with chat"
-        isActive={true}
-        iconPath="general.newWindow"
-      />
+      {appSpecificHelpUrls.length > 0 && (
+        <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
+          How-to articles
+        </Heading>
+      )}
+      {appSpecificHelpUrls.map(helpUrl => (
+        <PressableRow
+          key={helpUrl.id}
+          onPress={() => Linking.openURL(helpUrl.link)}
+          text={helpUrl.title}
+          isActive={true}
+          iconPath="general.newWindow"
+        />
+      ))}
       {contactPresent && (
         <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
           Contact {organization?.name}

package/src/utils/styles.ts

@@ -5,6 +5,7 @@ export const MAX_FONT_SIZE_MULTIPLIER = 1.5
 export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
+export const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 
 export const platformFontWeightMedium = Platform.select({
   ios: tokens.fontWeightMedium,