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

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

@@ -0,0 +1,153 @@
+import { LockSimpleIcon, XIcon } from '@phosphor-icons/react'
+import type React from 'react'
+
+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'
+
+import type {
+  TextCardDraftProps,
+  TextCardOtherProps,
+  TextCardOwnProps,
+  TextCardPreviewProps,
+  TextCardProps,
+} from './types'
+
+export type { TextCardProps } from './types'
+
+const DraftTextCard: React.FC<TextCardDraftProps> = ({
+  renderedText,
+  amountText,
+  placeholderAmountText,
+  onDismiss,
+}) => (
+  <TextShell isMine className="pr-8">
+      {renderedText || <SkeletonTextLines variant="dark" />}
+    <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>
+)
+
+const PreviewTextCard: React.FC<TextCardPreviewProps> = ({
+  amountText,
+  placeholderAmountText,
+}) => (
+  <TextShell isMine={false}>
+    <SkeletonTextLines variant="light" />
+    <PriceLockRow>
+      <span className="opacity-55">{amountText || placeholderAmountText}</span>
+    </PriceLockRow>
+  </TextShell>
+)
+
+const OwnTextCard: React.FC<TextCardOwnProps> = ({
+  renderedText,
+  amountText,
+  paymentStatus = 'pending',
+}) => {
+  const isPaid = paymentStatus === 'paid'
+
+  return (
+    <TextShell isMine>
+      {isPaid && renderedText ? (
+        renderedText
+      ) : (
+        <SkeletonTextLines variant="dark" />
+      )}
+      <PriceLockRow>
+        {amountText && <span className="text-white/55">{amountText}</span>}
+        <PurchaseStatusBadge isMine paymentStatus={paymentStatus} />
+      </PriceLockRow>
+    </TextShell>
+  )
+}
+
+const OtherTextCard: React.FC<TextCardOtherProps> = ({
+  renderedText,
+  amountText,
+  paymentStatus,
+  onUnlockClick,
+  isUnlocking = false,
+}) => {
+  const isPaid = paymentStatus === 'paid'
+
+  if (isPaid && renderedText) {
+    return (
+      <TextShell isMine={false}>
+        {renderedText}
+        <PriceLockRow>
+          {amountText != null && (
+            <span className="opacity-55">{amountText}</span>
+          )}
+          <PurchaseStatusBadge isMine={false} paymentStatus="paid" />
+        </PriceLockRow>
+      </TextShell>
+    )
+  }
+
+  const ariaLabel = isUnlocking
+    ? 'Unlocking message.'
+    : 'Unlock this message.'
+
+  return (
+    <TextShell isMine={false}>
+      <div className="flex items-center gap-3">
+        <div className="flex flex-1 flex-col gap-2">
+          <SkeletonTextLines variant="light" />
+          <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 message' : 'Unlock message'}
+          aria-busy={isUnlocking}
+          title={isUnlocking ? 'Unlocking message' : 'Unlock message'}
+          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>
+  )
+}
+
+const TextCard: React.FC<TextCardProps> = (props) => {
+  if (props.isDraft) {
+    return <DraftTextCard {...props} />
+  } else if (props.isPreview) {
+    return <PreviewTextCard {...props} />
+  } else if (props.isMine) {
+    return <OwnTextCard {...props} />
+  } else {
+    return <OtherTextCard {...props} />
+  }
+}
+
+export default TextCard

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

@@ -0,0 +1,58 @@
+import type React from 'react'
+
+import type { PaymentStatus } from '../../types'
+
+interface TextCardBaseProps {
+  /** Amount label. */
+  amountText?: string
+}
+
+export interface TextCardDraftProps extends TextCardBaseProps {
+  /** True while composing — shows the real draft text. */
+  isDraft: true
+  isPreview?: false
+  /** Real draft content, not yet redacted. */
+  renderedText?: React.ReactNode
+  /** Fallback amount before a price is set. */
+  placeholderAmountText?: string
+  /** Removes the draft attachment. */
+  onDismiss?: () => void
+}
+
+export interface TextCardPreviewProps extends TextCardBaseProps {
+  /** True to render exactly as the recipient will see it before purchase — skeleton lines only. */
+  isDraft?: false
+  isPreview: true
+  /** Fallback amount before a price is set. */
+  placeholderAmountText?: string
+}
+
+interface TextCardSentBaseProps extends TextCardBaseProps {
+  /** False once sent. */
+  isDraft?: false
+  isPreview?: false
+  /** Revealed content once paid. */
+  renderedText?: React.ReactNode
+  /** Drives the lock/skeleton/badge state. */
+  paymentStatus?: PaymentStatus
+}
+
+export type TextCardOwnProps = TextCardSentBaseProps & {
+  /** Sender's own view. */
+  isMine: true
+}
+
+export type TextCardOtherProps = TextCardSentBaseProps & {
+  /** Recipient's view. */
+  isMine: false
+  /** Spinner on Unlock while checkout runs. */
+  isUnlocking?: boolean
+  /** Opens checkout on click. Omit to hide the button. */
+  onUnlockClick?: () => void
+}
+
+export type TextCardProps =
+  | TextCardDraftProps
+  | TextCardPreviewProps
+  | TextCardOwnProps
+  | TextCardOtherProps

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/CardBody.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import { renderTypeIcon } from '../../../AttachmentCard'
+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).
  */
