ordering-ui-react-native 0.16.98 → 0.16.99-release

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

@@ -0,0 +1,195 @@
+//React & React Native
+import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
+
+// Thirds
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+
+//OrderingComponent
+import {
+    useLanguage,
+    OrderDetails as OrderDetailsConTableoller,
+    useSession,
+} from 'ordering-components/native';
+
+//Components
+import Alert from '../../providers/AlertProvider';
+import { FloatingButton } from '../FloatingButton';
+import { OrderDetailsLogisticParams } from '../../types';
+import { useTheme } from 'styled-components/native';
+import { NotFoundSource } from '../NotFoundSource';
+import { getOrderStatus } from '../../utils';
+import { OrderHeaderComponent } from '../OrderDetails/OrderHeaderComponent';
+import { OrderContentComponent } from '../OrderDetails/OrderContentComponent';
+//Styles
+import { OrderDetailsContainer } from './styles';
+
+export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
+    const {
+        navigation,
+        handleClickLogisticOrder,
+        orderAssingId,
+    } = props;
+    const { order } = props.order
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    const [session] = useSession();
+    const [alertState, setAlertState] = useState<{
+        open: boolean;
+        content: Array<string>;
+        key?: string | null;
+    }>({ open: false, content: [], key: null });
+
+    const logisticOrderStatus = [4, 6, 7]
+
+    const showFloatButtonsAcceptOrReject: any = {
+        0: true,
+        4: true,
+        7: true,
+        14: true
+    };
+
+    const handleArrowBack: any = () => {
+        navigation?.canGoBack() && navigation.goBack();
+    };
+
+    const handleRejectLogisticOrder = (order: any) => {
+        handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id, order)
+        handleArrowBack()
+    }
+
+    const handleAcceptLogisticOrder = (order: any) => {
+        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id, order)
+        handleArrowBack()
+    }
+
+    useEffect(() => {
+        if (order?.driver === null && session?.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 OrderDetailsInformation = (props: { order: any, isOrderGroup?: boolean, lastOrder?: boolean }) => {
+        const {
+            order,
+            isOrderGroup,
+            lastOrder,
+        } = props
+        return (
+            <>
+                <OrderContentComponent
+                    order={order}
+                    logisticOrderStatus={logisticOrderStatus}
+                    isOrderGroup={isOrderGroup}
+                    lastOrder={lastOrder}
+                />
+                <View
+                    style={{
+                        height:
+                            order?.status === 8 && order?.delivery_type === 1 ? 50 : 35,
+                    }}
+                />
+
+            </>
+        )
+    }
+
+    return (
+        <>
+            {(!order || Object.keys(order).length === 0) &&
+                (props.order?.error?.length < 1 || !props.order?.error) && (
+                    <View style={{ flex: 1 }}>
+                        {[...Array(6)].map((item, i) => (
+                            <Placeholder key={i} Animation={Fade}>
+                                <View style={{ flexDirection: 'row', paddingVertical: 20 }}>
+                                    <Placeholder>
+                                        <PlaceholderLine width={100} />
+                                        <PlaceholderLine width={70} />
+                                        <PlaceholderLine width={30} />
+                                        <PlaceholderLine width={20} />
+                                    </Placeholder>
+                                </View>
+                            </Placeholder>
+                        ))}
+                    </View>
+                )}
+
+            {(!!props.order?.error || props.order?.error) && (
+                <NotFoundSource
+                    btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
+                    content={
+                        props.order.error[0] ||
+                        props.order.error ||
+                        t('NETWORK_ERROR', 'Network Error')
+                    }
+                    onClickButton={() => navigation.navigate('Orders')}
+                />
+            )}
+            {!((!order || Object.keys(order).length === 0) &&
+                (props.order?.error?.length < 1 || !props.order?.error)) && (
+                    <View style={{ flex: 1 }}>
+                        <OrderHeaderComponent
+                            order={order}
+                            getOrderStatus={getOrderStatus}
+                            handleArrowBack={handleArrowBack}
+                            logisticOrderStatus={logisticOrderStatus}
+                        />
+                        {order && Object.keys(order).length > 0 && (props.order?.error?.length < 1 || !props.order?.error) && (
+                            <>
+                                <OrderDetailsContainer
+                                    keyboardShouldPersistTaps="handled"
+                                    showsVerticalScrollIndicator={false}
+                                >
+                                    {order?.order_group && order?.order_group_id && order?.isLogistic ? order?.order_group?.orders.map((order: any, i: number, hash: any) => (
+                                        <OrderDetailsInformation key={order?.id} order={order} isOrderGroup lastOrder={hash?.length === i + 1} />
+                                    )) : (
+                                        <OrderDetailsInformation order={order} />
+                                    )}
+                                </OrderDetailsContainer>
+
+                                {showFloatButtonsAcceptOrReject[order?.status] && (
+                                    <FloatingButton
+                                        btnText={t('REJECT', 'Reject')}
+                                        isSecondaryBtn={false}
+                                        secondButtonClick={() => handleAcceptLogisticOrder(order)}
+                                        firstButtonClick={() => handleRejectLogisticOrder(order)}
+                                        secondBtnText={t('ACCEPT', 'Accept')}
+                                        secondButton={true}
+                                        firstColorCustom={theme.colors.red}
+                                        secondColorCustom={theme.colors.green}
+                                        widthButton={'45%'}
+                                    />
+                                )}
+                            </>
+                        )}
+                    </View>
+                )}
+            {alertState?.open && (
+                <Alert
+                    open={alertState.open}
+                    onAccept={handleArrowBack}
+                    onClose={handleArrowBack}
+                    content={alertState.content}
+                    title={t('WARNING', 'Warning')}
+                />
+            )}
+        </>
+    );
+};
+
+export const OrderDetailsLogistic = (props: OrderDetailsLogisticParams) => {
+    const orderDetailsProps = {
+        ...props,
+        UIComponent: OrderDetailsLogisticUI,
+    };
+    return <OrderDetailsConTableoller {...orderDetailsProps} />;
+};

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

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

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

@@ -1,7 +1,7 @@
 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 { StyleSheet, View, BackHandler, TouchableOpacity } from 'react-native';
 import {
   useLanguage,
   OrderDetails as OrderDetailsController,
@@ -9,7 +9,7 @@ import {
 } from 'ordering-components/native';
 import { useUtils } from 'ordering-components/native';
 
-import { OIcon, OIconButton, OText } from '../shared';
+import { OIcon, OText } from '../shared';
 import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { useTheme } from 'styled-components/native';
@@ -146,13 +146,6 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       shadowRadius: 3.84,
       elevation: 3,
     },
-    cancelBtn: {
-      marginRight: 5,
-      zIndex: 10000,
-      height: 30,
-      width: 20,
-      justifyContent: 'flex-end',
-    },
     modalText: {
       fontFamily: 'Poppins',
       fontStyle: 'normal',
@@ -161,6 +154,18 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
       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 (
@@ -260,13 +265,9 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
         <>
           <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}
-              />
+              <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}`}
@@ -292,7 +293,7 @@ export const OrderMessageUI = (props: OrderDetailsParams) => {
                 <OIcon
                   url={optimizeImage(
                     order?.customer?.photo ||
-                      theme?.images?.dummies?.customerPhoto,
+                    theme?.images?.dummies?.customerPhoto,
                     'h_300,c_limit',
                   )}
                   style={styles.titleIcons}

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform, TextInput } from 'react-native';
-import { useLanguage, useUtils, useToast, ToastType, OrderListGroups, useConfig } from 'ordering-components/native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity } from 'react-native';
+import { useLanguage, useUtils, useToast, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -20,7 +20,6 @@ import {
   IconWrapper,
   ModalContainer,
   ModalTitle,
-  FilterBtnWrapper,
   TabPressable,
   OrderStatus,
   SlaOption,
@@ -34,42 +33,17 @@ import {
   ItemContent,
   TimerInputWrapper,
   OverLine,
-  Actions,
   InputContainer
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
 
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import GestureRecognizer from 'react-native-swipe-gestures';
-import ODropDown from '../shared/ODropDown';
-import { OrdersOptionStatus } from '../OrdersOptionStatus'
 import { OrdersOptionCity } from '../OrdersOptionCity';
 import { OrdersOptionBusiness } from '../OrdersOptionBusiness';
 import { OrdersOptionDelivery } from '../OrdersOptionDelivery';
 import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
 import { OrdersOptionDriver } from '../OrdersOptionDriver';
 import { OrdersOptionDate } from '../OrdersOptionDate';
-import { GestureEvent, GestureDetector } from 'react-native-gesture-handler'
-const tabsList: any = {
-  pending: 1,
-  inProgress: 2,
-  completed: 3,
-  cancelled: 4
-};
-
-const tabsListText: any = {
-  1: 'pending',
-  2: 'inProgress',
-  3: 'completed',
-  4: 'cancelled'
-};
-
-const swipeConfig = {
-  velocityThreshold: 0.3,
-  directionalOffsetThreshold: 80
-};
-
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
@@ -81,10 +55,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     ordersGroup,
     setOrdersGroup,
     orderStatus,
+    ordersFormatted,
     loadOrders,
     loadMoreOrders,
     onNavigationRedirect,
-    filtered,
     onFiltered,
     handleClickOrder,
     isBusinessApp,
@@ -92,7 +66,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     logisticOrders,
     loadLogisticOrders,
     isLogisticActivated,
-    isAlsea
+    isAlsea,
+    handleChangeOrderStatus,
+    handleSendCustomerReview
   } = props;
 
   const defaultSearchList = {
@@ -122,7 +98,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [slaSettingTime, setSlaSettingTime] = useState(6000)
   const [currentDeliveryType, setCurrentDeliveryType] = useState('Delivery')
   const [search, setSearch] = useState(defaultSearchList)
-  const [selectedTabStatus, setSelectedTabStatus] = useState([])
+  const [selectedTabStatus, setSelectedTabStatus] = useState<any>([])
   const [hour, setHour] = useState(0)
   const [minute, setMinute] = useState(0)
   const [openedSelect, setOpenedSelect] = useState('')
@@ -263,6 +239,19 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       overflow: 'hidden',
       minHeight: 155
     },
+    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,
+      marginBottom: 30,
+      marginTop: 30
+    },
     rowStyle: {
       display: 'flex',
       borderBottomWidth: 0,
@@ -346,26 +335,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     })
   }
 
-  const onSwipeLeft = () => {
-    let currentTab = tabsList[currentTabSelected]
-    currentTab = currentTab >= 4 ? null : currentTab + 1
-
-    if (!currentTab) return
-
-    const nextTab = tabsListText[currentTab]
-    nextTab && setCurrentTabSelected(nextTab)
-  }
-
-  const onSwipeRight = () => {
-    let currentTab = tabsList[currentTabSelected]
-    currentTab = currentTab <= 1 ? null : currentTab - 1
-
-    if (!currentTab) return
-
-    const nextTab = tabsListText[currentTab]
-    nextTab && setCurrentTabSelected(nextTab)
-  }
-
   const calculateDate = (type: any, from: any, to: any) => {
     switch (type) {
       case 'today':
@@ -413,19 +382,14 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     scrollRefTab.current?.scrollTo({ animated: true });
     scrollListRef.current?.scrollTo({ animated: true });
     scrollRef.current?.scrollTo({ y: 0, animated: true });
+    setTags({ values: [] })
   }, [currentTabSelected])
 
   useEffect(() => {
     setSelectedTabStatus(deliveryStatus)
   }, [])
-  
+
   return (
-    // <GestureRecognizer
-    //   onSwipeLeft={onSwipeLeft}
-    //   onSwipeRight={onSwipeRight}
-    //   config={swipeConfig}
-    //   style={{ flex: 1 }}
-    // >
     <>
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
@@ -634,12 +598,18 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             currentTabSelected !== 'logisticOrders' &&
             (
               <PreviousOrders
-                orders={currentOrdersGroup?.orders}
+                orders={ordersFormatted}
+                navigation={props.navigation}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
                 slaSettingTime={slaSettingTime}
                 currentTabSelected={currentTabSelected}
+                appTitle={props.orderDetailsProps?.appTitle}
+                actions={props.orderDetailsProps?.actions}
+                orderTitle={props.orderDetailsProps?.orderTitle}
+                handleChangeOrderStatus={handleChangeOrderStatus}
+                handleSendCustomerReview={handleSendCustomerReview}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -729,7 +699,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             )}
         </ScrollView>
       </View>
-      {/* </GestureRecognizer> */}
 
       {isBusinessApp && (
         <NewOrderNotification isBusinessApp={isBusinessApp} />
@@ -740,20 +709,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           <ModalContainer
             nestedScrollEnabled={true}
           >
-            <OIconButton
-              icon={theme.images.general.arrow_left}
-              borderColor={theme.colors.clear}
-              iconColor={theme.colors.backArrow}
-              iconStyle={{ width: 20, height: 13 }}
-              style={{
-                maxWidth: 40,
-                height: 35,
-                justifyContent: 'flex-end',
-                marginBottom: 30,
-                marginTop: 30
-              }}
-              onClick={() => handleClose()}
-            />
+            <TouchableOpacity onPress={() => handleClose()} style={styles.btnBackArrow}>
+              <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+            </TouchableOpacity>
             {openSearchModal && (
               <SearchModalContent>
                 <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
@@ -883,7 +841,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                   </ScrollView>
                 </FiltersTab>
                 <DeliveryStatusWrapper>
-                  {selectedTabStatus && selectedTabStatus.length > 0 && selectedTabStatus.map((item, i) => (
+                  {selectedTabStatus && selectedTabStatus.length > 0 && selectedTabStatus.map((item: any, i: number) => (
                     <StatusBlock
                       key={i}
                       item={item}

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

@@ -28,7 +28,7 @@ export const OrdersOptionBusinessUI = (props: any) => {
   }, [businessesList?.businesses])
 
   const handleClear = () => {
-    onSearch({ ...search, option: '' })
+    onSearch({ ...search, business: '' })
   }
 
   const handleOpenSelect = () => {

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

@@ -176,17 +176,17 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
         slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
         percentage: 95,
       },
-      { 
-        key: 22, 
-        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), 
-        slug: 'ORDER_LOOKING_FOR_DRIVER', 
+      {
+        key: 22,
+        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
+        slug: 'ORDER_LOOKING_FOR_DRIVER',
         percentage: 35
       },
-      { 
-        key: 23, 
-        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), 
-        slug: 'ORDER_DRIVER_ON_WAY', 
-        percentage: 45 
+      {
+        key: 23,
+        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+        slug: 'ORDER_DRIVER_ON_WAY',
+        percentage: 45
       }
     ];
 
@@ -266,15 +266,13 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
             style={styles.cardButton}
             activeOpacity={1}>
             <Card key={order?.id}>
-              {!!order?.business?.logo && (
-                <Logo style={styles.logo}>
-                  <OIcon
-                    url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                    style={styles.icon}
-                  />
-                </Logo>
-              )}
-
+              <Logo style={styles.logo}>
+                <OIcon
+                  url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
+                  src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
+                  style={styles.icon}
+                />
+              </Logo>
               <Information>
                 <Header>
                   <OText numberOfLines={1} style={styles.title}>