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

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

@@ -1,113 +0,0 @@
-import React, {useState} from 'react';
-import {Alert, Modal, StyleSheet, Text, Pressable, View,SafeAreaView,StatusBar} from 'react-native';
-
-const ImageViewerModal = ({children,isVisible=false,setVisible,modalContent=null}:any) => {
-  
-  return (
-      <Modal
-        animationType="slide"
-       // transparent={true}
-        visible={isVisible}
-        presentationStyle={'fullScreen'}
-        style={{flex:1}}
-        onRequestClose={() => {
-          setVisible(false);
-        }}>
-        <View style={styles.container}> 
-        <View style={styles.headerView}>
-          {/* <View><Text></Text></View>
-          <View><Text></Text></View> */}
-          <View style={{alignSelf:'flex-end',paddingRight:5}} > 
-            <Pressable
-              style={[styles.button, styles.buttonClose]}
-              onPress={() => setVisible(false)}>
-              <Text style={styles.headerTextStyle}>X</Text>
-            </Pressable></View>
-        </View>
-        <View style={styles.centeredView}>
-            {modalContent ? modalContent : children}
-        </View>
-        <View style={styles.footerView}>
-
-        </View>
-        </View>
-      </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  container:{
-   flex:1,
-  },
-  headerView:{
-   width:'100%',
-   alignItems: 'center',
-   justifyContent:'space-between',
-  // backgroundColor:'rgba(r, g, b, a)',
-   backgroundColor:'#000',
-   paddingTop:50,
-   paddingBottom:10,
-  },
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-
-    borderRadius: 20,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  footerView:{
-   minHeight:100,
-   backgroundColor:'#000'
-  },
-  modalView: {
-    flex:1,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose: {
-    backgroundColor: 'transparent',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  headerTextStyle:{
-    color: '#fff',
-    // fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize:20,
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-});
-
-export default ImageViewerModal;

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

@@ -1,313 +0,0 @@
-/* eslint-disable no-underscore-dangle, no-use-before-define */
-import React from 'react';
-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';
-const { isSameUser, isSameDay } = utils;
-const windowWidth = Dimensions.get('window').width;
-const windowHeight = Dimensions.get('window').height;
-
-export default class Bubble extends React.Component<any> {
-    static defaultProps: {
-        touchableProps: {};
-        onLongPress: null;
-        renderMessageImage: null;
-        renderMessageText: null;
-        renderCustomView: null;
-        renderTime: null;
-        currentMessage: { text: null; createdAt: null; image: null };
-        nextMessage: {};
-        previousMessage: {};
-        containerStyle: {};
-        wrapperStyle: {};
-        tickStyle: {};
-        containerToNextStyle: {};
-        containerToPreviousStyle: {};
-        isShowImageViewer: false;
-        setImageViewer: (obj: any, v: boolean) => void;
-    };
-    static propTypes: any;
-    constructor(props: any) {
-        super(props);
-    }
-
-    renderMessageText() {
-        if (this.props.currentMessage.text) {
-            const { containerStyle, wrapperStyle, messageTextStyle, ...messageTextProps } = this.props;
-            if (this.props.renderMessageText) {
-                return this.props.renderMessageText(messageTextProps);
-            }
-            return (
-                <MessageText
-                    {...messageTextProps}
-                    textStyle={{
-                        left: [
-                            styles.standardFont,
-                            styles.slackMessageText,
-                            messageTextProps.textStyle,
-                            messageTextStyle,
-                        ],
-                    }}
-                />
-            );
-        }
-        return null;
-    }
-
-    renderMessageImage() {
-        if (this.props.currentMessage.image) {
-            const { containerStyle, wrapperStyle, ...messageImageProps } = this.props;
-            if (this.props.renderMessageImage) {
-                return this.props.renderMessageImage(messageImageProps);
-            }
-            const { image, _id } = messageImageProps?.currentMessage;
-
-            // Add validation for image URL
-            if (!image || typeof image !== 'string') {
-                console.log('Invalid image URL:', image);
-                return null;
-            }
-
-            // Log the image URL for debugging
-            console.log('Rendering message image:', image);
-
-            return (
-                <TouchableHighlight
-                    underlayColor={'transparent'}
-                    style={{ width: '100%', marginVertical: 5 }}
-                    onPress={() => this.props.setImageViewer(messageImageProps?.currentMessage, true)}
-                >
-                    <View
-                        style={{
-                            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',
-                        }}
-                    >
-                        <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>Loading...</Text>
-                                </View>
-                            }
-                        />
-                    </View>
-                </TouchableHighlight>
-            );
-        }
-        return null;
-    }
-
-    renderTicks() {
-        const { currentMessage } = this.props;
-        if (this.props.renderTicks) {
-            return this.props.renderTicks(currentMessage);
-        }
-        if (currentMessage.user._id !== this.props.user._id) {
-            return null;
-        }
-        if (currentMessage.sent || currentMessage.received) {
-            return (
-                <View style={[styles.headerItem, styles.tickView]}>
-                    {currentMessage.sent && (
-                        <Text style={[styles.standardFont, styles.tick, this.props.tickStyle]}>✓</Text>
-                    )}
-                    {currentMessage.received && (
-                        <Text style={[styles.standardFont, styles.tick, this.props.tickStyle]}>✓</Text>
-                    )}
-                </View>
-            );
-        }
-        return null;
-    }
-
-    renderUsername() {
-        const username = this.props.currentMessage.user.name;
-        if (username) {
-            const { containerStyle, wrapperStyle, ...usernameProps } = this.props;
-            if (this.props.renderUsername) {
-                return this.props.renderUsername(usernameProps);
-            }
-            return (
-                <Text style={[styles.standardFont, styles.headerItem, styles.username, this.props.usernameStyle]}>
-                    {username}
-                </Text>
-            );
-        }
-        return null;
-    }
-
-    renderTime() {
-        if (this.props.currentMessage.createdAt) {
-            const { containerStyle, wrapperStyle, ...timeProps }: any = this.props;
-            if (this.props.renderTime) {
-                return this.props.renderTime(timeProps);
-            }
-            return (
-                <Time
-                    {...timeProps}
-                    containerStyle={{ left: [styles.timeContainer] }}
-                    textStyle={{
-                        left: [styles.standardFont, styles.headerItem, styles.time, timeProps.textStyle],
-                    }}
-                />
-            );
-        }
-        return null;
-    }
-
-    renderCustomView() {
-        if (this.props.renderCustomView) {
-            return this.props.renderCustomView(this.props);
-        }
-        return null;
-    }
-
-    render() {
-        const isSameThread =
-            isSameUser(this.props.currentMessage, this.props.previousMessage) &&
-            isSameDay(this.props.currentMessage, this.props.previousMessage);
-
-        const messageHeader = isSameThread ? null : (
-            <View style={styles.headerView}>
-                {this.renderUsername()}
-                {this.renderTime()}
-                {this.renderTicks()}
-            </View>
-        );
-
-        return (
-            <View style={[styles.container, this.props.containerStyle]}>
-                <TouchableHighlight
-                    style={{ width: '100%' }}
-                    // underlayColor={'#c0c0c0'}
-                    underlayColor={'transparent'}
-                    disabled={true}
-                    accessibilityTraits="text"
-                    {...this.props.touchableProps}
-                >
-                    <View style={[styles.wrapper, this.props.wrapperStyle]}>
-                        <View>
-                            {this.renderCustomView()}
-                            {messageHeader}
-                            {this.renderMessageImage()}
-                            {this.renderMessageText()}
-                        </View>
-                    </View>
-                </TouchableHighlight>
-            </View>
-        );
-    }
-}
-
-// Note: Everything is forced to be "left" positioned with this component.
-// The "right" position is only used in the default Bubble.
-const styles = StyleSheet.create({
-    standardFont: {
-        fontSize: 15,
-    },
-    slackMessageText: {
-        marginLeft: 0,
-        marginRight: 0,
-    },
-    container: {
-        flex: 1,
-        alignItems: 'flex-start',
-    },
-    wrapper: {
-        marginRight: 60,
-        minHeight: 20,
-        justifyContent: 'flex-start',
-    },
-    username: {
-        fontWeight: 'bold',
-        top: 0,
-        paddingTop: 0,
-        marginTop: 0,
-    },
-    time: {
-        textAlign: 'left',
-        fontSize: 12,
-    },
-    timeContainer: {
-        marginLeft: 0,
-        marginRight: 0,
-        marginBottom: 0,
-    },
-    headerItem: {
-        marginRight: 10,
-    },
-    headerView: {
-        // Try to align it better with the avatar on Android.
-        marginTop: Platform.OS === 'android' ? -2 : 0,
-        flexDirection: 'row',
-        alignItems: 'baseline',
-    },
-    /* eslint-disable react-native/no-color-literals */
-    tick: {
-        backgroundColor: 'transparent',
-        color: 'white',
-    },
-    /* eslint-enable react-native/no-color-literals */
-    tickView: {
-        flexDirection: 'row',
-    },
-    slackImage: {
-        borderRadius: 3,
-        marginLeft: 8,
-        marginRight: 0,
-    },
-});
-
-// Bubble.contextTypes = {
-//     actionSheet: PropTypes.func,
-// };
-
-Bubble.defaultProps = {
-    touchableProps: {},
-    onLongPress: null,
-    renderMessageImage: null,
-    renderMessageText: null,
-    renderCustomView: null,
-    renderTime: null,
-    currentMessage: {
-        text: null,
-        createdAt: null,
-        image: null,
-    },
-    nextMessage: {},
-    previousMessage: {},
-    containerStyle: {},
-    wrapperStyle: {},
-    tickStyle: {},
-    containerToNextStyle: {},
-    containerToPreviousStyle: {},
-    isShowImageViewer: false,
-    setImageViewer: (obj: any, v: boolean) => null,
-};

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

@@ -1,145 +0,0 @@
-/* eslint-disable no-underscore-dangle, no-use-before-define */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import { Day, utils } from 'react-native-gifted-chat';
-import { Avatar, AvatarFallbackText, AvatarImage } from '@admin-layout/gluestack-ui-mobile';
-import Bubble from './SlackBubble';
-
-const { isSameUser, isSameDay } = utils;
-
-export default class Message extends React.Component<any> {
-    static defaultProps: {
-        renderAvatar: undefined;
-        renderBubble: null;
-        renderDay: null;
-        currentMessage: {};
-        nextMessage: {};
-        previousMessage: {};
-        user: {};
-        containerStyle: {};
-        isShowImageViewer: false;
-        setImageViewer: (obj: any, v: boolean) => void;
-    };
-    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;
-    }
-
-    renderBubble() {
-        const bubbleProps = this.getInnerComponentProps();
-        if (this.props.renderBubble) {
-            return this.props.renderBubble(bubbleProps);
-        }
-        return (
-            <Bubble
-                {...bubbleProps}
-                isShowImageViewer={this.props.isShowImageViewer}
-                setImageViewer={this.props.setImageViewer}
-            />
-        );
-    }
-
-    renderAvatar() {
-        let extraStyle: any;
-        //new param added
-        let isSameUserAndSameDay: boolean = false;
-        if (
-            isSameUser(this.props.currentMessage, this.props.previousMessage) &&
-            isSameDay(this.props.currentMessage, this.props.previousMessage)
-        ) {
-            // Set the invisible avatar height to 0, but keep the width, padding, etc.
-            extraStyle = { height: 0 };
-            isSameUserAndSameDay = true;
-        }
-
-        const avatarProps: any = this.getInnerComponentProps();
-
-        return (
-            <Avatar size={'sm'} className="bg-transparent rounded-none mr-2">
-                <AvatarFallbackText>
-                    {isSameUserAndSameDay ? '' : avatarProps?.currentMessage?.user?.name[0]}
-                </AvatarFallbackText>
-                {!isSameUserAndSameDay && avatarProps?.currentMessage?.user?.avatar && (
-                    <AvatarImage
-                        alt="image"
-                        style={{ ...styles.slackAvatar, ...avatarProps.imageStyle }}
-                        source={{
-                            uri: avatarProps?.currentMessage?.user?.avatar,
-                        }}
-                    />
-                )}
-            </Avatar>
-            // <Avatar
-            //     {...avatarProps}
-            //     showAvatarForEveryMessage={true}
-            //     imageStyle={{
-            //         left: [styles.slackAvatar, avatarProps.imageStyle, extraStyle],
-            //     }}
-            // />
-        );
-    }
-
-    render() {
-        const marginBottom = isSameUser(this.props.currentMessage, this.props.nextMessage) ? 2 : 10;
-
-        return (
-            <View>
-                {this.renderDay()}
-                <View style={[styles.container, { marginBottom }, this.props.containerStyle]}>
-                    {this.renderAvatar()}
-                    {this.renderBubble()}
-                </View>
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-        marginLeft: 8,
-        marginRight: 0,
-    },
-    slackAvatar: {
-        // The bottom should roughly line up with the first line of message text.
-        height: 40,
-        width: 40,
-        borderRadius: 3,
-        // marginTop: 0,
-        marginTop: 1,
-    },
-});
-
-Message.defaultProps = {
-    renderAvatar: undefined,
-    renderBubble: null,
-    renderDay: null,
-    currentMessage: {},
-    nextMessage: {},
-    previousMessage: {},
-    user: {},
-    containerStyle: {},
-    isShowImageViewer: false,
-    setImageViewer: (obj: any, v: boolean) => null,
-};

package/src/screens/inbox/components/SlackMessageContainer/index.ts

@@ -1,3 +0,0 @@
-import SlackMessage from './SlackMessage';
-import ImageViewerModal from './ImageViewerModal';
-export { SlackMessage ,ImageViewerModal};

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

@@ -1,61 +0,0 @@
-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;