ordering-ui-react-native 0.14.11 → 0.14.15

package/package.json

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

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

@@ -12,7 +12,6 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { OText, OButton } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { PreviousMessages } from '../PreviousMessages';
-// import { Contacts } from '../Contacts';
 import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
 import { MessagesOptionParams } from '../../types';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { useEvent, useLanguage, useUtils, useSession, useApi } from 'ordering-components/native'
+import { useEvent, useLanguage, useUtils, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
 import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
@@ -13,7 +13,7 @@ Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
-export const NewOrderNotification = (props: any) => {
+const NewOrderNotificationUI = (props: any) => {
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -23,6 +23,7 @@ export const NewOrderNotification = (props: any) => {
   const { getCurrentLocation } = useLocation();
   const [modalOpen, setModalOpen] = useState(false)
   const [newOrderId, setNewOrderId] = useState(null)
+  const [messageOrderId, setMessageOrderId] = useState(null)
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
   const [isFocused, setIsFocused] = useState(false)
 
@@ -34,7 +35,6 @@ export const NewOrderNotification = (props: any) => {
     console.log('loaded successfully');
   });
 
-
   const handlePlayNotificationSound = () => {
     let times = 0
     const _timeout = setInterval(function () {
@@ -57,6 +57,8 @@ export const NewOrderNotification = (props: any) => {
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
     setModalOpen(false)
+    setNewOrderId(null)
+    setMessageOrderId(null)
   }
 
   const handleNotification = (order: any) => {
@@ -66,10 +68,20 @@ export const NewOrderNotification = (props: any) => {
     setNewOrderId(order.id)
   }
 
+  const handleMessageNotification = (message: any) => {
+    const { order_id: orderId } = message;
+    if (!modalOpen) setModalOpen(true)
+    clearInterval(soundTimeout)
+    handlePlayNotificationSound()
+    setMessageOrderId(orderId)
+  }
+
   useEffect(() => {
-    events.on('order_added', handleNotification)
+    events.on('order_added_noification', handleNotification)
+    events.on('message_added_noification', handleMessageNotification)
     return () => {
-      events.off('order_added', handleNotification)
+      events.off('order_added_noification', handleNotification)
+      events.off('message_added_noification', handleMessageNotification)
     }
   }, [])
 
@@ -97,9 +109,9 @@ export const NewOrderNotification = (props: any) => {
 
   useEffect(() => {
     if (user?.level !== 4) return
-    events.on('order_updated', handleUpdateOrder)
+    events.on('order_updated_noification', handleUpdateOrder)
     return () => {
-      events.off('order_updated', handleUpdateOrder)
+      events.off('order_updated_noification', handleUpdateOrder)
     }
   }, [handleUpdateOrder, user])
 
@@ -149,12 +161,23 @@ export const NewOrderNotification = (props: any) => {
               width={250}
               height={200}
             />
-            <OText
-              color={theme.colors.textGray}
-              mBottom={15}
-            >
-              {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', newOrderId)}
-            </OText>
+            {newOrderId && (
+              <OText
+                color={theme.colors.textGray}
+                mBottom={15}
+              >
+                {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', newOrderId)}
+              </OText>
+            )}
+
+            {messageOrderId && (
+              <OText
+                color={theme.colors.textGray}
+                mBottom={15}
+              >
+                {t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', messageOrderId)}
+              </OText>
+            )}
           </View>
         </NotificationContainer>
       </Modal>
@@ -178,3 +201,12 @@ const styles = StyleSheet.create({
     top: 20
   }
 })
+
+export const NewOrderNotification = (props: any) => {
+  const newOrderNotificationProps = {
+    ...props,
+    UIComponent: NewOrderNotificationUI
+  };
+
+  return <NewOrderNotificationController {...newOrderNotificationProps} />;
+};

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

@@ -6,6 +6,7 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+import { NewOrderNotification } from '../NewOrderNotification';
 
 import { OText, OButton, OModal, OIconButton, OInput, OIcon } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
@@ -326,7 +327,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           nestedScrollEnabled={true}
         >
           <TabsContainer>
-            {isLogisticActivated && (
+            {(isLogisticActivated && !isBusinessApp) && (
               <Pressable
                 style={styles.pressable}
                 onPress={() => setCurrentTabSelected('logisticOrders')}>
@@ -550,6 +551,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
       {/* </GestureRecognizer> */}
 
+      <NewOrderNotification />
       {openModal && (
         <OModal open={openModal} entireModal customClose>
           <ModalContainer

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

@@ -204,6 +204,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		}
 	}, [])
 
+  useEffect(() => {
+    isKeyboardOpen && Platform.OS === 'android' && cartRef?.current?.scrollToEnd()
+  }, [isKeyboardOpen, cartRef?.current])
+
   return (
     <>
       <Animated.View style={{ flex: 1, backgroundColor: theme.colors.white, position: 'absolute', width: '100%', top: top, zIndex: 1 }}>

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

@@ -182,7 +182,7 @@ export const Home = (props: any) => {
 				</TouchableOpacity>
 			</View>
 
-			<OModal entireModal customClose transition={'pageSheet'} open={isAuth} onClose={() => setAuthState(false)} style={{borderRadius: 7.6}}>
+			<OModal overScreen={Platform.OS === 'ios'} entireModal customClose transition={'pageSheet'} open={isAuth} onClose={() => setAuthState(false)} style={{borderRadius: 7.6}}>
 				<View style={styles.authHeader}>
 					<TouchableOpacity onPress={() => setAuthState(false)} style={{}}>
 						<OIcon src={theme.images.general.close} width={16} />

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

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

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

@@ -9,6 +9,8 @@ import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard, I18nManager } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
+import { useWindowDimensions } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 const MessagesUI = (props: MessagesParams) => {
 
@@ -42,6 +44,9 @@ const MessagesUI = (props: MessagesParams) => {
 
   const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
   const [isKeyboardShow, setIsKeyboardShow] = useState(false)
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+	const { height } = useWindowDimensions();
+	const { top, bottom } = useSafeAreaInsets();
 
   const handleClickQuickMessage = (text: string) => {
     setMessage && setMessage(`${message}${text}`)
@@ -186,15 +191,22 @@ const MessagesUI = (props: MessagesParams) => {
   }, [messages.messages.length])
 
   useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
       setIsKeyboardShow(true)
+      setKeyboardHeight(e.endCoordinates.height)
     })
     const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
       setIsKeyboardShow(false)
+      setKeyboardHeight(0)
     })
+    const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', (e) => {
+			setIsKeyboardShow(false)
+      setKeyboardHeight(0)
+		})
     return () => {
       keyboardDidShowListener.remove()
       keyboardDidHideListener.remove()
+      keyboardWillHideListener.remove()
     }
   }, [])
 
@@ -273,7 +285,6 @@ const MessagesUI = (props: MessagesParams) => {
       containerStyle={{
         padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
         flexDirection: 'column-reverse',
-        marginBottom: Platform.OS === 'ios' && isKeyboardShow ? 500 : 0
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
       renderAccessory={() => renderAccessory()}
@@ -362,8 +373,16 @@ const MessagesUI = (props: MessagesParams) => {
     <MaterialCommunityIcon name='chevron-double-down' size={32} />
   )
 
+  const getViewHeight = () => {
+		if (Platform.OS === 'android') {
+			return '100%'
+		} else {
+			return height - top - bottom - (isKeyboardShow ? keyboardHeight - 240 : 48)
+		}
+	}
+
   return (
-    <>
+    <View style={{ height: getViewHeight(), width: '100%', paddingTop: 12, backgroundColor: 'white' }}>
       <Wrapper>
         <Header>
           <OIcon
@@ -396,15 +415,13 @@ const MessagesUI = (props: MessagesParams) => {
           renderBubble={renderBubble}
           renderMessageImage={renderMessageImage}
           scrollToBottomComponent={() => renderScrollToBottomComponent()}
-          messagesContainerStyle={{
-            paddingBottom: 55
-          }}
+
           isLoadingEarlier={messages.loading}
           renderLoading={() => <ActivityIndicator size="small" color="#000" />}
           keyboardShouldPersistTaps='handled'
         />
       </Wrapper>
-    </>
+    </View>
   )
 }
 

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

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

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

@@ -226,7 +226,8 @@ export const UserFormDetailsUI = (props: any) => {
 										defaultValue={phoneUpdate ? '' : user?.cellphone}
 										defaultCode={user?.country_phone_code || null}
 										textInputProps={{
-											style: { borderWidth: 0, fontSize: 12 }
+											style: { borderWidth: 0, fontSize: 12 },
+											maxLength: 10
 										}}
 										textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
 										countryButtonStyle={{ marginStart: -2, justifyContent: 'flex-start', flexBasis: '36%'}}

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

@@ -150,7 +150,7 @@ export const BusinessBasicInformation = (
 				<WrapReviews>
 					{!isBusinessInfoShow && (
 						<>
-							<TouchableOpacity onPress={() => navigation.navigate('MomentOption')}>
+							<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
 								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
 									{t('PRE_ORDER', 'Preorder')}
 								</OText>

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { useLanguage, BusinessMenuListing } from 'ordering-components/native'
 import { OText } from '../shared'
 import { BusinessMenuListParams } from '../../types'
-import { View, StyleSheet, Dimensions } from 'react-native'
+import { View, StyleSheet, Dimensions, Platform } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
@@ -81,7 +81,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 dropdownStyle={{
                   borderRadius: 8,
                   borderColor: theme.colors.lightGray,
-                  marginTop: -15,
+                  marginTop: Platform.OS === 'ios' ? 0 : -15,
                   maxHeight: 160
                 }}
                 rowStyle={{

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { TouchableOpacity, StyleSheet, View, Dimensions } from 'react-native'
+import { TouchableOpacity, StyleSheet, View, Dimensions, Platform } from 'react-native'
 import { useLanguage, useUtils, useConfig, useOrder, MomentOption } from 'ordering-components/native'
 import { OButton, OText } from '../shared'
 import { useTheme } from 'styled-components/native'
@@ -335,7 +335,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             dropdownStyle={{
               borderRadius: 8,
               borderColor: theme.colors.lightGray,
-              marginTop: -15
+              marginTop: Platform.OS === 'ios' ? 0 : -25
             }}
             rowStyle={{
               borderBottomColor: theme.colors.backgroundGray100,

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

@@ -25,7 +25,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     errorQuantityProducts,
     handleCancelSearch,
     categoriesLayout,
-    setCategoriesLayout
+    setCategoriesLayout,
+    currentCart
   } = props;
 
   const [, t] = useLanguage();
@@ -48,6 +49,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             product={product}
             businessId={businessId}
             onProductClick={() => onProductClick(product)}
+            productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
           />
         ))}
 
@@ -70,6 +72,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       product={product}
                       businessId={businessId}
                       onProductClick={onProductClick}
+                      productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
                     />
                   ),
               )}
@@ -92,7 +95,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   <>
                     <View
                       style={bpStyles.catWrap}
-        							onLayout={(event: any) => handleOnLayout(event, category.id)}
+                      onLayout={(event: any) => handleOnLayout(event, category.id)}
                     >
                       <View style={bpStyles.catIcon}>
                         <OIcon
@@ -114,6 +117,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                           businessId={businessId}
                           product={product}
                           onProductClick={onProductClick}
+                          productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
                         />
                       ))}
                     </>
@@ -157,13 +161,13 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               content={
                 !searchValue
                   ? t(
-                      'ERROR_NOT_FOUND_PRODUCTS_TIME',
-                      'No products found at this time',
-                    )
+                    'ERROR_NOT_FOUND_PRODUCTS_TIME',
+                    'No products found at this time',
+                  )
                   : t(
-                      'ERROR_NOT_FOUND_PRODUCTS',
-                      'No products found, please change filters.',
-                    )
+                    'ERROR_NOT_FOUND_PRODUCTS',
+                    'No products found, please change filters.',
+                  )
               }
               btnTitle={
                 !searchValue

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

@@ -277,6 +277,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								handleCancelSearch={handleCancel}
 								categoriesLayout={categoriesLayout}
 								setCategoriesLayout={setCategoriesLayout}
+								currentCart={currentCart}
 							/>
 						</WrapContent>
 					</>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	BusinessReviews as BusinessReviewController,
 	useLanguage,
@@ -27,6 +27,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const { businessState, reviewsList } = props;
 	const [, t] = useLanguage();
 	const theme = useTheme();
+	const [searchReview, setSearchReview] = useState('')
 	const [orderState] = useOrder();
 
 	const styles = StyleSheet.create({
@@ -150,7 +151,9 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 								icon={theme.images.general.search}
 								inputStyle={{ fontSize: 14 }}
 								placeholder={t('SEARCH_REVIEWS', 'Search reviews')}
-								style={{ paddingStart: 0 }}></OInput>
+								style={{ paddingStart: 0 }}
+								onChange={(txt: string) => setSearchReview(txt)}
+							/>
 						</ReviewSearchView>
 						<ReviewProgressView>
 							<OText style={{ marginBottom: 6 }}>
@@ -223,13 +226,15 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 							/> */}
 						</PrincipalWrapView>
 
-						{reviewsList?.reviews.map((review: any) => (
-							<ReviewItem
-								key={`review_key_${review.id}`}
-								comment={review?.comment}
-								created_at={review?.created_at}
-							/>
-						))}
+						{reviewsList?.reviews
+							.filter((review: any) => searchReview !== '' ? review.comment?.toLowerCase()?.includes(searchReview?.toLowerCase()) : true)
+							.map((review: any) => (
+								<ReviewItem
+									key={`review_key_${review.id}`}
+									comment={review?.comment}
+									created_at={review?.created_at}
+								/>
+							))}
 					</>
 				)}
 				{!reviewsList.loading && reviewsList?.reviews.length === 0 && (

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

@@ -115,6 +115,19 @@ const CartUI = (props: any) => {
 
   return (
     <CContainer>
+      {openUpselling && (
+        <UpsellingProducts
+          handleUpsellingPage={handleUpsellingPage}
+          openUpselling={openUpselling}
+          businessId={cart?.business_id}
+          business={cart?.business}
+          cartProducts={cart?.products}
+          canOpenUpselling={canOpenUpselling}
+          setCanOpenUpselling={setCanOpenUpselling}
+          handleCloseUpsellingPage={() => { }}
+          isFromCart
+        />
+      )}
       <BusinessItemAccordion
         cart={cart}
         moment={momentFormatted}
@@ -243,7 +256,7 @@ const CartUI = (props: any) => {
             {cart?.status !== 2 && (
               <OSTable>
                 <View style={{ width: '100%', marginTop: 20 }}>
-                  <OText size={12} lineHeight={18}>{t('COMMENTS', 'Comments')}</OText>
+                  <OText size={16} lineHeight={18}>{t('COMMENTS', 'Comments')}</OText>
                   <View style={{ flex: 1, width: '100%' }}>
                     <OInput
                       value={cart?.comment}
@@ -253,9 +266,10 @@ const CartUI = (props: any) => {
                         alignItems: 'flex-start',
                         width: '100%',
                         height: 100,
-                        borderColor: theme.colors.textSecondary,
+                        borderColor: theme.colors.border,
                         paddingRight: 50,
-                        marginTop: 10
+                        marginTop: 10,
+                        borderRadius: 7.6
                       }}
                       multiline
                     />
@@ -324,20 +338,6 @@ const CartUI = (props: any) => {
           onClose={() => setOpenChangeStore(false)}
         />
       </OModal>
-
-      {openUpselling && (
-        <UpsellingProducts
-          handleUpsellingPage={handleUpsellingPage}
-          openUpselling={openUpselling}
-          businessId={businessId}
-          business={cart?.business}
-          cartProducts={cart?.products}
-          canOpenUpselling={canOpenUpselling}
-          setCanOpenUpselling={setCanOpenUpselling}
-          handleCloseUpsellingPage={() => { }}
-          isFromCart
-        />
-      )}
       <OModal
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null })}

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

@@ -72,7 +72,7 @@ const CheckoutUI = (props: any) => {
 		errors,
 		placing,
 		cartState,
-    cartUuid,
+		cartUuid,
 		businessDetails,
 		paymethodSelected,
 		handlePaymethodChange,
@@ -122,7 +122,7 @@ const CheckoutUI = (props: any) => {
 	const [userErrors, setUserErrors] = useState<any>([]);
 	const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
-  const [openChangeStore, setOpenChangeStore] = useState(false)
+	const [openChangeStore, setOpenChangeStore] = useState(false)
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -459,7 +459,7 @@ const CheckoutUI = (props: any) => {
 										{t('DRIVER_TIPS', 'Driver Tips')}
 									</OText>
 									<DriverTips
-                    uuid={cartUuid}
+										uuid={cartUuid}
 										businessId={cart?.business_id}
 										driverTipsOptions={driverTipsOptions}
 										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
@@ -517,21 +517,21 @@ const CheckoutUI = (props: any) => {
 										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
 											{t('ORDER_SUMMARY', 'Order Summary')}
 										</OText>
-                    {props.isFranchiseApp && (
-                      <TouchableOpacity
-                        onPress={() => setOpenChangeStore(true)}
-                        style={{alignSelf: 'flex-start'}}
-                      >
-                        <OText
-                          size={12}
-                          lineHeight={18}
-                          color={theme.colors.textSecondary}
-                          style={{ textDecorationLine: 'underline' }}
-                        >
-                          {t('CHANGE_STORE', 'Change store')}
-                        </OText>
-                      </TouchableOpacity>
-                    )}
+										{props.isFranchiseApp && (
+											<TouchableOpacity
+												onPress={() => setOpenChangeStore(true)}
+												style={{ alignSelf: 'flex-start' }}
+											>
+												<OText
+													size={12}
+													lineHeight={18}
+													color={theme.colors.textSecondary}
+													style={{ textDecorationLine: 'underline' }}
+												>
+													{t('CHANGE_STORE', 'Change store')}
+												</OText>
+											</TouchableOpacity>
+										)}
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
@@ -574,41 +574,38 @@ const CheckoutUI = (props: any) => {
 							</ChErrors>
 						</ChSection>
 					)}
-          <OModal
-            open={openChangeStore && props.isFranchiseApp}
-            entireModal
-            customClose
-            onClose={() => setOpenChangeStore(false)}
-          >
-            <CartStoresListing
-              cartuuid={cart?.uuid}
-              onClose={() => setOpenChangeStore(false)}
-            />
-          </OModal>
+					<OModal
+						open={openChangeStore && props.isFranchiseApp}
+						entireModal
+						customClose
+						onClose={() => setOpenChangeStore(false)}
+					>
+						<CartStoresListing
+							cartuuid={cart?.uuid}
+							onClose={() => setOpenChangeStore(false)}
+						/>
+					</OModal>
 				</ChContainer>
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
-				<>
-					<>
-						<FloatingButton
-							handleClick={() => handlePlaceOrder()}
-							isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal < cart?.minimum}
-							disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal < cart?.minimum}
-							btnText={cart?.subtotal >= cart?.minimum
-								? (
-									placing
-										? t('PLACING', 'Placing')
-										: loading
-											? t('LOADING', 'Loading')
-											: t('PLACE_ORDER', 'Place Order')
-								)
-								: (`${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`)
-							}
-							btnRightValueShow
-							btnRightValue={parsePrice(cart?.total)}
-						/>
-					</>
-				</>
+				<FloatingButton
+					handleClick={() => handlePlaceOrder()}
+					isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal < cart?.minimum}
+					disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal < cart?.minimum}
+					btnText={cart?.subtotal >= cart?.minimum
+						? (
+							placing
+								? t('PLACING', 'Placing')
+								: loading
+									? t('LOADING', 'Loading')
+									: t('PLACE_ORDER', 'Place Order')
+						)
+						: (`${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`)
+					}
+					btnRightValueShow
+					btnRightValue={parsePrice(cart?.total)}
+					iosBottom={20}
+				/>
 			)}
 		</>
 	)
@@ -762,7 +759,7 @@ export const Checkout = (props: any) => {
 		...props,
 		UIComponent: CheckoutUI,
 		cartState,
-    [props.isFranchiseApp ? 'uuid' : 'businessId']: props.isFranchiseApp ? cartUuid : cartState.cart?.business_id
+		[props.isFranchiseApp ? 'uuid' : 'businessId']: props.isFranchiseApp ? cartUuid : cartState.cart?.business_id
 	}
 
 	return (

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

@@ -62,36 +62,33 @@ const DriverTipsUI = (props: any) => {
 
 	return (
 		<DTContainer>
-			{!isDriverTipUseCustom ? (
-				<>
-					<DTWrapperTips>
-						{driverTipsOptions.map((option: any, i: number) => (
-							<TouchableOpacity
-								key={i}
-								onPress={() => handlerChangeOption(option)}
-							>
-								<DTCard
-									style={style.circle}
-									isActive={option === optionSelected}
-								>
-									<OText size={13} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
-										{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
-									</OText>
-								</DTCard>
-							</TouchableOpacity>
-						))}
-					</DTWrapperTips>
-					{!driverTipsOptions.includes(driverTip) && driverTip > 0 && (
-						<OText
-							color={theme.colors.error}
-							size={20}
-							style={{ marginTop: 10, textAlign: 'center' }}
+			<DTWrapperTips>
+				{driverTipsOptions.map((option: any, i: number) => (
+					<TouchableOpacity
+						key={i}
+						onPress={() => handlerChangeOption(option)}
+					>
+						<DTCard
+							style={style.circle}
+							isActive={option === optionSelected}
 						>
-							{t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
-						</OText>
-					)}
-				</>
-			) : (
+							<OText size={13} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
+							</OText>
+						</DTCard>
+					</TouchableOpacity>
+				))}
+			</DTWrapperTips>
+			{!driverTipsOptions.includes(driverTip) && driverTip > 0 && (
+				<OText
+					color={theme.colors.error}
+					size={16}
+					style={{ marginTop: 10, textAlign: 'center' }}
+				>
+					{t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
+				</OText>
+			)}
+			{isDriverTipUseCustom && (
 				<DTForm>
 					<DTLabel>
 						{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
@@ -110,7 +107,7 @@ const DriverTipsUI = (props: any) => {
 							borderColor={theme.colors.primary}
 							textStyle={{ color: 'white', fontSize: 14 }}
 							imgRightSrc={null}
-							style={{borderRadius: 5, height: 44}}
+							style={{ borderRadius: 5, height: 44 }}
 							isDisabled={!(value > 0 && value !== driverTip) || !value}
 							onClick={() => {
 								handlerChangeOption(value)
@@ -121,7 +118,7 @@ const DriverTipsUI = (props: any) => {
 					{parseFloat(driverTip || 0) > 0 && (
 						<OText
 							color={theme.colors.error}
-							size={20}
+							size={16}
 							style={{ marginTop: 10, textAlign: 'center' }}
 						>
 							{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}: {parsePrice(driverTip)}

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

@@ -22,6 +22,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 		disabled,
 		isSecondaryBtn,
 		handleEmpty,
+		iosBottom
 	} = props;
 
 	const [, t] = useLanguage();
@@ -61,7 +62,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 	return (
 		<Container
 			style={{
-				paddingBottom: Platform.OS === 'ios' ? 0 : bottom + 16
+				paddingBottom: Platform.OS === 'ios' ? iosBottom ?? 0 : bottom + 16
 			}}>
 
 			<View style={styles.infoCont}>

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

@@ -218,9 +218,13 @@ const MessagesUI = (props: MessagesParams) => {
 		const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
 			setIsKeyboardShow(false)
 		})
+		const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
+			setIsKeyboardShow(false)
+		})
 		return () => {
 			keyboardDidShowListener.remove()
 			keyboardDidHideListener.remove()
+			keyboardWillHideListener.remove()
 		}
 	}, [])
 
@@ -411,9 +415,9 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const getViewHeight = () => {
 		if (Platform.OS === 'android') {
-			return height - top - bottom - (isKeyboardShow ? 300 : 24);
+			return '100%';
 		} else {
-			return height - top - bottom - 10;
+			return height - top - bottom - (isKeyboardShow ? 48 : 0);
 		}
 	}
 

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

@@ -203,7 +203,7 @@ const OrderSummaryUI = (props: any) => {
                           alignItems: 'flex-start',
                           width: '100%',
                           height: 100,
-                          borderColor: theme.colors.textSecondary,
+                          borderColor: theme.colors.border,
                           paddingRight: 50,
                           marginTop: 10
                         }}

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

@@ -173,7 +173,7 @@ export const ProductOptionsUI = (props: any) => {
 		const sel = option[0]?.suboptions?.filter(
 			({ id }: any) => id === respect_id,
 		);
-		return sel[0]?.id !== undefined;
+		return sel?.[0]?.id !== undefined;
 	};
 
 	const handleChangeMainIndex = (index: number) => {
@@ -523,6 +523,7 @@ export const ProductOptionsUI = (props: any) => {
 																		<WrapperSubOption
 																			style={{
 																				backgroundColor: isError(option.id),
+																				borderRadius: 7.6
 																			}}>
 																			{option.suboptions.map(
 																				(suboption: any) => {

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

@@ -210,12 +210,13 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 						</View>
 					</ContentInfo>
 				</View>
-
 				{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
 					(!product?.valid_menu && isCartProduct && !isCartPending)) && (
-						<OText size={20} color={theme.colors.red} style={{ textAlign: 'center', marginTop: 10 }}>
-							{t('NOT_AVAILABLE', 'Not available')}
-						</OText>
+						<View style={{ alignItems: 'flex-end', width: '100%' }}>
+							<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', bottom: 20 }}>
+								{t('NOT_AVAILABLE', 'Not available')}
+							</OText>
+						</View>
 					)}
 			</Accordion>
 

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

@@ -11,7 +11,7 @@ export const Accordion = styled.TouchableOpacity`
   align-items: center;
 
   ${(props: any) => !props.isValid && css`
-    background-color: rgba(0, 0, 0, 0.1);
+    opacity: 0.7;
   `}
 `
 

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

@@ -4,7 +4,7 @@ export const Container = styled.View`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 0;
+  padding: 10px;
 `
 
 export const IconControl = styled.TouchableOpacity`

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

@@ -7,13 +7,13 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut } from './styles';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer } from './styles';
 import { StyleSheet } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
-	const { businessId, product, isSoldOut, onProductClick } = props;
+	const { businessId, product, isSoldOut, onProductClick, productAddedToCart } = props;
 
 	const theme = useTheme();
 
@@ -42,6 +42,16 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			borderRadius: 7.6,
 			marginStart: 12
 		},
+		quantityContainer: {
+			position: 'absolute',
+			left: '100%',
+			bottom: '100%',
+			width: 25,
+			height: 25,
+			textAlign: 'center',
+			borderRadius: 25,
+			alignItems: 'center'
+		}
 	});
 
 
@@ -88,6 +98,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
 			]}
 			onPress={() => onProductClick?.(product)}>
+				{productAddedToCart && productAddedToCart?.quantity > 0 && (
+					<QuantityContainer style={[styles.quantityContainer, {
+						transform: [{ translateX: 10 }, { translateY: -10 }],
+					}]}>
+						<OText color={theme.colors.white}>{productAddedToCart?.quantity}</OText>
+					</QuantityContainer>
+				)}
 			<CardInfo>
 				<OText
 					size={12}

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

@@ -21,3 +21,7 @@ export const SoldOut = styled.View`
   top: 37px;
   end: 10px;
 `
+
+export const QuantityContainer = styled.View`
+  background: ${({ theme } : any) => theme.colors.primary};
+`

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

@@ -52,9 +52,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			borderColor: theme.colors.primary,
 			backgroundColor: theme.colors.primary,
 			borderWidth: 1,
+			alignSelf: 'center',
 			height: 44,
-			marginBottom: 10,
-			shadowOpacity: 0
+			shadowOpacity: 0,
+			width: '80%',
 		},
 		cancelBtn: {
 			paddingHorizontal: 18,
@@ -165,7 +166,13 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 											<OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
 										</TopActions>
 									</TopBar>
-									<ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 46 : 70) }} showsVerticalScrollIndicator={false}>
+									<ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+										{upsellingProducts?.products?.length > 0 &&
+											<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+												<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+												<UpsellingLayout />
+											</View>
+										}
 										<View style={{ paddingHorizontal: 40 }}>
 											<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
 											<OrderSummary
@@ -173,25 +180,16 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 												isCartPending={cart?.status === 2}
 											/>
 										</View>
-										<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 23 }} />
-										<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-											{upsellingProducts?.products?.length > 0 && 
-												<>
-													<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-													<UpsellingLayout />
-												</>
-											}
-											<CloseUpselling>
-												<OButton
-													imgRightSrc=''
-													text={t('CHECKOUT', 'Checkout')}
-													style={styles.closeUpsellingButton}
-													textStyle={{ color: theme.colors.white, fontSize: 14 }}
-													onClick={() => handleUpsellingPage()}
-												/>
-											</CloseUpselling>
-										</View>
 									</ScrollView>
+									<View style={{alignItems: 'center', bottom: Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125}}>
+										<OButton
+											imgRightSrc=''
+											text={t('CHECKOUT', 'Checkout')}
+											style={{...styles.closeUpsellingButton}}
+											textStyle={{ color: theme.colors.white, fontSize: 14 }}
+											onClick={() => handleUpsellingPage()}
+										/>
+									</View>
 								</OBottomPopup>
 							)}
 						</>

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

@@ -212,13 +212,15 @@ export interface BusinessProductsListParams {
 	errorQuantityProducts?: boolean,
 	handleCancelSearch?: () => void,
 	categoriesLayout?: any,
-	setCategoriesLayout?: any
+	setCategoriesLayout?: any,
+	currentCart?: any
 }
 export interface SingleProductCardParams {
 	businessId: any,
 	product: any;
 	isSoldOut: boolean;
 	onProductClick: any;
+	productAddedToCart?: any
 }
 export interface BusinessInformationParams {
 	navigation?: any,
@@ -381,6 +383,7 @@ export interface FloatingButtonParams {
 	btnRightValueShow?: boolean;
 	handleClick?: any;
 	handleEmpty?: any;
+	iosBottom?: number
 }
 export interface MomentOptionParams {
 	navigation: any;