@linktr.ee/messaging-react 4.1.5-rc-1786947787 → 4.1.5

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D0h8u2Iq.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-9elRVMIF.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -208,7 +208,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onOutboundClick' | 'resolveOutbound' | 'showChannelInfo' | 'composerInput' | 'attachmentPreviewList'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onOutboundClick' | 'resolveOutbound' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-CBGh9Qyj.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-qKUd4Fz2.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.5-rc-1786947787",
+  "version": "4.1.5",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.4.0-rc-1786947787",
+    "@linktr.ee/messaging-core": "^2.4.0",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/CustomMessage/CustomMessage.test.tsx

@@ -60,6 +60,8 @@ vi.mock('./MessageTag', () => ({
   isMediaAttachmentMessage: () => false,
   isTextAttachmentMessage: () => false,
   isTipOnlyMessage: () => false,
+  isTipMessage: () => false,
+  hasPaidDeliveryTag: () => false,
 }))
 
 vi.mock('./LockedAttachment', () => ({

package/src/components/CustomMessage/MessageTag.tsx

@@ -29,7 +29,7 @@ const SparkleIcon = ({ size = 15 }: { size?: number }) => (
 )
 
 /** Check if a message is a tip based on metadata */
-const isTipMessage = (message: LocalMessage): boolean => {
+export const isTipMessage = (message: LocalMessage): boolean => {
   return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.TIP
 }
 
@@ -67,6 +67,15 @@ const isTipOrPaidMessage = (message: LocalMessage): boolean => {
   return isTipMessage(message) || isPaidMessage(message)
 }
 
+/** Check if the footer tag on this message already reads "Delivered with …" */
+export const hasPaidDeliveryTag = (message: LocalMessage): boolean => {
+  return (
+    isTipOrPaidMessage(message) &&
+    !isTipOnlyMessage(message) &&
+    !!message.metadata?.amount_text
+  )
+}
+
 /** Check if a message is a tip/paid-only message (no text) */
 export const isTipOnlyMessage = (message: LocalMessage): boolean => {
   return isTipOrPaidMessage(message) && !message.text?.trim()

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -391,6 +391,147 @@ describe('SentMessageDeliveryStatus', () => {
     expect(screen.queryByTestId('sending-slot')).not.toBeInTheDocument()
   })
 
+  it.each([
+    ['paid', 'MESSAGE_PAID'],
+    ['tip', 'MESSAGE_TIP'],
+  ])('does not render the delivery stamp on a %s message', (_label, type) => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-2',
+        text: 'thanks!',
+        metadata: { custom_type: type, amount_text: '$10.00' },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    for (const slot of TERMINAL_SLOTS) {
+      expect(screen.queryByTestId(slot)).not.toBeInTheDocument()
+    }
+    expect(screen.queryByTestId('sending-slot')).not.toBeInTheDocument()
+  })
+
+  it('keeps the delivery stamp on a textless paid message, which has no footer tag', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-2',
+        metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    for (const slot of TERMINAL_SLOTS) {
+      expect(screen.getByTestId(slot)).toHaveTextContent(/delivered/i)
+    }
+  })
+
+  it('does not render the sending stamp on a paid message', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-2',
+        status: 'sending',
+        text: 'thanks!',
+        metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(screen.queryByTestId('sending-slot')).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('sent-message-sending-status')
+    ).not.toBeInTheDocument()
+  })
+
+  it('renders "Delivered" instead of "Sending" on a pending textless tip', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-2',
+        status: 'sending',
+        metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.00' },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(screen.getByTestId('sending-slot')).toHaveTextContent(/delivered/i)
+    expect(
+      screen.queryByTestId('sent-message-sending-status')
+    ).not.toBeInTheDocument()
+  })
+
+  it('keeps "Failed to send" on a tip that fails', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-2',
+        status: 'failed',
+        type: 'regular',
+        metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.00' },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(screen.getByTestId('sent-message-failed-status')).toHaveTextContent(
+      /failed to send/i
+    )
+  })
+
+  it('keeps the failed and outbound stamps on a paid message', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-2',
+        status: 'failed',
+        type: 'regular',
+        text: 'thanks!',
+        metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    const { rerender } = renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(screen.getByTestId('sent-message-failed-status')).toHaveTextContent(
+      /failed to send/i
+    )
+
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-2',
+        text: 'thanks!',
+        metadata: {
+          custom_type: 'MESSAGE_PAID',
+          amount_text: '$10.00',
+          outbound_id: 'outbound-1',
+        },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+    rerender(
+      <SentMessageDeliveryStatus
+        resolvedOutbound={{ id: 'automation-1', name: 'July 9th Class' }}
+      />
+    )
+
+    expect(
+      screen.getByTestId('sent-message-outbound-status')
+    ).toHaveTextContent('July 9th Class')
+    expect(screen.queryByText('•')).not.toBeInTheDocument()
+  })
+
   it('does not render failure status for a received message or thread message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1', status: 'failed', type: 'regular' },

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -13,6 +13,8 @@ import {
 
 import type { OutboundClickHandler, ResolvedOutbound } from '../../types'
 
+import { hasPaidDeliveryTag, isTipMessage } from './MessageTag'
+
 /**
  * Message status stamps for sending and terminal `MessageStatus` states
  * (sent / delivered / read), plus failed messages.
@@ -159,6 +161,11 @@ const FailedStatus = () => (
  * latest-message-in-thread gate; failed messages bypass `MessageStatus`
  * because it has no failed slot and are shown on every own, non-thread
  * failed message.
+ *
+ * Messages whose footer tag already reads "Delivered with $10 message" skip
+ * this label so delivery is only claimed once (MES-1480); failed and broadcast
+ * stamps still apply.
+ * Tips read as delivered while still pending; a failed tip still shows Failed.
  */
 export const SentMessageDeliveryStatus = ({
   onOutboundClick,
@@ -199,12 +206,14 @@ export const SentMessageDeliveryStatus = ({
       />
     ) : null
 
-  const messageStatus = (
+  const messageStatus = hasPaidDeliveryTag(message) ? null : (
     <MessageStatus
       MessageSentStatus={DeliveredStatus}
       MessageDeliveredStatus={DeliveredStatus}
       MessageReadStatus={DeliveredStatus}
-      MessageSendingStatus={SendingStatus}
+      MessageSendingStatus={
+        isTipMessage(message) ? DeliveredStatus : SendingStatus
+      }
     />
   )
 
@@ -215,7 +224,7 @@ export const SentMessageDeliveryStatus = ({
   return (
     <span className="sent-message-status-row">
       {messageStatus}
-      {isLatestRealMessage && (
+      {messageStatus && isLatestRealMessage && (
         <span className="sent-message-outbound-separator" aria-hidden="true">
           •
         </span>

package/src/components/MessagingShell/MessagingShell.test.tsx

@@ -125,26 +125,6 @@ describe('MessagingShell', () => {
     })
   })
 
-  it('forwards attachmentPreviewList to the selected channel view', async () => {
-    queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
-    const AttachmentPreviewList = () => <div>staged attachment</div>
-
-    renderWithProviders(
-      <MessagingShell
-        initialParticipantFilter="other-1"
-        attachmentPreviewList={AttachmentPreviewList}
-      />
-    )
-
-    await waitFor(() => {
-      expect(screen.getByTestId('channel-view')).toBeInTheDocument()
-    })
-
-    expect(capturedChannelViewProps.attachmentPreviewList).toBe(
-      AttachmentPreviewList
-    )
-  })
-
   it('calls onExitConversation and renders "Conversation ended" when the user leaves the conversation', async () => {
     queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
     const onExit = vi.fn()

package/src/components/MessagingShell/index.tsx

@@ -43,7 +43,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onMessageLinkClick,
   showChannelInfo,
   composerInput,
-  attachmentPreviewList,
 }) => {
   const {
     client,
@@ -270,7 +269,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           onMessageLinkClick={onMessageLinkClick}
           showChannelInfo={showChannelInfo}
           composerInput={composerInput}
-          attachmentPreviewList={attachmentPreviewList}
         />
       </div>
     </div>

package/src/types.ts

@@ -453,7 +453,6 @@ export type ChannelViewPassthroughProps = Pick<
   | 'resolveOutbound'
   | 'showChannelInfo'
   | 'composerInput'
-  | 'attachmentPreviewList'
 >
 
 /**