ordering-ui-react-native 0.8.3 → 0.8.7

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

@@ -1,5 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { View, Pressable, StyleSheet, Dimensions } from 'react-native';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
 import { Contacts, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -152,7 +158,8 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     loadButton: {
       borderRadius: 7.6,
       height: 44,
-      marginBottom: 40,
+      marginRight: 10,
+      marginBottom: 10,
       marginTop: 5,
     },
     loadButtonText: {
@@ -240,19 +247,20 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
         />
       )}
 
-      {!reload &&
-        !error &&
-        values.length > 0 &&
-        JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
-          <PreviousMessages
-            orders={values}
-            setOrders={setOrders}
-            messages={messages}
-            onNavigationRedirect={onNavigationRedirect}
-          />
-        )}
+      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+        {!reload &&
+          !error &&
+          values.length > 0 &&
+          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
+            <PreviousMessages
+              orders={values}
+              setOrders={setOrders}
+              messages={messages}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
 
-      {/* {!reload &&
+        {/* {!reload &&
         !error &&
         orders.length > 0 &&
         JSON.stringify(tabsFilter) === JSON.stringify(tabs[1].tags) && (
@@ -266,53 +274,54 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
           />
         )} */}
 
-      {(loading || reload) && (
-        <>
-          <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 || reload) && (
+          <>
+            <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>
-        </>
-      )}
-
-      {pagination?.totalPages &&
-        !loading &&
-        !reload &&
-        JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
-        pagination?.currentPage < pagination?.totalPages && (
-          <OButton
-            onClick={() => loadMore && loadMore()}
-            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>
+          </>
         )}
+
+        {pagination?.totalPages &&
+          !loading &&
+          !reload &&
+          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
+          pagination?.currentPage < pagination?.totalPages && (
+            <OButton
+              onClick={() => loadMore && loadMore()}
+              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>
     </>
   );
 };
@@ -325,6 +334,11 @@ export const MessagesOption = (props: MessagesOptionParams) => {
       param: 'last_direct_message_at',
       direction: 'asc',
     },
+    paginationSettings: {
+      page: 1,
+      pageSize: 45,
+      controlType: 'infinity',
+    },
     UIComponent: MessagesOptionUI,
   };
 

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

