ordering-ui-react-native 0.14.8 → 0.14.12

package/package.json

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

package/src/components/AppleLogin/index.tsx

@@ -22,7 +22,6 @@ export const AppleLogin = (props: AppleLoginParams) => {
   const [ordering] = useApi()
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [errors, setError] = useState<any>({type: '', message: ''})
   const buttonText = t('LOGIN_WITH_APPLE', 'Login with Apple');
 
   const onAppleButtonPress = async () => {
@@ -47,14 +46,12 @@ export const AppleLogin = (props: AppleLoginParams) => {
         } = appleAuthRequestResponse
         if (identityToken) {
           console.log('auth code: ', authorizationCode)
-          handleLoginApple(identityToken)
-          console.warn(`Apple Authentication Completed, ${user}, ${email}`);
+          handleLoginApple(authorizationCode)
         } else {
           handleErrors && handleErrors(t('ERROR_LOGIN_APPLE', 'Error login with apple'))
         }
 
       } catch (error: any) {
-        setError({ type: 'FROM_APPLE', message: error?.message })
         handleErrors && handleErrors(error.message)
       }
     } else {
@@ -74,7 +71,7 @@ export const AppleLogin = (props: AppleLoginParams) => {
       }
     }
   }
-  const handleLoginApple = async (code: string) => {
+  const handleLoginApple = async (code: string | null) => {
     let body: any
     if (Platform.OS === 'ios') {
       body = {
@@ -106,7 +103,6 @@ export const AppleLogin = (props: AppleLoginParams) => {
         handleErrors && handleErrors(result || t('ERROR_LOGIN_AUTH_APPLE', 'Error login auth with apple'))
       }
     } catch (error: any) {
-      setError({ type: 'FROM_API', message: error?.message })
       handleLoading && handleLoading(false)
       handleErrors && handleErrors(error?.message)
     }
@@ -121,11 +117,6 @@ export const AppleLogin = (props: AppleLoginParams) => {
 
   return (
     <Container>
-      {!!errors?.message && !!errors?.type && (
-        <OText>
-          {errors?.type} {errors?.message}
-        </OText>
-      )}
       <AppleButton
         onPress={onAppleButtonPress}
       >

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 30px;
+  padding: 0 43px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,6 +20,7 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
+  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

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

@@ -326,7 +326,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           nestedScrollEnabled={true}
         >
           <TabsContainer>
-            {isLogisticActivated && (
+            {(isLogisticActivated && !isBusinessApp) && (
               <Pressable
                 style={styles.pressable}
                 onPress={() => setCurrentTabSelected('logisticOrders')}>

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 : -15
             }}
             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 }}>
@@ -210,7 +213,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 							</View>
 						</ReviewProgressView>
 						<PrincipalWrapView>
-							<OText style={{ marginBottom: 6 }}>
+							{/* <OText style={{ marginBottom: 6 }}>
 								{t('PRINCIPAL_COMMENTS', 'Principal comments')}
 							</OText>
 							<PrincipalComments
@@ -220,16 +223,18 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 									'Too slow',
 									'It isn’t worth what it costs',
 								]}
-							/>
+							/> */}
 						</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) : 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}
@@ -255,7 +268,8 @@ const CartUI = (props: any) => {
                         height: 100,
                         borderColor: theme.colors.textSecondary,
                         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/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={18} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
+								{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/components/UserFormDetails/index.tsx

@@ -224,7 +224,7 @@ export const UserFormDetailsUI = (props: any) => {
 												render={() => (
 													<>
 														<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-															{field?.code}
+															{t(field?.code?.toUpperCase(), field?.name)}
 														</OText>
 														<OInput
 															name={field.code}

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

@@ -47,6 +47,11 @@ const ProfileUI = (props: ProfileParams) => {
 		pagePadding: {
 			paddingLeft: 40,
 			paddingRight: 40
+		},
+		navBarStyle: {
+			paddingLeft: 40,
+			paddingRight: 40,
+			paddingTop: 15
 		}
 	});
 
@@ -216,7 +221,7 @@ const ProfileUI = (props: ProfileParams) => {
 					btnStyle={{ paddingStart: 0 }}
 					title={t('ACCOUNT', 'Account')}
 					isVertical
-					style={styles.pagePadding}
+					style={styles.navBarStyle}
 				/>
 				<CenterView style={styles.pagePadding}>
 					<View style={styles.photo}>

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;

package/themes/single-business/src/components/BusinessReviews/index.tsx

@@ -216,7 +216,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 							</View>
 						</ReviewProgressView>
 						<PrincipalWrapView>
-							<OText style={{ marginBottom: 6 }}>
+							{/* <OText style={{ marginBottom: 6 }}>
 								{t('PRINCIPAL_COMMENTS', 'Principal comments')}
 							</OText>
 							<PrincipalComments
@@ -226,7 +226,7 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 									'Too slow',
 									'It isn’t worth what it costs',
 								]}
-							/>
+							/> */}
 						</PrincipalWrapView>
 
 						{reviewsList?.reviews.map((review: any) => (