@@ -36,8 +36,8 @@ const CardBody: React.FC<CardBodyProps> = ({
   trailingAction,
 }) => {
   const isDark = variant === 'dark'
-  const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')
-  const titleDimmed = isDark && !title
+  const displayTitle = title || placeholderTitle
+  const titleDimmed = !title
 
   const typeIcon =
     icon ??
@@ -56,7 +56,8 @@ const CardBody: React.FC<CardBodyProps> = ({
           {displayTitle.trim() !== '' && (
             <p
               className={classNames('truncate text-base font-medium leading-6', {
-                'text-black/90': !isDark,
+                'text-black/90': !isDark && !titleDimmed,
+                'text-black/30': !isDark && titleDimmed,
                 'text-white/30': isDark && titleDimmed,
                 'text-white': isDark && !titleDimmed,
               })}

package/src/components/CustomMessage/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 → CustomMessage/LockedAttachment}/components/_shared/GalleryThumbnail.tsx

@@ -1,23 +1,18 @@
-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'
 
-import { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'
+import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
 import type {
   LockedAttachmentGalleryItem,
   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 PreviewMediaCard / OwnMediaCard.
   const goPrev = (e: React.MouseEvent) => {
     e.stopPropagation()
     setIndex((i) => Math.max(0, i - 1))
@@ -86,14 +65,22 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   // Locked + unlocked render entirely separate trees so the locked state
   // doesn't end up stacking a blurred `<img>` on top of an underlying
   // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
-  // shows through as a visible horizontal seam at the 16:9 boundary
-  // inside the taller 337/386 gallery aspect).
+  // shows through as a visible horizontal seam).
+  //
+  // The locked placeholder is absolutely positioned, so it needs the fixed
+  // 337/386 box for height; unlocked content (video, natural-sized image)
+  // manages its own height and can expand/shrink per item.
   //
   // 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">
+    <div
+      className={classNames(
+        'group relative overflow-hidden rounded-t-md',
+        showLocked ? 'aspect-[337/386]' : undefined
+      )}
+    >
       {showLocked ? (
         <div
           className={classNames(
@@ -115,20 +102,25 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
         </div>
       ) : (
         <AttachmentThumbnail
+          key={safeIndex}
           mimeType={current.mimeType}
           sourceUrl={current.sourceUrl}
           thumbnailUrl={current.thumbnailUrl}
           title={title}
           variant={variant}
+          mediaPlayerProps={{ autoPlay: true }}
         />
       )}
 
-      {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>
+      {/* LOCK while locked. Once unlocked, video/audio autoplays via
+          `mediaPlayerProps` and MediaPlayer already has its own inline
+          controls, so no separate Play affordance is shown. */}
+      {showLocked && (
+        <LockBadge
+          paymentStatus={paymentStatus}
+          isPlayable={isVideoItem}
+          isLocked={showLocked}
+        />
       )}
 
       {total > 1 && (
@@ -158,8 +150,8 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
             <CaretRightIcon className="size-5" weight="bold" />
           </button>
 
-          <div className="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1">
-            <span className="text-xs font-medium leading-4 text-white">
+          <div className="pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30">
+            <span className="text-xs font-medium leading-none text-white">
               {safeIndex + 1}/{total}
             </span>
           </div>

package/src/components/CustomMessage/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/CustomMessage/LockedAttachment/components/_shared/LockBadge.tsx

@@ -0,0 +1,63 @@
+import { LockOpenIcon, LockSimpleIcon, PlayIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+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
+  /** Whether the item is still locked. Play only ever shows once unlocked —
+   * a locked item always shows the lock, even for otherwise-playable media. */
+  isLocked: boolean
+}
+
+/**
+ * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
+ * Uses `bg-black/30`. Stays `pointer-events-none` so clicks pass through to
+ * the underlying player/toggle; the play state highlights via `group-hover`
+ * (same `bg-black/40` as the gallery's prev/next arrows) — the ancestor
+ * providing `group` must wrap the actual clickable/hoverable player area.
+ *
+ * For playable media (video/audio) that's unlocked, the badge shows a play
+ * icon instead of a lock — matching the convention used by `GalleryThumbnail`.
+ */
+export const LockBadge: React.FC<LockBadgeProps> = ({
+  paymentStatus,
+  mimeType,
+  isPlayable,
+  isLocked,
+}) => {
+  const sourceType = mimeType ? getSourceType(mimeType) : undefined
+  const resolvedIsPlayable =
+    isPlayable ?? (sourceType === 'video' || sourceType === 'audio')
+
+  const Icon =
+    resolvedIsPlayable && !isLocked
+      ? PlayIcon
+      : paymentStatus === 'paid'
+        ? LockOpenIcon
+        : LockSimpleIcon
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div
+        className={classNames(
+          'flex size-12 items-center justify-center rounded-full bg-black/30 text-white',
+          Icon === PlayIcon && 'group-hover:bg-black/40'
+        )}
+      >
+        <Icon className="size-6" weight="fill" />
+      </div>
+    </div>
+  )
+}
+
+export default LockBadge

package/src/components/{LockedAttachment/components/_shared/LockedCardShell.tsx → CustomMessage/LockedAttachment/components/_shared/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
@@ -12,9 +12,9 @@ export interface LockedCardShellProps {
 
 /**
  * Outer chrome for every LockedAttachment card.
- * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.
+ * Mirrors the 16px radius treatment from the Figma design system.
  */
-const LockedCardShell: React.FC<LockedCardShellProps> = ({
+const MediaShell: React.FC<MediaShellProps> = ({
   variant,
   children,
   rootRef,
@@ -25,12 +25,12 @@ const LockedCardShell: React.FC<LockedCardShellProps> = ({
     data-testid={dataTestId}
     className={classNames(
       'relative w-[280px] select-none overflow-hidden rounded-md',
-      '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)]',
-      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'
+      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white',
+      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]'
     )}
   >
     {children}
   </div>
 )
 
-export default LockedCardShell
+export default MediaShell

package/src/components/CustomMessage/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