ordering-ui-react-native 0.12.18 → 0.12.19

package/themes/business/src/components 2/Chat/index.tsx

@@ -1,1152 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-  View,
-  Platform,
-  Keyboard,
-  Dimensions,
-  Pressable,
-  SafeAreaView,
-} from 'react-native';
-import {
-  GiftedChat,
-  Actions,
-  ActionsProps,
-  InputToolbar,
-  Composer,
-  Avatar,
-  Send,
-  Bubble,
-  Message,
-  MessageImage,
-  InputToolbarProps,
-  ComposerProps,
-} from 'react-native-gifted-chat';
-import { launchImageLibrary } from 'react-native-image-picker';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-import DocumentPicker from 'react-native-document-picker';
-import { useTheme } from 'styled-components/native';
-import {
-  ToastType,
-  useToast,
-  Messages as MessagesController,
-  useSession,
-  useUtils,
-  useLanguage,
-} from 'ordering-components/native';
-import { Header, TitleHeader, Wrapper } from './styles';
-import { OIcon, OIconButton, OText } from '../shared';
-import { MessagesParams } from '../../types';
-import { USER_TYPE } from '../../config/constants';
-
-import SignatureScreen from 'react-native-signature-canvas';
-
-const ChatUI = (props: MessagesParams) => {
-  const {
-    type,
-    order,
-    messages,
-    image,
-    message,
-    messagesToShow,
-    sendMessage,
-    setMessage,
-    canRead,
-    setCanRead,
-    handleSend,
-    setImage,
-    readMessages,
-  } = props;
-
-  const [{ user }] = useSession();
-  const [{ parseDate, parseTime, optimizeImage, getTimeAgo }] = useUtils();
-  const [, t] = useLanguage();
-  const [, { showToast }] = useToast();
-  const theme = useTheme();
-
-  const { bottom } = useSafeAreaInsets();
-
-  const [formattedMessages, setFormattedMessages] = useState<Array<any>>([]);
-  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
-  const windowWidth =
-    Dimensions.get('window').width < Dimensions.get('window').height
-      ? parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0))
-      : parseInt(
-          parseFloat(String(Dimensions.get('window').height)).toFixed(0),
-        );
-
-  const [orientation, setOrientation] = useState<string>(
-    Dimensions.get('window').width < Dimensions.get('window').height
-      ? 'Portrait'
-      : 'Landscape',
-  );
-
-  const [isShowSignaturePad, setIsShowSignaturePad] = useState(false)
-
-  // Events
-  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
-    if (width < height) {
-      setOrientation('Portrait');
-    } else {
-      setOrientation('Landscape');
-    }
-  });
-
-  const styles = StyleSheet.create({
-    containerActions: {
-      width: 44,
-      height: 44,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginBottom: 0,
-    },
-    containerSend: {
-      width: 44,
-      height: 44,
-      borderRadius: 7.6,
-      backgroundColor: theme.colors.transparent,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginHorizontal: 0,
-    },
-    bubbleText: {
-      color: theme.colors.black,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 12,
-    },
-    toolbarStyle: {
-      flexDirection: 'column-reverse',
-      paddingVertical: 15,
-      paddingHorizontal: 30,
-      backgroundColor: theme.colors.white,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.tabBar,
-    },
-    accessoryIcon: {
-      height: 32,
-      width: 32,
-      borderRadius: 7.6,
-      resizeMode: 'stretch',
-    },
-    shadow: {
-      height: 33,
-      width: 33,
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingHorizontal: 3,
-      borderRadius: 7.6,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.25,
-      shadowRadius: 3.84,
-      elevation: 2,
-      backgroundColor: theme.colors.clear,
-    },
-    avatar: {
-      height: 17,
-      width: 17,
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingHorizontal: 3,
-      borderRadius: 7.6,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.25,
-      shadowRadius: 3.84,
-      elevation: 2,
-      backgroundColor: theme.colors.white,
-      marginLeft: 4,
-    },
-    avatarIcon: {
-      height: 16,
-      width: 16,
-      borderRadius: 50,
-      resizeMode: 'stretch',
-    },
-    firstMessage: {
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: theme.colors.inputChat,
-      paddingVertical: 10,
-      borderRadius: 7.6,
-    },
-    firstMessageText: {
-      color: theme.colors.textGray,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 13,
-    },
-    timeText: {
-      color: theme.colors.white,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 10,
-      paddingLeft: 12,
-      paddingRight: 5,
-    },
-  });
-  const [file, setFile] = useState({
-    uri: '',
-    type: '',
-    name: '',
-    size: 0,
-  });
-
-  const onChangeMessage = (val: string) => {
-    setMessage && setMessage(val);
-  };
-
-  const removeImage = () => {
-    setImage && setImage(null);
-    setFile && setFile({ ...file, uri: '', type: '', name: '', size: 0 });
-  };
-
-  const attachIcons: any = {
-    jpeg: theme.images.general.imageFile,
-    png: theme.images.general.imageFile,
-    pdf: theme.images.general.pdfFile,
-    doc: theme.images.general.docFile,
-  };
-
-  const handleDocumentPicker = async () => {
-    try {
-      const res: any = await DocumentPicker.pick({
-        type: [DocumentPicker.types.allFiles],
-      });
-      const { uri, type, name, size } = res;
-      const [, typeFile] = type.split('/');
-      setFile({ ...file, uri, type: typeFile, name, size });
-    } catch (err: any) {
-      if (DocumentPicker.isCancel(err)) {
-        // User cancelled the picker, exit any dialogs or menus and move on
-      } else {
-        throw err;
-      }
-    }
-  };
-
-  const handleImagePicker = () => {
-    launchImageLibrary(
-      {
-        mediaType: 'photo',
-        maxHeight: 300,
-        maxWidth: 300,
-        includeBase64: true,
-      },
-      (response: any) => {
-        if (response.didCancel) {
-          console.log('User cancelled image picker');
-        } else if (response.errorMessage) {
-          console.log('ImagePicker Error: ', response.errorMessage);
-          showToast(ToastType.Error, response.errorMessage);
-        } else {
-          if (response.uri) {
-            const url = `data:${response.type};base64,${response.base64}`;
-            setImage && setImage(url);
-          } else {
-            showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-          }
-        }
-      },
-    );
-  };
-
-  const handleFilter = (value: any, reader: string) => {
-    const isAdmin = user?.level === 0;
-    const readersCount = [
-      ...new Map<string, boolean>(Object.entries(canRead)).values(),
-    ].filter((read: boolean) => read).length;
-    const minReaders = isAdmin ? 2 : order?.driver ? 3 : 4;
-
-    if (minReaders === 4) {
-      return;
-    }
-
-    if (readersCount > minReaders || value[reader]) {
-      setCanRead({ ...canRead, ...value });
-    } else if (reader !== 'business' && (isAdmin || user?.level === 4)) {
-      setCanRead({ ...canRead, ...value, business: true });
-    } else if (reader !== 'customer') {
-      setCanRead({ ...canRead, ...value, customer: true });
-    } else {
-      setCanRead({ ...canRead, ...value, driver: true });
-    }
-  };
-
-  const getStatus = (status: number, attribute: any) => {
-    const hour = Math.trunc(status / 60);
-    const min = Math.round((status / 60 - hour) * 60);
-
-    if (attribute === 'status') {
-      switch (status) {
-        case 0:
-          return 'ORDER_STATUS_PENDING';
-        case 1:
-          return 'ORDERS_COMPLETED';
-        case 2:
-          return 'ORDER_REJECTED';
-        case 3:
-          return 'ORDER_STATUS_IN_BUSINESS';
-        case 4:
-          return 'ORDER_READY';
-        case 5:
-          return 'ORDER_REJECTED_RESTAURANT';
-        case 6:
-          return 'ORDER_STATUS_CANCELLEDBYDRIVER';
-        case 7:
-          return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT';
-        case 8:
-          return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER';
-        case 9:
-          return 'ORDER_PICKUP_COMPLETED_BY_DRIVER';
-        case 10:
-          return 'ORDER_PICKUP_FAILED_BY_DRIVER';
-        case 11:
-          return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER';
-        case 12:
-          return 'ORDER_DELIVERY_FAILED_BY_DRIVER';
-        case 13:
-          return 'PREORDER';
-        case 14:
-          return 'ORDER_NOT_READY';
-        case 15:
-          return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER';
-        case 16:
-          return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER';
-        case 17:
-          return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER';
-        case 18:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS';
-        case 19:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER';
-        case 20:
-          return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS';
-        case 21:
-          return 'ORDER_CUSTOMER_ARRIVED_BUSINESS';
-        default:
-          return ``;
-      }
-    }
-
-    if (attribute === 'prepared_in' || attribute === 'delivered_in') {
-      return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min} ${
-        status > 60 ? 'hours' : 'minutes'
-      }`;
-    }
-  };
-
-  const onSubmit = (values: any) => {
-    handleSend && handleSend();
-    setImage && setImage(null);
-    setFile && setFile({ ...file, uri: '', type: '', name: '', size: 0 });
-    setMessage && setMessage('');
-    setIsShowSignaturePad(false)
-  };
-
-  const messageConsole = (message: any) => {
-    return (
-      <View
-        style={{
-          ...styles.firstMessage,
-          marginHorizontal: 0,
-          paddingHorizontal: 32,
-          width: 320,
-        }}>
-        <OText
-          numberOfLines={3}
-          style={{ ...styles.firstMessageText, textAlign: 'center' }}>
-          {message.change?.attribute !== 'driver_id'
-            ? `${t('ORDER', 'Order')} ${t(
-                message.change.attribute.toUpperCase(),
-                message.change.attribute,
-              )} ${t('CHANGED_FROM', 'Changed from')} ${
-                message.change.old !== null
-                  ? t(
-                      getStatus(
-                        parseInt(message.change.old, 10),
-                        message.change?.attribute,
-                      ),
-                    )
-                  : '0'
-              } ${t('TO', 'to')} ${t(
-                getStatus(
-                  parseInt(message.change.new, 10),
-                  message.change?.attribute,
-                ),
-              )}`
-            : message.change.new
-            ? `${message.driver?.name} ${
-                message.driver?.lastname !== null ? message.driver.lastname : ''
-              } ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${
-                message.comment ? message.comment.length : ''
-              }`
-            : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
-        </OText>
-        <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
-          {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}
-        </OText>
-      </View>
-    );
-  };
-
-  const AvatarsConsole = () => {
-    return (
-      <View style={{ flexDirection: 'row' }}>
-        <View style={styles.avatar}>
-          <OIcon
-            url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-            src={!order?.business?.logo && theme.images.dummies.businessLogo}
-            width={16}
-            height={16}
-            style={styles.avatarIcon}
-          />
-        </View>
-
-        <View style={styles.avatar}>
-          <OIcon
-            url={optimizeImage(
-              order?.customer?.photo || theme?.images?.dummies?.customerPhoto,
-              'h_300,c_limit',
-            )}
-            style={styles.avatarIcon}
-          />
-        </View>
-
-        {order?.driver && (
-          <View style={styles.avatar}>
-            <OIcon
-              url={
-                optimizeImage(order?.driver?.photo, 'h_300,c_limit') ||
-                theme?.images?.dummies?.driverPhoto
-              }
-              width={16}
-              height={16}
-              style={styles.avatarIcon}
-            />
-          </View>
-        )}
-      </View>
-    );
-  };
-
-  useEffect(() => {
-    let newMessages: Array<any> = [];
-    const console = (
-      <View style={{ flexDirection: 'column', width: windowWidth - 100 }}>
-        <View style={styles.firstMessage}>
-          <OText style={styles.firstMessageText}>
-            {t('ORDER_PLACED_FOR', 'Order placed for')}{' '}
-            <OText style={{ ...styles.firstMessageText, fontWeight: 'bold' }}>
-              {parseDate(order?.created_at)}
-            </OText>
-          </OText>
-
-          <OText style={{ ...styles.firstMessageText, textAlign: 'center' }}>
-            {t('VIA', 'Via')}{' '}
-            {order?.app_id
-              ? t(order?.app_id.toUpperCase(), order?.app_id)
-              : t('OTHER', 'Other')}
-          </OText>
-        </View>
-
-        <View>
-          <OText size={9} color={theme.colors.textGray}>
-            {`${t('SENT_TO', 'Sent to')}:`}
-          </OText>
-
-          <AvatarsConsole />
-        </View>
-      </View>
-    );
-
-    const firstMessage = {
-      _id: 0,
-      text: console,
-      createdAt: order?.created_at,
-      system: true,
-    };
-    messages?.messages.map((message: any) => {
-      let newMessage;
-      if (
-        parseInt(message.order_id) === order?.id &&
-        message.type !== 0 &&
-        (messagesToShow?.messages?.length ||
-          message?.can_see?.includes('2') ||
-          message?.can_see?.includes('0') ||
-          (message?.can_see?.includes('4') && type === USER_TYPE.DRIVER))
-      ) {
-        newMessage = {
-          _id: message.id,
-          text: message.type === 1 ? messageConsole(message) : message.comment,
-          createdAt: message.type !== 0 && message.created_at,
-          image: message.source,
-          system: message.type === 1,
-          user: {
-            _id: message.author.id,
-            name: message.author.name,
-            can_see: message?.can_see,
-            level: message.author.level,
-            avatar:
-              message.author.id !== user?.id && type === USER_TYPE.DRIVER
-                ? order?.driver?.photo
-                : order?.business?.logo,
-          },
-        };
-      }
-      if (message.type === 0) {
-        newMessage = firstMessage;
-      }
-      if (newMessage) {
-        newMessages = [...newMessages, newMessage];
-      }
-    });
-    setFormattedMessages([...newMessages.reverse()]);
-  }, [messages?.messages?.length]);
-
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      () => {
-        setIsKeyboardShow(true);
-      },
-    );
-    const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
-      () => {
-        setIsKeyboardShow(false);
-      },
-    );
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!order?.driver) {
-      setCanRead({ ...canRead, driver: false });
-    } else {
-      setCanRead({ ...canRead, driver: true });
-    }
-  }, [order?.driver]);
-
-  const RenderActionsAttach = (props: any) => {
-    return (
-      <Actions
-        {...props}
-        containerStyle={styles.containerActions}
-        optionTintColor={theme.colors.actionsIcon}
-        icon={() => (
-          <>
-            <OIconButton
-              borderColor={theme.colors.transparent}
-              style={{ width: 28, height: 28 }}
-              icon={attachIcons[file?.type] || theme.images.general.attach}
-              iconStyle={{
-                width: 28,
-                height: 28,
-                tintColor: theme.colors.textGray,
-              }}
-              onClick={handleDocumentPicker}
-              iconCover
-            />
-
-            {file?.type.length > 0 && (
-              <TouchableOpacity
-                style={{
-                  position: 'absolute',
-                  top: -5,
-                  right: -5,
-                  borderColor: theme.colors.backgroundDark,
-                  backgroundColor: theme.colors.white,
-                  borderRadius: 25,
-                }}
-                onPress={() => removeImage()}>
-                <MaterialCommunityIcon
-                  name="close-circle-outline"
-                  color={theme.colors.backgroundDark}
-                  size={24}
-                />
-              </TouchableOpacity>
-            )}
-          </>
-        )}
-      />
-    );
-  };
-
-  const renderAccessory = () => (
-      <Header
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-        horizontal
-        // contentContainerStyle={{
-        //   justifyContent:
-        //     orientation === 'Landscape' ? 'center' : 'space-between',
-        //   width: '100%',
-        // }}
-        nestedScrollEnabled={true}
-      >
-        {user?.level !== 2 && (
-          <Pressable
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              opacity: canRead?.business ? 1 : 0.25,
-              marginRight: 25,
-            }}
-            onPress={() =>
-              handleFilter({ business: !canRead?.business }, 'business')
-            }>
-            <View
-              style={{
-                ...styles.shadow,
-                shadowColor: canRead?.business
-                  ? theme.colors.shadow
-                  : theme.colors.brightness,
-              }}>
-              <OIcon
-                url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                src={
-                  !order?.business?.logo && theme.images.dummies.businessLogo
-                }
-                style={styles.accessoryIcon}
-              />
-            </View>
-
-            <TitleHeader>
-              <OText adjustsFontSizeToFit size={16} weight="600">
-                {order?.business?.name}
-              </OText>
-
-              <OText
-                adjustsFontSizeToFit
-                color={theme.colors.unselectText}
-                size={14}>
-                {t('BUSINESS', 'Business')}
-              </OText>
-            </TitleHeader>
-          </Pressable>
-        )}
-
-        <Pressable
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            opacity: canRead?.customer ? 1 : 0.25,
-            marginRight: 25,
-          }}
-          onPress={() =>
-            handleFilter({ customer: !canRead?.customer }, 'customer')
-          }>
-          <View
-            style={{
-              ...styles.shadow,
-              shadowColor: canRead?.customer
-                ? theme.colors.shadow
-                : theme.colors.brightness,
-            }}>
-            <OIcon
-              url={optimizeImage(
-                order?.customer?.photo || theme?.images?.dummies?.customerPhoto,
-                'h_300,c_limit',
-              )}
-              style={styles.accessoryIcon}
-            />
-          </View>
-
-          <TitleHeader>
-            <OText adjustsFontSizeToFit size={16} weight="600">
-              {order?.customer?.name}
-            </OText>
-
-            <OText
-              adjustsFontSizeToFit
-              color={theme.colors.unselectText}
-              size={14}>
-              {t('CUSTOMER', 'Customer')}
-            </OText>
-          </TitleHeader>
-        </Pressable>
-
-        {order?.driver && user?.level !== 4 && (
-          <Pressable
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              opacity: canRead?.driver ? 1 : 0.25,
-              marginRight: 25,
-            }}
-            onPress={() =>
-              handleFilter({ driver: !canRead?.driver }, 'driver')
-            }>
-            <View
-              style={{
-                ...styles.shadow,
-                shadowColor: canRead?.driver
-                  ? theme.colors.shadow
-                  : theme.colors.brightness,
-              }}>
-              <OIcon
-                url={
-                  optimizeImage(order?.driver?.photo, 'h_300,c_limit') ||
-                  theme?.images?.dummies?.driverPhoto
-                }
-                style={styles.accessoryIcon}
-              />
-            </View>
-
-            <TitleHeader>
-              <OText adjustsFontSizeToFit size={16} weight="600">
-                {order?.driver?.name}
-              </OText>
-
-              <OText
-                adjustsFontSizeToFit
-                color={theme.colors.unselectText}
-                size={14}>
-                {t('DRIVER', 'Driver')}
-              </OText>
-            </TitleHeader>
-          </Pressable>
-        )}
-      </Header>
-  );
-
-  const userRoles: any = {
-    0: t('ADMINISTRATOR', 'Administrator'),
-    1: t('CITY_MANAGER', 'City manager'),
-    2: t('BUSINESS_OWNER', 'Business owner'),
-    3: t('CUSTOMER', 'Customer'),
-    4: t('DRIVER', 'Driver'),
-    5: t('DRIVER_MANAGER', 'Driver manager'),
-  };
-
-  const renderInputToolbar = (props: any) => (
-    <InputToolbar
-      {...props}
-      containerStyle={styles.toolbarStyle}
-      primaryStyle={{ alignItems: 'center', justifyContent: 'space-between' }}
-      accessoryStyle={{ position: 'relative', marginBottom: 10 }}
-      renderAccessory={order ? () => renderAccessory && renderAccessory() : undefined}
-    />
-  );
-
-  const renderComposer = (props: any) => (
-    <View
-      style={{
-        flexDirection: 'row',
-        height: 44,
-        width: '85%',
-        backgroundColor: theme.colors.composerView,
-        borderRadius: 7.6,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingRight: 10,
-      }}>
-      <Composer
-        {...props}
-        textInputStyle={{
-          borderRadius: 7.6,
-          borderColor: theme.colors.transparent,
-          borderWidth: 0,
-          color: '#010300',
-        }}
-        textInputProps={{
-          value: message,
-          onSubmitEditing: onSubmit,
-          returnKeyType: message ? 'send' : 'done',
-          blurOnSubmit: true,
-          multiline: false,
-          numberOfLines: 1,
-          autoCorrect: false,
-          autoCompleteType: 'off',
-          enablesReturnKeyAutomatically: false,
-          selectionColor: theme.colors.primary,
-        }}
-        placeholder={t('WRITE_MESSAGE', 'Write message')}
-        placeholderTextColor={theme.colors.composerPlaceHolder}
-      />
-
-      <TouchableOpacity
-        onPress={() => {
-          setImage && setImage(null);
-          setIsShowSignaturePad(!isShowSignaturePad);
-        }}>
-        <MaterialCommunityIcon
-          name="pen"
-          color={
-            isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
-          }
-          size={24}
-        />
-      </TouchableOpacity>
-
-      {!file.type && (
-        <Actions
-          {...props}
-          containerStyle={styles.containerActions}
-          optionTintColor="#222845"
-          icon={() => (
-            <>
-              {!file?.type && (
-                <>
-                  <OIconButton
-                    borderColor={theme.colors.transparent}
-                    icon={
-                      !isShowSignaturePad && image
-                        ? { uri: image }
-                        : theme.images.general.imageChat
-                    }
-                    iconStyle={{
-                      borderRadius: image ? 10 : 0,
-                      width: image ? 32 : 28,
-                      height: image ? 32 : 28,
-                    }}
-                    onClick={handleImagePicker}
-                    iconCover
-                  />
-
-                  {image && !isShowSignaturePad && (
-                    <TouchableOpacity
-                      style={{
-                        position: 'absolute',
-                        top: -5,
-                        right: -5,
-                        borderColor: theme.colors.backgroundDark,
-                        backgroundColor: theme.colors.white,
-                        borderRadius: 25,
-                      }}
-                      onPress={() => removeImage()}>
-                      <MaterialCommunityIcon
-                        name="close-circle-outline"
-                        color={theme.colors.backgroundDark}
-                        size={24}
-                      />
-                    </TouchableOpacity>
-                  )}
-                </>
-              )}
-            </>
-          )}
-        />
-      )}
-    </View>
-  );
-
-  const renderSend = (props: any) => (
-    <Send
-      {...props}
-      disabled={
-        sendMessage?.loading || (message === '' && !image) || messages?.loading
-      }
-      alwaysShowSend
-      containerStyle={styles.containerSend}>
-      <OIconButton
-        onClick={onSubmit}
-        style={{
-          height: 44,
-          width: 44,
-          borderRadius: 7.6,
-          borderWidth: 0,
-          opacity:
-            sendMessage?.loading ||
-            (message === '' && !image) ||
-            messages?.loading
-              ? 0.6
-              : 1,
-          borderColor: theme.colors.transparent,
-          backgroundColor: theme.colors.primary,
-        }}
-        icon={theme.images.general.arrowReturnLeft}
-        disabled={
-          sendMessage?.loading ||
-          (message === '' && !image) ||
-          messages?.loading
-        }
-        disabledColor={theme.colors.white}
-      />
-    </Send>
-  );
-
-  const renderBubble = (props: any) => (
-    <Bubble
-      {...props}
-      textStyle={{
-        left: {},
-        right: { color: theme.colors.white },
-      }}
-      containerStyle={{
-        left: { marginVertical: 5, borderTopLeftRadius: 7.6, marginLeft: 3 },
-        right: { marginVertical: 5, borderTopRightRadius: 7.6, marginRight: 3 },
-      }}
-      wrapperStyle={{
-        left: {
-          backgroundColor: theme.colors.inputDisabled,
-          padding: 5,
-          borderTopLeftRadius: 7.6,
-          borderTopRightRadius: 7.6,
-          borderBottomRightRadius: 7.6,
-          borderBottomLeftRadius: 0,
-        },
-        right: {
-          backgroundColor: theme.colors.primary,
-          padding: 5,
-          borderTopLeftRadius: 7.6,
-          borderTopRightRadius: 7.6,
-          borderBottomLeftRadius: 7.6,
-          borderBottomRightRadius: 0,
-        },
-      }}
-    />
-  );
-
-  const renderMessageImage = (props: any) => <MessageImage {...props} />;
-
-  const renderScrollToBottomComponent = () => (
-    <MaterialCommunityIcon name="chevron-double-down" size={32} />
-  );
-
-  const customMessage = (props: any) => {
-    return (
-      <Message
-        {...props}
-        containerStyle={{
-          right: {
-            flexDirection: 'column',
-          },
-          left: {
-            flexDirection: 'column-reverse',
-            alignItems: 'flex-start',
-          },
-        }}
-      />
-    );
-  };
-
-  const renderAvatar = (props: any) => {
-    const isMine = user?.id === props?.currentMessage?.user?._id;
-
-    return (
-      <View
-        style={{
-          marginBottom: 10,
-          alignItems: isMine ? 'flex-end' : 'flex-start',
-        }}>
-        <OText size={9} color={theme.colors.textGray}>
-          {`${t('SENT_TO', 'Sent to')}:`}
-        </OText>
-
-        <View style={{ flexDirection: 'row' }}>
-          {props?.currentMessage?.user?.can_see?.includes('2') &&
-            user?.level !== 2 && (
-              <View style={styles.avatar}>
-                <OIcon
-                  url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                  src={
-                    !order?.business?.logo &&
-                    theme?.images?.dummies?.businessLogo
-                  }
-                  style={styles.avatarIcon}
-                />
-              </View>
-            )}
-
-          {props?.currentMessage?.user?.can_see?.includes('3') && (
-            <View style={styles.avatar}>
-              <OIcon
-                url={optimizeImage(
-                  order?.customer?.photo ||
-                    theme?.images?.dummies?.customerPhoto,
-                  'h_300,c_limit',
-                )}
-                style={styles.avatarIcon}
-              />
-            </View>
-          )}
-
-          {props?.currentMessage?.user?.can_see?.includes('4') &&
-            user?.level !== 4 && (
-              <View style={{ ...styles.avatar, marginRight: 0 }}>
-                <OIcon
-                  url={
-                    optimizeImage(order?.driver?.photo, 'h_300,c_limit') ||
-                    theme?.images?.dummies?.driverPhoto
-                  }
-                  style={styles.avatarIcon}
-                />
-              </View>
-            )}
-        </View>
-      </View>
-    );
-  };
-  const renderTime = (props: any) => (
-    <>
-      <OText style={styles.timeText}>
-        {getTimeAgo(props.currentMessage.createdAt)}
-      </OText>
-    </>
-  );
-
-  const renderNameMessage = (props: any) => {
-    const isMine = user?.id === props?.currentMessage?.user?._id;
-    return (
-      <View
-        style={{
-          alignItems: isMine ? 'flex-end' : 'flex-start',
-          paddingHorizontal: 10,
-        }}>
-        <OText
-          weight="600"
-          color={isMine ? theme.colors.white : theme.colors.black}>
-          {props?.currentMessage?.user?.name} (
-          {userRoles[props?.currentMessage?.user?.level]})
-        </OText>
-      </View>
-    );
-  };
-
-  const imgHeight = 120;
-  const signatureStyle = `
-    .m-signature-pad {
-      box-shadow: none;
-      border: none;
-    } 
-    .m-signature-pad--body {
-      border: none;
-    }
-    .m-signature-pad--footer {
-      display: none;
-      margin: 0px;
-    }
-    body,html {
-      height: ${imgHeight}px;
-      border-radius: 7.6px;
-    }
-    .m-signature-pad--footer
-    .button {
-      background-color: red;
-      color: #FFF;
-    }
-  `;
-
-  const signatureRef = useRef<any>();
-
-  const handleClear = () => {
-    setImage && setImage(null);
-    signatureRef.current.clearSignature();
-  };
-
-  const handleEnd = () => {
-    signatureRef.current.readSignature();
-  };
-
-  const handleOK = (signature: any) => {
-    setImage && setImage(signature);
-  };
-
-  const renderChatFooter = () => {
-    return (
-      <View
-        style={{
-          height: imgHeight,
-          paddingHorizontal: 30,
-          paddingVertical: 10,
-          borderTopColor: theme.colors.tabBar,
-          borderTopWidth: 1
-        }}
-      >
-        <SignatureScreen
-          ref={signatureRef}
-          onOK={handleOK}
-          webStyle={signatureStyle}
-          backgroundColor={theme.colors.composerView}
-          onEnd={handleEnd}
-        />
-         <TouchableOpacity
-          style={{
-            position: 'absolute',
-            right: 35,
-            top: 15
-          }}
-          onPress={handleClear}>
-          <MaterialCommunityIcon
-            name="close"
-            color={theme.colors.textGray}
-            size={24}
-          />
-        </TouchableOpacity>
-      </View>
-    )
-  }
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <Wrapper>
-        <GiftedChat
-          messages={formattedMessages}
-          user={{
-            _id: user?.id,
-            name: user?.name,
-            avatar: user?.photo,
-          }}
-          onSend={onSubmit}
-          onInputTextChanged={onChangeMessage}
-          alignTop={false}
-          listViewProps={{
-            contentContainerStyle: {
-              flexGrow: 1,
-              justifyContent: 'flex-end',
-              paddingHorizontal: 22,
-              paddingBottom: 30,
-            },
-          }}
-          renderCustomView={renderNameMessage}
-          scrollToBottom
-          renderAvatar={renderAvatar}
-          showAvatarForEveryMessage={true}
-          renderChatFooter={isShowSignaturePad ? renderChatFooter : undefined}
-          renderInputToolbar={renderInputToolbar}
-          renderComposer={renderComposer}
-          renderSend={renderSend}
-          renderMessage={(props: any) => customMessage(props)}
-          renderBubble={renderBubble}
-          renderMessageImage={renderMessageImage}
-          scrollToBottomComponent={() => renderScrollToBottomComponent()}
-          messagesContainerStyle={{ paddingBottom: 12 }}
-          showUserAvatar={true}
-          bottomOffset={bottom}
-          minInputToolbarHeight={115}
-          isLoadingEarlier={messages?.loading}
-          renderLoading={() => (
-            <ActivityIndicator size="small" color={theme.colors.black} />
-          )}
-          keyboardShouldPersistTaps="handled"
-        />
-      </Wrapper>
-    </SafeAreaView>
-  );
-};
-
-export const Chat = (props: MessagesParams) => {
-  const MessagesProps = {
-    ...props,
-    UIComponent: ChatUI,
-  };
-  return <MessagesController {...MessagesProps} />;
-};