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

package/src/components/LockedAttachment/components/Received/Card.tsx

@@ -1,191 +0,0 @@
-import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-
-import { getSourceType } from '../../../AttachmentCard'
-import type {
-  LockedAttachmentBaseProps,
-  LockedAttachmentSource,
-} from '../../types'
-import CardBody from '../_shared/CardBody'
-import GalleryThumbnail from '../_shared/GalleryThumbnail'
-import LockedCardShell from '../_shared/LockedCardShell'
-import LockedThumbnail from '../_shared/LockedThumbnail'
-
-import ReceivedCardActions from './CardActions'
-
-export interface ReceivedCardProps extends LockedAttachmentBaseProps {
-  /**
-   * Called when the recipient clicks Unlock on an unpaid attachment.
-   * Use this to open a checkout flow. Omit to hide the Unlock button.
-   */
-  onUnlockClick?: () => void
-  /**
-   * Called to fetch the attachment source — fired automatically when
-   * `paymentStatus` transitions to `'paid'`, or immediately on click when
-   * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
-   * to unlock the card.
-   */
-  onFetchSource?: () => Promise<LockedAttachmentSource | void>
-  /**
-   * Called when the recipient clicks Download on an unlocked card.
-   * Omit to hide the Download button.
-   */
-  onDownloadClick?: () => void
-  /**
-   * When true, shows a loading spinner on the Unlock button.
-   * Driven by the LockedAttachmentContext (e.g. checkout in progress).
-   */
-  isUnlocking?: boolean
-}
-
-/**
- * The card the recipient sees in chat for a paid attachment.
- * Matches the Received column of the messaging design system in Figma:
- * locked → blurred thumbnail + Unlock CTA, unlocked → clear image + Download CTA.
- */
-const ReceivedCard: React.FC<ReceivedCardProps> = ({
-  title,
-  amountText,
-  thumbnailUrl,
-  mimeType = 'application/octet-stream',
-  detail,
-  gallery,
-  onUnlockClick,
-  onFetchSource,
-  onDownloadClick,
-  paymentStatus,
-  isUnlocking = false,
-}) => {
-  const isGallery = (gallery?.length ?? 0) >= 2
-  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-
-  const cardRef = useRef<HTMLDivElement>(null)
-  const fetchingRef = useRef(false)
-
-  const onFetchSourceRef = useRef(onFetchSource)
-  onFetchSourceRef.current = onFetchSource
-
-  const effectiveSourceUrl = source?.sourceUrl
-  const effectiveRedeemUrl = source?.redeemUrl
-
-  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])
-
-  // For gallery, the per-item sources are carried by `gallery` itself, so
-  // the lock state is driven by paymentStatus rather than the single
-  // `effectiveSourceUrl`. Everything else still respects the source fetch.
-  const isLocked = isGallery
-    ? paymentStatus !== 'paid'
-    : effectiveSourceUrl === undefined
-  const sourceType = getSourceType(mimeType)
-
-  const statusBadge =
-    paymentStatus === 'paid' ? (
-      <React.Fragment>
-        <span className="text-xs font-medium text-black/55">&bull;</span>
-        <span className="text-xs font-medium text-[#008236]">Purchased</span>
-        <CheckCircleIcon className="size-4 text-[#008236]" weight="bold" />
-      </React.Fragment>
-    ) : amountText != null ? (
-      <React.Fragment>
-        <span className="text-xs font-medium text-black/55">&bull;</span>
-        <span className="text-xs font-medium text-black/55">{amountText}</span>
-      </React.Fragment>
-    ) : null
-
-  // For gallery, ReceivedCardActions falls back to a plain <button>
-  // (no anchor) because the gallery has no single sourceUrl to link to —
-  // the per-item sources live on `gallery` itself.
-  const actionSourceUrl = isGallery ? undefined : effectiveSourceUrl
-
-  return (
-    <LockedCardShell
-      variant="light"
-      rootRef={cardRef}
-      data-testid="locked-attachment"
-    >
-      {isGallery ? (
-        <GalleryThumbnail
-          variant="light"
-          gallery={gallery!}
-          title={title}
-          showLocked={isLocked}
-          paymentStatus={paymentStatus}
-        />
-      ) : (
-        <LockedThumbnail
-          variant="light"
-          mimeType={mimeType}
-          thumbnailUrl={thumbnailUrl}
-          title={title}
-          source={source}
-          showLocked={isLocked}
-          paymentStatus={paymentStatus}
-          containedImage={
-            !isLocked && (sourceType === 'image' || sourceType === 'document')
-          }
-        />
-      )}
-
-      <CardBody
-        variant="light"
-        title={title}
-        mimeType={mimeType}
-        detail={detail}
-        statusBadge={statusBadge}
-        icon={
-          isGallery ? (
-            <ImagesIcon className="size-5 shrink-0 text-black/55" />
-          ) : undefined
-        }
-        action={
-          <ReceivedCardActions
-            isLocked={isLocked}
-            isUnlocking={isUnlocking}
-            sourceUrl={actionSourceUrl}
-            redeemUrl={effectiveRedeemUrl}
-            onUnlockClicked={handleUnlockClick}
-            onDownloadClicked={onDownloadClick}
-          />
-        }
-      />
-    </LockedCardShell>
-  )
-}
-
-export default ReceivedCard

