@linktr.ee/messaging-react 1.30.0 → 1.31.0-rc-1776677746

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.30.0",
+  "version": "1.31.0-rc-1776677746",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelView.tsx

@@ -207,11 +207,9 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick?: () => void
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
-  onAttachmentUnlock?: (
-    message: LocalMessage,
-    channel: ChannelType
-  ) => Promise<LockedAttachmentSource>
-  onAttachmentDownload?: (message: LocalMessage, channel: ChannelType) => void
+  onAttachmentUnlockClick?: (message: LocalMessage, channel: ChannelType) => void
+  onAttachmentDownloadClick?: (message: LocalMessage, channel: ChannelType) => void
+  onAttachmentUnlocked?: (message: LocalMessage, channel: ChannelType) => LockedAttachmentSource
   renderChannelBanner?: () => React.ReactNode
   customProfileContent?: React.ReactNode
   customChannelActions?: React.ReactNode
@@ -232,8 +230,9 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick,
   showStarButton = false,
   chatbotVotingEnabled = false,
-  onAttachmentUnlock,
-  onAttachmentDownload,
+  onAttachmentUnlockClick,
+  onAttachmentDownloadClick,
+  onAttachmentUnlocked,
   renderChannelBanner,
   customProfileContent,
   customChannelActions,
@@ -289,8 +288,9 @@ const ChannelViewInner: React.FC<{
               <CustomMessage
                 {...props}
                 chatbotVotingEnabled={chatbotVotingEnabled}
-                onAttachmentUnlock={onAttachmentUnlock}
-                onAttachmentDownload={onAttachmentDownload}
+                onAttachmentUnlockClick={onAttachmentUnlockClick}
+                onAttachmentDownloadClick={onAttachmentDownloadClick}
+                onAttachmentUnlocked={onAttachmentUnlocked}
               />
             )
 
@@ -378,8 +378,9 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onMessageSent,
     showStarButton = false,
     chatbotVotingEnabled = false,
-    onAttachmentUnlock,
-    onAttachmentDownload,
+    onAttachmentUnlockClick,
+    onAttachmentDownloadClick,
+    onAttachmentUnlocked,
     renderChannelBanner,
     customProfileContent,
     customChannelActions,
