@planningcenter/chat-react-native 3.1.0-rc.9 → 3.2.0-rc.0

package/src/screens/conversation_details_screen.tsx

@@ -17,12 +17,15 @@ import {
   type ViewProps,
   Pressable,
   Alert,
+  Platform,
 } from 'react-native'
-import { ChildNotice, Heading, Icon, Person, Switch, Text, TextButton } from '../components'
+import { HeaderTitle as ElementsHeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
+import { Badge, ChildNotice, Heading, Icon, Person, Switch, Text, TextButton } from '../components'
 import { useSuspenseGet, useTheme } from '../hooks'
 import {
   useConversation,
   useConversationDelete,
+  useConversationDisableReplies,
   useConversationMute,
   useConversationUpdate,
 } from '../hooks/use_conversation'
@@ -32,6 +35,7 @@ import { FlashList } from '@shopify/flash-list'
 import { space } from '../utils'
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
+import { GroupResource } from '../types/resources/group_resource'
 
 // =========================================
 // ====== Factory Constants & Types ========
@@ -58,6 +62,7 @@ interface DataItem<T, TName extends SectionTypes> {
   data: T
   sectionOuterStyle?: ViewStyle
   sectionInnerStyle?: ViewStyle
+  showBottomBorder?: boolean
 }
 
 // =================================
@@ -75,6 +80,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { data: conversation } = useConversation(route.params)
   const [title, setTitle] = useState(conversation.title)
   const { muted, setMuted } = useConversationMute(route.params)
+  const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
 
@@ -83,6 +89,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   const canUpdate = conversation.memberAbility?.canUpdate || false
   const canDelete = conversation.memberAbility?.canDelete || false
+  const isLeader = conversation.memberAbility?.leader || false
 
   const { data: members } = useSuspenseGet<MemberResource[]>({
     url: `/me/conversations/${route.params.conversation_id}/members`,
@@ -94,16 +101,39 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     },
   })
 
+  const memberSectionStyleMap = {
+    first: styles.sectionInnerFirstMember,
+    middle: styles.sectionInnerMiddleMiddle,
+    last: styles.sectionInnerLastMember,
+  }
+
+  const memberItems = members.map((data, index) => {
+    const isFirst = index === 0
+    const isLast = index === members.length - 1
+    const memberPosition = isFirst ? 'first' : isLast ? 'last' : 'middle'
+    const memberSectionStyle = memberSectionStyleMap[memberPosition]
+
+    return {
+      type: data.child ? SectionTypes.hidden : SectionTypes.members,
+      data,
+      sectionInnerStyle: memberSectionStyle,
+    }
+  })
+
   const childMembers = members.filter(member => member.child)
   const hasChildren = childMembers.length > 0
-  const isLeader = true // TODO: replace with value from the server
 
-  const memberItems = members.map(data => ({
-    type: data.child ? SectionTypes.hidden : SectionTypes.members,
-    data,
-    sectionOuterStyle: styles.memberSectionOuter,
-    sectionInnerStyle: styles.memberSectionInner,
-  }))
+  const teamsGroup =
+    conversation.groups
+      ?.filter(g => g.sourceAppName === 'Services')
+      ?.filter(g => ['Team', 'PlanTeam'].includes(g.sourceType))
+      ?.filter(g => g.name !== null) || []
+  const hasTeams = teamsGroup.length > 0
+
+  const badge = conversation.badges?.[0]
+  const resourceType = badge?.pcoResourceType || ''
+  const productName = badge?.appName
+  const name = badge?.text || undefined
 
   const handleDelete = useCallback(() => {
     Alert.alert(
@@ -126,6 +156,24 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     )
   }, [deleteConversation, navigation, title])
 
+  const HeaderTitle = useCallback(
+    (props: HeaderTitleProps) => {
+      return (
+        <View style={styles.headerTitleContainer}>
+          <ElementsHeaderTitle {...props} />
+          <Badge
+            variant="metaSubtle"
+            label={resourceType}
+            metaLabel={name}
+            style={styles.headerTitleBadge}
+            productLogoName={productName}
+          />
+        </View>
+      )
+    },
+    [name, productName, resourceType, styles.headerTitleBadge, styles.headerTitleContainer]
+  )
+
   const HeaderRight = useCallback(() => {
     return (
       <HeaderRightButton
@@ -142,8 +190,9 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   useEffect(() => {
     navigation.setOptions({
       headerRight: HeaderRight,
+      headerTitle: HeaderTitle,
     })
-  }, [HeaderRight, navigation])
+  }, [HeaderRight, HeaderTitle, navigation])
 
   const listData = [
     {
@@ -158,11 +207,13 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
           />
         ),
       },
+      sectionInnerStyle: styles.sectionInnerTitleInput,
     },
     {
       type: SectionTypes.header,
       data: { title: 'Settings' },
-      sectionInnerStyle: styles.addBottomBorder,
+      showBottomBorder: true,
+      sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
     },
     {
       type: SectionTypes.setting,
@@ -170,28 +221,50 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
         title: 'Mute',
         rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,
       },
