ordering-ui-react-native 0.14.28 → 0.14.30-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.28",
+  "version": "0.14.30-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -55,7 +55,7 @@
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#development",
+    "ordering-components": "github:Ordering-Inc/ordering-components#release",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",
@@ -70,7 +70,6 @@
     "react-native-bootsplash": "^3.2.3",
     "react-native-calendar-picker": "^7.1.2",
     "react-native-calendar-strip": "^2.2.5",
-    "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-document-picker": "^5.2.0",

package/src/components/ProductForm/index.tsx

@@ -132,7 +132,18 @@ export const ProductOptionsUI = (props: any) => {
                 ) : (
                   <>
                     <View style={{ flexDirection: 'column', width: '100%' }}>
-                      <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
+                      <View style={{ flexDirection: 'row', marginTop: 15 }}>
+                        <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{' '}</OText>
+                        {product?.calories && (
+                          <OText size={16} style={styles.caloriesStyle}>{product?.calories} cal</OText>
+                        )}
+                      </View>
+                      <View style={{ flexDirection: 'row', marginBottom: 10 }}>
+                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+                        {product?.offer_price && (
+                          <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
+                        )}
+                      </View>
                       {(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
                         <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
                           {
@@ -147,12 +158,6 @@ export const ProductOptionsUI = (props: any) => {
                           }
                         </OText>
                       )}
-                      <View style={{ flexDirection: 'row', marginBottom: 10}}>
-                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-                        {product?.offer_price && (
-                          <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
-                        )}
-                      </View>
                     </View>
                   </>
                 )}
