feat: Notification channel (#397)

### Notification Channel

A notification channel is a new group channel dedicated to receiving one way marketing and transactional messages.To allow users to view messages sent through Sendbird Message Builder with the correct rendering, you need to implement the notification channel view using <NotificationChannel>

Overview:
* Provide new module `NotificationChannel`
  * NotificationChannel
    `import NotificationChannel from '@sendbird/uikit-react/NotificationChannel'`
  props:
    * channelUrl: string;
    * children?: React.ReactElement;
    // To customize Query
    * messageListParams?: MessageListParams;
    // Sets last seen externally
    * lastSeen?: number;
    // handles Actions sepcified in Message Templates
    * handleWebAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage): null;
    * handleCustomAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage): null;
    * handlePredefinedAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage): null;
    // UI overrides
    * isLoading?: boolean;
    * renderPlaceholderLoader?: () => React.ReactElement;
    * renderPlaceholderInvalid?: () => React.ReactElement;
    * renderPlaceholderEmpty?: () => React.ReactElement;
    * renderHeader?: () => React.ReactElement;
    * renderMessageHeader?: ({ message }) => React.ReactElement;
    * renderMessage?: ({ message }) => React.ReactElement;

```
example:
export const NotificationChannelComponenet = () => (
  <Sendbird
    appId={appId}
    userId={userId}
    accessToken={accessToken}
  >
    <div style={{ height: '960px', width: '360px' }}>
      <NotificationChannel
        channelUrl={`SENDBIRD_NOTIFICATION_CHANNEL_NOTIFICATION_${userId}`}
        renderPlaceholderLoader={() => <MyBrandLogo />};
        handleCustomAction={(event, action, message) => {
          ... implement custom action
        }}
      />
    </div>
  </Sendbird>
);
```
* Submodules:
  * Context
    `import { NotficationChannelProvider useNotficationChannelContext } from '@sendbird/uikit-react/NotificationChannel/context'`
    Handles business logic of Notification Channel
  * NotificationChannelUI
    `import NotificationChannelUI from '@sendbird/uikit-react/NotificationChannel/components/NotificationChannelUI'`
    UI wrapper of Notification Channel
  * NotificationMessageWrap
    `import NotificationMessageWrap from '@sendbird/uikit-react/NotificationChannel/components/NotificationMessageWrap'`
  * NotificationList
    `import NotificationList from '@sendbird/uikit-react/NotificationChannel/components/NotificationList'`
* External modules:
  Unlike some of our other releases we decide to release some components into seperate packages to enahnce reusability with other platforms/projects
  * MessageTemplateParser('@sendbird/react-message-template')
    * MessageTemplate
      `import { createMessageTemplate } from '@sendbird/react-message-template'`
    * Parser
      `import { createParser } from '@sendbird/react-message-template'`
    * Renderer
      `import { createRenderer } from '@sendbird/react-message-template'`
  * MessageTemplateParser('@sendbird/react-message-template')
    * Context
      `import { MessageProvider, useMessageContext } from '@sendbird/react-uikit-message-template-view';`
    * MessageTemplateView
      `import { MessageTemplateView } from '@sendbird/react-uikit-message-template-view';`

Author: Sravan S

exports.js