package/src/components/LockedAttachment/components/Received/index.ts

@@ -1,2 +0,0 @@
-export { default as ReceivedCard } from './Card'
-export type { ReceivedCardProps } from './Card'

package/src/components/LockedAttachment/components/Sent/Card.tsx

@@ -1,177 +0,0 @@
-import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'
-import React, { useCallback, useRef, useState } from 'react'
-
-import type {
-  LockedAttachmentBaseProps,
-  LockedAttachmentSource,
-} from '../../types'
-import CardBody from '../_shared/CardBody'
-import GalleryThumbnail from '../_shared/GalleryThumbnail'
-import LockedCardShell from '../_shared/LockedCardShell'
-import LockedThumbnail from '../_shared/LockedThumbnail'
-
-export interface SentCardProps extends LockedAttachmentBaseProps {
-  /** Placeholder shown in the title slot when no title is set. */
-  placeholderTitle?: string
-  /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
-  onPreviewClick?: () => void
-  /**
-   * Lazily loads the underlying source so the sender can preview the attachment.
-   * Called the first time the thumbnail is tapped; the returned source is cached
-   * and reused on subsequent toggles.
-   */
-  onFetchSource?: () => Promise<LockedAttachmentSource | void>
-}
-
-/**
- * The card the sender sees in chat after a paid attachment has been posted.
- * Matches the Sent column of the messaging design system in Figma.
- */
-const SentCard: React.FC<SentCardProps> = ({
-  title,
-  mimeType = 'application/octet-stream',
-  thumbnailUrl,
-  detail,
-  amountText,
-  placeholderTitle = 'Attachment title',
-  paymentStatus,
-  gallery,
-  onPreviewClick,
-  onFetchSource,
-}) => {
-  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
-  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
-  const fetchingRef = useRef(false)
-
-  const isGallery = (gallery?.length ?? 0) >= 2
-
-  const handleToggle = useCallback(async () => {
-    onPreviewClick?.()
-    if (isPreviewVisible) {
-      setIsPreviewVisible(false)
-      return
-    }
-    // Gallery items carry their own per-item sources on the `gallery` prop, so
-    // we just flip visibility — no async source fetch is needed.
-    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])
-
-  // Gallery is always previewable for the sender because each item's source
-  // is already provided up-front via `gallery[*].sourceUrl`.
-  const togglePreview =
-    isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined
-  const showLocked = !isPreviewVisible
-  const isBusy = isLoadingPreview
-
-  const statusBadge =
-    paymentStatus === 'paid' ? (
-      <React.Fragment>
-        <span className="text-xs font-medium text-white/55">&bull;</span>
-        <span className="text-xs font-medium text-[#34c759]">Sold</span>
-        <CheckCircleIcon className="size-4 text-[#34c759]" weight="bold" />
-      </React.Fragment>
-    ) : amountText ? (
-      <React.Fragment>
-        <span className="text-xs font-medium text-white/55">&bull;</span>
-        <span className="text-xs font-medium text-white/55">{amountText}</span>
-      </React.Fragment>
-    ) : null
-
-  const thumbnail = isGallery ? (
-    <GalleryThumbnail
-      variant="dark"
-      gallery={gallery!}
-      title={title}
-      showLocked={showLocked}
-      paymentStatus={paymentStatus}
-    />
-  ) : (
-    <LockedThumbnail
-      variant="dark"
-      mimeType={mimeType}
-      thumbnailUrl={thumbnailUrl}
-      title={title}
-      source={source}
-      showLocked={showLocked}
-      paymentStatus={paymentStatus}
-    />
-  )
-
-  return (
-    <LockedCardShell variant="dark">
-      {togglePreview ? (
-        // Uses a `<div role="button">` rather than a native `<button>` so the
-        // gallery's carousel arrow `<button>`s rendered inside `thumbnail`
-        // don't produce invalid nested interactive elements.
-        <div
-          role="button"
-          tabIndex={isBusy ? -1 : 0}
-          aria-label="Toggle preview"
-          aria-busy={isBusy}
-          aria-pressed={!showLocked}
-          aria-disabled={isBusy || undefined}
-          onClick={isBusy ? undefined : togglePreview}
-          onKeyDown={(e) => {
-            if (isBusy) return
-            // Only handle keys that originate on the wrapper itself, not on
-            // inner interactive elements (gallery 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 togglePreview()
-            }
-          }}
-          className={
-            !isBusy
-              ? 'block w-full cursor-pointer text-left'
-              : 'block w-full text-left'
-          }
-        >
-          {thumbnail}
-        </div>
-      ) : (
-        thumbnail
-      )}
-
-      <CardBody
-        variant="dark"
-        title={title}
-        placeholderTitle={placeholderTitle}
-        mimeType={mimeType}
-        detail={detail}
-        statusBadge={statusBadge}
-        icon={
-          isGallery ? (
-            <ImagesIcon className="size-5 shrink-0 text-white/55" />
-          ) : undefined
-        }
-      />
-    </LockedCardShell>
-  )
-}
-
-export default SentCard

