ordering-ui-react-native 0.12.18 → 0.12.19

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

@@ -1,344 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { Chat } from '../Chat';
-import { StyleSheet, View, BackHandler } from 'react-native';
-import {
-  useLanguage,
-  OrderDetails as OrderDetailsController,
-  useSession,
-} from 'ordering-components/native';
-import { useUtils } from 'ordering-components/native';
-
-import { OIcon, OIconButton, 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,
-    },
-    cancelBtn: {
-      marginRight: 5,
-      zIndex: 10000,
-      height: 30,
-      width: 20,
-      justifyContent: 'flex-end',
-    },
-    modalText: {
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: '600',
-      color: theme.colors.textGray,
-      textAlign: 'center',
-      zIndex: 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}>
-              <OIconButton
-                icon={theme.images.general.arrow_left}
-                iconStyle={{ width: 23, height: 23 }}
-                borderColor={theme.colors.clear}
-                style={styles.cancelBtn}
-                onClick={handleArrowBack}
-              />
-
-              <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} />;
-};

package/themes/business/src/components 2/OrderMessage/styles.tsx

@@ -1,5 +0,0 @@
-import styled from 'styled-components/native';
-
-export const OrderMessageContainer = styled.ScrollView`
-  flex: 1;
-`;