@linktr.ee/messaging-react 3.8.1 → 3.9.0-rc-1783406511

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

@@ -1,10 +1,162 @@
 import type { Meta, StoryFn } from '@storybook/react'
+import classNames from 'classnames'
 import React, { useState } from 'react'
+import { MessageText } from 'stream-chat-react'
 
 import type { LockedAttachmentGalleryItem } from './types'
 
 import LockedAttachment from '.'
 
+const meta: Meta = {
+  title: 'LockedAttachment',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const MatrixTable: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="str-chat min-h-screen w-full bg-[#F9F7F4] p-12">
+    <table className="border-separate border-spacing-4">
+      <thead>
+        <tr>
+          <th className="w-8 pb-2" />
+          <th className="pb-2 text-left text-xs font-medium text-black/40">
+            Received (buyer&apos;s view)
+          </th>
+          <th className="pb-2 text-left text-xs font-medium text-black/40">
+            Sent (creator&apos;s view)
+          </th>
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </table>
+  </div>
+)
+
+const MatrixTableRow: React.FC<{
+  label: React.ReactNode
+  received: React.ReactNode
+  sent: React.ReactNode
+}> = ({ label, received, sent }) => (
+  <tr>
+    <td className="whitespace-nowrap pr-4 align-top text-xs font-medium text-black/40">
+      {label}
+    </td>
+    <td className="align-top">
+      <MatrixTableCell isMine={false}>{received}</MatrixTableCell>
+    </td>
+    <td className="align-top">
+      <MatrixTableCell isMine>{sent}</MatrixTableCell>
+    </td>
+  </tr>
+)
+
+/**
+ * Mirrors the exact DOM `CustomMessage` produces around a paid TEXT
+ * attachment (see `CustomMessage/index.tsx`'s `isTextAttachmentMessage`
+ * branch), so the bubble color/radius CSS custom properties (scoped under
+ * `.str-chat` in styles.css) resolve the same way they do for the real
+ * consumer — no hardcoded fallback colors needed in the cards themselves.
+ */
+const MatrixTableCell: React.FC<{
+  isMine: boolean
+  children: React.ReactNode
+}> = ({ isMine, children }) => (
+  <div
+    className={classNames(
+      'str-chat__message str-chat__message-simple str-chat__message--regular str-chat__message--received has-no-text',
+      isMine
+        ? 'str-chat__message--me str-chat__message-simple--me'
+        : 'str-chat__message--other'
+    )}
+  >
+    <div className="str-chat__message-inner">
+      <div className="str-chat__message-bubble-wrapper">{children}</div>
+    </div>
+  </div>
+)
+
+export const Text: StoryFn = () => {
+  const [isUnlocking, setUnlocking] = useState(false)
+
+  // Matches what `CustomMessage` passes `MessageText` for a revealed paid
+  // text attachment (`displayMessage`) — just enough of a `LocalMessage`
+  // shape to render the real `str-chat__message-text` markup/CSS.
+  const purchasedMessage = {
+    text: "Here's the address, see you Thursday at 7!",
+    type: 'regular',
+  } as Parameters<typeof MessageText>[0]['message']
+
+  return (
+    <MatrixTable>
+      <MatrixTableRow
+        label="Composer"
+        received={null}
+        sent={
+          <LockedAttachment.Composer
+            contentType="text"
+            text={purchasedMessage?.text}
+            amountText="AU$4.99"
+            onDismiss={() => alert('Removed')}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Idle"
+        received={
+          <LockedAttachment.Text
+            isMine={false}
+            amountText="AU$4.99"
+            isUnlocking={isUnlocking}
+            onUnlockClick={() => {
+              setUnlocking(true)
+              setTimeout(() => setUnlocking(false), 1500)
+            }}
+          />
+        }
+        sent={
+          <LockedAttachment.Text
+            isMine
+            amountText="AU$4.99"
+            paymentStatus="pending"
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Unlocking"
+        received={
+          <LockedAttachment.Text
+            isMine={false}
+            amountText="AU$4.99"
+            isUnlocking
+          />
+        }
+        sent={null}
+      />
+      <MatrixTableRow
+        label="Purchased"
+        received={
+          <LockedAttachment.Text
+            isMine={false}
+            amountText="AU$4.99"
+            paymentStatus="paid"
+          >
+            <MessageText message={purchasedMessage} />
+          </LockedAttachment.Text>
+        }
+        sent={
+          <LockedAttachment.Text
+            isMine
+            amountText="AU$4.99"
+            paymentStatus="paid"
+          >
+            <MessageText message={purchasedMessage} />
+          </LockedAttachment.Text>
+        }
+      />
+    </MatrixTable>
+  )
+}
+
 const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
 const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
 const VIDEO_SOURCE = '/video-source.mp4'
@@ -21,12 +173,6 @@ const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
 const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
 const AUDIO_SOURCE = '/audio-source.mp3'
 
-const meta: Meta = {
-  title: 'LockedAttachment',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-
 const VARIANTS = [
   {
     label: 'Video',
@@ -106,159 +252,166 @@ const GALLERY_ITEMS: LockedAttachmentGalleryItem[] = [
 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>
-  </div>
+const MediaMatrix: React.FC<{ variant: (typeof VARIANTS)[number] }> = ({
+  variant,
+}) => {
+  const [isPaid, setPaid] = useState(false)
+  const [isUnlocking, setUnlocking] = useState(false)
+  const {
+    title,
+    mimeType,
+    detail,
+    thumbnailUrl,
+    thumbnailUnlockedUrl,
+    sourceUrl,
+  } = variant
+
+  const fetchSource = async () => ({
+    sourceUrl,
+    thumbnailUrl: thumbnailUnlockedUrl,
+  })
+
+  return (
+    <MatrixTable>
+      <MatrixTableRow
+        label="Preview"
+        received={null}
+        sent={
+          <LockedAttachment.Composer
+            placeholderTitle="Attachment title"
+            placeholderAmountText="AU$0.00"
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            detail={detail}
+            onFetchSource={fetchSource}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Composer"
+        received={null}
+        sent={
+          <LockedAttachment.Composer
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            detail={detail}
+            amountText="AU$9.99"
+            onDismiss={() => alert('Dismissed')}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Idle"
+        received={
+          <LockedAttachment.Media
+            isMine={false}
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            detail={detail}
+            amountText="AU$9.99"
+            paymentStatus={isPaid ? 'paid' : undefined}
+            isUnlocking={isUnlocking}
+            onUnlockClick={() => {
+              setUnlocking(true)
+              setTimeout(() => {
+                setUnlocking(false)
+                setPaid(true)
+              }, 1500)
+            }}
+            onDownloadClick={() => alert('Download clicked')}
+            onFetchSource={fetchSource}
+          />
+        }
+        sent={
+          <LockedAttachment.Media
+            isMine
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            detail={detail}
+            amountText="AU$9.99"
+            onFetchSource={fetchSource}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Unlocking"
+        received={
+          <LockedAttachment.Media
+            isMine={false}
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            detail={detail}
+            amountText="AU$9.99"
+            isUnlocking
+            onDownloadClick={() => alert('Download clicked')}
+            onFetchSource={fetchSource}
+          />
+        }
+        // Sender never unlocks their own message — no distinct state to show.
+        sent={null}
+      />
+      <MatrixTableRow
+        label="Purchased"
+        received={
+          <LockedAttachment.Media
+            isMine={false}
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            detail={detail}
+            amountText="AU$9.99"
+            paymentStatus="paid"
+            onUnlockClick={() => alert('Unlock clicked')}
+            onDownloadClick={() => alert('Download clicked')}
+            onFetchSource={fetchSource}
+          />
+        }
+        sent={
+          <LockedAttachment.Media
+            isMine
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            detail={detail}
+            amountText="AU$9.99"
+            paymentStatus="paid"
+            onFetchSource={fetchSource}
+          />
+        }
+      />
+    </MatrixTable>
+  )
+}
+
+const variantByLabel = (label: string) =>
+  VARIANTS.find((v) => v.label === label)!
+
+export const Video: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Video')} />
 )
+// LockedAttachment.Media (!isMine) autoplays the video preview once paid; even with
+// our SMIL/CSS animation freeze the <video> element advances frames
+// independently and produces a non-deterministic snapshot. Skip in Chromatic.
+Video.parameters = { chromatic: { disableSnapshot: true } }
 
-const TableHead = ({
-  variants,
-}: {
-  variants: { label: string; mimeType: string }[]
-}) => (
-  <thead>
-    <tr>
-      <th className="text-left text-xs font-medium text-black/40 pb-2" />
-      {variants.map(({ label, mimeType }) => (
-        <th
-          key={mimeType}
-          className="text-left text-xs font-medium text-black/40 pb-2"
-        >
-          {label}
-        </th>
-      ))}
-    </tr>
-  </thead>
+export const Audio: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Audio')} />
 )
 
-export const Composer: StoryFn = () => (
-  <Table>
-    <TableHead variants={VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Preview
-        </td>
-        {VARIANTS.map(
-          ({
-            mimeType,
-            detail,
-            thumbnailUrl,
-            thumbnailUnlockedUrl,
-            sourceUrl,
-          }) => (
-            <td key={mimeType} className="align-top">
-              <LockedAttachment.Composer
-                placeholderTitle="Attachment title"
-                placeholderAmountText="AU$0.00"
-                thumbnailUrl={thumbnailUrl}
-                mimeType={mimeType}
-                detail={detail}
-                onFetchSource={async () => {
-                  await new Promise((resolve) => setTimeout(resolve, 1500))
-                  return {
-                    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 }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Composer
-              title={title}
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-              onDismiss={() => alert('Dismissed')}
-            />
-          </td>
-        ))}
-      </tr>
-    </tbody>
-  </Table>
+export const Image: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Image')} />
 )
 
-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
-        </td>
-        {VARIANTS.map(
-          ({
-            title,
-            mimeType,
-            detail,
-            thumbnailUrl,
-            thumbnailUnlockedUrl,
-            sourceUrl,
-          }) => (
-            <td key={mimeType} className="align-top">
-              <LockedAttachment.Sent
-                title={title}
-                thumbnailUrl={thumbnailUrl}
-                mimeType={mimeType}
-                detail={detail}
-                amountText="AU$9.99"
-                onFetchSource={async () => {
-                  await new Promise((resolve) => setTimeout(resolve, 1500))
-                  return {
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  }
-                }}
-              />
-            </td>
-          )
-        )}
-      </tr>
-      <tr>
-        <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,
-            thumbnailUnlockedUrl,
-            sourceUrl,
-          }) => (
-            <td key={mimeType} className="align-top">
-              <LockedAttachment.Sent
-                title={title}
-                thumbnailUrl={thumbnailUrl}
-                mimeType={mimeType}
-                detail={detail}
-                amountText="AU$9.99"
-                paymentStatus="paid"
-                onFetchSource={async () => {
-                  await new Promise((resolve) => setTimeout(resolve, 1500))
-                  return {
-                    sourceUrl: sourceUrl,
-                    thumbnailUrl: thumbnailUnlockedUrl,
-                  }
-                }}
-              />
-            </td>
-          )
-        )}
-      </tr>
-    </tbody>
-  </Table>
+export const Document: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Document')} />
+)
+
+export const Unknown: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Unknown')} />
 )
 
 export const Gallery: StoryFn = () => {
@@ -266,185 +419,109 @@ export const Gallery: StoryFn = () => {
   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>
+    <MatrixTable>
+      <MatrixTableRow
+        label="Preview"
+        received={null}
+        sent={
+          <LockedAttachment.Composer
+            detail={GALLERY_DETAIL}
+            gallery={GALLERY_ITEMS}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Composer"
+        received={null}
+        sent={
+          <LockedAttachment.Composer
+            title={GALLERY_TITLE}
+            detail={GALLERY_DETAIL}
+            amountText="AU$50.00"
+            gallery={GALLERY_ITEMS}
+            onDismiss={() => alert('Dismissed gallery')}
+            onEditClick={() => alert('Edit gallery')}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Idle"
+        received={
+          <LockedAttachment.Media
+            isMine={false}
+            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')}
+          />
+        }
+        sent={
+          <LockedAttachment.Media
+            isMine
+            title={GALLERY_TITLE}
+            detail={GALLERY_DETAIL}
+            amountText="AU$50.00"
+            gallery={GALLERY_ITEMS}
+          />
+        }
+      />
+      <MatrixTableRow
+        label={
+          <>
+            Unlocking
+            <br />
+            (pre-purchase)
+          </>
+        }
+        received={
+          <LockedAttachment.Media
+            isMine={false}
+            title={GALLERY_TITLE}
+            detail={GALLERY_DETAIL}
+            amountText="AU$50.00"
+            gallery={GALLERY_ITEMS}
+            isUnlocking
+            onDownloadClick={() => alert('Download gallery')}
+          />
+        }
+        // Sender never unlocks their own message — no distinct state to show.
+        sent={null}
+      />
+      <MatrixTableRow
+        label="Purchased"
+        received={
+          <LockedAttachment.Media
+            isMine={false}
+            title={GALLERY_TITLE}
+            detail={GALLERY_DETAIL}
+            amountText="AU$50.00"
+            paymentStatus="paid"
+            gallery={GALLERY_ITEMS}
+            onUnlockClick={() => alert('Unlock clicked')}
+            onDownloadClick={() => alert('Download gallery')}
+          />
+        }
+        sent={
+          <LockedAttachment.Media
+            isMine
+            title={GALLERY_TITLE}
+            detail={GALLERY_DETAIL}
+            amountText="AU$50.00"
+            paymentStatus="paid"
+            gallery={GALLERY_ITEMS}
+          />
+        }
+      />
+    </MatrixTable>
   )
 }
-
-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>
-  )
-}
-// LockedAttachment.Received autoplays the video preview once paid; even with
-// our SMIL/CSS animation freeze the <video> element advances frames
-// independently and produces a non-deterministic snapshot. Skip in Chromatic.
-Received.parameters = { chromatic: { disableSnapshot: true } }