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

package/lib/screens/inbox/DialogThreadMessages.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function DialogThreadMessages({ channelId, postParentId, isPostParentIdThread, role }: {
+    channelId: any;
+    postParentId: any;
+    isPostParentIdThread: any;
+    role: any;
+}): JSX.Element;

package/lib/screens/inbox/DialogThreads.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function DialogThreads({ channelId, postParentId, role }: {
+    channelId: any;
+    postParentId: any;
+    role: any;
+}): JSX.Element;

package/lib/screens/inbox/components/SupportServiceDialogsListItem.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IChannel, IUserAccount } from '@messenger-box/platform-client';
+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 declare const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemProps>;
+export declare const SupportServiceDialogsListItem: React.NamedExoticComponent<IDialogListItemProps>;

package/lib/screens/inbox/components/ThreadsViewItem.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IChannel, IUserAccount } from '@messenger-box/platform-client';
+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 declare const ThreadViewItemComponent: React.FC<IDialogListItemProps>;
+export declare const ThreadViewItem: React.NamedExoticComponent<IDialogListItemProps>;

package/lib/screens/inbox/config/config.d.ts

@@ -2,6 +2,8 @@ export declare const config: Readonly<{
     MESSAGES_PER_PAGE: number;
     FILES_PER_MESSAGE: number;
     INBOX_MESSEGE_PATH: string;
+    THREAD_MESSEGE_PATH: string;
+    THREADS_PATH: string;
     CALL_TO_ACTION_PATH: string;
     CALL_TO_ACTION_BOX_BGCOLOR: string;
     CALL_TO_ACTION_BUTTON_BORDERCOLOR: string;

package/lib/screens/inbox/containers/Dialogs.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 export interface InboxProps {
     channelFilters?: Record<string, unknown>;
     channelRole?: string;
+    supportServices: boolean;
 }
 export declare const Dialogs: React.MemoExoticComponent<(props: InboxProps) => JSX.Element>;

package/lib/screens/inbox/containers/SupportServiceDialogs.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SupportServiceInboxProps {
+    channelFilters?: Record<string, unknown>;
+    channelRole?: string;
+}
+export declare const SupportServiceDialogs: React.MemoExoticComponent<(props: SupportServiceInboxProps) => JSX.Element>;

package/lib/screens/inbox/containers/ThreadConversationView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface AlertMessageAttachmentsInterface {
+    title: string;
+    isTitleHtml: boolean;
+    icon: string;
+    callToAction: {
+        title: string;
+        link: string;
+    };
+}
+export declare const ThreadConversationView: React.MemoExoticComponent<({ channelId, postParentId, isPostParentIdThread, role }: any) => JSX.Element>;

package/lib/screens/inbox/containers/ThreadsView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ThreadsViewProps {
+    channelId?: string;
+    role?: string;
+    channelsDetail?: any;
+    refetchChannelDetail: (id: any) => Promise<any>;
+}
+export declare const ThreadsView: React.MemoExoticComponent<({ channelId, role, channelsDetail, refetchChannelDetail }: ThreadsViewProps) => JSX.Element>;

package/lib/screens/index.d.ts

@@ -1,2 +1,4 @@
 export * from './inbox/Inbox';
 export * from './inbox/DialogMessages';
+export * from './inbox/DialogThreads';
+export * from './inbox/DialogThreadMessages';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/platform-mobile",
-    "version": "0.0.1-alpha.362",
+    "version": "0.0.1-alpha.365",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -19,8 +19,8 @@
         "watch": "yarn build:lib:watch"
     },
     "dependencies": {
-        "@messenger-box/core": "0.0.1-alpha.362",
-        "@messenger-box/platform-client": "0.0.1-alpha.362",
+        "@messenger-box/core": "0.0.1-alpha.365",
+        "@messenger-box/platform-client": "0.0.1-alpha.365",
         "base-64": "1.0.0",
         "react-native-gifted-chat": "1.0.4"
     },
@@ -40,5 +40,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "b42a51b9a893fd82e38a4ae30776af31277e39cf"
+    "gitHead": "52c2335b1abc0d3317a5a4a821963becf5509c70"
 }

