@messenger-box/platform-mobile 0.0.1-alpha.369 → 0.0.1-alpha.377

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/index.js +229 -238
  3. package/lib/index.js.map +1 -1
  4. package/lib/screens/inbox/DialogMessages.d.ts +2 -1
  5. package/lib/screens/inbox/components/ThreadsViewItem.d.ts +2 -0
  6. package/lib/screens/inbox/containers/ConversationView.d.ts +1 -1
  7. package/package.json +4 -4
  8. package/src/navigation/InboxNavigation.tsx +10 -4
  9. package/src/screens/inbox/DialogMessages.tsx +2 -2
  10. package/src/screens/inbox/DialogThreadMessages.tsx +32 -28
  11. package/src/screens/inbox/components/SupportServiceDialogsListItem.tsx +24 -74
  12. package/src/screens/inbox/components/ThreadsViewItem.tsx +126 -74
  13. package/src/screens/inbox/containers/ConversationView.tsx +21 -9
  14. package/src/screens/inbox/containers/Dialogs.tsx +6 -4
  15. package/src/screens/inbox/containers/ThreadConversationView.tsx +17 -11
  16. package/src/screens/inbox/containers/ThreadsView.tsx +77 -49
package/lib/screens/inbox/DialogMessages.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
- export declare function DialogMessages({ channelId }: {
2
+ export declare function DialogMessages({ channelId, role }: {
3
3
  channelId: any;
4
+ role: any;
4
5
  }): JSX.Element;
package/lib/screens/inbox/components/ThreadsViewItem.d.ts CHANGED
@@ -8,6 +8,8 @@ export interface IDialogListItemProps {
8
8
  users?: any;
9
9
  thread?: any;
10
10
  onOpen: (id: any, title: any, postParentId?: any) => void;
11
+ role?: any;
12
+ setData?: any;
11
13
  }
12
14
  /**
13
15
  * TODO:
package/lib/screens/inbox/containers/ConversationView.d.ts CHANGED
@@ -8,4 +8,4 @@ export interface AlertMessageAttachmentsInterface {
8
8
  link: string;
9
9
  };
10
10
  }
11
- export declare const ConversationView: React.MemoExoticComponent<({ channelId }: any) => JSX.Element>;
11
+ export declare const ConversationView: React.MemoExoticComponent<({ channelId, role }: any) => JSX.Element>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@messenger-box/platform-mobile",
3
- "version": "0.0.1-alpha.369",
3
+ "version": "0.0.1-alpha.377",
4
4
  "description": "Sample core for higher packages to depend on",
5
5
  "license": "ISC",
6
6
  "author": "CDMBase LLC",
@@ -19,8 +19,8 @@
19
19
  "watch": "yarn build:lib:watch"
20
20
  },
21
21
  "dependencies": {
22
- "@messenger-box/core": "0.0.1-alpha.367",
23
- "@messenger-box/platform-client": "0.0.1-alpha.367",
22
+ "@messenger-box/core": "0.0.1-alpha.373",
23
+ "@messenger-box/platform-client": "0.0.1-alpha.373",
24
24
  "base-64": "1.0.0",
25
25
  "react-native-gifted-chat": "1.0.4"
26
26
  },
@@ -40,5 +40,5 @@
40
40
  "typescript": {
41
41
  "definition": "lib/index.d.ts"
42
42
  },
43
- "gitHead": "1f60a998464f591ebfa13f0ec6352a38bd45e94f"
43
+ "gitHead": "eb3e4bd7dddbcaf4637d3a47914f627a3872a03e"
44
44
  }
package/src/navigation/InboxNavigation.tsx CHANGED
@@ -11,8 +11,14 @@ const inboxConfig = {
11
11
  exact: true,
12
12
  name: 'Message',
13
13
  props: {
14
- initialParams: { channelId: null },
15
- component: (props: any) => <DialogMessages {...props} channelId={props?.route?.params?.channelId} />,
14
+ initialParams: { channelId: null, role: null },
15
+ component: (props: any) => (
16
+ <DialogMessages
17
+ {...props}
18
+ channelId={props?.route?.params?.channelId}
19
+ role={props?.route?.params?.role}
20
+ />
21
+ ),
16
22
  options: ({ navigation }: any) => {
17
23
  return {
18
24
  headerShown: true,
@@ -34,7 +40,7 @@ const inboxConfig = {
34
40
  exact: true,
35
41
  name: 'Thread',
36
42
  props: {
37
- initialParams: { channelId: null, postParentId: null,role:null },
43
+ initialParams: { channelId: null, postParentId: null, role: null },
38
44
  component: (props: any) => (
39
45
  <DialogThreads
40
46
  {...props}
@@ -64,7 +70,7 @@ const inboxConfig = {
64
70
  exact: true,
65
71
  name: 'ThreadMessage',
66
72
  props: {
67
- initialParams: { channelId: null, postParentId: null, isPostParentIdThread: null,role:null },
73
+ initialParams: { channelId: null, postParentId: null, isPostParentIdThread: null, role: null },
68
74
  component: (props: any) => (
69
75
  <DialogThreadMessages
70
76
  {...props}
package/src/screens/inbox/DialogMessages.tsx CHANGED
@@ -2,11 +2,11 @@ import * as React from 'react';
2
2
  import { Box } from 'native-base';
3
3
  import { ConversationView } from './containers/ConversationView';
4
4
 
5
- export function DialogMessages({ channelId }) {
5
+ export function DialogMessages({ channelId, role }) {
6
6
  return (
7
7
  // <Box bg={'white'} flex={1} pt={5}>
8
8
  <Box bg={'white'} flex={1}>
9
- <ConversationView channelId={channelId} />
9
+ <ConversationView channelId={channelId} role={role} />
10
10
  </Box>
11
11
  );
12
12
  }
package/src/screens/inbox/DialogThreadMessages.tsx CHANGED
@@ -42,40 +42,44 @@ export function DialogThreadMessages({ channelId, postParentId, isPostParentIdTh
42
42
  }, [postParentId]);
43
43
 
44
44
  React.useEffect(() => {
45
- if (data?.viewChannelDetail) setChannel(data?.viewChannelDetail);
45
+ if (data?.viewChannelDetail) {
46
+ setChannel(data?.viewChannelDetail);
47
+ setLoading(false);
48
+ }
46
49
  }, [data]);
47
50
 
48
- React.useEffect(() => {
49
- async function sendInitialMessage(channel: any) {
50
- const content = `Welcome to ${channel?.title}`;
51
- const createdBy = channel?.creator?.id;
52
- await sendThreadMessage({
53
- variables: {
54
- channelId,
55
- threadMessageInput: {
56
- content,
57
- role,
58
- },
59
- responderId: createdBy,
60
- },
61
- update: (cache, { data, errors }: any) => {
62
- if (!data) {
63
- return;
64
- }
65
- setParentId(data?.sendThreadMessage?.lastMessage?.id);
66
- },
67
- });
68
- }
69
- if ((!parentId || parentId == 0) && channel) {
70
- sendInitialMessage(channel);
71
- }
51
+ // React.useEffect(() => {
52
+ // async function sendInitialMessage(channel: any) {
53
+ // const content = `Welcome to ${channel?.title}`;
54
+ // const createdBy = channel?.creator?.id;
55
+ // await sendThreadMessage({
56
+ // variables: {
57
+ // channelId,
58
+ // threadMessageInput: {
59
+ // content,
60
+ // role,
61
+ // },
62
+ // responderId: createdBy,
63
+ // },
64
+ // update: (cache, { data, errors }: any) => {
65
+ // if (!data) {
66
+ // return;
67
+ // }
68
+ // setParentId(data?.sendThreadMessage?.lastMessage?.id);
69
+ // },
70
+ // });
71
+ // }
72
+ // if ((!parentId || parentId == 0) && channel) {
73
+ // sendInitialMessage(channel);
74
+ // }
72
75
 
73
- if (parentId) setLoading(false);
74
- }, [parentId, channel]);
76
+ // if (parentId) setLoading(false);
77
+ // }, [parentId, channel]);
75
78
 
76
79
  return (
77
80
  <Box bg={'white'} flex={1}>
78
- {loading && !parentId ? (
81
+ {/* {loading && !parentId ? ( */}
82
+ {loading ? (
79
83
  <Spinner />
80
84
  ) : (
81
85
  <ThreadConversationView
package/src/screens/inbox/components/SupportServiceDialogsListItem.tsx CHANGED
@@ -8,6 +8,8 @@ import {
8
8
  useThreadMessagesQuery,
9
9
  useMessagesQuery,
10
10
  useUserAccountQuery,
11
+ useOnThreadCreatedUpdatedSubscription,
12
+ useOnThreadChatMessageAddedSubscription,
11
13
  } from '@messenger-box/platform-client';
12
14
  import { startCase } from 'lodash';
13
15
 
@@ -30,7 +32,7 @@ export interface IDialogListItemProps {
30
32
  channel?: any;
31
33
  onOpen: (id: any, title: any, postParentId?: any) => void;
32
34
  refreshing: boolean;
33
- role:any;
35
+ role: any;
34
36
  }
35
37
 
36
38
  /**
@@ -56,29 +58,16 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
56
58
  variables: {
57
59
  channelId: channel?.id?.toString(),
58
60
  role,
59
- limit: 25,
61
+ limit: 2,
60
62
  },
61
63
  fetchPolicy: 'cache-and-network',
62
64
  });
63
-
64
-
65
- // const {
66
- // data: messagesQuery,
67
- // loading: messageLoading,
68
- // refetch: refetchMessages,
69
- // } = useMessagesQuery({
70
- // variables: {
71
- // channelId: channel?.id?.toString(),
72
- // limit: 25,
73
- // },
74
- // fetchPolicy: 'cache-and-network',
75
- // });
76
65
 
77
66
  useFocusEffect(
78
67
  React.useCallback(() => {
79
68
  // Do something when the screen is focused
80
- // refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
81
- refetchThreadMessages({ channelId: channel?.id?.toString(), limit: 25 });
69
+ // refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
70
+ refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
82
71
  return () => {
83
72
  // Do something when the screen is unfocused
84
73
  // Useful for cleanup functions
@@ -86,63 +75,6 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
86
75
  }, [refreshing]),
87
76
  );
88
77
 
89
- React.useEffect(() => {
90
- if (refreshing) {
91
- // refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
92
- refetchThreadMessages({ channelId: channel?.id?.toString(), limit: 25 });
93
- }
94
- }, [refreshing]);
95
-
96
- // const lastMessageCreatorAndMembers = useMemo(() => {
97
- // const replyCount = threadMessages?.threadMessages?.data?.reduce((rc: any, t: any) => rc + t?.replyCount, 0);
98
- // if (!messagesQuery?.messages?.data?.length || threadMessages?.threadMessages?.totalCount == 0) {
99
- // return null;
100
- // }
101
- // const { data } = messagesQuery.messages;
102
- // const filteredData = data?.filter((p: any) => p?.message !== '');
103
- // if (replyCount == 0) {
104
- // const post: any =
105
- // threadMessages?.threadMessages?.data?.find((t: any) => {
106
- // return t?.post?.message !== '';
107
- // }) ??
108
- // threadMessages?.threadMessages?.data?.find((t: any) => {
109
- // return t?.post;
110
- // }) ??
111
- // null;
112
-
113
- // return post ? post?.post : null;
114
- // } else {
115
- // return filteredData[0];
116
- // }
117
- // // return data[data.length - 1];
118
- // }, [threadMessages, messagesQuery]);
119
-
120
- // const lastMessage = useMemo(() => {
121
- // if (!threadMessages?.threadMessages?.data?.length) {
122
- // return null;
123
- // }
124
- // const { data }: any = threadMessages.threadMessages;
125
- // const replies =
126
- // data
127
- // ?.map((t: any) => t?.replies)
128
- // ?.flat(1)
129
- // ?.filter((p: any) => p?.message !== '') ?? [];
130
- // if (replies?.length) {
131
- // return replies[0];
132
- // // return replies[replies.length - 1];
133
- // } else {
134
- // const post =
135
- // data?.find((t: any) => {
136
- // return t?.post?.message !== '';
137
- // }) ??
138
- // data?.find((t: any) => {
139
- // return t?.post;
140
- // }) ??
141
- // null;
142
- // return post ? post?.post : null;
143
- // }
144
- // }, [threadMessages]);
145
-
146
78
  const lastMessage = useMemo(() => {
147
79
  if (!threadMessages?.threadMessages?.data?.length) {
148
80
  return null;
@@ -188,6 +120,24 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
188
120
  : lastMessage?.id ?? 0;
189
121
  }, [creatorAndMembersId, lastMessage]);
190
122
 
123
+ const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
124
+ variables: {
125
+ channelId: channel?.id?.toString(),
126
+ postParentId:
127
+ postParentId == null
128
+ ? null
129
+ : lastMessage?.parentId
130
+ ? lastMessage?.parentId ?? null
131
+ : lastMessage?.id ?? null,
132
+ },
133
+ });
134
+
135
+ React.useEffect(() => {
136
+ if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
137
+ refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
138
+ }
139
+ }, [threadCreatedUpdated]);
140
+
191
141
  return (
192
142
  <Pressable
193
143
  onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
package/src/screens/inbox/components/ThreadsViewItem.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useMemo } from 'react';
2
- import { Text, Image, Pressable, VStack, HStack, Stack, Box, Avatar, View, Button } from 'native-base';
2
+ import { Text, Image, Pressable, VStack, HStack, Center, Stack, Box, Avatar, View, Button } from 'native-base';
3
3
  import { format, isToday, isYesterday } from 'date-fns';
4
4
  import { useFocusEffect } from '@react-navigation/native';
5
5
  import {
@@ -8,6 +8,8 @@ import {
8
8
  useThreadMessagesQuery,
9
9
  useMessagesQuery,
10
10
  useUserAccountQuery,
11
+ useOnThreadChatMessageAddedSubscription,
12
+ useOnThreadCreatedUpdatedSubscription,
11
13
  } from '@messenger-box/platform-client';
12
14
  import { startCase } from 'lodash';
13
15
 
@@ -28,6 +30,8 @@ export interface IDialogListItemProps {
28
30
  users?: any;
29
31
  thread?: any;
30
32
  onOpen: (id: any, title: any, postParentId?: any) => void;
33
+ role?: any;
34
+ setData?: any;
31
35
  }
32
36
 
33
37
  /**
@@ -40,7 +44,16 @@ export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function
40
44
  // users,
41
45
  thread,
42
46
  onOpen,
47
+ role,
48
+ setData,
43
49
  }) {
50
+ const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
51
+ variables: {
52
+ channelId: thread?.channel?.id?.toString(),
53
+ postParentId: thread?.post?.id?.toString(),
54
+ },
55
+ });
56
+
44
57
  useFocusEffect(
45
58
  React.useCallback(() => {
46
59
  // Do something when the screen is focused
@@ -51,35 +64,50 @@ export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function
51
64
  }, []),
52
65
  );
53
66
 
54
- const lastMessage = useMemo(() => {
55
- if (!thread) {
56
- return null;
57
- }
58
- const replies = thread?.replies?.filter((p: any) => p?.message !== '') ?? [];
59
- if (replies?.length) {
60
- return replies[0];
61
- // return replies[replies.length - 1];
62
- } else {
63
- const post = thread?.post ?? null;
64
- return post ? post?.post : null;
65
- }
66
- }, [thread]);
67
+ React.useEffect(() => {
68
+ if (threadCreatedUpdated?.threadCreatedUpdated?.data) setData(threadCreatedUpdated?.threadCreatedUpdated?.data);
69
+ }, [threadCreatedUpdated?.threadCreatedUpdated]);
70
+
71
+ const threadPostReply = React.useMemo(() => {
72
+ if (!thread?.replies) return null;
73
+ if (threadCreatedUpdated?.threadCreatedUpdated?.data?.replies?.length) {
74
+ return threadCreatedUpdated?.threadCreatedUpdated?.data?.replies;
75
+ } else return thread?.replies;
76
+ }, [thread, threadCreatedUpdated]);
77
+
78
+ // const lastMessage = useMemo(() => {
79
+ // if (!threadPost) {
80
+ // return null;
81
+ // }
82
+ // const replies = threadPost?.replies?.filter((p: any) => p?.message !== '') ?? [];
83
+ // if (replies?.length) {
84
+ // return replies[0];
85
+ // // return replies[replies.length - 1];
86
+ // } else {
87
+ // const post = threadPost?.post ?? null;
88
+ // return post ? post?.post : null;
89
+ // }
90
+ // }, [threadPost]);
67
91
 
68
- const participants: any = React.useMemo(() => {
69
- if (!thread?.participants?.length) return null;
70
- return thread?.participants?.filter((u: any) => u?.user?.id !== currentUser?.id) ?? [];
71
- }, [thread]);
92
+ // const participants: any = React.useMemo(() => {
93
+ // if (!thread?.participants?.length) return null;
94
+ // return thread?.participants?.filter((u: any) => u?.user?.id !== currentUser?.id) ?? [];
95
+ // }, [thread]);
72
96
 
73
- const allParticipantsNames: any = React.useMemo(() => {
74
- if (!participants?.length) return null;
75
- return (
76
- participants
77
- ?.map((p: any) => {
78
- return p?.user?.givenName + ' ' + p?.user?.familyName ?? '';
79
- })
80
- ?.join(', ') ?? ''
81
- );
82
- }, [participants]);
97
+ // const allParticipantsNames: any = React.useMemo(() => {
98
+ // if (!participants?.length) return null;
99
+ // return (
100
+ // participants
101
+ // ?.map((p: any) => {
102
+ // return p?.user?.givenName + ' ' + p?.user?.familyName ?? '';
103
+ // })
104
+ // ?.join(', ') ?? ''
105
+ // );
106
+ // }, [participants]);
107
+
108
+ if (!threadPostReply || threadPostReply?.length == 0) {
109
+ return <></>;
110
+ }
83
111
 
84
112
  return (
85
113
  <VStack
@@ -114,7 +142,7 @@ export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function
114
142
  alignItems={'center'}
115
143
  >
116
144
  <Box flex={1}>
117
- <HStack flex={1} space={5} py={2} alignItems={'baseline'}>
145
+ {/* <HStack flex={1} space={5} py={2} alignItems={'baseline'}>
118
146
  <Box>
119
147
  <Avatar.Badge size={4} left={0} zIndex={1} bg="green.800" />
120
148
  </Box>
@@ -123,10 +151,10 @@ export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function
123
151
  {allParticipantsNames || ''}
124
152
  </Text>
125
153
  </Box>
126
- </HStack>
154
+ </HStack> */}
127
155
  <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
128
156
  <Box flex={1}>
129
- <HStack space={2} py={2}>
157
+ {/* <HStack space={2} py={2}>
130
158
  <Box>
131
159
  <Avatar
132
160
  bg={'transparent'}
@@ -166,53 +194,77 @@ export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function
166
194
  </Button>
167
195
  )}
168
196
  </Box>
169
- </HStack>
170
- {thread?.replies?.length > 0 && (
171
- <HStack space={2} pb={2} pt={1}>
172
- <Box>
173
- <Avatar
174
- bg={'transparent'}
175
- size={8}
176
- _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
177
- source={{
178
- uri: lastMessage?.author?.picture,
179
- }}
180
- >
181
- {startCase(lastMessage?.author?.username?.charAt(0))}
182
- </Avatar>
183
- </Box>
184
- <Box>
185
- <HStack space={4}>
186
- <Text>
187
- {lastMessage?.author?.givenName +
197
+ </HStack> */}
198
+ {threadPostReply?.length > 0 && (
199
+ <>
200
+ {threadPostReply
201
+ ?.slice(0, 2)
202
+ ?.reverse()
203
+ ?.map((reply: any, index: any) => (
204
+ <HStack key={index} space={2} pb={2} pt={1}>
205
+ <Box>
206
+ <Avatar
207
+ bg={'transparent'}
208
+ size={8}
209
+ _image={{
210
+ borderRadius: 6,
211
+ borderWidth: 2,
212
+ borderColor: '#fff',
213
+ }}
214
+ source={{
215
+ uri: reply?.author?.picture,
216
+ }}
217
+ >
218
+ {startCase(reply?.author?.username?.charAt(0))}
219
+ </Avatar>
220
+ </Box>
221
+ <Box>
222
+ <HStack space={4}>
223
+ <Text>
224
+ {reply?.author?.givenName ?? '' ?? ''}{' '}
225
+ {reply?.author?.familyName ?? '' ?? ''}
226
+ {/* {lastMessage?.author?.givenName +
188
227
  ' ' +
189
- lastMessage?.author?.familyName ?? ''}
190
- </Text>
191
- <Text color="gray.500">
192
- {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
193
- </Text>
194
- </HStack>
195
- <Text color="gray.600" noOfLines={2}>
196
- {/* {lastMessage?.message ?? ''} */}
197
- {lastMessage?.message
228
+ lastMessage?.author?.familyName ?? ''} */}
229
+ </Text>
230
+ <Text color="gray.500">
231
+ {reply?.createdAt ? createdAtText(reply?.createdAt) : ''}
232
+ {/* {lastMessage ? createdAtText(lastMessage?.createdAt) : ''} */}
233
+ </Text>
234
+ </HStack>
235
+ <Text color="gray.600" noOfLines={2}>
236
+ {reply?.message
237
+ ? reply?.message.length < 70
238
+ ? `${reply?.message}`
239
+ : `${reply?.message.substring(0, 68)}....`
240
+ : ''}
241
+ {/* {lastMessage?.message
198
242
  ? lastMessage?.message.length < 70
199
243
  ? `${lastMessage?.message}`
200
244
  : `${lastMessage?.message.substring(0, 68)}....`
201
- : ''}
202
- </Text>
203
- <Button
204
- size={'xs'}
205
- w={150}
206
- variant={'outline'}
207
- _text={{ fontSize: 12, color: '#000' }}
208
- onPress={() =>
209
- onOpen(thread?.channel?.id, thread?.channel?.title, thread?.post?.id)
210
- }
211
- >
212
- Reply
213
- </Button>
214
- </Box>
215
- </HStack>
245
+ : ''} */}
246
+ </Text>
247
+ {(threadPostReply?.length == 1 || index !== 0) && (
248
+ <Button
249
+ size={'xs'}
250
+ w={150}
251
+ variant={'outline'}
252
+ _text={{ fontSize: 12, color: '#000' }}
253
+ onPress={() =>
254
+ onOpen(
255
+ thread?.channel?.id,
256
+ thread?.channel?.title,
257
+ thread?.post?.id,
258
+ )
259
+ }
260
+ >
261
+ Reply
262
+ </Button>
263
+ )}
264
+ </Box>
265
+ </HStack>
266
+ ))}
267
+ </>
216
268
  )}
217
269
  </Box>
218
270
  </HStack>
package/src/screens/inbox/containers/ConversationView.tsx CHANGED
@@ -29,6 +29,7 @@ import {
29
29
  useUploadFilesNative,
30
30
  useGetNewMongooseObjectIdQuery,
31
31
  useOnChatMessageAddedSubscription,
32
+ IPreDefinedRole,
32
33
  } from '@messenger-box/platform-client';
33
34
  import { IFileInfo } from '@messenger-box/core';
34
35
  import { config } from '../config';
@@ -68,7 +69,7 @@ export interface AlertMessageAttachmentsInterface {
68
69
  };
69
70
  }
