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

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

@@ -0,0 +1,177 @@
+import { LockSimpleIcon } from '@phosphor-icons/react'
+import type React from 'react'
+
+import type { PaymentStatus } from '../../types'
+import LoadingDots from '../_shared/LoadingDots'
+import PriceLockRow from '../_shared/PriceLockRow'
+import PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'
+import SkeletonTextLines from '../_shared/SkeletonTextLines'
+import TextShell from '../_shared/TextShell'
+
+interface TextCardSharedProps {
+  amountText?: string
+  paymentStatus?: PaymentStatus
+  /**
+   * The message's real, revealed content — shown instead of the skeleton
+   * loader once `paymentStatus` is `'paid'`. Ignored otherwise. Lets the
+   * caller supply its own text renderer (e.g. Stream's `MessageText`)
+   * without `LockedAttachment` depending on it.
+   */
+  children?: React.ReactNode
+}
+
+export type TextCardProps =
+  | (TextCardSharedProps & {
+      isMine: true
+    })
+  | (TextCardSharedProps & {
+      isMine: false
+      /**
+       * 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
+      /**
+       * When true, shows a loading spinner on the Unlock button. Driven by
+       * the LockedAttachmentContext (e.g. checkout in progress).
+       */
+      isUnlocking?: boolean
+    })
+
+/**
+ * The sender's ('mine') view of a paid text-only message: an outgoing chat
+ * bubble showing a skeleton text loader in place of the redacted content (or
+ * `children`, once paid), plus a lock/price/status row.
+ */
+const OwnTextCard: React.FC<TextCardSharedProps & { isMine: true }> = ({
+  amountText,
+  paymentStatus = 'pending',
+  children,
+}) => {
+  const isFailed = paymentStatus === 'failed'
+  const isPaid = paymentStatus === 'paid'
+
+  if (isPaid && children) {
+    return (
+      <TextShell>
+        {children}
+        <span className="sr-only" aria-live="polite">
+          Sold.
+        </span>
+        <PriceLockRow>
+          {amountText != null && (
+            <span className="text-white/55">{amountText}</span>
+          )}
+          <PurchaseStatusBadge isMine={true} paymentStatus={paymentStatus} />
+        </PriceLockRow>
+      </TextShell>
+    )
+  }
+
+  const liveMessage = isFailed
+    ? 'Payment failed.'
+    : paymentStatus === 'refunded'
+      ? 'Refunded.'
+      : 'Payment pending.'
+
+  return (
+    <TextShell>
+      <SkeletonTextLines variant="dark" animate={paymentStatus === 'pending'} />
+      <span className="sr-only" aria-live="polite">
+        {liveMessage}
+      </span>
+      <PriceLockRow>
+        {amountText != null && (
+          <span className="text-white/55">{amountText}</span>
+        )}
+        <PurchaseStatusBadge isMine={true} paymentStatus={paymentStatus} />
+      </PriceLockRow>
+    </TextShell>
+  )
+}
+
+/**
+ * The recipient's ('other') view of a paid text-only message: a plain chat
+ * bubble whose content is a skeleton text loader (or `children`, once paid)
+ * plus a lock/price/status row. Two pre-purchase states exist — idle and
+ * unlocking (checkout in flight) — plus the revealed state once
+ * `paymentStatus` is `'paid'`.
+ */
+const OtherTextCard: React.FC<
+  TextCardSharedProps & {
+    isMine: false
+    onUnlockClick?: () => void
+    isUnlocking?: boolean
+  }
+> = ({
+  amountText,
+  paymentStatus,
+  onUnlockClick,
+  isUnlocking = false,
+  children,
+}) => {
+  const isPaid = paymentStatus === 'paid'
+
+  if (isPaid && children) {
+    return (
+      <TextShell>
+        {children}
+        <PriceLockRow>
+          {amountText != null && (
+            <span className="opacity-55">{amountText}</span>
+          )}
+          <PurchaseStatusBadge isMine={false} paymentStatus="paid" />
+        </PriceLockRow>
+      </TextShell>
+    )
+  }
+
+  const ariaLabel = isUnlocking
+    ? 'Unlocking.'
+    : 'Locked message available to unlock.'
+
+  return (
+    <TextShell>
+      <div className="flex items-center gap-3">
+        <div className="flex flex-1 flex-col gap-2">
+          <SkeletonTextLines variant="light" animate={isUnlocking} />
+          <span className="sr-only" aria-live="polite">
+            {ariaLabel}
+          </span>
+          <PriceLockRow>
+            {amountText != null && (
+              <span className="opacity-55">{amountText}</span>
+            )}
+          </PriceLockRow>
+        </div>
+        <button
+          type="button"
+          onClick={onUnlockClick}
+          disabled={isUnlocking}
+          aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}
+          aria-busy={isUnlocking}
+          title={isUnlocking ? 'Unlocking' : 'Unlock'}
+          className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]"
+        >
+          {isUnlocking ? (
+            <LoadingDots />
+          ) : (
+            <LockSimpleIcon className="size-4" weight="fill" aria-hidden />
+          )}
+        </button>
+      </div>
+    </TextShell>
+  )
+}
+
+/**
+ * The card either party sees for a paid text-only message — a chat bubble
+ * showing a skeleton text loader (or `children`, once revealed) plus a
+ * lock/price/status row. `isMine` selects the sender's payment-lifecycle view
+ * (pending/failed/refunded/paid + Dismiss) vs. the recipient's unlock-flow
+ * view (idle/unlocking + Unlock CTA).
+ */
+const TextCard: React.FC<TextCardProps> = (props) =>
+  props.isMine ? <OwnTextCard {...props} /> : <OtherTextCard {...props} />
+
+export default TextCard

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

