@linktr.ee/messaging-react 1.40.2 → 2.0.1-rc-1778656305

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

@@ -0,0 +1,191 @@
+import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import { getSourceType } from '../../../AttachmentCard'
+import type {
+  LockedAttachmentBaseProps,
+  LockedAttachmentSource,
+} from '../../types'
+import CardBody from '../_shared/CardBody'
+import GalleryThumbnail from '../_shared/GalleryThumbnail'
+import LockedCardShell from '../_shared/LockedCardShell'
+import LockedThumbnail from '../_shared/LockedThumbnail'
+
+import ReceivedCardActions from './CardActions'
+
+export interface ReceivedCardProps extends LockedAttachmentBaseProps {
+  /**
+   * 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 to fetch the attachment source — fired automatically when
+   * `paymentStatus` transitions to `'paid'`, or immediately on click when
+   * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
+   * to unlock the card.
+   */
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+  /**
+   * Called when the recipient clicks Download on an unlocked card.
+   * Omit to hide the Download button.
+   */
+  onDownloadClick?: () => void
+  /**
+   * When true, shows a loading spinner on the Unlock button.
+   * Driven by the LockedAttachmentContext (e.g. checkout in progress).
+   */
+  isUnlocking?: boolean
+}
+
+/**
+ * The card the recipient sees in chat for a paid attachment.
+ * Matches the Received column of the messaging design system in Figma:
+ * locked → blurred thumbnail + Unlock CTA, unlocked → clear image + Download CTA.
+ */
+const ReceivedCard: React.FC<ReceivedCardProps> = ({
+  title,
+  amountText,
+  thumbnailUrl,
+  mimeType = 'application/octet-stream',
+  detail,
+  gallery,
+  onUnlockClick,
+  onFetchSource,
+  onDownloadClick,
+  paymentStatus,
+  isUnlocking = false,
+}) => {
+  const isGallery = (gallery?.length ?? 0) >= 2
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+
+  const cardRef = useRef<HTMLDivElement>(null)
+  const fetchingRef = useRef(false)
+
+  const onFetchSourceRef = useRef(onFetchSource)
+  onFetchSourceRef.current = onFetchSource
+
+  const effectiveSourceUrl = source?.sourceUrl
+  const effectiveRedeemUrl = source?.redeemUrl
+
+  const fetchSource = useCallback(async (): Promise<void> => {
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    try {
+      const result = await onFetchSourceRef.current?.()
+      if (result) setSource(result)
+    } finally {
+      fetchingRef.current = false
+    }
+  }, [])
+
+  const handleUnlockClick = useCallback(() => {
+    if (paymentStatus === 'paid') {
+      void fetchSource()
+    } else {
+      onUnlockClick?.()
+    }
+  }, [paymentStatus, fetchSource, onUnlockClick])
+
+  // Auto-fetch the source once the paid card scrolls into view.
+  useEffect(() => {
+    if (!cardRef.current) return
+    if (paymentStatus !== 'paid' || source !== undefined) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          void fetchSource()
+          observer.disconnect()
+        }
+      },
+      { threshold: 1.0 }
+    )
+
+    observer.observe(cardRef.current)
+    return () => observer.disconnect()
+  }, [paymentStatus, source, fetchSource])
+
+  // 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)
+
+  const statusBadge =
+    paymentStatus === 'paid' ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-black/55">&bull;</span>
+        <span className="text-xs font-medium text-[#008236]">Purchased</span>
+        <CheckCircleIcon className="size-4 text-[#008236]" weight="bold" />
+      </React.Fragment>
+    ) : amountText != null ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-black/55">&bull;</span>
+        <span className="text-xs font-medium text-black/55">{amountText}</span>
+      </React.Fragment>
+    ) : null
+
+  // 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 (
+    <LockedCardShell
+      variant="light"
+      rootRef={cardRef}
+      data-testid="locked-attachment"
+    >
+      {isGallery ? (
+        <GalleryThumbnail
+          variant="light"
+          gallery={gallery!}
+          title={title}
+          showLocked={isLocked}
+          paymentStatus={paymentStatus}
+        />
+      ) : (
+        <LockedThumbnail
+          variant="light"
+          mimeType={mimeType}
+          thumbnailUrl={thumbnailUrl}
+          title={title}
+          source={source}
+          showLocked={isLocked}
+          paymentStatus={paymentStatus}
+          containedImage={
+            !isLocked && (sourceType === 'image' || sourceType === 'document')
+          }
+        />
+      )}
+
+      <CardBody
+        variant="light"
+        title={title}
+        mimeType={mimeType}
+        detail={detail}
+        statusBadge={statusBadge}
+        icon={
+          isGallery ? (
+            <ImagesIcon className="size-5 shrink-0 text-black/55" />
+          ) : undefined
+        }
+        action={
+          <ReceivedCardActions
+            isLocked={isLocked}
+            isUnlocking={isUnlocking}
+            sourceUrl={actionSourceUrl}
+            redeemUrl={effectiveRedeemUrl}
+            onUnlockClicked={handleUnlockClick}
+            onDownloadClicked={onDownloadClick}
+          />
+        }
+      />
+    </LockedCardShell>
+  )
+}
+
+export default ReceivedCard

