ordering-ui-react-native 0.16.61-release → 0.16.62-release

package/package.json

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

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

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react'
 import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
-import { AddressListContainer, AddressItem } from './styles'
+import { AddressItem, Container } from './styles'
 import { Platform, RefreshControl, StyleSheet, View } from 'react-native'
 import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
-import { Container } from '../../layouts/Container'
 import { AddressListParams } from '../../types'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
@@ -143,8 +142,7 @@ const AddressListUI = (props: AddressListParams) => {
 	}, [])
 
 	return (
-		<Container 
-			noPadding
+		<Container
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -152,17 +150,18 @@ const AddressListUI = (props: AddressListParams) => {
 				/>
 			}
 		>
-			{isProfile && (
-				<NavBar
-					title={t('SAVED_PLACES', 'My saved places')}
-					titleAlign={'center'}
-					onActionLeft={goToBack}
-					showCall={false}
-					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
-				/>
-			)}
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile || isProfile)) && (
-				<AddressListContainer>
+				<>
+					{isProfile && (
+						<NavBar
+							title={t('SAVED_PLACES', 'My saved places')}
+							titleAlign={'center'}
+							onActionLeft={goToBack}
+							showCall={false}
+							paddingTop={10}
+							btnStyle={{ paddingLeft: 0 }}
+						/>
+					)}
 					{
 						route &&
 						(
@@ -178,8 +177,8 @@ const AddressListUI = (props: AddressListParams) => {
 								onActionLeft={() => goToBack()}
 								showCall={false}
 								btnStyle={{ paddingLeft: 0 }}
-								paddingTop={0}
-								style={{ marginTop: Platform.OS === 'ios' ? 0 : 40 }}
+								paddingTop={10}
+								style={{ marginTop: 0 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>
@@ -328,7 +327,8 @@ const AddressListUI = (props: AddressListParams) => {
 							/>
 						</>
 					)}
-				</AddressListContainer>
+				</>
+
 			)}
 		</Container>
 	)

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

@@ -1,10 +1,12 @@
 import styled from 'styled-components/native'
 
-export const AddressListContainer = styled.View`
+export const Container = styled.ScrollView`
+    position: relative;
     flex: 1;
 	 paddingLeft: 40px;
 	 paddingRight: 40px;
-	 paddingBottom: 20px;
+     margin-bottom: 40px;
+     padding-top: 10px;
 `
 
 export const AddressItem = styled.TouchableOpacity`

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

@@ -30,7 +30,6 @@ import {
 	WrapSearchBar,
 	WrapContent,
 	FiltProductsContainer,
-	ContainerSafeAreaView,
 	BackgroundGray,
 	ProfessionalFilterWrapper,
 	NearBusiness,
@@ -139,7 +138,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
-	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 100
+	const filtProductsHeight = Platform.OS === 'ios' ? 165 : 100
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -371,7 +370,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<FiltProductsContainer
 						style={{
 							height: Dimensions.get('window').height - filtProductsHeight,
-							top: Platform.OS === 'ios' ? searchBarHeight + insets.top : searchBarHeight
+							top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight
 						}}
 						contentContainerStyle={{ flexGrow: 1 }}
 					>
@@ -533,7 +532,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					)}
 				</IOScrollView>
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
-					<View style={{ marginBottom: Platform.OS === 'ios' ? 20 : 0 }}>
+					<View style={{ marginBottom: 0 }}>
 						<FloatingButton
 							btnText={
 								openUpselling
@@ -588,6 +587,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					professionalList={business?.professionals}
 					professionalSelected={professionalSelected}
 					handleChangeProfessional={handleChangeProfessionalSelected}
+					handleChangeProfessional={handleChangeProfessionalSelected}
 					handleUpdateProfessionals={handleUpdateProfessionals}
 					onSave={() => setOpenService(false)}
 					onClose={() => setOpenService(false)}

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

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

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

@@ -79,7 +79,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
-	const bgHeader =  orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image 
+	const bgHeader = orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image
 	const styles = StyleSheet.create({
 		container: {
 			marginBottom: 0,
@@ -473,7 +473,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					{!auth && (
 
 						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-							<IconAntDesign name='arrowleft' size={26} />
+							<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
 						</TouchableOpacity>
 					)}
 				</HeaderWrapper>

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+import { Platform } from 'react-native'
 import { FavoriteList } from '../FavoriteList'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
@@ -33,7 +34,9 @@ export const Favorite = (props: any) => {
   }
 
   return (
-    <Container>
+    <Container
+      pdng={Platform.OS === 'ios' ? '20px' : '30px'}
+    >
       <NavBar
         title={t('FAVORITE', 'Favorite')}
         titleAlign={'center'}
@@ -51,9 +54,9 @@ export const Favorite = (props: any) => {
           >
             <OText
               color={menu.key === tabSelected ? theme.colors.textNormal : theme.colors.disabled}
-					    size={14}
-					    weight={menu.key === tabSelected ? '500' : '400'}
-					    style={{ marginBottom: 12 }}
+              size={14}
+              weight={menu.key === tabSelected ? '500' : '400'}
+              style={{ marginBottom: 12 }}
             >
               {menu.name}
             </OText>

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

@@ -18,5 +18,5 @@ export const Tab = styled.TouchableOpacity`
 export const Container = styled.View`
   padding-horizontal: 40px;
   padding-bottom: 20px;
-  padding-top: 30px;
+  padding-top: ${(props: any) => props.pdng};
 `

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

@@ -62,7 +62,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 	return (
 		<Container
 			style={{
-				paddingBottom: Platform.OS === 'ios' ? iosBottom ?? 0 : bottom + 16
+				paddingBottom: Platform.OS === 'ios' ? 20 : bottom + 16
 			}}>
 
 			<View style={styles.infoCont}>

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

@@ -12,7 +12,7 @@ export const Container = styled.View`
   width: 100%;
   justify-content: space-between;
   background-color: #FFF;
-  z-index: 9999;
+  z-index: 20001;
   justify-content: space-between;
 `
 

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

@@ -31,20 +31,20 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
+      pt={10}
       noPadding
       refreshControl={
-				<RefreshControl
-					refreshing={refreshing}
-					onRefresh={() => handleOnRefresh()}
-				/>
-			}
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
     >
       <NavBar
         title={t('HELP', 'Help')}
         titleAlign={'center'}
         onActionLeft={goToBack}
         showCall={false}
-        paddingTop={10}
         btnStyle={{ paddingLeft: 0 }}
       />
       <HelpSubItem
@@ -53,7 +53,7 @@ export const Help = (props: HelpParams) => {
         <OText size={14}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       </HelpSubItem>
       <HelpSubItem
-        onPress={() => onRedirect('HelpAccountAndPayment')}      
+        onPress={() => onRedirect('HelpAccountAndPayment')}
       >
         <OText size={14}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       </HelpSubItem>

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

@@ -9,8 +9,9 @@ import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content,
-  HeaderWrapper
+  Container
 } from './styles'
+import NavBar from '../NavBar'
 
 export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const {
@@ -20,15 +21,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const theme = useTheme()
 
   const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
     imageStyle: {
       width: '100%',
       height: 300,
@@ -39,26 +31,13 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <HeaderWrapper>
-        <OButton
-          imgRightSrc={null}
-          style={styles.btnBackArrow}
-          onClick={() => goToBack()}
-          icon={AntDesignIcon}
-          iconProps={{
-            name: 'arrowleft',
-            size: 26
-          }}
-        />
-        <OText
-          size={24}
-          weight={Platform.OS === 'ios' ? '600' : 'bold'}
-          color={theme.colors.textNormal}
-        >
-          {t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
-        </OText>
-      </HeaderWrapper>
+    <Container>
+      <NavBar
+        title={t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
+      />
       <Content>
         <OText mBottom={20}>
           -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
@@ -78,6 +57,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

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

@@ -4,7 +4,9 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
-export const HeaderWrapper = styled.View`
-  padding: 10px 20px 20px 0;
-  flex-direction: row;
+
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
 `

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

@@ -1,14 +1,14 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
+import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet } from 'react-native'
 import NavBar from '../NavBar'
 import {
-  Content
+  Content,
+  Container
 } from './styles'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -37,7 +37,7 @@ export const HelpGuide = (props: HelpGuideParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
+    <Container>
       <NavBar
         title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
         onActionLeft={goToBack}
@@ -63,6 +63,6 @@ export const HelpGuide = (props: HelpGuideParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

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

@@ -4,3 +4,8 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+`

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

@@ -1,15 +1,15 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components/native'
 import { HelpOrderParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
+import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { WebView } from 'react-native-webview'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import NavBar from '../NavBar'
 
 import {
-  Content
+  Content,
+  Container
 } from './styles'
 
 export const HelpOrder = (props: HelpOrderParams) => {
@@ -20,15 +20,6 @@ export const HelpOrder = (props: HelpOrderParams) => {
   const theme = useTheme()
 
   const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
     imageStyle: {
       width: '100%',
       height: 120
@@ -42,7 +33,7 @@ export const HelpOrder = (props: HelpOrderParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
+    <Container>
       <NavBar
         title={t('HELP_WITH_ORDER', 'Help with an order')}
         onActionLeft={goToBack}
@@ -75,6 +66,6 @@ export const HelpOrder = (props: HelpOrderParams) => {
           style={styles.videoStyle}
         />
       </Content>
-    </>
+    </Container>
   )
 }

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

@@ -3,4 +3,11 @@ import styled from 'styled-components/native'
 export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
-`
+`
+
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+`
+

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import Lottie from 'lottie-react-native';
 import { TouchableOpacity, Easing, ViewStyle, Animated } from 'react-native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -13,9 +13,9 @@ interface Props {
     duration?: number,
     type: 'favorite', // animation types
     isActive: boolean,
-    animationType?: ((value : number) => number);
+    animationType?: ((value: number) => number);
     useNativeDriver?: boolean,
-    iconProps?: {color?: string, size?: number, style?: ViewStyle} 
+    iconProps?: { color?: string, size?: number, style?: ViewStyle }
 }
 
 export const LottieAnimation = (props: Props) => {
@@ -34,30 +34,39 @@ export const LottieAnimation = (props: Props) => {
     } = props
     const theme = useTheme()
     const animationProgress = useRef(new Animated.Value(initialValue))
+    const [isHide, setIsHide] = useState(true)
     const favoriteArray = ['heart', 'hearto']
     const icon = type === 'favorite' ? favoriteArray : []
     const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
     const onPressLottie = () => {
         if (!disableAnimation) {
+            setIsHide(false)
             Animated.timing(animationProgress.current, {
                 toValue,
                 duration: duration || 5000,
                 easing: animationType || Easing.linear,
                 useNativeDriver: useNativeDriver ?? true
             }).start();
+            hideLottie()
         }
         onClick()
     }
 
+    const hideLottie = () => {
+        setTimeout(() => setIsHide(true), 4500)
+    }
+
     return (
         <TouchableOpacity
             onPress={onPressLottie}
             style={style}
         >
-            <Lottie
-                progress={animationProgress.current}
-                source={animationGif}
-            />
+            {!isHide &&
+                <Lottie
+                    progress={animationProgress.current}
+                    source={animationGif}
+                />
+            }
             <IconAntDesign
                 name={isActive ? icon[0] : icon[1]}
                 color={iconProps?.color || theme.colors.danger5}

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

@@ -16,7 +16,7 @@ import {
 	PlaceholderLine,
 	Fade
 } from "rn-placeholder";
-import { View, BackHandler } from 'react-native'
+import { View, BackHandler, Platform } from 'react-native'
 import {
 	MessageListingWrapper,
 	MessageContainer
@@ -77,7 +77,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
 			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
 			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
+			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
 		]
 
 		const objectStatus = orderStatus.find((o) => o.key === status)
@@ -102,7 +102,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}, [orderList, loading])
 
 	useEffect(() => {
-		if(refreshOrders){
+		if (refreshOrders) {
 			loadOrders(false, false, false, true)
 			setRefreshOrders && setRefreshOrders(false)
 		}
@@ -225,7 +225,7 @@ const OrderMessageUI = (props: any) => {
 }
 
 export const OrderListing = (props: OrdersOptionParams) => {
-  const [businessState] = useBusiness();
+	const [businessState] = useBusiness();
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
@@ -236,7 +236,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			pageSize: 10,
 			controlType: 'infinity'
 		},
-    businessId: businessState?.business?.id,
+		businessId: businessState?.business?.id,
 		profileMessages: true,
 		orderBy: 'last_direct_message_at',
 		orderDirection: 'asc'
@@ -292,7 +292,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				titleAlign={'center'}
 				onActionLeft={goToBack}
 				showCall={false}
-				paddingTop={10}
+				paddingTop={Platform.OS === 'ios' ? 20 : 10}
 				btnStyle={{ paddingLeft: 0 }}
 			/>
 			<OrderListing
@@ -300,7 +300,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				setSelectedOrderId={setSelectedOrderId}
 				setOrderList={setOrderListStatus}
 				setOpenMessges={setOpenMessges}
-        franchiseId={props.franchiseId}
+				franchiseId={props.franchiseId}
 			/>
 			{openMessages && seletedOrder && (
 				<OModal

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

@@ -13,7 +13,8 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import {
 	StyleSheet,
 	View,
-	TouchableOpacity
+	TouchableOpacity,
+	Platform
 } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { MomentOptionParams } from '../../types';
@@ -253,19 +254,22 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	return (
 		<>
-			<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
-				<View style={{ paddingBottom: 90 }}>
+			<Container
+				style={{
+					paddingLeft: 40,
+					paddingRight: 40
+				}}>
+				<View style={{ paddingBottom: 90, paddingRight: 20 }}>
 					<NavBar
 						onActionLeft={() => goToBack()}
 						btnStyle={{ paddingLeft: 0 }}
-						paddingTop={0}
 						style={{ paddingBottom: 0 }}
+						paddingTop={Platform.OS === 'ios' ? 10 : 0}
 						title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
 						titleAlign={'center'}
 						titleStyle={{ fontSize: 14, marginRight: 0, marginLeft: 0 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 					/>
-
 					<WrapSelectOption
 						onPress={() => _handleAsap()}
 						disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>

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

@@ -65,9 +65,7 @@ const MultiCheckoutUI = (props: any) => {
       paddingLeft: 40,
       paddingRight: 40
     },
-    wrapperNavbar: Platform.OS === 'ios'
-      ? { paddingVertical: 0, paddingHorizontal: 40 }
-      : { paddingVertical: 20, paddingHorizontal: 40 }
+    wrapperNavbar: { paddingHorizontal: 40 }
   })
 
   const [, { showToast }] = useToast();
@@ -149,15 +147,12 @@ const MultiCheckoutUI = (props: any) => {
       <Container noPadding>
         <View style={styles.wrapperNavbar}>
           <NavBar
-            isVertical
             title={t('CHECKOUT', 'Checkout')}
             titleAlign={'center'}
             onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
             showCall={false}
+            paddingTop={Platform.OS === 'ios' ? 0 : 4}
             btnStyle={{ paddingLeft: 0 }}
-            style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
-            titleWrapStyle={{ paddingHorizontal: 0 }}
-            titleStyle={{ marginRight: 0, marginLeft: 0 }}
           />
         </View>
         <ChContainer style={styles.pagePadding}>

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

@@ -63,16 +63,11 @@ const NavBar = (props: Props) => {
 	return (
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			<OButton
-				imgLeftSrc={props.leftImg}
-				imgLeftStyle={{ width: 18 }}
+				imgLeftSrc={theme.images.general.arrow_left}
+				imgLeftStyle={{ width: 26 }}
 				imgRightSrc={null}
 				style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
 				onClick={props?.onActionLeft}
-				icon={AntDesignIcon}
-				iconProps={{
-					name: 'arrowleft',
-					size: 26
-				}}
 			/>
 			<TitleTopWrapper>
 				{props.withIcon

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

@@ -7,13 +7,12 @@ import {
 	useToast,
 	ToastType,
 } from 'ordering-components/native'
-import { NotificationsGroupSwitchWrapper, SwitchWrapper } from './styles'
-import { Platform, StyleSheet, View } from 'react-native'
+import { NotificationsGroupSwitchWrapper, SwitchWrapper, Container } from './styles'
+import { StyleSheet, View } from 'react-native'
 import { useState } from 'react'
 import { useTheme } from 'styled-components/native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import ToggleSwitch from 'toggle-switch-react-native'
-import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
 
@@ -70,58 +69,59 @@ const NotificationsUI = (props: any) => {
 	}, [notificationsList])
 
 	return (
-		<Container noPadding>
+		<Container>
 			<NavBar
 				title={t('NOTIFICATIONS', 'Notifications')}
 				titleAlign={'center'}
 				onActionLeft={goToBack}
 				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+				style={{
+					paddingHorizontal: 40,
+					paddingVertical: 0,
+				}}
 			/>
 			{showCustomerPromotions && showNotifications && (
 				<>
 					<Spinner visible={singleNotifications?.loading} />
-					<View style={{ ...styles.pagePadding }}>
-						<NotificationsGroupSwitchWrapper>
-							<OText style={{ ...styles.title }}>{t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')}</OText>
-							<SwitchWrapper>
-								<OText>{t('EMAILS', 'Emails')}</OText>
-								<ToggleSwitch
-									isOn={notificationsList?.email}
-									onColor={theme.colors.primary}
-									size="small"
-									disabled={singleNotifications?.loading}
-									offColor={theme.colors.disabled}
-									animationSpeed={400}
-									onToggle={() => handleEditNotifications('email', !notificationsList?.email)}
-								/>
-							</SwitchWrapper>
-							<SwitchWrapper>
-								<OText>{t('SMS', 'Sms')}</OText>
-								<ToggleSwitch
-									isOn={notificationsList?.sms}
-									onColor={theme.colors.primary}
-									size="small"
-									disabled={singleNotifications?.loading}
-									offColor={theme.colors.disabled}
-									animationSpeed={400}
-									onToggle={() => handleEditNotifications('sms', !notificationsList?.sms)}
-								/>
-							</SwitchWrapper>
-							<SwitchWrapper>
-								<OText>{t('PUSH_NOTIFICATIONS', 'Push Notifications')}</OText>
-								<ToggleSwitch
-									isOn={notificationsList?.notification}
-									onColor={theme.colors.primary}
-									size="small"
-									disabled={singleNotifications?.loading}
-									offColor={theme.colors.disabled}
-									animationSpeed={400}
-									onToggle={() => handleEditNotifications('notification', !notificationsList?.notification)}
-								/>
-							</SwitchWrapper>
-						</NotificationsGroupSwitchWrapper>
-					</View>
+					<NotificationsGroupSwitchWrapper>
+						<OText style={{ ...styles.title }}>{t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')}</OText>
+						<SwitchWrapper>
+							<OText>{t('EMAILS', 'Emails')}</OText>
+							<ToggleSwitch
+								isOn={notificationsList?.email}
+								onColor={theme.colors.primary}
+								size="small"
+								disabled={singleNotifications?.loading}
+								offColor={theme.colors.disabled}
+								animationSpeed={400}
+								onToggle={() => handleEditNotifications('email', !notificationsList?.email)}
+							/>
+						</SwitchWrapper>
+						<SwitchWrapper>
+							<OText>{t('SMS', 'Sms')}</OText>
+							<ToggleSwitch
+								isOn={notificationsList?.sms}
+								onColor={theme.colors.primary}
+								size="small"
+								disabled={singleNotifications?.loading}
+								offColor={theme.colors.disabled}
+								animationSpeed={400}
+								onToggle={() => handleEditNotifications('sms', !notificationsList?.sms)}
+							/>
+						</SwitchWrapper>
+						<SwitchWrapper>
+							<OText>{t('PUSH_NOTIFICATIONS', 'Push Notifications')}</OText>
+							<ToggleSwitch
+								isOn={notificationsList?.notification}
+								onColor={theme.colors.primary}
+								size="small"
+								disabled={singleNotifications?.loading}
+								offColor={theme.colors.disabled}
+								animationSpeed={400}
+								onToggle={() => handleEditNotifications('notification', !notificationsList?.notification)}
+							/>
+						</SwitchWrapper>
+					</NotificationsGroupSwitchWrapper>
 				</>
 			)}
 		</Container>
@@ -132,10 +132,6 @@ const styles = StyleSheet.create({
 	title: {
 		marginBottom: 24,
 		fontWeight: 'bold',
-	},
-	pagePadding: {
-		paddingLeft: 40,
-		paddingRight: 40
 	}
 });
 

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

@@ -96,7 +96,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 					<NavBar
 						onActionLeft={() => goToBack()}
 						btnStyle={{ paddingLeft: 0, width: 50 }}
-						paddingTop={0}
+						paddingTop={Platform.OS === 'ios' ? 10 : 0}
 						style={{ paddingBottom: 0 }}
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}

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

@@ -51,6 +51,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import NavBar from '../NavBar';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -166,6 +167,10 @@ export const ProductOptionsUI = (props: any) => {
 			justifyContent: 'space-between',
 			width: '100%',
 			marginTop: 10
+		},
+		wrapperNavbar: {
+			paddingHorizontal: 40,
+			paddingTop: 0,
 		}
 	});
 
@@ -208,7 +213,7 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-        Vibration.vibrate()
+		Vibration.vibrate()
 		if (!productCart.quantity) {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_REQUIRED', 'The quantity field is required').replace('_attribute_', t('PRODUCT_POTIONS_QUANTITY', 'Quantity')))
 			return
@@ -301,7 +306,7 @@ export const ProductOptionsUI = (props: any) => {
 		maxProductQuantity === 0 ||
 		Object.keys(errors)?.length > 0;
 
-	
+
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
 			{options.map(({ id, name, respect_to, suboptions }: any) => (
@@ -483,14 +488,16 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [])
 
-
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
-			<TopHeader>
-				<TopActions onPress={() => handleGoBack()}>
-					<IconAntDesign name='arrowleft' size={26} />
-				</TopActions>
-			</TopHeader>
+			<View style={styles.wrapperNavbar}>
+				<NavBar
+					onActionLeft={() => handleGoBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					paddingTop={4}
+				/>
+			</View>
 			{!error && (
 				<ScrollView
 					ref={scrollViewRef}

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

@@ -68,7 +68,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	return (
 		<View>
-			<Container onPress={() => handleSuboptionClick()}>
+			<Container>
 				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 						state?.selected ? (

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

@@ -19,7 +19,7 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
+import { View, StyleSheet, ScrollView, RefreshControl } from 'react-native'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
 
@@ -99,6 +99,7 @@ const PromotionsUI = (props: PromotionParams) => {
   return (
     <Container
       noPadding
+      pt={20}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -111,7 +112,7 @@ const PromotionsUI = (props: PromotionParams) => {
         titleAlign={'center'}
         onActionLeft={() => navigation.goBack()}
         showCall={false}
-        style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
+        style={{ paddingVertical: 0, marginLeft: 20 }}
       />
       <PromotionsContainer>
         <SearchBarContainer>

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

@@ -16,9 +16,8 @@ import { ProfileParams } from '../../types';
 import { UserFormDetailsUI } from '../UserFormDetails';
 
 import { OIcon, OIconButton, OModal } from '../shared';
-import { CenterView } from './styles';
+import { CenterView, Container } from './styles';
 import NavBar from '../NavBar';
-import { Container } from '../../layouts/Container';
 import { VerifyPhone } from '../VerifyPhone'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import FastImage from 'react-native-fast-image'
@@ -51,11 +50,6 @@ const ProfileUI = (props: ProfileParams) => {
 			shadowOpacity: 0.2,
 			backgroundColor: theme.colors.white,
 		},
-		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40,
-			justifyContent: 'center',
-		},
 		navBarStyle: {
 			paddingLeft: 40,
 			paddingRight: 40,
@@ -284,17 +278,16 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
-			<NavBar
-				title={t('ACCOUNT', 'Account')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation.goBack()}
-				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
-			/>
-			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
-				<Container noPadding>
-
-					<CenterView style={styles.pagePadding}>
+			<Container>
+				<NavBar
+					title={t('ACCOUNT', 'Account')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+				/>
+				<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
+					<CenterView>
 						<View style={styles.photo}>
 							{user?.photo ? (
 								<FastImage
@@ -317,17 +310,15 @@ const ProfileUI = (props: ProfileParams) => {
 							onClick={() => handleImagePicker()}
 						/>
 					</CenterView>
-					<View style={{ height: 8, marginLeft: -40, marginRight: -40, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
+					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
 					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
-					<View style={styles.pagePadding}>
-						<UserFormDetailsUI
-							{...props}
-							isEdit
-							setWillVerifyOtpState={setWillVerifyOtpState}
-						/>
-					</View>
-				</Container>
-			</KeyboardAvoidingView>
+					<UserFormDetailsUI
+						{...props}
+						isEdit
+						setWillVerifyOtpState={setWillVerifyOtpState}
+					/>
+				</KeyboardAvoidingView>
+			</Container>
 			<OModal
 				open={isModalVisible}
 				onClose={() => setIsModalVisible(false)}

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

@@ -9,6 +9,13 @@ export const UserData = styled.View`
   text-align: center;
 `
 
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+	  paddingTop: 20px;
+    margin-bottom: 40px;
+`
+
 export const Names = styled.View`
   flex-direction: row;
 `

package/themes/original/src/components/shared/OButton.tsx

@@ -120,7 +120,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<props.icon {...props.iconProps} />
 				) : null}
 				{props.imgLeftSrc ? (
-					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} />
+					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
 					<StyledText style={props.textStyle}>{props.text}</StyledText>