ordering-ui-react-native 0.16.49-release → 0.16.50-release

package/package.json

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

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/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
 
@@ -457,6 +457,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						<>
 							<WrapContent
 								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
+								style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
 							>
 								<BusinessProductsList
 									categories={[

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

@@ -553,7 +553,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</>
 			)}
 			<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

@@ -153,7 +153,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) => {

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

@@ -75,6 +75,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: {
 
@@ -618,7 +620,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 +723,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 +797,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/Wallets/index.tsx

@@ -62,7 +62,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)