package/src/components/LockedAttachment/components/Sent/index.ts

@@ -1,2 +0,0 @@
-export { default as SentCard } from './Card'
-export type { SentCardProps } from './Card'

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

@@ -1,39 +0,0 @@
-import {
-  LockOpenIcon,
-  LockSimpleIcon,
-  PlayIcon,
-} from '@phosphor-icons/react'
-import React from 'react'
-
-import { getSourceType } from '../../../AttachmentCard'
-import type { PaymentStatus } from '../../types'
-
-/**
- * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
- * Uses `bg-black/25` from the design system's `alpha-black-25` token.
- *
- * For playable media (video/audio), the badge shows a play icon instead of a
- * lock — matching the convention used by `GalleryThumbnail`.
- */
-export const LockBadge: React.FC<{
-  paymentStatus?: PaymentStatus
-  mimeType?: string
-}> = ({ paymentStatus, mimeType }) => {
-  const sourceType = mimeType ? getSourceType(mimeType) : undefined
-  const isPlayable = sourceType === 'video' || sourceType === 'audio'
-
-  const Icon = isPlayable
-    ? PlayIcon
-    : paymentStatus === 'paid'
-      ? LockOpenIcon
-      : LockSimpleIcon
-  return (
-    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-      <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
-        <Icon className="size-6" weight="fill" />
-      </div>
-    </div>
-  )
-}
-
-export default LockBadge

package/src/components/LockedAttachment/index.tsx

