ordering-ui-react-native 0.12.33 → 0.12.34

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

@@ -26,11 +26,19 @@ interface OrderHeader {
   handleArrowBack?: any,
   handleOpenMapView?: any,
   handleOpenMessagesForBusiness?: any,
-  getOrderStatus?: any
+  getOrderStatus?: any,
+  logisticOrderStatus?: Array<number>
 }
 
 export const OrderHeaderComponent = (props: OrderHeader) => {
-  const { order, handleArrowBack, handleOpenMapView, handleOpenMessagesForBusiness, getOrderStatus  } = props
+  const {
+    order,
+    handleArrowBack,
+    handleOpenMapView,
+    handleOpenMessagesForBusiness,
+    getOrderStatus,
+    logisticOrderStatus
+  } = props
   const theme = useTheme();
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils();
@@ -73,76 +81,82 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
 
   return (
     <>
-    <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()}
-    />
+      <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()}
-      />
+        {
+          (!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+            <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>
+              <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, t)?.value}
+        <OText numberOfLines={2} size={20} weight="600">
+          <>
+            {`${t('INVOICE_ORDER_NO', 'Order No.')} ${order.id} `}
+            {(!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+              <>
+                {t('IS', 'is')}{' '}
+                <OText
+                  size={20}
+                  weight="600"
+                  color={colors[order?.status] || theme.colors.primary}>
+                  {getOrderStatus(order?.status, t)?.value}
+                </OText>
+              </>
+            )}
+          </>
         </OText>
-      </>
-    </OText>
-    <OText size={13}>
-      {`${order?.paymethod?.name} - ${
-        order.delivery_type === 1
-          ? t('DELIVERY', 'Delivery')
-          : order.delivery_type === 2
-          ? t('PICKUP', 'Pickup')
-          : order.delivery_type === 3
-          ? t('EAT_IN', 'Eat in')
-          : order.delivery_type === 4
-          ? t('CURBSIDE', 'Curbside')
-          : t('DRIVER_THRU', 'Driver thru')
-      }`}
-    </OText>
-  </OrderHeader>
-  </>
+        {(!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
+          <OText size={13}>
+            {`${order?.paymethod?.name} - ${order.delivery_type === 1
+              ? t('DELIVERY', 'Delivery')
+              : order.delivery_type === 2
+                ? t('PICKUP', 'Pickup')
+                : order.delivery_type === 3
+                  ? t('EAT_IN', 'Eat in')
+                  : order.delivery_type === 4
+                    ? t('CURBSIDE', 'Curbside')
+                    : t('DRIVER_THRU', 'Driver thru')
+              }`}
+          </OText>
+        )}
+      </OrderHeader>
+    </>
   )
 }

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

@@ -69,7 +69,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     filtered,
     onFiltered,
     handleClickOrder,
-    isBusinessApp
+    isBusinessApp,
+    handleClickLogisticOrder,
+    logisticOrders,
+    loadLogisticOrders,
+    isLogisticActivated
   } = props;
 
   const defaultSearchList = {
@@ -93,7 +97,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [orientationState] = useDeviceOrientation();
   const [openModal, setOpenModal] = useState(false)
   const [search, setSearch] = useState(defaultSearchList)
-
   const WIDTH_SCREEN = orientationState?.dimensions?.width
   const HEIGHT_SCREEN = orientationState?.dimensions?.height
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
@@ -124,6 +127,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       zIndex: 100,
       borderColor: theme.colors.textGray,
     },
+    icon: {
+      paddingBottom: 10,
+      zIndex: 100,
+      marginBottom: 5,
+    },
     tagsContainer: {
       marginBottom: 20,
     },