package/src/navigation/InboxNavigation.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Feature } from '@common-stack/client-react';
 import { DialogMessages } from '../screens/inbox/DialogMessages';
+import { DialogThreads } from '../screens/inbox/DialogThreads';
+import { DialogThreadMessages } from '../screens/inbox/DialogThreadMessages';
 import { IconButton, Icon } from 'native-base';
 import { MaterialIcons } from '@expo/vector-icons';
 
@@ -28,6 +30,67 @@ const inboxConfig = {
             },
         },
     },
+    ['//thread']: {
+        exact: true,
+        name: 'Thread',
+        props: {
+            initialParams: { channelId: null, postParentId: null,role:null },
+            component: (props: any) => (
+                <DialogThreads
+                    {...props}
+                    channelId={props?.route?.params?.channelId}
+                    postParentId={props?.route?.params?.postParentId}
+                    role={props?.route?.params?.role}
+                />
+            ),
+            options: ({ navigation }: any) => {
+                return {
+                    headerShown: true,
+                    title: 'Thread',
+                    headerBackTitleVisible: false,
+                    gestureEnabled: false,
+                    swipeEnabled: false,
+                    headerLeft: (props: any) => (
+                        <IconButton
+                            onPress={() => navigation.goBack()}
+                            icon={<Icon size={'lg'} as={MaterialIcons} name="arrow-back-ios" color={'black'} />}
+                        />
+                    ),
+                };
+            },
+        },
+    },
+    ['//threadmessage']: {
+        exact: true,
+        name: 'ThreadMessage',
+        props: {
+            initialParams: { channelId: null, postParentId: null, isPostParentIdThread: null,role:null },
+            component: (props: any) => (
+                <DialogThreadMessages
+                    {...props}
+                    channelId={props?.route?.params?.channelId}
+                    postParentId={props?.route?.params?.postParentId}
+                    isPostParentIdThread={props?.route?.params?.isPostParentIdThread}
+                    role={props?.route?.params?.role}
+                />
+            ),
+            options: ({ navigation }: any) => {
+                return {
+                    headerShown: true,
+                    title: 'Inbox',
+                    headerBackTitleVisible: false,
+                    gestureEnabled: false,
+                    swipeEnabled: false,
+                    headerLeft: (props: any) => (
+                        <IconButton
+                            onPress={() => navigation.goBack()}
+                            icon={<Icon size={'lg'} as={MaterialIcons} name="arrow-back-ios" color={'black'} />}
+                        />
+                    ),
+                };
+            },
+        },
+    },
 };
 
 export const inboxFeature = new Feature({

package/src/screens/inbox/DialogThreadMessages.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Box, Spinner, Text } from 'native-base';
+import { ThreadConversationView } from './containers/ThreadConversationView';
+import { ThreadsView } from './containers/ThreadsView';
+import { useViewChannelDetailQuery, useSendThreadMessageMutation } from '@messenger-box/platform-client';
+import { useFocusEffect } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
+
+export function DialogThreadMessages({ channelId, postParentId, isPostParentIdThread, role }) {
+    const {
+        data,
+        loading: channelLoading,
+        refetch,
+    } = useViewChannelDetailQuery({
+        variables: {
+            id: channelId?.toString(),
+        },
+    });
+
+    const [sendThreadMessage] = useSendThreadMessageMutation();
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const [channel, setChannel] = React.useState<any>(null);
+    const [parentId, setParentId] = React.useState<any>(postParentId);
+
+    const refetchChannelDetail = React.useCallback(
+        (id: string) => {
+            return refetch({ id: id?.toString() });
+        },
+        [channelId],
+    );
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            refetchChannelDetail(channelId);
+            return () => {};
+        }, []),
+    );
+
+    React.useEffect(() => {
+        setParentId(postParentId);
+    }, [postParentId]);
+
+    React.useEffect(() => {
+        if (data?.viewChannelDetail) setChannel(data?.viewChannelDetail);
+    }, [data]);
+
+    React.useEffect(() => {
+        async function sendInitialMessage(channel: any) {
+            const content = `Welcome to ${channel?.title}`;
+            const createdBy = channel?.creator?.id;
+            await sendThreadMessage({
+                variables: {
+                    channelId,
+                    threadMessageInput: {
+                        content,
+                        role,
+                    },
+                    responderId: createdBy,
+                },
+                update: (cache, { data, errors }: any) => {
+                    if (!data) {
+                        return;
+                    }
+                    setParentId(data?.sendThreadMessage?.lastMessage?.id);
+                },
+            });
+        }
+        if ((!parentId || parentId == 0) && channel) {
+            sendInitialMessage(channel);
+        }
+
+        if (parentId) setLoading(false);
+    }, [parentId, channel]);
+
+    return (
+        <Box bg={'white'} flex={1}>
+            {loading && !parentId ? (
+                <Spinner />
+            ) : (
+                <ThreadConversationView
+                    channelId={channelId}
+                    postParentId={parentId}
+                    isPostParentIdThread={isPostParentIdThread}
+                    role={role}
+                />
+            )}
+        </Box>
+    );
+}

