ordering-ui-react-native 0.18.0 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/index.tsx

@@ -41,6 +41,7 @@ import { MapViewUI as MapView } from './src/components/MapView'
 import { NewOrderNotification } from './src/components/NewOrderNotification';
 import { DriverSchedule } from './src/components/DriverSchedule';
 import { ScheduleBlocked } from './src/components/ScheduleBlocked';
+import { OrderDetailsLogistic } from './src/components/OrderDetailsLogistic'
 //OComponents
 import {
   OText,
@@ -110,6 +111,7 @@ export {
   VerifyPhone,
   DriverSchedule,
   ScheduleBlocked,
+  OrderDetailsLogistic,
   //OComponents
   OAlert,
   OButton,

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

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react'
 
-import { Platform, StyleSheet, View, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -16,18 +16,23 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 
-import { verifyDecimals } from '../../utils';
+import { verifyDecimals, calculateDistance, transformDistance } from '../../utils';
 
 import {
   useLanguage,
   useUtils,
   useConfig,
+  useSession
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { ReviewCustomer } from '../ReviewCustomer'
 
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 interface OrderContent {
   order: any,
   logisticOrderStatus?: Array<number>,
@@ -38,10 +43,15 @@ interface OrderContent {
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
-
+  const [{user}] = useSession()
+  console.log(user)
   const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
+  const [orientationState] = useDeviceOrientation();
+
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
   const [isReadMore, setIsReadMore] = useState(false)
@@ -99,13 +109,13 @@ export const OrderContentComponent = (props: OrderContent) => {
   }
 
   const onTextLayout = useCallback((e: any) => {
-    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
   },[]);
 
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
-        <OText size={18}>{t('ORDER', 'Order')} #{isOrderGroup ? order?.order_group_id : order?.id}</OText>
+        <OText size={18}>{t('ORDER', 'Order')} #{order?.id}</OText>
       )}
 
       {order?.metafields?.length > 0 && (
@@ -193,7 +203,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             />
           </View>
         )}
-
+        {!!order?.business?.location && (
+          <OText>
+            {t('DISTANCE_TO_THE_BUSINESS', 'Distance to the business')}: {transformDistance(calculateDistance(order?.business?.location, user?.location), distanceUnit)} {t(distanceUnit.toUpperCase(), distanceUnit)}
+          </OText>
+        )}
         {!!order?.business?.address_notes && (
           <View style={styles.linkWithIcons}>
             <OLink
@@ -334,9 +348,15 @@ export const OrderContentComponent = (props: OrderContent) => {
         )}
 
         {!!order?.customer?.address_notes && (
-          <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
-            {order?.customer?.address_notes}
-          </OText>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            horizontal
+          >
+            <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+              {order?.customer?.address_notes}
+            </OText>
+          </ScrollView>
         )}
 
         {!!order?.customer?.zipcode && (

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

@@ -9,12 +9,15 @@ import {
 
 //Components
 import {
+  OIcon,
   OIconButton,
   OText,
 } from '../shared'
 
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 
 import {
   useLanguage,
@@ -54,6 +57,19 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
       height: 40,
       padding: 10,
       alignItems: 'flex-end',
+      color: theme.colors.textGray,
+    },
+    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
     },
   })
 
@@ -108,42 +124,30 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     <>
       {!props.isCustomView && (
         <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()}
-          />
-
+          <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
           {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
             <Actions>
               {getOrderStatus(order?.status, t)?.value !==
                 t('PENDING', 'Pending') && (
                   <>
-                    <OIconButton
-                      icon={theme.images.general.copy}
-                      iconStyle={{
-                        width: 20,
-                        height: 25,
-                        top: 2,
-                        tintColor: theme.colors.backArrow,
-                      }}
-                      borderColor={theme.colors.clear}
-                      style={styles.icons}
-                      onClick={() => handleCopyClipboard?.()}
-                    />
-                    <OIconButton
-                      icon={theme.images.general.print}
-                      iconStyle={{
-                        width: 25,
-                        height: 22,
-                        tintColor: theme.colors.backArrow,
-                      }}
-                      borderColor={theme.colors.clear}
-                      style={styles.icons}
-                      onClick={() => handleViewSummaryOrder?.()}
-                    />
+                    <TouchableOpacity onPress={() => handleCopyClipboard?.()}>
+                      <MaterialCommunityIcons
+                        name='content-copy'
+                        color={theme.colors.textGray}
+                        size={20}
+                        style={styles.icons}
+                      />
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
+                      <SimpleLineIcons
+                        name='printer'
+                        color={theme.colors.textGray}
+                        size={20}
+                        style={styles.icons}
+                      />
+                    </TouchableOpacity>
                   </>
                 )}
               <OIconButton
@@ -151,7 +155,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 iconStyle={{
                   width: 20,
                   height: 20,
-                  tintColor: theme.colors.backArrow,
+                  tintColor: theme.colors.textGray,
                 }}
                 borderColor={theme.colors.clear}
                 style={styles.icons}
@@ -163,7 +167,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 iconStyle={{
                   width: 20,
                   height: 20,
-                  tintColor: theme.colors.backArrow,
+                  tintColor: theme.colors.textGray,
                 }}
                 borderColor={theme.colors.clear}
                 style={styles.icons}
@@ -193,29 +197,22 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 {getOrderStatus(order?.status, t)?.value !==
                   t('PENDING', 'Pending') && (
                     <>
-                      <OIconButton
-                        icon={theme.images.general.copy}
-                        iconStyle={{
-                          width: 20,
-                          height: 25,
-                          top: 2,
-                          tintColor: theme.colors.backArrow,
-                        }}
-                        borderColor={theme.colors.clear}
-                        style={styles.icons}
-                        onClick={() => handleCopyClipboard?.()}
-                      />
-                      <OIconButton
-                        icon={theme.images.general.print}
-                        iconStyle={{
-                          width: 25,
-                          height: 22,
-                          tintColor: theme.colors.backArrow,
-                        }}
-                        borderColor={theme.colors.clear}
-                        style={styles.icons}
-                        onClick={() => handleViewSummaryOrder?.()}
-                      />
+                      <TouchableOpacity onPress={() => handleCopyClipboard?.()}>
+                        <MaterialCommunityIcons
+                          name='content-copy'
+                          color={theme.colors.textGray}
+                          size={20}
+                          style={styles.icons}
+                        />
+                      </TouchableOpacity>
+                      <TouchableOpacity onPress={() => handleViewSummaryOrder?.()}>
+                        <SimpleLineIcons
+                          name='printer'
+                          color={theme.colors.textGray}
+                          size={20}
+                          style={styles.icons}
+                        />
+                      </TouchableOpacity>
                     </>
                   )}
                 <OIconButton
@@ -223,7 +220,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   iconStyle={{
                     width: 20,
                     height: 20,
-                    tintColor: theme.colors.backArrow,
+                    tintColor: theme.colors.textGray,
                   }}
                   borderColor={theme.colors.clear}
                   style={styles.icons}
@@ -235,7 +232,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                   iconStyle={{
                     width: 20,
                     height: 20,
-                    tintColor: theme.colors.backArrow,
+                    tintColor: theme.colors.textGray,
                   }}
                   borderColor={theme.colors.clear}
                   style={styles.icons}

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)
+        handleArrowBack()
+    }
+
+    const handleAcceptLogisticOrder = (order: any) => {
+        handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id)
+        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,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-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';
@@ -239,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,
@@ -696,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>

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

@@ -48,8 +48,13 @@ export const PreviousOrders = (props: any) => {
     if (props.handleClickEvent) {
       props.handleClickEvent({ ...order, isLogistic: isLogisticOrder })
     } else {
-      onNavigationRedirect &&
-        onNavigationRedirect('OrderDetails', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+      if (isLogisticOrder){
+        onNavigationRedirect &&
+        onNavigationRedirect('OrderDetailsLogistic', { order: { ...order, isLogistic: isLogisticOrder }, handleClickLogisticOrder });
+      } else {
+        onNavigationRedirect &&
+          onNavigationRedirect('OrderDetails', { order });
+      }
     }
   };
 

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

@@ -3,6 +3,10 @@ import { View, Animated, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useUtils, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 import {
   Accordion,
   AccordionSection,
@@ -34,6 +38,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ parsePrice }] = useUtils();
+  const [orientationState] = useDeviceOrientation();
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [isActive, setActiveState] = useState(false);
   const [isReadMore, setIsReadMore] = useState(false);
@@ -111,7 +117,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
   }, []);
 
   const onTextLayout = useCallback((e: any) => {
-    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
   },[]);
 
   return (

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

@@ -86,6 +86,18 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       marginBottom: 10,
       backgroundColor: theme.colors.lightGray
     },
+    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: 20
+    },
     inputTextArea: {
       borderColor: theme.colors.lightGray,
       borderRadius: 8,
@@ -177,18 +189,9 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       }}
     >
       <View>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          borderColor={theme.colors.clear}
-          iconStyle={{ width: 20, height: 16 }}
-          style={{
-            maxWidth: 40,
-            height: 20,
-            justifyContent: 'flex-end',
-            marginBottom: 20,
-          }}
-          onClick={() => closeModal()}
-        />
+        <TouchableOpacity onPress={() => closeModal()} style={styles.btnBackArrow}>
+          <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+        </TouchableOpacity>
         <OText
           size={20}
           weight="600"

package/themes/business/src/types/index.tsx

@@ -25,18 +25,18 @@ export interface LoginParams {
   enableReCaptcha?: any;
 
   otpType?: string,
-	setOtpType: (type : string) => void,
-	generateOtpCode: (values ?: any) => void,
-	useLoginOtpEmail?: boolean,
-	useLoginOtpCellphone?: boolean,
-	useLoginOtp?: boolean
+  setOtpType: (type: string) => void,
+  generateOtpCode: (values?: any) => void,
+  useLoginOtpEmail?: boolean,
+  useLoginOtpCellphone?: boolean,
+  useLoginOtp?: boolean
 }
 export interface otpParams {
-	willVerifyOtpState: boolean,
-	setWillVerifyOtpState: (val : boolean) => void,
-	onSubmit: () => void,
-	handleLoginOtp: (code : string) => void,
-	setAlertState: any,
+  willVerifyOtpState: boolean,
+  setWillVerifyOtpState: (val: boolean) => void,
+  onSubmit: () => void,
+  handleLoginOtp: (code: string) => void,
+  setAlertState: any,
   formState?: any
 }
 export interface ProfileParams {
@@ -612,3 +612,10 @@ export interface ReviewCustomerParams {
 export interface NoNetworkParams {
   image?: any;
 }
+
+export interface OrderDetailsLogisticParams {
+  navigation: any,
+  handleClickLogisticOrder: any,
+  orderAssingId: number,
+  order: any
+}

package/themes/business/src/utils/index.tsx

@@ -369,3 +369,30 @@ export const formatSeconds = (seconds : number) => {
   ret += '' + secs
   return ret
 }
+
+export const calculateDistance = (
+  pointA: { lat: number; lng: number },
+  pointB: { latitude: number; longitude: number },
+) => {
+  const lat1 = pointA.lat;
+  const lon1 = pointA.lng;
+
+  const lat2 = pointB.latitude;
+  const lon2 = pointB.longitude;
+
+  const R = 6371e3;
+  const φ1 = lat1 * (Math.PI / 180);
+  const φ2 = lat2 * (Math.PI / 180);
+  const Δφ = (lat2 - lat1) * (Math.PI / 180);
+  const Δλ = (lon2 - lon1) * (Math.PI / 180);
+
+  const a =
+    Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+    Math.cos(φ1) * Math.cos(φ2) * (Math.sin(Δλ / 2) * Math.sin(Δλ / 2));
+
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  const distance = R * c;
+  const distanceInKm = distance / 1000;
+  return distanceInKm;
+};

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

@@ -415,7 +415,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           <BackgroundGray isIos={Platform.OS === 'ios'} />
         )}
         <IOScrollView
-          stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 2]}
+          stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
           style={{
             ...styles.mainContainer,
             marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?

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

@@ -24,6 +24,7 @@ const DriverTipsUI = (props: any) => {
 		driverTipsOptions,
 		isMulti,
 		cart,
+		carts,
 		isDriverTipUseCustom,
 		handlerChangeOption,
 		isFixedPrice
@@ -64,6 +65,10 @@ const DriverTipsUI = (props: any) => {
 		setvalue(val)
 	}
 
+	const multiCartTipsAmmout = carts?.reduce((total: any, cart: any) => {
+		return total + parseFloat(cart?.driver_tip || 0)
+	}, 0)
+
 	return (
 		<DTContainer>
 			<DTLabel>
@@ -138,7 +143,7 @@ const DriverTipsUI = (props: any) => {
 					style={{ marginTop: 10, textAlign: 'center' }}
 				>
 					{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPrice &&
-						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(multiCartTipsAmmout ?? driverTip) : parsePrice(multiCartTipsAmmout ?? cart?.driver_tip)}
 				</OText>
 			)}
 		</DTContainer>

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

@@ -383,39 +383,45 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 						)}
 						<OText color={optionSelected.isSchedule ? theme.colors.textNormal : theme.colors.disabled}>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
 					</WrapSelectOption>
-
 					{optionSelected.isSchedule && (
 						<OrderTimeWrapper>
-							<View style={{ flex: 1 }}>
-								{selectDate && datesWhitelist[0]?.start !== null && (
-									<CalendarStrip
-										scrollable
-										locale={locale}
-										style={styles.calendar}
-										calendarHeaderContainerStyle={styles.calendarHeaderContainer}
-										calendarHeaderStyle={styles.calendarHeader}
-										dateNumberStyle={styles.dateNumber}
-										dateNameStyle={styles.dateName}
-										iconContainer={{ flex: 0.1 }}
-										highlightDateNameStyle={styles.highlightDateName}
-										highlightDateNumberStyle={styles.highlightDateNumber}
-										dayContainerStyle={{ height: '100%' }}
-										highlightDateContainerStyle={{ height: '100%' }}
-										calendarHeaderFormat='MMMM, YYYY'
-										iconStyle={{ borderWidth: 1 }}
-										selectedDate={dateSelected}
-										datesWhitelist={datesWhitelist}
-										minDate={moment()}
-										maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
-										disabledDateNameStyle={styles.disabledDateName}
-										disabledDateNumberStyle={styles.disabledDateNumber}
-										disabledDateOpacity={0.6}
-										onDateSelected={(date) => onSelectDate(date)}
-										leftSelector={<LeftSelector />}
-										rightSelector={<RightSelector />}
-									/>
-								)}
-							</View>
+							{datesWhitelist?.length <= 1 && (
+								<OText>
+									{moment(selectDate).format('Do MMMM, YYYY')}
+								</OText>
+							)}
+							{datesWhitelist > 1 && (
+								<View style={{ flex: 1 }}>
+									{selectDate && datesWhitelist[0]?.start !== null && (
+										<CalendarStrip
+											scrollable
+											locale={locale}
+											style={styles.calendar}
+											calendarHeaderContainerStyle={styles.calendarHeaderContainer}
+											calendarHeaderStyle={styles.calendarHeader}
+											dateNumberStyle={styles.dateNumber}
+											dateNameStyle={styles.dateName}
+											iconContainer={{ flex: 0.1 }}
+											highlightDateNameStyle={styles.highlightDateName}
+											highlightDateNumberStyle={styles.highlightDateNumber}
+											dayContainerStyle={{ height: '100%' }}
+											highlightDateContainerStyle={{ height: '100%' }}
+											calendarHeaderFormat='MMMM, YYYY'
+											iconStyle={{ borderWidth: 1 }}
+											selectedDate={dateSelected}
+											datesWhitelist={datesWhitelist}
+											minDate={moment()}
+											maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
+											disabledDateNameStyle={styles.disabledDateName}
+											disabledDateNumberStyle={styles.disabledDateNumber}
+											disabledDateOpacity={0.6}
+											onDateSelected={(date) => onSelectDate(date)}
+											leftSelector={<LeftSelector />}
+											rightSelector={<RightSelector />}
+										/>
+									)}
+								</View>
+							)}
 							<TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
 								<TimeContentWrapper>
 									{timeList.map((time: any, i: number) => (

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

@@ -481,9 +481,9 @@ export const ProductOptionsUI = (props: any) => {
 								: t('LOGIN_SIGNUP', 'Login / Sign Up')
 						}
 						imgRightSrc=""
-						textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+						textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
 						style={{
-							height: 44,
+							height: 42,
 							borderColor: theme.colors.primary,
 							backgroundColor: theme.colors.white,
 							paddingLeft: 0,
@@ -498,7 +498,7 @@ export const ProductOptionsUI = (props: any) => {
 								<PlaceholderLine width={60} height={20} />
 							</Placeholder>
 						) : (
-							<OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+							<OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
 						)}
 					</TouchableOpacity>
 				)}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { StyleSheet, Platform, View, Dimensions } from 'react-native'
+import { StyleSheet, Platform, View, Dimensions, Text } from 'react-native'
 import { useUtils, useLanguage, useConfig } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 import CalendarPicker from 'react-native-calendar-picker'
@@ -60,7 +60,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
     },
     photoStyle: {
       alignSelf: 'center'
-    }
+    },
+    dropDownRow: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      marginHorizontal: 0
+    },
   })
 
   const onDateChange = (date: any) => {
@@ -92,6 +97,28 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
     setIsEnabled(menu?.schedule?.[day]?.enabled || false)
   }
 
