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

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

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

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

@@ -1,191 +0,0 @@
-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/index.ts

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

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

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

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