@@ -103,6 +103,13 @@ export default {
   'Thread/components/ThreadListItem': 'src/smart-components/Thread/components/ThreadList/ThreadListItem.tsx',
   'Thread/components/ThreadMessageInput': 'src/smart-components/Thread/components/ThreadMessageInput/index.tsx',
 
+  // NotificationChannel
+  NotificationChannel: 'src/smart-components/NotificationChannel/index.tsx',
+  'NotificationChannel/context': 'src/smart-components/NotificationChannel/context/NotificationChannelProvider.tsx',
+  'NotificationChannel/components/NotificationChannelUI': 'src/smart-components/NotificationChannel/components/NotificationChannelUI/index.tsx',
+  'NotificationChannel/components/NotificationMessageWrap': 'src/smart-components/NotificationChannel/components/NotificationMessageWrap/index.tsx',
+  'NotificationChannel/components/NotificationList': 'src/smart-components/NotificationChannel/components/NotificationList/index.tsx',
+
   // CreateChannel
   CreateChannel: 'src/smart-components/CreateChannel/index.tsx',
   'CreateChannel/context': 'src/smart-components/CreateChannel/context/CreateChannelProvider.tsx',

package-lock.json

@@ -49,7 +49,9 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.2.3",
+    "@sendbird/chat": "^4.2.4",
+    "@sendbird/react-uikit-message-template-view": "^0.0.1-alpha.10",
+    "@sendbird/uikit-message-template": "^0.0.1-alpha.8",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "prop-types": "^15.7.2"

package.json

@@ -42,6 +42,8 @@ module.exports = ({
     '@sendbird/chat/groupChannel',
     '@sendbird/chat/openChannel',
     '@sendbird/chat/message',
+    '@sendbird/react-uikit-message-template-view',
+    '@sendbird/uikit-message-template',
     'react-dom/server',
     'prop-types',
     'react',

rollup.config.js

@@ -902,6 +902,79 @@ declare module "SendbirdUIKitGlobal" {
     onCloseClick?: () => void;
   }
 
+  /**
+   * NotificationChannel
+   */
+  export enum ActionType {
+    Web = "web",
+    Custom = "custom",
+    UIKit = "uikit"
+  }
+
+  export interface Action {
+    type: ActionType;
+    data: string;
+    customData?: string;
+  }
+
+  export type NotficationChannelStateInterface = {
+    uiState: 'loading' | 'initialized' | 'invalid';
+    allMessages: BaseMessage[];
+    currentNotificationChannel: GroupChannel;
+    hasMore: boolean;
+    messageListParams?: MessageListParams;
+    lastSeen?: number;
+    showDeleteModal: boolean;
+    messageToDelete?: BaseMessage;
+  }
+
+  export type NotficationChannelContextProps = {
+    channelUrl: string;
+    children?: React.ReactElement;
+    messageListParams?: MessageListParams;
+    lastSeen?: number;
+    handleWebAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);
+    handleCustomAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);
+    handlePredefinedAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);
+  };
+  export interface NotficationChannelProviderInterface extends NotficationChannelStateInterface,
+    NotficationChannelContextProps {
+      notificationsDispatcher: React.Dispatch<any>;
+      oldestMessageTimeStamp: number;
+      scrollRef: React.RefObject<HTMLDivElement>;
+      onFetchMore: (cb: any) => void;
+    }
+  export type RenderNotificationMessageProps = {
+    message: BaseMessage;
+  }
+
+  export type renderNotificationMessage = (props: RenderNotificationMessageProps) => React.ReactElement;
+  export type renderNotificationMessageHeader = (props: RenderNotificationMessageProps) => React.ReactElement;
+
+  export type NotificationChannelUIProps = {
+    isLoading?: boolean;
+    renderPlaceholderLoader?: () => React.ReactElement;
+    renderPlaceholderInvalid?: () => React.ReactElement;
+    renderPlaceholderEmpty?: () => React.ReactElement;
+    renderHeader?: () => React.ReactElement;
+    renderMessageHeader?: renderNotificationMessageHeader;
+    renderMessage?: renderNotificationMessage;
+  }
+
+  export type NotificationListProps = {
+    renderMessage?: renderNotificationMessage;
+    renderMessageHeader?: renderNotificationMessageHeader;
+    renderPlaceholderEmpty?: () => React.ReactElement;
+  }
+
+  export type NotificationMessageWrapProps = {
+    renderMessage?: renderNotificationMessage;
+    renderMessageHeader?: renderNotificationMessageHeader;
+    message: BaseMessage;
+  }
+
+  export interface NotificationChannelProps extends NotificationChannelUIProps, NotficationChannelContextProps {}
+
   /**
    * Thread
    */
@@ -1510,6 +1583,39 @@ declare module '@sendbird/uikit-react/MessageSearch/components/MessageSearchUI'
   export default MessageSearchUI;
 }
 
+/**
+ * NotificationChannel
+ */
+declare module '@sendbird/uikit-react/NotificationChannel' {
+  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  const NotificationChannel: React.FC<SendbirdUIKitGlobal.NotificationChannelProps>;
+  export default NotificationChannel;
+}
+
+declare module '@sendbird/uikit-react/NotificationChannel/context' {
+  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  export const useNotficationChannelContext: () => SendbirdUIKitGlobal.NotficationChannelProviderInterface;
+  export const NotficationChannelProvider: React.FC<SendbirdUIKitGlobal.NotficationChannelContextProps>;
+}
+
+declare module '@sendbird/uikit-react/NotificationChannel/components/NotificationChannelUI' {
+  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  const NotificationChannelUI: React.FC<SendbirdUIKitGlobal.NotificationChannelUIProps>;
+  export default NotificationChannelUI;
+}
+
+declare module '@sendbird/uikit-react/NotificationChannel/components/NotificationList' {
+  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  const NotificationList: React.FC<SendbirdUIKitGlobal.NotificationListProps>;
+  export default NotificationList;
+}
+
+declare module '@sendbird/uikit-react/NotificationChannel/components/NotificationMessageWrap' {
+  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  const NotificationMessageWrap: React.FC<SendbirdUIKitGlobal.NotificationMessageWrapProps>;
+  export default NotificationMessageWrap;
+}
+
 /**
  * Thread
  */

scripts/index_d_ts

@@ -27,6 +27,8 @@
   },
   "dependencies": {
     "@sendbird/chat": "^4.1.1",
+    "@sendbird/react-uikit-message-template-view": "^0.0.1-alpha.9",
+    "@sendbird/uikit-message-template": "^0.0.1-alpha.8",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "prop-types": "^15.7.2"

scripts/package.template.json

@@ -34,7 +34,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 780px;
+    max-width: calc(100vw - 600px);
     @include mobile() {
       max-width: calc(100vw - 240px);
     }