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

package/src/screens/inbox/components/SupportServiceDialogsListItem.tsx

@@ -0,0 +1,295 @@
+import React, { useMemo } from 'react';
+import { Text, Image, Pressable, HStack, Stack, Box, Avatar, View } from 'native-base';
+import { format, isToday, isYesterday } from 'date-fns';
+import { useFocusEffect } from '@react-navigation/native';
+import {
+    IChannel,
+    IUserAccount,
+    useThreadMessagesQuery,
+    useMessagesQuery,
+    useUserAccountQuery,
+} from '@messenger-box/platform-client';
+import { startCase } from 'lodash';
+
+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');
+};
+
+export interface IDialogListChannel extends IChannel {
+    users: IUserAccount[];
+}
+
+export interface IDialogListItemProps {
+    currentUser?: any;
+    users?: any;
+    selectedChannelId?: any;
+    channel?: any;
+    onOpen: (id: any, title: any, postParentId?: any) => void;
+    refreshing: boolean;
+    role:any;
+}
+
+/**
+ * TODO:
+ * - Get Reservation info: reservation date, status
+ * - Add ability to get property information: name, logo
+ */
+export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
+    currentUser,
+    // users,
+    selectedChannelId,
+    channel,
+    onOpen,
+    refreshing,
+    role,
+}) {
+    const {
+        data: threadMessages,
+        loading: threadMessageLoading,
+        error,
+        refetch: refetchThreadMessages,
+    } = useThreadMessagesQuery({
+        variables: {
+            channelId: channel?.id?.toString(),
+            role,
+            limit: 25,
+        },
+        fetchPolicy: 'cache-and-network',
+    });
+   
+
+    // const {
+    //     data: messagesQuery,
+    //     loading: messageLoading,
+    //     refetch: refetchMessages,
+    // } = useMessagesQuery({
+    //     variables: {
+    //         channelId: channel?.id?.toString(),
+    //         limit: 25,
+    //     },
+    //     fetchPolicy: 'cache-and-network',
+    // });
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+          //  refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
+            refetchThreadMessages({ channelId: channel?.id?.toString(), limit: 25 });
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            };
+        }, [refreshing]),
+    );
+
+    React.useEffect(() => {
+        if (refreshing) {
+          //  refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
+            refetchThreadMessages({ channelId: channel?.id?.toString(), limit: 25 });
+        }
+    }, [refreshing]);
+
+    // const lastMessageCreatorAndMembers = useMemo(() => {
+    //     const replyCount = threadMessages?.threadMessages?.data?.reduce((rc: any, t: any) => rc + t?.replyCount, 0);
+    //     if (!messagesQuery?.messages?.data?.length || threadMessages?.threadMessages?.totalCount == 0) {
+    //         return null;
+    //     }
+    //     const { data } = messagesQuery.messages;
+    //     const filteredData = data?.filter((p: any) => p?.message !== '');
+    //     if (replyCount == 0) {
+    //         const post: any =
+    //             threadMessages?.threadMessages?.data?.find((t: any) => {
+    //                 return t?.post?.message !== '';
+    //             }) ??
+    //             threadMessages?.threadMessages?.data?.find((t: any) => {
+    //                 return t?.post;
+    //             }) ??
+    //             null;
+
+    //         return post ? post?.post : null;
+    //     } else {
+    //         return filteredData[0];
+    //     }
+    //     // return data[data.length - 1];
+    // }, [threadMessages, messagesQuery]);
+
+    // const lastMessage = useMemo(() => {
+    //     if (!threadMessages?.threadMessages?.data?.length) {
+    //         return null;
+    //     }
+    //     const { data }: any = threadMessages.threadMessages;
+    //     const replies =
+    //         data
+    //             ?.map((t: any) => t?.replies)
+    //             ?.flat(1)
+    //             ?.filter((p: any) => p?.message !== '') ?? [];
+    //     if (replies?.length) {
+    //         return replies[0];
+    //         // return replies[replies.length - 1];
+    //     } else {
+    //         const post =
+    //             data?.find((t: any) => {
+    //                 return t?.post?.message !== '';
+    //             }) ??
+    //             data?.find((t: any) => {
+    //                 return t?.post;
+    //             }) ??
+    //             null;
+    //         return post ? post?.post : null;
+    //     }
+    // }, [threadMessages]);
+
+    const lastMessage = useMemo(() => {
+        if (!threadMessages?.threadMessages?.data?.length) {
+            return null;
+        }
+        const { data }: any = threadMessages.threadMessages;
+        const replies =
+            data
+                ?.map((t: any) => t?.replies)
+                ?.flat(1)
+                ?.filter((p: any) => p?.message !== '') ?? [];
+        if (replies?.length) {
+            return replies[0];
+            // return replies[replies.length - 1];
+        } else {
+            const post =
+                data?.find((t: any) => {
+                    return t?.post?.message !== '';
+                }) ??
+                data?.find((t: any) => {
+                    return t?.post;
+                }) ??
+                null;
+            return post ? post?.post : null;
+        }
+    }, [threadMessages]);
+
+    const creatorAndMembersId = React.useMemo(() => {
+        if (!channel?.members) return null;
+        const membersIds: any =
+            channel?.members?.filter((m: any) => m?.user?.id !== currentUser?.id)?.map((mu: any) => mu?.user?.id) ?? [];
+        const creatorId: any = channel?.creator?.id;
+        const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
+        return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
+    }, [channel]);
+
+    const postParentId = React.useMemo(() => {
+        if (!creatorAndMembersId?.length) return null;
+
+        return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
+            ? null
+            : lastMessage?.parentId
+            ? lastMessage?.parentId
+            : lastMessage?.id ?? 0;
+    }, [creatorAndMembersId, lastMessage]);
+
+    return (
+        <Pressable
+            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
+            borderWidth={'1'}
+            borderRadius={10}
+            borderColor={'gray.200'}
+            flex={1}
+            _dark={{
+                borderColor: 'coolGray.600',
+                backgroundColor: 'gray.700',
+            }}
+            _web={{
+                shadow: 2,
+                borderWidth: 0,
+            }}
+            _light={{
+                backgroundColor: 'gray.50',
+            }}
+        >
+            <HStack
+                // px={2}
+                // pl={3}
+                py={3}
+                space={2}
+                w={'100%'}
+                flex={1}
+                direction={'row'}
+                justifyContent={'space-between'}
+                alignItems={'center'}
+            >
+                <Box flex={0.1} alignItems={'flex-start'} pl={3}>
+                    <Avatar.Group
+                        _avatar={{
+                            size: 'sm',
+                            bg: 'transparent',
+                        }}
+                    >
+                        <Avatar
+                            key={'service-channels-key'}
+                            bg={'transparent'}
+                            size={9}
+                            top={0}
+                            right={0}
+                            zIndex={1}
+                            _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                            source={{
+                                uri: channel?.creator?.picture,
+                            }}
+                        >
+                            {startCase(channel?.creator?.username?.charAt(0))}
+                        </Avatar>
+                    </Avatar.Group>
+                </Box>
+                <Box flex={0.9}>
+                    <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
+                        <Box flex={0.8}>
+                            <Text color="gray.600" fontSize="lg" flexWrap={'wrap'} fontWeight="semibold">
+                                {channel?.title}
+                            </Text>
+                            <Text color="gray.600" noOfLines={1}>
+                                {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
+                                    ? lastMessageCreatorAndMembers?.message ?? ''
+                                    : lastMessage?.message ?? ''} */}
+                                {lastMessage?.message ?? ''}
+                            </Text>
+                        </Box>
+
+                        <Box flex={0.2}>
+                            {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id) ? (
+                                <Text color="gray.500">
+                                    {lastMessageCreatorAndMembers
+                                        ? createdAtText(lastMessageCreatorAndMembers?.createdAt)
+                                        : ''}
+                                </Text>
+                            ) : (
+                                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+                            )} */}
+                            <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+                        </Box>
+                    </HStack>
+                    {/* <Text
+                        flex={1}
+                        color="gray.600"
+                        p={0}
+                        m={0}
+                        w={'100%'}
+                        justifyContent={''}
+                        fontSize="lg"
+                        fontWeight="semibold"
+                    >
+                        {title}
+                    </Text> */}
+                    {/* <Text flex={0.1} color="gray.600">
+                        {lastMessage?.message ?? ''}
+                    </Text> */}
+                </Box>
+                {/* <Text flex={0.2} color="gray.500">
+                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
+                </Text> */}
+            </HStack>
+        </Pressable>
+    );
+};
+
+export const SupportServiceDialogsListItem = React.memo(SupportServiceDialogsListItemComponent);

