ordering-ui-react-native 0.8.3 → 0.8.7

package/themes/business/src/components/OrderDetailsDelivery/styles.tsx

@@ -0,0 +1,144 @@
+import styled from 'styled-components/native';
+
+export const OrderDetailsContainer = styled.ScrollView`
+  flex: 1;
+  padding-horizontal: 20px;
+  margin-bottom: 50px;
+`;
+
+export const Pickup = styled.View`
+  padding-vertical: 10px;
+  margin-bottom: 20px;
+`;
+
+export const NavBack = styled.TouchableOpacity``;
+
+export const Header = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  padding-top: 10px;
+  padding-horizontal: 20px;
+`;
+
+export const DriverItem = styled.View`
+  padding: 15px;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  justify-content: ${(props: any) =>
+    props?.justifyContent ? props?.justifyContent : 'flex-start'};
+`;
+
+export const Actions = styled.View`
+  flex-direction: row;
+  justify-content: flex-end;
+`;
+
+export const Logo = styled.View`
+  margin-right: 20px;
+`;
+
+export const OrderContent = styled.View`
+  flex: 1;
+`;
+
+export const OrderHeader = styled.View`
+  padding-vertical: 10px;
+  border-bottom-width: 10px;
+  border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
+  padding-horizontal: 20px;
+`;
+
+export const OrderBusiness = styled.View`
+  position: relative;
+  bottom: 10px;
+  padding-vertical: 10px;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+export const Icons = styled.View`
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const OrderInfo = styled.View`
+  padding: 20px;
+  flex: 1;
+`;
+
+export const OrderData = styled.View`
+  flex: 1;
+`;
+
+export const OrderStatus = styled.View`
+  padding: 20px;
+  align-items: center;
+  width: 35%;
+  flex-wrap: wrap;
+`;
+
+export const StaturBar = styled.View``;
+
+export const StatusImage = styled.View``;
+
+export const SectionTitle = styled.View``;
+
+export const OrderCustomer = styled.View`
+  padding-vertical: 10px;
+  border-bottom-width: 10px;
+  border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
+`;
+
+export const OrderDriver = styled(OrderCustomer)``;
+
+export const Customer = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const CustomerPhoto = styled.View`
+  margin-right: 20px;
+`;
+
+export const InfoBlock = styled.View`
+  width: 70%;
+`;
+
+export const HeaderInfo = styled.View`
+  flex: 1;
+  width: 80%;
+`;
+
+export const OrderProducts = styled(OrderCustomer)``;
+
+export const Table = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  flex: 1;
+  align-items: center;
+`;
+
+export const OrderBill = styled.View`
+  padding-vertical: 10px;
+  flex: 1;
+`;
+
+export const Total = styled.View`
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.borderTops};
+  padding-vertical: 10px;
+`;
+
+export const Map = styled.View`
+  width: 100%;
+  height: 90%;
+  margin-top: 20px;
+  border-radius: 20px;
+`;
+
+export const AssignDriver = styled.View`
+  padding-vertical: 10px;
+  margin-bottom: 10px;
+`;

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

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { Chat } from '../Chat';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import {
   useLanguage,
   OrderDetails as OrderDetailsController,
 } from 'ordering-components/native';
-import { OrderMessageContainer } from './styles';
+import { useUtils } from 'ordering-components/native';
 
-import { OModal } from '../shared';
+import { OIcon, OIconButton, OText } from '../shared';
 import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
@@ -23,6 +23,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
     setOrders,
   } = props;
 
+  const [{ optimizeImage }] = useUtils();
   const theme = useTheme();
   const [, t] = useLanguage();
   const [openModalForBusiness, setOpenModalForBusiness] = useState(true);
@@ -32,9 +33,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
   });
   const { order, loading } = props.order;
 
