@linktr.ee/messaging-react 3.10.0-rc-1783660962 → 3.10.0

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

@@ -1,358 +0,0 @@
-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/CustomMessage/LockedAttachment/components/Media/types.ts

@@ -1,79 +0,0 @@
-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

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

@@ -1,153 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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