ordering-ui-react-native 0.17.65 → 0.17.66-release

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

@@ -7,7 +7,7 @@ export const TopHeader = styled.View`
   width: 100%;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ hideArrow }: any) => hideArrow ? 'flex-end' : 'space-between'};
   z-index: 1;
   height: 60px;
   min-height: 60px;
@@ -24,7 +24,7 @@ export const WrapSearchBar = styled.View`
   flex: 1;
 `
 export const WrapContent = styled.View`
-  padding: 10px 40px;
+  padding-vertical: 10px;
 `
 
 export const BusinessProductsListingContainer = styled.ScrollView`

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

@@ -3,6 +3,7 @@ import {
 	BusinessReviews as BusinessReviewController,
 	useLanguage,
 	useOrder,
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
@@ -30,6 +31,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const theme = useTheme();
 	const [searchReview, setSearchReview] = useState('')
 	const [orderState] = useOrder();
+	const [{ parseDate }] = useUtils()
 
 	const styles = StyleSheet.create({
 		starIcon: {
@@ -94,7 +96,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const ReviewItem = ({ comment, created_at, total }: any) => (
 		<View style={{ marginBottom: 30 }}>
 			<OText size={12} color={theme.colors.textSecondary}>
-				{moment(created_at).format('MMMM d, yyyy • hh:mm')}
+				{parseDate(created_at, { outputFormat: 'MMMM D, YYYY • hh:mm A' })}
 			</OText>
 			<OText size={12} color={theme.colors.textNormal}>{comment}</OText>
 		</View>

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx

@@ -284,7 +284,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<IconAntDesign name='arrowleft' size={26} />
+						<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
 					</TouchableOpacity>
 				)}
 				<Search>

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -18,8 +18,7 @@ import {
 	useSession,
 	useOrder,
 	useConfig,
-	useUtils,
-	useOrderingTheme
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
@@ -74,13 +73,26 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		logosLayout
 	} = props;
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
+
+	const [, t] = useLanguage();
+	const [{ user, auth }] = useSession();
+	const [orderState, { changeCityFilter }] = useOrder();
+	const [{ configs }] = useConfig();
+	const [{ parseDate }] = useUtils();
+
 	const appState = useRef(AppState.currentState)
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
-	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const [refreshing] = useState(false);
-	const bgHeader =  orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image 
+	const allCitiesDisabled = citiesState?.cities?.every((city: any) => !city.enabled)
+	const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2 || allCitiesDisabled) ?? true
+	const hideHero = theme?.business_listing_view?.components?.business_hero?.hidden
+	const hidePreviousOrders = theme?.business_listing_view?.components?.previous_orders_block?.hidden
+	const hideHighestBusiness = theme?.business_listing_view?.components?.highest_rated_business_block?.hidden
+	const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
+	const bgHeader = theme?.business_listing_view?.components?.business_hero?.components?.image
+	const bgHeaderHeight = theme?.business_listing_view?.components?.business_hero?.components?.style?.height
+
 	const styles = StyleSheet.create({
 		container: {
 			marginBottom: 0,
@@ -144,19 +156,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 	});
 
-
-	const [, t] = useLanguage();
-	const [{ user, auth }] = useSession();
-	const [orderState, { changeCityFilter }] = useOrder();
-	const [{ configs }] = useConfig();
-	const [{ parseDate }] = useUtils();
-
 	const { top } = useSafeAreaInsets();
 
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
-	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
+	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options?.value)
 	const [isOpenCities, setIsOpenCities] = useState(false)
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
@@ -220,7 +225,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	useEffect(() => {
 		if (!businessesList?.loading) {
-			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
+			const fb = businessesList.businesses.filter((b) => b?.featured && b?.open);
 			const ary = [];
 			while (fb.length > 0) {
 				ary.push(fb.splice(0, 2));
@@ -289,6 +294,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		setIsOpenCities(false)
 	}, [orderState?.options?.city_id])
 
+	useEffect(() => {
+		if (!citiesState?.cities?.length || !orderState?.options?.city_id) return
+		const selectedCity = citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)
+		if (!selectedCity || !selectedCity?.enabled) changeCityFilter(null)
+	}, [citiesState, orderState?.options?.city_id])
+
 	if (logosLayout) {
 		return (
 			<BusinessLogosContainer
@@ -364,7 +375,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			)}
 			<View style={{
 				height: !isPreOrderSetting && isChewLayout ? 150 : isChewLayout ? 200 : isFarAway ? 150 : 100,
-				marginTop: Platform.OS == 'ios' ? 0 : 50,
+				marginTop: isChewLayout ? 0 : Platform.OS == 'ios' ? 0 : 50,
 				backgroundColor: isChewLayout ? theme?.colors?.chew : theme.colors?.white
 			}}
 			>
@@ -466,18 +477,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				)}
 			</View>
 			{!isChewLayout ? (
-				<HeaderWrapper
-					source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
-					style={{ paddingTop: top + 20 }}
-					resizeMode='cover'
-				>
-					{!auth && (
-
-						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-							<IconAntDesign name='arrowleft' size={26} />
-						</TouchableOpacity>
+				<>
+					{!hideHero ? (
+						<HeaderWrapper
+							source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
+							style={{ paddingTop: top + 20 }}
+							resizeMode='cover'
+							bgHeaderHeight={bgHeaderHeight}
+						>
+							{!auth && (
+								<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+								</TouchableOpacity>
+							)}
+						</HeaderWrapper>
+					) : (
+						<>
+							{!auth && (
+								<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+								</TouchableOpacity>
+							)}
+						</>
 					)}
-				</HeaderWrapper>
+				</>
 			) : (
 				<OrderTypesContainer>
 					<OrderTypeSelector
@@ -502,10 +525,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</TouchableOpacity>
 				</View>
 			)}
-			<OrderProgress
-				{...props}
-				isFocused={isFocused}
-			/>
+			{!hidePreviousOrders && (
+				<OrderProgress
+					{...props}
+					isFocused={isFocused}
+				/>
+			)}
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
@@ -538,23 +563,28 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</FeaturedWrapper>
 				)
 			}
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			{
-				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses
-						onBusinessClick={handleBusinessClick}
-						navigation={navigation}
-						favoriteIds={favoriteIds}
-						setFavoriteIds={setFavoriteIds}
-					/>
-				)
-			}
+			{!isChewLayout && !hideHighestBusiness && (
+				<>
+					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
+					{
+						!businessId && !props.franchiseId && (
+							<HighestRatedBusinesses
+								propsToFetch={props.propsToFetch}
+								onBusinessClick={handleBusinessClick}
+								navigation={navigation}
+								favoriteIds={favoriteIds}
+								setFavoriteIds={setFavoriteIds}
+							/>
+						)
+					}
+				</>
+			)}
 