-  const handleCloseModal = () => {
-    setOpenModalForBusiness(false);
-
+  const handleArrowBack = () => {
     if (order?.unread_count !== undefined) {
       setOrders &&
         setOrders((prevOrders: any) => {
@@ -72,6 +71,60 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
     }
   }, [messagesReadList]);
 
+  const styles = StyleSheet.create({
+    titleSection: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      height: 45,
+      borderBottomWidth: 2,
+      borderBottomColor: '#e6e6e6',
+    },
+    titleGroups: {
+      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) && (
@@ -166,24 +219,70 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       )}
 
       {order && Object.keys(order).length > 0 && !loading && (
-        <OrderMessageContainer keyboardShouldPersistTaps="handled">
-          <OModal
-            open={openModalForBusiness}
+        <>
+          <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}
-            title={`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id}`}
-            entireModal
-            onClose={() => handleCloseModal()}>
-            <Chat
-              type={
-                openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER
-              }
-              orderId={order?.id}
-              messages={messages}
-              order={order}
-              setMessages={setMessages}
-            />
-          </OModal>
-        </OrderMessageContainer>
+            setMessages={setMessages}
+          />
+        </>
       )}
     </>
   );

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

@@ -12,7 +12,6 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { OText, OIconButton, OButton } from '../shared';
 import { PreviousOrders } from '../PreviousOrders';
 import { NotFoundSource } from '../NotFoundSource';
-import { useFocusEffect } from '@react-navigation/native';
 import { FiltersTab, TabsContainer, Tag } from './styles';
 import { OrdersOptionParams } from '../../types';
 
@@ -131,7 +130,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [tabsFilter, setTabsFilter] = useState(tabs[0].tags);
   const [tagsFilter, setTagsFilter] = useState(tabs[0].tags);
   const [loadingTag, setLoadingTag] = useState(false);
-  const [isLoadingFirstRender, setIsLoadingFirstRender] = useState(false);
   const [reload, setReload] = useState(false);
   const [orientation, setOrientation] = useState(
     Dimensions.get('window').width < Dimensions.get('window').height
@@ -142,16 +140,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
   );
 
-  useFocusEffect(
-    React.useCallback(() => {
-      loadOrders && loadOrders(true, rememberOrderStatus);
-      setIsLoadingFirstRender(false);
-      return () => {
-        setIsLoadingFirstRender(true);
-      };
-    }, [navigation, rememberOrderStatus]),
-  );
-
   const handleChangeTab = (tags: number[]) => {
     setTabsFilter(tags);
     setRememberOrderStatus(tags);
@@ -276,7 +264,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       paddingRight: 8,
     },
     tagsContainer: {
-      marginBottom: 25,
+      marginBottom: 10,
     },
     tag: {
       fontFamily: 'Poppins',
@@ -292,7 +280,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     loadButton: {
       borderRadius: 7.6,
       height: 44,
-      marginBottom: 40,
+      marginRight: 10,
+      marginBottom: 10,
       marginTop: 5,
     },
     loadButtonText: {
@@ -408,11 +397,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         />
       )}
 
