@linktr.ee/messaging-react 1.36.0 → 1.38.0-rc-1777583423

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

@@ -1,14 +1,14 @@
 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 { renderTypeIcon } from '../../utils/icons'
 
 import CardActions from './CardActions'
-import CardThumbnail from './CardThumbnail'
+import { LockBadge } from './LockBadge'
 
 export interface VisitorCardProps extends LockedAttachmentBaseProps {
   /**
@@ -97,48 +97,49 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
     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 (
-    <div
-      ref={cardRef}
+    <AttachmentCard
+      variant="light"
+      rootRef={cardRef}
       data-testid="locked-attachment"
-      className="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)]"
-    >
-      <CardThumbnail
-        title={title}
-        sourceUrl={effectiveSourceUrl}
-        thumbnailUrl={effectiveThumbnail}
-        mimeType={mimeType}
-        paymentStatus={paymentStatus}
-      />
-
-      <div className="px-4 pb-3 pt-3">
-        <p className="mb-0.5 truncate text-base font-medium text-black">
-          {title}
-        </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>
+      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>
           )}
-
-          {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}
         </div>
-
+      }
+      action={
         <CardActions
           isUnlocking={isUnlocking}
           sourceUrl={effectiveSourceUrl}
@@ -146,8 +147,8 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
           onUnlockClicked={handleUnlockClick}
           onDownloadClicked={onDownloadClick}
         />
-      </div>
-    </div>
+      }
+    />
   )
 }
 

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

@@ -0,0 +1,12 @@
+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/MediaMessage/MediaMessage.stories.tsx

@@ -160,7 +160,7 @@ export const Attachment: StoryFn = () => (
     <tbody>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Received
+          Visitor
         </td>
         {VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
@@ -177,7 +177,7 @@ export const Attachment: StoryFn = () => (
       </tr>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Sent
+          Creator
         </td>
         {VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
@@ -202,7 +202,7 @@ export const Links: StoryFn = () => (
     <tbody>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Received
+          Visitor
         </td>
         {LINK_VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
@@ -219,7 +219,7 @@ export const Links: StoryFn = () => (
       </tr>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Sent
+          Creator
         </td>
         {LINK_VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
@@ -237,3 +237,44 @@ export const Links: StoryFn = () => (
     </tbody>
   </Table>
 )
+
+/** Standalone cards (no chat bubble shell), matching LockedAttachment story layout. */
+export const Compound: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
+      <tr>
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+          MediaMessage.Visitor
+        </td>
+        {VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage.Visitor
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+          MediaMessage.Creator
+        </td>
+        {VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage.Creator
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)