package/src/components/LockedAttachment/components/Received/CardActions.tsx

@@ -0,0 +1,91 @@
+import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'
+import React from 'react'
+
+export interface ReceivedCardActionsProps {
+  /** Whether the card is currently locked. Drives which CTA we render. */
+  isLocked: boolean
+  /**
+   * When unlocked, the URL used as the Download link's `href` (opens in a new
+   * tab). When omitted, the Download CTA falls back to a plain `<button>`
+   * that just calls `onDownloadClicked` — useful for galleries where the
+   * single-source URL doesn't exist.
+   */
+  sourceUrl?: string
+  /** Optional alternate href that takes precedence over `sourceUrl`. */
+  redeemUrl?: string
+  onUnlockClicked?: () => void
+  onDownloadClicked?: () => void
+  isUnlocking?: boolean
+}
+
+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'
+
+/**
+ * Renders the primary CTA below the body of a Received card.
+ * - Locked + onUnlockClicked → "Unlock" button
+ * - Unlocked + onDownloadClicked + (redeemUrl || sourceUrl) → "Download" link
+ * - Unlocked + onDownloadClicked + no URL → "Download" button (e.g. gallery)
+ * Otherwise renders nothing.
+ */
+const ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({
+  isLocked,
+  sourceUrl,
+  redeemUrl,
+  onUnlockClicked,
+  onDownloadClicked,
+  isUnlocking = false,
+}) => {
+  if (isLocked && onUnlockClicked != null) {
+    return (
+      <button
+        type="button"
+        onClick={onUnlockClicked}
+        disabled={isUnlocking}
+        className={buttonClass}
+      >
+        {isUnlocking ? (
+          <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+        ) : (
+          <React.Fragment>
+            <LockSimpleIcon className="size-4" weight="fill" />
+            Unlock
+          </React.Fragment>
+        )}
+      </button>
+    )
+  }
+
+  if (!isLocked && onDownloadClicked != null) {
+    const href = redeemUrl ?? sourceUrl
+    if (href != null) {
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={onDownloadClicked}
+          className={`${buttonClass} !text-white`}
+        >
+          <DownloadSimpleIcon className="size-4" weight="bold" />
+          Download
+        </a>
+      )
+    }
+
+    return (
+      <button
+        type="button"
+        onClick={onDownloadClicked}
+        className={buttonClass}
+      >
+        <DownloadSimpleIcon className="size-4" weight="bold" />
+        Download
+      </button>
+    )
+  }
+
+  return null
+}
+
+export default ReceivedCardActions

package/src/components/LockedAttachment/components/Received/index.ts

@@ -0,0 +1,2 @@
+export { default as ReceivedCard } from './Card'
+export type { ReceivedCardProps } from './Card'

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