package/src/screens/inbox/components/ThreadsViewItem.tsx

@@ -0,0 +1,236 @@
+import React, { useMemo } from 'react';
+import { Text, Image, Pressable, VStack, HStack, Stack, Box, Avatar, View, Button } from 'native-base';
+import { format, isToday, isYesterday } from 'date-fns';
+import { useFocusEffect } from '@react-navigation/native';
+import {
+    IChannel,
+    IUserAccount,
+    useThreadMessagesQuery,
+    useMessagesQuery,
+    useUserAccountQuery,
+} from '@messenger-box/platform-client';
+import { startCase } from 'lodash';
+
+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');
+};
+
+export interface IDialogListChannel extends IChannel {
+    users: IUserAccount[];
+}
+
+export interface IDialogListItemProps {
+    currentUser?: any;
+    users?: any;
+    thread?: any;
+    onOpen: (id: any, title: any, postParentId?: any) => void;
+}
+
+/**
+ * TODO:
+ * - Get Reservation info: reservation date, status
+ * - Add ability to get property information: name, logo
+ */
+export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
+    currentUser,
+    // users,
+    thread,
+    onOpen,
+}) {
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            };
+        }, []),
+    );
+
+    const lastMessage = useMemo(() => {
+        if (!thread) {
+            return null;
+        }
+        const replies = thread?.replies?.filter((p: any) => p?.message !== '') ?? [];
+        if (replies?.length) {
+            return replies[0];
+            // return replies[replies.length - 1];
+        } else {
+            const post = thread?.post ?? null;
+            return post ? post?.post : null;
+        }
+    }, [thread]);
+
+    const participants: any = React.useMemo(() => {
+        if (!thread?.participants?.length) return null;
+        return thread?.participants?.filter((u: any) => u?.user?.id !== currentUser?.id) ?? [];
+    }, [thread]);
+
+    const allParticipantsNames: any = React.useMemo(() => {
+        if (!participants?.length) return null;
+        return (
+            participants
+                ?.map((p: any) => {
+                    return p?.user?.givenName + ' ' + p?.user?.familyName ?? '';
+                })
+                ?.join(', ') ?? ''
+        );
+    }, [participants]);
+
+    return (
+        <VStack
+            space={1}
+            py={2}
+            px={2}
+            borderWidth={'1'}
+            borderRadius={10}
+            borderColor={'gray.200'}
+            flex={1}
+            _dark={{
+                borderColor: 'white',
+                backgroundColor: 'white',
+            }}
+            _web={{
+                shadow: 2,
+                borderWidth: 0,
+            }}
+            _light={{
+                backgroundColor: 'white',
+            }}
+        >
+            <HStack
+                // px={2}
+                // pl={3}
+                py={2}
+                space={2}
+                w={'100%'}
+                flex={1}
+                direction={'row'}
+                justifyContent={'space-between'}
+                alignItems={'center'}
+            >
+                <Box flex={1}>
+                    <HStack flex={1} space={5} py={2} alignItems={'baseline'}>
+                        <Box>
+                            <Avatar.Badge size={4} left={0} zIndex={1} bg="green.800" />
+                        </Box>
+                        <Box>
+                            <Text color="gray.600" fontSize="lg" flexWrap={'wrap'} fontWeight="semibold">
+                                {allParticipantsNames || ''}
+                            </Text>
+                        </Box>
+                    </HStack>
+                    <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
+                        <Box flex={1}>
+                            <HStack space={2} py={2}>
+                                <Box>
+                                    <Avatar
+                                        bg={'transparent'}
+                                        size={8}
+                                        _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                        source={{
+                                            uri: thread?.post?.author?.picture,
+                                        }}
+                                    >
+                                        {startCase(thread?.post?.author?.username?.charAt(0))}
+                                    </Avatar>
+                                </Box>
+                                <Box>
+                                    <HStack space={4}>
+                                        <Text>
+                                            {thread?.post?.author?.givenName + ' ' + thread?.post?.author?.familyName ??
+                                                ''}
+                                        </Text>
+                                        <Text color="gray.500">
+                                            {thread?.post ? createdAtText(thread?.post?.createdAt) : ''}
+                                        </Text>
+                                    </HStack>
+                                    <Text color="gray.600" noOfLines={2}>
+                                        {thread?.post?.message ?? ''}
+                                    </Text>
+                                    {!thread?.replies?.length && (
+                                        <Button
+                                            size={'xs'}
+                                            w={150}
+                                            variant={'outline'}
+                                            _text={{ fontSize: 12, color: '#000' }}
+                                            onPress={() =>
+                                                onOpen(thread?.channel?.id, thread?.channel?.title, thread?.post?.id)
+                                            }
+                                        >
+                                            Reply
+                                        </Button>
+                                    )}
+                                </Box>
+                            </HStack>
+                            {thread?.replies?.length > 0 && (
+                                <HStack space={2} pb={2} pt={1}>
+                                    <Box>
+                                        <Avatar
+                                            bg={'transparent'}
+                                            size={8}
+                                            _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                            source={{
+                                                uri: lastMessage?.author?.picture,
+                                            }}
+                                        >
+                                            {startCase(lastMessage?.author?.username?.charAt(0))}
+                                        </Avatar>
+                                    </Box>
+                                    <Box>
+                                        <HStack space={4}>
+                                            <Text>
+                                                {lastMessage?.author?.givenName +
+                                                    ' ' +
+                                                    lastMessage?.author?.familyName ?? ''}
+                                            </Text>
+                                            <Text color="gray.500">
+                                                {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
+                                            </Text>
+                                        </HStack>
+                                        <Text color="gray.600" noOfLines={2}>
+                                            {/* {lastMessage?.message ?? ''} */}
+                                            {lastMessage?.message
+                                                ? lastMessage?.message.length < 70
+                                                    ? `${lastMessage?.message}`
+                                                    : `${lastMessage?.message.substring(0, 68)}....`
+                                                : ''}
+                                        </Text>
+                                        <Button
+                                            size={'xs'}
+                                            w={150}
+                                            variant={'outline'}
+                                            _text={{ fontSize: 12, color: '#000' }}
+                                            onPress={() =>
+                                                onOpen(thread?.channel?.id, thread?.channel?.title, thread?.post?.id)
+                                            }
+                                        >
+                                            Reply
+                                        </Button>
+                                    </Box>
+                                </HStack>
+                            )}
+                        </Box>
+                    </HStack>
+                </Box>
+            </HStack>
+            {/* <HStack>
+                <Box flex={0.06} alignItems={'flex-start'}></Box>
+                <Button
+                    size={'xs'}
+                    variant={'outline'}
+                    _text={{ fontSize: 12, color: '#000' }}
+                    onPress={() => onOpen(thread?.channel?.id, thread?.channel?.title, postParentId)}
+                >
+                    Reply
+                </Button>
+            </HStack> */}
+        </VStack>
+    );
+};
+
+export const ThreadViewItem = React.memo(ThreadViewItemComponent);

package/src/screens/inbox/config/config.ts

@@ -4,6 +4,10 @@ export const config = cleanEnv(process['APP_ENV'] || process.env, {
     MESSAGES_PER_PAGE: num({ devDefault: 10, default: 20 }),
     FILES_PER_MESSAGE: num({ default: 10 }),
     INBOX_MESSEGE_PATH: str({ default: 'MainStack.Message' }),
+    // THREAD_MESSEGE_PATH: str({ default: 'MainStack.Thread' }),
+    // THREADS_PATH: str({ default: 'MainStack.ThreadMessage' }),
+    THREAD_MESSEGE_PATH: str({ default: 'MainStack.ThreadMessage' }),
+    THREADS_PATH: str({ default: 'MainStack.Thread' }),
     CALL_TO_ACTION_PATH: str({ default: 'MainStack.MyReservationDetails' }),
     CALL_TO_ACTION_BOX_BGCOLOR: str({ default: '#0084ff' }),
     CALL_TO_ACTION_BUTTON_BORDERCOLOR: str({ default: '#fff' }),