@@ -3,10 +3,10 @@ import React from 'react'
 
 import { renderTypeIcon } from '../../../AttachmentCard'
 
-import type { LockedCardVariant } from './LockedCardShell'
+import type { CardVariant } from './MediaShell'
 
 export interface CardBodyProps {
-  variant: LockedCardVariant
+  variant: CardVariant
   title?: string
   placeholderTitle?: string
   mimeType: string
@@ -20,7 +20,7 @@ export interface CardBodyProps {
 }
 
 /**
- * Title + status row layout shared by Composer / Sent / Received cards.
+ * Title + status row layout shared by Composer and `LockedAttachment.Media`.
  * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,
  * 4px gap between title and status row, 4px gap inside status row).
  */

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

@@ -0,0 +1,92 @@
+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/LockedAttachment/components/_shared/GalleryThumbnail.tsx

@@ -1,10 +1,4 @@
-import {
-  CaretLeftIcon,
-  CaretRightIcon,
-  LockOpenIcon,
-  LockSimpleIcon,
-  PlayIcon,
-} from '@phosphor-icons/react'
+import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 
@@ -14,10 +8,11 @@ import type {
   PaymentStatus,
 } from '../../types'
 
-import type { LockedCardVariant } from './LockedCardShell'
+import { LockBadge } from './LockBadge'
+import type { CardVariant } from './MediaShell'
 
 export interface GalleryThumbnailProps {
-  variant: LockedCardVariant
+  variant: CardVariant
   gallery: LockedAttachmentGalleryItem[]
   title?: string
   /** When true, all items are shown blurred + the locked/play badge is overlaid. */
@@ -52,24 +47,8 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   const current = gallery[safeIndex]
   const isVideoItem = isPlayableItem(current)
 
-  // Center badge: PLAY for video items, LOCK for non-video locked items.
-  // Unlocked image items show no center badge — the image is the content.
-  const centerBadge = (() => {
-    if (isVideoItem) {
-      return <PlayIcon className="size-6" weight="fill" />
-    }
-    if (showLocked) {
-      return paymentStatus === 'paid' ? (
-        <LockOpenIcon className="size-6" weight="fill" />
-      ) : (
-        <LockSimpleIcon className="size-6" weight="fill" />
-      )
-    }
-    return null
-  })()
-
   // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
-  // wrapper on ComposerCard / SentCard.
+  // wrapper on ComposerCard / OwnMediaCard.
   const goPrev = (e: React.MouseEvent) => {
     e.stopPropagation()
     setIndex((i) => Math.max(0, i - 1))
@@ -91,7 +70,7 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   //
   // The locked branch uses `filter: blur` on a single full-size `<img>`
   // — not `backdrop-filter` — so the rounded corners are clipped
-  // normally without any clip-path workarounds (see LockedThumbnail).
+  // normally without any clip-path workarounds (see SingleThumbnail).
   return (
     <div className="relative aspect-[337/386] overflow-hidden rounded-t-md">
       {showLocked ? (
@@ -123,12 +102,11 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
         />
       )}
 
-      {centerBadge && (
-        <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">
-            {centerBadge}
-          </div>
-        </div>
+      {/* PLAY for video items (locked or not — video needs a play affordance
+          either way); LOCK for non-video locked items. Unlocked non-video
+          items show no badge — the image is the content. */}
+      {(isVideoItem || showLocked) && (
+        <LockBadge paymentStatus={paymentStatus} isPlayable={isVideoItem} />
       )}
 
       {total > 1 && (

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

@@ -0,0 +1,36 @@
+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/LockedAttachment/components/_shared/LockBadge.tsx

@@ -1,13 +1,21 @@
-import {
-  LockOpenIcon,
-  LockSimpleIcon,
-  PlayIcon,
-} from '@phosphor-icons/react'
+import { LockOpenIcon, LockSimpleIcon, PlayIcon } from '@phosphor-icons/react'
 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
+}
+
 /**
  * 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.
@@ -15,14 +23,16 @@ import type { PaymentStatus } from '../../types'
  * 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 }) => {
+export const LockBadge: React.FC<LockBadgeProps> = ({
+  paymentStatus,
+  mimeType,
+  isPlayable,
+}) => {
   const sourceType = mimeType ? getSourceType(mimeType) : undefined
-  const isPlayable = sourceType === 'video' || sourceType === 'audio'
+  const resolvedIsPlayable =
+    isPlayable ?? (sourceType === 'video' || sourceType === 'audio')
 
-  const Icon = isPlayable
+  const Icon = resolvedIsPlayable
     ? PlayIcon
     : paymentStatus === 'paid'
       ? LockOpenIcon

package/src/components/LockedAttachment/components/_shared/{LockedCardShell.tsx → MediaShell.tsx}

@@ -1,10 +1,10 @@
 import classNames from 'classnames'
 import React from 'react'
 
-export type LockedCardVariant = 'dark' | 'light'
+export type CardVariant = 'dark' | 'light'
 
-export interface LockedCardShellProps {
-  variant: LockedCardVariant
+export interface MediaShellProps {
+  variant: CardVariant
   children: React.ReactNode
   rootRef?: React.Ref<HTMLDivElement>
   'data-testid'?: string
@@ -14,7 +14,7 @@ export interface LockedCardShellProps {
  * Outer chrome for every LockedAttachment card.
  * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.
  */
-const LockedCardShell: React.FC<LockedCardShellProps> = ({
+const MediaShell: React.FC<MediaShellProps> = ({
   variant,
   children,
   rootRef,
@@ -33,4 +33,4 @@ const LockedCardShell: React.FC<LockedCardShellProps> = ({
   </div>
 )
 
-export default LockedCardShell
+export default MediaShell

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

@@ -0,0 +1,58 @@
+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/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/LockedAttachment/components/_shared/PurchaseStatusBadge.tsx

@@ -0,0 +1,87 @@
+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 === 'pending') {
+    return (
+      <React.Fragment>
+        <span className={classNames('text-xs font-medium', labelColour)}>
+          &bull;
+        </span>
+        <span className={classNames('text-xs font-medium', labelColour)}>
+          Sent
+        </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 → SingleThumbnail.tsx}

@@ -8,10 +8,10 @@ import {
 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,
@@ -125,4 +125,4 @@ const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
   )
 }
 
-export default LockedThumbnail
+export default SingleThumbnail