-			<PageBanner position='app_business_listing' />
+			<PageBanner position='app_business_listing' navigation={navigation} />
 
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<ListWrapper>
-				{!businessId && (
+			<ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+				{!businessId && !isAllCategoriesHidden && (
 					<BusinessTypeFilter
 						images={props.images}
 						businessTypes={props.businessTypes}
@@ -563,7 +593,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						setBusinessTypes={setBusinessTypes}
 					/>
 				)}
-				{!businessesList.loading && businessesList.businesses.length === 0 && (
+				{!businessesList.loading && businessesList.businesses.length === 0 && businessesList?.fetched && (
 					<NotFoundSource
 						content={t(
 							'NOT_FOUND_BUSINESSES',
@@ -576,7 +606,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<BusinessController
 							key={`${business.id}_` + i}
 							enableIntersection
-							isCustomLayout={isChewLayout}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -596,7 +625,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						/>
 					)
 				)}
-				{businessesList.loading && (
+				{(businessesList.loading || !businessesList?.fetched) && (
 					<>
 						{[
 							...Array(
@@ -664,10 +693,16 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 };
 
 export const BusinessesListing = (props: BusinessesListingParams) => {
+
 	const BusinessesListingProps = {
 		...props,
 		isForceSearch: Platform.OS === 'ios',
 		UIComponent: BusinessesListingUI,
+		paginationSettings: {
+			initialPage: 1,
+			pageSize: 50,
+			controlType: 'infinity'
+		}
 	};
 
 	return <BusinessesListingController {...BusinessesListingProps} />;

package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx

@@ -67,7 +67,6 @@ export const HeaderWrapper = styled.ImageBackground`
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
 `;
 
 export const FeaturedWrapper = styled.View`

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

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react'
 import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';
 

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CContainer, CheckoutAction, Divider, DriverTipsContainer } from './styles';
+import { CContainer, CheckoutAction, DriverTipsContainer } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -23,7 +23,7 @@ import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
-import { OAlert } from '../../../../../src/components/shared'
+import { OAlert } from '../shared'
 import { PlaceSpot } from '../PlaceSpot'
 import { DriverTips } from '../DriverTips'
 
@@ -41,7 +41,17 @@ const CartUI = (props: any) => {
     commentState,
     onNavigationRedirect,
     handleRemoveOfferClick,
-    isMultiCheckout
+    isMultiCheckout,
+    hideDeliveryFee,
+    hideDriverTip,
+    hideCouponInput,
+    preorderSlotInterval,
+    preorderLeadTime,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringTypes,
+    isFromUpselling
   } = props
 
   const theme = useTheme();
@@ -56,18 +66,15 @@ const CartUI = (props: any) => {
   const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [openPlaceModal, setOpenPlaceModal] = useState(false)
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
-  const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
-  const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
-
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
   const placeSpotTypes = [4]
-
+  const hideCartComments = theme?.business_view?.components?.cart?.components?.comments?.hidden
+  const hideCartDiscount = theme?.business_view?.components?.cart?.components?.discount?.hidden
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
@@ -101,21 +108,45 @@ const CartUI = (props: any) => {
     }
   }
 
-  const handleUpsellingPage = () => {
+  const handleUpsellingPage = (individualCart : any) => {
+    const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    if (isCheckoutMultiBusinessEnabled && openCarts.length > 1) {
-      props.onNavigationRedirect('CheckoutNavigator', {
-        screen: 'MultiCheckout'
-      })
-    } else {
-      props.onNavigationRedirect('CheckoutNavigator', {
+
+    const cartsAvailable: any = Object.values(orderState?.carts)
+      ?.filter((_cart: any) => _cart?.valid && _cart?.status !== 2 && _cart?.products?.length)
+      ?.filter((_c: any) => !isProductCartParam ? _c.uuid !== individualCart?.uuid : _c)
+    if (cartsAvailable.length === 1 || !isMultiCheckout) {
+      const cart = isMultiCheckout ? cartsAvailable[0] : individualCart
+      onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
         cartUuid: cart?.uuid,
         businessLogo: cart?.business?.logo,
         businessName: cart?.business?.name,
         cartTotal: cart?.total
+      }, true)
+    } else {
+      const groupKeys: any = {}
+      cartsAvailable.forEach((_cart: any) => {
+        groupKeys[_cart?.group?.uuid]
+          ? groupKeys[_cart?.group?.uuid] += 1
+          : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
       })
+
+      if (
+        (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+        Object.keys(groupKeys).length > 1
+      ) {
+        onNavigationRedirect('CheckoutNavigator', {
+          screen: 'MultiCheckout',
+          checkCarts: true
+        }, true)
+      } else {
+        onNavigationRedirect('CheckoutNavigator', {
+          screen: 'MultiCheckout',
+          cartUuid: cartsAvailable[0]?.group?.uuid
+        }, true)
+      }
     }
   }
 
@@ -133,16 +164,16 @@ const CartUI = (props: any) => {
     return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
-  const onRemoveOffer = (id: number) => {
-    setConfirm({
-      open: true,
-      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
-      title: t('OFFER', 'Offer'),
-      handleOnAccept: () => {
-        setConfirm({ ...confirm, open: false })
-        handleRemoveOfferClick(id)
-      }
-    })
+  const OfferAlert = ({ offerId }: any) => {
+    return (
+      <OAlert
+        title={t('OFFER', 'Offer')}
+        message={t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')}
+        onAccept={() => handleRemoveOfferClick(offerId)}
+      >
+        <AntIcon style={{ marginLeft: 3 }} name='closecircle' size={16} color={theme.colors.primary} />
+      </OAlert>
+    )
   }
 
   const walletName: any = {
@@ -186,12 +217,14 @@ const CartUI = (props: any) => {
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
+        isFromUpselling={isFromUpselling}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
             key={`${product.code}_${i}`}
             isCartPending={isCartPending}
             isCartProduct
+            isDisabledEdit={!cart?.business_id}
             product={product}
             changeQuantity={changeQuantity}
             getProductMax={getProductMax}
@@ -233,9 +266,9 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                    </TouchableOpacity>
+                    {!!offer?.id && (
+                      <OfferAlert offerId={offer?.id} />
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -297,9 +330,9 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                    </TouchableOpacity>
+                    {!!offer?.id && (
+                      <OfferAlert offerId={offer?.id} />
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -307,10 +340,10 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+            {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !hideDeliveryFee && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price)}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
               </OSTable>
             )}
             {
@@ -324,9 +357,9 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                    </TouchableOpacity>
+                    {!!offer?.id && (
+                      <OfferAlert offerId={offer?.id} />
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -334,7 +367,7 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {cart?.driver_tip > 0 && (
+            {cart?.driver_tip > 0 && !hideDriverTip && (
               <OSTable>
                 <OText size={12} lineHeight={18}>
                   {t('DRIVER_TIP', 'Driver tip')}
@@ -356,18 +389,19 @@ const CartUI = (props: any) => {
                 <OText size={12}>-{parsePrice(event.amount, { isTruncable: true })}</OText>
               </OSTable>
             ))}
-            {isCouponEnabled && !isCartPending && (
+            {isCouponEnabled && !isCartPending && !hideCouponInput && (
               <OSTable>
                 <OSCoupon>
                   <CouponControl
                     businessId={businessId}
                     price={cart.total}
+                    cart={cart}
                   />
                 </OSCoupon>
               </OSTable>
             )}
 
-            {isMultiCheckout &&
+            {!isMultiCheckout &&
               cart &&
               cart?.valid &&
               orderState?.options?.type === 1 &&
@@ -382,13 +416,14 @@ const CartUI = (props: any) => {
                   <DriverTips
                     uuid={cart?.uuid}
                     businessId={cart?.business_id}
-                    driverTipsOptions={driverTipsOptions}
-                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
+                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
                     isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
                       ? cart?.driver_tip
                       : cart?.driver_tip_rate}
                     useOrderContext
+                    cart={cart}
                   />
                 </DriverTipsContainer>
               )}
@@ -522,14 +557,6 @@ const CartUI = (props: any) => {
           setOpenPlaceModal={setOpenPlaceModal}
         />
       </OModal>
-      <OAlert
-        open={confirm.open}
-        title={confirm.title}
-        content={confirm.content}
-        onAccept={confirm.handleOnAccept}
-        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
-      />
     </CContainer>
   )
 }