{"version":3,"file":"Card-BIbqWagz.cjs","names":[],"sources":["../src/components/CustomMessage/LockedAttachment/components/_shared/CardBody.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/LockBadge.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/GalleryThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/MediaShell.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/PreviewToggle.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.ts","../src/components/CustomMessage/LockedAttachment/components/_shared/useReceivedSource.ts","../src/components/CustomMessage/LockedAttachment/components/Media/CardActions.tsx","../src/components/CustomMessage/LockedAttachment/components/Media/Card.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../../../AttachmentCard'\n\nimport type { CardVariant } from './MediaShell'\n\nexport interface CardBodyProps {\n variant: CardVariant\n title?: string\n placeholderTitle?: string\n mimeType: string\n detail?: string\n statusBadge?: React.ReactNode\n action?: React.ReactNode\n /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */\n icon?: React.ReactNode\n /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */\n trailingAction?: React.ReactNode\n}\n\n/**\n * Title + status row layout shared by Composer and `LockedAttachment.Media`.\n * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,\n * 4px gap between title and status row, 4px gap inside status row).\n */\nconst CardBody: React.FC = ({\n variant,\n title,\n placeholderTitle = 'Attachment title',\n mimeType,\n detail,\n statusBadge,\n action,\n icon,\n trailingAction,\n}) => {\n const isDark = variant === 'dark'\n const displayTitle = title || placeholderTitle\n const titleDimmed = !title\n\n const typeIcon =\n icon ??\n renderTypeIcon(mimeType, {\n className: classNames(\n 'size-5 shrink-0',\n isDark ? 'text-white/55' : 'text-black/55'\n ),\n weight: 'regular',\n })\n\n return (\n
\n
\n
\n {displayTitle.trim() !== '' && (\n \n {displayTitle}\n

\n )}\n\n
\n {typeIcon}\n\n {detail != null && detail !== '' && (\n \n {detail}\n \n )}\n\n {statusBadge}\n
\n
\n\n {trailingAction &&
{trailingAction}
}\n
\n\n {action}\n
\n )\n}\n\nexport default CardBody\n","import { LockOpenIcon, LockSimpleIcon, PlayIcon } from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React from 'react'\n\nimport { getSourceType } from '../../../../AttachmentCard'\nimport type { PaymentStatus } from '../../types'\n\nexport interface LockBadgeProps {\n paymentStatus?: PaymentStatus\n mimeType?: string\n /**\n * Overrides the `mimeType`-derived playable check. Lets a caller that\n * already knows per-item playability (e.g. `GalleryThumbnail`, checking a\n * carousel item's own mimeType rather than the card's single `mimeType`)\n * skip re-deriving it.\n */\n isPlayable?: boolean\n /** Whether the item is still locked. Play only ever shows once unlocked —\n * a locked item always shows the lock, even for otherwise-playable media. */\n isLocked: boolean\n}\n\n/**\n * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.\n * Uses `bg-black/30`. Stays `pointer-events-none` so clicks pass through to\n * the underlying player/toggle; the play state highlights via `group-hover`\n * (same `bg-black/40` as the gallery's prev/next arrows) — the ancestor\n * providing `group` must wrap the actual clickable/hoverable player area.\n *\n * For playable media (video/audio) that's unlocked, the badge shows a play\n * icon instead of a lock — matching the convention used by `GalleryThumbnail`.\n */\nexport const LockBadge: React.FC = ({\n paymentStatus,\n mimeType,\n isPlayable,\n isLocked,\n}) => {\n const sourceType = mimeType ? getSourceType(mimeType) : undefined\n const resolvedIsPlayable =\n isPlayable ?? (sourceType === 'video' || sourceType === 'audio')\n\n const Icon =\n resolvedIsPlayable && !isLocked\n ? PlayIcon\n : paymentStatus === 'paid'\n ? LockOpenIcon\n : LockSimpleIcon\n return (\n
\n \n \n
\n \n )\n}\n","import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useState } from 'react'\n\nimport { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'\nimport { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'\nimport type { LockedAttachmentGalleryItem, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { CardVariant } from './MediaShell'\n\nexport interface GalleryThumbnailProps {\n variant: CardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n /** When true, all items are shown blurred + the locked/play badge is overlaid. */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\nfunction isPlayableItem(item: LockedAttachmentGalleryItem): boolean {\n const sourceType = getSourceType(item.mimeType)\n return sourceType === 'video' || sourceType === 'audio'\n}\n\n/**\n * Mixed-media carousel used by every LockedAttachment card when its `gallery`\n * prop has 2+ items. Matches the \"Gallery\" frames in the Figma design system:\n * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center\n * lock / play indicator that swaps based on the current item.\n */\nconst GalleryThumbnail: React.FC = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n topRight,\n}) => {\n const [index, setIndex] = useState(0)\n const total = gallery.length\n const safeIndex = Math.min(index, total - 1)\n const current = gallery[safeIndex]\n const isVideoItem = isPlayableItem(current)\n const optimizedCurrentThumbnailUrl = optimizeMessagingAttachmentUrl(\n current.thumbnailUrl\n )\n\n // Stop propagation so arrow taps don't bubble up to the outer preview-toggle\n // wrapper on PreviewMediaCard / OwnMediaCard.\n const goPrev = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.max(0, i - 1))\n }\n const goNext = (e: React.MouseEvent) => {\n e.stopPropagation()\n setIndex((i) => Math.min(total - 1, i + 1))\n }\n const atStart = safeIndex === 0\n const atEnd = safeIndex === total - 1\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam).\n //\n // The locked placeholder is absolutely positioned, so it needs the fixed\n // 337/386 box for height; unlocked content (video, natural-sized image)\n // manages its own height and can expand/shrink per item.\n //\n // The locked branch uses `filter: blur` on a single full-size ``\n // — not `backdrop-filter` — so the rounded corners are clipped\n // normally without any clip-path workarounds (see SingleThumbnail).\n return (\n \n {showLocked ? (\n \n {current.thumbnailUrl && (\n \n )}\n \n ) : (\n \n )}\n\n {/* LOCK while locked. Once unlocked, video/audio autoplays via\n `mediaPlayerProps` and MediaPlayer already has its own inline\n controls, so no separate Play affordance is shown. */}\n {showLocked && (\n \n )}\n\n {total > 1 && (\n \n \n \n \n \n \n \n\n
\n \n {safeIndex + 1}/{total}\n \n
\n \n )}\n\n {topRight && (\n
\n {topRight}\n
\n )}\n \n )\n}\n\nexport default GalleryThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nimport { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'\nimport { AttachmentThumbnail, renderTypeIcon } from '../../../../AttachmentCard'\nimport type { LockedAttachmentSource, PaymentStatus } from '../../types'\n\nimport { LockBadge } from './LockBadge'\nimport type { CardVariant } from './MediaShell'\n\nexport interface SingleThumbnailProps {\n variant: CardVariant\n mimeType: string\n thumbnailUrl?: string\n title?: string\n /**\n * When provided, the underlying source is shown unblurred (preview / unlocked state).\n * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.\n */\n source?: LockedAttachmentSource\n /**\n * Forces the locked appearance even when a source is provided. Used for the\n * Composer card where the locked treatment is the default and the user toggles\n * a preview in place.\n */\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n /** When true, renders the unlocked image with aspect-video + object-contain. */\n containedImage?: boolean\n}\n\n/**\n * Renders the 180px-tall media area for a LockedAttachment card.\n * Handles three visual states:\n * - locked: blurred thumbnail + centered 48px lock badge\n * - preview/paid: clear thumbnail (the underlying source)\n * - empty: type-icon placeholder\n */\nconst SingleThumbnail: React.FC = ({\n variant,\n mimeType,\n thumbnailUrl,\n title,\n source,\n showLocked,\n paymentStatus,\n topRight,\n containedImage = false,\n}) => {\n const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl\n const effectiveThumbnailUrl = showLocked\n ? thumbnailUrl\n : (source?.thumbnailUrl ?? thumbnailUrl)\n const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(\n effectiveThumbnailUrl\n )\n\n const isDark = variant === 'dark'\n\n // Locked + unlocked render entirely separate trees so the locked state\n // doesn't end up stacking a blurred `` on top of an underlying\n // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise\n // shows through as a visible horizontal seam at the 16:9 boundary).\n //\n // The locked branch uses `filter: blur` on a single full-size ``\n // — not `backdrop-filter` — because `backdrop-filter` paints in its\n // own compositing layer that escapes ancestor `overflow: hidden` on\n // Chrome/Safari and flattens the card's top corners. `filter` is\n // clipped normally, so the rounded corners stay round without any\n // clip-path workarounds.\n return (\n
\n {showLocked ? (\n \n {effectiveThumbnailUrl ? (\n \n ) : (\n
\n {renderTypeIcon(mimeType, {\n className: isDark\n ? 'size-12 text-white/20'\n : 'size-12 text-black/20',\n weight: 'regular',\n })}\n
\n )}\n \n
\n ) : (\n \n )}\n\n {topRight && (\n
\n {topRight}\n
\n )}\n \n )\n}\n\nexport default SingleThumbnail\n","import { ImagesIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport type {\n LockedAttachmentGalleryItem,\n LockedAttachmentSource,\n PaymentStatus,\n} from '../../types'\n\nimport GalleryThumbnail from './GalleryThumbnail'\nimport type { CardVariant } from './MediaShell'\nimport SingleThumbnail from './SingleThumbnail'\n\nexport interface CardThumbnailProps {\n variant: CardVariant\n gallery: LockedAttachmentGalleryItem[]\n title?: string\n showLocked: boolean\n paymentStatus?: PaymentStatus\n /** Single-asset props — ignored when the card renders as a gallery. */\n mimeType: string\n thumbnailUrl?: string\n source?: LockedAttachmentSource\n containedImage?: boolean\n /** Top-right overlay (e.g. Composer dismiss X). Rendered inside the thumbnail. */\n topRight?: React.ReactNode\n}\n\n/** True when the card should render as a mixed-media carousel (2+ items). */\nexport const isGalleryCard = (\n gallery: LockedAttachmentGalleryItem[]\n): boolean => gallery.length >= 2\n\n/**\n * The body-row icon a card shows when it renders as a gallery — `CardBody`\n * otherwise auto-detects the icon from `mimeType`. Returned as a ready node so\n * every card shares the same size/tone treatment.\n */\nexport const galleryBodyIcon = (variant: CardVariant): React.ReactNode => (\n \n)\n\n/**\n * Owns the single-vs-gallery thumbnail decision shared by Composer /\n * `LockedAttachment.Media` cards: renders `GalleryThumbnail` for a 2+ item `gallery`,\n * else `SingleThumbnail` for the single asset. Callers pass the superset of\n * props; the unused half is ignored by whichever branch renders.\n */\nconst CardThumbnail: React.FC = ({\n variant,\n gallery,\n title,\n showLocked,\n paymentStatus,\n mimeType,\n thumbnailUrl,\n source,\n containedImage,\n topRight,\n}) =>\n isGalleryCard(gallery) ? (\n \n ) : (\n \n )\n\nexport default CardThumbnail\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport type CardVariant = 'dark' | 'light'\n\nexport interface MediaShellProps {\n variant: CardVariant\n children: React.ReactNode\n rootRef?: React.Ref\n 'data-testid'?: string\n}\n\n/**\n * Outer chrome for every LockedAttachment card.\n * Mirrors the 16px radius treatment from the Figma design system.\n */\nconst MediaShell: React.FC = ({\n variant,\n children,\n rootRef,\n 'data-testid': dataTestId,\n}) => (\n \n {children}\n \n)\n\nexport default MediaShell\n","import React from 'react'\n\nexport interface PreviewToggleProps {\n /** Toggles the preview; omit to render `children` with no wrapper at all (nothing to toggle). */\n onToggle: (() => void | Promise) | undefined\n isBusy: boolean\n isPreviewVisible: boolean\n children: React.ReactNode\n}\n\n/**\n * Makes a locked thumbnail clickable to toggle its preview. Uses a\n * `role=\"button\"` div rather than a native `\n )\n }\n\n if (!isLocked && onDownloadClicked != null) {\n const href = redeemUrl ?? sourceUrl\n if (href != null) {\n return (\n \n \n Download\n \n )\n }\n\n return (\n \n \n Download\n \n )\n }\n\n return null\n}\n\nexport default ReceivedCardActions\n","import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getSourceType } from '../../../../AttachmentCard'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n galleryBodyIcon,\n isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\nimport { useReceivedSource } from '../_shared/useReceivedSource'\n\nimport ReceivedCardActions from './CardActions'\nimport type {\n MediaCardDraftProps,\n MediaCardOtherProps,\n MediaCardOwnProps,\n MediaCardPreviewProps,\n MediaCardProps,\n} from './types'\n\nexport type { MediaCardProps } from './types'\n\n/**\n * Media card while still drafting — the locked thumbnail (single or gallery)\n * the composer taps to preview the attachment they're about to send, plus\n * the title/price body with optional dismiss X and edit pencil.\n */\nconst DraftMediaCard: React.FC = ({\n title,\n mimeType = 'application/octet-stream',\n thumbnailUrl,\n detail,\n amountText,\n placeholderTitle,\n placeholderAmountText,\n gallery = [],\n onDismiss,\n onPreviewClick,\n onFetchSource,\n onEditClick,\n}) => {\n const isGallery = isGalleryCard(gallery)\n\n // Gallery is always previewable in the composer because each item's source\n // is already provided up-front via `gallery[*].sourceUrl`.\n const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n const showLocked = !isPreviewVisible\n const isBusy = isLoadingPreview\n\n const statusBadge = (\n \n •\n \n {amountText || placeholderAmountText}\n \n \n )\n\n const dismissButton = onDismiss ? (\n {\n // Stop the click from bubbling up into the outer preview-toggle\n // wrapper when both are wired up at the same time.\n e.stopPropagation()\n onDismiss()\n }}\n className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n aria-label=\"Dismiss attachment\"\n >\n \n \n ) : undefined\n\n const editButton = onEditClick ? (\n \n \n \n ) : undefined\n\n return (\n \n \n \n \n\n \n \n )\n}\n\n/**\n * Static mockup of what the recipient will see before purchase — always\n * locked/blurred (the lock badge renders from `showLocked` alone, no toggle\n * wiring needed), no interactivity, no real content revealed.\n */\nconst PreviewMediaCard: React.FC = ({\n title,\n mimeType = 'application/octet-stream',\n thumbnailUrl,\n detail,\n amountText,\n placeholderTitle,\n placeholderAmountText,\n gallery = [],\n}) => {\n const isGallery = isGalleryCard(gallery)\n\n const statusBadge = (\n \n •\n \n {amountText || placeholderAmountText}\n \n \n )\n\n return (\n \n \n\n \n \n )\n}\n/**\n * The sender's ('mine') view of a paid media attachment: the locked\n * thumbnail (single or gallery) they can tap to preview their own\n * attachment, plus the title/purchase-status body.\n */\nconst OwnMediaCard: React.FC = ({\n title,\n mimeType = 'application/octet-stream',\n thumbnailUrl,\n detail,\n amountText,\n placeholderTitle,\n paymentStatus = 'pending',\n gallery = [],\n onPreviewClick,\n onFetchSource,\n}) => {\n const isGallery = isGalleryCard(gallery)\n\n // Gallery is always previewable for the sender because each item's source\n // is already provided up-front via `gallery[*].sourceUrl`.\n const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n const showLocked = !isPreviewVisible\n const isBusy = isLoadingPreview\n\n return (\n \n \n \n \n\n \n }\n icon={isGallery ? galleryBodyIcon('dark') : undefined}\n />\n \n )\n}\n\n/**\n * The recipient's ('other') view of a paid media attachment: the locked\n * thumbnail (single or gallery) with an Unlock/Download CTA. The source is\n * revealed by fetching once — on click when already paid, or automatically\n * the first time a paid card scrolls into view.\n */\nconst OtherMediaCard: React.FC = ({\n title,\n amountText,\n thumbnailUrl,\n mimeType = 'application/octet-stream',\n detail,\n gallery = [],\n onUnlockClick,\n onFetchSource,\n onDownloadClick,\n paymentStatus,\n isUnlocking = false,\n}) => {\n const isGallery = isGalleryCard(gallery)\n\n const { source, cardRef, handleUnlockClick } = useReceivedSource({\n paymentStatus,\n onFetchSource,\n onUnlockClick,\n })\n\n const effectiveSourceUrl = source?.sourceUrl\n const effectiveRedeemUrl = source?.redeemUrl\n\n // For gallery, the per-item sources are carried by `gallery` itself, so\n // the lock state is driven by paymentStatus rather than the single\n // `effectiveSourceUrl`. Everything else still respects the source fetch.\n const isLocked = isGallery\n ? paymentStatus !== 'paid'\n : effectiveSourceUrl === undefined\n const sourceType = getSourceType(mimeType)\n\n // For gallery, ReceivedCardActions falls back to a plain