-      sectionInnerStyle: styles.addBottomBorder,
+      showBottomBorder: true,
+    },
+    {
+      type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
+      data: {
+        title: 'Freeze converation',
+        subtitle: 'Disables replies for everyone except leaders.',
+        rightItem: (
+          <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />
+        ),
+      },
+      showBottomBorder: true,
     },
     {
       type: canDelete ? SectionTypes.setting : SectionTypes.hidden,
       data: {
         title: 'Delete conversation…',
-        style: styles.deleteButton,
         buttonTextStyle: styles.deleteButtonText,
         appearance: 'danger',
         onPress: handleDelete,
       },
     },
+    {
+      type: hasTeams ? SectionTypes.header : SectionTypes.hidden,
+      data: { title: 'Teams' },
+      sectionInnerStyle: styles.sectionInnerHeader,
+    },
+    {
+      type: hasTeams ? SectionTypes.view : SectionTypes.hidden,
+      data: {
+        children: <TeamsGroup teams={teamsGroup} />,
+      },
+    },
     {
       type: SectionTypes.header,
-      data: { title: 'Members' },
+      data: { title: 'People' },
+      sectionInnerStyle: styles.sectionInnerHeader,
     },
     {
       type: hasChildren && isLeader ? SectionTypes.view : SectionTypes.hidden,
       data: {
         children: <ChildNotice childMembers={childMembers} />,
       },
-      sectionOuterStyle: styles.childNoticeSectionOuter,
+      sectionInnerStyle: styles.sectionInnerChildNotice,
     },
     ...memberItems,
   ].filter(item => item.type !== SectionTypes.hidden)
@@ -201,97 +274,98 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     .filter(isDefined)
 
   return (
-    <FlashList
-      data={listData as SectionListData}
-      estimatedItemSize={52}
-      contentContainerStyle={styles.contentContainer}
-      renderItem={({ item, index }) => {
-        const [isStart, isEnd] = [
-          index === 0 || headerIndices.includes(index),
-          index === listData.length - 1 || headerIndices.includes(index + 1),
-        ]
-
-        switch (item.type) {
-          case SectionTypes.header:
-            return (
-              <ListSection
-                isStart={isStart}
-                isEnd={isEnd}
-                outerStyle={item?.sectionOuterStyle}
-                innerStyle={item?.sectionInnerStyle}
-              >
-                <SectionHeading title={item.data.title} />
-              </ListSection>
-            )
-          case SectionTypes.members:
-            return (
-              <ListSection
-                isStart={isStart}
-                isEnd={isEnd}
-                outerStyle={item?.sectionOuterStyle}
-                innerStyle={item?.sectionInnerStyle}
-              >
-                <Person person={{ ...item.data }} />
-              </ListSection>
-            )
-          case SectionTypes.setting:
-            return (
-              <ListSection
-                isStart={isStart}
-                isEnd={isEnd}
-                outerStyle={item?.sectionOuterStyle}
-                innerStyle={item?.sectionInnerStyle}
-              >
-                <SettingRow {...item.data} />
-              </ListSection>
-            )
-          case SectionTypes.view:
-            return (
-              <ListSection
-                isStart={isStart}
-                isEnd={isEnd}
-                outerStyle={item?.sectionOuterStyle}
-                innerStyle={item?.sectionInnerStyle}
-              >
-                <View {...item.data} style={item.data.style} />
-              </ListSection>
-            )
-          default:
-            return null
-        }
-      }}
-    />
+    <View style={styles.listContainer}>
+      <FlashList
+        data={listData as SectionListData}
+        estimatedItemSize={52}
+        contentContainerStyle={styles.contentContainer}
+        renderItem={({ item, index }) => {
+          const [isStart, isEnd] = [
+            index === 0 || headerIndices.includes(index),
+            index === listData.length - 1 || headerIndices.includes(index + 1),
+          ]
+
+          switch (item.type) {
+            case SectionTypes.header:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <Heading variant="h3">{item.data.title}</Heading>
+                </ListSection>
+              )
+            case SectionTypes.members:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <Person person={{ ...item.data }} />
+                </ListSection>
+              )
+            case SectionTypes.setting:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <SettingRow {...item.data} />
+                </ListSection>
+              )
+            case SectionTypes.view:
+              return (
+                <ListSection
+                  isStart={isStart}
+                  isEnd={isEnd}
+                  showBottomBorder={item?.showBottomBorder}
+                  outerStyle={item?.sectionOuterStyle}
+                  innerStyle={item?.sectionInnerStyle}
+                >
+                  <View {...item.data} style={item.data.style} />
+                </ListSection>
+              )
+            default:
+              return null
+          }
+        }}
+      />
+    </View>
   )
 }
 
 interface ListSectionProps {
   isStart?: boolean
   isEnd?: boolean
+  showBottomBorder?: boolean
   outerStyle?: ViewStyle
   innerStyle?: ViewStyle
   children: ReactNode
 }
 