@@ -1,63 +0,0 @@
-import React, { Suspense } from 'react'
-
-import type { ComposerCardProps } from './components/Composer/Card'
-import type { ReceivedCardProps } from './components/Received/Card'
-import type { SentCardProps } from './components/Sent/Card'
-
-const ComposerCardLazy = React.lazy(() => import('./components/Composer/Card'))
-const SentCardLazy = React.lazy(() => import('./components/Sent/Card'))
-const ReceivedCardLazy = React.lazy(() => import('./components/Received/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
-  />
-)
-
-const Composer = (props: ComposerCardProps) => (
-  <Suspense fallback={<LockedAttachmentFallback />}>
-    <ComposerCardLazy {...props} />
-  </Suspense>
-)
-
-const Sent = (props: SentCardProps) => (
-  <Suspense fallback={<LockedAttachmentFallback />}>
-    <SentCardLazy {...props} />
-  </Suspense>
-)
-
-const Received = (props: ReceivedCardProps) => (
-  <Suspense fallback={<LockedAttachmentFallback />}>
-    <ReceivedCardLazy {...props} />
-  </Suspense>
-)
-
-/**
- * @deprecated Renamed to `LockedAttachment.Sent` (post-send sender card) or
- * `LockedAttachment.Composer` (drafting state). This alias maps to `Sent`
- * because that matches the previous in-thread usage; pre-send / drafting
- * usages (e.g. with `onDismiss`) should migrate to `LockedAttachment.Composer`.
- */
-const Creator = Sent
-
-/** @deprecated Renamed to `LockedAttachment.Received`. */
-const Visitor = Received
-
-const LockedAttachment = { Composer, Sent, Received, Creator, Visitor }
-
-export default LockedAttachment
-export type { ComposerCardProps, SentCardProps, ReceivedCardProps }
-/**
- * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
- * should migrate to `ComposerCardProps`.
- */
-export type CreatorCardProps = SentCardProps
-/** @deprecated Renamed to `ReceivedCardProps`. */
-export type VisitorCardProps = ReceivedCardProps
-export type {
-  PaymentStatus,
-  LockedAttachmentSource,
-  LockedAttachmentGalleryItem,
-  LockedAttachmentContextValue,
-} from './types'

package/src/components/LockedAttachment/types.ts

@@ -1,51 +0,0 @@
-import type { Channel, LocalMessage } from 'stream-chat'
-
-import type { PaymentStatus } from '../../stream-custom-data'
-
-export interface LockedAttachmentBaseProps {
-  title?: string
-  mimeType?: string
-  thumbnailUrl?: string
-  detail?: string
-  amountText?: string
-  paymentStatus?: PaymentStatus
-  /**
-   * When provided with 2+ items, the card renders as a mixed-media carousel
-   * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
-   * item brings its own thumbnail and optional source so that
-   * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
-   * same carousel chrome.
-   */
-  gallery?: LockedAttachmentGalleryItem[]
-}
-
-export interface LockedAttachmentGalleryItem {
-  /** MIME type of this carousel item — drives the per-item play / lock affordance. */
-  mimeType: string
-  /** Poster image used for both the locked (blurred) and unlocked preview state. */
-  thumbnailUrl?: string
-  /** Underlying source (image or video URL) — shown only when unlocked. */
-  sourceUrl?: string
-}
-
-export interface LockedAttachmentSource {
-  /** Proxied URL used by the media player for in-app playback. */
-  sourceUrl: string
-  /** URL opened when the visitor clicks Download — may be a file or a web destination. */
-  redeemUrl?: string
-  /** Thumbnail URL from the fetched asset — overrides the metadata thumbnail when present. */
-  thumbnailUrl?: string
-}
-
-export type { PaymentStatus }
-
-export interface LockedAttachmentContextValue {
-  isUnlocking: (id: string) => boolean
-  onUnlockClick?: (message: LocalMessage, channel: Channel) => void
-  onDownloadClick?: (message: LocalMessage, channel: Channel) => void
-  onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>
-}
-
-export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue = {
-  isUnlocking: () => false,
-}