ordering-ui-react-native 0.17.74 → 0.17.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.74",
+  "version": "0.17.75",
   "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'
@@ -139,8 +138,6 @@ const AddressListUI = (props: AddressListParams) => {
 
 	return (
 		<Container
-			pt={20}
-			noPadding
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -148,20 +145,18 @@ const AddressListUI = (props: AddressListParams) => {
 				/>
 			}
 		>
-			{isProfile && (
-				<NavBar
-					title={t('SAVED_PLACES', 'My saved places')}
-					titleAlign={'center'}
-					onActionLeft={goToBack}
-					showCall={false}
-					style={{
-						paddingHorizontal: 40,
-						marginTop: Platform.OS === 'ios' ? 0 : 10
-					}}
-				/>
-			)}
 			{(!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 &&
 						(
@@ -327,7 +322,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/BusinessBasicInformation/index.tsx

@@ -46,7 +46,7 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 
 	const styles = StyleSheet.create({

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

@@ -11,7 +11,7 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, Vibration, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
@@ -142,6 +142,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	};
 
 	const handleBusinessClick = (selectedBusiness: any) => {
+		Vibration.vibrate()
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
 			if (configState?.configs?.preorder_status_enabled?.value === '1') {

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

@@ -76,7 +76,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
   ]
 
-  const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 
   const priceList = [
     { level: '1', content: '$' },
@@ -229,7 +229,9 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   }, [isFocused])
 
   return (
-    <BContainer>
+    <BContainer
+      style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+    >
       <SearchWrapper>
         <SearchBar
           lazyLoad

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

@@ -82,7 +82,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const isFocused = useIsFocused();
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
-	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 	const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
 
@@ -139,7 +139,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)
 	}
@@ -458,6 +458,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						<>
 							<WrapContent
 								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
+								style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
 							>
 								<BusinessProductsList
 									categories={[
@@ -515,7 +516,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					)}
 				</IOScrollView>
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
-					<View style={{ marginBottom: 0, zIndex: 20000 }}>
+					<View style={{ marginBottom: 0 }}>
 						<FloatingButton
 							btnText={
 								openUpselling
@@ -571,6 +572,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/BusinessProductsListing/styles.tsx

@@ -24,7 +24,7 @@ export const WrapSearchBar = styled.View`
   flex: 1;
 `
 export const WrapContent = styled.View`
-  padding: 10px 40px;
+  padding-vertical: 10px;
 `
 
 export const BusinessProductsListingContainer = styled.ScrollView`

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

@@ -557,7 +557,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			<PageBanner position='app_business_listing' />
 
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<ListWrapper>
+			<ListWrapper ph={isChewLayout && 20}>
 				{!businessId && (
 					<BusinessTypeFilter
 						images={props.images}

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

@@ -67,7 +67,7 @@ export const HeaderWrapper = styled.ImageBackground`
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: ${(props: any) => props.ph ?? 40}px;
 `;
 
 export const FeaturedWrapper = styled.View`

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

@@ -19,8 +19,12 @@ export const CartContent = (props: any) => {
 	const [, t] = useLanguage()
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
 
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+
 	return (
-		<CCContainer>
+		<CCContainer
+			style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+		>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
 					{carts.map((cart: any, i: number) => (

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native';
 
 export const CCContainer = styled.View`
-  padding: 20px 40px;
+  padding-vertical: 20px;
 `
 
 export const CCNotCarts = styled.View`

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

@@ -154,7 +154,7 @@ const CheckoutUI = (props: any) => {
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
 	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
-	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
@@ -191,6 +191,7 @@ const CheckoutUI = (props: any) => {
 
 	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
 		if (!userErrors.length && !requiredFields?.length || forcePlace) {
+			Vibration.vibrate()
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}

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

@@ -35,7 +35,7 @@ export const MyOrders = (props: any) => {
     { key: 'business', value: t('BUSINESS', 'Business') },
     { key: 'products', value: t('PRODUCTS', 'Products') }
   ]
-  const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
   const showNavbar = theme?.bar_menu?.components?.orders?.hidden
 
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
@@ -68,7 +68,6 @@ export const MyOrders = (props: any) => {
 
   return (
     <Container
-      pt={0}
       noPadding
       refreshControl={
         <RefreshControl
@@ -84,12 +83,11 @@ export const MyOrders = (props: any) => {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
-            paddingHorizontal: 40,
-            marginTop: Platform.OS === 'android' ? 50 : 30,
+            paddingHorizontal: isChewLayout ? 20 : 40,
           },
           ...props.titleStyle
         }}>
-          {!props.hideBackBtn && (
+          {!props.hideBackBtn && !isChewLayout && (
             <OButton
               imgLeftStyle={{ width: 18 }}
               imgRightSrc={null}
@@ -121,7 +119,7 @@ export const MyOrders = (props: any) => {
         <ScrollView
           horizontal
           style={{ ...styles.container, borderBottomWidth: 1 }}
-          contentContainerStyle={{ paddingHorizontal: !!businessesSearchList ? 0 : 40 }}
+          contentContainerStyle={{ paddingHorizontal: !!businessesSearchList ? 0 : isChewLayout ? 20 : 40 }}
           showsHorizontalScrollIndicator={false}
           scrollEventThrottle={16}
         >
@@ -146,7 +144,7 @@ export const MyOrders = (props: any) => {
       {selectedOption === 'orders' && (
         <>
           {ordersLength?.activeOrdersLength > 0 && (
-            <View style={{ paddingLeft: 40, paddingRight: 40 }}>
+            <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
               <OrdersOption
                 {...props}
                 activeOrders
@@ -157,7 +155,7 @@ export const MyOrders = (props: any) => {
               />
             </View>
           )}
-          <View style={{ paddingLeft: 40, paddingRight: 40 }}>
+          <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
             <OrdersOption
               {...props}
               ordersLength={ordersLength}

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,10 +69,7 @@ const NotificationsUI = (props: any) => {
 	}, [notificationsList])
 
 	return (
-		<Container
-			noPadding
-			pt={10}
-		>
+		<Container>
 			<NavBar
 				title={t('NOTIFICATIONS', 'Notifications')}
 				titleAlign={'center'}
@@ -87,47 +83,45 @@ const NotificationsUI = (props: any) => {
 			{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>
@@ -138,10 +132,6 @@ const styles = StyleSheet.create({
 	title: {
 		marginBottom: 24,
 		fontWeight: 'bold',
-	},
-	pagePadding: {
-		paddingLeft: 40,
-		paddingRight: 40
 	}
 });
 

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

@@ -4,9 +4,16 @@ export const ContainerButtons = styled.View`
     margin-vertical: 50px
 `
 
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+	  padding: 20px;
+`
+
 export const NotificationsGroupSwitchWrapper = styled.View`
   flex-grow: 1;
   justify-content: space-between;
+	paddingHorizontal: 20px;
 `
 
 export const SwitchWrapper = styled.View`
@@ -14,4 +21,4 @@ export const SwitchWrapper = styled.View`
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 12px;
-`
+`

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

@@ -9,7 +9,8 @@ import {
 	I18nManager,
 	SafeAreaView,
 	Platform,
-	Button
+	Button,
+	Vibration
 } from 'react-native';
 import {
 	ProductForm as ProductOptions,
@@ -75,6 +76,8 @@ export const ProductOptionsUI = (props: any) => {
 	const theme = useTheme();
 	const [, { showToast }] = useToast()
 
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+
 	const styles = StyleSheet.create({
 		mainContainer: {
 
@@ -205,6 +208,7 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
+        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
@@ -618,7 +622,10 @@ export const ProductOptionsUI = (props: any) => {
 							</>
 						)}
 					</WrapHeader>
-					<ProductSummary onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}>
+					<ProductSummary
+						ph={isChewLayout ? 20 : 40}
+						onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}
+					>
 						<ProductTitle>
 							{loading && !product ? (
 								<Placeholder Animation={Fade}>
@@ -718,7 +725,7 @@ export const ProductOptionsUI = (props: any) => {
 								marginBottom: 20,
 								borderBottomWidth: 1,
 								borderBottomColor: theme.colors.border,
-								marginHorizontal: 30,
+								marginHorizontal: isChewLayout ? 20 : 30,
 								backgroundColor: theme.colors.backgroundPage,
 							}}
 						>
@@ -792,6 +799,7 @@ export const ProductOptionsUI = (props: any) => {
 						</>
 					) : (
 						<ProductEditions
+							style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
 							onLayout={(event: any) => {
 								setEditionsLayoutY(event.nativeEvent.layout?.y)
 							}}

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

@@ -47,7 +47,7 @@ export const ProductTitle = styled.View`
 export const ProductDescription = styled.View``
 
 export const ProductEditions = styled.View`
-  padding: 0 40px;
+  padding-vertical: 0;
 `
 
 export const SectionTitle = styled.View`
@@ -94,7 +94,7 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
-  padding: 26px 40px 0;
+  padding: 26px ${(props: any) => props.ph}px 0;
   position: relative;
   background-color: white;
   z-index: 100;

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

@@ -41,7 +41,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
-	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const iconsSize = isChewLayout ? 20 : 16
 
 	const handleSuboptionClick = () => {

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

@@ -49,6 +49,8 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const theme = useTheme();
 
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+
 	const langPickerStyle = StyleSheet.create({
 		inputAndroid: {
 			color: theme.colors.textNormal,
@@ -89,8 +91,7 @@ const ProfileListUI = (props: ProfileParams) => {
 			marginEnd: 14
 		},
 		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
+			paddingHorizontal: isChewLayout ? 20 : 40
 		},
 		messageIconStyle: {
 			fontSize: 18,
@@ -164,9 +165,6 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	return (
 		<View style={{ flex: 1, height: height - top - bottom, paddingTop: 20 }}>
-			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
-				{t('PROFILE', 'Profile')}
-			</OText> */}
 			<CenterView style={styles.pagePadding}>
 				{user?.photo && (
 					<View style={styles.photo}>

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,19 +278,16 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
-			<Container
-				pt={15}
-				noPadding
-			>
+			<Container>
 				<NavBar
 					title={t('ACCOUNT', 'Account')}
 					titleAlign={'center'}
 					onActionLeft={() => navigation.goBack()}
 					showCall={false}
-					style={{ paddingHorizontal: 40 }}
+					btnStyle={{ paddingLeft: 0 }}
 				/>
 				<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
-					<CenterView style={styles.pagePadding}>
+					<CenterView>
 						<View style={styles.photo}>
 							{user?.photo ? (
 								<FastImage
@@ -319,15 +310,13 @@ 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>
+					<UserFormDetailsUI
+						{...props}
+						isEdit
+						setWillVerifyOtpState={setWillVerifyOtpState}
+					/>
 				</KeyboardAvoidingView>
 			</Container>
 			<OModal

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

@@ -71,7 +71,7 @@ const WalletsUI = (props: any) => {
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
-  const isChewLayout = theme?.wallets_view?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)