@messenger-box/platform-mobile 10.0.3-alpha.46 → 10.0.3-alpha.48

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

@@ -1,27 +1,17 @@
 import React, { useMemo, useState, useCallback, useRef } 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 {
-    THREAD_CREATED_UPDATED,
-    CHAT_MESSAGE_ADDED,
-    useThreadMessagesQuery,
-    useThreadCreatedUpdatedSubscription,
-    useThreadChatMessageAddedSubscription,
-} from '../../../queries/inboxQueries';
+import { THREAD_CREATED_UPDATED, CHAT_MESSAGE_ADDED, useThreadMessagesQuery } from '../../../queries/inboxQueries';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
 import { SubscriptionHandler } from './SubscriptionHandler';
@@ -122,136 +112,63 @@ const computeLastMessage = (threadMessages) => {
     }, allMessages[0]);
 };
 
-const ServiceChannelWithLastMessage = React.memo(
-    ({
-        channel,
-        lastMessage,
-        subscribeToNewMessages,
-        subscribeToChatMessages,
-        subscribeToMore,
-        postParentId,
-        servicePostParentId,
-    }: {
-        channel: any;
-        lastMessage: any;
-        subscribeToNewMessages: () => void;
-        subscribeToChatMessages: () => void;
-        subscribeToMore: any;
-        postParentId: any;
-        servicePostParentId: any;
-    }) => {
-        React.useEffect(() => {
-            console.log(`Setting up subscriptions for channel ${channel?.id}`);
-            // Subscribe and store the unsubscribe functions
-            let threadUnsubscribe;
-            let chatUnsubscribe;
-
-            try {
-                threadUnsubscribe = subscribeToNewMessages();
-                chatUnsubscribe = subscribeToChatMessages();
-            } catch (error) {
-                console.error(`Error setting up subscriptions for channel ${channel?.id}:`, error);
-            }
-
-            return () => {
-                // Cleanup subscriptions on unmount
-                if (threadUnsubscribe && typeof threadUnsubscribe === 'function') {
-                    try {
-                        console.log(`Cleaning up thread subscription for channel ${channel?.id}`);
-                        threadUnsubscribe();
-                    } catch (error) {
-                        console.error(`Error cleaning up thread subscription for channel ${channel?.id}:`, error);
-                    }
-                }
+const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage }: { channel: any; lastMessage: any }) => {
+    // Debug output for component rendering
+    React.useEffect(() => {
+        console.log(`ServiceChannelWithLastMessage rendered for channel ${channel?.id}:`, {
+            hasLastMessage: !!lastMessage,
+            messageId: lastMessage?.id,
+            messageText: lastMessage?.message?.substring(0, 20) + (lastMessage?.message?.length > 20 ? '...' : ''),
+            date: lastMessage?.createdAt ? safeDate(lastMessage.createdAt)?.toISOString() : 'none',
+        });
+    }, [lastMessage, channel?.id]);
 
-                if (chatUnsubscribe && typeof chatUnsubscribe === 'function') {
-                    try {
-                        console.log(`Cleaning up chat subscription for channel ${channel?.id}`);
-                        chatUnsubscribe();
-                    } catch (error) {
-                        console.error(`Error cleaning up chat subscription for channel ${channel?.id}:`, error);
-                    }
-                }
-            };
-        }, [subscribeToNewMessages, subscribeToChatMessages, channel?.id]);
-
-        // Debug output for component rendering
-        React.useEffect(() => {
-            console.log(`ServiceChannelWithLastMessage rendered for channel ${channel?.id}:`, {
-                hasLastMessage: !!lastMessage,
-                messageId: lastMessage?.id,
-                messageText: lastMessage?.message?.substring(0, 20) + (lastMessage?.message?.length > 20 ? '...' : ''),
-                date: lastMessage?.createdAt ? safeDate(lastMessage.createdAt)?.toISOString() : 'none',
-            });
-        }, [lastMessage, channel?.id]);
-
-        const count = 30;
-        const title = channel?.title.slice(0, count) + (channel?.title.length > count ? '...' : '');
-
-        // Define message display text
-        let displayMessage = 'No messages yet';
-
-        if (lastMessage) {
-            // Check for file attachments
-            const hasFileAttachments = lastMessage.files?.data?.length > 0;
-
-            // Check if the message appears to be an image
-            const isImageMessage =
-                lastMessage.message?.includes('<img') ||
-                lastMessage.message?.includes('[Image]') ||
-                lastMessage.message?.includes('![') ||
-                (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(lastMessage.message || '') &&
-                    ((lastMessage.message || '').includes('http') || (lastMessage.message || '').includes('/images/')));
-
-            if (hasFileAttachments) {
-                displayMessage = '📎 File attachment';
-            } else if (isImageMessage) {
-                displayMessage = '[Image]';
-            } else if (lastMessage.message && lastMessage.message.trim() !== '') {
-                displayMessage = lastMessage.message;
-            } else {
-                displayMessage = '(Empty message)';
-            }
+    const count = 30;
+    const title = channel?.title.slice(0, count) + (channel?.title.length > count ? '...' : '');
+
+    // Define message display text
+    let displayMessage = 'No messages yet';
+
+    if (lastMessage) {
+        // Check for file attachments
+        const hasFileAttachments = lastMessage.files?.data?.length > 0;
+
+        // Check if the message appears to be an image
+        const isImageMessage =
+            lastMessage.message?.includes('<img') ||
+            lastMessage.message?.includes('[Image]') ||
+            lastMessage.message?.includes('![') ||
+            (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(lastMessage.message || '') &&
+                ((lastMessage.message || '').includes('http') || (lastMessage.message || '').includes('/images/')));
+
+        if (hasFileAttachments) {
+            displayMessage = '📎 File attachment';
+        } else if (isImageMessage) {
+            displayMessage = '[Image]';
+        } else if (lastMessage.message && lastMessage.message.trim() !== '') {
+            displayMessage = lastMessage.message;
+        } else {
+            displayMessage = '(Empty message)';
         }
+    }
 
-        return (
-            <>
-                <SubscriptionHandler
-                    subscribeToMore={subscribeToMore}
-                    document={THREAD_CREATED_UPDATED}
-                    variables={{
-                        channelId: channel?.id?.toString(),
-                        postParentId: postParentId || servicePostParentId || null,
-                    }}
-                    updateQuery={undefined} // Provide custom updateQuery if needed
-                />
-                <SubscriptionHandler
-                    subscribeToMore={subscribeToMore}
-                    document={CHAT_MESSAGE_ADDED}
-                    variables={{
-                        channelId: channel?.id?.toString(),
-                        postParentId: postParentId || servicePostParentId || null,
-                    }}
-                    updateQuery={undefined} // Provide custom updateQuery if needed
-                />
-                <HStack space={'sm'} className="flex-1 justify-between">
-                    <Box className="flex-[0.8]">
-                        <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
-                            {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>
-            </>
-        );
-    },
-);
+    return (
+        <HStack space={'sm'} className="flex-1 justify-between">
+            <Box className="flex-[0.8]">
+                <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
+                    {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>
+    );
+});
 
 /**
  * TODO:
@@ -403,133 +320,123 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                         key={`channel-${channel?.id}-${subscriptionsTimestamp}`}
                         channel={channel}
                         lastMessage={lastMessage}
-                        subscribeToNewMessages={() =>
-                            shouldQuery
-                                ? subscribeToMore({
-                                      document: THREAD_CREATED_UPDATED,
-                                      variables: {
-                                          channelId: channel?.id?.toString(),
-                                          postParentId: postParentId || servicePostParentId || null,
-                                      },
-                                      updateQuery: (prev, { subscriptionData }: any) => {
-                                          if (!subscriptionData?.data) {
-                                              return prev;
-                                          }
-                                          try {
-                                              const newPostThreadData: any =
-                                                  subscriptionData?.data?.threadCreatedUpdated?.data;
-                                              const newMessage: any =
-                                                  subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
-                                              if (!newPostThreadData || !newMessage) {
-                                                  return prev;
-                                              }
-                                              const prevThreads = prev?.threadMessages?.data || [];
-                                              const threadExists = prevThreads.some(
-                                                  (t: any) => t.id === newPostThreadData?.id,
-                                              );
-                                              let updatedThreads;
-                                              if (threadExists) {
-                                                  updatedThreads = prevThreads.map((t: any) =>
-                                                      t.id === newPostThreadData?.id
-                                                          ? {
-                                                                ...t,
-                                                                replies: [...(t?.replies || []), newMessage],
-                                                                replyCount: newPostThreadData?.replyCount,
-                                                                lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                                updatedAt: newPostThreadData?.updatedAt,
-                                                            }
-                                                          : t,
-                                                  );
-                                              } else {
-                                                  updatedThreads = [...prevThreads, newPostThreadData];
-                                              }
-                                              return {
-                                                  ...prev,
-                                                  threadMessages: {
-                                                      ...prev?.threadMessages,
-                                                      totalCount:
-                                                          newPostThreadData?.totalCount ??
-                                                          prev?.threadMessages?.totalCount ??
-                                                          0,
-                                                      data: updatedThreads,
-                                                  },
-                                              };
-                                          } catch (error) {
-                                              return prev;
-                                          }
-                                      },
-                                      onError: (error) => {
-                                          console.error(`Thread subscription error for channel ${channel?.id}:`, error);
-                                      },
-                                  })
-                                : undefined
-                        }
-                        subscribeToChatMessages={() =>
-                            shouldQuery
-                                ? subscribeToMore({
-                                      document: CHAT_MESSAGE_ADDED,
-                                      variables: {
-                                          channelId: channel?.id?.toString(),
-                                          postParentId: postParentId || servicePostParentId || null,
-                                      },
-                                      updateQuery: (prev, { subscriptionData }: any) => {
-                                          if (!subscriptionData?.data) {
-                                              return prev;
-                                          }
-                                          try {
-                                              const newMessage = subscriptionData?.data?.chatMessageAdded;
-                                              if (!newMessage) {
-                                                  return prev;
-                                              }
-                                              const prevThreads = prev?.threadMessages?.data || [];
-                                              const threadIndex = prevThreads.findIndex((t: any) => {
-                                                  if (newMessage.parentId && t.post?.id === newMessage.parentId) {
-                                                      return true;
-                                                  }
-                                                  if (
-                                                      t.replies &&
-                                                      t.replies.some((r: any) => r.id === newMessage.parentId)
-                                                  ) {
-                                                      return true;
-                                                  }
-                                                  return false;
-                                              });
-                                              if (threadIndex === -1) {
-                                                  return prev;
-                                              }
-                                              const updatedThreads = [...prevThreads];
-                                              const thread = { ...updatedThreads[threadIndex] };
-                                              thread.replies = [...(thread.replies || []), newMessage];
-                                              const currentReplyCount =
-                                                  typeof thread.replyCount === 'number' ? thread.replyCount : 0;
-                                              thread.replyCount = currentReplyCount + 1;
-                                              thread.lastReplyAt = newMessage.createdAt;
-                                              thread.updatedAt = newMessage.createdAt;
-                                              updatedThreads[threadIndex] = thread;
-                                              return {
-                                                  ...prev,
-                                                  threadMessages: {
-                                                      ...prev?.threadMessages,
-                                                      data: updatedThreads,
-                                                  },
-                                              };
-                                          } catch (error) {
-                                              return prev;
-                                          }
-                                      },
-                                      onError: (error) => {
-                                          console.error(
-                                              `Chat message subscription error for channel ${channel?.id}:`,
-                                              error,
-                                          );
-                                      },
-                                  })
-                                : undefined
-                        }
-                        subscribeToMore={subscribeToMore}
-                        postParentId={postParentId}
-                        servicePostParentId={servicePostParentId}
                     />
+
+                    {/* Subscription handlers for real-time updates */}
+                    {shouldQuery && (
+                        <>
+                            <SubscriptionHandler
+                                subscribeToMore={subscribeToMore}
+                                document={THREAD_CREATED_UPDATED}
+                                variables={{
+                                    channelId: channel?.id?.toString(),
+                                    postParentId: postParentId || servicePostParentId || null,
+                                }}
+                                updateQuery={(prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData?.data) {
+                                        return prev;
+                                    }
+                                    try {
+                                        const newPostThreadData: any =
+                                            subscriptionData?.data?.threadCreatedUpdated?.data;
+                                        const newMessage: any =
+                                            subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+                                        if (!newPostThreadData || !newMessage) {
+                                            return prev;
+                                        }
+                                        const prevThreads = prev?.threadMessages?.data || [];
+                                        const threadExists = prevThreads.some(
+                                            (t: any) => t.id === newPostThreadData?.id,
+                                        );
+                                        let updatedThreads;
+                                        if (threadExists) {
+                                            updatedThreads = prevThreads.map((t: any) =>
+                                                t.id === newPostThreadData?.id
+                                                    ? {
+                                                          ...t,
+                                                          replies: [...(t?.replies || []), newMessage],
+                                                          replyCount: newPostThreadData?.replyCount,
+                                                          lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                          updatedAt: newPostThreadData?.updatedAt,
+                                                      }
+                                                    : t,
+                                            );
+                                        } else {
+                                            updatedThreads = [...prevThreads, newPostThreadData];
+                                        }
+                                        return {
+                                            ...prev,
+                                            threadMessages: {
+                                                ...prev?.threadMessages,
+                                                totalCount:
+                                                    newPostThreadData?.totalCount ??
+                                                    prev?.threadMessages?.totalCount ??
+                                                    0,
+                                                data: updatedThreads,
+                                            },
+                                        };
+                                    } catch (error) {
+                                        console.error(`Thread subscription error for channel ${channel?.id}:`, error);
+                                        return prev;
+                                    }
+                                }}
+                            />
+                            <SubscriptionHandler
+                                subscribeToMore={subscribeToMore}
+                                document={CHAT_MESSAGE_ADDED}
+                                variables={{
+                                    channelId: channel?.id?.toString(),
+                                    postParentId: postParentId || servicePostParentId || null,
+                                }}
+                                updateQuery={(prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData?.data) {
+                                        return prev;
+                                    }
+                                    try {
+                                        const newMessage = subscriptionData?.data?.chatMessageAdded;
+                                        if (!newMessage) {
+                                            return prev;
+                                        }
+                                        const prevThreads = prev?.threadMessages?.data || [];
+                                        const threadIndex = prevThreads.findIndex((t: any) => {
+                                            if (newMessage.parentId && t.post?.id === newMessage.parentId) {
+                                                return true;
+                                            }
+                                            if (t.replies && t.replies.some((r: any) => r.id === newMessage.parentId)) {
+                                                return true;
+                                            }
+                                            return false;
+                                        });
+                                        if (threadIndex === -1) {
+                                            return prev;
+                                        }
+                                        const updatedThreads = [...prevThreads];
+                                        const thread = { ...updatedThreads[threadIndex] };
+                                        thread.replies = [...(thread.replies || []), newMessage];
+                                        const currentReplyCount =
+                                            typeof thread.replyCount === 'number' ? thread.replyCount : 0;
+                                        thread.replyCount = currentReplyCount + 1;
+                                        thread.lastReplyAt = newMessage.createdAt;
+                                        thread.updatedAt = newMessage.createdAt;
+                                        updatedThreads[threadIndex] = thread;
+                                        return {
+                                            ...prev,
+                                            threadMessages: {
+                                                ...prev?.threadMessages,
+                                                data: updatedThreads,
+                                            },
+                                        };
+                                    } catch (error) {
+                                        console.error(
+                                            `Chat message subscription error for channel ${channel?.id}:`,
+                                            error,
+                                        );
+                                        return prev;
+                                    }
+                                }}
+                            />
+                        </>
+                    )}
                 </Box>
             </HStack>
         </Pressable>

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

