@messenger-box/platform-mobile 0.0.1-alpha.362 → 0.0.1-alpha.363

package/src/screens/inbox/containers/ConversationView.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Box, Button, HStack, Icon, Image, Spinner, Text, useColorModeValue, ScrollView } from 'native-base';
+import { Box, Button, HStack, Icon, Image, Spinner, Text, useColorModeValue, Avatar, ScrollView } from 'native-base';
 import { Platform, TouchableOpacity } from 'react-native';
-import { useNavigation, useFocusEffect } from '@react-navigation/native';
+import { useNavigation, useFocusEffect, useIsFocused } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
-import { orderBy, uniqBy } from 'lodash';
+import { orderBy, uniqBy, startCase } from 'lodash';
 import * as ImagePicker from 'expo-image-picker';
 import { encode as atob } from 'base-64';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
@@ -15,12 +15,14 @@ import {
     useSendMessagesMutation,
     useViewChannelDetailQuery,
     useUploadFilesNative,
+    useGetNewMongooseObjectIdQuery,
 } from '@messenger-box/platform-client';
 import { IFileInfo } from '@messenger-box/core';
 import { config } from '../config';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { SlackMessage, ImageViewerModal } from '../components/SlackMessageContainer';
 import CachedImage from '../components/CachedImage';
