@linktr.ee/messaging-react 2.0.1 → 2.1.0-rc-1778695491

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

@@ -1,210 +0,0 @@
-import {
-  CheckCircleIcon,
-  EyeIcon,
-  EyeSlashIcon,
-  LockIcon,
-  LockOpenIcon,
-  XIcon,
-} from '@phosphor-icons/react'
-import classNames from 'classnames'
-import React, { useCallback, useRef, useState } from 'react'
-
-import AttachmentCard, { AttachmentThumbnail } from '../../../AttachmentCard'
-import type {
-  LockedAttachmentBaseProps,
-  LockedAttachmentSource,
-  PaymentStatus,
-} from '../../types'
-
-export interface CreatorCardProps extends LockedAttachmentBaseProps {
-  placeholderTitle?: string
-  placeholderAmountText?: string
-  isUnlocking?: boolean
-  onDismiss?: () => void
-  onPreviewClick?: () => void
-  onFetchSource?: () => Promise<LockedAttachmentSource | void>
-}
-
-function headerSlots(props: {
-  onDismiss?: () => void
-  onToggle?: () => void
-  isExpanded?: boolean
-  paymentStatus?: PaymentStatus
-  isLoading?: boolean
-}): { topLeft?: React.ReactNode; topRight?: React.ReactNode } {
-  const { onDismiss, onToggle, isExpanded, paymentStatus, isLoading } = props
-
-  if (onDismiss) {
-    return {
-      topLeft: undefined,
-      topRight: (
-        <button
-          type="button"
-          onClick={onDismiss}
-          className="flex size-8 items-center justify-center rounded-full bg-black/60 text-white"
-          aria-label="Dismiss attachment"
-        >
-          <XIcon className="size-4" weight="bold" />
-        </button>
-      ),
-    }
-  }
-
-  if (onToggle) {
-    const Icon = isExpanded ? EyeIcon : EyeSlashIcon
-    return {
-      topLeft: (
-        <button
-          type="button"
-          onClick={onToggle}
-          className="flex size-8 items-center justify-center rounded-full bg-black/60 text-white"
-          aria-label={isExpanded ? 'Hide preview' : 'Show preview'}
-          aria-pressed={isExpanded}
-        >
-          <Icon className="size-4" weight="fill" />
-        </button>
-      ),
-      topRight: undefined,
-    }
-  }
-
-  const Icon = paymentStatus === 'paid' ? LockOpenIcon : LockIcon
-
-  return {
-    topLeft: (
-      <div className="flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
-        {isLoading ? (
-          <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-        ) : (
-          <Icon className="size-4" weight="fill" />
-        )}
-      </div>
-    ),
-    topRight: undefined,
-  }
-}
-
-const CreatorCard: React.FC<CreatorCardProps> = ({
-  title,
-  mimeType = 'application/octet-stream',
-  thumbnailUrl,
-  detail,
-  amountText,
-  placeholderTitle = 'Attachment title',
-  placeholderAmountText,
-  paymentStatus,
-  isUnlocking,
-  onDismiss,
-  onPreviewClick,
-  onFetchSource,
-}) => {
-  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
-  const [isLoadingPreview, setLoadingPreview] = useState(false)
-  const fetchingRef = useRef(false)
-
-  const effectiveSourceUrl = isPreviewVisible ? source?.sourceUrl : undefined
-  const effectiveThumbnailUrl = isPreviewVisible ? (source?.thumbnailUrl ?? thumbnailUrl) : thumbnailUrl
-  const isBusy = isLoadingPreview || isUnlocking
-
-  const handleToggle = useCallback(async () => {
-    onPreviewClick?.()
-    if (isPreviewVisible) {
-      setIsPreviewVisible(false)
-      return
-    }
-    if (source) {
-      setIsPreviewVisible(true)
-      return
-    }
-    if (!onFetchSource) return
-    if (fetchingRef.current) return
-    fetchingRef.current = true
-    setLoadingPreview(true)
-    try {
-      const result = await onFetchSource()
-      if (result) {
-        setSource(result)
-        setIsPreviewVisible(true)
-      }
-    } finally {
-      fetchingRef.current = false
-      setLoadingPreview(false)
-    }
-  }, [isPreviewVisible, source, onPreviewClick, onFetchSource])
-
-  const toggleHandler = onFetchSource || onPreviewClick ? handleToggle : undefined
-
-  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>
-    ) : (
-      <React.Fragment>
-        <span className="text-xs font-medium text-white/55">&bull;</span>
-        <span
-          className={classNames('text-xs font-medium', {
-            'text-white/30': !amountText,
-            'text-white/55': !!amountText,
-          })}
-        >
-          {amountText || placeholderAmountText}
-        </span>
-      </React.Fragment>
-    )
-
-  const { topLeft, topRight } = headerSlots({
-    onDismiss,
-    onToggle: isBusy ? undefined : toggleHandler,
-    isExpanded: isPreviewVisible,
-    paymentStatus,
-    isLoading: isBusy,
-  })
-
-  return (
-    <AttachmentCard
-      variant="dark"
-      title={title}
-      placeholderTitle={placeholderTitle}
-      mimeType={mimeType}
-      detail={detail}
-      statusBadge={statusBadge}
-      topLeft={topLeft}
-      topRight={topRight}
-      thumbnail={
-        <button
-          type="button"
-          disabled={!toggleHandler || isBusy}
-          className={classNames(
-            'relative block w-full overflow-hidden border-0 bg-white/10 p-0 text-left appearance-none',
-            { 'cursor-pointer': !!toggleHandler && !isBusy, 'cursor-default': !toggleHandler || isBusy }
-          )}
-          onClick={isBusy ? undefined : toggleHandler}
-          aria-label={toggleHandler ? 'Toggle preview' : undefined}
-          aria-busy={isBusy}
-        >
-          <AttachmentThumbnail
-            mimeType={mimeType}
-            sourceUrl={effectiveSourceUrl}
-            thumbnailUrl={effectiveThumbnailUrl}
-            title={title}
-            variant="dark"
-            mediaPlayerProps={
-              effectiveSourceUrl
-                ? { autoPlay: true, loop: true, controls: true, muted: false }
-                : undefined
-            }
-          />
-          {!isPreviewVisible && (
-            <div className="pointer-events-none absolute inset-0 bg-black/30" />
-          )}
-        </button>
-      }
-    />
-  )
-}
-
-export default CreatorCard

