ordering-ui-react-native 0.14.25 → 0.14.26-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.25",
+  "version": "0.14.26-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",

package/src/components/Messages/index.tsx

@@ -45,6 +45,7 @@ const imgOptions = {
   includeBase64: true,
   selectionLimit: 0
 }
+const filterSpecialStatus = ['prepared_in', 'delivered_in']
 
 const MessagesUI = (props: MessagesParams) => {
   const {
@@ -118,7 +119,11 @@ const MessagesUI = (props: MessagesParams) => {
   const messageConsole = (message: any) => {
     return message.change?.attribute !== 'driver_id'
       ?
-      `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+      `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
+        filterSpecialStatus.includes(message.change.attribute) ? 
+        `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
+        `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+      }`
       : message.change.new
         ?
         `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`

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>
@@ -232,21 +237,19 @@ export const ProductOptionsUI = (props: any) => {
                       </React.Fragment>
                     )
                   }))}
-                  {!product?.hide_special_instructions && (  
-                    <ProductComment>
-                      <SectionTitle>
-                        <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-                      </SectionTitle>
-                      <OInput
-                        multiline
-                        placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-                        value={productCart.comment}
-                        onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-                        isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-                        style={styles.comment}
-                      />
-                    </ProductComment>
-                  )}
+                  <ProductComment>
+                    <SectionTitle>
+                      <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+                    </SectionTitle>
+                    <OInput
+                      multiline
+                      placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+                      value={productCart.comment}
+                      onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+                      isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+                      style={styles.comment}
+                    />
+                  </ProductComment>
                 </ProductEditions>
               )}
             </WrapContent>
@@ -383,6 +386,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/doordash/src/components/ProductForm/index.tsx

@@ -287,22 +287,20 @@ export const ProductOptionsUI = (props: any) => {
 											</React.Fragment>
 										)
 									}))}
-									{!product?.hide_special_instructions && (
-										<ProductComment onLayout={(e: any) => setCommentY(e.nativeEvent.layout.y + e.nativeEvent.layout.height)}>
-											<SectionTitle>
-												<OText style={theme.labels.middle as TextStyle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-											</SectionTitle>
-											<OInput
-												multiline
-												placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-												value={productCart.comment}
-												onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-												isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-												style={styles.comment}
-												inputStyle={{ fontSize: 12, paddingBottom: 7, paddingTop: 17 }}
-											/>
-										</ProductComment>
-									)}
+									<ProductComment onLayout={(e: any) => setCommentY(e.nativeEvent.layout.y + e.nativeEvent.layout.height)}>
+										<SectionTitle>
+											<OText style={theme.labels.middle as TextStyle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+										</SectionTitle>
+										<OInput
+											multiline
+											placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+											value={productCart.comment}
+											onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+											isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+											style={styles.comment}
+											inputStyle={{ fontSize: 12, paddingBottom: 7, paddingTop: 17 }}
+										/>
+									</ProductComment>
 									{productCart && !isSoldOut && maxProductQuantity > 0 && (
 										<View style={{ paddingVertical: 4, marginBottom: 10 }}>
 											<SectionTitle>

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

@@ -235,21 +235,19 @@ export const ProductOptionsUI = (props: any) => {
 											</React.Fragment>
 										)
 									}))}
-									{!product?.hide_special_instructions && (
-										<ProductComment>
-											<SectionTitle>
-												<OText style={theme.labels.middle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-											</SectionTitle>
-											<OInput
-												multiline
-												placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-												value={productCart.comment}
-												onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-												isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-												style={{ ...styles.comment, borderColor: theme.colors.border }}
-											/>
-										</ProductComment>
-									)}
+									<ProductComment>
+										<SectionTitle>
+											<OText style={theme.labels.middle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+										</SectionTitle>
+										<OInput
+											multiline
+											placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+											value={productCart.comment}
+											onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+											isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+											style={{ ...styles.comment, borderColor: theme.colors.border }}
+										/>
+									</ProductComment>
 								</ProductEditions>
 							)}
 						</WrapContent>

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/kiosk/src/components/ProductForm/index.tsx

@@ -438,21 +438,19 @@ export const ProductOptionsUI = (props: any) => {
                     </React.Fragment>
                   )
                 }))}
-                {!product?.hide_special_instructions && (
-                  <ProductComment>
-                    <SectionTitle>
-                      <OText size={28} weight="bold">{t('SPECIAL_COMMENT', 'Special comment')}</OText>
-                    </SectionTitle>
-                    <OInput
-                      multiline
-                      placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-                      value={productCart.comment}
-                      onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
-                      isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
-                      style={styles.comment}
-                    />
-                  </ProductComment>
-                )}
+                <ProductComment>
+                  <SectionTitle>
+                    <OText size={28} weight="bold">{t('SPECIAL_COMMENT', 'Special comment')}</OText>
+                  </SectionTitle>
+                  <OInput
+                    multiline
+                    placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+                    value={productCart.comment}
+                    onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
+                    isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
+                    style={styles.comment}
+                  />
+                </ProductComment>
               </ProductEditions>
             </WrapContent>
           </View>

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

@@ -17,7 +17,6 @@ export const BusinessItemAccordion = (props: any) => {
 	const {
 		cart,
 		moment,
-    singleBusiness,
 		handleClearProducts
 	} = props
 
@@ -30,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)

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,7 +130,6 @@ const CartUI = (props: any) => {
       )}
       <BusinessItemAccordion
         cart={cart}
-        singleBusiness={props.singleBusiness}
         moment={momentFormatted}
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
@@ -201,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>
@@ -213,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>
@@ -242,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>
@@ -267,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}