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

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

@@ -0,0 +1,117 @@
+import { describe, it, expect, vi } from 'vitest'
+
+import { renderWithProviders, screen } from '../../../test/utils'
+
+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('Draft', () => {
+    it('media mode: shows the placeholder title when locked with no title', () => {
+      renderWithProviders(<MediaCard isDraft />)
+      expect(screen.getByText('Attachment title')).toBeInTheDocument()
+    })
+
+    it('media mode: renders a preview toggle when a source fetcher is wired', () => {
+      renderWithProviders(
+        <MediaCard isDraft 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(<MediaCard isDraft onDismiss={vi.fn()} />)
+      expect(
+        screen.getByRole('button', { name: 'Dismiss attachment' })
+      ).toBeInTheDocument()
+    })
+
+    it('text mode: shows the draft text and amount', () => {
+      renderWithProviders(
+        <TextCard isDraft amountText="$5" renderedText="Secret draft" />
+      )
+      expect(screen.getByText('Secret draft')).toBeInTheDocument()
+      expect(screen.getByText('$5')).toBeInTheDocument()
+    })
+  })
+
+  describe('Preview', () => {
+    it('media mode: shows the placeholder title when locked with no title', () => {
+      renderWithProviders(<MediaCard isPreview amountText="$5" />)
+      expect(screen.getByText('Attachment title')).toBeInTheDocument()
+      expect(screen.getByText('$5')).toBeInTheDocument()
+    })
+
+    it('text mode: never shows real text, only the amount', () => {
+      renderWithProviders(<TextCard isPreview amountText="$5" />)
+      expect(screen.queryByText('Secret draft')).not.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 amount with no status label', () => {
+      renderWithProviders(
+        <TextCard isMine amountText="$5" paymentStatus="pending" />
+      )
+      expect(screen.queryByText('Sent')).not.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 message' })
+      ).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 message' })
+      expect(button).toBeDisabled()
+      expect(button).toHaveAttribute('aria-busy', 'true')
+    })
+  })
+})

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

@@ -0,0 +1,358 @@
+import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'
+import React from 'react'
+
+import { getSourceType } from '../../../../AttachmentCard'
+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'
+import type {
+  MediaCardDraftProps,
+  MediaCardOtherProps,
+  MediaCardOwnProps,
+  MediaCardPreviewProps,
+  MediaCardProps,
+} from './types'
+
+export type { MediaCardProps } from './types'
+
+/**
+ * Media card while still drafting — 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 DraftMediaCard: React.FC<MediaCardDraftProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle,
+  placeholderAmountText,
+  gallery = [],
+  onDismiss,
+  onPreviewClick,
+  onFetchSource,
+  onEditClick,
+}) => {
+  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 { source, isPreviewVisible, isLoadingPreview, togglePreview } =
+    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })
+
+  const showLocked = !isPreviewVisible
+  const isBusy = isLoadingPreview
+
+  const statusBadge = (
+    <React.Fragment>
+      <span className="text-xs font-medium text-white/55">&bull;</span>
+      <span
+        className={
+          amountText
+            ? 'text-xs font-medium text-white/55'
+            : 'text-xs font-medium text-white/30'
+        }
+      >
+        {amountText || placeholderAmountText}
+      </span>
+    </React.Fragment>
+  )
+
+  const dismissButton = onDismiss ? (
+    <button
+      type="button"
+      onClick={(e) => {
+        // Stop the click from bubbling up into the outer preview-toggle
+        // wrapper when both are wired up at the same time.
+        e.stopPropagation()
+        onDismiss()
+      }}
+      className="flex size-6 items-center justify-center rounded-full bg-[#121110] text-white"
+      aria-label="Dismiss attachment"
+    >
+      <XIcon className="size-3" weight="bold" />
+    </button>
+  ) : undefined
+
+  const editButton = onEditClick ? (
+    <button
+      type="button"
+      onClick={onEditClick}
+      aria-label="Edit attachment"
+      className="flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15"
+    >
+      <PencilSimpleIcon className="size-5" weight="regular" />
+    </button>
+  ) : undefined
+
+  return (
+    <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"
+        title={title}
+        placeholderTitle={placeholderTitle}
+        mimeType={mimeType}
+        detail={detail}
+        statusBadge={statusBadge}
+        icon={isGallery ? galleryBodyIcon('dark') : undefined}
+        trailingAction={editButton}
+      />
+    </MediaShell>
+  )
+}
+
+/**
+ * Static mockup of what the recipient will see before purchase — always
+ * locked/blurred (the lock badge renders from `showLocked` alone, no toggle
+ * wiring needed), no interactivity, no real content revealed.
+ */
+const PreviewMediaCard: React.FC<MediaCardPreviewProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle,
+  placeholderAmountText,
+  gallery = [],
+}) => {
+  const isGallery = isGalleryCard(gallery)
+
+  const statusBadge = (
+    <React.Fragment>
+      <span className="text-xs font-medium text-black/55">&bull;</span>
+      <span
+        className={
+          amountText
+            ? 'text-xs font-medium text-black/55'
+            : 'text-xs font-medium text-black/30'
+        }
+      >
+        {amountText || placeholderAmountText}
+      </span>
+    </React.Fragment>
+  )
+
+  return (
+    <MediaShell variant="light">
+      <CardThumbnail
+        variant="light"
+        gallery={gallery}
+        title={title}
+        showLocked
+        mimeType={mimeType}
+        thumbnailUrl={thumbnailUrl}
+      />
+
+      <CardBody
+        variant="light"
+        title={title}
+        placeholderTitle={placeholderTitle}
+        mimeType={mimeType}
+        detail={detail}
+        statusBadge={statusBadge}
+        icon={isGallery ? galleryBodyIcon('light') : undefined}
+      />
+    </MediaShell>
+  )
+}
+/**
+ * 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<MediaCardOwnProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle,
+  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<MediaCardOtherProps> = ({
+  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 === '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. `isDraft`/`isPreview`
+ * select the composer's own drafting view / a static receiver-side mockup;
+ * otherwise `isMine` selects the sender's sent view vs. the recipient's
+ * unlock/download view.
+ */
+const MediaCard: React.FC<MediaCardProps> = (props) => {
+  if (props.isDraft) {
+    return <DraftMediaCard {...props} />
+  } else if (props.isPreview) {
+    return <PreviewMediaCard {...props} />
+  } else if (props.isMine) {
+    return <OwnMediaCard {...props} />
+  } else {
+    return <OtherMediaCard {...props} />
+  }
+}
+
+export default MediaCard