@@ -10,7 +10,7 @@ export const TabsContainer = styled.View`
 `;
 
 export const TagsContainer = styled.ScrollView`
-  margin-bottom: 25px;
+  margin-bottom: 10px;
 `;
 
 export const Tag = styled.Pressable`

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

@@ -1,5 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
@@ -66,7 +71,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     business: false,
     driver: false,
   });
-  const { order, businessData, driversGroupsData, loading } = props.order;
+  const { order, businessData, loading } = props.order;
+  const { drivers, loadingDriver } = props.drivers;
   const itemsDrivers: any = [];
   const [actionOrder, setActionOrder] = useState('');
   const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
@@ -75,8 +81,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [isDriverModalVisible, setIsDriverModalVisible] = useState(false);
 
   if (order?.status === 7 || order?.status === 4) {
-    if (driversGroupsData?.length > 0) {
-      driversGroupsData.forEach((driver: any) => {
+    if (drivers?.length > 0 && drivers) {
+      drivers.forEach((driver: any) => {
         itemsDrivers.push({
           available: driver?.available,
           key: driver?.id,
@@ -86,9 +92,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       });
 
       if (
-        !driversGroupsData?.some(
-          (driver: any) => driver?.id === order?.driver?.id,
-        ) &&
+        !drivers?.some((driver: any) => driver?.id === order?.driver?.id) &&
         order?.driver?.id
       ) {
         itemsDrivers.push({
@@ -100,10 +104,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       }
     }
 
-    if (
-      order?.driver &&
-      (!driversGroupsData.length || driversGroupsData.length === 0)
-    ) {
+    if (order?.driver && (!drivers?.length || drivers?.length === 0)) {
       itemsDrivers.push({
         available: order?.driver?.available,
         key: order?.driver?.id,
@@ -403,11 +404,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       icon:
         order?.driver?.photo ||
         'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png',
+      level: 4,
     },
     {
       ...order?.business?.location,
       title: order?.business?.name,
       icon: order?.business?.logo || theme.images.dummies.businessLogo,
+      level: 2,
     },
     {
       ...order?.customer?.location,
@@ -415,6 +418,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       icon:
         order?.customer?.photo ||
         'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',
+      level: 3,
     },
   ];
 
@@ -423,10 +427,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       setOpenModalForAccept(false);
     }
 
-    if (openModalForBusiness) {
-      setOpenModalForBusiness(false);
-    }
-
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }
@@ -438,7 +438,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   useEffect(() => {
     if (driverLocation) {
-      locations[0] = driverLocation;
+      locations[0] = { ...locations[0], driverLocation };
     }
   }, [driverLocation]);
 
@@ -487,7 +487,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   return (
     <>
-      {(!order || Object.keys(order).length === 0 || loading) && (
+      {(!order || Object.keys(order).length === 0) && (
         <View
           style={{
             padding: 20,
@@ -508,70 +508,68 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         </View>
       )}
 
-      {order && Object.keys(order).length > 0 && !loading && (
+      {order && Object.keys(order).length > 0 && (
         <>
+          <Header>
+            <OIconButton
+              icon={theme.images.general.arrow_left}
+              iconStyle={{ width: 20, height: 20 }}
+              borderColor={theme.colors.clear}
+              style={{ ...styles.icons, justifyContent: 'flex-end' }}
+              onClick={() => handleArrowBack()}
+            />
+
+            <Actions>
+              <OIconButton
+                icon={theme.images.general.map}
+                iconStyle={{
+                  width: 20,
+                  height: 20,
+                  tintColor: theme.colors.backArrow,
+                }}
+                borderColor={theme.colors.clear}
+                style={styles.icons}
+                onClick={() => handleOpenMapView()}
+              />
+
+              <OIconButton
+                icon={theme.images.general.messages}
+                iconStyle={{
+                  width: 20,
+                  height: 20,
+                  tintColor: theme.colors.backArrow,
+                }}
+                borderColor={theme.colors.clear}
+                style={styles.icons}
+                onClick={() => handleOpenMessagesForBusiness()}
+              />
+            </Actions>
+          </Header>
+          <OrderHeader>
+            <OText size={13} style={{ marginBottom: 5 }}>
+              {order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc)
+                : parseDate(order?.delivery_datetime, { utc: false })}
+            </OText>
+
+            <OText numberOfLines={2} size={20} weight="600">
+              <>
+                {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} ${t(
+                  'IS',
+                  'is',
+                )} `}
+                <OText
+                  size={20}
+                  weight="600"
+                  color={colors[order?.status] || theme.colors.primary}>
+                  {getOrderStatus(order?.status)?.value}
+                </OText>
+              </>
+            </OText>
+          </OrderHeader>
           <OrderDetailsContainer keyboardShouldPersistTaps="handled">
             <>
-              <Header>
-                <OIconButton
-                  icon={theme.images.general.arrow_left}
-                  iconStyle={{ width: 20, height: 20 }}
-                  borderColor={theme.colors.clear}
-                  style={{ ...styles.icons, justifyContent: 'flex-end' }}
-                  onClick={() => handleArrowBack()}
-                />
-
-                <Actions>
-                  <OIconButton
-                    icon={theme.images.general.map}
-                    iconStyle={{
-                      width: 20,
-                      height: 20,
-                      tintColor: theme.colors.backArrow,
-                    }}
-                    borderColor={theme.colors.clear}
-                    style={styles.icons}
-                    onClick={() => handleOpenMapView()}
-                  />
-
-                  <OIconButton
-                    icon={theme.images.general.messages}
-                    iconStyle={{
-                      width: 20,
-                      height: 20,
-                      tintColor: theme.colors.backArrow,
-                    }}
-                    borderColor={theme.colors.clear}
-                    style={styles.icons}
-                    onClick={() => handleOpenMessagesForBusiness()}
-                  />
-                </Actions>
-              </Header>
-
               <OrderContent>
