ordering-ui-react-native 0.24.43-test → 0.25.1

package/themes/business/src/components/OrderMessage/index.tsx

@@ -1,345 +1,345 @@
-import React, { useState, useEffect } from 'react';
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { Chat } from '../Chat';
-import { StyleSheet, View, BackHandler, TouchableOpacity } from 'react-native';
-import {
-  useLanguage,
-  OrderDetails as OrderDetailsController,
-  useSession,
-} from 'ordering-components/native';
-import { useUtils } from 'ordering-components/native';
-
-import { OIcon, OText } from '../shared';
-import { OrderDetailsParams } from '../../types';
-import { USER_TYPE } from '../../config/constants';
-import { useTheme } from 'styled-components/native';
-import Alert from '../../providers/AlertProvider';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-export const OrderMessageUI = (props: OrderDetailsParams) => {
-  const {
-    navigation,
-    messages,
-    setMessages,
-    readMessages,
-    messagesReadList,
-    setOrders,
-  } = props;
-
-  const [{ optimizeImage }] = useUtils();
-  const theme = useTheme();
-  const [, t] = useLanguage();
-  const [openModalForBusiness, setOpenModalForBusiness] = useState(true);
-  const [unreadAlert, setUnreadAlert] = useState({
-    business: false,
-    driver: false,
-  });
-  const { top } = useSafeAreaInsets();
-  const [{ user }] = useSession();
-  const { order, loading } = props.order;
-  const [alertState, setAlertState] = useState<{
-    open: boolean;
-    content: Array<string>;
-    key?: string | null;
-  }>({ open: false, content: [], key: null });
-
-  useEffect(() => {
-    if (order?.driver === null && user.level === 4) {
-      setAlertState({
-        open: true,
-        content: [
-          t(
-            'YOU_HAVE_BEEN_REMOVED_FROM_THE_ORDER',
-            'You have been removed from the order',
-          ),
-        ],
-        key: null,
-      });
-    }
-  }, [order?.driver]);
-
-  const handleArrowBack = (): boolean => {
-    if (order?.unread_count !== undefined) {
-      setOrders?.((prevOrders: any) => {
-        const { data } = prevOrders;
-
-        const updateOrder = data?.find((_order: any, index: number) => {
-          if (_order.id === order?.id) {
-            _order.unread_count = 0;
-            data.splice(index, 1, _order);
-            return true;
-          }
-
-          return false;
-        });
-
-        if (updateOrder) {
-          return { ...prevOrders, data };
-        }
-
-        return prevOrders;
-      });
-
-      readMessages?.();
-    }
-
-    navigation?.canGoBack() && navigation.goBack();
-
-    return true;
-  };
-
-  useEffect(() => {
-    BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
-
-    return () =>
-      BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
-  }, [order?.unread_count, messages?.messages]);
-
-  const backIfDriverDoesntExist = () => {
-    navigation?.canGoBack() && navigation.goBack();
-  };
-
-  useEffect(() => {
-    if (messagesReadList?.length) {
-      openModalForBusiness
-        ? setUnreadAlert({ ...unreadAlert, business: false })
-        : setUnreadAlert({ ...unreadAlert, driver: false });
-    }
-  }, [messagesReadList]);
-
-  const styles = StyleSheet.create({
-    titleSection: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingHorizontal: 30,
-      paddingTop: 30,
-      paddingBottom: 25,
-      borderBottomWidth: 2,
-      borderBottomColor: '#e6e6e6',
-    },
-    titleGroups: {
-      alignItems: 'center',
-      flexDirection: 'row',
-    },
-    titleIcons: {
-      height: 33,
-      width: 33,
-      borderRadius: 7.6,
-      resizeMode: 'stretch',
-    },
-    shadow: {
-      height: 34,
-      width: 34,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginLeft: 15,
-      backgroundColor: theme.colors.clear,
-      paddingHorizontal: 3,
-      borderRadius: 7.6,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.25,
-      shadowRadius: 3.84,
-      elevation: 3,
-    },
-    modalText: {
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: '600',
-      color: theme.colors.textGray,
-      textAlign: 'center',
-      zIndex: 10,
-    },
-    btnBackArrow: {
-      borderWidth: 0,
-      width: 32,
-      height: 32,
-      tintColor: theme.colors.textGray,
-      backgroundColor: theme.colors.clear,
-      borderColor: theme.colors.clear,
-      shadowColor: theme.colors.clear,
-      paddingLeft: 0,
-      paddingRight: 0,
-      marginTop: 10
-    },
-  });
-
-  return (
-    <>
-      {(!order || Object.keys(order).length === 0 || loading) && (
-        <View
-          style={{
-            padding: 40,
-            flex: 1,
-            backgroundColor: theme.colors.backgroundLight,
-            justifyContent: 'space-between',
-          }}>
-          <Placeholder>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <PlaceholderLine width={40} />
-              <PlaceholderLine
-                width={20}
-                style={{
-                  marginLeft: 20,
-                  borderRadius: 50,
-                  width: 40,
-                  height: 40,
-                }}
-              />
-              <PlaceholderLine
-                width={20}
-                style={{
-                  marginLeft: 10,
-                  borderRadius: 50,
-                  width: 40,
-                  height: 40,
-                }}
-              />
-              <PlaceholderLine
-                width={20}
-                style={{
-                  marginLeft: 10,
-                  borderRadius: 50,
-                  width: 40,
-                  height: 40,
-                }}
-              />
-            </View>
-          </Placeholder>
-
-          <Placeholder>
-            <View style={{ flexDirection: 'column' }}>
-              <PlaceholderLine width={60} />
-              <PlaceholderLine width={40} />
-              <PlaceholderLine width={20} />
-              <PlaceholderLine width={20} />
-            </View>
-            <View
-              style={{
-                flexDirection: 'column',
-                justifyContent: 'flex-end',
-                alignItems: 'flex-end',
-              }}>
-              <PlaceholderLine width={60} />
-              <PlaceholderLine width={40} />
-            </View>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}>
-              <PlaceholderLine
-                width={20}
-                style={{
-                  marginLeft: 20,
-                  borderRadius: 50,
-                  width: 50,
-                  height: 50,
-                }}
-              />
-              <PlaceholderLine
-                width={20}
-                style={{
-                  marginLeft: 20,
-                  borderRadius: 50,
-                  width: 50,
-                  height: 50,
-                }}
-              />
-            </View>
-            <PlaceholderLine width={100} />
-            <PlaceholderLine
-              width={100}
-              style={{ borderRadius: 50, width: '100%', height: 30 }}
-            />
-          </Placeholder>
-        </View>
-      )}
-
-      {order && Object.keys(order).length > 0 && !loading && (
-        <>
-          <View style={styles.titleSection}>
-            <View style={styles.titleGroups}>
-              <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
-                <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
-              </TouchableOpacity>
-
-              <OText size={16} style={styles.modalText} adjustsFontSizeToFit>
-                {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id}`}
-              </OText>
-            </View>
-
-            <View style={styles.titleGroups}>
-              <View style={styles.shadow}>
-                {!!order?.business?.logo ? (
-                  <OIcon
-                    url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                    style={styles.titleIcons}
-                  />
-                ) : (
-                  <OIcon
-                    src={theme.images.dummies.businessLogo}
-                    style={styles.titleIcons}
-                  />
-                )}
-              </View>
-
-              <View style={styles.shadow}>
-                <OIcon
-                  url={optimizeImage(
-                    order?.customer?.photo ||
-                    theme?.images?.dummies?.customerPhoto,
-                    'h_300,c_limit',
-                  )}
-                  style={styles.titleIcons}
-                />
-              </View>
-
-              {order?.driver && (
-                <View style={styles.shadow}>
-                  <OIcon
-                    url={
-                      optimizeImage(order?.driver?.photo, 'h_300,c_limit') ||
-                      theme?.images?.dummies?.driverPhoto
-                    }
-                    style={styles.titleIcons}
-                  />
-                </View>
-              )}
-            </View>
-          </View>
-
-          <Chat
-            type={openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER}
-            orderId={order?.id}
-            messages={messages}
-            order={order}
-            setMessages={setMessages}
-          />
-
-          <Alert
-            open={alertState.open}
-            onAccept={backIfDriverDoesntExist}
-            onClose={backIfDriverDoesntExist}
-            content={alertState.content}
-            title={t('ERROR', 'Error')}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-export const OrderMessage = (props: OrderDetailsParams) => {
-  const orderDetailsProps = {
-    ...props,
-    driverAndBusinessId: true,
-    UIComponent: OrderMessageUI,
-  };
-  return <OrderDetailsController {...orderDetailsProps} />;
-};
+import React, { useState, useEffect } from 'react';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import { Chat } from '../Chat';
+import { StyleSheet, View, BackHandler, TouchableOpacity } from 'react-native';
+import {
+  useLanguage,
+  OrderDetails as OrderDetailsController,
+  useSession,
+} from 'ordering-components/native';
+import { useUtils } from 'ordering-components/native';
+
+import { OIcon, OText } from '../shared';
+import { OrderDetailsParams } from '../../types';
+import { USER_TYPE } from '../../config/constants';
+import { useTheme } from 'styled-components/native';
+import Alert from '../../providers/AlertProvider';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export const OrderMessageUI = (props: OrderDetailsParams) => {
+  const {
+    navigation,
+    messages,
+    setMessages,
+    readMessages,
+    messagesReadList,
+    setOrders,
+  } = props;
+
+  const [{ optimizeImage }] = useUtils();
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [openModalForBusiness, setOpenModalForBusiness] = useState(true);
+  const [unreadAlert, setUnreadAlert] = useState({
+    business: false,
+    driver: false,
+  });
+  const { top } = useSafeAreaInsets();
+  const [{ user }] = useSession();
+  const { order, loading } = props.order;
+  const [alertState, setAlertState] = useState<{
+    open: boolean;
+    content: Array<string>;
+    key?: string | null;
+  }>({ open: false, content: [], key: null });
+
+  useEffect(() => {
+    if (order?.driver === null && user.level === 4) {
+      setAlertState({
+        open: true,
+        content: [
+          t(
+            'YOU_HAVE_BEEN_REMOVED_FROM_THE_ORDER',
+            'You have been removed from the order',
+          ),
+        ],
+        key: null,
+      });
+    }
+  }, [order?.driver]);
+
+  const handleArrowBack = (): boolean => {
+    if (order?.unread_count !== undefined) {
+      setOrders?.((prevOrders: any) => {
+        const { data } = prevOrders;
+
+        const updateOrder = data?.find((_order: any, index: number) => {
+          if (_order.id === order?.id) {
+            _order.unread_count = 0;
+            data.splice(index, 1, _order);
+            return true;
+          }
+
+          return false;
+        });
+
+        if (updateOrder) {
+          return { ...prevOrders, data };
+        }
+
+        return prevOrders;
+      });
+
+      readMessages?.();
+    }
+
+    navigation?.canGoBack() && navigation.goBack();
+
+    return true;
+  };
+
+  useEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
+
+    return () =>
+      BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
+  }, [order?.unread_count, messages?.messages]);
+
+  const backIfDriverDoesntExist = () => {
+    navigation?.canGoBack() && navigation.goBack();
+  };
+
+  useEffect(() => {
+    if (messagesReadList?.length) {
+      openModalForBusiness
+        ? setUnreadAlert({ ...unreadAlert, business: false })
+        : setUnreadAlert({ ...unreadAlert, driver: false });
+    }
+  }, [messagesReadList]);
+
+  const styles = StyleSheet.create({
+    titleSection: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 30,
+      paddingTop: 30,
+      paddingBottom: 25,
+      borderBottomWidth: 2,
+      borderBottomColor: '#e6e6e6',
+    },
+    titleGroups: {
+      alignItems: 'center',
+      flexDirection: 'row',
+    },
+    titleIcons: {
+      height: 33,
+      width: 33,
+      borderRadius: 7.6,
+      resizeMode: 'stretch',
+    },
+    shadow: {
+      height: 34,
+      width: 34,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: 15,
+      backgroundColor: theme.colors.clear,
+      paddingHorizontal: 3,
+      borderRadius: 7.6,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 3,
+    },
+    modalText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      color: theme.colors.textGray,
+      textAlign: 'center',
+      zIndex: 10,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginTop: 10
+    },
+  });
+
+  return (
+    <>
+      {(!order || Object.keys(order).length === 0 || loading) && (
+        <View
+          style={{
+            padding: 40,
+            flex: 1,
+            backgroundColor: theme.colors.backgroundLight,
+            justifyContent: 'space-between',
+          }}>
+          <Placeholder>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <PlaceholderLine width={40} />
+              <PlaceholderLine
+                width={20}
+                style={{
+                  marginLeft: 20,
+                  borderRadius: 50,
+                  width: 40,
+                  height: 40,
+                }}
+              />
+              <PlaceholderLine
+                width={20}
+                style={{
+                  marginLeft: 10,
+                  borderRadius: 50,
+                  width: 40,
+                  height: 40,
+                }}
+              />
+              <PlaceholderLine
+                width={20}
+                style={{
+                  marginLeft: 10,
+                  borderRadius: 50,
+                  width: 40,
+                  height: 40,
+                }}
+              />
+            </View>
+          </Placeholder>
+
+          <Placeholder>
+            <View style={{ flexDirection: 'column' }}>
+              <PlaceholderLine width={60} />
+              <PlaceholderLine width={40} />
+              <PlaceholderLine width={20} />
+              <PlaceholderLine width={20} />
+            </View>
+            <View
+              style={{
+                flexDirection: 'column',
+                justifyContent: 'flex-end',
+                alignItems: 'flex-end',
+              }}>
+              <PlaceholderLine width={60} />
+              <PlaceholderLine width={40} />
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <PlaceholderLine
+                width={20}
+                style={{
+                  marginLeft: 20,
+                  borderRadius: 50,
+                  width: 50,
+                  height: 50,
+                }}
+              />
+              <PlaceholderLine
+                width={20}
+                style={{
+                  marginLeft: 20,
+                  borderRadius: 50,
+                  width: 50,
+                  height: 50,
+                }}
+              />
+            </View>
+            <PlaceholderLine width={100} />
+            <PlaceholderLine
+              width={100}
+              style={{ borderRadius: 50, width: '100%', height: 30 }}
+            />
+          </Placeholder>
+        </View>
+      )}
+
+      {order && Object.keys(order).length > 0 && !loading && (
+        <>
+          <View style={styles.titleSection}>
+            <View style={styles.titleGroups}>
+              <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+                <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+              </TouchableOpacity>
+
+              <OText size={16} style={styles.modalText} adjustsFontSizeToFit>
+                {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order?.id}`}
+              </OText>
+            </View>
+
+            <View style={styles.titleGroups}>
+              <View style={styles.shadow}>
+                {!!order?.business?.logo ? (
+                  <OIcon
+                    url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
+                    style={styles.titleIcons}
+                  />
+                ) : (
+                  <OIcon
+                    src={theme.images.dummies.businessLogo}
+                    style={styles.titleIcons}
+                  />
+                )}
+              </View>
+
+              <View style={styles.shadow}>
+                <OIcon
+                  url={optimizeImage(
+                    order?.customer?.photo ||
+                    theme?.images?.dummies?.customerPhoto,
+                    'h_300,c_limit',
+                  )}
+                  style={styles.titleIcons}
+                />
+              </View>
+
+              {order?.driver && (
+                <View style={styles.shadow}>
+                  <OIcon
+                    url={
+                      optimizeImage(order?.driver?.photo, 'h_300,c_limit') ||
+                      theme?.images?.dummies?.driverPhoto
+                    }
+                    style={styles.titleIcons}
+                  />
+                </View>
+              )}
+            </View>
+          </View>
+
+          <Chat
+            type={openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER}
+            orderId={order?.id}
+            messages={messages}
+            order={order}
+            setMessages={setMessages}
+          />
+
+          <Alert
+            open={alertState.open}
+            onAccept={backIfDriverDoesntExist}
+            onClose={backIfDriverDoesntExist}
+            content={alertState.content}
+            title={t('ERROR', 'Error')}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export const OrderMessage = (props: OrderDetailsParams) => {
+  const orderDetailsProps = {
+    ...props,
+    driverAndBusinessId: true,
+    UIComponent: OrderMessageUI,
+  };
+  return <OrderDetailsController {...orderDetailsProps} />;
+};