ordering-ui-react-native 0.16.77-release → 0.16.78-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.77-release",
+  "version": "0.16.78-release",
   "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/Delivery.tsx

@@ -52,7 +52,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     handleClickLogisticOrder,
     forceUpdate,
     getPermissions,
-    isGrantedPermissions
+    orderAssingId,
+    isGrantedPermissions,
   } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
@@ -154,12 +155,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleRejectLogisticOrder = () => {
-    handleClickLogisticOrder?.(2, order?.logistic_order_id)
+    handleClickLogisticOrder?.(2, orderAssingId || order?.logistic_order_id)
     handleArrowBack()
   }
 
   const handleAcceptLogisticOrder = (order: any) => {
-    handleClickLogisticOrder?.(1, order?.logistic_order_id)
+    handleClickLogisticOrder?.(1, orderAssingId || order?.logistic_order_id)
     if (order?.order_group) {
       handleArrowBack()
     }

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

@@ -16,12 +16,13 @@ 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'
@@ -38,10 +39,13 @@ 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 distanceUnit = configs?.distance_unit?.value
+
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
   const [isReadMore, setIsReadMore] = useState(false)
@@ -105,7 +109,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   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 +197,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

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/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 });
+      }
     }
   };
 
@@ -81,29 +86,29 @@ export const PreviousOrders = (props: any) => {
                 imgRightSrc={null}
                 style={{ borderRadius: 7, height: 40 }}
                 parentStyle={{ width: '100%' }}
-                textStyle={{ color: theme.colors.primary }}
+                textStyle={{ color: theme?.colors?.white }}
               />
             ) : (
               <>
                 <OButton
                   text={t('REJECT', 'Reject')}
                   onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                  bgColor={theme.colors.danger}
-                  borderColor={theme.colors.danger}
+                  bgColor={theme.colors.red}
+                  borderColor={theme.colors.red}
                   imgRightSrc={null}
                   style={{ borderRadius: 7, height: 40 }}
                   parentStyle={{ width: '45%' }}
-                  textStyle={{ color: theme.colors.dangerText }}
+                  textStyle={{ color: theme.colors.white }}
                 />
                 <OButton
                   text={t('ACCEPT', 'Accept')}
                   onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                  bgColor={theme.colors.successOrder}
-                  borderColor={theme.colors.successOrder}
+                  bgColor={theme.colors.green}
+                  borderColor={theme.colors.green}
                   imgRightSrc={null}
                   style={{ borderRadius: 7, height: 40 }}
                   parentStyle={{ width: '45%' }}
-                  textStyle={{ color: theme.colors.successText }}
+                  textStyle={{ color: theme.colors.white }}
                 />
               </>
             )}

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/BusinessBasicInformation/index.tsx

