@linktr.ee/messaging-react 3.10.0 → 3.11.0-rc-1783756377

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,74 @@
+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/{LockedAttachment/components/_shared/LockedThumbnail.tsx → CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx}

@@ -4,14 +4,14 @@ import React from 'react'
 import {
   AttachmentThumbnail,
   renderTypeIcon,
-} from '../../../AttachmentCard'
+} from '../../../../AttachmentCard'
 import type { LockedAttachmentSource, PaymentStatus } from '../../types'
 
 import { LockBadge } from './LockBadge'
-import type { LockedCardVariant } from './LockedCardShell'
+import type { CardVariant } from './MediaShell'
 
-export interface LockedThumbnailProps {
-  variant: LockedCardVariant
+export interface SingleThumbnailProps {
+  variant: CardVariant
   mimeType: string
   thumbnailUrl?: string
   title?: string
@@ -40,7 +40,7 @@ export interface LockedThumbnailProps {
  *   - preview/paid: clear thumbnail (the underlying source)
  *   - empty:        type-icon placeholder
  */
-const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
+const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
   variant,
   mimeType,
   thumbnailUrl,
@@ -98,7 +98,11 @@ const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
               })}
             </div>
           )}
-          <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />
+          <LockBadge
+            paymentStatus={paymentStatus}
+            mimeType={mimeType}
+            isLocked={showLocked}
+          />
         </div>
       ) : (
         <AttachmentThumbnail
@@ -125,4 +129,4 @@ const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
   )
 }
 
-export default LockedThumbnail
+export default SingleThumbnail

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,83 @@
+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 }
+}

package/src/components/CustomMessage/LockedAttachment/index.tsx

@@ -0,0 +1,105 @@
+import React, { Suspense } from 'react'
+
+import type {
+  MediaCardDraftProps,
+  MediaCardOtherProps,
+  MediaCardOwnProps,
+  MediaCardPreviewProps,
+} from './components/Media/types'
+import type {
+  TextCardOtherProps,
+  TextCardOwnProps,
+} from './components/Text/types'
+
+const TextCardLazy = React.lazy(() => import('./components/Text/Card'))
+const MediaCardLazy = React.lazy(() => import('./components/Media/Card'))
+
+const LockedAttachmentFallback = () => (
+  <div
+    className="w-[280px] min-h-[200px] animate-pulse rounded-md bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
+    aria-hidden
+  />
+)
+
+export type DraftProps = MediaCardDraftProps & {
+  /** Drafting is always the sender — doesn't apply here. */
+  isMine?: never
+  /**
+   * "text" renders as a chat bubble showing the real draft `text` instead of
+   * a media thumbnail card. Media-only fields below are ignored in text mode.
+   * Defaults to `"media"`.
+   */
+  contentType?: 'text' | 'media'
+  /** The message's own text, shown as-is (not redacted yet). Only used when `contentType` is `"text"`. */
+  renderedText?: React.ReactNode
+}
+
+export type PreviewProps = MediaCardPreviewProps & {
+  /** Drafting is always the sender — doesn't apply here. */
+  isMine?: never
+  /**
+   * "text" renders as a chat bubble instead of a media thumbnail card.
+   * Media-only fields below are ignored in text mode. Defaults to `"media"`.
+   */
+  contentType?: 'text' | 'media'
+}
+
+export type SentTextOwnProps = TextCardOwnProps & {
+  contentType: 'text'
+  /** Sender's view has no unlock flow — doesn't apply here. */
+  onUnlockClick?: never
+  isUnlocking?: never
+}
+
+export type SentTextOtherProps = TextCardOtherProps & {
+  contentType: 'text'
+}
+
+export type SentMediaOwnProps = MediaCardOwnProps & {
+  contentType?: 'media'
+  /** Sender's view has no unlock/download flow — doesn't apply here. */
+  onUnlockClick?: never
+  isUnlocking?: never
+  onDownloadClick?: never
+}
+
+export type SentMediaOtherProps = MediaCardOtherProps & {
+  contentType?: 'media'
+}
+
+/**
+ * The card for a paid attachment — a still-drafting `isDraft` card, a static
+ * receiver-facing `isPreview` mockup, or a sent text/media card discriminated
+ * by `isMine` + `contentType`. Internally lazy-loads only the one underlying
+ * implementation the resolved branch needs.
+ */
+export type LockedAttachmentProps =
+  | DraftProps
+  | PreviewProps
+  | SentTextOwnProps
+  | SentTextOtherProps
+  | SentMediaOwnProps
+  | SentMediaOtherProps
+
+const LockedAttachment: React.FC<LockedAttachmentProps> = (props) => {
+  return (
+    <Suspense fallback={<LockedAttachmentFallback />}>
+      {props.contentType === 'text' ? (
+        <TextCardLazy {...props} />
+      ) : (
+        <MediaCardLazy {...props} />
+      )}
+    </Suspense>
+  )
+}
+
+export default LockedAttachment
+export { default as PurchaseStatusBadge } from './components/_shared/PurchaseStatusBadge'
+export type { PurchaseStatusBadgeProps } from './components/_shared/PurchaseStatusBadge'
+export type {
+  PaymentStatus,
+  FetchSourceHandler,
+  LockedAttachmentSource,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+} from './types'

