@linktr.ee/messaging-react 3.10.0-rc-1783660962 → 3.10.0

package/src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx

@@ -1,92 +0,0 @@
-import { ImagesIcon } from '@phosphor-icons/react'
-import type React from 'react'
-
-import type {
-  LockedAttachmentGalleryItem,
-  LockedAttachmentSource,
-  PaymentStatus,
-} from '../../types'
-
-import GalleryThumbnail from './GalleryThumbnail'
-import type { CardVariant } from './MediaShell'
-import SingleThumbnail from './SingleThumbnail'
-
-export interface CardThumbnailProps {
-  variant: CardVariant
-  gallery: LockedAttachmentGalleryItem[]
-  title?: string
-  showLocked: boolean
-  paymentStatus?: PaymentStatus
-  /** Single-asset props — ignored when the card renders as a gallery. */
-  mimeType: string
-  thumbnailUrl?: string
-  source?: LockedAttachmentSource
-  containedImage?: boolean
-  /** Top-right overlay (e.g. Composer dismiss X). Rendered inside the thumbnail. */
-  topRight?: React.ReactNode
-}
-
-/** True when the card should render as a mixed-media carousel (2+ items). */
-export const isGalleryCard = (
-  gallery: LockedAttachmentGalleryItem[]
-): boolean => gallery.length >= 2
-
-/**
- * The body-row icon a card shows when it renders as a gallery — `CardBody`
- * otherwise auto-detects the icon from `mimeType`. Returned as a ready node so
- * every card shares the same size/tone treatment.
- */
-export const galleryBodyIcon = (
-  variant: CardVariant
-): React.ReactNode => (
-  <ImagesIcon
-    className={
-      variant === 'dark'
-        ? 'size-5 shrink-0 text-white/55'
-        : 'size-5 shrink-0 text-black/55'
-    }
-  />
-)
-
-/**
- * Owns the single-vs-gallery thumbnail decision shared by Composer /
- * `LockedAttachment.Media` cards: renders `GalleryThumbnail` for a 2+ item `gallery`,
- * else `SingleThumbnail` for the single asset. Callers pass the superset of
- * props; the unused half is ignored by whichever branch renders.
- */
-const CardThumbnail: React.FC<CardThumbnailProps> = ({
-  variant,
-  gallery,
-  title,
-  showLocked,
-  paymentStatus,
-  mimeType,
-  thumbnailUrl,
-  source,
-  containedImage,
-  topRight,
-}) =>
-  isGalleryCard(gallery) ? (
-    <GalleryThumbnail
-      variant={variant}
-      gallery={gallery}
-      title={title}
-      showLocked={showLocked}
-      paymentStatus={paymentStatus}
-      topRight={topRight}
-    />
-  ) : (
-    <SingleThumbnail
-      variant={variant}
-      mimeType={mimeType}
-      thumbnailUrl={thumbnailUrl}
-      title={title}
-      source={source}
-      showLocked={showLocked}
-      paymentStatus={paymentStatus}
-      topRight={topRight}
-      containedImage={containedImage}
-    />
-  )
-
-export default CardThumbnail

package/src/components/CustomMessage/LockedAttachment/components/_shared/LoadingDots.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-
-const Dot = ({ cx, index }: { cx: string; index: number }) => (
-  <circle cx={cx} cy="6.15" r="2.4" fill="currentColor">
-    <animateTransform
-      attributeName="transform"
-      type="translate"
-      values="0 0; 0 -2.25; 0 0;"
-      dur="900ms"
-      begin={`${120 * index}ms`}
-      repeatCount="indefinite"
-    />
-  </circle>
-)
-
-/**
- * Three bouncing dots, inline-sized for use inside buttons/labels (e.g. the
- * Unlock CTA while a purchase is in flight). Mirrors the typing indicator's
- * animation but uses `currentColor` so it adopts the surrounding text color.
- */
-const LoadingDots: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    aria-hidden="true"
-    className={className}
-    viewBox="0 0 20 12.3"
-    width="20"
-    height="13"
-    overflow="visible"
-  >
-    <Dot cx="3" index={0} />
-    <Dot cx="10" index={1} />
-    <Dot cx="17" index={2} />
-  </svg>
-)
-
-export default LoadingDots

package/src/components/CustomMessage/LockedAttachment/components/_shared/LockBadge.tsx

