@linktr.ee/messaging-react 1.32.0 → 1.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.32.0",
+  "version": "1.32.1",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/LockedAttachment/LockedAttachment.stories.tsx

@@ -1,17 +1,21 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import React from 'react'
+import React, { useState } from 'react'
 
 import LockedAttachment from '.'
 
 const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
+const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
 const VIDEO_SOURCE = '/video-source.mp4'
 
 const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
+const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
 const IMAGE_SOURCE = '/image-source.jpg'
 
+const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
 const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
 const DOCUMENT_SOURCE = '/document-source.pdf'
 
+const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
 const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
 const AUDIO_SOURCE = '/audio-source.mp3'
 
@@ -28,6 +32,7 @@ const VARIANTS = [
     mimeType: 'video/mp4',
     detail: '1:20',
     thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: VIDEO_THUMBNAIL,
     sourceUrl: VIDEO_SOURCE,
   },
   {
@@ -35,7 +40,8 @@ const VARIANTS = [
     title: 'Morning Meditation',
     mimeType: 'audio/mpeg',
     detail: '4:35',
-    thumbnailUrl: AUDIO_THUMBNAIL,
+    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: AUDIO_THUMBNAIL,
     sourceUrl: AUDIO_SOURCE,
   },
   {
@@ -44,6 +50,7 @@ const VARIANTS = [
     mimeType: 'image/jpeg',
     detail: '3.2 MB',
     thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: IMAGE_THUMBNAIL,
     sourceUrl: IMAGE_SOURCE,
   },
   {
@@ -51,15 +58,8 @@ const VARIANTS = [
     title: 'Strength Training Guide',
     mimeType: 'application/zip',
     detail: '14 files',
-    thumbnailUrl: DOCUMENT_THUMBNAIL,
-    sourceUrl: DOCUMENT_SOURCE,
-  },
-  {
-    label: 'Unknown',
-    title: 'Unknown Attachment',
-    mimeType: 'application/octet-stream',
-    detail: undefined,
-    thumbnailUrl: undefined,
+    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: DOCUMENT_THUMBNAIL,
     sourceUrl: DOCUMENT_SOURCE,
   },
 ]
@@ -70,7 +70,9 @@ const Table = ({ children }: { children: React.ReactNode }) => (
   </div>
 )
 
-const TableHead = ({ variants, }: {
+const TableHead = ({
+  variants,
+}: {
   variants: { label: string; mimeType: string }[]
 }) => (
   <thead>
@@ -88,69 +90,105 @@ const TableHead = ({ variants, }: {
   </thead>
 )
 
-export const Visitor: StoryFn = () => (
-  <Table>
-    <TableHead variants={VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Locked
-        </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Visitor
-              title={title}
-              amountText="AU$9.99"
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              onUnlockClick={() => {}}
-              onDownloadClick={() => {}}
-            />
+export const Visitor: StoryFn = () => {
+  const [isPaid, setPaid] = useState<string | undefined>()
+
+  return (
+    <Table>
+      <TableHead variants={VARIANTS} />
+      <tbody>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Locked
           </td>
-        ))}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Purchased
-        </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Visitor
-              title={title}
-              amountText="AU$9.99"
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              paymentStatus="paid"
-              onUnlockClick={() => {}}
-              onDownloadClick={() => {}}
-            />
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Visitor
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  paymentStatus={isPaid === mimeType ? 'paid' : undefined}
+                  amountText="AU$9.99"
+                  onUnlockClick={() => setPaid(mimeType)}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => {
+                    return Promise.resolve({
+                      sourceUrl: sourceUrl,
+                      thumbnailUrl: thumbnailUnlockedUrl,
+                    })
+                  }}
+                />
+              </td>
+            )
+          )}
+        </tr>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Purchased
           </td>
-        ))}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Unlocked
-        </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Visitor
-              title={title}
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-              paymentStatus="paid"
-              onUnlockClick={() => Promise.resolve({ sourceUrl })}
-              onDownloadClick={() => {}}
-            />
+          {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Visitor
+                title={title}
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                paymentStatus="paid"
+                onUnlockClick={() => alert('Unlock clicked')}
+                onDownloadClick={() => alert('Download clicked')}
+              />
+            </td>
+          ))}
+        </tr>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Unlocked
           </td>