70
71
 
71
- const ConversationViewComponent = ({ channelId }: any) => {
72
+ const ConversationViewComponent = ({ channelId, role }: any) => {
72
73
  const [channelToTop, setChannelToTop] = useState(0);
73
74
  const [channelMessages, setChannelMessages] = useState<any>([]);
74
75
  const auth: any = useSelector(userSelector);
@@ -793,19 +794,30 @@ const ConversationViewComponent = ({ channelId }: any) => {
793
794
  let actionId: any = '';
794
795
  let params: any = {};
795
796
 
796
- if (attachment?.callToAction?.route) {
797
- const { path, params: routeParams } = attachment?.callToAction?.route;
797
+ if (attachment?.callToAction?.extraParams) {
798
+ const extraParams: any = attachment?.callToAction?.extraParams;
799
+ const route: any = extraParams?.route ?? null;
800
+ let path: any = null;
801
+ let param: any = null;
802
+ if (role && role == IPreDefinedRole.Guest) {
803
+ path = route?.guest?.name ? route?.guest?.name ?? null : null;
804
+ param = route?.guest?.params ? route?.guest?.params ?? null : null;
805
+ } else if (role && role == IPreDefinedRole.Owner) {
806
+ path = route?.host?.name ? route?.host?.name ?? null : null;
807
+ param = route?.host?.params ? route?.host?.params ?? null : null;
808
+ } else {
809
+ path = route?.host?.name ? route?.host?.name ?? null : null;
810
+ param = route?.host?.params ? route?.host?.params ?? null : null;
811
+ }
812
+
798
813
  action = path;
799
- params = { ...routeParams };
814
+ params = { ...param };
800
815
  } else if (attachment?.callToAction?.link) {
801
816
  action = CALL_TO_ACTION_PATH;
802
817
  actionId = attachment?.callToAction?.link.split('/').pop();
803
818
  params = { reservationId: actionId };
804
819
  }
805
- // if (attachment?.callToAction?.link?.includes('my-reservation-details')) {
806
- // action = 'm-reservation-detail';
807
- // actionId = attachment?.callToAction?.link.split('/').pop();
808
- // }
820
+
809
821
  return (
810
822
  <Box bg={CALL_TO_ACTION_BOX_BGCOLOR} borderRadius={15} pb={2}>
811
823
  {attachment?.callToAction ? (
@@ -813,7 +825,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
813
825
  variant={'outline'}
814
826
  size={'sm'}
815
827
  borderColor={CALL_TO_ACTION_BUTTON_BORDERCOLOR}
816
- onPress={() => navigation.navigate(action, params)}
828
+ onPress={() => action && params && navigation.navigate(action, params)}
817
829
  // onPress={() => navigation.navigate(action, { reservationId: actionId })}
818
830
  >
819
831
  <Text color={CALL_TO_ACTION_TEXT_COLOR}>{attachment.callToAction.title}</Text>