@linktr.ee/messaging-react 3.9.0-rc-1783472582 → 3.9.0-rc-1783575293

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

@@ -1,201 +0,0 @@
-import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'
-import React from 'react'
-
-import type { FetchSourceHandler, LockedAttachmentBaseProps } 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 PriceLockRow from '../_shared/PriceLockRow'
-import SkeletonTextLines from '../_shared/SkeletonTextLines'
-import TextShell from '../_shared/TextShell'
-import { usePreviewToggle } from '../_shared/usePreviewToggle'
-
-export interface ComposerCardProps extends LockedAttachmentBaseProps {
-  /**
-   * 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
-  /**
-   * 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. */
-  onPreviewClick?: () => void
-  /**
-   * 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?: 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 /
-   * gallery editor). Matches the Composer "Button" instance in Figma.
-   */
-  onEditClick?: () => void
-}
-
-/**
- * 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 isMine>
-    <div className="pr-8">
-      {text ? text : <SkeletonTextLines variant="dark" animate={false} />}
-    </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 ComposerMediaCard: React.FC<ComposerCardProps> = ({
-  title,
-  mimeType = 'application/octet-stream',
-  thumbnailUrl,
-  detail,
-  amountText,
-  placeholderTitle = 'Attachment title',
-  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>
-  )
-}
-
-/**
- * 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

@@ -1,235 +0,0 @@
-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 === '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

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

@@ -1,177 +0,0 @@
-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 isMine>
-        {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 isMine>
-      <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 isMine={false}>
-        {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 isMine={false}>
-      <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/TextShell.tsx

@@ -1,19 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-const TextShell: React.FC<
-  React.PropsWithChildren<{ isMine: boolean; className?: string }>
-> = ({ isMine, children, className }) => (
-  <div
-    className={classNames(
-      'str-chat__message-bubble message-locked-attachment-text',
-      'px-4 py-3 flex flex-col gap-1',
-      className
-    )}
-    style={{ backgroundColor: isMine ? '#1e2330' : '#f2f1ef' }}
-  >
-    {children}
-  </div>
-)
-
-export default TextShell

package/src/components/LockedAttachment/index.tsx

@@ -1,52 +0,0 @@
-import React, { Suspense } from 'react'
-
-import type { ComposerCardProps } from './components/Composer/Card'
-import type { MediaCardProps } from './components/Media/Card'
-import type { TextCardProps } from './components/Text/Card'
-
-const ComposerCardLazy = React.lazy(() => import('./components/Composer/Card'))
-const TextCardLazy = React.lazy(() => import('./components/Text/Card'))
-const MediaCardLazy = React.lazy(() => import('./components/Media/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 Text = (props: TextCardProps) => (
-  <Suspense fallback={<LockedAttachmentFallback />}>
-    <TextCardLazy {...props} />
-  </Suspense>
-)
-
-const Media = (props: MediaCardProps) => (
-  <Suspense fallback={<LockedAttachmentFallback />}>
-    <MediaCardLazy {...props} />
-  </Suspense>
-)
-
-const LockedAttachment = {
-  Composer,
-  Text,
-  Media,
-}
-
-export default LockedAttachment
-export { default as PurchaseStatusBadge } from './components/_shared/PurchaseStatusBadge'
-export type { PurchaseStatusBadgeProps } from './components/_shared/PurchaseStatusBadge'
-export type { ComposerCardProps, TextCardProps, MediaCardProps }
-export type {
-  PaymentStatus,
-  FetchSourceHandler,
-  LockedAttachmentSource,
-  LockedAttachmentGalleryItem,
-  LockedAttachmentContextValue,
-} from './types'