@messenger-box/platform-mobile 10.0.3-alpha.23 → 10.0.3-alpha.232

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

@@ -1,301 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-    Text,
-    Image,
-    Pressable,
-    HStack,
-    Box,
-    AvatarGroup,
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    AvatarBadge,
-    View,
-} from '@admin-layout/gluestack-ui-mobile';
-import { format, isToday, isYesterday } from 'date-fns';
-import { useFocusEffect } from '@react-navigation/native';
-import { IChannel, IUserAccount } from 'common';
-import {
-    useThreadMessagesQuery,
-    useMessagesQuery,
-    useUserAccountQuery,
-    useOnThreadCreatedUpdatedSubscription,
-    useOnThreadChatMessageAddedSubscription,
-    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-} from 'common/graphql';
-import { startCase } from 'lodash-es';
-import colors from 'tailwindcss/colors';
-
-const createdAtText = (value: string) => {
-    if (!value) return '';
-
-    try {
-        // Validate the date before processing
-        const timestamp = new Date(value).getTime();
-        if (isNaN(timestamp)) {
-            console.warn(`Invalid date value in createdAtText: ${value}`);
-            return 'Unknown date';
-        }
-
-        let date = new Date(value);
-        if (isToday(date)) return 'Today';
-        if (isYesterday(date)) return 'Yesterday';
-        return format(date, 'MMM dd, yyyy');
-    } catch (error) {
-        console.error(`Error processing date in createdAtText: ${value}`, error);
-        return 'Unknown date';
-    }
-};
-
-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 [servicePostParentId, setServicePostParentId] = React.useState(null);
-    const {
-        data: threadMessages,
-        loading: threadMessageLoading,
-        error,
-        refetch: refetchThreadMessages,
-        subscribeToMore,
-    } = useThreadMessagesQuery({
-        variables: {
-            channelId: channel?.id?.toString(),
-            role,
-            limit: 2,
-        },
-        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(), role, limit: 2 });
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, [refreshing]),
-    );
-
-    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]);
-
-    React.useEffect(() => {
-        if (lastMessage) {
-            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
-            setServicePostParentId(sParentId);
-        }
-    }, [lastMessage]);
-
-    const creatorAndMembersId = React.useMemo(() => {
-        if (!channel?.members) return null;
-        const membersIds: any =
-            channel?.members
-                ?.filter((m: any) => m !== null && 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]);
-
-    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-    //     variables: {
-    //         channelId: channel?.id?.toString(),
-    //         postParentId:
-    //             postParentId == null
-    //                 ? null
-    //                 : lastMessage?.parentId
-    //                 ? lastMessage?.parentId ?? null
-    //                 : lastMessage?.id ?? null,
-    //     },
-    // });
-
-    // React.useEffect(() => {
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
-    //         refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
-    //     }
-    // }, [threadCreatedUpdated]);
-
-    return (
-        <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
-            className="flex-1 border rounded-md border-gray-200 dark:border-gray-600 dark:bg-gray-700"
-        >
-            <HStack space={'sm'} className="flex-1 w-[100%] py-3 justify-between items-center">
-                <Box className="flex-[0.1] items-start pl-3">
-                    <Avatar
-                        key={'support-service-channels-key-' + channel?.id}
-                        size={'sm'}
-                        className="bg-transparent top-0 right-0 z-[1]"
-                    >
-                        <AvatarFallbackText> {startCase(channel?.creator?.username?.charAt(0))}</AvatarFallbackText>
-                        <AvatarImage
-                            alt="user image"
-                            style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                            source={{
-                                uri: channel?.creator?.picture,
-                            }}
-                        />
-                    </Avatar>
-                </Box>
-                <Box className="flex-[0.9]">
-                    <ServiceChannelWithLastMessage
-                        channel={channel}
-                        lastMessage={lastMessage}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: THREAD_CHAT_ADDED,
-                                variables: {
-                                    channelId: channel?.id?.toString(),
-                                    postParentId: postParentId ? servicePostParentId : null,
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-
-                                    const newPostThreadData: any = subscriptionData?.data?.threadCreatedUpdated?.data;
-                                    const newMessage: any = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
-                                    const data = prev?.threadMessages?.data?.map((t: any) =>
-                                        t.id === newPostThreadData?.id
-                                            ? {
-                                                  ...t,
-                                                  replies: [...t?.replies, newMessage],
-                                                  replyCount: newPostThreadData?.replyCount,
-                                                  lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                  updatedAt: newPostThreadData?.updatedAt,
-                                              }
-                                            : t,
-                                    );
-
-                                    return Object.assign({}, prev, {
-                                        threadMessages: {
-                                            ...prev?.threadMessages,
-                                            //  totalCount: prev?.threadMessages?.totalCount + 1,
-                                            data: data,
-                                        },
-                                    });
-                                },
-                            })
-                        }
-                    />
-                    {/* <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>
-    );
-};
-
-const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscribeToNewMessages }: any) => {
-    React.useEffect(() => subscribeToNewMessages(), []);
-
-    // Define message display text
-    let displayMessage = 'No messages yet';
-
-    if (lastMessage) {
-        // Check for file attachments
-        const hasFileAttachments = lastMessage.files?.data?.length > 0;
-
-        if (hasFileAttachments) {
-            displayMessage = '📎 File attachment';
-        } else if (lastMessage.message && lastMessage.message.trim() !== '') {
-            displayMessage = lastMessage.message;
-        } else {
-            displayMessage = '(Empty message)';
-        }
-    }
-
-    return (
-        <HStack space={'sm'} className="flex-1 justify-center items-center">
-            <Box className="flex-[0.8]">
-                <Text color={colors.gray[600]} className="text-lg flex-wrap font-semibold">
-                    {channel?.title}
-                </Text>
-                <Text color={colors.gray[600]} numberOfLines={1}>
-                    {displayMessage}
-                </Text>
-            </Box>
-
-            <Box className="flex-[0.2]">
-                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-});
-
-export const SupportServiceDialogsListItem = React.memo(SupportServiceDialogsListItemComponent);

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

@@ -1,233 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-    VStack,
-    Text,
-    Pressable,
-    HStack,
-    Box,
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    Button,
-    ButtonText,
-    Icon,
-    Badge,
-    BadgeText,
-    Link,
-    LinkText,
-} from '@admin-layout/gluestack-ui-mobile';
-import { format, isToday, isYesterday } from 'date-fns';
-import { useFocusEffect } from '@react-navigation/native';
-import { IChannel, IUserAccount } from 'common';
-import { startCase } from 'lodash-es';
-import colors from 'tailwindcss/colors';
-import { useSelector } from 'react-redux';
-import { userSelector } from '@adminide-stack/user-auth0-client';
-
-const timeFormat = (value: string) => {
-    if (!value) return '';
-    let date = new Date(value);
-    if (isToday(date)) return format(date, 'h:mm a').toUpperCase();
-    return format(date, 'MMM do').toUpperCase();
-};
-
-export interface IDialogListChannel extends IChannel {
-    users: IUserAccount[];
-}
-
-export interface ThreadViewItemProps {
-    id: string;
-    post: any;
-    channel: any;
-    replies: any[];
-    onPress: (id: any, title: any, postParentId?: any) => void;
-    channelId?: string;
-    channelsDetail?: any;
-}
-
-/**
- * TODO:
- * - Get Reservation info: reservation date, status
- * - Add ability to get property information: name, logo
- */
-export const ThreadViewItemComponent: React.FC<ThreadViewItemProps> = function ThreadViewItem({
-    id,
-    post,
-    channel,
-    replies,
-    onPress,
-    channelId,
-    channelsDetail,
-}) {
-    const currentUser = useSelector(userSelector);
-
-    // Prepare thread replies for display
-    const threadReplies = useMemo(() => {
-        return replies || [];
-    }, [replies]);
-
-    if (!threadReplies || threadReplies.length === 0) {
-        return null;
-    }
-
-    // Get the last reply for the thread preview
-    const lastReply = threadReplies[0]; // Most recent reply should be first in the array
-    // Get total number of replies
-    const totalReplies = threadReplies.length;
-
-    // Get the first user in the thread as the primary user
-    const primaryUser = channel?.users?.[0] || lastReply?.author;
-    const channelName = channel?.title || `${primaryUser?.givenName || ''} ${primaryUser?.familyName || ''}`;
-
-    // Determine if the current user is in the thread
-    const userIsInThread = channel?.users?.some((user: any) => user.id === currentUser?.id);
-
-    return (
-        <Pressable
-            onPress={() => onPress(channel?.id, 'Thread', post?.id)}
-            style={{
-                marginVertical: 5,
-                backgroundColor: 'white',
-                borderRadius: 10,
-                paddingVertical: 5,
-                elevation: 1,
-                shadowColor: '#000',
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.1,
-                shadowRadius: 2,
-            }}
-        >
-            <Box className="mb-3">
-                <VStack space="md">
-                    {/* Thread header with green dot and users */}
-                    {/* <HStack space="sm" className="px-4 items-center">
-                        <Box 
-                            className="bg-green-500 rounded-full" 
-                            style={{ width: 8, height: 8 }}
-                        />
-                        <Text className="text-base text-gray-900">{channelName}</Text>
-                    </HStack> */}
-
-                    {/* Thread members */}
-                    <Text className="text-sm font-medium text-gray-600 px-4 pt-2">
-                        {channel?.users?.map((user: any) => user?.givenName || user?.username)?.join(', ')}
-                    </Text>
-
-                    {/* Thread messages preview - show up to 3 most recent messages */}
-                    {threadReplies.slice(0, 3).map((reply: any, index: number) => {
-                        // Group consecutive messages from the same user
-                        const previousReply = index > 0 ? threadReplies.slice(0, 3)[index - 1] : null;
-                        const isConsecutiveReply = previousReply && previousReply.author?.id === reply.author?.id;
-
-                        return (
-                            <HStack key={reply.id || index} space="md" className="px-4 py-1">
-                                {!isConsecutiveReply ? (
-                                    <Avatar
-                                        size="md"
-                                        style={{
-                                            width: 40,
-                                            height: 40,
-                                            backgroundColor:
-                                                reply?.author?.id === currentUser?.id ? '#2EB67D' : '#E8A54A',
-                                        }}
-                                    >
-                                        <AvatarFallbackText>
-                                            {startCase(reply?.author?.username?.charAt(0) || 'U')}
-                                        </AvatarFallbackText>
-                                        {reply?.author?.picture && (
-                                            <AvatarImage
-                                                alt={reply?.author?.username || 'User'}
-                                                source={{
-                                                    uri: reply?.author?.picture,
-                                                }}
-                                            />
-                                        )}
-                                    </Avatar>
-                                ) : (
-                                    <Box style={{ width: 40 }} />
-                                )}
-
-                                <VStack space="xs" className="flex-1">
-                                    {!isConsecutiveReply && (
-                                        <HStack space="sm" className="items-center">
-                                            <Text className="font-bold text-gray-900">
-                                                {reply?.author?.givenName || reply?.author?.username || 'User'}
-                                            </Text>
-                                            <Text className="text-xs text-gray-500">
-                                                {timeFormat(reply?.createdAt)}
-                                            </Text>
-                                        </HStack>
-                                    )}
-
-                                    {reply?.message && (
-                                        <Text color={colors.gray[700]} numberOfLines={2} className="text-base">
-                                            {reply?.message}
-                                            {reply?.edited && <Text className="text-xs text-gray-500"> (edited)</Text>}
-                                        </Text>
-                                    )}
-
-                                    {reply.email && <Text className="text-blue-500">{reply.email}</Text>}
-
-                                    {reply?.files?.data?.length > 0 && (
-                                        <HStack space="sm" className="my-1">
-                                            {reply?.files?.data?.map((file: any, fileIndex: number) => (
-                                                <Box
-                                                    key={fileIndex}
-                                                    className="overflow-hidden"
-                                                    style={{ width: 80, height: 80 }}
-                                                >
-                                                    <AvatarImage
-                                                        alt="attachment"
-                                                        className="rounded-none border-none"
-                                                        style={{
-                                                            width: '100%',
-                                                            height: '100%',
-                                                        }}
-                                                        source={{
-                                                            uri: file?.url,
-                                                        }}
-                                                    />
-                                                </Box>
-                                            ))}
-                                        </HStack>
-                                    )}
-                                </VStack>
-                            </HStack>
-                        );
-                    })}
-
-                    {/* Show more replies indicator */}
-                    {totalReplies > 3 && (
-                        <HStack className="px-4 items-center" space="sm">
-                            <Box style={{ width: 40 }} />
-                            <Link onPress={() => onPress(channel?.id, 'Thread', post?.id)}>
-                                <LinkText className="text-blue-600 mt-1">
-                                    {totalReplies - 3} more {totalReplies - 3 === 1 ? 'reply' : 'replies'}
-                                </LinkText>
-                            </Link>
-                        </HStack>
-                    )}
-
-                    {/* Reply button */}
-                    <Box className="px-4 pb-2">
-                        <Button
-                            size="sm"
-                            className="self-start rounded-full"
-                            variant="outline"
-                            style={{
-                                borderColor: '#E2E8F0',
-                                paddingHorizontal: 16,
-                                paddingVertical: 6,
-                            }}
-                            onPress={() => onPress(channel?.id, 'Thread', post?.id)}
-                        >
-                            <ButtonText style={{ fontSize: 14, color: colors.gray[800] }}>Reply</ButtonText>
-                        </Button>
-                    </Box>
-                </VStack>
-            </Box>
-        </Pressable>
-    );
-};
-
-export const ThreadViewItem = React.memo(ThreadViewItemComponent);

package/src/screens/inbox/components/workflow/dialogs-list-item-xstate.ts

@@ -1,145 +0,0 @@
-import { assign, setup } from 'xstate';
-import { merge } from 'lodash-es';
-
-export const enum Actions {
-    INITIAL_CONTEXT = 'INITIAL_CONTEXT',
-    ERROR_HANDLED = 'ERROR_HANDLED',
-    FETCH_MESSAGES = 'FETCH_MESSAGES',
-    UPDATE_MESSAGES = 'UPDATE_MESSAGES',
-    SUBSCRIBE_TO_MESSAGES = 'SUBSCRIBE_TO_MESSAGES',
-    SET_TITLE = 'SET_TITLE',
-    START_LOADING = 'START_LOADING',
-    STOP_LOADING = 'STOP_LOADING',
-}
-
-export const enum BaseState {
-    Idle = 'idle',
-    Error = 'error',
-    FetchingMessages = 'fetchingMessages',
-}
-
-export const dialogsListItemXstate = setup({
-    types: {
-        context: {} as {
-            channelId: string | null;
-            currentUser: any;
-            messages: any[];
-            loading: boolean;
-            error: string | null;
-            title: string;
-            channelMembers: any[];
-            lastMessage: any;
-        },
-    },
-    actions: {
-        errorState: assign(({ context, event }) => {
-            return {
-                ...context,
-                error: event.data?.message || 'An error occurred',
-                loading: false,
-            };
-        }),
-        setInitialContext: assign(({ context, event }) => {
-            return merge({
-                ...context,
-                channelId: event.data?.channelId || null,
-                currentUser: event.data?.currentUser || null,
-                loading: true,
-            });
-        }),
-        setMessages: assign(({ context, event }) => {
-            return {
-                ...context,
-                messages: event.data?.messages || [],
-                loading: false,
-            };
-        }),
-        updateMessages: assign(({ context, event }) => {
-            const newMessage = event.data?.message;
-            if (!newMessage) return context;
-
-            return {
-                ...context,
-                messages: [...context.messages, newMessage],
-            };
-        }),
-        setTitle: assign(({ context, event }) => {
-            return {
-                ...context,
-                title: event.data?.title || '',
-            };
-        }),
-        startLoading: assign(({ context }) => {
-            return {
-                ...context,
-                loading: true,
-            };
-        }),
-        stopLoading: assign(({ context }) => {
-            return {
-                ...context,
-                loading: false,
-            };
-        }),
-    },
-}).createMachine({
-    id: 'dialogs-list-item',
-    initial: BaseState.Idle,
-    context: {
-        channelId: null,
-        currentUser: null,
-        messages: [],
-        loading: false,
-        error: null,
-        title: '',
-        channelMembers: [],
-        lastMessage: null,
-    },
-    states: {
-        [BaseState.Idle]: {
-            on: {
-                [Actions.INITIAL_CONTEXT]: {
-                    target: BaseState.FetchingMessages,
-                    actions: ['setInitialContext'],
-                },
-                [Actions.UPDATE_MESSAGES]: {
-                    target: BaseState.Idle,
-                    actions: ['updateMessages'],
-                },
-                [Actions.SET_TITLE]: {
-                    target: BaseState.Idle,
-                    actions: ['setTitle'],
-                },
-                [Actions.START_LOADING]: {
-                    target: BaseState.Idle,
-                    actions: ['startLoading'],
-                },
-                [Actions.STOP_LOADING]: {
-                    target: BaseState.Idle,
-                    actions: ['stopLoading'],
-                },
-            },
-        },
-        [BaseState.Error]: {
-            entry: ['errorState'],
-            on: {
-                [Actions.ERROR_HANDLED]: {
-                    target: BaseState.Idle,
-                },
-            },
-        },
-        [BaseState.FetchingMessages]: {
-            invoke: {
-                src: 'fetchMessages',
-                input: ({ context, event }) => ({ context, event }),
-                onDone: {
-                    target: BaseState.Idle,
-                    actions: ['setMessages'],
-                },
-                onError: {
-                    target: BaseState.Error,
-                },
-            },
-        },
-    },
-} as any);