@@ -0,0 +1,177 @@
+import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'
+import React, { useCallback, useRef, useState } from 'react'
+
+import type {
+  LockedAttachmentBaseProps,
+  LockedAttachmentSource,
+} from '../../types'
+import CardBody from '../_shared/CardBody'
+import GalleryThumbnail from '../_shared/GalleryThumbnail'
+import LockedCardShell from '../_shared/LockedCardShell'
+import LockedThumbnail from '../_shared/LockedThumbnail'
+
+export interface SentCardProps extends LockedAttachmentBaseProps {
+  /** Placeholder shown in the title slot when no title is set. */
+  placeholderTitle?: string
+  /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
+  onPreviewClick?: () => void
+  /**
+   * Lazily loads the underlying source so the sender can preview the attachment.
+   * Called the first time the thumbnail is tapped; the returned source is cached
+   * and reused on subsequent toggles.
+   */
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+}
+
+/**
+ * The card the sender sees in chat after a paid attachment has been posted.
+ * Matches the Sent column of the messaging design system in Figma.
+ */
+const SentCard: React.FC<SentCardProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle = 'Attachment title',
+  paymentStatus,
+  gallery,
+  onPreviewClick,
+  onFetchSource,
+}) => {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
+  const fetchingRef = useRef(false)
+
+  const isGallery = (gallery?.length ?? 0) >= 2
+
+  const handleToggle = useCallback(async () => {
+    onPreviewClick?.()
+    if (isPreviewVisible) {
+      setIsPreviewVisible(false)
+      return
+    }
+    // Gallery items carry their own per-item sources on the `gallery` prop, so
+    // we just flip visibility — no async source fetch is needed.
+    if (isGallery) {
+      setIsPreviewVisible(true)
+      return
+    }
+    if (source) {
+      setIsPreviewVisible(true)
+      return
+    }
+    if (!onFetchSource) return
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    setIsLoadingPreview(true)
+    try {
+      const result = await onFetchSource()
+      if (result) {
+        setSource(result)
+        setIsPreviewVisible(true)
+      }
+    } finally {
+      fetchingRef.current = false
+      setIsLoadingPreview(false)
+    }
+  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])
+
+  // Gallery is always previewable for the sender because each item's source
+  // is already provided up-front via `gallery[*].sourceUrl`.
+  const togglePreview =
+    isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined
+  const showLocked = !isPreviewVisible
+  const isBusy = isLoadingPreview
+
+  const statusBadge =
+    paymentStatus === 'paid' ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-white/55">&bull;</span>
+        <span className="text-xs font-medium text-[#34c759]">Sold</span>
+        <CheckCircleIcon className="size-4 text-[#34c759]" weight="bold" />
+      </React.Fragment>
+    ) : amountText ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-white/55">&bull;</span>
+        <span className="text-xs font-medium text-white/55">{amountText}</span>
+      </React.Fragment>
+    ) : null
+
+  const thumbnail = isGallery ? (
+    <GalleryThumbnail
+      variant="dark"
+      gallery={gallery!}
+      title={title}
+      showLocked={showLocked}
+      paymentStatus={paymentStatus}
+    />
+  ) : (
+    <LockedThumbnail
+      variant="dark"
+      mimeType={mimeType}
+      thumbnailUrl={thumbnailUrl}
+      title={title}
+      source={source}
+      showLocked={showLocked}
+      paymentStatus={paymentStatus}
+    />
+  )
+
+  return (
+    <LockedCardShell variant="dark">
+      {togglePreview ? (
+        // Uses a `<div role="button">` rather than a native `<button>` so the
+        // gallery's carousel arrow `<button>`s rendered inside `thumbnail`
+        // don't produce invalid nested interactive elements.
+        <div
+          role="button"
+          tabIndex={isBusy ? -1 : 0}
+          aria-label="Toggle preview"
+          aria-busy={isBusy}
+          aria-pressed={!showLocked}
+          aria-disabled={isBusy || undefined}
+          onClick={isBusy ? undefined : togglePreview}
+          onKeyDown={(e) => {
+            if (isBusy) return
+            // Only handle keys that originate on the wrapper itself, not on
+            // inner interactive elements (gallery 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 togglePreview()
+            }
+          }}
+          className={
+            !isBusy
+              ? 'block w-full cursor-pointer text-left'
+              : 'block w-full text-left'
+          }
+        >
+          {thumbnail}
+        </div>
+      ) : (
+        thumbnail
+      )}
+
+      <CardBody
+        variant="dark"
+        title={title}
+        placeholderTitle={placeholderTitle}
+        mimeType={mimeType}
+        detail={detail}
+        statusBadge={statusBadge}
+        icon={
+          isGallery ? (
+            <ImagesIcon className="size-5 shrink-0 text-white/55" />
+          ) : undefined
+        }
+      />
+    </LockedCardShell>
+  )
+}
+
+export default SentCard

package/src/components/LockedAttachment/components/Sent/index.ts

@@ -0,0 +1,2 @@
+export { default as SentCard } from './Card'
+export type { SentCardProps } from './Card'

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

@@ -0,0 +1,94 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { renderTypeIcon } from '../../../AttachmentCard'
+
+import type { LockedCardVariant } from './LockedCardShell'
+
+export interface CardBodyProps {
+  variant: LockedCardVariant
+  title?: string
+  placeholderTitle?: string
+  mimeType: string
+  detail?: string
+  statusBadge?: React.ReactNode
+  action?: React.ReactNode
+  /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */
+  icon?: React.ReactNode
+  /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */
+  trailingAction?: React.ReactNode
+}
+
+/**
+ * Title + status row layout shared by Composer / Sent / Received cards.
+ * 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).
+ */
+const CardBody: React.FC<CardBodyProps> = ({
+  variant,
+  title,
+  placeholderTitle = 'Attachment title',
+  mimeType,
+  detail,
+  statusBadge,
+  action,
+  icon,
+  trailingAction,
+}) => {
+  const isDark = variant === 'dark'
+  const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')
+  const titleDimmed = isDark && !title
+
+  const typeIcon =
+    icon ??
+    renderTypeIcon(mimeType, {
+      className: classNames(
+        'size-5 shrink-0',
+        isDark ? 'text-white/55' : 'text-black/55'
+      ),
+      weight: 'regular',
+    })
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-end gap-3">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          {displayTitle.trim() !== '' && (
+            <p
+              className={classNames('truncate text-base font-medium leading-6', {
+                'text-black/90': !isDark,
+                'text-white/30': isDark && titleDimmed,
+                'text-white': isDark && !titleDimmed,
+              })}
+            >
+              {displayTitle}
+            </p>
+          )}
+
+          <div className="flex flex-wrap items-center gap-1">
+            {typeIcon}
+
+            {detail != null && detail !== '' && (
+              <span
+                className={classNames(
+                  'text-xs font-medium',
+                  isDark ? 'text-white/55' : 'text-black/55'
+                )}
+              >
+                {detail}
+              </span>
+            )}
+
+            {statusBadge}
+          </div>
+        </div>
+
+        {trailingAction && <div className="shrink-0">{trailingAction}</div>}
+      </div>
+
+      {action}
+    </div>
+  )
+}
+
+export default CardBody