feat: allow for custom ReminderNotification component

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -140,6 +140,7 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'ReactionSelector'
   | 'ReactionsList'
   | 'ReactionsListModal'
+  | 'ReminderNotification'
   | 'SendButton'
   | 'StartRecordingAudioButton'
   | 'TextareaComposer'
@@ -1226,6 +1227,7 @@ const ChannelInner = (
       ReactionSelector: props.ReactionSelector,
       ReactionsList: props.ReactionsList,
       ReactionsListModal: props.ReactionsListModal,
+      ReminderNotification: props.ReminderNotification,
       SendButton: props.SendButton,
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       StopAIGenerationButton: props.StopAIGenerationButton,
@@ -1289,6 +1291,7 @@ const ChannelInner = (
       props.ReactionSelector,
       props.ReactionsList,
       props.ReactionsListModal,
+      props.ReminderNotification,
       props.SendButton,
       props.StartRecordingAudioButton,
       props.StopAIGenerationButton,

src/components/Message/MessageSimple.tsx

@@ -37,7 +37,7 @@ import type { MessageUIComponentProps } from './types';
 
 import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
 import { isDateSeparatorMessage } from '../MessageList';
-import { ReminderNotification } from './ReminderNotification';
+import { ReminderNotification as DefaultReminderNotification } from './ReminderNotification';
 import { useMessageReminder } from './hooks';
 
 type MessageSimpleWithContextProps = MessageContextValue;
@@ -81,6 +81,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
     MessageStatus = DefaultMessageStatus,
     MessageTimestamp = DefaultMessageTimestamp,
     ReactionsList = DefaultReactionList,
+    ReminderNotification = DefaultReminderNotification,
     StreamedMessageText = DefaultStreamedMessageText,
     PinIndicator,
   } = useComponentContext('MessageSimple');

src/components/Message/__tests__/MessageSimple.test.js

@@ -36,6 +36,7 @@ import {
   useMockedApis,
 } from '../../../mock-builders';
 import { MessageBouncePrompt } from '../../MessageBounce';
+import { generateReminderResponse } from '../../../mock-builders/generator/reminder';
 
 expect.extend(toHaveNoViolations);
 
@@ -250,6 +251,28 @@ describe('<MessageSimple />', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('should render custom ReminderNotification component when one is given', async () => {
+    const message = generateAliceMessage({ reminder: generateReminderResponse() });
+    client.reminders.hydrateState([message]);
+    const testId = 'custom-reminder-notification';
+    const CustomReminderNotification = () => <div data-testid={testId} />;
+
+    const { container } = await renderMessageSimple({
+      channelConfigOverrides: {
+        user_message_reminder: true,
+      },
+      components: {
+        ReminderNotification: CustomReminderNotification,
+      },
+      message,
+    });
+
+    expect(await screen.findByTestId(testId)).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
   // FIXME: test relying on deprecated channel config parameter
   it('should render reaction list even though sending reactions is disabled in channel config', async () => {
     const reactions = [generateReaction({ user: bob })];

src/components/Message/index.ts

@@ -10,6 +10,7 @@ export * from './MessageStatus';
 export * from './MessageText';
 export * from './MessageTimestamp';
 export * from './QuotedMessage';
+export * from './ReminderNotification';
 export * from './renderText';
 export * from './types';
 export * from './utils';

src/context/ComponentContext.tsx

@@ -37,6 +37,7 @@ import type {
   ReactionsListModalProps,
   ReactionsListProps,
   RecordingPermissionDeniedNotificationProps,
+  ReminderNotificationProps,
   SendButtonProps,
   StartRecordingAudioButtonProps,
   StreamedMessageTextProps,
@@ -172,6 +173,7 @@ export type ComponentContextValue = {
   /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [ReactionsListModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) */
   ReactionsListModal?: React.ComponentType<ReactionsListModalProps>;
   RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
+  ReminderNotification?: React.ComponentType<ReminderNotificationProps>;
   /** Custom component to display the search UI, defaults to and accepts same props as: [Search](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/Search.tsx) */
   Search?: React.ComponentType<SearchProps>;
   /** Custom component to display the UI where the searched string is entered, defaults to and accepts same props as: [SearchBar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchBar/SearchBar.tsx) */

src/mock-builders/generator/message.js

@@ -1,17 +1,23 @@
 import { nanoid } from 'nanoid';
 
-export const generateMessage = (options) => ({
-  __html: '<p>regular</p>',
-  attachments: [],
-  created_at: new Date(),
-  html: '<p>regular</p>',
-  id: nanoid(),
-  mentioned_users: [],
-  pinned_at: null,
-  status: 'received',
-  text: nanoid(),
-  type: 'regular',
-  updated_at: new Date(),
-  user: null,
-  ...options,
-});
+export const generateMessage = (options) => {
+  const data = {
+    __html: '<p>regular</p>',
+    attachments: [],
+    created_at: new Date(),
+    html: '<p>regular</p>',
+    id: nanoid(),
+    mentioned_users: [],
+    pinned_at: null,
+    status: 'received',
+    text: nanoid(),
+    type: 'regular',
+    updated_at: new Date(),
+    user: null,
+    ...options,
+  };
+  if (data.reminder) {
+    data.reminder.message_id = data.id;
+  }
+  return data;
+};

src/mock-builders/generator/reminder.ts

@@ -0,0 +1,33 @@
+import type { ReminderResponse } from 'stream-chat';
+
+const baseData = {
+  channel_cid: 'channel_cid',
+  message_id: 'message_id',
+  user_id: 'user_id',
+} as const;
+
+export const generateReminderResponse = ({
+  data,
+  scheduleOffsetMs,
+}: {
+  data?: Partial<ReminderResponse>;
+  scheduleOffsetMs?: number;
+} = {}): ReminderResponse => {
+  const created_at = new Date().toISOString();
+  const basePayload: ReminderResponse = {
+    ...baseData,
+    created_at,
+    message: { id: baseData.message_id, type: 'regular' },
+    updated_at: created_at,
+    user: { id: baseData.user_id },
+  };
+  if (typeof scheduleOffsetMs === 'number') {
+    basePayload.remind_at = new Date(
+      new Date(created_at).getTime() + scheduleOffsetMs,
+    ).toISOString();
+  }
+  return {
+    ...basePayload,
+    ...data,
+  };
+};