package/src/components/{LockedAttachment/components/Received → CustomMessage/LockedAttachment/components/Media}/CardActions.tsx

@@ -1,6 +1,8 @@
 import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'
 import React from 'react'
 
+import LoadingDots from '../_shared/LoadingDots'
+
 export interface ReceivedCardActionsProps {
   /** Whether the card is currently locked. Drives which CTA we render. */
   isLocked: boolean
@@ -19,7 +21,7 @@ export interface ReceivedCardActionsProps {
 }
 
 const buttonClass =
-  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70'
+  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]'
 
 /**
  * Renders the primary CTA below the body of a Received card.
@@ -42,10 +44,13 @@ const ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({
         type="button"
         onClick={onUnlockClicked}
         disabled={isUnlocking}
+        aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}
+        aria-busy={isUnlocking}
+        title={isUnlocking ? 'Unlocking' : 'Unlock'}
         className={buttonClass}
       >
         {isUnlocking ? (
-          <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+          <LoadingDots />
         ) : (
           <React.Fragment>
             <LockSimpleIcon className="size-4" weight="fill" />
@@ -62,6 +67,7 @@ const ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({
       return (
         <a
           href={href}
+          aria-label="Download"
           target="_blank"
           rel="noopener noreferrer"
           onClick={onDownloadClicked}
@@ -77,6 +83,7 @@ const ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({
       <button
         type="button"
         onClick={onDownloadClicked}
+        aria-label="Download"
         className={buttonClass}
       >
         <DownloadSimpleIcon className="size-4" weight="bold" />

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

@@ -0,0 +1,79 @@
+import type {
+  FetchSourceHandler,
+  LockedAttachmentGalleryItem,
+  PaymentStatus,
+} from '../../types'
+
+interface MediaCardBaseProps {
+  /** Attachment title. */
+  title?: string
+  /** Fallback shown when `title` is unset. */
+  placeholderTitle?: string
+  /** Drives icon/thumbnail rendering. */
+  mimeType?: string
+  /** Poster image, locked or unlocked. */
+  thumbnailUrl?: string
+  /** Secondary description text. */
+  detail?: string
+  /** Amount label. */
+  amountText?: string
+  /** 2+ items renders as a carousel instead of a single thumbnail. */
+  gallery?: LockedAttachmentGalleryItem[]
+}
+
+export interface MediaCardDraftProps extends MediaCardBaseProps {
+  /** True while composing — shows the real (unredacted) thumbnail. */
+  isDraft: true
+  isPreview?: false
+  /** Fallback amount before a price is set. */
+  placeholderAmountText?: string
+  /** Lazily fetches the source on first tap; cached and reused after. */
+  onFetchSource?: FetchSourceHandler
+  /** Fired on first tap to preview. */
+  onPreviewClick?: () => void
+  /** Removes the draft attachment. */
+  onDismiss?: () => void
+  /** Renders a pencil button to edit the attachment metadata. */
+  onEditClick?: () => void
+}
+
+export interface MediaCardPreviewProps extends MediaCardBaseProps {
+  /** True to render exactly as the recipient will see it before purchase — always locked/blurred. */
+  isDraft?: false
+  isPreview: true
+  /** Fallback amount before a price is set. */
+  placeholderAmountText?: string
+}
+
+interface MediaCardSentBaseProps extends MediaCardBaseProps {
+  /** False once sent. */
+  isDraft?: false
+  isPreview?: false
+  /** Drives the lock/skeleton/badge state. */
+  paymentStatus?: PaymentStatus
+  onFetchSource?: FetchSourceHandler
+}
+
+export type MediaCardOwnProps = MediaCardSentBaseProps & {
+  /** Sender's own view. */
+  isMine: true
+  /** Fired on first tap to preview own attachment. */
+  onPreviewClick?: () => void
+}
+
+export type MediaCardOtherProps = MediaCardSentBaseProps & {
+  /** Recipient's view. */
+  isMine: false
+  /** Opens checkout on click. Omit to hide the button. */
+  onUnlockClick?: () => void
+  /** Omit to hide the Download button. */
+  onDownloadClick?: () => void
+  /** Spinner on Unlock while checkout runs. */
+  isUnlocking?: boolean
+}
+
+export type MediaCardProps =
+  | MediaCardDraftProps
+  | MediaCardPreviewProps
+  | MediaCardOwnProps
+  | MediaCardOtherProps