ordering-ui-react-native 0.16.69 → 0.16.70-release

package/themes/original/src/components/MultiOrdersDetails/SingleOrderCard.tsx

@@ -3,6 +3,7 @@ import {
   useLanguage,
   useEvent,
   useUtils,
+  useConfig,
   OrderDetails as OrderDetailsController
 } from 'ordering-components/native'
 import { View, StyleSheet, TouchableOpacity, Linking } from 'react-native'
@@ -15,6 +16,7 @@ import {
   StaturBar,
   Icons
 } from './styles'
+import { getOrderStatus } from '../../utils'
 
 const SingleOrderCardUI = (props: any) => {
   const {
@@ -23,13 +25,17 @@ const SingleOrderCardUI = (props: any) => {
     readMessages,
     messages,
     setMessages,
-    handleGoToOrderDetails
+    handleGoToOrderDetails,
+    showProgressBar
   } = props
 
   const { order } = props.order
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ parseDate, parsePrice }] = useUtils()
+  const [{ configs }] = useConfig()
+
+  const hideIndividualButton = configs.multi_business_checkout_remove_individual_buttons?.value === '1'
 
   const styles = StyleSheet.create({
     statusBar: {
@@ -37,205 +43,6 @@ const SingleOrderCardUI = (props: any) => {
     }
   })
 
-  const getOrderStatus = (s: string) => {
-    const status = parseInt(s);
-    const orderStatus = [
-      {
-        key: 0,
-        value: t('PENDING', 'Pending'),
-        slug: 'PENDING',
-        percentage: 0.25,
-        image: theme.images.order.status0,
-      },
-      {
-        key: 1,
-        value: t('COMPLETED', 'Completed'),
-        slug: 'COMPLETED',
-        percentage: 1,
-        image: theme.images.order.status1,
-      },
-      {
-        key: 2,
-        value: t('REJECTED', 'Rejected'),
-        slug: 'REJECTED',
-        percentage: 0,
-        image: theme.images.order.status2,
-      },
-      {
-        key: 3,
-        value: t('DRIVER_IN_BUSINESS', 'Driver in business'),
-        slug: 'DRIVER_IN_BUSINESS',
-        percentage: 0.6,
-        image: theme.images.order.status3,
-      },
-      {
-        key: 4,
-        value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
-        slug: 'PREPARATION_COMPLETED',
-        percentage: 0.7,
-        image: theme.images.order.status4,
-      },
-      {
-        key: 5,
-        value: t('REJECTED_BY_BUSINESS', 'Rejected by business'),
-        slug: 'REJECTED_BY_BUSINESS',
-        percentage: 0,
-        image: theme.images.order.status5,
-      },
-      {
-        key: 6,
-        value: t('REJECTED_BY_DRIVER', 'Rejected by Driver'),
-        slug: 'REJECTED_BY_DRIVER',
-        percentage: 0,
-        image: theme.images.order.status6,
-      },
-      {
-        key: 7,
-        value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
-        slug: 'ACCEPTED_BY_BUSINESS',
-        percentage: 0.35,
-        image: theme.images.order.status7,
-      },
-      {
-        key: 8,
-        value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver'),
-        slug: 'ACCEPTED_BY_DRIVER',
-        percentage: 0.45,
-        image: theme.images.order.status8,
-      },
-      {
-        key: 9,
-        value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver'),
-        slug: 'PICK_UP_COMPLETED_BY_DRIVER',
-        percentage: 0.8,
-        image: theme.images.order.status9,
-      },
-      {
-        key: 10,
-        value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver'),
-        slug: 'PICK_UP_FAILED_BY_DRIVER',
-        percentage: 0,
-        image: theme.images.order.status10,
-      },
-      {
-        key: 11,
-        value: t(
-          'DELIVERY_COMPLETED_BY_DRIVER',
-          'Delivery completed by driver',
-        ),
-        slug: 'DELIVERY_COMPLETED_BY_DRIVER',
-        percentage: 1,
-        image: theme.images.order.status11,
-      },
-      {
-        key: 12,
-        value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver'),
-        slug: 'DELIVERY_FAILED_BY_DRIVER',
-        percentage: 0,
-        image: theme.images.order.status12,
-      },
-      {
-        key: 13,
-        value: t('PREORDER', 'PreOrder'),
-        slug: 'PREORDER',
-        percentage: 0,
-        image: theme.images.order.status13,
-      },
-      {
-        key: 14,
-        value: t('ORDER_NOT_READY', 'Order not ready'),
-        slug: 'ORDER_NOT_READY',
-        percentage: 0,
-        image: theme.images.order.status13,
-      },
-      {
-        key: 15,
-        value: t(
-          'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
-          'Order picked up completed by customer',
-        ),
-        slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
-        percentage: 100,
-        image: theme.images.order.status1,
-      },
-      {
-        key: 16,
-        value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
-        slug: 'CANCELLED_BY_CUSTOMER',
-        percentage: 0,
-        image: theme.images.order.status2,
-      },
-      {
-        key: 17,
-        value: t(
-          'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
-          'Order not picked up by customer',
-        ),
-        slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
-        percentage: 0,
-        image: theme.images.order.status2,
-      },
-      {
-        key: 18,
-        value: t(
-          'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
-          'Driver almost arrived to business',
-        ),
-        slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
-        percentage: 0.15,
-        image: theme.images.order.status3,
-      },
-      {
-        key: 19,
-        value: t(
-          'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
-          'Driver almost arrived to customer',
-        ),
-        slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
-        percentage: 0.9,
-        image: theme.images.order.status11,
-      },
-      {
-        key: 20,
-        value: t(
-          'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
-          'Customer almost arrived to business',
-        ),
-        slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
-        percentage: 90,
-        image: theme.images.order.status7,
-      },
-      {
-        key: 21,
-        value: t(
-          'ORDER_CUSTOMER_ARRIVED_BUSINESS',
-          'Customer arrived to business',
-        ),
-        slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
-        percentage: 95,
-        image: theme.images.order.status7,
-      },
-      {
-        key: 22,
-        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
-        slug: 'ORDER_LOOKING_FOR_DRIVER',
-        percentage: 35,
-        image: theme.images.order.status8
-      },
-      {
-        key: 23,
-        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
-        slug: 'ORDER_DRIVER_ON_WAY',
-        percentage: 45,
-        image: theme.images.order.status8
-      }
-    ];
-
-    const objectStatus = orderStatus.find((o) => o.key === status);
-
-    return objectStatus && objectStatus;
-  };
-
   const handleGoToMessages = (type: string) => {
     readMessages && readMessages();
     navigation.navigate(
@@ -275,14 +82,16 @@ const SingleOrderCardUI = (props: any) => {
             </View>
           </View>
         </View>
-        <OButton
-          onClick={() => handleGoToOrderDetails(order?.uuid)}
-          textStyle={{ color: theme.colors.primary, textAlign: 'center', fontSize: 14 }}
-          style={{ flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0, paddingLeft: 5, paddingRight: 5, height: 44 }}
-          text={t('ORDER_DETAILS', 'Order Details')}
-          bgColor={theme.colors.white}
-          borderColor={theme.colors.primary}
-        />
+        {!hideIndividualButton && (
+          <OButton
+            onClick={() => handleGoToOrderDetails(order?.uuid)}
+            textStyle={{ color: theme.colors.primary, textAlign: 'center', fontSize: 14 }}
+            style={{ flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0, paddingLeft: 5, paddingRight: 5, height: 44 }}
+            text={t('ORDER_DETAILS', 'Order Details')}
+            bgColor={theme.colors.white}
+            borderColor={theme.colors.primary}
+          />
+        )}
       </View>
       <OText size={16} lineHeight={24} mBottom={17} weight={'500'} color={theme.colors.textNormal}>
         {t('FROM', 'From')}
@@ -324,25 +133,29 @@ const SingleOrderCardUI = (props: any) => {
         <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
           {order?.business?.cellphone}
         </OText>
-      )}      
+      )}
       <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
         {order?.business?.address}
       </OText>
-      <StaturBar>
-        <LinearGradient
-          start={{ x: 0.0, y: 0.0 }}
-          end={{
-            x: getOrderStatus(order?.status)?.percentage || 0,
-            y: 0,
-          }}
-          locations={[0.9999, 0.9999]}
-          colors={[theme.colors.primary, theme.colors.backgroundGray100]}
-          style={styles.statusBar}
-        />
-      </StaturBar>
-      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-        {getOrderStatus(order?.status)?.value}
-      </OText>
+      {showProgressBar && (
+        <>
+          <StaturBar>
+            <LinearGradient
+              start={{ x: 0.0, y: 0.0 }}
+              end={{
+                x: getOrderStatus(order?.status)?.percentage || 0,
+                y: 0,
+              }}
+              locations={[0.9999, 0.9999]}
+              colors={[theme.colors.primary, theme.colors.backgroundGray100]}
+              style={styles.statusBar}
+            />
+          </StaturBar>
+          <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+            {getOrderStatus(order?.status)?.value}
+          </OText>
+        </>
+      )}
       <View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 20 }}>
         <OText size={16} lineHeight={24} weight={'600'} color={theme.colors.textNormal}>
           {t('EXPORT_ORDER_TOTAL', 'Order total')}: {parsePrice(order?.summary?.total ?? order?.total)}