+  const getMomentTime = (time) => {
+    const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    return _moment
+  }
+
+  const isBusyTime = (professional, selectedMoment) => {
+    if (!selectedMoment) return false
+    const startDay = moment(selectedMoment).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
+    if (!isStartScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
+    const busyTimes = professional?.busy_times
+
+    const valid = busyTimes.some(item => {
+      return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
+        moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf())
+    })
+    return valid
+  }
+
   const getTimes = (curdate: any, menu: any) => {
     validateSelectedDate(curdate, menu)
     const date = new Date()
@@ -238,10 +265,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
                   paddingTop: 8,
                   paddingHorizontal: 12
                 }}
-                rowTextStyle={{
-                  color: theme.colors.disabled,
-                  fontSize: 14,
-                  marginHorizontal: 0
+                renderCustomizedRowChild={(item, index) => {
+                  return (
+                    <Text style={[styles.dropDownRow, { color: isBusyTime(professional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                      {item.text}
+                    </Text>
+                  )
                 }}
                 renderDropdownIcon={() => dropDownIcon()}
                 dropdownOverlayColor='transparent'

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useTheme } from 'styled-components/native'
-import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity } from 'react-native'
+import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity, Text } from 'react-native'
 import { OText, OButton, OModal, OIcon } from '../shared'
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -110,31 +110,41 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       height: 40,
       marginBottom: 30
     },
+    dropDownRow: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      marginHorizontal: 0
+    },
     professionalList: {
       paddingHorizontal: 40,
-      paddingVertical: 30
+      paddingVertical: 30,
     }
   })
 