@@ -46,8 +46,16 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+	const hideTime = theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+	const hideReviews = theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+	const hideReviewsPopup = theme?.business_view?.components?.header?.components?.reviews?.hidden
+	const hideDistance = theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+	const hideInfoIcon = theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
+	const hideCity = theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
+	const hideHeader = theme?.business_view?.components?.header?.hidden
 
 	const styles = StyleSheet.create({
 		businesInfoheaderStyle: {
@@ -249,9 +257,9 @@ export const BusinessBasicInformation = (
 								iconTitle='snapchat'
 							/>
 						)}
-						{isChewLayout && (
+						{isChewLayout && !hideInfoIcon && (
 							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
-								<OText 
+								<OText
 									color={theme.colors.primary}
 									style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
 									size={12}
@@ -267,44 +275,46 @@ export const BusinessBasicInformation = (
 	}
 
 	return (
-		<BusinessContainer isChewLayout={isChewLayout && !showLogo}>
-			<BusinessHeader
-				isChewLayout={isChewLayout}
-				style={
-					isBusinessInfoShow
-						? styles.businesInfoheaderStyle
-						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
-				}
-				{...(!loading && {
-					source: (header || businessState?.business?.header) ? {
-						uri: header || optimizeImage(businessState?.business?.header, 'h_250,c_limit')
-					} : theme?.images?.dummies?.businessHeader
-				})}
-				imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
-			>
-				{!isBusinessInfoShow && !isChewLayout && (
-					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
-						<OIcon src={theme.images.general.info} width={24} />
-					</WrapBusinessInfo>
-				)}
-				{isChewLayout && !loading && (
-					<View style={styles.headerChewStyle}>
-						<OText size={24} weight={'600'} mBottom={-5}>
-							{business?.name}
-						</OText>
-						{business?.city?.name && (
-							<OText>
-								{business?.city?.name}
+		<BusinessContainer isChewLayout={isChewLayout && hideLogo}>
+			{!hideHeader && (
+				<BusinessHeader
+					isChewLayout={isChewLayout}
+					style={
+						isBusinessInfoShow
+							? styles.businesInfoheaderStyle
+							: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
+					}
+					{...(!loading && {
+						source: (header || businessState?.business?.header) ? {
+							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header
+						} : theme?.images?.dummies?.businessHeader
+					})}
+					imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
+				>
+					{!isBusinessInfoShow && !hideInfoIcon && !isChewLayout && (
+						<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
+							<OIcon src={theme.images.general.info} width={24} />
+						</WrapBusinessInfo>
+					)}
+					{isChewLayout && !loading && (
+						<View style={styles.headerChewStyle}>
+							<OText size={24} weight={'600'} mBottom={-5}>
+								{business?.name}
 							</OText>
-						)}
-						<View style={styles.socialIconsChewContainer}>
-							<SocialIcons />
+							{business?.city?.name && !hideCity && (
+								<OText>
+									{business?.city?.name}
+								</OText>
+							)}
+							<View style={styles.socialIconsChewContainer}>
+								<SocialIcons />
+							</View>
 						</View>
-					</View>
-				)}
-			</BusinessHeader>
+					)}
+				</BusinessHeader>
+			)}
 			<BusinessInfo style={styles.businessInfo}>
-				{showLogo && (
+				{!hideLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
 						{!isBusinessInfoShow && (
 							logo || businessState?.business?.logo ?
@@ -384,34 +394,43 @@ export const BusinessBasicInformation = (
 									</Placeholder>
 								)}
 								<View style={styles.bullet}>
-									<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-										{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
-									</OText>
-									{orderState?.options?.type === 1 ? (
+									{!hideDeliveryFee && (
 										<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-											{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
+											{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
 										</OText>
-									) : (
+									)}
+									{!hideTime && (
+										<>
+											{orderState?.options?.type === 1 ? (
+												<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+													{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
+												</OText>
+											) : (
+												<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+													{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
+												</OText>
+											)}
+										</>
+									)}
+									{!hideDistance && (
 										<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-											{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
+											{parseDistance(business?.distance || 0) + `  \u2022 `}
 										</OText>
 									)}
-									<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-										{parseDistance(business?.distance || 0) + `  \u2022 `}
-									</OText>
-								</View>
-
-								<View style={styles.reviewStyle}>
-									<OIcon
-										src={theme.images.general.star}
-										width={14}
-										color={theme.colors.textSecondary}
-										style={{ marginTop: -2, marginEnd: 2 }}
-									/>
-									<OText size={12} color={theme.colors.textSecondary}>
-										{business?.reviews?.total}
-									</OText>
 								</View>
+								{!hideReviews && (
+									<View style={styles.reviewStyle}>
+										<OIcon
+											src={theme.images.general.star}
+											width={14}
+											color={theme.colors.textSecondary}
+											style={{ marginTop: -2, marginEnd: 2 }}
+										/>
+										<OText size={12} color={theme.colors.textSecondary}>
+											{business?.reviews?.total}
+										</OText>
+									</View>
+								)}
 							</BusinessInfoItem>
 						</View>
 						<WrapReviews>
@@ -420,7 +439,7 @@ export const BusinessBasicInformation = (
 									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
 										<>
 											<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-												<OText 
+												<OText
 													color={theme.colors.primary}
 													style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
 													size={12}
@@ -431,15 +450,17 @@ export const BusinessBasicInformation = (
 											<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 										</>
 									)}
-									<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
-										<OText
-											color={theme.colors.primary}
-											style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
-											size={12}
-										>
-											{t('REVIEWS', 'Reviews')}
-										</OText>
-									</TouchableOpacity>
+									{!hideReviewsPopup && (
+										<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
+											<OText
+												color={theme.colors.primary}
+												style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+												size={12}
+											>
+												{t('REVIEWS', 'Reviews')}
+											</OText>
+										</TouchableOpacity>
+									)}
 								</>
 							)}
 						</WrapReviews>

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>