@linktr.ee/messaging-react 1.25.1 → 1.26.1-rc-1776055454

package/src/components/CustomMessage/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import React, { useMemo, useState } from 'react'
+import { type Channel, type LocalMessage } from 'stream-chat'
 import {
   Attachment as DefaultAttachment,
   EditMessageModal as DefaultEditMessageModal,
@@ -20,6 +21,7 @@ import {
   isMessageBounced,
   messageHasAttachments,
   messageHasReactions,
+  useChannelStateContext,
   useComponentContext,
   useChatContext,
   useMessageContext,
@@ -30,18 +32,23 @@ import {
 
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { Avatar } from '../Avatar'
+import LockedAttachmentCard from '../LockedAttachmentCard'
 
-import { MessageTag, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
+import { MessageTag, isAttachmentMessage, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
 
 type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
+  onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<string>
+  onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     additionalMessageInputProps,
     chatbotVotingEnabled,
+    onAttachmentUnlock,
+    onAttachmentDownload,
     editing,
     endOfGroup,
     firstOfGroup,
@@ -58,7 +65,10 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   } = props
 
   const { client } = useChatContext('CustomMessage')
+  const { channel } = useChannelStateContext('CustomMessage')
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
+  const [unlocking, setUnlocking] = useState(false)
+  const [attachmentSource, setAttachmentSource] = useState<string | undefined>(undefined)
   const reminder = useMessageReminder(message.id)
   const { selected: voteState, voteUp, voteDown } = useMessageVote(message)
 
@@ -144,6 +154,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const poll = message.poll_id && client.polls.fromState(message.poll_id)
   const isTipOnly = isTipOnlyMessage(message)
   const isChatbot = isChatbotMessage(message)
+  const isAttachment = isAttachmentMessage(message)
   const hasRenderableAttachments = !!(
     finalAttachments?.length && !message.quoted_message
   )
@@ -192,7 +203,29 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isTipOnly ? (
+          {isAttachment ? (
+            <div className="flex flex-col gap-1">
+              <LockedAttachmentCard
+                title={message.metadata?.attachment_title ?? ''}
+                mimeType={message.metadata?.attachment_mime_type ?? 'application/octet-stream'}
+                thumbnail={message.metadata?.attachment_thumbnail}
+                amountText={message.metadata?.amount_text}
+                detail={message.metadata?.attachment_detail}
+                source={attachmentSource}
+                isPurchased={message.metadata?.payment_status === 'paid'}
+                loading={unlocking}
+                onUnlock={onAttachmentUnlock ? async () => { setUnlocking(true); try { setAttachmentSource(await onAttachmentUnlock(message, channel)) } catch { /* caller handles errors (e.g. payment cancellation) */ } finally { setUnlocking(false) } } : undefined}
+                onDownload={attachmentSource && onAttachmentDownload ? () => onAttachmentDownload(message, channel) : undefined}
+              />
+              {message.text && (
+                <div className="str-chat__message-bubble-wrapper">
+                  <div className="str-chat__message-bubble">
+                    <MessageText message={message} renderText={renderText} />
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : isTipOnly ? (
             /* Tip-only messages render as a standalone bubble */
             <MessageTag message={message} standalone />
           ) : (
@@ -256,11 +289,20 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
 
 const MemoizedCustomMessage = React.memo(
   CustomMessageWithContext,
-  areMessageUIPropsEqual
+  (prev, next) => {
+    if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
+    if (prev.onAttachmentUnlock !== next.onAttachmentUnlock) return false
+    if (prev.onAttachmentDownload !== next.onAttachmentDownload) return false
+    return areMessageUIPropsEqual(prev, next)
+  }
 ) as typeof CustomMessageWithContext
 
 export const CustomMessage = (
-  props: MessageUIComponentProps & { chatbotVotingEnabled?: boolean }
+  props: MessageUIComponentProps & {
+    chatbotVotingEnabled?: boolean
+    onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<string>
+    onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
+  }
 ) => {
   const messageContext = useMessageContext('CustomMessage')
   return <MemoizedCustomMessage {...messageContext} {...props} />

package/src/components/LockedAttachmentCard/LockedAttachmentCard.stories.tsx

@@ -0,0 +1,351 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useState } from 'react'
+
+import LockedAttachmentCard, { type LockedAttachmentCardProps } from '.'
+
+const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
+const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
+const VIDEO_SOURCE = '/video-source.mp4'
+
+const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
+const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
+const IMAGE_SOURCE = '/image-source.jpg'
+
+const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
+const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
+const DOCUMENT_SOURCE = '/document-source.pdf'
+
+const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
+const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
+const AUDIO_SOURCE = '/audio-source.mp3'
+
+const meta: Meta = {
+  title: 'LockedAttachmentCard',
+  component: LockedAttachmentCard,
+  parameters: { layout: 'centered' },
+}
+export default meta
+
+const Labeled = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div className="flex flex-col gap-2">
+    {children}
+    <span className="text-center text-xs text-black/40">{label}</span>
+  </div>
+)
+
+type InteractiveProps = Omit<LockedAttachmentCardProps, 'onUnlock' | 'onDownload'> & {
+  unlockedSource: string
+  unlockedThumbnail?: string
+}
+
+const Interactive = ({ unlockedSource, unlockedThumbnail, ...props }: InteractiveProps) => {
+  const [source, setSource] = useState<string | undefined>(undefined)
+  const [thumbnail, setThumbnail] = useState(props.thumbnail)
+  const [loading, setLoading] = useState(false)
+
+  const handleUnlock = async () => {
+    setLoading(true)
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    const res = await fetch(unlockedSource)
+    const blob = await res.blob()
+    setSource(URL.createObjectURL(blob))
+    if (unlockedThumbnail) setThumbnail(unlockedThumbnail)
+    setLoading(false)
+  }
+
+  return (
+    <LockedAttachmentCard
+      {...props}
+      thumbnail={thumbnail}
+      source={source}
+      loading={loading}
+      onUnlock={source ? undefined : handleUnlock}
+      onDownload={source ? () => {} : undefined}
+    />
+  )
+}
+
+export const Video: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Alicia's Workout Plan"
+        amountText="AU$9.99"
+        thumbnail={VIDEO_THUMBNAIL_BLURRED}
+        unlockedThumbnail={VIDEO_THUMBNAIL}
+        mimeType="video/mp4"
+        detail="1:20"
+        unlockedSource={VIDEO_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Alicia's Workout Plan"
+        amountText="AU$9.99"
+        thumbnail={VIDEO_THUMBNAIL_BLURRED}
+        unlockedThumbnail={VIDEO_THUMBNAIL}
+        mimeType="video/mp4"
+        detail="1:20"
+        unlockedSource={VIDEO_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Alicia's Workout Plan"
+        thumbnail={VIDEO_THUMBNAIL}
+        source={VIDEO_SOURCE}
+        mimeType="video/mp4"
+        detail="1:20"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+export const Audio: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Morning Meditation"
+        amountText="AU$4.99"
+        thumbnail={AUDIO_THUMBNAIL_BLURRED}
+        unlockedThumbnail={AUDIO_THUMBNAIL}
+        mimeType="audio/mpeg"
+        detail="4:35"
+        unlockedSource={AUDIO_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Morning Meditation"
+        amountText="AU$4.99"
+        thumbnail={AUDIO_THUMBNAIL_BLURRED}
+        unlockedThumbnail={AUDIO_THUMBNAIL}
+        mimeType="audio/mpeg"
+        detail="4:35"
+        unlockedSource={AUDIO_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Morning Meditation"
+        thumbnail={AUDIO_THUMBNAIL}
+        source={AUDIO_SOURCE}
+        mimeType="audio/mpeg"
+        detail="4:35"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+export const Image: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Picture of my cat"
+        amountText="AU$2.99"
+        thumbnail={IMAGE_THUMBNAIL_BLURRED}
+        unlockedThumbnail={IMAGE_THUMBNAIL}
+        mimeType="image/jpeg"
+        detail="3.2 MB"
+        unlockedSource={IMAGE_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Picture of my cat"
+        amountText="AU$2.99"
+        thumbnail={IMAGE_THUMBNAIL_BLURRED}
+        unlockedThumbnail={IMAGE_THUMBNAIL}
+        mimeType="image/jpeg"
+        detail="3.2 MB"
+        unlockedSource={IMAGE_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Picture of my cat"
+        thumbnail={IMAGE_THUMBNAIL}
+        source={IMAGE_SOURCE}
+        mimeType="image/jpeg"
+        detail="3.2 MB"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+export const Document: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Strength Training Guide"
+        amountText="AU$4.99"
+        thumbnail={DOCUMENT_THUMBNAIL_BLURRED}
+        unlockedThumbnail={DOCUMENT_THUMBNAIL}
+        mimeType="application/zip"
+        detail="14 files"
+        unlockedSource={DOCUMENT_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Strength Training Guide"
+        amountText="AU$4.99"
+        thumbnail={DOCUMENT_THUMBNAIL_BLURRED}
+        unlockedThumbnail={DOCUMENT_THUMBNAIL}
+        mimeType="application/zip"
+        detail="14 files"
+        unlockedSource={DOCUMENT_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Strength Training Guide"
+        thumbnail={DOCUMENT_THUMBNAIL}
+        source={DOCUMENT_SOURCE}
+        mimeType="application/zip"
+        detail="14 files"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+const VARIANTS = [
+  { label: 'Video', title: "Alicia's Workout Plan", mimeType: 'video/mp4', detail: '1:20', thumbnail: VIDEO_THUMBNAIL, thumbnailBlurred: VIDEO_THUMBNAIL_BLURRED, source: VIDEO_SOURCE },
+  { label: 'Audio', title: 'Morning Meditation', mimeType: 'audio/mpeg', detail: '4:35', thumbnail: AUDIO_THUMBNAIL, thumbnailBlurred: AUDIO_THUMBNAIL_BLURRED, source: AUDIO_SOURCE },
+  { label: 'Image', title: 'Picture of my cat', mimeType: 'image/jpeg', detail: '3.2 MB', thumbnail: IMAGE_THUMBNAIL, thumbnailBlurred: IMAGE_THUMBNAIL_BLURRED, source: IMAGE_SOURCE },
+  { label: 'Document', title: 'Strength Training Guide', mimeType: 'application/zip', detail: '14 files', thumbnail: DOCUMENT_THUMBNAIL, thumbnailBlurred: DOCUMENT_THUMBNAIL_BLURRED, source: DOCUMENT_SOURCE },
+]
+
+export const Fallback: StoryFn = () => (
+  <div className="flex items-start gap-4 p-12">
+    <Labeled label="Locked">
+      <Interactive
+        title="Unknown Attachment"
+        amountText="AU$9.99"
+        mimeType="application/octet-stream"
+        unlockedSource={DOCUMENT_SOURCE}
+      />
+    </Labeled>
+    <Labeled label="Purchased">
+      <Interactive
+        title="Unknown Attachment"
+        amountText="AU$9.99"
+        mimeType="application/octet-stream"
+        unlockedSource={DOCUMENT_SOURCE}
+        isPurchased
+      />
+    </Labeled>
+    <Labeled label="Unlocked">
+      <LockedAttachmentCard
+        title="Unknown Attachment"
+        source={DOCUMENT_SOURCE}
+        mimeType="application/octet-stream"
+        onDownload={() => {}}
+      />
+    </Labeled>
+  </div>
+)
+
+const NO_POSTER_VARIANTS = [
+  { label: 'Video', title: "Alicia's Workout Plan", mimeType: 'video/mp4', detail: '1:20', source: VIDEO_SOURCE },
+  { label: 'Audio', title: 'Morning Meditation', mimeType: 'audio/mpeg', detail: '4:35', source: AUDIO_SOURCE },
+  { label: 'Image', title: 'Picture of my cat', mimeType: 'image/jpeg', detail: '3.2 MB', source: IMAGE_SOURCE },
+  { label: 'Document', title: 'Strength Training Guide', mimeType: 'application/zip', detail: '14 files', source: DOCUMENT_SOURCE },
+]
+
+export const NoPoster: StoryFn = () => (
+  <div className="p-12">
+    <table className="border-separate border-spacing-4">
+      <thead>
+        <tr>
+          <th className="text-left text-xs font-medium text-black/40 pb-2" />
+          {NO_POSTER_VARIANTS.map(({ label, mimeType }) => (
+            <th key={mimeType} className="text-left text-xs font-medium text-black/40 pb-2">{label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {(['Locked', 'Unlocked'] as const).map(state => (
+          <tr key={state}>
+            <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">{state}</td>
+            {NO_POSTER_VARIANTS.map(({ title, mimeType, detail, source }) => (
+              <td key={mimeType} className="align-top">
+                {state === 'Locked' ? (
+                  <Interactive
+                    title={title}
+                    amountText="AU$9.99"
+                    mimeType={mimeType}
+                    detail={detail}
+                    unlockedSource={source}
+                  />
+                ) : (
+                  <LockedAttachmentCard
+                    title={title}
+                    source={source}
+                    mimeType={mimeType}
+                    detail={detail}
+                    onDownload={() => {}}
+                  />
+                )}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+)
+
+export const CreatorView: StoryFn = () => (
+  <div className="p-12">
+    <table className="border-separate border-spacing-4">
+      <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>
+      <tbody>
+        <tr>
+          <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Unsold</td>
+          {VARIANTS.map(({ title, mimeType, detail, thumbnailBlurred }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachmentCard
+                title={title}
+                thumbnail={thumbnailBlurred}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+              />
+            </td>
+          ))}
+        </tr>
+        <tr>
+          <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Sold</td>
+          {VARIANTS.map(({ title, mimeType, detail, thumbnailBlurred }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachmentCard
+                title={title}
+                thumbnail={thumbnailBlurred}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                isPurchased
+              />
+            </td>
+          ))}
+        </tr>
+      </tbody>
+    </table>
+  </div>
+)