@linktr.ee/messaging-react 1.40.2 → 2.0.1-rc-1778656305

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

@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useState } from 'react'
 
+import type { LockedAttachmentGalleryItem } from './types'
+
 import LockedAttachment from '.'
 
 const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
@@ -73,6 +75,37 @@ const VARIANTS = [
   },
 ]
 
+/**
+ * A mixed-media collection (a video + 3 photos) used by the Gallery stories
+ * below. Each `LockedAttachment.*` card accepts a `gallery` prop and renders
+ * a carousel of these items when 2+ items are provided.
+ */
+const GALLERY_ITEMS: LockedAttachmentGalleryItem[] = [
+  {
+    mimeType: 'video/mp4',
+    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    sourceUrl: VIDEO_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    sourceUrl: IMAGE_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
+    sourceUrl: DOCUMENT_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
+    sourceUrl: AUDIO_SOURCE,
+  },
+]
+
+const GALLERY_DETAIL = '1 video, 3 photos'
+const GALLERY_TITLE = 'Workout Guide'
+
 const Table = ({ children }: { children: React.ReactNode }) => (
   <div className="min-h-screen w-full p-12 bg-[#F9F7F4]">
     <table className="border-separate border-spacing-4">{children}</table>
@@ -99,91 +132,7 @@ const TableHead = ({
   </thead>
 )
 
-export const Received: StoryFn = () => {
-  const [isPaid, setPaid] = useState<string | undefined>()
-  const [isUnlocking, setUnlocking] = 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>
-          {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"
-                  isUnlocking={isUnlocking === mimeType}
-                  onUnlockClick={() => {
-                    setUnlocking(mimeType)
-                    setTimeout(() => {
-                      setUnlocking(undefined)
-                      setPaid(mimeType)
-                    }, 1500)
-                  }}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => ({
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  })}
-                />
-              </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,
-              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={() => alert('Unlock clicked')}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => ({
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  })}
-                />
-              </td>
-            )
-          )}
-        </tr>
-      </tbody>
-    </Table>
-  )
-}
-
-export const Sent: StoryFn = () => (
+export const Composer: StoryFn = () => (
   <Table>
     <TableHead variants={VARIANTS} />
     <tbody>
@@ -200,7 +149,7 @@ export const Sent: StoryFn = () => (
             sourceUrl,
           }) => (
             <td key={mimeType} className="align-top">
-              <LockedAttachment.Creator
+              <LockedAttachment.Composer
                 placeholderTitle="Attachment title"
                 placeholderAmountText="AU$0.00"
                 thumbnailUrl={thumbnailUrl}
@@ -224,7 +173,7 @@ export const Sent: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment.Creator
+            <LockedAttachment.Composer
               title={title}
               thumbnailUrl={thumbnailUrl}
               mimeType={mimeType}
@@ -235,6 +184,14 @@ export const Sent: StoryFn = () => (
           </td>
         ))}
       </tr>
+    </tbody>
+  </Table>
+)
+
+export const Sent: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sent
@@ -249,7 +206,7 @@ export const Sent: StoryFn = () => (
             sourceUrl,
           }) => (
             <td key={mimeType} className="align-top">
-              <LockedAttachment.Creator
+              <LockedAttachment.Sent
                 title={title}
                 thumbnailUrl={thumbnailUrl}
                 mimeType={mimeType}
@@ -281,7 +238,7 @@ export const Sent: StoryFn = () => (
             sourceUrl,
           }) => (
             <td key={mimeType} className="align-top">
-              <LockedAttachment.Creator
+              <LockedAttachment.Sent
                 title={title}
                 thumbnailUrl={thumbnailUrl}
                 mimeType={mimeType}
@@ -303,3 +260,187 @@ export const Sent: StoryFn = () => (
     </tbody>
   </Table>
 )
+
+export const Gallery: StoryFn = () => {
+  const [isPaid, setPaid] = useState(false)
+  const [isUnlocking, setUnlocking] = useState(false)
+
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th className="text-left text-xs font-medium text-black/40 pb-2" />
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Composer
+          </th>
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Sent
+          </th>
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Received
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Locked
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Composer
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              onDismiss={() => alert('Dismissed gallery')}
+              onEditClick={() => alert('Edit gallery')}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Sent
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Received
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              paymentStatus={isPaid ? 'paid' : undefined}
+              isUnlocking={isUnlocking}
+              onUnlockClick={() => {
+                setUnlocking(true)
+                setTimeout(() => {
+                  setUnlocking(false)
+                  setPaid(true)
+                }, 1500)
+              }}
+              onDownloadClick={() => alert('Download gallery')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Sold / Purchased
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Composer
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              onEditClick={() => alert('Edit gallery')}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Sent
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              paymentStatus="paid"
+              gallery={GALLERY_ITEMS}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Received
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              paymentStatus="paid"
+              gallery={GALLERY_ITEMS}
+              onDownloadClick={() => alert('Download gallery')}
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export const Received: StoryFn = () => {
+  const [isPaid, setPaid] = useState<string | undefined>()
+  const [isUnlocking, setUnlocking] = 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>
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Received
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  paymentStatus={isPaid === mimeType ? 'paid' : undefined}
+                  amountText="AU$9.99"
+                  isUnlocking={isUnlocking === mimeType}
+                  onUnlockClick={() => {
+                    setUnlocking(mimeType)
+                    setTimeout(() => {
+                      setUnlocking(undefined)
+                      setPaid(mimeType)
+                    }, 1500)
+                  }}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
+                />
+              </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,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Received
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  amountText="AU$9.99"
+                  paymentStatus="paid"
+                  onUnlockClick={() => alert('Unlock clicked')}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
+                />
+              </td>
+            )
+          )}
+        </tr>
+      </tbody>
+    </Table>
+  )
+}

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

