@linktr.ee/messaging-react 3.2.0 → 3.3.0

package/src/components/ChannelInfoDialog/ChannelInfoDialog.test.tsx

@@ -1,333 +0,0 @@
-import React from 'react'
-import type { Channel, ChannelMemberResponse } from 'stream-chat'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
-
-import { renderWithProviders, screen, userEvent, waitFor } from '../../test/utils'
-
-import { ChannelInfoDialog } from './index'
-
-const { getBlockedUsersMock } = vi.hoisted(() => ({
-  getBlockedUsersMock: vi.fn().mockResolvedValue([]),
-}))
-
-vi.mock('../../providers/MessagingProvider', () => ({
-  useMessagingContext: () => ({
-    service: {
-      getBlockedUsers: getBlockedUsersMock,
-      blockUser: vi.fn().mockResolvedValue(undefined),
-      unBlockUser: vi.fn().mockResolvedValue(undefined),
-    },
-    debug: false,
-  }),
-}))
-
-vi.mock('../Avatar', () => ({
-  Avatar: ({ name }: { name: string }) => (
-    <div data-testid="avatar">{name}</div>
-  ),
-}))
-
-vi.mock('../CloseButton', () => ({
-  CloseButton: ({ onClick }: { onClick: () => void }) => (
-    <button data-testid="close-button" onClick={onClick} />
-  ),
-}))
-
-vi.mock('../ActionButton', () => ({
-  default: ({
-    children,
-    onClick,
-  }: {
-    children: React.ReactNode
-    onClick?: () => void
-  }) => (
-    <button data-testid="action-button" onClick={onClick}>
-      {children}
-    </button>
-  ),
-}))
-
-vi.mock('@phosphor-icons/react', () => ({
-  FlagIcon: () => <span data-testid="flag-icon" />,
-  ProhibitInsetIcon: () => <span data-testid="prohibit-icon" />,
-  SignOutIcon: () => <span data-testid="signout-icon" />,
-  SpinnerGapIcon: () => <span data-testid="spinner-icon" />,
-}))
-
-const createChannel = () =>
-  ({
-    id: 'channel-1',
-    cid: 'messaging:channel-1',
-    data: {},
-    _client: { userID: 'visitor-1' },
-    state: {
-      members: {},
-      membership: {},
-      messages: [],
-    },
-    hide: vi.fn(),
-  }) as unknown as Channel
-
-const createParticipant = (
-  overrides: Partial<{ name: string; username: string }> = {}
-) =>
-  ({
-    user: {
-      id: 'linker-1',
-      name: overrides.name ?? 'Linker',
-      image: undefined,
-      username: overrides.username,
-    },
-    role: 'member',
-  }) as unknown as ChannelMemberResponse
-
-const defaultProps = () => ({
-  dialogRef: { current: document.createElement('dialog') },
-  onClose: vi.fn(),
-  channel: createChannel(),
-  participant: createParticipant(),
-})
-
-describe('ChannelInfoDialog', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('renders participant name', () => {
-    renderWithProviders(
-      <ChannelInfoDialog {...defaultProps()} />
-    )
-
-    const nameEl = screen.getByText('Linker', { selector: 'p' })
-    expect(nameEl).toBeInTheDocument()
-  })
-
-  it('uses participantDisplayName when provided', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        participantDisplayName="Custom Label"
-      />
-    )
-
-    expect(screen.getByText('Custom Label', { selector: 'p' })).toBeInTheDocument()
-  })
-
-  it('falls back to username when name is UUID-like', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        participant={createParticipant({
-          name: 'a1b2c3d4-e5f6-4789-a012-3456789abcde',
-          username: 'linkeruser',
-        })}
-      />
-    )
-
-    expect(screen.getByText('linkeruser', { selector: 'p' })).toBeInTheDocument()
-  })
-
-  it('shows Unknown member when name matches user id', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        participant={{
-          user: {
-            id: 'opaque-user-id',
-            name: 'opaque-user-id',
-          },
-          role: 'member',
-        } as unknown as ChannelMemberResponse}
-      />
-    )
-
-    expect(
-      screen.getByText('Unknown member', { selector: 'p' })
-    ).toBeInTheDocument()
-  })
-
-  it('renders participant username as secondary info', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        participant={createParticipant({ username: 'linkeruser' })}
-      />
-    )
-
-    expect(screen.getByText('linktr.ee/linkeruser')).toBeInTheDocument()
-  })
-
-  it('renders customProfileContent when provided', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        customProfileContent={
-          <span data-testid="custom-profile">Subscriber Badge</span>
-        }
-      />
-    )
-
-    expect(screen.getByTestId('custom-profile')).toHaveTextContent(
-      'Subscriber Badge'
-    )
-  })
-
-  it('renders customChannelActions when provided', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        customChannelActions={
-          <li data-testid="custom-action">Custom Action</li>
-        }
-      />
-    )
-
-    expect(screen.getByTestId('custom-action')).toHaveTextContent(
-      'Custom Action'
-    )
-  })
-
-  it('renders followerStatusLabel when provided', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        followerStatusLabel="Subscribed to you"
-      />
-    )
-
-    expect(screen.getByText('Subscribed to you')).toBeInTheDocument()
-  })
-
-  it('hides followerStatusLabel when customProfileContent is provided', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        followerStatusLabel="Subscribed to you"
-        customProfileContent={
-          <span data-testid="custom-profile">Custom Badge</span>
-        }
-      />
-    )
-
-    expect(
-      screen.queryByText('Subscribed to you')
-    ).not.toBeInTheDocument()
-    expect(screen.getByTestId('custom-profile')).toHaveTextContent(
-      'Custom Badge'
-    )
-  })
-
-  it('shows Delete Conversation button when showDeleteConversation is true', () => {
-    renderWithProviders(
-      <ChannelInfoDialog {...defaultProps()} showDeleteConversation={true} />
-    )
-
-    expect(screen.getByText('Delete Conversation')).toBeInTheDocument()
-  })
-
-  it('hides Delete Conversation button when showDeleteConversation is false', () => {
-    renderWithProviders(
-      <ChannelInfoDialog {...defaultProps()} showDeleteConversation={false} />
-    )
-
-    expect(screen.queryByText('Delete Conversation')).not.toBeInTheDocument()
-  })
-
-  it('calls onDeleteConversationClick when Delete Conversation is clicked', async () => {
-    const onDeleteConversationClick = vi.fn()
-    const props = defaultProps()
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...props}
-        onDeleteConversationClick={onDeleteConversationClick}
-      />
-    )
-
-    await userEvent.click(screen.getByText('Delete Conversation').closest('button')!)
-    await waitFor(() => {
-      expect(onDeleteConversationClick).toHaveBeenCalledOnce()
-    })
-  })
-
-  it('calls onBlockParticipantClick when Block is clicked', async () => {
-    const onBlockParticipantClick = vi.fn()
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        onBlockParticipantClick={onBlockParticipantClick}
-      />
-    )
-
-    await userEvent.click(screen.getByText('Block').closest('button')!)
-    await waitFor(() => {
-      expect(onBlockParticipantClick).toHaveBeenCalledOnce()
-    })
-  })
-
-  it('calls onReportParticipantClick when Report is clicked', async () => {
-    const onReportParticipantClick = vi.fn()
-    const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
-
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        onReportParticipantClick={onReportParticipantClick}
-      />
-    )
-
-    await userEvent.click(screen.getByText('Report').closest('button')!)
-    await waitFor(() => {
-      expect(onReportParticipantClick).toHaveBeenCalledOnce()
-    })
-    windowOpenSpy.mockRestore()
-  })
-
-  it('shows Block and Report actions by default', () => {
-    renderWithProviders(<ChannelInfoDialog {...defaultProps()} />)
-
-    expect(screen.getByText('Block')).toBeInTheDocument()
-    expect(screen.getByText('Report')).toBeInTheDocument()
-  })
-
-  it('hides the Block action when showBlockParticipant is false', () => {
-    renderWithProviders(
-      <ChannelInfoDialog {...defaultProps()} showBlockParticipant={false} />
-    )
-
-    expect(screen.queryByText('Block')).not.toBeInTheDocument()
-    expect(screen.queryByText('Unblock')).not.toBeInTheDocument()
-  })
-
-  it('fetches blocked users by default (Block action shown)', () => {
-    renderWithProviders(<ChannelInfoDialog {...defaultProps()} />)
-
-    expect(getBlockedUsersMock).toHaveBeenCalled()
-  })
-
-  it('does not fetch blocked users when showBlockParticipant is false', () => {
-    renderWithProviders(
-      <ChannelInfoDialog {...defaultProps()} showBlockParticipant={false} />
-    )
-
-    expect(getBlockedUsersMock).not.toHaveBeenCalled()
-  })
-
-  it('hides the Report action when showReportParticipant is false', () => {
-    renderWithProviders(
-      <ChannelInfoDialog {...defaultProps()} showReportParticipant={false} />
-    )
-
-    expect(screen.queryByText('Report')).not.toBeInTheDocument()
-  })
-
-  it('returns null when participant is undefined', () => {
-    const { container } = renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        participant={undefined}
-      />
-    )
-
-    expect(container.querySelector('dialog')).not.toBeInTheDocument()
-  })
-})