@@ -458,8 +459,9 @@ export const ChannelView = React.memo<ChannelViewProps>(
             onReportParticipantClick={onReportParticipantClick}
             showStarButton={showStarButton}
             chatbotVotingEnabled={chatbotVotingEnabled}
-            onAttachmentUnlock={onAttachmentUnlock}
-            onAttachmentDownload={onAttachmentDownload}
+            onAttachmentUnlockClick={onAttachmentUnlockClick}
+            onAttachmentDownloadClick={onAttachmentDownloadClick}
+            onAttachmentUnlocked={onAttachmentUnlocked}
             renderChannelBanner={renderChannelBanner}
             customProfileContent={customProfileContent}
             customChannelActions={customChannelActions}

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

@@ -2,13 +2,8 @@ import '../../stream-custom-data'
 
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useEffect } from 'react'
-import {
-  Channel as ChannelType,
-  LocalMessage,
-  QueryChannelAPIResponse,
-  StreamChat,
-} from 'stream-chat'
-import { Channel, Chat, MessageList, Window } from 'stream-chat-react'
+import { Channel as ChannelType, QueryChannelAPIResponse, StreamChat, } from 'stream-chat'
+import { Channel, Chat, MessageList, MessageUIComponentProps, Window } from 'stream-chat-react'
 
 import {
   currentUserArgType,
@@ -140,24 +135,21 @@ const TemplateInner: React.FC<{
   const isVisitor = currentUser.id === storyUsers.visitor.id
 
   const MessageComponent = React.useMemo(() => {
-    const handleAttachmentUnlock = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      return { source: '/video-source.mp4' }
+    const handleAttachmentUnlockClicked = () => {
+      alert('Unlocking...')
     }
 
-    const handleAttachmentDownload = (m: LocalMessage) => {
-      alert(`Download: ${m.metadata?.attachment_title}`)
+    const handleAttachmentDownloadClicked = () => {
+      alert(`Downloading...`)
     }
 
-    // eslint-disable-next-line react/display-name
-    return function (props) {
+    return function CustomMessageComponent(props: MessageUIComponentProps) {
       return (
         <CustomMessage
           {...props}
-          onAttachmentUnlock={isVisitor ? handleAttachmentUnlock : undefined}
-          onAttachmentDownload={
-            isVisitor ? handleAttachmentDownload : undefined
-          }
+          onAttachmentUnlockClick={isVisitor ? () => handleAttachmentUnlockClicked() : undefined}
+          onAttachmentDownloadClick={isVisitor ? () => handleAttachmentDownloadClicked() : undefined}
+          onAttachmentUnlocked={undefined}
         />
       )
     }
@@ -311,8 +303,8 @@ MixedTags.args = {
   ],
 }
 
-export const PaidAttachment: StoryFn<TemplateProps> = Template.bind({})
-PaidAttachment.args = {
+export const LockedAttachment: StoryFn<TemplateProps> = Template.bind({})
+LockedAttachment.args = {
   messages: [
     {
       id: 'msg-1',

package/src/components/CustomMessage/index.tsx

@@ -37,18 +37,24 @@ import LockedAttachment, { type LockedAttachmentSource } from '../LockedAttachme
 import { MessageTag, isAttachmentMessage, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
 
-type CustomMessageWithContextProps = MessageContextValue & {
+type CustomMessageProps = {
   chatbotVotingEnabled?: boolean
-  onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource>
-  onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
+  onAttachmentUnlockClick?: (message: LocalMessage, channel: Channel) => void
+  onAttachmentDownloadClick?: (message: LocalMessage, channel: Channel) => void
+  onAttachmentUnlocked?: (message: LocalMessage, channel: Channel) => LockedAttachmentSource
 }
 
+type CustomMessageUIComponentProps = MessageUIComponentProps & CustomMessageProps
+
+type CustomMessageWithContextProps = MessageContextValue & CustomMessageProps
+
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     additionalMessageInputProps,
     chatbotVotingEnabled,
-    onAttachmentUnlock,
-    onAttachmentDownload,
+    onAttachmentUnlockClick,
+    onAttachmentDownloadClick,
+    onAttachmentUnlocked,
     editing,
     endOfGroup,
     firstOfGroup,
@@ -205,13 +211,14 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             <div className={classNames("flex flex-col gap-1", isMine ? "items-end" : "items-start")}>
               <LockedAttachment
                 title={message.metadata?.attachment_title}
-                mimeType={message.metadata?.attachment_mime_type}
-                thumbnail={message.metadata?.attachment_thumbnail}
+                mimeType={message.metadata?.attachment_mime_type ?? 'application/octet-stream'}
+                thumbnailUrl={message.metadata?.attachment_thumbnail}
                 amountText={message.metadata?.amount_text}
                 detail={message.metadata?.attachment_detail}
                 paymentStatus={message.metadata?.payment_status}
-                onUnlock={onAttachmentUnlock ? () => onAttachmentUnlock(message, channel) : undefined}
-                onDownload={onAttachmentDownload ? () => onAttachmentDownload(message, channel) : undefined}
+                onUnlockClick={onAttachmentUnlockClick ? () => onAttachmentUnlockClick(message, channel) : undefined}
+                onDownloadClick={onAttachmentDownloadClick ? () => onAttachmentDownloadClick(message, channel) : undefined}
+                onUnlocked={onAttachmentUnlocked ? () => onAttachmentUnlocked(message, channel) : undefined} 
               />
               {message.text && (
                 <div className="str-chat__message-bubble-wrapper">
@@ -287,19 +294,14 @@ const MemoizedCustomMessage = React.memo(
   CustomMessageWithContext,
   (prev, next) => {
     if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
-    if (prev.onAttachmentUnlock !== next.onAttachmentUnlock) return false
-    if (prev.onAttachmentDownload !== next.onAttachmentDownload) return false
+    if (prev.onAttachmentUnlockClick !== next.onAttachmentUnlockClick) return false
+    if (prev.onAttachmentDownloadClick !== next.onAttachmentDownloadClick) return false
+    if (prev.onAttachmentUnlocked !== next.onAttachmentUnlocked) return false
     return areMessageUIPropsEqual(prev, next)
   }
 ) as typeof CustomMessageWithContext
 
-export const CustomMessage = (
-  props: MessageUIComponentProps & {
-    chatbotVotingEnabled?: boolean
-    onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource>
-    onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
-  }
-) => {
+export const CustomMessage = (props: CustomMessageUIComponentProps) => {
   const messageContext = useMessageContext('CustomMessage')
   return <MemoizedCustomMessage {...messageContext} {...props} />
 }

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

@@ -22,82 +22,46 @@ const meta: Meta = {
 }
 export default meta
 
-const withDelay = <T,>(fn: () => Promise<T> | T) => async (): Promise<T> => {
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-  return fn()
-}
-
 const VARIANTS = [
   {
     label: 'Video',
     title: "Alicia's Workout Plan",
     mimeType: 'video/mp4',
     detail: '1:20',
-    thumbnail: VIDEO_THUMBNAIL_BLURRED,
-    source: VIDEO_SOURCE,
+    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    sourceUrl: VIDEO_SOURCE,
   },
   {
     label: 'Audio',
     title: 'Morning Meditation',
     mimeType: 'audio/mpeg',
     detail: '4:35',
-    thumbnail: AUDIO_THUMBNAIL,
-    source: AUDIO_SOURCE,
+    thumbnailUrl: AUDIO_THUMBNAIL,
+    sourceUrl: AUDIO_SOURCE,
   },
   {
     label: 'Image',
     title: 'Picture of my cat',
     mimeType: 'image/jpeg',
     detail: '3.2 MB',
-    thumbnail: IMAGE_THUMBNAIL_BLURRED,
-    source: IMAGE_SOURCE,
+    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    sourceUrl: IMAGE_SOURCE,
   },
   {
     label: 'Document',
     title: 'Strength Training Guide',
     mimeType: 'application/zip',
     detail: '14 files',
-    thumbnail: DOCUMENT_THUMBNAIL,
-    source: DOCUMENT_SOURCE,
+    thumbnailUrl: DOCUMENT_THUMBNAIL,
+    sourceUrl: DOCUMENT_SOURCE,
   },
   {
     label: 'Unknown',
     title: 'Unknown Attachment',
     mimeType: 'application/octet-stream',
     detail: undefined,
-    thumbnail: undefined,
-    source: DOCUMENT_SOURCE,
-  },
-]
-
-const NO_THUMBNAIL_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,
+    thumbnailUrl: undefined,
+    sourceUrl: DOCUMENT_SOURCE,
   },
 ]
 
@@ -107,9 +71,7 @@ const Table = ({ children }: { children: React.ReactNode }) => (
   </div>
 )
 
-const TableHead = ({
-  variants,
-}: {
+const TableHead = ({ variants, }: {
   variants: { label: string; mimeType: string }[]
 }) => (
   <thead>
@@ -132,57 +94,60 @@ export const Visitor: StoryFn = () => (
     <TableHead variants={VARIANTS} />
     <tbody>
       <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Locked
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
               amountText="AU$9.99"
-              thumbnail={thumbnail}
+              thumbnailUrl={thumbnailUrl}
               mimeType={mimeType}
               detail={detail}
-              onUnlock={withDelay(() => ({ source }))}
-              onDownload={() => {}}
+              onUnlockClick={() => {}}
+              onDownloadClick={() => {}}
+              onUnlocked={undefined}
             />
           </td>
         ))}
       </tr>
       <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Purchased
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
               amountText="AU$9.99"
-              thumbnail={thumbnail}
+              thumbnailUrl={thumbnailUrl}
               mimeType={mimeType}
               detail={detail}
               paymentStatus="paid"
-              onUnlock={withDelay(() => ({ source }))}
-              onDownload={() => {}}
+              onUnlockClick={() => {}}
+              onDownloadClick={() => {}}
+              onUnlocked={undefined}
             />
           </td>
         ))}
       </tr>
       <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Unlocked
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
               paymentStatus="paid"
-              onDownload={() => {}}
+              onUnlockClick={() => {}}
+              onDownloadClick={() => {}}
+              onUnlocked={() => ({ sourceUrl })}
             />
           </td>
         ))}
@@ -196,32 +161,33 @@ export const Creator: StoryFn = () => (
     <TableHead variants={VARIANTS} />
     <tbody>
       <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Preview
         </td>
-        {VARIANTS.map(({ mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isPreview
-              thumbnail={thumbnail}
-              source={source}
+              isPreview={true}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               placeholderAmountText="A$0.00"
+              onDismiss={undefined}
             />
           </td>
         ))}
       </tr>
       <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Pending
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
@@ -231,37 +197,38 @@ export const Creator: StoryFn = () => (
         ))}
       </tr>
       <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sent
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              
               title={title}
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
+              onDismiss={undefined}
             />
           </td>
         ))}
       </tr>
       <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sold
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
               paymentStatus="paid"
+              onDismiss={undefined}
             />
           </td>
         ))}
@@ -270,61 +237,3 @@ export const Creator: StoryFn = () => (
   </Table>
 )
 
-export const NoThumbnail: StoryFn = () => (
-  <Table>
-    <TableHead variants={NO_THUMBNAIL_VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
-          Creator
-        </td>
-        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment
-              title={title}
-              source={source}
-              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">
-          Locked
-        </td>
-        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment
-              title={title}
-              amountText="AU$9.99"
-              mimeType={mimeType}
-              detail={detail}
-              onUnlock={withDelay(() => ({ source }))}
-              onDownload={() => {}}
-            />
-          </td>
-        ))}
-      </tr>
-      <tr>
-        <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
-          Unlocked
-        </td>
-        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment
-              title={title}
-              source={source}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-              paymentStatus="paid"
-              onDownload={() => {}}
-            />
-          </td>
-        ))}
-      </tr>
-    </tbody>
-  </Table>
-)