@@ -1,63 +0,0 @@
-import { LockOpenIcon, LockSimpleIcon, PlayIcon } from '@phosphor-icons/react'
-import classNames from 'classnames'
-import React from 'react'
-
-import { getSourceType } from '../../../../AttachmentCard'
-import type { PaymentStatus } from '../../types'
-
-export interface LockBadgeProps {
-  paymentStatus?: PaymentStatus
-  mimeType?: string
-  /**
-   * Overrides the `mimeType`-derived playable check. Lets a caller that
-   * already knows per-item playability (e.g. `GalleryThumbnail`, checking a
-   * carousel item's own mimeType rather than the card's single `mimeType`)
-   * skip re-deriving it.
-   */
-  isPlayable?: boolean
-  /** Whether the item is still locked. Play only ever shows once unlocked —
-   * a locked item always shows the lock, even for otherwise-playable media. */
-  isLocked: boolean
-}
-
-/**
- * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
- * Uses `bg-black/30`. Stays `pointer-events-none` so clicks pass through to
- * the underlying player/toggle; the play state highlights via `group-hover`
- * (same `bg-black/40` as the gallery's prev/next arrows) — the ancestor
- * providing `group` must wrap the actual clickable/hoverable player area.
- *
- * For playable media (video/audio) that's unlocked, the badge shows a play
- * icon instead of a lock — matching the convention used by `GalleryThumbnail`.
- */
-export const LockBadge: React.FC<LockBadgeProps> = ({
-  paymentStatus,
-  mimeType,
-  isPlayable,
-  isLocked,
-}) => {
-  const sourceType = mimeType ? getSourceType(mimeType) : undefined
-  const resolvedIsPlayable =
-    isPlayable ?? (sourceType === 'video' || sourceType === 'audio')
-
-  const Icon =
-    resolvedIsPlayable && !isLocked
-      ? PlayIcon
-      : paymentStatus === 'paid'
-        ? LockOpenIcon
-        : LockSimpleIcon
-  return (
-    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-      <div
-        className={classNames(
-          'flex size-12 items-center justify-center rounded-full bg-black/30 text-white',
-          Icon === PlayIcon && 'group-hover:bg-black/40'
-        )}
-      >
-        <Icon className="size-6" weight="fill" />
-      </div>
-    </div>
-  )
-}
-
-export default LockBadge

package/src/components/CustomMessage/LockedAttachment/components/_shared/PreviewToggle.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-
-export interface PreviewToggleProps {
-  /** Toggles the preview; omit to render `children` with no wrapper at all (nothing to toggle). */
-  onToggle: (() => void | Promise<void>) | undefined
-  isBusy: boolean
-  isPreviewVisible: boolean
-  children: React.ReactNode
-}
-
-/**
- * Makes a locked thumbnail clickable to toggle its preview. Uses a
- * `role="button"` div rather than a native `<button>` because the thumbnail
- * it wraps can itself contain interactive children (gallery carousel arrows,
- * a Composer dismiss X) — nesting a real `<button>` around those would
- * produce invalid, inaccessible nested-interactive-element markup.
- */
-const PreviewToggle: React.FC<PreviewToggleProps> = ({
-  onToggle,
-  isBusy,
-  isPreviewVisible,
-  children,
-}) => {
-  if (!onToggle) return <React.Fragment>{children}</React.Fragment>
-
-  return (
-    <div
-      role="button"
-      tabIndex={isBusy ? -1 : 0}
-      aria-label="Toggle preview"
-      aria-busy={isBusy}
-      aria-pressed={isPreviewVisible}
-      aria-disabled={isBusy || undefined}
-      onClick={isBusy ? undefined : onToggle}
-      onKeyDown={(e) => {
-        if (isBusy) return
-        // Only handle keys that originate on the wrapper itself, not on
-        // inner interactive elements (dismiss X, carousel arrows). Without
-        // this guard, pressing Enter/Space on a focused child would bubble
-        // up and toggle the preview in addition to activating the child.
-        if (e.target !== e.currentTarget) return
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault()
-          void onToggle()
-        }
-      }}
-      className={
-        !isBusy
-          ? 'block w-full cursor-pointer text-left'
-          : 'block w-full text-left'
-      }
-    >
-      {children}
-    </div>
-  )
-}
-
-export default PreviewToggle

package/src/components/CustomMessage/LockedAttachment/components/_shared/PriceLockRow.tsx

