@messenger-box/platform-mobile 10.0.3-alpha.135 → 10.0.3-alpha.138

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/platform-mobile",
-    "version": "10.0.3-alpha.135",
+    "version": "10.0.3-alpha.138",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -22,8 +22,8 @@
         "watch-ts": "tsc --watch"
     },
     "dependencies": {
-        "@messenger-box/core": "10.0.3-alpha.135",
-        "@messenger-box/platform-client": "10.0.3-alpha.135",
+        "@messenger-box/core": "10.0.3-alpha.138",
+        "@messenger-box/platform-client": "10.0.3-alpha.138",
         "base-64": "1.0.0",
         "react-native-gifted-chat": "1.0.4"
     },
@@ -43,5 +43,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "da12d4859c8b3ddb08127de6e79ee69fcc2bcdf7"
+    "gitHead": "bc7104dc64d85487b754a56aff32fcb4cdc1afdf"
 }

package/src/screens/inbox/DialogMessages.tsx

@@ -3,7 +3,7 @@ import { Box } from '@admin-layout/gluestack-ui-mobile';
 import { ConversationView } from './containers/ConversationView';
 import { navigationRef } from '@common-stack/client-react';
 
-export function DialogMessages({ channelId, role, isShowThreadMessage = true, ...rest }) {
+export function DialogMessages({ channelId, role, isShowThreadMessage = true, isPaymentChatUI = false, ...rest }) {
     const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
     return (
         // <Box bg={'white'} flex={1} pt={5}>
@@ -13,6 +13,7 @@ export function DialogMessages({ channelId, role, isShowThreadMessage = true, ..
                 channelId={currentRoute?.params?.channelId ?? channelId}
                 role={role}
                 isShowThreadMessage={isShowThreadMessage}
+                isPaymentChatUI={isPaymentChatUI}
             />
         </Box>
     );

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

@@ -0,0 +1,199 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { Day, utils } from 'react-native-gifted-chat';
+import { Avatar, AvatarFallbackText, AvatarImage, Text } from '@admin-layout/gluestack-ui-mobile';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+const { isSameUser, isSameDay } = utils;
+
+export default class PaymentMessage extends React.Component<any> {
+    static defaultProps = {
+        renderAvatar: undefined,
+        renderBubble: null,
+        renderDay: null,
+        currentMessage: {},
+        nextMessage: {},
+        previousMessage: {},
+        user: {},
+        containerStyle: {},
+        isShowImageViewer: false,
+        setImageViewer: (obj: any, v: boolean) => null,
+    };
+
+    getInnerComponentProps() {
+        const { containerStyle, ...props } = this.props;
+        return {
+            ...props,
+            position: 'left',
+            isSameUser,
+            isSameDay,
+        };
+    }
+
+    renderDay() {
+        if (this.props.currentMessage.createdAt) {
+            const dayProps = this.getInnerComponentProps();
+            if (this.props.renderDay) {
+                return this.props.renderDay(dayProps);
+            }
+            return <Day {...dayProps} />;
+        }
+        return null;
+    }
+
+    renderAvatar(isRight: boolean) {
+        let extraStyle: any;
+        let isSameUserAndSameDay: boolean = false;
+        if (
+            isSameUser(this.props.currentMessage, this.props.previousMessage) &&
+            isSameDay(this.props.currentMessage, this.props.previousMessage)
+        ) {
+            extraStyle = { height: 0 };
+            isSameUserAndSameDay = true;
+        }
+        const avatarProps: any = this.getInnerComponentProps();
+        return (
+            <Avatar
+                size={'sm'}
+                className="bg-transparent rounded-none"
+                style={[isRight ? { marginLeft: 8 } : { marginRight: 8 }]}
+            >
+                <AvatarFallbackText>
+                    {isSameUserAndSameDay ? '' : avatarProps?.currentMessage?.user?.name?.[0]}
+                </AvatarFallbackText>
+                {!isSameUserAndSameDay && avatarProps?.currentMessage?.user?.avatar && (
+                    <AvatarImage
+                        alt="image"
+                        style={{ height: 40, width: 40, borderRadius: 3, marginTop: 1 }}
+                        source={{
+                            uri: avatarProps?.currentMessage?.user?.avatar,
+                        }}
+                    />
+                )}
+            </Avatar>
+        );
+    }
+
+    renderPaymentBubble(isRight: boolean) {
+        const { currentMessage } = this.props;
+        // Extract payment details
+        const paymentDetails = currentMessage?.propsConfiguration?.payment || {};
+        const amount = paymentDetails.amount || currentMessage?.amount;
+        const currency = paymentDetails.currency || currentMessage?.currency || '₹';
+        const status = paymentDetails.status || currentMessage?.status || 'Sent Securely';
+        const paymentNote = paymentDetails.note || currentMessage?.text;
+        const time = currentMessage?.createdAt
+            ? new Date(currentMessage.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+            : '';
+
+        return (
+            <TouchableOpacity
+                activeOpacity={0.85}
+                style={[
+                    styles.bubble,
+                    isRight ? styles.bubbleRight : styles.bubbleLeft,
+                    { alignSelf: isRight ? 'flex-end' : 'flex-start' },
+                ]}
+            >
+                <Text style={styles.amount}>
+                    {currency}
+                    {amount}
+                </Text>
+                <View style={styles.secureRow}>
+                    <MaterialCommunityIcons
+                        name="check-circle-outline"
+                        size={20}
+                        color="#4caf50"
+                        style={{ marginRight: 4 }}
+                    />
+                    <Text style={styles.secureText}>{status}</Text>
+                    <MaterialCommunityIcons name="chevron-right" size={22} color="#7c3aed" style={{ marginLeft: 4 }} />
+                </View>
+                {paymentNote && paymentNote !== status && <Text style={styles.note}>{paymentNote}</Text>}
+                <Text style={[styles.time, { textAlign: isRight ? 'right' : 'left' }]}>{time}</Text>
+            </TouchableOpacity>
+        );
+    }
+
+    render() {
+        const { currentMessage, user } = this.props;
+        const isRight = currentMessage?.user?._id === user?._id;
+        const marginBottom = isSameUser(currentMessage, this.props.nextMessage) ? 2 : 10;
+        return (
+            <View>
+                {this.renderDay()}
+                <View
+                    style={[styles.container, { marginBottom }, isRight ? styles.containerRight : styles.containerLeft]}
+                >
+                    {isRight ? null : this.renderAvatar(false)}
+                    {this.renderPaymentBubble(isRight)}
+                    {isRight ? this.renderAvatar(true) : null}
+                </View>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        width: '100%',
+    },
+    containerLeft: {
+        justifyContent: 'flex-start',
+    },
+    containerRight: {
+        flexDirection: 'row-reverse',
+        justifyContent: 'flex-end',
+    },
+    bubble: {
+        backgroundColor: '#f3e8ff',
+        borderRadius: 16,
+        paddingVertical: 16,
+        paddingHorizontal: 20,
+        minWidth: 160,
+        maxWidth: 320,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.08,
+        shadowRadius: 4,
+        elevation: 2,
+        marginBottom: 2,
+    },
+    bubbleLeft: {
+        marginLeft: 0,
+        marginRight: 32,
+    },
+    bubbleRight: {
+        marginRight: 0,
+        marginLeft: 32,
+    },
+    amount: {
+        fontSize: 26,
+        fontWeight: 'bold',
+        color: '#18181b',
+        marginBottom: 8,
+    },
+    secureRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    secureText: {
+        fontSize: 16,
+        color: '#18181b',
+        fontWeight: '500',
+    },
+    note: {
+        fontSize: 14,
+        color: '#6b7280',
+        marginTop: 2,
+        marginBottom: 2,
+    },
+    time: {
+        fontSize: 12,
+        color: '#a1a1aa',
+        marginTop: 6,
+    },
+});

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

@@ -40,7 +40,16 @@ import { orderBy, startCase, uniqBy } from 'lodash-es';
 import * as ImagePicker from 'expo-image-picker';
 import { encode as atob } from 'base-64';
 import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
-import { Actions, GiftedChat, IMessage, MessageText, Send, Composer, InputToolbar } from 'react-native-gifted-chat';
+import {
+    Actions,
+    GiftedChat,
+    IMessage,
+    MessageText,
+    Send,
+    Composer,
+    InputToolbar,
+    Message as GiftedMessage,
+} from 'react-native-gifted-chat';
 import { PreDefinedRole, RoomType, IExpoNotificationData, IFileInfo, FileRefType, PostTypeEnum } from 'common';
 import {
     CHAT_MESSAGE_ADDED,
@@ -67,6 +76,7 @@ import Reanimated, { useSharedValue, useAnimatedStyle } from 'react-native-reani
 import Constants from 'expo-constants';
 import { Keyboard } from 'react-native';
 import GiftedChatInboxComponent from '../components/GiftedChatInboxComponent';
+import PaymentMessage from '../components/SlackMessageContainer/PaymentMessage';
 
 // Define an extended interface for ImagePickerAsset with url property
 interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
@@ -205,7 +215,13 @@ function useGradualKeyboardAnimation() {
     return { height };
 }
 
-const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowThreadMessage, ...rest }: any) => {
+const ConversationViewComponent = ({
+    channelId: initialChannelId,
+    role,
+    isShowThreadMessage,
+    isPaymentChatUI,
+    ...rest
+}: any) => {
     // Core state management using React hooks instead of XState
     const { params } = useRoute<any>();
     const [channelId, setChannelId] = useState<string | null>(initialChannelId || null);
@@ -1679,6 +1695,154 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
         [isShowImageViewer],
     );
 
+    const renderPaymentMessageText = useCallback(
+        (props: any) => {
+            const { currentMessage } = props;
+            const lastReply: any =
+                currentMessage?.replies?.data?.length > 0 ? currentMessage?.replies?.data?.[0] : null;
+
+            // Do not render anything if the message text is empty or only whitespace
+            if (!currentMessage?.text || currentMessage.text.trim() === '') {
+                return null;
+            }
+
+            // PAYMENT UI
+            if (currentMessage.type === 'PAYMENT') {
+                // Extract payment details if available
+                const paymentDetails = currentMessage?.propsConfiguration?.payment || {};
+                const amount = paymentDetails.amount || currentMessage?.amount;
+                const currency = paymentDetails.currency || currentMessage?.currency || '$';
+                const status = paymentDetails.status || currentMessage?.status || 'Completed';
+                const paymentNote = paymentDetails.note || currentMessage?.text;
+
+                return (
+                    <TouchableHighlight
+                        underlayColor={'#e0f7fa'}
+                        style={{ width: '100%' }}
+                        onPress={() => {
+                            if (currentMessage?.isShowThreadMessage)
+                                navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                    channelId: channelId,
+                                    title: 'Message',
+                                    postParentId: currentMessage?._id,
+                                    isPostParentIdThread: true,
+                                });
+                        }}
+                    >
+                        <Box
+                            style={{
+                                backgroundColor: '#e0f7fa',
+                                borderRadius: 16,
+                                padding: 12,
+                                marginVertical: 2,
+                                borderWidth: 1,
+                                borderColor: '#26c6da',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <MaterialCommunityIcons
+                                name="credit-card-check"
+                                size={28}
+                                color="#00838f"
+                                style={{ marginRight: 10 }}
+                            />
+                            <VStack style={{ flex: 1 }}>
+                                <Text style={{ fontWeight: 'bold', color: '#00838f', fontSize: 16 }}>
+                                    {amount ? `${currency}${amount}` : 'Payment'}
+                                </Text>
+                                <Text style={{ color: '#00838f', fontSize: 13, marginTop: 2 }}>{status}</Text>
+                                {paymentNote && (
+                                    <Text style={{ color: '#444', fontSize: 13, marginTop: 4 }}>{paymentNote}</Text>
+                                )}
+                            </VStack>
+                        </Box>
+                    </TouchableHighlight>
+                );
+            } else {
+                // Default UI (unchanged)
+                return (
+                    <TouchableHighlight
+                        underlayColor={'#c0c0c0'}
+                        style={{ width: '100%' }}
+                        onPress={() => {
+                            if (currentMessage?.isShowThreadMessage)
+                                navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                    channelId: channelId,
+                                    title: 'Message',
+                                    postParentId: currentMessage?._id,
+                                    isPostParentIdThread: true,
+                                });
+                        }}
+                    >
+                        <>
+                            <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                            {currentMessage?.replies?.data?.length > 0 && (
+                                <HStack space={'sm'} className="px-1 items-center">
+                                    <HStack>
+                                        {currentMessage?.replies?.data
+                                            ?.filter(
+                                                (v: any, i: any, a: any) =>
+                                                    a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
+                                            )
+                                            ?.slice(0, 2)
+                                            ?.reverse()
+                                            ?.map((p: any, i: Number) => (
+                                                <Avatar
+                                                    key={'conversation-replies-key-' + i}
+                                                    className="bg-transparent"
+                                                    size={'sm'}
+                                                >
+                                                    <AvatarFallbackText>
+                                                        {startCase(p?.author?.username?.charAt(0))}
+                                                    </AvatarFallbackText>
+                                                    <AvatarImage
+                                                        alt="user image"
+                                                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                                        source={{
+                                                            uri: p?.author?.picture,
+                                                        }}
+                                                    />
+                                                </Avatar>
+                                            ))}
+                                    </HStack>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                        {currentMessage?.replies?.totalCount}{' '}
+                                        {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                    </Text>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                        {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                    </Text>
+                                </HStack>
+                            )}
+                        </>
+                    </TouchableHighlight>
+                );
+            }
+        },
+        [navigation, channelId, role],
+    );
+
+    const renderPaymentMessage = useCallback(
+        (props: any) => {
+            const { currentMessage } = props;
+            if (currentMessage?.type === 'PAYMENT') {
+                return <PaymentMessage {...props} navigation={navigation} channelId={channelId} config={config} />;
+            }
+            //     return  <PaymentMessage
+            //     {...props}
+            //     navigation={navigation}
+            //     channelId={channelId}
+            //     config={config}
+            // />;
+            // Fallback to SlackMessage for other message types
+            return (
+                <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
+            );
+        },
+        [isShowImageViewer, channelId, navigation],
+    );
+
     let onScroll = false;
 
     // Optimize onMomentumScrollBegin for better scroll performance
@@ -1960,8 +2124,8 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                         _id: auth?.id || '',
                     }}
                     renderSend={renderSend}
-                    renderMessageText={renderMessageText}
-                    renderMessage={renderMessage}
+                    renderMessageText={isPaymentChatUI ? renderPaymentMessageText : renderMessageText}
+                    renderMessage={isPaymentChatUI ? renderPaymentMessage : renderMessage}
                     renderChatFooter={renderChatFooter}
                     renderLoadEarlier={renderLoadEarlier}
                     loadEarlier={totalCount > channelMessages.length}
@@ -2049,6 +2213,7 @@ export const ConversationView = React.memo(ConversationViewComponent, (prevProps
     return (
         prevProps.channelId === nextProps.channelId &&
         prevProps.role === nextProps.role &&
-        prevProps.isShowThreadMessage === nextProps.isShowThreadMessage
+        prevProps.isShowThreadMessage === nextProps.isShowThreadMessage &&
+        prevProps.isPaymentChatUI === nextProps.isPaymentChatUI
     );
 });