-      {!reload &&
-        !error &&
-        orders.length > 0 &&
-        !loadingTag &&
-        !isLoadingFirstRender && (
+      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+        {!reload && !error && orders.length > 0 && !loadingTag && (
           <PreviousOrders
             orders={ordersToShow}
             onNavigationRedirect={onNavigationRedirect}
@@ -420,54 +406,54 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         )}
 
-      {(loading || isLoadingFirstRender) && (
-        <>
-          <View>
-            {[...Array(5)].map((item, i) => (
-              <Placeholder key={i} Animation={Fade}>
-                <View
-                  style={{
-                    width: '100%',
-                    flexDirection: 'row',
-                    marginBottom: 10,
-                  }}>
-                  <PlaceholderLine
-                    width={orientation === 'Portrait' ? 22 : 11}
-                    height={74}
+        {loading && (
+          <>
+            <View>
+              {[...Array(5)].map((item, i) => (
+                <Placeholder key={i} Animation={Fade}>
+                  <View
                     style={{
-                      marginRight: 20,
-                      marginBottom: 20,
-                      borderRadius: 7.6,
-                    }}
-                  />
-                  <Placeholder>
-                    <PlaceholderLine width={30} style={{ marginTop: 5 }} />
-                    <PlaceholderLine width={50} />
-                    <PlaceholderLine width={20} />
-                  </Placeholder>
-                </View>
-              </Placeholder>
-            ))}
-          </View>
-        </>
-      )}
-
-      {!!tagsFilter.length &&
-        pagination.totalPages &&
-        !loading &&
-        !!orders.length &&
-        !isLoadingFirstRender &&
-        pagination.currentPage < pagination.totalPages && (
-          <OButton
-            onClick={handleLoadMore}
-            text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-            imgRightSrc={null}
-            textStyle={styles.loadButtonText}
-            style={styles.loadButton}
-            bgColor={theme.colors.primary}
-            borderColor={theme.colors.primary}
-          />
+                      width: '100%',
+                      flexDirection: 'row',
+                      marginBottom: 10,
+                    }}>
+                    <PlaceholderLine
+                      width={orientation === 'Portrait' ? 22 : 11}
+                      height={74}
+                      style={{
+                        marginRight: 20,
+                        marginBottom: 20,
+                        borderRadius: 7.6,
+                      }}
+                    />
+                    <Placeholder>
+                      <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                      <PlaceholderLine width={50} />
+                      <PlaceholderLine width={20} />
+                    </Placeholder>
+                  </View>
+                </Placeholder>
+              ))}
+            </View>
+          </>
         )}
+
+        {!!tagsFilter.length &&
+          pagination.totalPages &&
+          !loading &&
+          !!orders.length &&
+          pagination.currentPage < pagination.totalPages && (
+            <OButton
+              onClick={handleLoadMore}
+              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+              imgRightSrc={null}
+              textStyle={styles.loadButtonText}
+              style={styles.loadButton}
+              bgColor={theme.colors.primary}
+              borderColor={theme.colors.primary}
+            />
+          )}
+      </ScrollView>
     </>
   );
 };
@@ -483,7 +469,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 6,
+      pageSize: 45,
       controlType: 'infinity',
     },
 

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

@@ -236,7 +236,7 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
   });
 
   return (
-    <ScrollView style={{ height: '80%' }}>
+    <>
       {orders?.length > 0 &&
         orders?.map((order: any) => (
           <TouchableOpacity
@@ -292,6 +292,6 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
             </Card>
           </TouchableOpacity>
         ))}
-    </ScrollView>
+    </>
   );
 };

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

@@ -13,9 +13,9 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
 
-  const handlePressOrder = (uuid: string) => {
+  const handlePressOrder = (order: any) => {
     onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { orderId: uuid });
+      onNavigationRedirect('OrderDetails', { order: order });
   };
 
   const styles = StyleSheet.create({
@@ -64,12 +64,12 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
   });
 
   return (
-    <ScrollView style={{ height: '80%' }}>
+    <>
       {orders?.length > 0 &&
         orders?.map((order: any) => (
           <TouchableOpacity
             key={order.id}
-            onPress={() => handlePressOrder(order.id)}
+            onPress={() => handlePressOrder(order)}
             style={styles.cardButton}
             activeOpacity={1}>
             <Card key={order.id}>
@@ -121,6 +121,6 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
             </Card>
           </TouchableOpacity>
         ))}
-    </ScrollView>
+    </>
   );
 };

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

@@ -129,7 +129,11 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
               }}>
               <View style={{ flexDirection: 'row' }}>
                 <OText size={12} color={theme.colors.textGray}>
-                  {parsePrice(product.total || product.price)}
+                  {parsePrice(
+                    typeof product.total === 'number'
+                      ? product.total
+                      : product.price,
+                  )}
                 </OText>
 
                 {(productInfo().ingredients.length > 0 ||