package/src/components/LockedAttachment/components/Creator/index.tsx

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

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

@@ -1,155 +0,0 @@
-import { CheckCircleIcon } from '@phosphor-icons/react'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-
-import AttachmentCard, { AttachmentThumbnail } from '../../../AttachmentCard'
-import type {
-  LockedAttachmentBaseProps,
-  LockedAttachmentSource,
-} from '../../types'
-
-import CardActions from './CardActions'
-import { LockBadge } from './LockBadge'
-
-export interface VisitorCardProps extends LockedAttachmentBaseProps {
-  /**
-   * Called when the visitor 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 visitor clicks Download on an unlocked card.
-   * Omit to hide the Download button.
-   */
-  onDownloadClick?: () => void
-  /**
-   * When true, shows loading dots on the Unlock button.
-   * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).
-   */
-  isUnlocking?: boolean
-}
-
-const VisitorCard: React.FC<VisitorCardProps> = ({
-  title,
-  amountText,
-  thumbnailUrl,
-  mimeType = 'application/octet-stream',
-  detail,
-  onUnlockClick,
-  onFetchSource,
-  onDownloadClick,
-  paymentStatus,
-  isUnlocking = false,
-}) => {
-  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 effectiveThumbnail = source?.thumbnailUrl ?? thumbnailUrl
-  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])
-
-  // Fetch source when card is in viewport
-  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])
-
-  const isLocked = effectiveSourceUrl === undefined
-
-  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
-
-  return (
-    <AttachmentCard
-      variant="light"
-      rootRef={cardRef}
-      data-testid="locked-attachment"
-      title={title}
-      mimeType={mimeType}
-      detail={detail}
-      statusBadge={statusBadge}
-      thumbnail={
-        <div className="relative">
-          <AttachmentThumbnail
-            mimeType={mimeType}
-            sourceUrl={effectiveSourceUrl}
-            thumbnailUrl={effectiveThumbnail}
-            title={title}
-            variant="light"
-            containedImage={!isLocked}
-          />
-          {isLocked && (
-            <div className="pointer-events-none absolute inset-0 bg-black/30">
-              <LockBadge paymentStatus={paymentStatus} />
-            </div>
-          )}
-        </div>
-      }
-      action={
-        <CardActions
-          isUnlocking={isUnlocking}
-          sourceUrl={effectiveSourceUrl}
-          redeemUrl={effectiveRedeemUrl}
-          onUnlockClicked={handleUnlockClick}
-          onDownloadClicked={onDownloadClick}
-        />
-      }
-    />
-  )
-}
-
-export default VisitorCard

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

@@ -1,62 +0,0 @@
-import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'
-import React from 'react'
-
-interface CardActionsProps {
-  sourceUrl?: string
-  redeemUrl?: string
-  onUnlockClicked?: () => void
-  onDownloadClicked?: () => void
-  isUnlocking?: boolean
-}
-
-const CardActions: React.FC<CardActionsProps> = (props) => {
-  const {
-    isUnlocking = false,
-    sourceUrl,
-    redeemUrl,
-    onUnlockClicked,
-    onDownloadClicked,
-  } = props
-
-  const isLocked = sourceUrl === undefined
-
-  if (isLocked && onUnlockClicked != null) {
-    return (
-      <button
-        type="button"
-        onClick={onUnlockClicked}
-        disabled={isUnlocking}
-        className="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"
-      >
-        {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 && sourceUrl != null) {
-    return (
-      <a
-        href={redeemUrl ?? sourceUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={onDownloadClicked}
-        className="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]"
-      >
-        <DownloadSimpleIcon className="size-4" weight="bold" />
-        Download
-      </a>
-    )
-  }
-
-  return null
-}
-
-
-export default CardActions

package/src/components/LockedAttachment/components/Visitor/LockBadge.tsx

@@ -1,12 +0,0 @@
-import { LockOpenIcon, LockSimpleIcon } from '@phosphor-icons/react'
-import React from 'react'
-
-import type { PaymentStatus } from '../../types'
-
-export const LockBadge: React.FC<{ paymentStatus?: PaymentStatus }> = ({
-  paymentStatus,
-}) => (
-  <div className="absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
-    {paymentStatus === 'paid' ? <LockOpenIcon /> : <LockSimpleIcon />}
-  </div>
-)

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

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