@messenger-box/platform-mobile 10.0.3-alpha.16 → 10.0.3-alpha.162

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/components/SlackMessageContainer/SlackBubble.tsx

@@ -56,45 +56,255 @@ export default class Bubble extends React.Component<any> {
     }
 
     renderMessageImage() {
-        if (this.props.currentMessage.image) {
-            const { containerStyle, wrapperStyle, ...messageImageProps } = this.props;
+        const { currentMessage, containerStyle, wrapperStyle, ...messageImageProps } = this.props;
+
+        // Check if we have multiple images
+        if (currentMessage.images && Array.isArray(currentMessage.images) && currentMessage.images.length > 0) {
+            // Filter out any invalid or empty image URLs first
+            const validImages = currentMessage.images.filter((url) => url && typeof url === 'string');
+
+            // If no valid images after filtering, don't render anything
+            if (validImages.length === 0) {
+                return null;
+            }
+
+            // Render multiple images in a scrollable horizontal row
+            return (
+                <View style={{ marginVertical: 0 }}>
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            flexWrap: 'wrap',
+                            gap: 8,
+                        }}
+                    >
+                        {validImages.map((imageUrl, index) => {
+                            // Check if this is a local image
+                            const isLocalImage =
+                                imageUrl.startsWith('file:') ||
+                                imageUrl.startsWith('data:') ||
+                                imageUrl.startsWith('content:') ||
+                                (!imageUrl.startsWith('http://') && !imageUrl.startsWith('https://'));
+
+                            const imageSize =
+                                validImages.length === 1
+                                    ? { width: windowWidth * 0.6, height: windowWidth * 0.4 }
+                                    : { width: windowWidth * 0.3, height: windowWidth * 0.3 };
+
+                            // Show upload indicator if this message is uploading
+                            const isUploading = currentMessage.isUploading;
+
+                            return (
+                                <TouchableHighlight
+                                    key={`image-${index}-${currentMessage._id}`}
+                                    underlayColor={'transparent'}
+                                    onPress={() => {
+                                        // Don't allow viewing while uploading
+                                        if (isUploading) return;
+
+                                        // Create a message-like object with this image for the viewer
+                                        const imageObject = {
+                                            _id: `${currentMessage._id}-img-${index}`,
+                                            image: imageUrl,
+                                        };
+                                        this.props.setImageViewer(imageObject, true);
+                                    }}
+                                >
+                                    <View
+                                        style={{
+                                            ...imageSize,
+                                            maxHeight: 200,
+                                            borderRadius: 8,
+                                            overflow: 'hidden',
+                                            borderWidth: 1,
+                                            borderColor: '#e0e0e0',
+                                            backgroundColor: '#f7f7f7',
+                                        }}
+                                    >
+                                        {isLocalImage ? (
+                                            // For local images, use direct Image component with no loading state
+                                            <View style={{ width: '100%', height: '100%' }}>
+                                                <MessageImage
+                                                    {...messageImageProps}
+                                                    currentMessage={{ ...currentMessage, image: imageUrl }}
+                                                    imageStyle={{
+                                                        width: '100%',
+                                                        height: '100%',
+                                                        borderRadius: 8,
+                                                    }}
+                                                />
+
+                                                {/* Show upload indicator if needed */}
+                                                {isUploading && (
+                                                    <View
+                                                        style={{
+                                                            position: 'absolute',
+                                                            top: 0,
+                                                            left: 0,
+                                                            right: 0,
+                                                            bottom: 0,
+                                                            backgroundColor: 'rgba(0,0,0,0.2)',
+                                                            justifyContent: 'center',
+                                                            alignItems: 'center',
+                                                        }}
+                                                    >
+                                                        <Text style={{ color: 'white', fontWeight: 'bold' }}>
+                                                            Uploading...
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                            </View>
+                                        ) : (
+                                            // For remote images, use CachedImage with loading placeholder
+                                            <CachedImage
+                                                style={[styles.slackImage, { width: '100%', height: '100%' }]}
+                                                cacheKey={`${currentMessage._id}-img-${index}-slack-bubble-imageKey`}
+                                                source={{
+                                                    uri: imageUrl,
+                                                    expiresIn: 86400,
+                                                }}
+                                                resizeMode={'cover'}
+                                                alt={'image'}
+                                                placeholderContent={
+                                                    <View
+                                                        style={[
+                                                            styles.slackImage,
+                                                            {
+                                                                width: '100%',
+                                                                height: '100%',
+                                                                backgroundColor: '#e1e1e1',
+                                                                justifyContent: 'center',
+                                                                alignItems: 'center',
+                                                                borderRadius: 8,
+                                                            },
+                                                        ]}
+                                                    >
+                                                        <Text>{isUploading ? 'Uploading...' : 'Loading...'}</Text>
+                                                    </View>
+                                                }
+                                            />
+                                        )}
+                                    </View>
+                                </TouchableHighlight>
+                            );
+                        })}
+                    </View>
+                </View>
+            );
+        }
+
+        // Fall back to single image rendering if no images array
+        if (currentMessage.image) {
             if (this.props.renderMessageImage) {
                 return this.props.renderMessageImage(messageImageProps);
             }
-            const { image, _id } = messageImageProps?.currentMessage;
+            const { image, _id } = currentMessage;
+
+            // Add validation for image URL
+            if (!image || typeof image !== 'string') {
+                return null;
+            }
 
+            // Check if this is a local image (from device camera/library)
+            const isLocalImage =
+                image.startsWith('file:') ||
+                image.startsWith('data:') ||
+                image.startsWith('content:') ||
+                // Check if the image is a pendingUpload by checking if it doesn't start with http/https
+                (!image.startsWith('http://') && !image.startsWith('https://'));
+
+            // Check uploading state
+            const isUploading = currentMessage.isUploading;
+
+            // Class components can't use hooks like useMemo
+            // Directly render the CachedImage instead
             return (
                 <TouchableHighlight
-                    // underlayColor={'#c0c0c0'}
                     underlayColor={'transparent'}
-                    style={{ width: '100%' }}
-                    onPress={() => this.props.setImageViewer(messageImageProps?.currentMessage, true)}
+                    style={{ width: '100%', marginVertical: 0 }}
+                    onPress={() => {
+                        // Don't allow viewing while uploading
+                        if (isUploading) return;
+                        this.props.setImageViewer(currentMessage, true);
+                    }}
                 >
                     <View
                         style={{
-                            width: windowWidth - (windowWidth - 150),
-                            height: windowHeight - (windowHeight - 100),
+                            width: windowWidth * 0.6, // 60% of screen width
+                            height: windowWidth * 0.4, // Maintain aspect ratio
+                            maxHeight: 200,
+                            borderRadius: 8,
+                            overflow: 'hidden',
+                            borderWidth: 1,
+                            borderColor: '#e0e0e0',
+                            backgroundColor: '#f7f7f7',
                         }}
                     >
-                        {/* <MessageImage
-                            {...messageImageProps}
-                            imageStyle={[styles.slackImage, messageImageProps.imageStyle]}
-                        /> */}
-                        <CachedImage
-                            style={[styles.slackImage, { width: '100%', height: '100%' }]}
-                            cacheKey={`${_id}-slack-bubble-imageKey`}
-                            source={{
-                                uri: image,
-                                //headers: `Authorization: Bearer ${token}`,
-                                expiresIn: 86400,
-                            }}
-                            resizeMode={'cover'}
-                            alt={'image'}
-                        />
+                        {isLocalImage ? (
+                            // For local images, use direct Image component with no loading state
+                            <View style={{ width: '100%', height: '100%', position: 'relative' }}>
+                                <MessageImage
+                                    {...messageImageProps}
+                                    imageStyle={{
+                                        width: '100%',
+                                        height: '100%',
+                                        borderRadius: 8,
+                                    }}
+                                />
+
+                                {/* Show upload indicator if needed */}
+                                {isUploading && (
+                                    <View
+                                        style={{
+                                            position: 'absolute',
+                                            top: 0,
+                                            left: 0,
+                                            right: 0,
+                                            bottom: 0,
+                                            backgroundColor: 'rgba(0,0,0,0.2)',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        }}
+                                    >
+                                        <Text style={{ color: 'white', fontWeight: 'bold' }}>Uploading...</Text>
+                                    </View>
+                                )}
+                            </View>
+                        ) : (
+                            // For remote images, use CachedImage with loading placeholder
+                            <CachedImage
+                                style={[styles.slackImage, { width: '100%', height: '100%' }]}
+                                cacheKey={`${_id}-slack-bubble-imageKey`}
+                                source={{
+                                    uri: image,
+                                    expiresIn: 86400,
+                                }}
+                                resizeMode={'cover'}
+                                alt={'image'}
+                                placeholderContent={
+                                    <View
+                                        style={[
+                                            styles.slackImage,
+                                            {
+                                                width: '100%',
+                                                height: '100%',
+                                                backgroundColor: '#e1e1e1',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                borderRadius: 8,
+                                            },
+                                        ]}
+                                    >
+                                        <Text>{isUploading ? 'Uploading...' : 'Loading...'}</Text>
+                                    </View>
+                                }
+                            />
+                        )}
                     </View>
                 </TouchableHighlight>
             );
         }
+
         return null;
     }
 

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

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Spinner, Text, VStack, Button, ButtonText } from '@admin-layout/gluestack-ui-mobile';
+import colors from 'tailwindcss/colors';
+
+interface SmartLoaderProps {
+    isLoading: boolean;
+    timeoutMs?: number;
+    message?: string;
+    onRetry?: () => void;
+}
+
+/**
+ * SmartLoader component that automatically shows a timeout message
+ * if loading takes too long, preventing infinite loading states
+ */
+export const SmartLoader: React.FC<SmartLoaderProps> = ({
+    isLoading,
+    timeoutMs = 20000, // Default 20 seconds
+    message = 'Taking longer than expected...',
+    onRetry,
+}) => {
+    const [showTimeout, setShowTimeout] = useState(false);
+
+    useEffect(() => {
+        if (!isLoading) {
+            setShowTimeout(false);
+            return;
+        }
+
+        const timeoutId = setTimeout(() => {
+            if (isLoading) {
+                setShowTimeout(true);
+            }
+        }, timeoutMs);
+
+        return () => clearTimeout(timeoutId);
+    }, [isLoading, timeoutMs]);
+
+    if (!isLoading) return null;
+
+    return (
+        <Box className="flex-1 bg-gray-100 dark:bg-gray-800 items-center justify-center">
+            <VStack space="md" className="items-center">
+                <Spinner color={colors.blue[500]} size="large" />
+
+                {showTimeout && (
+                    <VStack space="sm" className="p-4 items-center">
+                        <Text className="text-gray-700 dark:text-gray-300 text-center">{message}</Text>
+                        {onRetry && (
+                            <Button onPress={onRetry} className="bg-blue-500 mt-3 rounded-full">
+                                <ButtonText>Try Again</ButtonText>
+                            </Button>
+                        )}
+                    </VStack>
+                )}
+            </VStack>
+        </Box>
+    );
+};
+
+export default SmartLoader;

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

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+/**
+ * Shared SubscriptionHandler for Apollo subscribeToMore
+ *
+ * @param subscribeToMore - Apollo subscribeToMore function
+ * @param document - GraphQL subscription document
+ * @param variables - Variables for the subscription
+ * @param updateQuery - Apollo updateQuery function
+ * @param onError - Optional error handler
+ * @param enabled - If false, disables the subscription
+ */
+export function SubscriptionHandler({
+    subscribeToMore,
+    document,
+    variables,
+    updateQuery,
+    onError,
+    enabled = true,
+}: {
+    subscribeToMore: Function;
+    document: any;
+    variables: Record<string, any>;
+    updateQuery: (prev: any, { subscriptionData }: any) => any;
+    onError?: (error: any) => void;
+    enabled?: boolean;
+}) {
+    useEffect(() => {
+        if (!enabled) return;
+        const unsubscribe = subscribeToMore({
+            document,
+            variables,
+            updateQuery,
+            onError,
+        });
+        return () => {
+            if (unsubscribe && typeof unsubscribe === 'function') unsubscribe();
+        };
+    }, [subscribeToMore, document, JSON.stringify(variables), updateQuery, onError, enabled]);
+    return null;
+}