@@ -10,6 +10,6 @@ export const config = cleanEnv(process['APP_ENV'] || process.env, {
     THREADS_PATH: str({ default: 'MainStack.Thread' }),
     CALL_TO_ACTION_PATH: str({ default: 'MainStack.GuestReservationRequestDetail' }),
     CALL_TO_ACTION_BOX_BGCOLOR: str({ default: '#0084ff' }),
-    CALL_TO_ACTION_BUTTON_BORDERCOLOR: str({ default: '#fff' }),
-    CALL_TO_ACTION_TEXT_COLOR: str({ default: '#fff' }),
+    CALL_TO_ACTION_BUTTON_BORDERCOLOR: str({ default: '#000' }),
+    CALL_TO_ACTION_TEXT_COLOR: str({ default: '#000' }),
 });

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

@@ -371,7 +371,12 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                 // Required fields that Apollo expects in the cache
                 propsConfiguration: {
                     __typename: 'MachineConfiguration' as const,
+                    id: null,
                     resource: '' as any,
+                    contents: null,
+                    keys: null,
+                    target: null,
+                    overrides: null,
                 },
                 props: {},
                 files: {
@@ -659,7 +664,12 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                 // Required fields that Apollo expects in the cache
                 propsConfiguration: {
                     __typename: 'MachineConfiguration' as const,
+                    id: null,
                     resource: '' as any,
+                    contents: null,
+                    keys: null,
+                    target: null,
+                    overrides: null,
                 },
                 props: {},
                 files: {
@@ -937,7 +947,12 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                 // Required fields that Apollo expects in the cache
                 propsConfiguration: {
                     __typename: 'MachineConfiguration' as const,
+                    id: null,
                     resource: '' as any,
+                    contents: null,
+                    keys: null,
+                    target: null,
+                    overrides: null,
                 },
                 props: {},
                 files: {
@@ -1362,22 +1377,25 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                     <>
                         {attachment?.callToAction && action ? (
                             <Box className={`bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2`}>
+                                <MessageText
+                                    {...props}
+                                    containerStyle={{
+                                        left: { paddingLeft: 0, marginLeft: 0 },
+                                    }}
+                                    textStyle={{
+                                        left: { marginLeft: 0 },
+                                    }}
+                                />
                                 <Button
                                     variant={'outline'}
                                     size={'sm'}
-                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}] mt-2 rounded-full `}
+                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}] my-2 rounded-full `}
                                     onPress={() => action && params && navigation.navigate(action, params)}
                                 >
                                     <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
                                         {attachment.callToAction.title}
                                     </ButtonText>
                                 </Button>
-                                <MessageText
-                                    {...props}
-                                    textStyle={{
-                                        left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 },
-                                    }}
-                                />
                             </Box>
                         ) : (
                             <TouchableHighlight