-function ListSection({ isStart, isEnd, outerStyle, innerStyle, children }: ListSectionProps) {
+function ListSection({
+  isStart,
+  isEnd,
+  showBottomBorder,
+  outerStyle,
+  innerStyle,
+  children,
+}: ListSectionProps) {
   const styles = useStyles({ isStart, isEnd })
+  const bottomBorder = showBottomBorder ? styles.sectionInnerBottomBorder : {}
 
   return (
-    <View style={[styles.sectionOuter, outerStyle]}>
-      <View style={[styles.sectionInner, innerStyle]}>{children}</View>
-    </View>
-  )
-}
-
-interface SectionHeadingProps {
-  title: string
-}
-
-function SectionHeading({ title }: SectionHeadingProps) {
-  const styles = useStyles()
-
-  return (
-    <View style={styles.header}>
-      <Heading variant="h3">{title}</Heading>
+    <View style={[styles.sectionOuterBase, outerStyle]}>
+      <View style={[styles.sectionInnerBase, bottomBorder, innerStyle]}>{children}</View>
     </View>
   )
 }
@@ -393,20 +467,37 @@ function SettingRow({
   )
 }
 
+function TeamsGroup({ teams }: { teams: GroupResource[] }) {
+  const styles = useStyles()
+
+  if (teams.length === 0) return null
+
+  return (
+    <View style={styles.teamGroup}>
+      {teams.map((team, index) => (
+        <Badge key={index} label={team.name as string} />
+      ))}
+    </View>
+  )
+}
+
 // =================================
 // ====== Styles ===================
 // =================================
 
 const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {
   const { colors } = useTheme()
+  const headerBottomPadding = space(0.5)
 
   return StyleSheet.create({
-    contentContainer: {
+    listContainer: {
+      flex: 1,
       backgroundColor: colors.fillColorNeutral080,
+    },
+    contentContainer: {
       padding: space(2),
     },
-    sectionOuter: {
-      paddingTop: space(1),
+    sectionOuterBase: {
       paddingLeft: space(2),
       backgroundColor: colors.fillColorNeutral100Inverted,
       borderTopLeftRadius: isStart ? space(1) : 0,
@@ -415,15 +506,40 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
       borderBottomRightRadius: isEnd ? space(1) : 0,
       marginBottom: isEnd ? space(2) : 0,
     },
-    sectionInner: {
-      borderBottomWidth: 0,
-      borderBottomColor: colors.borderColorDefaultBase,
+    sectionInnerBase: {
       paddingRight: space(2),
-      paddingBottom: space(1),
+      paddingTop: isStart ? space(2) : space(1.5),
+      paddingBottom: isEnd ? space(2) : space(1.5),
     },
-    addBottomBorder: {
+    sectionInnerHeader: {
+      paddingBottom: headerBottomPadding,
+    },
+    sectionInnerHeaderWithBottomBorder: {
+      paddingBottom: space(2),
+    },
+    sectionInnerBottomBorder: {
+      borderBottomColor: colors.borderColorDefaultBase,
       borderBottomWidth: isEnd ? 0 : 1,
     },
+    sectionInnerTitleInput: {
+      paddingTop: space(1.5), // paddingVertical doesn't override the sectionInner padding
+      paddingBottom: space(1.5),
+    },
+    sectionInnerChildNotice: {
+      paddingBottom: headerBottomPadding,
+    },
+    sectionInnerMiddleMiddle: {
+      paddingTop: 0,
+      paddingBottom: space(1.5),
+    },
+    sectionInnerFirstMember: {
+      paddingTop: space(1.5),
+      paddingBottom: space(1.5),
+    },
+    sectionInnerLastMember: {
+      paddingTop: 0,
+      paddingBottom: space(2),
+    },
     titleContainer: {
       gap: 4,
     },
@@ -451,9 +567,6 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
       borderTopWidth: 1,
       borderColor: colors.borderColorStatusError,
     },
-    header: {
-      paddingVertical: space(1.5),
-    },
     settingRow: {
       flexDirection: 'row',
       justifyContent: 'space-between',
@@ -463,23 +576,23 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     settingRowContent: {
       flex: 1,
     },
-    deleteButton: {
-      paddingVertical: 4,
-    },
     deleteButtonText: {
       fontWeight: 'normal',
     },
     settingRowText: {
       lineHeight: 20,
     },
-    childNoticeSectionOuter: {
-      paddingTop: 0,
+    teamGroup: {
+      flexDirection: 'row',
+      gap: 4,
+      flexWrap: 'wrap',
     },
-    memberSectionOuter: {
-      paddingTop: 6,
+    headerTitleBadge: {
+      alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),
+      marginTop: 2,
     },
-    memberSectionInner: {
-      paddingBottom: 6,
+    headerTitleContainer: {
+      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
     },
   })
 }