-  const isBusyTime = (professional: any) => {
-    if (!dateSelected) return false
-    const startDay = moment(dateSelected).utc().format('d')
+  const getMomentTime = (time) => {
+    const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    return _moment
+  }
+
+  const isBusyTime = (professional, selectedMoment) => {
+    if (!selectedMoment) return false
+    const startDay = moment(selectedMoment).utc().format('d')
     const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
     const duration = product?.duration ?? 0
-    const endDay = moment(dateSelected).add(duration - 1, 'minutes').utc().format('d')
+    const endDay = moment(selectedMoment).add(duration - 1, 'minutes').utc().format('d')
     const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
     if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
 
     if (professional?.busy_times?.length === 0) return false
-  
+
     const busyTimes = isCartProduct
-      ? professional?.busy_times.filter((item: any) => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
+      ? professional?.busy_times.filter(item => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
       : [...professional?.busy_times]
-    const valid = busyTimes.some((item: any) => {
-      return (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() < moment.utc(item?.end).local().valueOf()) ||
-        (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).add(duration, 'minutes').valueOf() &&
-        moment(dateSelected).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
+    const valid = busyTimes.some(item => {
+      return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
+        moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
+        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
+        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -391,9 +401,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                         size={12}
                         weight={'400'}
                         lineHeight={17}
-                        color={isBusyTime(currentProfessional) ? theme.colors.danger5 : theme.colors.success500}
+                        color={isBusyTime(currentProfessional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
                       >
-                        {isBusyTime(currentProfessional)
+                        {isBusyTime(currentProfessional, dateSelected)
                           ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
                           : t('AVAILABLE', 'Available')
                         }
@@ -473,10 +483,12 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       paddingTop: 8,
                       paddingHorizontal: 12
                     }}
-                    rowTextStyle={{
-                      color: theme.colors.disabled,
-                      fontSize: 14,
-                      marginHorizontal: 0
+                    renderCustomizedRowChild={(item, index) => {
+                      return (
+                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                          {item.text}
+                        </Text>
+                      )
                     }}
                     renderDropdownIcon={() => dropDownIcon()}
                     dropdownOverlayColor='transparent'
@@ -549,7 +561,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       ? t('SOLD_OUT', 'Sold out')
                       : t('BOOK', 'Book'))}
                   style={styles.buttonStyle}
-                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional)}
+                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
                   textStyle={{ fontSize: 14, color: theme.colors.white }}
                 />
               )}
@@ -647,9 +659,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     size={12}
                     weight={'400'}
                     lineHeight={17}
-                    color={isBusyTime(professional) ? theme.colors.danger5 : theme.colors.success500}
+                    color={isBusyTime(professional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
                   >
-                    {isBusyTime(professional)
+                    {isBusyTime(professional, dateSelected)
                       ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
                       : t('AVAILABLE', 'Available')
                     }