@linktr.ee/messaging-react 3.8.1 → 3.9.0-rc-1783406511

package/src/components/LockedAttachment/LockedAttachment.test.tsx

@@ -0,0 +1,104 @@
+import { describe, it, expect, vi } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import ComposerCard from './components/Composer/Card'
+import MediaCard from './components/Media/Card'
+import TextCard from './components/Text/Card'
+
+/**
+ * Characterization tests — the safety net for the LockedAttachment
+ * separate-concerns refactor. They assert stable, user-visible facts only
+ * (lock affordances, CTAs, amount/status text, the preview toggle), never
+ * DOM structure or class names — exactly the things the refactor moves
+ * around. Storybook remains the pixel-level visual oracle.
+ */
+describe('LockedAttachment (characterization)', () => {
+  describe('Composer', () => {
+    it('media mode: shows the placeholder title when locked with no title', () => {
+      renderWithProviders(<ComposerCard />)
+      expect(screen.getByText('Attachment title')).toBeInTheDocument()
+    })
+
+    it('media mode: renders a preview toggle when a source fetcher is wired', () => {
+      renderWithProviders(
+        <ComposerCard onFetchSource={vi.fn().mockResolvedValue(undefined)} />
+      )
+      expect(
+        screen.getByRole('button', { name: 'Toggle preview' })
+      ).toBeInTheDocument()
+    })
+
+    it('media mode: renders a dismiss control when onDismiss is provided', () => {
+      renderWithProviders(<ComposerCard onDismiss={vi.fn()} />)
+      expect(
+        screen.getByRole('button', { name: 'Dismiss attachment' })
+      ).toBeInTheDocument()
+    })
+
+    it('text mode: shows the draft text and amount', () => {
+      renderWithProviders(
+        <ComposerCard contentType="text" text="Secret draft" amountText="$5" />
+      )
+      expect(screen.getByText('Secret draft')).toBeInTheDocument()
+      expect(screen.getByText('$5')).toBeInTheDocument()
+    })
+  })
+
+  describe('Media (isMine)', () => {
+    it('shows the amount in the status badge', () => {
+      renderWithProviders(<MediaCard isMine amountText="$5" />)
+      expect(screen.getByText('$5')).toBeInTheDocument()
+    })
+  })
+
+  describe('Text (isMine)', () => {
+    it('pending: shows the Sent status and amount', () => {
+      renderWithProviders(
+        <TextCard isMine amountText="$5" paymentStatus="pending" />
+      )
+      expect(screen.getByText('Sent')).toBeInTheDocument()
+      expect(screen.getByText('$5')).toBeInTheDocument()
+    })
+
+    it('paid: shows the Sold label', () => {
+      renderWithProviders(
+        <TextCard isMine amountText="$5" paymentStatus="paid" />
+      )
+      expect(screen.getByText('Sold')).toBeInTheDocument()
+    })
+  })
+
+  describe('Media (!isMine)', () => {
+    it('renders the locked-attachment root and an Unlock CTA when locked', () => {
+      renderWithProviders(
+        <MediaCard isMine={false} amountText="$5" onUnlockClick={vi.fn()} />
+      )
+      expect(screen.getByTestId('locked-attachment')).toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Unlock' })
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('Text (!isMine)', () => {
+    it('shows an Unlock control and the amount', () => {
+      renderWithProviders(
+        <TextCard isMine={false} amountText="$5" onUnlockClick={vi.fn()} />
+      )
+      expect(
+        screen.getByRole('button', { name: 'Unlock' })
+      ).toBeInTheDocument()
+      expect(screen.getByText('$5')).toBeInTheDocument()
+    })
+
+    it('unlocking: marks the Unlock control busy', () => {
+      renderWithProviders(
+        <TextCard isMine={false} isUnlocking onUnlockClick={vi.fn()} />
+      )
+      const button = screen.getByRole('button', { name: 'Unlocking' })
+      expect(button).toBeDisabled()
+      expect(button).toHaveAttribute('aria-busy', 'true')
+    })
+  })
+})

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

@@ -1,23 +1,31 @@
-import { ImagesIcon, PencilSimpleIcon, XIcon } from '@phosphor-icons/react'
-import React, { useCallback, useRef, useState } from 'react'
+import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'
+import React from 'react'
 
-import type {
-  LockedAttachmentBaseProps,
-  LockedAttachmentSource,
-} from '../../types'
+import type { FetchSourceHandler, LockedAttachmentBaseProps } from '../../types'
 import CardBody from '../_shared/CardBody'
-import GalleryThumbnail from '../_shared/GalleryThumbnail'
-import LockedCardShell from '../_shared/LockedCardShell'
-import LockedThumbnail from '../_shared/LockedThumbnail'
+import CardThumbnail, {
+  galleryBodyIcon,
+  isGalleryCard,
+} from '../_shared/CardThumbnail'
+import MediaShell from '../_shared/MediaShell'
+import PreviewToggle from '../_shared/PreviewToggle'
+import PriceLockRow from '../_shared/PriceLockRow'
+import TextShell from '../_shared/TextShell'
+import { usePreviewToggle } from '../_shared/usePreviewToggle'
 
 export interface ComposerCardProps extends LockedAttachmentBaseProps {
-  /** Placeholder shown in the title slot before the composer types one. */
-  placeholderTitle?: string
+  /**
+   * The message's own text, shown as-is (not redacted yet — the message
+   * hasn't been sent). Only used when `contentType` is `"text"`.
+   */
+  text?: string
   /** Placeholder shown in the amount slot before one is configured. */
   placeholderAmountText?: string
   /**
-   * When provided, renders a dismiss X in the thumbnail corner. Called when
-   * the composer clicks it to remove the attachment.
+   * Renders a persistent dismiss X on the thumbnail (media) or next to the
+   * text (text mode); called to remove the draft attachment. Unrelated to
+   * `TextCardProps.onDismiss`, which only appears for `isMine` after a
+   * failed payment.
    */
   onDismiss?: () => void
   /** Fired the first time the composer taps the thumbnail to preview. */
@@ -26,8 +34,9 @@ export interface ComposerCardProps extends LockedAttachmentBaseProps {
    * Lazily loads the underlying source so the composer can preview the
    * attachment they're about to send. Called the first time the thumbnail is
    * tapped; the returned source is cached and reused on subsequent toggles.
+   * Ignored when `contentType` is `"text"`.
    */
-  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+  onFetchSource?: FetchSourceHandler
   /**
    * When provided, renders a pencil button in the body bottom-right that the
    * composer can use to edit the attachment metadata (e.g. open the price /
@@ -37,10 +46,42 @@ export interface ComposerCardProps extends LockedAttachmentBaseProps {
 }
 
 /**
- * The card the composer sees while drafting a paid attachment.
- * Matches the Composer column of the messaging design system in Figma.
+ * Composer card in text mode: a normal outgoing chat bubble showing the real
+ * draft text (it hasn't been sent/redacted yet) plus a dismiss X and a price
+ * row. Media-only props are ignored here.
+ */
+const ComposerTextCard: React.FC<ComposerCardProps> = ({
+  text,
+  amountText,
+  placeholderAmountText,
+  onDismiss,
+}) => (
+  <TextShell>
+    <div className="pr-8">{text}</div>
+    <PriceLockRow>
+      <span className={amountText ? 'text-white/55' : 'text-white/30'}>
+        {amountText || placeholderAmountText}
+      </span>
+    </PriceLockRow>
+    {onDismiss && (
+      <button
+        type="button"
+        onClick={onDismiss}
+        className="absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15"
+        aria-label="Dismiss attachment"
+      >
+        <XIcon className="size-3" weight="bold" />
+      </button>
+    )}
+  </TextShell>
+)
+
+/**
+ * Composer card in media mode: the locked thumbnail (single or gallery) the
+ * composer taps to preview the attachment they're about to send, plus the
+ * title/price body with optional dismiss X and edit pencil.
  */
-const ComposerCard: React.FC<ComposerCardProps> = ({
+const ComposerMediaCard: React.FC<ComposerCardProps> = ({
   title,
   mimeType = 'application/octet-stream',
   thumbnailUrl,
@@ -48,55 +89,19 @@ const ComposerCard: React.FC<ComposerCardProps> = ({
   amountText,
   placeholderTitle = 'Attachment title',
   placeholderAmountText,
-  gallery,
+  gallery = [],
   onDismiss,
   onPreviewClick,
   onFetchSource,
   onEditClick,
 }) => {
-  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])
+  const isGallery = isGalleryCard(gallery)
 
   // Gallery is always previewable in the composer because each item's source
   // is already provided up-front via `gallery[*].sourceUrl`.
-  const togglePreview =
-    isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined
+  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =
+    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })
+
   const showLocked = !isPreviewVisible
   const isBusy = isLoadingPreview
 
@@ -142,63 +147,24 @@ const ComposerCard: React.FC<ComposerCardProps> = ({
     </button>
   ) : undefined
 
-  const thumbnail = isGallery ? (
-    <GalleryThumbnail
-      variant="dark"
-      gallery={gallery!}
-      title={title}
-      showLocked={showLocked}
-      topRight={dismissButton}
-    />
-  ) : (
-    <LockedThumbnail
-      variant="dark"
-      mimeType={mimeType}
-      thumbnailUrl={thumbnailUrl}
-      title={title}
-      source={source}
-      showLocked={showLocked}
-      topRight={dismissButton}
-    />
-  )
-
   return (
-    <LockedCardShell variant="dark">
-      {togglePreview ? (
-        // Uses a `<div role="button">` rather than a native `<button>` so the
-        // dismiss control rendered inside `thumbnail` (also a `<button>`)
-        // doesn'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 (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 togglePreview()
-            }
-          }}
-          className={
-            !isBusy
-              ? 'block w-full cursor-pointer text-left'
-              : 'block w-full text-left'
-          }
-        >
-          {thumbnail}
-        </div>
-      ) : (
-        thumbnail
-      )}
+    <MediaShell variant="dark">
+      <PreviewToggle
+        onToggle={togglePreview}
+        isBusy={isBusy}
+        isPreviewVisible={!showLocked}
+      >
+        <CardThumbnail
+          variant="dark"
+          gallery={gallery}
+          title={title}
+          showLocked={showLocked}
+          mimeType={mimeType}
+          thumbnailUrl={thumbnailUrl}
+          source={source}
+          topRight={dismissButton}
+        />
+      </PreviewToggle>
 
       <CardBody
         variant="dark"
@@ -207,15 +173,26 @@ const ComposerCard: React.FC<ComposerCardProps> = ({
         mimeType={mimeType}
         detail={detail}
         statusBadge={statusBadge}
-        icon={
-          isGallery ? (
-            <ImagesIcon className="size-5 shrink-0 text-white/55" />
-          ) : undefined
-        }
+        icon={isGallery ? galleryBodyIcon('dark') : undefined}
         trailingAction={editButton}
       />
-    </LockedCardShell>
+    </MediaShell>
   )
 }
 
+/**
+ * The card the composer sees while drafting a paid attachment.
+ * Matches the Composer column of the messaging design system in Figma.
+ *
+ * When `contentType === "text"`, renders as a normal outgoing chat bubble
+ * showing the real draft text (it hasn't been sent/redacted yet) plus a
+ * dismiss X and a price row, instead of a media thumbnail card.
+ */
+const ComposerCard: React.FC<ComposerCardProps> = (props) =>
+  props.contentType === 'text' ? (
+    <ComposerTextCard {...props} />
+  ) : (
+    <ComposerMediaCard {...props} />
+  )
+
 export default ComposerCard

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

@@ -0,0 +1,237 @@
+import type React from 'react'
+
+import { getSourceType } from '../../../AttachmentCard'
+import type {
+  FetchSourceHandler,
+  LockedAttachmentGalleryItem,
+  PaymentStatus,
+} from '../../types'
+import CardBody from '../_shared/CardBody'
+import CardThumbnail, {
+  galleryBodyIcon,
+  isGalleryCard,
+} from '../_shared/CardThumbnail'
+import MediaShell from '../_shared/MediaShell'
+import PreviewToggle from '../_shared/PreviewToggle'
+import PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'
+import { usePreviewToggle } from '../_shared/usePreviewToggle'
+import { useReceivedSource } from '../_shared/useReceivedSource'
+
+import ReceivedCardActions from './CardActions'
+
+interface MediaCardSharedProps {
+  title?: string
+  mimeType?: string
+  thumbnailUrl?: string
+  detail?: string
+  amountText?: string
+  paymentStatus?: PaymentStatus
+  gallery?: LockedAttachmentGalleryItem[]
+  onFetchSource?: FetchSourceHandler
+}
+
+export type MediaCardProps =
+  | (MediaCardSharedProps & {
+      isMine: true
+      /** Dimmed fallback shown in the title slot when `title` is unset. */
+      placeholderTitle?: string
+      /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
+      onPreviewClick?: () => void
+    })
+  | (MediaCardSharedProps & {
+      isMine: false
+      /**
+       * When true, shows a loading spinner on the Unlock button. Driven by
+       * the LockedAttachmentContext (e.g. checkout in progress).
+       */
+      isUnlocking?: boolean
+      /**
+       * 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 when the recipient clicks Download on an unlocked card.
+       * Omit to hide the Download button.
+       */
+      onDownloadClick?: () => void
+    })
+
+/**
+ * The sender's ('mine') view of a paid media attachment: the locked
+ * thumbnail (single or gallery) they can tap to preview their own
+ * attachment, plus the title/purchase-status body.
+ */
+const OwnMediaCard: React.FC<
+  MediaCardSharedProps & {
+    isMine: true
+    placeholderTitle?: string
+    onPreviewClick?: () => void
+  }
+> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle = 'Attachment title',
+  paymentStatus = 'pending',
+  gallery = [],
+  onPreviewClick,
+  onFetchSource,
+}) => {
+  const isGallery = isGalleryCard(gallery)
+
+  // Gallery is always previewable for the sender because each item's source
+  // is already provided up-front via `gallery[*].sourceUrl`.
+  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =
+    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })
+
+  const showLocked = !isPreviewVisible
+  const isBusy = isLoadingPreview
+
+  return (
+    <MediaShell variant="dark">
+      <PreviewToggle
+        onToggle={togglePreview}
+        isBusy={isBusy}
+        isPreviewVisible={!showLocked}
+      >
+        <CardThumbnail
+          variant="dark"
+          gallery={gallery}
+          title={title}
+          showLocked={showLocked}
+          paymentStatus={paymentStatus}
+          mimeType={mimeType}
+          thumbnailUrl={thumbnailUrl}
+          source={source}
+        />
+      </PreviewToggle>
+
+      <CardBody
+        variant="dark"
+        title={title}
+        placeholderTitle={placeholderTitle}
+        mimeType={mimeType}
+        detail={detail}
+        statusBadge={
+          <PurchaseStatusBadge
+            isMine={true}
+            paymentStatus={paymentStatus}
+            amountText={amountText}
+          />
+        }
+        icon={isGallery ? galleryBodyIcon('dark') : undefined}
+      />
+    </MediaShell>
+  )
+}
+
+/**
+ * The recipient's ('other') view of a paid media attachment: the locked
+ * thumbnail (single or gallery) with an Unlock/Download CTA. The source is
+ * revealed by fetching once — on click when already paid, or automatically
+ * the first time a paid card scrolls into view.
+ */
+const OtherMediaCard: React.FC<
+  MediaCardSharedProps & {
+    isMine: false
+    onUnlockClick?: () => void
+    onDownloadClick?: () => void
+    isUnlocking?: boolean
+  }
+> = ({
+  title,
+  amountText,
+  thumbnailUrl,
+  mimeType = 'application/octet-stream',
+  detail,
+  gallery = [],
+  onUnlockClick,
+  onFetchSource,
+  onDownloadClick,
+  paymentStatus,
+  isUnlocking = false,
+}) => {
+  const isGallery = isGalleryCard(gallery)
+
+  const { source, cardRef, handleUnlockClick } = useReceivedSource({
+    paymentStatus,
+    onFetchSource,
+    onUnlockClick,
+  })
+
+  const effectiveSourceUrl = source?.sourceUrl
+  const effectiveRedeemUrl = source?.redeemUrl
+
+  // 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)
+
+  // 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 (
+    <MediaShell
+      variant="light"
+      rootRef={cardRef}
+      data-testid="locked-attachment"
+    >
+      <CardThumbnail
+        variant="light"
+        gallery={gallery}
+        title={title}
+        showLocked={isLocked}
+        paymentStatus={paymentStatus}
+        mimeType={mimeType}
+        thumbnailUrl={thumbnailUrl}
+        source={source}
+        containedImage={
+          !isLocked && (sourceType === 'image' || sourceType === 'document')
+        }
+      />
+
+      <CardBody
+        variant="light"
+        title={title}
+        mimeType={mimeType}
+        detail={detail}
+        statusBadge={
+          <PurchaseStatusBadge
+            isMine={false}
+            paymentStatus={paymentStatus}
+            amountText={amountText}
+          />
+        }
+        icon={isGallery ? galleryBodyIcon('light') : undefined}
+        action={
+          <ReceivedCardActions
+            isLocked={isLocked}
+            isUnlocking={isUnlocking}
+            sourceUrl={actionSourceUrl}
+            redeemUrl={effectiveRedeemUrl}
+            onUnlockClicked={handleUnlockClick}
+            onDownloadClicked={onDownloadClick}
+          />
+        }
+      />
+    </MediaShell>
+  )
+}
+
+/**
+ * The card either party sees for a paid media attachment. `isMine` selects
+ * the sender's preview view (tap-to-preview own draft) vs. the recipient's
+ * unlock/download view.
+ */
+const MediaCard: React.FC<MediaCardProps> = (props) =>
+  props.isMine ? <OwnMediaCard {...props} /> : <OtherMediaCard {...props} />
+
+export default MediaCard