package/src/components/CustomMessage/LockedAttachment/types.ts

@@ -0,0 +1,44 @@
+import type { Channel, LocalMessage } from 'stream-chat'
+
+import type { PaymentStatus } from '../../../stream-custom-data'
+
+export interface LockedAttachmentGalleryItem {
+  /** Drives the per-item play/lock affordance. */
+  mimeType: string
+  /** Poster image, locked or unlocked. */
+  thumbnailUrl?: string
+  /** Media source, shown only when unlocked. */
+  sourceUrl?: string
+}
+
+export interface LockedAttachmentSource {
+  /** Proxied URL for in-app playback. */
+  sourceUrl: string
+  /** Opened when the visitor clicks Download. */
+  redeemUrl?: string
+  /** Overrides the metadata thumbnail when present. */
+  thumbnailUrl?: string
+}
+
+export type { PaymentStatus }
+
+/** Fetches the underlying source; `void` return means none available. */
+export type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>
+
+export interface LockedAttachmentContextValue {
+  /** Whether the given message is mid-checkout. */
+  isUnlocking: (id: string) => boolean
+  /** Opens the checkout flow for a message. */
+  onUnlockClick?: (message: LocalMessage, channel: Channel) => void
+  /** Handles a Download click for a message. */
+  onDownloadClick?: (message: LocalMessage, channel: Channel) => void
+  /** Reveals the locked media's source. Unused for text — payment writes `message.text` directly. */
+  onFetchSource?: (
+    message: LocalMessage,
+    channel: Channel
+  ) => Promise<LockedAttachmentSource | void>
+}
+
+export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue = {
+  isUnlocking: () => false,
+}

package/src/components/CustomMessage/MessageTag.tsx

@@ -47,6 +47,14 @@ export const isAttachmentMessage = (message: LocalMessage): boolean => {
   return message.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
 }
 
+export const isTextAttachmentMessage = (message: LocalMessage): boolean => {
+  return isAttachmentMessage(message) && message.metadata?.attachment_content_type === 'text'
+}
+
+export const isMediaAttachmentMessage = (message: LocalMessage): boolean => {
+  return isAttachmentMessage(message) && message.metadata?.attachment_content_type !== 'text'
+}
+
 /** Check if a message has a tip/paid tag (both render the same) */
 export const isTipOrPaidMessage = (message: LocalMessage): boolean => {
   return isTipMessage(message) || isPaidMessage(message)

package/src/components/CustomMessage/context.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 
-import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from '../LockedAttachment/types'
+import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from './LockedAttachment/types'
 
 export interface CustomMessageRegistry {
   LockedAttachment: LockedAttachmentContextValue