-        ))}
-      </tr>
-    </tbody>
-  </Table>
-)
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Visitor
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  amountText="AU$9.99"
+                  paymentStatus="paid"
+                  onUnlockClick={() => console.log('Unlock clicked')}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => {
+                    await new Promise((resolve) => setTimeout(resolve, 500))
+                    return Promise.resolve({
+                      sourceUrl: sourceUrl,
+                      thumbnailUrl: thumbnailUnlockedUrl,
+                    })
+                  }}
+                />
+              </td>
+            )
+          )}
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
 
 export const Creator: StoryFn = () => (
   <Table>
@@ -160,30 +198,39 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Preview
         </td>
-        {VARIANTS.map(({ mimeType, detail, thumbnailUrl, sourceUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Creator
-              isPreview={true}
-              thumbnailUrl={thumbnailUrl}
-              sourceUrl={sourceUrl}
-              mimeType={mimeType}
-              detail={detail}
-              placeholderAmountText="A$0.00"
-              onDismiss={undefined}
-            />
-          </td>
-        ))}
+        {VARIANTS.map(
+          ({
+            mimeType,
+            detail,
+            thumbnailUrl,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Creator
+                placeholderTitle="Attachment title"
+                placeholderAmountText="AU$0.00"
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                onPreviewClick={() => ({
+                  sourceUrl: sourceUrl,
+                  thumbnailUrl: thumbnailUnlockedUrl,
+                })}
+              />
+            </td>
+          )
+        )}
       </tr>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Pending
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
-              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
@@ -196,16 +243,14 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sent
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
-              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
-              onDismiss={undefined}
             />
           </td>
         ))}
@@ -214,17 +259,15 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sold
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
-              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
               paymentStatus="paid"
-              onDismiss={undefined}
             />
           </td>
         ))}

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

