Add group chat join links to supported embed types (#10454)

src/components/Post/Embed/ChatInviteEmbed.tsx

@@ -0,0 +1,41 @@
+import {type StyleProp, type ViewStyle} from 'react-native'
+import {type AppBskyEmbedExternal} from '@atproto/api'
+
+import {useJoinLinkPreviewsQuery} from '#/state/queries/join-links'
+import {useSession} from '#/state/session'
+import {atoms as a} from '#/alf'
+import {ExternalEmbed} from '#/components/Post/Embed/ExternalEmbed'
+import {JoinRequestEmbed} from '#/components/Post/Embed/JoinRequestEmbed'
+
+export function ChatInviteEmbed({
+  code,
+  link,
+  onOpen,
+  style,
+}: {
+  code: string
+  link: AppBskyEmbedExternal.ViewExternal
+  onOpen?: () => void
+  style?: StyleProp<ViewStyle>
+}) {
+  const {hasSession} = useSession()
+  const {data, error, isPending} = useJoinLinkPreviewsQuery({
+    codes: [code],
+    hasSession,
+  })
+
+  const preview = data?.joinLinkPreviews[0]
+
+  if (error) {
+    return <ExternalEmbed link={link} onOpen={onOpen} style={style} />
+  }
+
+  return (
+    <JoinRequestEmbed
+      loading={isPending}
+      preview={preview}
+      style={[a.mt_sm, style]}
+      onOpen={onOpen}
+    />
+  )
+}

src/components/Post/Embed/JoinRequestEmbed.tsx

@@ -0,0 +1,271 @@
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {type ChatBskyGroupDefs} from '@atproto/api'
+import {Plural, Trans, useLingui} from '@lingui/react/macro'
+import {useNavigation} from '@react-navigation/native'
+
+import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
+import {type NavigationProp} from '#/lib/routes/types'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {atoms as a, useTheme} from '#/alf'
+import {AvatarBubbles} from '#/components/AvatarBubbles'
+import {
+  Button,
+  type ButtonColor,
+  ButtonIcon,
+  ButtonText,
+} from '#/components/Button'
+import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
+import {ArrowBoxRight_Stroke2_Corner3_Rounded as JoinIcon} from '#/components/icons/ArrowBoxRight'
+import {CheckThick_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
+import {RaisingHand4Finger_Stroke2_Corner2_Rounded as HandIcon} from '#/components/icons/RaisingHand'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import {useIntentDialogs} from '#/components/intents/IntentDialogs'
+import {Loader} from '#/components/Loader'
+import {ProfileBadges} from '#/components/ProfileBadges'
+import {Text} from '#/components/Typography'
+
+const JOIN_REQUEST_EMBED_HEIGHT = 152
+
+export function JoinRequestEmbed({
+  loading = false,
+  preview,
+  style,
+  onOpen,
+}: {
+  loading?: boolean
+  preview?: ChatBskyGroupDefs.JoinLinkPreviewView
+  style?: StyleProp<ViewStyle>
+  onOpen?: () => void
+}) {
+  const t = useTheme()
+
+  if (loading) {
+    return (
+      <View
+        style={[
+          a.align_center,
+          a.justify_center,
+          a.p_lg,
+          a.border,
+          a.rounded_lg,
+          t.atoms.border_contrast_high,
+          {height: JOIN_REQUEST_EMBED_HEIGHT},
+          style,
+        ]}>
+        <Loader size="md" fill={t.atoms.text.color} />
+      </View>
+    )
+  }
+
+  if (!preview) {
+    return (
+      <View
+        style={[
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
+          a.p_lg,
+          a.gap_xs,
+          a.border,
+          a.rounded_lg,
+          t.atoms.border_contrast_high,
+          t.atoms.bg_contrast_25,
+          {height: JOIN_REQUEST_EMBED_HEIGHT},
+          style,
+        ]}>
+        <WarningIcon size="md" fill={t.atoms.text_contrast_medium.color} />
+        <Text style={[a.text_sm, a.font_medium, t.atoms.text_contrast_medium]}>
+          <Trans>Chat invite link no longer available</Trans>
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <JoinRequestEmbedInner preview={preview} style={style} onOpen={onOpen} />
+  )
+}
+
+function JoinRequestEmbedInner({
+  preview,
+  style,
+  onOpen,
+}: {
+  preview: ChatBskyGroupDefs.JoinLinkPreviewView
+  style?: StyleProp<ViewStyle>
+  onOpen?: () => void
+}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const navigation = useNavigation<NavigationProp>()
+
+  const {groupChatJoinDialogControl, setGroupChatJoinState} = useIntentDialogs()
+
+  const ownerDisplayName = createSanitizedDisplayName(preview.owner)
+  const ownerHandle = sanitizeHandle(preview.owner.handle, '@')
+
+  const avatarProfiles = preview.convo?.members ?? [preview.owner]
+
+  const convoId = preview.convo?.id
+  const isFollowing = preview.owner.viewer?.following ?? false
+  const hasRequested = !convoId && preview.viewer?.requestedAt != null
+
+  let canJoin = true
+  let ButtonIconImage = JoinIcon
+  let buttonText = preview.requireApproval ? l`Request to join` : l`Join`
+  let buttonColor: ButtonColor = 'primary'
+  if (preview.enabledStatus !== 'enabled') {
+    canJoin = false
+    ButtonIconImage = WarningIcon
+    buttonText = l`Chat invite link no longer available`
+    buttonColor = 'secondary'
+  } else if (preview.memberCount >= preview.memberLimit) {
+    canJoin = false
+    ButtonIconImage = HandIcon
+    buttonText = l`This chat is full`
+    buttonColor = 'secondary'
+  } else if (preview.joinRule === 'followedByOwner' && !isFollowing) {
+    canJoin = false
+    ButtonIconImage = HandIcon
+    buttonText = l`Only people the chat owner follows can join`
+    buttonColor = 'secondary'
+  } else if (hasRequested) {
+    ButtonIconImage = CheckIcon
+    buttonText = l`Requested`
+    buttonColor = 'secondary'
+  }
+
+  return (
+    <View
+      style={[
+        a.justify_between,
+        a.border,
+        a.rounded_lg,
+        a.p_lg,
+        a.gap_lg,
+        t.atoms.border_contrast_high,
+        {height: JOIN_REQUEST_EMBED_HEIGHT},
+        style,
+      ]}>
+      <View style={[a.flex_row, a.gap_md, a.align_center]}>
+        <AvatarBubbles size={56} self profiles={avatarProfiles} />
+        <View style={[a.flex_1]}>
+          <Text
+            emoji
+            style={[a.text_lg, a.font_bold, a.leading_tight, t.atoms.text]}
+            numberOfLines={1}>
+            {preview.name}
+          </Text>
+          <View
+            style={[a.flex_row, a.align_center, a.gap_sm, a.mt_2xs, a.mb_sm]}>
+            <Text
+              style={[
+                a.text_xs,
+                a.leading_tight,
+                a.font_medium,
+                t.atoms.text_contrast_high,
+              ]}
+              allowFontScaling
+              numberOfLines={1}>
+              <Trans>Group chat</Trans>
+            </Text>
+            <Text
+              style={[
+                a.text_xs,
+                a.leading_tight,
+                a.font_medium,
+                t.atoms.text_contrast_high,
+              ]}
+              allowFontScaling
+              numberOfLines={1}>
+              <Trans comment="The number of members in a group chat, in the format '{members}/{total} members'.">
+                {preview.memberCount}/{preview.memberLimit}{' '}
+                <Plural
+                  value={preview.memberCount}
+                  one="member"
+                  other="members"
+                />
+              </Trans>
+            </Text>
+          </View>
+          <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+            <Text
+              emoji
+              style={[
+                a.flex_shrink,
+                a.text_sm,
+                a.font_medium,
+                a.leading_tight,
+                t.atoms.text,
+              ]}
+              allowFontScaling
+              numberOfLines={1}>
+              <Trans comment="The group chat creator, in the format 'By {displayName}'.">
+                By{' '}
+                <Text style={[a.font_medium, t.atoms.text]}>
+                  {ownerDisplayName}
+                </Text>
+              </Trans>
+            </Text>
+            <ProfileBadges profile={preview.owner} size="sm" />
+            <Text
+              style={[
+                a.flex_shrink,
+                a.text_sm,
+                a.font_medium,
+                a.leading_tight,
+                t.atoms.text_contrast_medium,
+              ]}
+              allowFontScaling
+              numberOfLines={1}>
+              {ownerHandle}
+            </Text>
+          </View>
+        </View>
+      </View>
+      {convoId ? (
+        <Button
+          testID="openButton"
+          onPress={() => {
+            onOpen?.()
+            navigation.navigate('MessagesConversation', {conversation: convoId})
+          }}
+          label={l`Open group chat`}
+          accessibilityHint={l`Tap to open this group chat`}
+          size="large"
+          color="primary"
+          style={[a.w_full]}>
+          <ButtonText>
+            <Trans>Open chat</Trans>
+          </ButtonText>
+          <ButtonIcon icon={ArrowRightIcon} />
+        </Button>
+      ) : (
+        <Button
+          testID="joinButton"
+          onPress={() => {
+            onOpen?.()
+            setGroupChatJoinState({code: preview.code})
+            groupChatJoinDialogControl.open()
+          }}
+          label={
+            preview.requireApproval
+              ? l`Request access to group chat`
+              : l`Join group chat`
+          }
+          accessibilityHint={
+            preview.requireApproval
+              ? l`Tap to request access to join this group chat`
+              : l`Tap to join this group chat immediately`
+          }
+          size="large"
+          color={buttonColor}
+          disabled={!canJoin}
+          style={[a.w_full]}>
+          <ButtonIcon icon={ButtonIconImage} />
+          <ButtonText>{buttonText}</ButtonText>
+        </Button>
+      )}
+    </View>
+  )
+}

src/components/Post/Embed/index.tsx

@@ -12,6 +12,7 @@ import {Trans} from '@lingui/react/macro'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {makeProfileLink} from '#/lib/routes/links'
+import {getChatInviteCodeFromUrl} from '#/lib/strings/url-helpers'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {unstableCacheProfileView} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
@@ -33,6 +34,7 @@ import {
   type EmbedType,
   parseEmbed,
 } from '#/types/bsky/post'
+import {ChatInviteEmbed} from './ChatInviteEmbed'
 import {ExternalEmbed} from './ExternalEmbed'
 import {ModeratedFeedEmbed} from './FeedEmbed'
 import {ImageEmbed} from './ImageEmbed'
@@ -110,6 +112,21 @@ function MediaEmbed({
           </ContentHider>
         )
       }
+      const chatInviteCode = getChatInviteCodeFromUrl(embed.view.external.uri)
+      if (chatInviteCode) {
+        return (
+          <ContentHider
+            modui={rest.moderation?.ui('contentMedia')}
+            activeStyle={[a.mt_sm]}>
+            <ChatInviteEmbed
+              code={chatInviteCode}
+              link={embed.view.external}
+              onOpen={rest.onOpen}
+              style={rest.style}
+            />
+          </ContentHider>
+        )
+      }
       return (
         <ContentHider
           modui={rest.moderation?.ui('contentMedia')}

src/components/intents/GroupChatJoinDialog.tsx

@@ -81,6 +81,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
   const {data, error, isLoading} = useJoinLinkPreviewsQuery({
     codes: code ? [code] : undefined,
     hasSession,
+    staleTime: 0,
   })
 
   const {mutate: joinGroupChat, isPending: isJoinPending} =
@@ -326,6 +327,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
             <View
               style={[a.flex_row, a.gap_xs, a.align_center, a.justify_center]}>
               <Text
+                emoji
                 style={[
                   a.mb_2xs,
                   a.text_center,
@@ -402,7 +404,9 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
           color="primary"
           disabled={!code}
           style={[a.w_full]}>
-          <ButtonText>Open chat</ButtonText>
+          <ButtonText>
+            <Trans>Open chat</Trans>
+          </ButtonText>
           <ButtonIcon icon={ArrowRightIcon} />
         </Button>
       ) : (
@@ -416,8 +420,8 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
           }
           accessibilityHint={
             joinLinkPreview.requireApproval
-              ? l`Request access to join this group chat`
-              : l`Join this group chat`
+              ? l`Tap to request access to join this group chat`
+              : l`Tap to join this group chat immediately`
           }
           size="large"
           color={buttonColor}