@@ -162,17 +167,17 @@ export const ProductOptionsUI = (props: any) => {
               </ProductDescription>
               {loading && !product ? (
                 <>
-                  {[...Array(2)].map((item,i) => (
-                  <Placeholder key={i} style={{marginBottom: 20}} Animation={Fade}>
-                    <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
-                    {[...Array(3)].map((item,i) => (
-                      <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                        <PlaceholderLine height={30} width={10} style={{marginBottom: 20}} />
-                        <PlaceholderLine height={30} width={50} style={{marginBottom: 20}} />
-                        <PlaceholderLine height={30} width={30} style={{marginBottom: 20}} />
-                      </View>
-                    ))}
-                  </Placeholder>
+                  {[...Array(2)].map((item, i) => (
+                    <Placeholder key={i} style={{ marginBottom: 20 }} Animation={Fade}>
+                      <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
+                      {[...Array(3)].map((item, i) => (
+                        <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                          <PlaceholderLine height={30} width={10} style={{ marginBottom: 20 }} />
+                          <PlaceholderLine height={30} width={50} style={{ marginBottom: 20 }} />
+                          <PlaceholderLine height={30} width={30} style={{ marginBottom: 20 }} />
+                        </View>
+                      ))}
+                    </Placeholder>
                   ))}
                 </>
               ) : (
@@ -221,7 +226,7 @@ export const ProductOptionsUI = (props: any) => {
                                           state={currentState}
                                           disabled={isSoldOut || maxProductQuantity <= 0}
                                         />
-                                      ): null
+                                      ) : null
                                     })
                                   }
                                 </WrapperSubOption>
@@ -383,6 +388,9 @@ const styles = StyleSheet.create({
     textDecorationLine: 'line-through',
     marginLeft: 7,
     marginRight: 7
+  },
+  caloriesStyle: {
+    color: '#808080'
   }
 })
 

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessProductsList/styles.tsx

@@ -15,5 +15,5 @@ export const WrapperNotFound = styled.View`
 export const ProductsWrapper = styled.View`
   flex-direction: row;
   flex-wrap: wrap;
-  margin-bottom: 20px;
+  align-items: flex-start;
 `

package/themes/instacart/src/components/SingleProductCard/index.tsx

@@ -6,7 +6,7 @@ import {
   CardInfo,
   SoldOut
 } from './styles'
-import { StyleSheet, TouchableOpacity, Dimensions, View } from 'react-native'
+import { StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
 
@@ -23,7 +23,11 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 
   const styles = StyleSheet.create({
     container: {
-      width: (windowWidth - 80) / 2
+      width: (windowWidth - 80) / 2,
+      height: (windowWidth - 80) / 2 + 40
+    },
+    textStyle: {
+      flex: 1,
     },
     soldOutTextStyle : {
       textTransform: 'capitalize',
@@ -31,14 +35,9 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       fontSize: 12,
       lineHeight: 18
     },
-    imageWrapper: {
+    productStyle: {
       width: (windowWidth - 160) / 2,
       height: (windowWidth - 160) / 2,
-      position: 'relative'
-    },
-    productStyle: {
-      width: '100%',
-      height: '100%',
       borderRadius: 3,
 		  marginTop: 5
     },
@@ -75,30 +74,26 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       onPress={() => onProductClick?.(product)}
 		  activeOpacity={0.8}
     >
-      <View
-        style={styles.imageWrapper}
-      >
-        <OIcon
-          url={optimizeImage(product?.images, 'h_200,c_limit')}
-          src={!product?.images && theme.images.dummies.product}
-          style={{...styles.productStyle, opacity: (isSoldOut || maxProductQuantity <= 0) ? 0.4 : 1}}
-        />
-        {(isSoldOut || maxProductQuantity <= 0) && (
-          <SoldOut>
-            <OText size={10} style={styles.soldOutTextStyle}>{t('SOLD_OUT', 'SOLD OUT')}</OText>
-          </SoldOut>
-        )}
-      </View>
+      <OIcon
+        url={optimizeImage(product?.images, 'h_200,c_limit')}
+        src={!product?.images && theme.images.dummies.product}
+        style={{...styles.productStyle, opacity: (isSoldOut || maxProductQuantity <= 0) ? 0.4 : 1}}
+      />
       <CardInfo>
         <OText color={theme.colors.textPrimary} style={{...theme.labels.normal, marginTop: 9}}>{parsePrice(product?.price)}</OText>
-        <OText numberOfLines={1} ellipsizeMode='tail' style={{...theme.labels.small}}>{product?.name}</OText>
-        <OText color={theme.colors.textSecondary} size={9} numberOfLines={2} ellipsizeMode='tail' style={{...theme.labels.small}}>{product?.description}</OText>
+        <OText numberOfLines={1} ellipsizeMode='tail' style={{...styles.textStyle, ...theme.labels.small}}>{product?.name}</OText>
+        <OText color={theme.colors.textSecondary} size={9} numberOfLines={2} ellipsizeMode='tail' style={{...styles.textStyle, ...theme.labels.small}}>{product?.description}</OText>
       </CardInfo>
 
 		<TouchableOpacity style={styles.addBtn} onPress={() => onProductClick?.(product)} activeOpacity={0.7}>
 			<OIcon src={theme.images.general.plus_circle} />
 		</TouchableOpacity>
 
+      {(isSoldOut || maxProductQuantity <= 0) && (
+        <SoldOut>
+          <OText size={10} style={styles.soldOutTextStyle}>{t('SOLD_OUT', 'SOLD OUT')}</OText>
+        </SoldOut>
+      )}
     </CardContainer>
   )
 }

package/themes/instacart/src/components/SingleProductCard/styles.tsx

@@ -1,9 +1,12 @@
 import styled from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
-  flex-direction: column;
+  /* flex-grow: 1; */
+  align-items: flex-start;
   padding: 10px;
   position: relative;
+  /* margin-end: 10px; */
+  border-radius: 3px;
 `
 export const CardInfo = styled.View`
   flex: 1;
@@ -13,7 +16,6 @@ export const SoldOut = styled.View`
   position: absolute;
   background: ${(props: any) => props.theme.colors.black} 0% 0% no-repeat padding-box;
   padding: 3px 9px;
-  left: 0px;
-  bottom: -5px;
-  border-radius: 3px;
+  top: 91px;
+  left: 10px;
 `

package/themes/original/index.tsx

@@ -28,8 +28,6 @@ import { HelpGuide } from './src/components/HelpGuide';
 import { HelpOrder } from './src/components/HelpOrder';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
-import { Wallets } from './src/components/Wallets';
-import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -88,8 +86,6 @@ export {
 	HelpOrder,
 	NotFoundSource,
 	OrderTypeSelector,
-  Wallets,
-  PaymentOptionWallet,
 
 	// OComponents
 	Toast,

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

@@ -9,19 +9,15 @@ import {
 	BIInfo,
 	BIContentInfo,
 	BITotal,
-	BIActions,
-	PriceContainer
+	BIActions
 } from './styles';
-import { OAlert, OButton, OIcon, OText } from '../shared';
+import { OAlert, OIcon, OText } from '../shared';
 
 export const BusinessItemAccordion = (props: any) => {
 	const {
 		cart,
 		moment,
-		singleBusiness,
-		handleClearProducts,
-		handleClickCheckout,
-		checkoutButtonDisabled
+		handleClearProducts
 	} = props
 
 	const [orderState] = useOrder();
@@ -33,7 +29,7 @@ export const BusinessItemAccordion = (props: any) => {
 	const isClosed = !cart?.valid_schedule
 	const isProducts = cart?.products?.length
 
-	const [isActive, setActiveState] = useState(!!singleBusiness)
+	const [isActive, setActiveState] = useState(false)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
@@ -44,7 +40,7 @@ export const BusinessItemAccordion = (props: any) => {
 	}, [orderState?.carts])
 
 	return (
-		<BIContainer isClosed={isClosed} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
+		<BIContainer isClosed={isClosed}>
 			<BIHeader
 				isClosed={isClosed}
 				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
@@ -74,39 +70,37 @@ export const BusinessItemAccordion = (props: any) => {
 							{props.onNavigationRedirect && !isClosed && (
 								<>
 									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
-										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
+										<OText color={theme.colors.textSecondary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
 									</TouchableOpacity>
-								</>
-							)}
-							{!isCartPending && !isClosed && (
-								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
-									<OAlert
-										title={t('DELETE_CART', 'Delete Cart')}
-										message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
-										onAccept={() => handleClearProducts()}
-									>
-										<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
-									</OAlert>
 								</>
 							)}
-							{props.handleChangeStore && (
-								<>
-									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
-									<TouchableOpacity
-										onPress={props.handleChangeStore}
-									>
-										<OText
-											size={12}
-											lineHeight={18}
-											color={theme.colors.textSecondary}
-											style={{ textDecorationLine: 'underline' }}
-										>
-											{t('CHANGE_STORE', 'Change store')}
-										</OText>
-									</TouchableOpacity>
-								</>
+							{!isCartPending && !isClosed && (
+								<OAlert
+									title={t('DELETE_CART', 'Delete Cart')}
+									message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
+									onAccept={() => handleClearProducts()}
+								>
+									<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
+								</OAlert>
 							)}
+              {props.handleChangeStore && (
+                <>
+                  <OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+                  <TouchableOpacity
+                    onPress={props.handleChangeStore}
+                  >
+                    <OText
+                      size={12}
+                      lineHeight={18}
+                      color={theme.colors.textSecondary}
+                      style={{ textDecorationLine: 'underline' }}
+                    >
+                      {t('CHANGE_STORE', 'Change store')}
+                    </OText>
+                  </TouchableOpacity>
+                </>
+              )}
 						</View>
 					</BIContentInfo>
 				</BIInfo>
@@ -139,19 +133,6 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled && (
-				<PriceContainer>
-					<OText>{parsePrice(cart?.total)}</OText>
-					<OButton
-						onClick={handleClickCheckout}
-						textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-						style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-						text={t('CHECKOUT', 'Checkout')}
-						bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-						borderColor={theme.colors.primary}
-					/>
-				</PriceContainer>
-			)}
 
 			<BIContent style={{ display: isActive ? 'flex' : 'none' }}>
 				{props.children}

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

@@ -52,10 +52,3 @@ export const BIActions = styled.View`
   align-items: center;
   justify-content: flex-end;
 `
-
-export const PriceContainer = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1
-`

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

@@ -42,7 +42,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   return (
     <ProductsContainer>
       {category.id &&
-        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
+        categoryState.products?.map((product: any) => (
           <SingleProductCard
             key={'prod_' + product.id}
             isSoldOut={product.inventoried && !product.quantity}
@@ -63,7 +63,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               {t('FEATURED', 'Featured')}
             </OText>
             <>
-              {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map(
+              {categoryState.products?.map(
                 (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
@@ -110,7 +110,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       </OText>
                     </View>
                     <>
-                      {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
+                      {products.map((product: any, i: any) => (
                         <SingleProductCard
                           key={i}
                           isSoldOut={product.inventoried && !product.quantity}

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

@@ -57,7 +57,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
-    businessId
 	} = props;
 
 	const theme = useTheme();
@@ -257,20 +256,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 
-            {!businessId && (
-              <SearchBar
-                onSearch={handleChangeSearch}
-                searchValue={searchValue}
-                lazyLoad
-                isCancelXButtonShow={!!searchValue}
-                borderStyle={styles.borderStyle}
-                onCancel={() => handleChangeSearch('')}
-                placeholder={t('SEARCH', 'Search')}
-                height={26}
-                inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-              />
-            )}
-
+						<SearchBar
+							onSearch={handleChangeSearch}
+							searchValue={searchValue}
+							lazyLoad
+							isCancelXButtonShow={!!searchValue}
+							borderStyle={styles.borderStyle}
+							onCancel={() => handleChangeSearch('')}
+							placeholder={t('SEARCH', 'Search')}
+							height={26}
+							inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+						/>
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
@@ -281,7 +277,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				</OrderProgressWrapper>
 			)}
-			{!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
+			{!props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 				<FeaturedWrapper>
 					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
 					<ScrollView
@@ -310,19 +306,17 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</FeaturedWrapper>
 			)}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-      {!businessId && !props.franchiseId && (
+      {!props.franchiseId && (
         <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
       )}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
-        {!businessId && (
-          <BusinessTypeFilter
-            images={props.images}
-            businessTypes={props.businessTypes}
-            defaultBusinessType={props.defaultBusinessType}
-            handleChangeBusinessType={handleChangeBusinessType}
-          />
-        )}
+				<BusinessTypeFilter
+					images={props.images}
+					businessTypes={props.businessTypes}
+					defaultBusinessType={props.defaultBusinessType}
+					handleChangeBusinessType={handleChangeBusinessType}
+				/>
 				{!businessesList.loading && businessesList.businesses.length === 0 && (
 					<NotFoundSource
 						content={t(

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

@@ -113,15 +113,6 @@ const CartUI = (props: any) => {
     }
   }
 
-  const walletName: any = {
-    cash: {
-      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
-    },
-    credit_point: {
-      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
-    }
-  }
-
   return (
     <CContainer>
       {openUpselling && (
@@ -139,14 +130,11 @@ const CartUI = (props: any) => {
       )}
       <BusinessItemAccordion
         cart={cart}
-        singleBusiness={props.singleBusiness}
         moment={momentFormatted}
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
         handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
-        handleClickCheckout={() => setOpenUpselling(true)}
-        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any) => (
           <ProductItemAccordion
@@ -203,7 +191,7 @@ const CartUI = (props: any) => {
               cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
                 <OSTable key={fee?.id}>
                   <OSRow>
-                    <OText numberOfLines={1} size={12} lineHeight={18}>
+                    <OText numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                       ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                     </OText>
@@ -215,15 +203,6 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {cart?.service_fee > 0 && !cart?.fees?.length && (
-              <OSTable>
-                <OText size={12} lineHeight={18}>
-                  {t('SERVICE_FEE', 'Service Fee')}
-                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                </OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
-              </OSTable>
-            )}
             {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
@@ -244,14 +223,15 @@ const CartUI = (props: any) => {
                 <OText size={12} lineHeight={18}>{parsePrice(cart?.driver_tip)}</OText>
               </OSTable>
             )}
-            {cart?.payment_events?.length > 0 && cart?.payment_events?.map((event: any) => (
-              <OSTable key={event.id}>
-                <OText size={12} numberOfLines={1}>
-                  {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
+            {cart?.service_fee > 0 && (
+              <OSTable>
+                <OText size={12} lineHeight={18}>
+                  {t('SERVICE_FEE', 'Service Fee')}
+                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
                 </OText>
-                <OText size={12}>-{parsePrice(event.amount)}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
               </OSTable>
-            ))}
+            )}
             {isCouponEnabled && !isCartPending && (
               <OSTable>
                 <OSCoupon>
@@ -269,7 +249,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText size={14} lineHeight={21} weight={'600'}>
-                  {parsePrice(cart?.balance ?? cart?.total)}
+                  {cart?.total >= 1 && parsePrice(cart?.total)}
                 </OText>
               </OSTable>
             </OSTotal>

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

@@ -30,7 +30,6 @@ export const CartContent = (props: any) => {
 							{cart.products.length > 0 && (
 								<>
 									<Cart
-                    singleBusiness={props.singleBusiness}
                     isFranchiseApp={props.isFranchiseApp}
 										cart={cart}
                     cartuuid={cart.uuid}

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

@@ -23,7 +23,6 @@ import { PaymentOptions } from '../PaymentOptions';
 import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
-import { PaymentOptionWallet } from '../PaymentOptionWallet';
 
 import {
 	ChContainer,
@@ -38,8 +37,7 @@ import {
 	ChUserDetails,
 	ChCart,
 	DeliveryOptionsContainer,
-	DeliveryOptionItem,
-  WalletPaymentOptionContainer
+	DeliveryOptionItem
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -506,15 +504,6 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-          {!cartState.loading && cart && (
-            <WalletPaymentOptionContainer>
-              <PaymentOptionWallet
-                cart={cart}
-              />
-            </WalletPaymentOptionContainer>
-          )}
-
-
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
@@ -554,8 +543,8 @@ const CheckoutUI = (props: any) => {
 					)}
 
 					{!cartState.loading && cart && (
-            <View>
-							<ChErrors style={{ marginBottom: 0 }}>
+						<ChSection style={{ paddingTop: 0, paddingBottom: 20, paddingHorizontal: 20 }}>
+							<ChErrors>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -583,7 +572,7 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 							</ChErrors>
-						</View>
+						</ChSection>
 					)}
 					<OModal
 						open={openChangeStore && props.isFranchiseApp}