Merge pull request #44 from notificationapi-com/7trSTLbA/3354-slack-frontend-sdk

Add SLACK channel support in Notifications and Preferences

Author: mbasadi

lib/components/Notifications/interface.ts

@@ -14,7 +14,8 @@ export enum Channels {
   SMS = 'SMS',
   CALL = 'CALL',
   PUSH = 'PUSH',
-  WEB_PUSH = 'WEB_PUSH'
+  WEB_PUSH = 'WEB_PUSH',
+  SLACK = 'SLACK'
 }
 
 export enum DeliveryOptions {

lib/components/Preferences/PreferenceInput.tsx

@@ -17,7 +17,15 @@ import {
 } from '@mui/material';
 
 const sortChannels = (a: Channels, b: Channels) => {
-  const order = ['EMAIL', 'INAPP_WEB', 'SMS', 'CALL', 'PUSH', 'WEB_PUSH'];
+  const order = [
+    'EMAIL',
+    'INAPP_WEB',
+    'SMS',
+    'CALL',
+    'PUSH',
+    'WEB_PUSH',
+    'SLACK'
+  ];
   return order.indexOf(a) - order.indexOf(b);
 };
 

lib/components/Preferences/channelUtils.tsx

@@ -6,6 +6,7 @@ import {
   PhoneIphone,
   Sms
 } from '@mui/icons-material';
+import { SvgIcon } from '@mui/material';
 import { Channels } from '../Notifications/interface';
 
 export const getChannelLabel = (c: Channels): string => {
@@ -15,7 +16,8 @@ export const getChannelLabel = (c: Channels): string => {
     SMS: 'Text',
     CALL: 'Automated Calling',
     PUSH: 'Mobile',
-    WEB_PUSH: 'Browser'
+    WEB_PUSH: 'Browser',
+    SLACK: 'Slack'
   };
   return labels[c];
 };
@@ -34,6 +36,12 @@ export const getChannelIcon = (channel: Channels): React.ReactElement => {
       return <NotificationsOutlined fontSize="small" color="primary" />;
     case Channels.WEB_PUSH:
       return <MarkChatUnread fontSize="small" color="primary" />;
+    case Channels.SLACK:
+      return (
+        <SvgIcon fontSize="small" color="primary">
+          <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.521-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.523 2.521h-2.521V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.521A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.523v-2.521h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+        </SvgIcon>
+      );
     default:
       return <EmailOutlined fontSize="small" color="primary" />;
   }

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "1.1.4",
+  "version": "1.2.0",
   "type": "module",
   "overrides": {
     "esbuild": "^0.25.0",
@@ -63,7 +63,7 @@
     "@fontsource/roboto": "^5.1.1",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
-    "@notificationapi/core": "^0.0.15",
+    "@notificationapi/core": "^0.0.16",
     "javascript-time-ago": "^2.5.10",
     "liquidjs": "^10.14.0",
     "rc-virtual-list": "^3.11.5",