@@ -1,105 +1,72 @@
 import {
   CheckCircleIcon,
+  EyeIcon,
+  EyeSlashIcon,
   LockIcon,
   LockOpenIcon,
   XIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 
-import type { LockedAttachmentBaseProps } from '../../types'
+import type {
+  LockedAttachmentBaseProps,
+  LockedAttachmentSource,
+  PaymentStatus,
+} from '../../types'
 import { renderTypeIcon } from '../../utils/icons'
-import { getSourceType } from '../../utils/mimeType'
 
-import AudioPreview from './CardAudioPreview'
-import CollapsedThumbnail from './CardCollapsedThumbnail'
-import ImagePreview from './CardImagePreview'
-import VideoPreview from './CardVideoPreview'
+import CardThumbnail from './CardThumbnail'
 
 export interface CreatorCardProps extends LockedAttachmentBaseProps {
-  isPreview?: boolean
   placeholderTitle?: string
   placeholderAmountText?: string
-  sourceUrl?: string
   onDismiss?: () => void
+  onPreviewClick?: () => LockedAttachmentSource
 }
 
-const CreatorCard: React.FC<CreatorCardProps> = (props) => {
-  const {
-    title,
-    mimeType = 'application/octet-stream',
-    thumbnailUrl,
-    sourceUrl,
-    detail,
-    amountText,
-    placeholderTitle = 'Attachment title',
-    placeholderAmountText,
-    paymentStatus,
-    onDismiss,
-    isPreview = false,
-  } = props
-  const sourceType = getSourceType(mimeType)
-  const displayAmountText = amountText ?? placeholderAmountText
-  const isPlaceholderAmount = !amountText && !!placeholderAmountText
-
-  let mediaPreview: React.ReactNode
-  if (isPreview && sourceType === 'audio') {
-    mediaPreview = (
-      <AudioPreview
-        key={sourceUrl}
-        sourceUrl={sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-      />
-    )
-  } else if (isPreview && sourceType === 'video') {
-    mediaPreview = (
-      <VideoPreview
-        key={sourceUrl}
-        sourceUrl={sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
+const CreatorCard: React.FC<CreatorCardProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle = 'Attachment title',
+  placeholderAmountText,
+  paymentStatus,
+  onDismiss,
+  onPreviewClick,
+}) => {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+
+  const effectiveSourceUrl = source?.sourceUrl
+  const effectiveThumbnailUrl = source?.thumbnailUrl ?? thumbnailUrl
+
+  const handleToggle = useCallback(() => {
+    if (source) {
+      setSource(undefined)
+    } else if (onPreviewClick) {
+      setSource(onPreviewClick())
+    }
+  }, [source, onPreviewClick])
+
+  return (
+    <div className="relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
+      <CardHeader
+        onDismiss={onDismiss}
+        onPreviewClick={onPreviewClick}
+        sourceUrl={source?.sourceUrl}
+        paymentStatus={paymentStatus}
       />
-    )
-  } else if (isPreview && sourceType === 'image') {
-    mediaPreview = (
-      <ImagePreview
-        key={sourceUrl}
-        sourceUrl={sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
+
+      <CardThumbnail
         title={title}
-      />
-    )
-  } else {
-    const lockedOverlayIcon = onDismiss
-      ? undefined
-      : paymentStatus === 'paid'
-        ? LockOpenIcon
-        : LockIcon
-    mediaPreview = (
-      <CollapsedThumbnail
-        thumbnailUrl={thumbnailUrl}
+        sourceUrl={effectiveSourceUrl}
+        thumbnailUrl={effectiveThumbnailUrl}
         mimeType={mimeType}
-        overlayIcon={lockedOverlayIcon}
-        darkOverlay
+        onToggle={onPreviewClick ? handleToggle : undefined}
       />
-    )
-  }
 
-  return (
-    <div className="relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
-      {onDismiss && (
-        <button
-          type="button"
-          onClick={onDismiss}
-          className="absolute right-3 top-3 z-50 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>
-      )}
-      {mediaPreview}
       <div className="px-4 pb-3 pt-3">
         <p
           className={classNames('mb-1.5 truncate text-base font-medium', {
@@ -109,46 +76,38 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
         >
           {title || placeholderTitle}
         </p>
+
         <div className="flex items-center gap-1">
           {renderTypeIcon(mimeType, {
             className: 'size-5 shrink-0 text-black/55',
             weight: 'regular',
           })}
+
           {detail && (
             <span className="text-xs font-medium text-black/55">{detail}</span>
           )}
+
           {paymentStatus === 'paid' ? (
-            <>
-              <span className="text-xs font-medium text-black/55">•</span>
-              <span className="text-xs font-medium text-[#008236]">
-                Purchased
-              </span>
+            <React.Fragment>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span className="text-xs font-medium text-[#008236]">Sold</span>
               <CheckCircleIcon
                 className="size-4 text-[#008236]"
                 weight="bold"
               />
-            </>
+            </React.Fragment>
           ) : (
-            displayAmountText && (
-              <>
-                <span
-                  className={classNames('text-xs font-medium', {
-                    'text-black/30': isPlaceholderAmount,
-                    'text-black/55': !isPlaceholderAmount,
-                  })}
-                >
-                  •
-                </span>
-                <span
-                  className={classNames('text-xs font-medium', {
-                    'text-black/30': isPlaceholderAmount,
-                    'text-black/55': !isPlaceholderAmount,
-                  })}
-                >
-                  {displayAmountText}
-                </span>
-              </>
-            )
+            <React.Fragment>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span
+                className={classNames('text-xs font-medium', {
+                  'text-black/30': !amountText,
+                  'text-black/55': !!amountText,
+                })}
+              >
+                {amountText || placeholderAmountText}
+              </span>
+            </React.Fragment>
           )}
         </div>
       </div>
@@ -156,4 +115,45 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
   )
 }
 
+interface CardHeaderProps {
+  onDismiss?: () => void
+  onPreviewClick?: () => void
+  sourceUrl?: string
+  paymentStatus?: PaymentStatus
+}
+
+const CardHeader: React.FC<CardHeaderProps> = ({
+  onDismiss,
+  onPreviewClick,
+  sourceUrl,
+  paymentStatus,
+}) => {
+  if (onDismiss) {
+    return (
+      <button
+        type="button"
+        onClick={onDismiss}
+        className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white right-3"
+        aria-label="Dismiss attachment"
+      >
+        <XIcon className="size-4" weight="bold" />
+      </button>
+    )
+  }
+
+  const Icon = onPreviewClick
+    ? sourceUrl
+      ? EyeIcon
+      : EyeSlashIcon
+    : paymentStatus === 'paid'
+      ? LockOpenIcon
+      : LockIcon
+
+  return (
+    <div className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3">
+      <Icon className="size-4" weight="fill" />
+    </div>
+  )
+}
+
 export default CreatorCard