@@ -1,21 +0,0 @@
-import { LockSimpleIcon } from '@phosphor-icons/react'
-import type React from 'react'
-
-/**
- * The lock-icon + amount/status row shared by every LockedAttachment text-mode
- * card. Only the wrapper and the leading lock icon are shared — the amount and
- * any trailing status live in `children`, since they genuinely differ per card
- * (placeholder fallback vs. paid badge vs. bare amount).
- */
-const PriceLockRow: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className="flex items-center gap-1 text-xs font-medium">
-    <LockSimpleIcon
-      className="size-3.5 shrink-0 opacity-55"
-      weight="fill"
-      aria-hidden
-    />
-    {children}
-  </div>
-)
-
-export default PriceLockRow

package/src/components/CustomMessage/LockedAttachment/components/_shared/PurchaseStatusBadge.tsx

@@ -1,74 +0,0 @@
-import { CheckCircleIcon } from '@phosphor-icons/react'
-import classNames from 'classnames'
-import React from 'react'
-
-import type { PaymentStatus } from '../../types'
-
-export interface PurchaseStatusBadgeProps {
-  /** 'own' matches the sender's dark/own-message context; 'other' matches the recipient's light/other-message context. */
-  isMine: boolean
-  /** 'paid' renders the "Sold"/"Purchased" + checkmark variant; otherwise falls back to plain amount text, or nothing. */
-  paymentStatus?: PaymentStatus
-  amountText?: string
-}
-
-/**
- * Bullet + amount/label + checkmark row for a paid attachment or message.
- * Shared by `LockedAttachment.Media`/`.Text`'s status badges.
- */
-const PurchaseStatusBadge: React.FC<PurchaseStatusBadgeProps> = ({
-  isMine,
-  paymentStatus,
-  amountText,
-}) => {
-  const labelColour = isMine ? 'text-white/55' : 'text-black/55'
-  const successColour = isMine ? 'text-[#34c759]' : 'text-[#008236]'
-  if (paymentStatus === 'paid') {
-    return (
-      <React.Fragment>
-        <span className={classNames('text-xs font-medium', labelColour)}>
-          &bull;
-        </span>
-        <span className={classNames('text-xs font-medium', successColour)}>
-          {isMine ? 'Sold' : 'Purchased'}
-        </span>
-        <CheckCircleIcon
-          className={classNames('shrink-0 size-3.5', successColour)}
-          weight="bold"
-          aria-hidden
-        />
-      </React.Fragment>
-    )
-  }
-
-  if (amountText != null) {
-    return (
-      <React.Fragment>
-        <span className={classNames('text-xs font-medium', labelColour)}>
-          &bull;
-        </span>
-        <span className={classNames('text-xs font-medium', labelColour)}>
-          {amountText}
-        </span>
-      </React.Fragment>
-    )
-  }
-
-
-  if (paymentStatus === 'failed' || paymentStatus === 'refunded') {
-    return (
-      <React.Fragment>
-        <span className={classNames('text-xs font-medium', labelColour)}>
-          &bull;
-        </span>
-        <span className={classNames('text-xs font-medium', labelColour)}>
-          {paymentStatus === 'failed' ? 'Payment failed' : 'Refunded'}
-        </span>
-      </React.Fragment>
-    )
-  }
-
-  return null
-}
-
-export default PurchaseStatusBadge

package/src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx

@@ -1,29 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-export interface SkeletonTextLinesProps {
-  /** Matches the bubble it sits in — "dark" for the sender's own bubble. */
-  variant: 'light' | 'dark'
-}
-
-/**
- * Two skeleton bars standing in for the redacted text of a paid text-only
- * message — the real content is never sent to the client until purchase, so
- * there's nothing to render yet.
- *
- * Uses explicit black/white (not `bg-current`) because Tailwind doesn't
- * support opacity modifiers on the `current` color — `bg-current/30` silently
- * produces no CSS rule at all.
- */
-const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({ variant = 'dark' }) => {
-  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'
-
-  return (
-    <div className="flex flex-col gap-2 str-chat__message-text my-1 animate-pulse" aria-hidden>
-      <div className={classNames('h-3 w-40 rounded-full', colour)} />
-      <div className={classNames('h-3 w-24 rounded-full', colour)} />
-    </div>
-  )
-}
-
-export default SkeletonTextLines

package/src/components/CustomMessage/LockedAttachment/components/_shared/TextShell.tsx

