@linktr.ee/messaging-react 3.10.0 → 3.11.0-rc-1783756377

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -126,6 +126,7 @@ interface TemplateProps {
       attachment_mime_type?: string
       attachment_thumbnail?: string
       attachment_detail?: string
+      attachment_content_type?: 'text' | 'media'
     }
   }>
 }
@@ -416,7 +417,59 @@ LockedAttachment.args = {
   ],
 }
 
-
+export const LockedTextAttachment: StoryFn<TemplateProps> = Template.bind({})
+LockedTextAttachment.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Can you send me the details privately?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      // Empty text: the real content is redacted server-side until purchase,
+      // so the bubble renders the blurred placeholder instead.
+      text: '',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        attachment_content_type: 'text',
+      },
+    },
+    {
+      id: 'msg-3',
+      text: '',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        payment_status: 'paid',
+        attachment_content_type: 'text',
+      },
+    },
+    {
+      id: 'msg-4',
+      // Buyer reveal: backend writes the real text back onto the message.
+      text: "Here's the address — see you Thursday at 7!",
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        payment_status: 'paid',
+        attachment_content_type: 'text',
+      },
+    },
+  ],
+}
+LockedTextAttachment.parameters = {
+  docs: {
+    description: {
+      story:
+        'A paid text-only message renders as a regular bubble with blurred placeholder copy (msg-2: pending, msg-3: purchased-but-not-yet-revealed) until the real text is revealed (msg-4).',
+    },
+  },
+}
 
 export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
 ChatbotVariants.args = {

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

@@ -0,0 +1,541 @@
+import type { Meta, StoryFn } from '@storybook/react'
+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="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">
+            Visitor
+          </th>
+          <th className="pb-2 text-left text-xs font-medium text-black/40">
+            Creator
+          </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>
+)
+
+/**
+ * Deliberately renders WITHOUT any `.str-chat` ancestor or
+ * `str-chat__message*` structure — the real Composer/preview surfaces this
+ * card renders in outside a message thread. If a card looks wrong here, it's
+ * leaning on ambient stream-chat-react CSS instead of its own explicit
+ * styling.
+ */
+const MatrixTableCell: React.FC<{
+  isMine: boolean
+  children: React.ReactNode
+}> = ({ children }) => <div>{children}</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="Draft"
+        received={null}
+        sent={
+          <LockedAttachment
+            isDraft
+            contentType="text"
+            renderedText={purchasedMessage?.text}
+            amountText="AU$4.99"
+            onDismiss={() => alert('Removed')}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Preview"
+        received={null}
+        sent={
+          <LockedAttachment
+            isPreview
+            contentType="text"
+            placeholderAmountText="AU$0.00"
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Idle"
+        received={
+          <LockedAttachment
+            isMine={false}
+            contentType="text"
+            amountText="AU$4.99"
+            isUnlocking={isUnlocking}
+            onUnlockClick={() => {
+              setUnlocking(true)
+              setTimeout(() => setUnlocking(false), 1500)
+            }}
+          />
+        }
+        sent={
+          <LockedAttachment
+            isMine
+            contentType="text"
+            amountText="AU$4.99"
+            paymentStatus="pending"
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Unlocking"
+        received={
+          <LockedAttachment
+            isMine={false}
+            contentType="text"
+            amountText="AU$4.99"
+            isUnlocking
+          />
+        }
+        sent={null}
+      />
+      <MatrixTableRow
+        label="Purchased"
+        received={
+          <LockedAttachment
+            isMine={false}
+            contentType="text"
+            amountText="AU$4.99"
+            paymentStatus="paid"
+            renderedText={<MessageText message={purchasedMessage} />}
+          />
+        }
+        sent={
+          <LockedAttachment
+            isMine
+            contentType="text"
+            amountText="AU$4.99"
+            paymentStatus="paid"
+            renderedText={<MessageText message={purchasedMessage} />}
+          />
+        }
+      />
+    </MatrixTable>
+  )
+}
+
+const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
+const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
+const VIDEO_SOURCE = '/video-source.mp4'
+
+const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
+const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
+const AUDIO_SOURCE = '/audio-source.mp3'
+
+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 VARIANTS = [
+  {
+    label: 'Video',
+    title: "Alicia's Workout Plan",
+    mimeType: 'video/mp4',
+    detail: '1:20',
+    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: VIDEO_THUMBNAIL,
+    sourceUrl: VIDEO_SOURCE,
+  },
+  {
+    label: 'Audio',
+    title: 'Morning Meditation',
+    mimeType: 'audio/mpeg',
+    detail: '4:35',
+    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: AUDIO_THUMBNAIL,
+    sourceUrl: AUDIO_SOURCE,
+  },
+  {
+    label: 'Image',
+    title: 'Picture of my cat',
+    mimeType: 'image/jpeg',
+    detail: '3.2 MB',
+    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: IMAGE_THUMBNAIL,
+    sourceUrl: IMAGE_SOURCE,
+  },
+  {
+    label: 'Document',
+    title: 'Strength Training Guide',
+    mimeType: 'application/zip',
+    detail: '14 files',
+    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: DOCUMENT_THUMBNAIL,
+    sourceUrl: DOCUMENT_SOURCE,
+  },
+  {
+    label: 'Unknown',
+    title: 'Unknown Attachment',
+    mimeType: 'application/octet-stream',
+    detail: '2.4 MB',
+    thumbnailUrl: undefined,
+    thumbnailUnlockedUrl: undefined,
+    sourceUrl: DOCUMENT_SOURCE,
+  },
+]
+
+/**
+ * A mixed-media collection (a video + 3 photos) used by the Gallery stories
+ * below. `LockedAttachment` 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,
+    sourceUrl: VIDEO_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: IMAGE_THUMBNAIL,
+    sourceUrl: IMAGE_SOURCE,
+  },
+  {
+    mimeType: 'application/pdf',
+    thumbnailUrl: DOCUMENT_THUMBNAIL,
+    sourceUrl: DOCUMENT_SOURCE,
+  },
+  {
+    mimeType: 'audio/mpeg',
+    thumbnailUrl: AUDIO_THUMBNAIL,
+    sourceUrl: AUDIO_SOURCE,
+  },
+]
+
+const GALLERY_DETAIL = '4 items'
+const GALLERY_TITLE = 'Workout Guide'
+
+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="Draft"
+        received={null}
+        sent={
+          <LockedAttachment
+            isDraft
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            contentType="media"
+            mimeType={mimeType}
+            detail={detail}
+            amountText="AU$9.99"
+            onDismiss={() => alert('Dismissed')}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Preview"
+        received={null}
+        sent={
+          <LockedAttachment
+            isPreview
+            placeholderTitle="Attachment title"
+            placeholderAmountText="AU$0.00"
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            contentType="media"
+            detail={detail}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Idle"
+        received={
+          <LockedAttachment
+            isMine={false}
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            contentType="media"
+            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
+            isMine
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            contentType="media"
+            detail={detail}
+            amountText="AU$9.99"
+            onFetchSource={fetchSource}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Unlocking"
+        received={
+          <LockedAttachment
+            isMine={false}
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            contentType="media"
+            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
+            isMine={false}
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            contentType="media"
+            detail={detail}
+            amountText="AU$9.99"
+            paymentStatus="paid"
+            onUnlockClick={() => alert('Unlock clicked')}
+            onDownloadClick={() => alert('Download clicked')}
+            onFetchSource={fetchSource}
+          />
+        }
+        sent={
+          <LockedAttachment
+            isMine
+            title={title}
+            thumbnailUrl={thumbnailUrl}
+            mimeType={mimeType}
+            contentType="media"
+            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 (contentType="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 } }
+
+export const Audio: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Audio')} />
+)
+
+export const Image: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Image')} />
+)
+
+export const Document: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Document')} />
+)
+
+export const Unknown: StoryFn = () => (
+  <MediaMatrix variant={variantByLabel('Unknown')} />
+)
+
+export const Gallery: StoryFn = () => {
+  const [isPaid, setPaid] = useState(false)
+  const [isUnlocking, setUnlocking] = useState(false)
+
+  return (
+    <MatrixTable>
+      <MatrixTableRow
+        label="Draft"
+        received={null}
+        sent={
+          <LockedAttachment
+            isDraft
+            contentType="media"
+            title={GALLERY_TITLE}
+            detail={GALLERY_DETAIL}
+            amountText="AU$50.00"
+            gallery={GALLERY_ITEMS}
+            onDismiss={() => alert('Dismissed gallery')}
+            onEditClick={() => alert('Edit gallery')}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Preview"
+        received={null}
+        sent={
+          <LockedAttachment
+            isPreview
+            contentType="media"
+            placeholderTitle="Attachment title"
+            detail={GALLERY_DETAIL}
+            placeholderAmountText="AU$0.00"
+            gallery={GALLERY_ITEMS}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Idle"
+        received={
+          <LockedAttachment
+            isMine={false}
+            contentType="media"
+            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
+            isMine
+            contentType="media"
+            title={GALLERY_TITLE}
+            detail={GALLERY_DETAIL}
+            amountText="AU$50.00"
+            gallery={GALLERY_ITEMS}
+          />
+        }
+      />
+      <MatrixTableRow
+        label="Unlocking"
+        received={
+          <LockedAttachment
+            isMine={false}
+            contentType="media"
+            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
+            isMine={false}
+            contentType="media"
+            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
+            isMine
+            contentType="media"
+            title={GALLERY_TITLE}
+            detail={GALLERY_DETAIL}
+            amountText="AU$50.00"
+            paymentStatus="paid"
+            gallery={GALLERY_ITEMS}
+          />
+        }
+      />
+    </MatrixTable>
+  )
+}