package/src/screens/inbox/DialogThreads.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { Box, Spinner, Text } from 'native-base';
+import { ThreadConversationView } from './containers/ThreadConversationView';
+import { ThreadsView } from './containers/ThreadsView';
+import { useViewChannelDetailQuery } from '@messenger-box/platform-client';
+import { useFocusEffect } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
+
+export function DialogThreads({ channelId, postParentId,role }) {
+    const {
+        data,
+        loading: channelLoading,
+        refetch,
+    } = useViewChannelDetailQuery({
+        variables: {
+            id: channelId?.toString(),
+        },
+    });
+
+    const channelsDetail = React.useMemo(() => {
+        if (!data?.viewChannelDetail) return null;
+        return data?.viewChannelDetail;
+    }, [data]);
+
+    const refetchChannelDetail = React.useCallback(
+        (id: string) => {
+            return refetch({ id: id?.toString() });
+        },
+        [channelId],
+    );
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            refetchChannelDetail(channelId);
+            return () => {};
+        }, []),
+    );
+
+    return (
+        // <Box bg={'white'} flex={1} pt={5}>
+        <>
+            {channelLoading ? (
+                <Spinner />
+            ) : (
+                <>
+                    <Box
+                        flex={1}
+                        _dark={{
+                            borderColor: 'coolGray.600',
+                            backgroundColor: 'gray.700',
+                        }}
+                        _light={{
+                            backgroundColor: 'gray.50',
+                        }}
+                    >
+                        <ThreadsView
+                            channelId={channelId}
+                            role={role}
+                            channelsDetail={channelsDetail}
+                            refetchChannelDetail={refetchChannelDetail}
+                        />
+                    </Box>
+                </>
+            )}
+        </>
+    );
+
+    // return (
+    //     // <Box bg={'white'} flex={1} pt={5}>
+    //     <>
+    //         {channelLoading ? (
+    //             <Spinner />
+    //         ) : (
+    //             <>
+    //                 {postParentId || postParentId == 0 ? (
+    //                     <Box bg={'white'} flex={1}>
+    //                         <ThreadConversationView
+    //                             channelId={channelId}
+    //                             postParentId={postParentId}
+    //                             channelsDetail={channelsDetail}
+    //                             refetchChannelDetail={refetchChannelDetail}
+    //                         />
+    //                     </Box>
+    //                 ) : (
+    //                     <Box
+    //                         flex={1}
+    //                         _dark={{
+    //                             borderColor: 'coolGray.600',
+    //                             backgroundColor: 'gray.700',
+    //                         }}
+    //                         _light={{
+    //                             backgroundColor: 'gray.50',
+    //                         }}
+    //                     >
+    //                         <ThreadsView
+    //                             channelId={channelId}
+    //                             channelsDetail={channelsDetail}
+    //                             refetchChannelDetail={refetchChannelDetail}
+    //                         />
+    //                     </Box>
+    //                 )}
+    //             </>
+    //         )}
+    //     </>
+    // );
+}

