feat: add interface overrideInviteUser (#370)

Add overrideInviteUser to ChannelList, CreateChannel and ChannelSettings

This interface overrides InviteMember functionality. Customer has to create the channel
and close the popup manually

```
export type OverrideInviteUserType = {
    users: Array<string>;
    onClose: () => void;
    channelType: 'group' | 'supergroup' | 'broadcast';
};
ChannelList.overrideInviteUser?(params: OverrideInviteUserType): void;
CreateChannel.overrideInviteUser?(params: OverrideInviteUserType): void;
```

```
export type OverrideInviteMemberType = {
    users: Array<string>;
    onClose: () => void;
    channel: GroupChannel;
};
ChannelSettings.overrideInviteUser?(params: OverrideInviteMemberType): void;
```

example: 
```
<ChannelList
  overrideInviteUser={({users, onClose, channelType}) => {
    createMyChannel(users, channelType).then(() => {
      onClose();
    })
  }}
/>
```

fixes: https://sendbird.atlassian.net/browse/UIKIT-2542

Author: Sravan S

scripts/index_d_ts

@@ -310,8 +310,15 @@ declare module "SendbirdUIKitGlobal" {
     channelListQuery?: GroupChannelListQueryParams;
   }
 
+  export type OverrideInviteUserType = {
+    users: Array<string>;
+    onClose: () => void;
+    channelType: 'group' | 'supergroup' | 'broadcast';
+  };
+
   export interface ChannelListProviderProps {
     allowProfileEdit?: boolean;
+    overrideInviteUser?(params: OverrideInviteUserType): void;
     onBeforeCreateChannel?(users: Array<string>): GroupChannelCreateParams;
     onThemeChange?(theme: string): void;
     onProfileEditSuccess?(user: User): void;
@@ -381,9 +388,16 @@ declare module "SendbirdUIKitGlobal" {
     onLeaveChannel?: () => void;
   }
 
+  export type OverrideInviteMemberType = {
+    users: Array<string>;
+    onClose: () => void;
+    channel: GroupChannel;
+  };
+
   export interface ChannelSettingsProviderInterface {
     channelUrl: string;
     onCloseClick?(): void;
+    overrideInviteUser?(params: OverrideInviteMemberType): void;
     onChannelModified?(channel: GroupChannel): void;
     onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): GroupChannelUpdateParams;
     queries?: ChannelSettingsQueries;
@@ -409,6 +423,7 @@ declare module "SendbirdUIKitGlobal" {
     className?: string;
     onCloseClick?(): void;
     onChannelModified?(channel: GroupChannel): void;
+    overrideInviteUser?(params: OverrideInviteMemberType): void;
     onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): GroupChannelUpdateParams;
     queries?: ChannelSettingsQueries;
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
@@ -1020,11 +1035,13 @@ declare module "SendbirdUIKitGlobal" {
   export interface CreateChannelProviderProps {
     children?: React.ReactNode | React.ReactElement;
     onCreateChannel(channel: GroupChannel): void;
+    overrideInviteUser?(params: OverrideInviteUserType): void;
     onBeforeCreateChannel?(users: Array<string>): GroupChannelCreateParams;
     userListQuery?(): UserListQuery;
   }
 
   export interface CreateChannelContextInterface {
+    overrideInviteUser?(params: OverrideInviteUserType): void;
     onBeforeCreateChannel?(users: Array<string>): GroupChannelCreateParams;
     createChannel: (channelParams: GroupChannelCreateParams) => Promise<GroupChannel>;
     sdk: SendbirdGroupChat | SendbirdOpenChat;

src/smart-components/ChannelList/components/AddChannel/index.tsx

@@ -5,12 +5,14 @@ import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
 
 import CreateChannel from '../../../CreateChannel';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import { useChannelListContext } from '../../context/ChannelListProvider';
 
 export const AddChannel: React.VoidFunctionComponent = () => {
   const [showModal, setShowModal] = useState(false);
   const state = useSendbirdStateContext();
   const isOnline = state?.config?.isOnline;
   const disabled = !isOnline;
+  const { overrideInviteUser } = useChannelListContext();
 
   return (
     <>
@@ -35,6 +37,7 @@ export const AddChannel: React.VoidFunctionComponent = () => {
             onCancel={() => {
               setShowModal(false);
             }}
+            overrideInviteUser={overrideInviteUser}
             onCreateChannel={() => {
               setShowModal(false);
             }}

src/smart-components/ChannelList/context/ChannelListProvider.tsx

@@ -31,6 +31,7 @@ import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
 import { CustomUseReducerDispatcher } from '../../../lib/SendbirdState';
 import channelListReducers from '../dux/reducers';
 import channelListInitialState from '../dux/initialState';
+import { CHANNEL_TYPE } from '../../CreateChannel/types';
 
 interface ApplicationUserListQuery {
   limit?: number;
@@ -65,9 +66,16 @@ interface ChannelListQueries {
   channelListQuery?: GroupChannelListQuery;
 }
 
+type OverrideInviteUserType = {
+  users: Array<string>;
+  onClose: () => void;
+  channelType: CHANNEL_TYPE;
+};
+
 export interface ChannelListProviderProps {
   allowProfileEdit?: boolean;
   onBeforeCreateChannel?(users: Array<string>): GroupChannelCreateParams;
+  overrideInviteUser?(params: OverrideInviteUserType): void;
   onThemeChange?(theme: string): void;
   onProfileEditSuccess?(user: User): void;
   onChannelSelect?(channel: GroupChannel): void;
@@ -139,6 +147,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
     onThemeChange,
     onBeforeCreateChannel,
     sortChannelList,
+    overrideInviteUser,
     disableAutoSelect,
     isTypingIndicatorEnabled = null,
     isMessageReceiptStatusEnabled = null,
@@ -347,6 +356,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
       onProfileEditSuccess,
       onThemeChange,
       onBeforeCreateChannel,
+      overrideInviteUser,
       onChannelSelect,
       sortChannelList,
       loading,

src/smart-components/ChannelList/index.tsx

@@ -16,6 +16,7 @@ const ChannelList: React.FC<ChannelListProps> = (props: ChannelListProps) => {
       allowProfileEdit={props?.allowProfileEdit}
       onBeforeCreateChannel={props?.onBeforeCreateChannel}
       onThemeChange={props?.onThemeChange}
+      overrideInviteUser={props?.overrideInviteUser}
       onProfileEditSuccess={props?.onProfileEditSuccess}
       onChannelSelect={props?.onChannelSelect}
       sortChannelList={props?.sortChannelList}

src/smart-components/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx

@@ -26,7 +26,7 @@ export default function InviteUsers({
   const sdk = state?.stores?.sdkStore?.sdk;
   const globalUserListQuery = state?.config?.userListQuery;
 
-  const { channel } = useChannelSettingsContext();
+  const { channel, overrideInviteUser } = useChannelSettingsContext();
   const { stringSet } = useLocalization();
 
   useEffect(() => {
@@ -48,6 +48,14 @@ export default function InviteUsers({
         onCancel={() => onCancel()}
         onSubmit={() => {
           const members = Object.keys(selectedMembers).filter((m) => selectedMembers[m]);
+          if(typeof overrideInviteUser === 'function') {
+            overrideInviteUser({
+              users: members,
+              onClose: onCancel,
+              channel,
+            });
+            return;
+          }
           channel?.inviteWithUserIds(members).then(() => {
             onSubmit(members);
           });

src/smart-components/ChannelSettings/context/ChannelSettingsProvider.tsx

@@ -25,12 +25,19 @@ interface ChannelSettingsQueries {
   applicationUserListQuery?: ApplicationUserListQuery;
 }
 
+type OverrideInviteUserType = {
+  users: Array<string>;
+  onClose: () => void;
+  channel: GroupChannel;
+};
+
 export type ChannelSettingsContextProps = {
   children?: React.ReactElement;
   channelUrl: string;
   className?: string;
   onCloseClick?(): void;
   onLeaveChannel?(): void;
+  overrideInviteUser?(params: OverrideInviteUserType): void;
   onChannelModified?(channel: GroupChannel): void;
   onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): GroupChannelUpdateParams;
   queries?: ChannelSettingsQueries;
@@ -42,6 +49,7 @@ interface ChannelSettingsProviderInterface {
   channelUrl: string;
   onCloseClick?(): void;
   onLeaveChannel?(): void;
+  overrideInviteUser?(params: OverrideInviteUserType): void;
   onChannelModified?(channel: GroupChannel): void;
   onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): GroupChannelUpdateParams;
   queries?: ChannelSettingsQueries;
@@ -61,6 +69,7 @@ const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps> = (props: C
     onCloseClick,
     onLeaveChannel,
     onChannelModified,
+    overrideInviteUser,
     onBeforeUpdateChannel,
     queries,
   } = props;
@@ -114,6 +123,7 @@ const ChannelSettingsProvider: React.FC<ChannelSettingsContextProps> = (props: C
       onChannelModified,
       onBeforeUpdateChannel,
       queries,
+      overrideInviteUser,
       setChannelUpdateId,
       forceUpdateUI,
       channel,

src/smart-components/ChannelSettings/index.tsx

@@ -14,6 +14,7 @@ interface ChannelSettingsProps extends ChannelSettingsUIProps, ChannelSettingsCo
 const ChannelSettings: React.FC<ChannelSettingsProps> = (props: ChannelSettingsProps) => {
   return (
     <ChannelSettingsProvider
+      overrideInviteUser={props?.overrideInviteUser}
       channelUrl={props.channelUrl}
       onCloseClick={props?.onCloseClick}
       onLeaveChannel={props?.onLeaveChannel}

src/smart-components/CreateChannel/components/InviteUsers/index.tsx

@@ -41,6 +41,7 @@ const InviteUsers: React.FC<InviteUsersProps> = ({
   const {
     onBeforeCreateChannel,
     onCreateChannel,
+    overrideInviteUser,
     createChannel,
     type,
   } = useCreateChannelContext();
@@ -91,6 +92,14 @@ const InviteUsers: React.FC<InviteUsersProps> = ({
       onCancel={onCancel}
       onSubmit={() => {
         const selectedUserList = Object.keys(selectedUsers);
+        if (typeof overrideInviteUser === 'function') {
+          overrideInviteUser({
+            users: selectedUserList,
+            onClose: onCancel,
+            channelType: type,
+          });
+          return;
+        }
         if (selectedUserList.length > 0) {
           if (onBeforeCreateChannel) {
             const params = onBeforeCreateChannel(selectedUserList);

src/smart-components/CreateChannel/context/CreateChannelProvider.tsx

@@ -17,9 +17,16 @@ export interface UserListQuery {
   next(): Promise<Array<User>>;
 }
 
+type OverrideInviteUserType = {
+  users: Array<string>;
+  onClose: () => void;
+  channelType: CHANNEL_TYPE;
+};
+
 export interface CreateChannelProviderProps {
   children?: React.ReactElement;
   onCreateChannel(channel: GroupChannel): void;
+  overrideInviteUser?(params: OverrideInviteUserType): void;
   onBeforeCreateChannel?(users: Array<string>): GroupChannelCreateParams;
   userListQuery?(): UserListQuery;
 }
@@ -31,6 +38,7 @@ export interface CreateChannelContextInterface {
   createChannel: CreateChannel;
   sdk: SendbirdGroupChat;
   userListQuery?(): UserListQuery;
+  overrideInviteUser?(params: OverrideInviteUserType): void;
   onCreateChannel?(channel: GroupChannel): void;
   step: number,
   setStep: React.Dispatch<React.SetStateAction<number>>,
@@ -43,6 +51,7 @@ const CreateChannelProvider: React.FC<CreateChannelProviderProps> = (props: Crea
     children,
     onCreateChannel,
     onBeforeCreateChannel,
+    overrideInviteUser,
     userListQuery,
   } = props;
 
@@ -59,6 +68,7 @@ const CreateChannelProvider: React.FC<CreateChannelProviderProps> = (props: Crea
       onBeforeCreateChannel,
       createChannel,
       onCreateChannel,
+      overrideInviteUser,
       userListQuery: userListQuery || userListQuery_,
       step,
       setStep,

src/smart-components/CreateChannel/index.tsx

@@ -16,6 +16,7 @@ const CreateChannel: React.FC<CreateChannelProps> = (props: CreateChannelProps)
     onBeforeCreateChannel,
     userListQuery,
     onCreateChannel,
+    overrideInviteUser,
     onCancel,
     renderStepOne,
   } = props;
@@ -24,6 +25,7 @@ const CreateChannel: React.FC<CreateChannelProps> = (props: CreateChannelProps)
       onBeforeCreateChannel={onBeforeCreateChannel}
       userListQuery={userListQuery}
       onCreateChannel={onCreateChannel}
+      overrideInviteUser={overrideInviteUser}
     >
       <CreateChannelUI
         renderStepOne={renderStepOne}