@@ -171,7 +179,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const currentOrdersGroup = ordersGroup[currentTabSelected]
 
   const isEqual = (array1: any, array2: any) => {
-    return array1.every((item: any) => array2.includes(item)) && array2.every((item: any) => array1.includes(item))
+    return array1?.every((item: any) => array2.includes(item)) && array2?.every((item: any) => array1.includes(item))
   }
 
   const handleLoadMore = () => {
@@ -298,7 +306,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             name='refresh-cw'
             color={theme.colors.backgroundDark}
             size={24}
-            onPress={() => loadOrders && loadOrders({ newFetch: true })}
+            onPress={() => { currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true }) }}
             style={{ marginRight: 20 }}
           />
           <FontistoIcon
@@ -318,6 +326,24 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           nestedScrollEnabled={true}
         >
           <TabsContainer width={WIDTH_SCREEN}>
+            {isLogisticActivated && (
+              <Pressable
+                style={styles.pressable}
+                onPress={() => setCurrentTabSelected('logisticOrders')}>
+                <OIcon
+                  src={theme.images?.general?.chronometer}
+                  borderBottomWidth={currentTabSelected === 'logisticOrders' ? 1 : 0}
+                  width={currentTabSelected === 'logisticOrders' ? 26 : 24}
+                  height={currentTabSelected === 'logisticOrders' ? 26 : 24}
+                  color={
+                    currentTabSelected === 'logisticOrders'
+                      ? theme.colors.textGray
+                      : theme.colors.unselectText
+                  }
+                  style={styles.icon}
+                />
+              </Pressable>
+            )}
             {tabs.map((tab: any) => (
               <Pressable
                 key={tab.key}
@@ -344,72 +370,73 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </FiltersTab>
       <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 250 }}>
-        <View
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {tagsList && tagsList?.length > 1 && (
-            <View style={{ marginBottom: 20 }}>
-              <Tag
-                onPress={() => handleAllSelect()}
-                isSelected={
-                  isEqual(currentOrdersGroup.currentFilter, tagsList)
-                    ? theme.colors.primary
-                    : theme.colors.tabBar
-                }>
-                <OText
-                  style={styles.tag}
-                  color={
+        {currentTabSelected !== 'logisticOrders' && (
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            {tagsList && tagsList?.length > 1 && (
+              <View style={{ marginBottom: 20 }}>
+                <Tag
+                  onPress={() => handleAllSelect()}
+                  isSelected={
                     isEqual(currentOrdersGroup.currentFilter, tagsList)
-                      ? theme.colors.white
-                      : theme.colors.black
+                      ? theme.colors.primary
+                      : theme.colors.tabBar
                   }>
-                  {t('All', 'All')}
-                </OText>
-              </Tag>
-            </View>
-          )}
-          <ScrollView
-            ref={scrollRef}
-            showsVerticalScrollIndicator={false}
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.tagsContainer}
-            horizontal
-          >
-            {tagsList && tagsList.map((key: number) => (
-              <Tag
-                key={key}
-                onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
-                isSelected={
-                  currentOrdersGroup.currentFilter.includes(key) &&
-                    !isEqual(currentOrdersGroup.currentFilter, tagsList)
-                    ? theme.colors.primary
-                    : theme.colors.tabBar
-                }>
-                <OText
-                  style={styles.tag}
-                  color={
+                  <OText
+                    style={styles.tag}
+                    color={
+                      isEqual(currentOrdersGroup.currentFilter, tagsList)
+                        ? theme.colors.white
+                        : theme.colors.black
+                    }>
+                    {t('All', 'All')}
+                  </OText>
+                </Tag>
+              </View>
+            )}
+            <ScrollView
+              ref={scrollRef}
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.tagsContainer}
+              horizontal
+            >
+              {tagsList && tagsList.map((key: number) => (
+                <Tag
+                  key={key}
+                  onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
+                  isSelected={
                     currentOrdersGroup.currentFilter.includes(key) &&
                       !isEqual(currentOrdersGroup.currentFilter, tagsList)
-                      ? theme.colors.white
-                      : theme.colors.black
+                      ? theme.colors.primary
+                      : theme.colors.tabBar
                   }>
-                  {getOrderStatus(key)}
-                  {
-                    currentOrdersGroup.currentFilter.includes(key) &&
-                    !isEqual(currentOrdersGroup.currentFilter, tagsList) &&
-                    ' X'
-                  }
-                </OText>
-              </Tag>
-            ))}
-          </ScrollView>
-        </View>
-
+                  <OText
+                    style={styles.tag}
+                    color={
+                      currentOrdersGroup.currentFilter.includes(key) &&
+                        !isEqual(currentOrdersGroup.currentFilter, tagsList)
+                        ? theme.colors.white
+                        : theme.colors.black
+                    }>
+                    {getOrderStatus(key)}
+                    {
+                      currentOrdersGroup.currentFilter.includes(key) &&
+                      !isEqual(currentOrdersGroup.currentFilter, tagsList) &&
+                      ' X'
+                    }
+                  </OText>
+                </Tag>
+              ))}
+            </ScrollView>
+          </View>
+        )}
         <ScrollView
           ref={scrollListRef}
           showsVerticalScrollIndicator={false}
@@ -418,12 +445,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           refreshControl={
             <RefreshControl
               refreshing={refreshing}
-              onRefresh={() => loadOrders && loadOrders({ newFetch: true })}
+              onRefresh={() => { currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true }) }}
             />
           }
         >