package/themes/original/src/components/MultiOrdersDetails/index.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react'
-import { useLanguage, useUtils, useToast,	ToastType, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
-import { View, StyleSheet, BackHandler } from 'react-native'
+import { useLanguage, useUtils, useToast, ToastType, useConfig, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
+import { View, StyleSheet, BackHandler, TouchableOpacity } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { OText, OButton } from '../shared'
-import { Container } from '../../layouts/Container'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
 import { SingleOrderCard } from './SingleOrderCard'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import { getOrderStatus } from '../../utils'
 
 import {
   OrdersDetailsContainer,
@@ -16,8 +17,11 @@ import {
   InfoBlock,
   Row,
   OrdersSummary,
-  BorderLine
+  BorderLine,
+  StaturBar
 } from './styles'
+import { NotFoundSource } from '../NotFoundSource'
+import LinearGradient from 'react-native-linear-gradient'
 
 export const MultiOrdersDetailsUI = (props: any) => {
   const {
@@ -29,20 +33,29 @@ export const MultiOrdersDetailsUI = (props: any) => {
   } = props
 
   const theme = useTheme()
-	const styles = StyleSheet.create({
+  const styles = StyleSheet.create({
     btnBackArrow: {
-			borderWidth: 0,
-			backgroundColor: theme.colors.clear,
-			shadowColor: theme.colors.clear,
-			padding: 0,
+      borderWidth: 0,
+      backgroundColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      padding: 0,
       marginLeft: -20
-		},
-	})
-  
+    },
+    statusBar: {
+      height: 12,
+    }
+  })
+
   const { loading, orders, error } = props.ordersList
   const [, t] = useLanguage()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
-	const [, { showToast }] = useToast();
+  const [, { showToast }] = useToast();
+  const [{ configs }] = useConfig()
+
+  const isTaxIncludedOnPrice = orders.every((_order: any) => _order.taxes?.length ? _order.taxes?.every((_tax: any) => _tax.type === 1) : true)
+  const progressBarStyle = configs.multi_business_checkout_progress_bar_style?.value
+  const showBarInOrder = ['group', 'both']
+  const showBarInIndividual = ['individual', 'both']
 
   const walletName: any = {
     cash: {
@@ -60,7 +73,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
     }
     navigation.navigate('BusinessList');
     return true
-	}
+  }
 
   const handleGoToOrderDetails = (uuid: any) => {
     navigation.navigate('OrderDetails', { orderId: uuid })
@@ -68,7 +81,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
 
   useEffect(() => {
     if (error) {
-	  	showToast(ToastType.Error, error)
+      showToast(ToastType.Error, error)
     }
   }, [error])
 
@@ -83,11 +96,14 @@ export const MultiOrdersDetailsUI = (props: any) => {
     <OrdersDetailsContainer keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingHorizontal: 40 }}>
       <View style={{ flexDirection: 'row' }}>
         <OButton
-          imgLeftSrc={theme.images.general.arrow_left}
           imgRightSrc={null}
           style={styles.btnBackArrow}
           onClick={() => handleArrowBack()}
-          imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26
+          }}
         />
       </View>
       <Header>
@@ -181,6 +197,23 @@ export const MultiOrdersDetailsUI = (props: any) => {
           <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={20}>
             {t('ORDER_SUMMARY', 'Order summary')}
           </OText>
+          {(showBarInOrder.includes(progressBarStyle)) && (
+            <StaturBar isOrderDetails>
+              <LinearGradient
+                start={{ x: 0.0, y: 0.0 }}
+                end={{
+                  x: getOrderStatus(orders[0]?.status)?.percentage || 0,
+                  y: 0,
+                }}
+                locations={[0.9999, 0.9999]}
+                colors={[theme.colors.primary, theme.colors.backgroundGray100]}
+                style={styles.statusBar}
+              />
+            </StaturBar>
+          )}
+          <OText size={14} lineHeight={18} weight={'400'} color={theme.colors.textNormal} mBottom={10}>
+            {getOrderStatus(orders[0]?.status)?.value}
+          </OText>
           {orders.map((order: any) => (
             <Row key={order.id}>
               <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
@@ -192,23 +225,27 @@ export const MultiOrdersDetailsUI = (props: any) => {
             </Row>
           ))}
           <BorderLine />
-          <Row>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {t('TOTAL_BEFORE_TAX', 'Total before tax')}:
-            </OText>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {parsePrice(ordersSummary?.subtotal)}
-            </OText>
-          </Row>
-          <Row>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-            {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
-            </OText>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {parsePrice(ordersSummary?.tax)}
-            </OText>
-          </Row>
-          <BorderLine />
+          {!isTaxIncludedOnPrice && (
+            <>
+              <Row>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {t('TOTAL_BEFORE_TAX', 'Total before tax')}:
+                </OText>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {parsePrice(ordersSummary?.subtotal)}
+                </OText>
+              </Row>
+              <Row>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
+                </OText>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {parsePrice(ordersSummary?.tax)}
+                </OText>
+              </Row>
+              <BorderLine />
+            </>
+          )}
           <Row style={{ marginTop: 10 }}>
             <OText size={14} lineHeight={18} weight={'500'} color={theme.colors.textNormal}>
               {t('PAYMENT_TOTAL', 'Payment total')}:
@@ -238,12 +275,26 @@ export const MultiOrdersDetailsUI = (props: any) => {
                 navigation={navigation}
                 order={order}
                 handleGoToOrderDetails={handleGoToOrderDetails}
+                showProgressBar={showBarInIndividual.includes(progressBarStyle)}
               />
               <Divider />
             </React.Fragment>
           ))}
         </>
       )}
+      {!loading && (error || orders?.length === 0) && (
+        error?.includes('ERROR_ACCESS_EXPIRED') ? (
+          <NotFoundSource
+            content={t(error[0], 'Sorry, the order has expired.')}
+          />
+        ) : (
+          <NotFoundSource
+            content={t('NOT_FOUND_ORDER', theme?.defaultLanguages?.NOT_FOUND_ORDER || 'Sorry, we couldn\'t find the requested order.')}
+            btnTitle={t('ORDERS_REDIRECT', theme?.defaultLanguages?.ORDERS_REDIRECT || 'Go to Orders')}
+            onClickButton={navigation.navigate('BusinessList')}
+          />
+        )
+      )}
       <Divider />
     </OrdersDetailsContainer>
   )

package/themes/original/src/components/MultiOrdersDetails/styles.tsx

@@ -41,7 +41,7 @@ export const SingleOrderContainer = styled.View`
   padding: 40px 0;
 `
 export const StaturBar = styled.View`
-	margin-top: 30px;
+	margin-top: ${(props: any) => props.isOrderDetails ? '10px' : '30px'};
 	margin-bottom: 10px;
 `
 export const Icons = styled.View`