-                <OrderHeader>
-                  <OText size={13} style={{ marginBottom: 5 }}>
-                    {order?.delivery_datetime_utc
-                      ? parseDate(order?.delivery_datetime_utc)
-                      : parseDate(order?.delivery_datetime, { utc: false })}
-                  </OText>
-
-                  <OText numberOfLines={2} size={20} weight="600">
-                    <>
-                      {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} ${t(
-                        'IS',
-                        'is',
-                      )} `}
-                      <OText
-                        size={20}
-                        weight="600"
-                        color={colors[order?.status] || theme.colors.primary}>
-                        {getOrderStatus(order?.status)?.value}
-                      </OText>
-                    </>
-                  </OText>
-                </OrderHeader>
-
                 <OrderBusiness>
                   <OText style={{ marginBottom: 5 }} size={16} weight="600">
                     {t('BUSINESS_DETAILS', 'Business details')}
@@ -761,21 +759,32 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           <>
                             <TouchableOpacity
                               onPress={() => setIsDriverModalVisible(true)}
-                              disabled={itemsDrivers.length === 0}>
-                              <DriverItem justifyContent="space-between">
-                                <OText>
-                                  {itemsDrivers.length > 0
-                                    ? order?.driver?.name ||
-                                      t('SELECT_DRIVER', 'Select Driver')
-                                    : t('WITHOUT_DRIVERS', 'Without drivers')}
-                                </OText>
-                                <OIcon
-                                  src={theme?.images?.general?.chevronDown}
-                                  color={theme.colors.backArrow}
-                                  width={20}
-                                  height={20}
-                                />
-                              </DriverItem>
+                              disabled={
+                                itemsDrivers.length === 0 || loadingDriver
+                              }>
+                              {loadingDriver ? (
+                                <DriverItem justifyContent="center">
+                                  <ActivityIndicator
+                                    size="small"
+                                    color={theme.colors.primary}
+                                  />
+                                </DriverItem>
+                              ) : (
+                                <DriverItem justifyContent="space-between">
+                                  <OText>
+                                    {itemsDrivers.length > 0
+                                      ? order?.driver?.name ||
+                                        t('SELECT_DRIVER', 'Select Driver')
+                                      : t('WITHOUT_DRIVERS', 'Without drivers')}
+                                  </OText>
+                                  <OIcon
+                                    src={theme?.images?.general?.chevronDown}
+                                    color={theme.colors.backArrow}
+                                    width={20}
+                                    height={20}
+                                  />
+                                </DriverItem>
+                              )}
                             </TouchableOpacity>
                           </>
                         )}
@@ -890,6 +899,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <GoogleMap
                   location={order?.customer?.location}
                   locations={locationsToSend}
+                  driverLocation={driverLocation}
                   navigation={navigation}
                   handleViewActionOrder={handleViewActionOrder}
                   handleOpenMapView={handleOpenMapView}
@@ -910,6 +920,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <>
                 <FloatingButton
                   btnText={t('REJECT', 'Reject')}
+                  disabled={loading}
                   isSecondaryBtn={false}
                   secondButtonClick={() => handleViewActionOrder('accept')}
                   firstButtonClick={() => handleViewActionOrder('reject')}
@@ -928,6 +939,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <FloatingButton
                 btnText={t('COPY', 'Copy')}
                 isSecondaryBtn={false}
+                disabled={loading}
                 colorTxt1={theme.colors.primary}
                 secondButtonClick={handleViewSummaryOrder}
                 firstButtonClick={handleCopyClipboard}

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

@@ -17,6 +17,7 @@ export const Header = styled.View`
   flex-direction: row;
   justify-content: space-between;
   padding-top: 10px;
+  padding-horizontal: 20px;
 `;
 
 export const DriverItem = styled.View`
@@ -37,12 +38,15 @@ export const Logo = styled.View`
   margin-right: 20px;
 `;
 
-export const OrderContent = styled.View``;
+export const OrderContent = styled.View`
+  flex: 1;
+`;
 
 export const OrderHeader = styled.View`
   padding-vertical: 10px;
-  border-bottom-width: 20px;
+  border-bottom-width: 10px;
   border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
+  padding-horizontal: 20px;
 `;
 
 export const OrderBusiness = styled.View`