+import { format, isToday, isYesterday } from 'date-fns';
 const {
     MESSAGES_PER_PAGE,
     CALL_TO_ACTION_BOX_BGCOLOR,
@@ -29,9 +31,18 @@ const {
     CALL_TO_ACTION_TEXT_COLOR,
 } = config;
 
+const createdAtText = (value: string) => {
+    if (!value) return '';
+    let date = new Date(value);
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(new Date(value), 'MMM dd, yyyy');
+};
+
 interface IMessageProps extends IMessage {
     type: string;
     propsConfiguration?: any;
+    replies?: any;
 }
 
 export interface AlertMessageAttachmentsInterface {
@@ -62,6 +73,11 @@ const ConversationViewComponent = ({ channelId }: any) => {
     const [expoTokens, setExpoTokens] = useState<any[]>([]);
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
+    const isFocused = useIsFocused();
+    const { data: mongooseObjectId } = useGetNewMongooseObjectIdQuery({
+        fetchPolicy: 'network-only',
+        pollInterval: 5000,
+    });
 
     const { startUpload } = useUploadFilesNative();
 
@@ -74,6 +90,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
     }: any = useMessagesQuery({
         variables: {
             channelId: channelId?.toString(),
+            parentId: null,
             limit: MESSAGES_PER_PAGE,
         },
         skip: !channelId,
@@ -106,6 +123,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
             refetchChannelDetail({ id: channelId?.toString() });
             refetch({
                 channelId: channelId?.toString(),
+                parentId: null,
                 limit: MESSAGES_PER_PAGE,
             }).then(({ data }) => {
                 if (!data?.messages) {
@@ -121,7 +139,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
                 setTotalCount(0);
                 setChannelMessages([]);
             };
-        }, []),
+        }, [isFocused]),
     );
 
     React.useEffect(() => {
@@ -208,6 +226,8 @@ const ConversationViewComponent = ({ channelId }: any) => {
             const numberOfNewMessages = checkForMessages?.messages?.totalCount - totalCount;
             console.log('new msg check');
             refetch({
+                channelId: channelId?.toString(),
+                parentId: null,
                 limit: numberOfNewMessages,
             }).then(({ data }) => {
                 if (!data?.messages) {
@@ -241,7 +261,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
     const onFetchOld = useCallback(() => {
         if (data?.messages?.totalCount > channelMessages.length) {
             setLoadingOldMessages(true);
-            refetch({ skip: channelMessages.length });
+            refetch({ channelId: channelId?.toString(), parentId: null, skip: channelMessages.length });
         }
     }, [data, channelMessages]);
 
@@ -420,102 +440,223 @@ const ConversationViewComponent = ({ channelId }: any) => {
     //     [setChannelMessages, currentUser, channelId, images,expoTokens],
     // );
 
-    const handleSend = async (message: string) => {
-        if (!channelId) return;
-        if (!message && message != ' ' && images.length == 0) return;
-
-        setLoading(true);
-        const { data } = await sendMsg({
-            variables: {
-                channelId,
-                content: message,
-            },
-            update: (cache, { data, errors }: any) => {
-                if (!data || errors) {
-                    setLoading(false);
-                    return;
-                }
-                setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
-                setTotalCount((t: any) => t + 1);
-                setChannelToTop(channelToTop + 1);
-                setLoading(false);
-                setMsg('');
-                const givenName = auth?.profile?.given_name ?? '';
-                const familyName = auth?.profile?.family_name ?? '';
-                const fullName = givenName ? givenName + ' ' + familyName : '';
-                const title: String = fullName ? fullName : 'Message';
-                const body: String = message;
-                const notificationData: any = {
-                    url: config.INBOX_MESSEGE_PATH,
-                    params: { channelId, hideTabBar: true },
-                    screen: 'DialogMessages',
-                };
-                refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
-                    if (res?.data?.viewChannelDetail?.members?.length) {
-                        const channelData: any =
-                            res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
-                        const tokens: any =
-                            channelData
-                                ?.map(
-                                    (u: any) =>
-                                        u?.user?.tokens
-                                            ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
-                                            ?.map((et: any) => et?.token) ?? [],
-                                )
-                                ?.flat(1)
-                                ?.filter((t: any) => t)
-                                ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
-                        console.log('expo to', JSON.stringify(tokens));
-                        if (tokens?.length > 0) {
-                            const to: any = tokens?.length > 0 ? tokens : [];
-
-                            sendPushNotification(title, body, notificationData, to);
-                        }
-                    }
+    const handleSend = useCallback(
+        async (message: string) => {
+            if (!channelId) return;
+            if (!message && message != ' ' && images.length == 0) return;
+
+            if (images && images.length > 0) {
+                const postId: any = mongooseObjectId?.getNewMongooseObjectId;
+                setLoading(true);
+                const uploadResponse = await startUpload({
+                    file: images,
+                    saveUploadedFile: {
+                        variables: {
+                            postId,
+                        },
+                    },
+                    createUploadLink: {
+                        variables: {
+                            postId,
+                        },
+                    },
                 });
-            },
-        });
-        if (images && images.length > 0 && data?.sendMessage?.id) {
-            const { id: postId } = data.sendMessage;
-            setLoading(true);
-            const uploadResponse = await startUpload({
-                file: images,
-                saveUploadedFile: {
+                if (uploadResponse?.error) setLoading(false);
+                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+
+                if (uploadResponse.data) {
+                    setImage('');
+                    setFiles([]);
+                    setImages([]);
+                    //setLoading(false);
+                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
+                    await sendMsg({
+                        variables: {
+                            postId,
+                            channelId,
+                            content: message,
+                            files,
+                        },
+                        update: (cache, { data, errors }: any) => {
+                            if (!data || errors) {
+                                setLoading(false);
+                                return;
+                            }
+                            setChannelMessages((messages: any) => [
+                                ...messages,
+                                {
+                                    ...data?.sendMessage,
+                                    files: {
+                                        totalCount: uploadedFiles.length,
+                                        data: uploadedFiles,
+                                    },
+                                },
+                            ]);
+                            setTotalCount((t: any) => t + 1);
+                            setChannelToTop(channelToTop + 1);
+                            setLoading(false);
+                            setMsg('');
+                            const msg = message==''?'Send a file':message;
+                            fetchTokenAndSendPushNotification(msg, channelId);
+                        },
+                    });
+                }
+            } else {
+                setLoading(true);
+                const { data } = await sendMsg({
                     variables: {
-                        postId,
+                        channelId,
+                        content: message,
                     },
-                },
-                createUploadLink: {
-                    variables: {
-                        postId,
+                    update: (cache, { data, errors }: any) => {
+                        if (!data || errors) {
+                            setLoading(false);
+                            return;
+                        }
+                        setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
+                        setTotalCount((t: any) => t + 1);
+                        setChannelToTop(channelToTop + 1);
+                        setLoading(false);
+                        setMsg('');
+                        fetchTokenAndSendPushNotification(message, channelId);
                     },
-                },
-            });
-            if (uploadResponse?.error) setLoading(false);
-            const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-            if (uploadResponse.data) {
-                setImage('');
-                setFiles([]);
-                setImages([]);
-                setLoading(false);
+                });
             }
-            setChannelMessages((messages: any) =>
-                messages.map((message: any) => {
-                    if (message.id === postId) {
-                        return {
-                            ...message,
-                            files: {
-                                totalCount: uploadedFiles.length,
-                                data: uploadedFiles,
-                            },
-                        };
-                    }
-                    return message;
-                }),
-            );
-        }
+        },
+        [mongooseObjectId, setChannelMessages, channelId, images, channelToTop, expoTokens],
+    );
+
+    const fetchTokenAndSendPushNotification = (message: any, channelId: any) => {
+        const givenName = auth?.profile?.given_name ?? '';
+        const familyName = auth?.profile?.family_name ?? '';
+        const fullName = givenName ? givenName + ' ' + familyName : '';
+        const title: String = fullName ? fullName : 'Message';
+        const body: String = message;
+        const notificationData: any = {
+            url: config.INBOX_MESSEGE_PATH,
+            params: { channelId, hideTabBar: true },
+            screen: 'DialogMessages',
+        };
+        refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
+            if (res?.data?.viewChannelDetail?.members?.length) {
+                const channelData: any =
+                    res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
+                const tokens: any =
+                    channelData
+                        ?.map(
+                            (u: any) =>
+                                u?.user?.tokens
+                                    ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
+                                    ?.map((et: any) => et?.token) ?? [],
+                        )
+                        ?.flat(1)
+                        ?.filter((t: any) => t)
+                        ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
+                console.log('expo to', JSON.stringify(tokens));
+                if (tokens?.length > 0) {
+                    const to: any = tokens?.length > 0 ? tokens : [];
+                    sendPushNotification(title, body, notificationData, to);
+                }
+            }
+        });
     };
 
+    // const handleSend1 = async (message: string) => {
+    //     if (!channelId) return;
+    //     if (!message && message != ' ' && images.length == 0) return;
+
+    //     setLoading(true);
+    //     const { data } = await sendMsg({
+    //         variables: {
+    //             channelId,
+    //             content: message,
+    //         },
+    //         update: (cache, { data, errors }: any) => {
+    //             if (!data || errors) {
+    //                 setLoading(false);
+    //                 return;
+    //             }
+    //             setChannelMessages((messages: any) => [...messages, data?.sendMessage]);
+    //             setTotalCount((t: any) => t + 1);
+    //             setChannelToTop(channelToTop + 1);
+    //             setLoading(false);
+    //             setMsg('');
+    //             const givenName = auth?.profile?.given_name ?? '';
+    //             const familyName = auth?.profile?.family_name ?? '';
+    //             const fullName = givenName ? givenName + ' ' + familyName : '';
+    //             const title: String = fullName ? fullName : 'Message';
+    //             const body: String = message;
+    //             const notificationData: any = {
+    //                 url: config.INBOX_MESSEGE_PATH,
+    //                 params: { channelId, hideTabBar: true },
+    //                 screen: 'DialogMessages',
+    //             };
+    //             refetchChannelDetail({ id: channelId?.toString() })?.then((res: any) => {
+    //                 if (res?.data?.viewChannelDetail?.members?.length) {
+    //                     const channelData: any =
+    //                         res?.data?.viewChannelDetail?.members?.filter((mu: any) => mu?.user?.id != auth?.id) ?? [];
+    //                     const tokens: any =
+    //                         channelData
+    //                             ?.map(
+    //                                 (u: any) =>
+    //                                     u?.user?.tokens
+    //                                         ?.filter((t: any) => t?.type == 'EXPO_NOTIFICATION_TOKEN')
+    //                                         ?.map((et: any) => et?.token) ?? [],
+    //                             )
+    //                             ?.flat(1)
+    //                             ?.filter((t: any) => t)
+    //                             ?.filter((value: any, index: any, array: any) => array.indexOf(value) === index) ?? [];
+    //                     console.log('expo to', JSON.stringify(tokens));
+    //                     if (tokens?.length > 0) {
+    //                         const to: any = tokens?.length > 0 ? tokens : [];
+
+    //                         sendPushNotification(title, body, notificationData, to);
+    //                     }
+    //                 }
+    //             });
+    //         },
+    //     });
+    //     if (images && images.length > 0 && data?.sendMessage?.id) {
+    //         const { id: postId } = data.sendMessage;
+    //         setLoading(true);
+    //         const uploadResponse = await startUpload({
+    //             file: images,
+    //             saveUploadedFile: {
+    //                 variables: {
+    //                     postId,
+    //                 },
+    //             },
+    //             createUploadLink: {
+    //                 variables: {
+    //                     postId,
+    //                 },
+    //             },
+    //         });
+    //         if (uploadResponse?.error) setLoading(false);
+    //         const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+    //         if (uploadResponse.data) {
+    //             setImage('');
+    //             setFiles([]);
+    //             setImages([]);
+    //             setLoading(false);
+    //         }
+    //         setChannelMessages((messages: any) =>
+    //             messages.map((message: any) => {
+    //                 if (message.id === postId) {
+    //                     return {
+    //                         ...message,
+    //                         files: {
+    //                             totalCount: uploadedFiles.length,
+    //                             data: uploadedFiles,
+    //                         },
+    //                     };
+    //                 }
+    //                 return message;
+    //             }),
+    //         );
+    //     }
+    // };
+
     const messageList = useMemo(() => {
         let currentDate = '';
         let res: any = [];
@@ -546,6 +687,7 @@ const ConversationViewComponent = ({ channelId }: any) => {
                     (message.received = msg?.isRead);
                 message.type = msg?.type;
                 message.propsConfiguration = msg?.propsConfiguration;
+                message.replies = msg?.replies ?? [];
                 res.push(message);
             });
         }
@@ -569,6 +711,8 @@ const ConversationViewComponent = ({ channelId }: any) => {
 
     const renderMessageText = (props: any) => {
         const { currentMessage } = props;
+        const lastReply: any = currentMessage?.replies?.data?.length > 0 ? currentMessage?.replies?.data?.[0] : null;
+
         if (currentMessage.type === 'ALERT') {
             const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
             let action: string = '';
@@ -600,7 +744,56 @@ const ConversationViewComponent = ({ channelId }: any) => {
                 </Box>
             );
         } else {
-            return <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />;
+            return (
+                <TouchableOpacity
+                    onPress={() =>
+                        navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                            channelId: channelId,
+                            title: 'Message',
+                            postParentId: currentMessage?._id,
+                            isPostParentIdThread: true,
+                        })
+                    }
+                >
+                    <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                    {currentMessage?.replies?.data?.length > 0 && (
+                        <HStack space={1} px={1} alignItems={'center'}>
+                            <HStack>
+                                {currentMessage?.replies?.data
+                                    ?.filter(
+                                        (v: any, i: any, a: any) =>
+                                            a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
+                                    )
+                                    ?.slice(0, 2)
+                                    ?.reverse()
+                                    ?.map((p: any, i: Number) => (
+                                        <Avatar
+                                            key={'key' + i}
+                                            bg={'transparent'}
+                                            size={6}
+                                            // top={i == 1 ? 4 : 0}
+                                            // right={i == 1 ? -2 : 0}
+                                            // zIndex={i == 1 ? 5 : 1}
+                                            _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                            source={{
+                                                uri: p?.author?.picture,
+                                            }}
+                                        >
+                                            {startCase(p?.author?.username?.charAt(0))}
+                                        </Avatar>
+                                    ))}
+                            </HStack>
+                            <Text fontSize={12} fontWeight={'bold'} color={'blue.800'}>
+                                {currentMessage?.replies?.totalCount}{' '}
+                                {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                            </Text>
+                            <Text fontSize={12} fontWeight={'bold'} color={'gray.500'}>
+                                {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                            </Text>
+                        </HStack>
+                    )}
+                </TouchableOpacity>
+            );
         }
     };
 

package/src/screens/inbox/containers/Dialogs.tsx

@@ -13,6 +13,7 @@ import { config } from '../config';
 export interface InboxProps {
     channelFilters?: Record<string, unknown>;
     channelRole?: string;
+    supportServices:boolean;
 }
 
 const DialogsComponent = (props: InboxProps) => {
@@ -119,7 +120,7 @@ const DialogsComponent = (props: InboxProps) => {
      },[])
 
     return (
-        <Box p={2}>
+        <Box p={2} pt={props?.supportServices ? 0 : 2}>
             <FlatList
                 data={channels && channels?.length > 0 ? channels : []}
                 onRefresh={handleRefresh}

package/src/screens/inbox/containers/SupportServiceDialogs.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import { FlatList, Box, Heading, Input, Text, Icon, Center, Spinner } from 'native-base';
+import { Ionicons } from '@expo/vector-icons';
+import { useSelector, useDispatch } from 'react-redux';
+import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
+
+import { SupportServiceDialogsListItem } from '../components/SupportServiceDialogsListItem';
+import { useSupportServiceChannelsQuery } from '@messenger-box/platform-client';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
+import { config } from '../config';
+
+export interface SupportServiceInboxProps {
+    channelFilters?: Record<string, unknown>;
+    channelRole?: string;
+}
+
+const SupportServiceDialogsComponent = (props: SupportServiceInboxProps) => {
+    const { channelFilters, channelRole } = props;
+    const { params } = useRoute<any>();
+    const auth = useSelector(userSelector);
+    const dispatch = useDispatch();
+    const navigation = useNavigation<any>();
+    const isFocused = useIsFocused();
+    const [refreshing, setRefresh] = useState<boolean>(false);
+    // const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
+
+    const {
+        data: serviceChannels,
+        loading: serviceChannelsLoading,
+        refetch: getServiceChannelsRefetch,
+    } = useSupportServiceChannelsQuery({
+        variables: {
+            criteria: { type: 'SERVICE' },
+        },
+        onCompleted: (data: any) => {
+            //setRefresh(false);
+        },
+    });
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            setRefresh(false);
+            getServiceChannelsRefetch({ criteria: { type: 'SERVICE' } });
+
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            };
+        }, []),
+    );
+
+    const channels = React.useMemo(() => {
+        if (!serviceChannels?.supportServiceChannels?.length) return null;
+        let uChannels: any =
+            serviceChannels?.supportServiceChannels?.filter((c: any) =>
+                c.members.some((u: any) => u.user.__typename == 'UserAccount'),
+            ) ?? [];
+        return uChannels || [];
+    }, [serviceChannels]);
+
+    const handleSelectChannel = useCallback((id: any, title: any, postParentId: any) => {
+        if (params?.channelId) {
+            navigation.navigate(
+                params?.postParentId || params?.postParentId == 0 ? config.THREAD_MESSEGE_PATH : (config.THREADS_PATH as any),
+                {
+                    channelId: params?.channelId,
+                    role:params?.role,
+                    title: params?.title ?? null,
+                    postParentId: params?.postParentId,
+                    hideTabBar: true,
+                },
+            );
+        } else {
+            navigation.navigate(
+                postParentId || postParentId == 0 ? config.THREAD_MESSEGE_PATH : (config.THREADS_PATH as any),
+                {
+                    channelId: id,
+                    role:channelRole,
+                    title: title,
+                    postParentId: postParentId,
+                    hideTabBar: true,
+                },
+            );
+        }
+    }, []);
+
+    const handleRefresh = useCallback(() => {
+        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
+        setRefresh(true)
+        getServiceChannelsRefetch({ criteria: { type: 'SERVICE' } })?.then((res:any)=>setRefresh(false));
+    }, []);
+
+    return (
+        <Box p={2} pb={0}>
+            <FlatList
+                data={channels && channels?.length > 0 ? channels : []}
+                onRefresh={handleRefresh}
+                refreshing={serviceChannelsLoading}
+                contentContainerStyle={{}}
+                ItemSeparatorComponent={() => <Box height="0.5" backgroundColor="gray.200" />}
+                renderItem={({ item: channel }) => (
+                    <SupportServiceDialogsListItem
+                        onOpen={handleSelectChannel}
+                        currentUser={auth}
+                        channel={channel}
+                        refreshing={refreshing}
+                        selectedChannelId={params?.channelId}
+                        role={channelRole}
+                    />
+                )}
+                keyExtractor={(item, index) => 'support-service-key' + index}
+            />
+        </Box>
+    );
+};
+
+export const SupportServiceDialogs = React.memo(SupportServiceDialogsComponent);