@@ -0,0 +1,221 @@
+import { ImagesIcon, PencilSimpleIcon, XIcon } 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 ComposerCardProps extends LockedAttachmentBaseProps {
+  /** Placeholder shown in the title slot before the composer types one. */
+  placeholderTitle?: string
+  /** Placeholder shown in the amount slot before one is configured. */
+  placeholderAmountText?: string
+  /**
+   * When provided, renders a dismiss X in the thumbnail corner. Called when
+   * the composer clicks it to remove the attachment.
+   */
+  onDismiss?: () => void
+  /** Fired the first time the composer taps the thumbnail to preview. */
+  onPreviewClick?: () => void
+  /**
+   * Lazily loads the underlying source so the composer can preview the
+   * attachment they're about to send. Called the first time the thumbnail is
+   * tapped; the returned source is cached and reused on subsequent toggles.
+   */
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+  /**
+   * When provided, renders a pencil button in the body bottom-right that the
+   * composer can use to edit the attachment metadata (e.g. open the price /
+   * gallery editor). Matches the Composer "Button" instance in Figma.
+   */
+  onEditClick?: () => void
+}
+
+/**
+ * The card the composer sees while drafting a paid attachment.
+ * Matches the Composer column of the messaging design system in Figma.
+ */
+const ComposerCard: React.FC<ComposerCardProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle = 'Attachment title',
+  placeholderAmountText,
+  gallery,
+  onDismiss,
+  onPreviewClick,
+  onFetchSource,
+  onEditClick,
+}) => {
+  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 in the composer 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 = (
+    <React.Fragment>
+      <span className="text-xs font-medium text-white/55">&bull;</span>
+      <span
+        className={
+          amountText
+            ? 'text-xs font-medium text-white/55'
+            : 'text-xs font-medium text-white/30'
+        }
+      >
+        {amountText || placeholderAmountText}
+      </span>
+    </React.Fragment>
+  )
+
+  const dismissButton = onDismiss ? (
+    <button
+      type="button"
+      onClick={(e) => {
+        // Stop the click from bubbling up into the outer preview-toggle
+        // wrapper when both are wired up at the same time.
+        e.stopPropagation()
+        onDismiss()
+      }}
+      className="flex size-6 items-center justify-center rounded-full bg-[#121110] text-white"
+      aria-label="Dismiss attachment"
+    >
+      <XIcon className="size-3" weight="bold" />
+    </button>
+  ) : undefined
+
+  const editButton = onEditClick ? (
+    <button
+      type="button"
+      onClick={onEditClick}
+      aria-label="Edit attachment"
+      className="flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15"
+    >
+      <PencilSimpleIcon className="size-5" weight="regular" />
+    </button>
+  ) : undefined
+
+  const thumbnail = isGallery ? (
+    <GalleryThumbnail
+      variant="dark"
+      gallery={gallery!}
+      title={title}
+      showLocked={showLocked}
+      topRight={dismissButton}
+    />
+  ) : (
+    <LockedThumbnail
+      variant="dark"
+      mimeType={mimeType}
+      thumbnailUrl={thumbnailUrl}
+      title={title}
+      source={source}
+      showLocked={showLocked}
+      topRight={dismissButton}
+    />
+  )
+
+  return (
+    <LockedCardShell variant="dark">
+      {togglePreview ? (
+        // Uses a `<div role="button">` rather than a native `<button>` so the
+        // dismiss control rendered inside `thumbnail` (also a `<button>`)
+        // doesn'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 (dismiss X, 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
+        }
+        trailingAction={editButton}
+      />
+    </LockedCardShell>
+  )
+}
+
+export default ComposerCard

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

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