@@ -1,28 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-/**
- * Chat-bubble chrome for a paid text-only message/preview. Deliberately
- * doesn't lean on `.str-chat`'s CSS variables (`--str-chat__message-bubble-*`)
- * — this renders in the Composer preview too, which sits outside any
- * `.str-chat` ancestor, so every value here (radius, colour, type scale) is
- * hardcoded to match the Figma spec directly.
- */
-const TextShell: React.FC<
-  React.PropsWithChildren<{ isMine: boolean; className?: string }>
-> = ({ isMine, children, className }) => (
-  <div
-    className={classNames(
-      'message-locked-attachment-text',
-      'relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3',
-      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
-      isMine ? 'bg-[#1e2330] text-white' : 'bg-[#f2f1ef] text-black',
-      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]',
-      className
-    )}
-  >
-    {children}
-  </div>
-)
-
-export default TextShell

package/src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.test.ts

@@ -1,67 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-
-import { act, renderHook } from '../../../../../test/utils'
-
-import { usePreviewToggle } from './usePreviewToggle'
-
-const source = { sourceUrl: 'https://example.test/asset.mp4' }
-
-describe('usePreviewToggle', () => {
-  it('gallery: reveals without invoking the async source fetcher', async () => {
-    const onFetchSource = vi.fn().mockResolvedValue(source)
-    const onPreviewClick = vi.fn()
-    const { result } = renderHook(() =>
-      usePreviewToggle({ isGallery: true, onFetchSource, onPreviewClick })
-    )
-
-    await act(async () => {
-      await result.current.handleToggle()
-    })
-
-    expect(result.current.isPreviewVisible).toBe(true)
-    expect(onPreviewClick).toHaveBeenCalledTimes(1)
-    expect(onFetchSource).not.toHaveBeenCalled()
-  })
-
-  it('first reveal fetches the source, then caches it on subsequent toggles', async () => {
-    const onFetchSource = vi.fn().mockResolvedValue(source)
-    const { result } = renderHook(() =>
-      usePreviewToggle({ isGallery: false, onFetchSource })
-    )
-
-    // First reveal → fetches.
-    await act(async () => {
-      await result.current.handleToggle()
-    })
-    expect(result.current.isPreviewVisible).toBe(true)
-    expect(result.current.source).toEqual(source)
-    expect(onFetchSource).toHaveBeenCalledTimes(1)
-
-    // Toggle off.
-    await act(async () => {
-      await result.current.handleToggle()
-    })
-    expect(result.current.isPreviewVisible).toBe(false)
-
-    // Toggle back on → reuses the cache, no second fetch.
-    await act(async () => {
-      await result.current.handleToggle()
-    })
-    expect(result.current.isPreviewVisible).toBe(true)
-    expect(onFetchSource).toHaveBeenCalledTimes(1)
-  })
-
-  it('stays locked when the fetcher resolves without a source', async () => {
-    const onFetchSource = vi.fn().mockResolvedValue(undefined)
-    const { result } = renderHook(() =>
-      usePreviewToggle({ isGallery: false, onFetchSource })
-    )
-
-    await act(async () => {
-      await result.current.handleToggle()
-    })
-
-    expect(result.current.isPreviewVisible).toBe(false)
-    expect(result.current.source).toBeUndefined()
-  })
-})

package/src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.ts