-          {!currentOrdersGroup.error?.length &&
-            currentOrdersGroup.orders?.length > 0 &&
+          {!currentOrdersGroup?.error?.length &&
+            currentOrdersGroup?.orders?.length > 0 &&
+            currentTabSelected !== 'logisticOrders' &&
             (
               <PreviousOrders
                 orders={currentOrdersGroup.orders}
@@ -432,9 +460,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 handleClickOrder={handleClickOrder}
               />
             )}
-
-          {(currentOrdersGroup?.loading ||
-            currentOrdersGroup?.pagination?.total === null) &&
+          {!logisticOrders?.error?.length &&
+            logisticOrders?.orders?.length > 0 &&
+            currentTabSelected === 'logisticOrders' && (
+              <PreviousOrders
+                orders={logisticOrders.orders.filter((order: any) => !order?.expired).map((order: any) => ({ ...order, isLogistic: true }))}
+                onNavigationRedirect={onNavigationRedirect}
+                getOrderStatus={getOrderStatus}
+                handleClickLogisticOrder={handleClickLogisticOrder}
+                isLogisticOrder
+              />
+            )
+          }
+          {((currentOrdersGroup?.loading ||
+            currentOrdersGroup?.pagination?.total === null) ||
+            (logisticOrders?.loading)) &&
             (
               <>
                 <View>
@@ -484,16 +524,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               />
             )}
 
-          {!currentOrdersGroup?.loading &&
+          {((!currentOrdersGroup?.loading &&
             (currentOrdersGroup?.error?.length ||
-              currentOrdersGroup?.orders?.length === 0) &&
+              currentOrdersGroup?.orders?.length === 0)) ||
+            (currentTabSelected === 'logisticOrders' &&
+              (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0))
+          ) &&
             (
               <NotFoundSource
                 content={
-                  !currentOrdersGroup?.error?.length
+                  ((currentTabSelected !== 'logisticOrders' && !currentOrdersGroup?.error?.length) ||
+                    (currentTabSelected === 'logisticOrders' && !logisticOrders?.error?.length))
                     ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
-                    : currentOrdersGroup?.error[0]?.message ||
-                    currentOrdersGroup?.error[0] ||
+                    : currentOrdersGroup?.error?.[0]?.message ||
+                    currentOrdersGroup?.error?.[0] ||
+                    (currentTabSelected === 'logisticOrders' && logisticOrders?.error) ||
                     t('NETWORK_ERROR', 'Network Error')
                 }
                 image={theme.images.general.notFound}
@@ -587,7 +632,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
-
+  const theme = useTheme()
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,