package/src/components/ChannelInfoDialog/index.tsx

@@ -1,336 +0,0 @@
-import {
-  FlagIcon,
-  ProhibitInsetIcon,
-  SignOutIcon,
-  SpinnerGapIcon,
-} from '@phosphor-icons/react'
-import React, { useState, useCallback, useEffect } from 'react'
-import type { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
-
-import { useMessagingContext } from '../../providers/MessagingProvider'
-import { resolveParticipantDisplayName } from '../../utils/resolveParticipantDisplayName'
-import ActionButton from '../ActionButton'
-import { Avatar } from '../Avatar'
-import { CloseButton } from '../CloseButton'
-
-// Custom user type with username
-type CustomUser = {
-  username?: string
-}
-
-// Blocked user from Stream Chat API
-type BlockedUser = {
-  blocked_user_id: string
-}
-
-export interface ChannelInfoDialogProps {
-  dialogRef: React.RefObject<HTMLDialogElement>
-  onClose: () => void
-  participant: ChannelMemberResponse | undefined
-  participantDisplayName?: string
-  channel: ChannelType
-  followerStatusLabel?: string
-  onLeaveConversation?: (channel: ChannelType) => void
-  onBlockParticipant?: (participantId?: string) => void
-  showDeleteConversation?: boolean
-  /**
-   * Show the Block/Unblock action. Defaults to true.
-   * Set false to hide it (e.g. the Linktree official channel).
-   */
-  showBlockParticipant?: boolean
-  /**
-   * Show the Report action. Defaults to true.
-   * Set false to hide it (e.g. the Linktree official channel).
-   */
-  showReportParticipant?: boolean
-  onDeleteConversationClick?: () => void
-  onBlockParticipantClick?: () => void
-  onReportParticipantClick?: () => void
-  customProfileContent?: React.ReactNode
-  customChannelActions?: React.ReactNode
-}
-
-/**
- * Channel info dialog (matching original implementation)
- */
-export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
-  dialogRef,
-  onClose,
-  participant,
-  participantDisplayName,
-  channel,
-  followerStatusLabel,
-  onLeaveConversation,
-  onBlockParticipant,
-  showDeleteConversation = true,
-  showBlockParticipant = true,
-  showReportParticipant = true,
-  onDeleteConversationClick,
-  onBlockParticipantClick,
-  onReportParticipantClick,
-  customProfileContent,
-  customChannelActions,
-}) => {
-  const { service, debug } = useMessagingContext()
-  const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
-  const [isLeaving, setIsLeaving] = useState(false)
-  const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
-
-  // Check if participant is blocked when participant changes.
-  // Skipped when the Block action is hidden — the result would be unused
-  // (e.g. the Linktree official channel does not offer blocking).
-  const checkIsParticipantBlocked = useCallback(async () => {
-    if (!showBlockParticipant || !service || !participant?.user?.id) return
-
-    try {
-      const blockedUsers = await service.getBlockedUsers()
-      const isBlocked = blockedUsers.some(
-        (user: BlockedUser) => user.blocked_user_id === participant?.user?.id
-      )
-      setIsParticipantBlocked(isBlocked)
-    } catch (error) {
-      console.error(
-        '[ChannelInfoDialog] Failed to check blocked status:',
-        error
-      )
-    }
-  }, [service, participant?.user?.id, showBlockParticipant])
-
-  useEffect(() => {
-    checkIsParticipantBlocked()
-  }, [checkIsParticipantBlocked])
-
-  const handleLeaveConversation = async () => {
-    if (isLeaving) return
-
-    // Fire analytics callback before action
-    onDeleteConversationClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Leave conversation', channel.cid)
-    }
-    setIsLeaving(true)
-
-    try {
-      const actingUserId = channel._client?.userID ?? null
-      await channel.hide(actingUserId, false)
-
-      if (onLeaveConversation) {
-        await onLeaveConversation(channel)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to leave conversation', error)
-    } finally {
-      setIsLeaving(false)
-    }
-  }
-
-  const handleBlockUser = async () => {
-    if (isUpdatingBlockStatus || !service) return
-
-    // Fire analytics callback before action
-    onBlockParticipantClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Block member', participant?.user?.id)
-    }
-    setIsUpdatingBlockStatus(true)
-
-    try {
-      await service.blockUser(participant?.user?.id)
-
-      if (onBlockParticipant) {
-        await onBlockParticipant(participant?.user?.id)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to block member', error)
-    } finally {
-      setIsUpdatingBlockStatus(false)
-    }
-  }
-
-  const handleUnblockUser = async () => {
-    if (isUpdatingBlockStatus || !service) return
-
-    // Fire analytics callback before action
-    onBlockParticipantClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Unblock member', participant?.user?.id)
-    }
-    setIsUpdatingBlockStatus(true)
-
-    try {
-      await service.unBlockUser(participant?.user?.id)
-
-      if (onBlockParticipant) {
-        await onBlockParticipant(participant?.user?.id)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to unblock member', error)
-    } finally {
-      setIsUpdatingBlockStatus(false)
-    }
-  }
-
-  const handleReportUser = () => {
-    // Fire analytics callback before action
-    onReportParticipantClick?.()
-
-    onClose()
-    window.open(
-      'https://linktr.ee/s/about/trust-center/report',
-      '_blank',
-      'noopener,noreferrer'
-    )
-  }
-
-  if (!participant) return null
-
-  const participantName =
-    participantDisplayName ??
-    resolveParticipantDisplayName(participant.user)
-  const participantImage = participant.user?.image
-  const participantUsername = (participant.user as CustomUser)?.username
-  const participantSecondary = participantUsername
-    ? `linktr.ee/${participantUsername}`
-    : undefined
-  const participantId = participant.user?.id || 'unknown'
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    <dialog
-      ref={dialogRef}
-      className="mes-dialog group"
-      onClose={onClose}
-      onClick={(e) => {
-        if (e.target === dialogRef.current) {
-          onClose()
-        }
-      }}
-    >
-      <div className="ml-auto flex h-full w-full flex-col bg-white shadow-none transition-shadow duration-200 group-open:shadow-max-elevation-light">
-        <div className="flex items-center justify-between border-b border-sand px-4 py-3">
-          <h2 className="text-base font-semibold text-charcoal">Chat info</h2>
-          <CloseButton onClick={onClose} />
-        </div>
-
-        <div className="flex-1 px-2 overflow-y-auto w-full">
-          <div
-            className="flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]"
-            style={{ backgroundColor: '#FBFAF9' }}
-          >
-            <div className="flex items-center gap-3 w-full">
-              <Avatar
-                id={participantId}
-                name={participantName}
-                image={participantImage}
-                size={88}
-                shape="circle"
-              />
-              <div className="flex flex-col min-w-0 flex-1">
-                <p className="truncate text-base font-semibold text-charcoal">
-                  {participantName}
-                </p>
-                {participantSecondary && (
-                  <p className="truncate text-sm text-[#00000055]">
-                    {participantSecondary}
-                  </p>
-                )}
-                {/* Deprecated: use customProfileContent instead. followerStatusLabel will be removed in a future release. */}
-                {followerStatusLabel && !customProfileContent && (
-                  <span
-                    className="mt-1 rounded-full text-xs font-normal w-fit"
-                    style={{
-                      padding: '4px 8px',
-                      backgroundColor:
-                        followerStatusLabel === 'Subscribed to you'
-                          ? '#DCFCE7'
-                          : '#F5F5F4',
-                      color:
-                        followerStatusLabel === 'Subscribed to you'
-                          ? '#008236'
-                          : '#78716C',
-                      lineHeight: '133.333%',
-                      letterSpacing: '0.21px',
-                    }}
-                  >
-                    {followerStatusLabel}
-                  </span>
-                )}
-              </div>
-            </div>
-            {customProfileContent && (
-              <div className="w-full">{customProfileContent}</div>
-            )}
-          </div>
-
-          <ul className="flex flex-col gap-2 mt-2">
-            {showDeleteConversation && (
-              <li>
-                <ActionButton
-                  onClick={handleLeaveConversation}
-                  disabled={isLeaving}
-                  aria-busy={isLeaving}
-                >
-                  {isLeaving ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <SignOutIcon className="h-5 w-5" />
-                  )}
-                  <span>Delete Conversation</span>
-                </ActionButton>
-              </li>
-            )}
-            {showBlockParticipant && (
-              <li>
-                {isParticipantBlocked ? (
-                  <ActionButton
-                    onClick={handleUnblockUser}
-                    disabled={isUpdatingBlockStatus}
-                    aria-busy={isUpdatingBlockStatus}
-                  >
-                    {isUpdatingBlockStatus ? (
-                      <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                    ) : (
-                      <ProhibitInsetIcon className="h-5 w-5" />
-                    )}
-                    <span>Unblock</span>
-                  </ActionButton>
-                ) : (
-                  <ActionButton
-                    onClick={handleBlockUser}
-                    disabled={isUpdatingBlockStatus}
-                    aria-busy={isUpdatingBlockStatus}
-                  >
-                    {isUpdatingBlockStatus ? (
-                      <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                    ) : (
-                      <ProhibitInsetIcon className="h-5 w-5" />
-                    )}
-                    <span>Block</span>
-                  </ActionButton>
-                )}
-              </li>
-            )}
-            {showReportParticipant && (
-              <li>
-                <ActionButton variant="danger" onClick={handleReportUser}>
-                  <FlagIcon className="h-5 w-5" />
-                  <span>Report</span>
-                </ActionButton>
-              </li>
-            )}
-            {customChannelActions}
-          </ul>
-        </div>
-      </div>
-    </dialog>
-  )
-}