@@ -1,89 +0,0 @@
-import { useCallback, useRef, useState } from 'react'
-
-import type { LockedAttachmentSource } from '../../types'
-
-export interface UsePreviewToggleOptions {
-  /** Gallery items carry their own per-item sources on the `gallery` prop already, so toggling skips the async fetch entirely. */
-  isGallery: boolean
-  /**
-   * Lazily loads the underlying source; the resolved value is cached in
-   * `source` and reused on subsequent toggles.
-   */
-  onFetchSource?: () => Promise<LockedAttachmentSource | void>
-  /** Fired on every toggle tap, before any visibility/fetch logic runs. */
-  onPreviewClick?: () => void
-}
-
-export interface UsePreviewToggleResult {
-  source: LockedAttachmentSource | undefined
-  isPreviewVisible: boolean
-  isLoadingPreview: boolean
-  handleToggle: () => Promise<void>
-  /**
-   * `handleToggle` when the card can actually be previewed (gallery, or a
-   * fetch/click handler is wired), else `undefined` — pass straight to
-   * `PreviewToggle.onToggle` so a non-previewable card renders no
-   * toggle affordance.
-   */
-  togglePreview: (() => Promise<void>) | undefined
-}
-
-/**
- * Shared preview-toggle state for Composer/Media isMine: flips a locked thumbnail to
- * its unlocked preview, lazily fetching and caching the source on first
- * reveal. Media !isMine doesn't use this — it fetches on scroll-into-view/paid
- * instead of on a toggle tap.
- */
-export function usePreviewToggle({
-  isGallery,
-  onFetchSource,
-  onPreviewClick,
-}: UsePreviewToggleOptions): UsePreviewToggleResult {
-  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
-  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
-  const fetchingRef = useRef(false)
-
-  const handleToggle = useCallback(async () => {
-    onPreviewClick?.()
-    if (isPreviewVisible) {
-      setIsPreviewVisible(false)
-      return
-    }
-    if (isGallery) {
-      setIsPreviewVisible(true)
-      return
-    }
-    if (source) {
-      setIsPreviewVisible(true)
-      return
-    }
-    if (!onFetchSource) return
-    if (fetchingRef.current) return
-    fetchingRef.current = true
-    setIsLoadingPreview(true)
-    try {
-      const result = await onFetchSource()
-      if (result) {
-        setSource(result)
-        setIsPreviewVisible(true)
-      }
-    } finally {
-      fetchingRef.current = false
-      setIsLoadingPreview(false)
-    }
-  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])
-
-  const togglePreview =
-    isGallery || onFetchSource != null || onPreviewClick != null
-      ? handleToggle
-      : undefined
-
-  return {
-    source,
-    isPreviewVisible,
-    isLoadingPreview,
-    handleToggle,
-    togglePreview,
-  }
-}

package/src/components/CustomMessage/LockedAttachment/components/_shared/useReceivedSource.ts

@@ -1,83 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-
-import type {
-  FetchSourceHandler,
-  LockedAttachmentSource,
-  PaymentStatus,
-} from '../../types'
-
-export interface UseReceivedSourceOptions {
-  paymentStatus?: PaymentStatus
-  onFetchSource?: FetchSourceHandler
-  /** Called on Unlock click while the card is still unpaid (opens checkout). */
-  onUnlockClick?: () => void
-}
-
-export interface UseReceivedSourceResult {
-  source: LockedAttachmentSource | undefined
-  /** Attach to the card root so the paid-source auto-fetch can observe it. */
-  cardRef: React.RefObject<HTMLDivElement>
-  /** Fetches the source when already paid, else defers to `onUnlockClick`. */
-  handleUnlockClick: () => void
-}
-
-/**
- * Media !isMine's source-reveal logic: unlike Composer/Media isMine's
- * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source
- * by fetching once — on click when already paid, or automatically the first
- * time a paid card scrolls fully into view. The fetch is guarded so it runs
- * at most once in flight.
- */
-export function useReceivedSource({
-  paymentStatus,
-  onFetchSource,
-  onUnlockClick,
-}: UseReceivedSourceOptions): UseReceivedSourceResult {
-  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-
-  const cardRef = useRef<HTMLDivElement>(null)
-  const fetchingRef = useRef(false)
-
-  const onFetchSourceRef = useRef(onFetchSource)
-  onFetchSourceRef.current = onFetchSource
-
-  const fetchSource = useCallback(async (): Promise<void> => {
-    if (fetchingRef.current) return
-    fetchingRef.current = true
-    try {
-      const result = await onFetchSourceRef.current?.()
-      if (result) setSource(result)
-    } finally {
-      fetchingRef.current = false
-    }
-  }, [])
-
-  const handleUnlockClick = useCallback(() => {
-    if (paymentStatus === 'paid') {
-      void fetchSource()
-    } else {
-      onUnlockClick?.()
-    }
-  }, [paymentStatus, fetchSource, onUnlockClick])
-
-  // Auto-fetch the source once the paid card scrolls into view.
-  useEffect(() => {
-    if (!cardRef.current) return
-    if (paymentStatus !== 'paid' || source !== undefined) return
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          void fetchSource()
-          observer.disconnect()
-        }
-      },
-      { threshold: 1.0 }
-    )
-
-    observer.observe(cardRef.current)
-    return () => observer.disconnect()
-  }, [paymentStatus, source, fetchSource])
-
-  return { source, cardRef, handleUnlockClick }
-}