package/src/screens/inbox/Inbox.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { Box } from 'native-base';
+import { Box, Text } from 'native-base';
 
 import { Dialogs } from './containers/Dialogs';
+import { SupportServiceDialogs } from './containers/SupportServiceDialogs';
 
-export const Inbox = (props:any) => {
-    const { channelFilters, channelRole } = props;
+export const Inbox = (props: any) => {
+    const { channelFilters, channelRole, supportServices } = props;
     return (
         <Box bg={'white'} flex={1}>
+            {supportServices && <SupportServiceDialogs channelFilters={channelFilters} channelRole={channelRole} {...props} />}
             <Dialogs channelFilters={channelFilters} channelRole={channelRole} {...props} />
         </Box>
     );

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

@@ -37,6 +37,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     channel,
     onOpen,
 }) {
+    const parentId:any = null;
     const {
         data: messagesQuery,
         loading: messageLoading,
@@ -44,7 +45,8 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     } = useMessagesQuery({
         variables: {
             channelId: channel?.id?.toString(),
-            limit: 1,
+            parentId: parentId,
+            limit: 25,
         },
         fetchPolicy: 'cache-and-network',
     });
@@ -52,7 +54,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     useFocusEffect(
         React.useCallback(() => {
             // Do something when the screen is focused
-            refetchMessages({ channelId: channel?.id?.toString(), limit: 1 });
+            refetchMessages({ channelId: channel?.id?.toString(),parentId:parentId, limit: 25 });
 
             return () => {
                 // Do something when the screen is unfocused
@@ -66,7 +68,9 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
             return null;
         }
         const { data } = messagesQuery.messages;
-        return data[data.length - 1];
+        const filteredData = data?.filter((p: any) => p?.message !== '');
+        return filteredData[0];
+        //return data[data.length - 1];
     }, [messagesQuery]);
 
     const channelMembers = useMemo(

package/src/screens/inbox/components/SlackMessageContainer/SlackBubble.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle, no-use-before-define */
 import React from 'react';
-import { Text, StyleSheet, TouchableOpacity, View, Platform, Dimensions } from 'react-native';
+import { Text, StyleSheet, TouchableOpacity,TouchableHighlight, View, Platform, Dimensions } from 'react-native';
 
 import { MessageText, MessageImage, Time, utils } from 'react-native-gifted-chat';
 import CachedImage from '../CachedImage';
@@ -64,7 +64,7 @@ export default class Bubble extends React.Component<any> {
             const { image, _id } = messageImageProps?.currentMessage;
 
             return (
-                <TouchableOpacity onPress={() => this.props.setImageViewer(messageImageProps?.currentMessage, true)}>
+                <TouchableHighlight underlayColor={'#c0c0c0'} style={{width:'100%'}} onPress={() => this.props.setImageViewer(messageImageProps?.currentMessage, true)}>
                     <View
                         style={{
                             width: windowWidth - (windowWidth - 150),
@@ -87,7 +87,7 @@ export default class Bubble extends React.Component<any> {
                             alt={'image'}
                         />
                     </View>
-                </TouchableOpacity>
+                </TouchableHighlight>
             );
         }
         return null;
@@ -173,7 +173,7 @@ export default class Bubble extends React.Component<any> {
 
         return (
             <View style={[styles.container, this.props.containerStyle]}>
-                <TouchableOpacity disabled={true} accessibilityTraits="text" {...this.props.touchableProps}>
+                <TouchableHighlight style={{width:'100%'}} underlayColor={'#c0c0c0'} disabled={true} accessibilityTraits="text" {...this.props.touchableProps}>
                     <View style={[styles.wrapper, this.props.wrapperStyle]}>
                         <View>
                             {this.renderCustomView()}
@@ -182,7 +182,7 @@ export default class Bubble extends React.Component<any> {
                             {this.renderMessageText()}
                         </View>
                     </View>
-                </TouchableOpacity>
+                </TouchableHighlight>
             </View>
         );
     }