ordering-ui-react-native 0.12.49 → 0.12.50

package/package.json

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

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

@@ -10,6 +10,7 @@ import {
 	OrderInformation,
 	BusinessInformation,
 	Price,
+	LoadMore
 } from './styles';
 import { View, StyleSheet } from 'react-native';
 import { getGoogleMapImage } from '../../utils';
@@ -113,6 +114,18 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 					orders.map((order: any, index: any) => (
 						<Order key={order?.id || order?.uuid} order={order} index={index} />
 					))}
+				{pagination?.totalPages && pagination?.currentPage < pagination?.totalPages && (
+					<LoadMore>
+						<OButton
+							bgColor={theme.colors.white}
+							textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+							text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+							borderColor={theme.colors.primary}
+							onClick={loadMoreOrders}
+							style={styles.loadMoreButton}
+						/>
+					</LoadMore>
+				)}
 			</ActiveOrdersContainer>
 			<View
 				style={{
@@ -140,4 +153,10 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		minWidth: 230,
 	},
+	loadMoreButton: {
+		width: 200,
+		height: 46,
+		marginLeft: 'auto',
+		marginRight: 'auto',
+	},
 });

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

@@ -42,3 +42,8 @@ export const Price = styled.View`
   margin-left: 10px;
   width: 30%;
 `
+export const LoadMore = styled.View`
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 10px;
+`

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

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components/native';
 export const Card = styled.TouchableOpacity`
   margin-vertical: 20px;
   border-radius: 7.6px;
-  flex: 1;
   width: 100%;
-`;
+  position: relative;
+`
 
 export const BusinessHero = styled.View`
   position: relative;
@@ -40,9 +40,9 @@ export const Metadata = styled.View`
 `;
 
 export const BusinessState = styled.View`
-    position: absolute;
-	 top: 13px;
-	 end: 18px;
+  position: absolute;
+	top: 13px;
+	end: 18px;
 `
 
 export const BusinessLogo = styled.View`

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

@@ -29,7 +29,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	const [, t] = useLanguage();
 
 	const theme = useTheme();
-  const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
+	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
 
 	const renderTypes = ({ item }: any) => {
 		return (
@@ -110,17 +110,17 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 				entireModal
 			>
 				<ScrollView style={styles.allCategoriesContainer}>
-          <OText
-            size={20}
-            mBottom={30}
-            color={theme.colors.textSecondary}
-            style={{ paddingHorizontal: 10 }}
-          >
-            {t('ALL_CATEGORIES', 'All categories')}
-          </OText>
-          <View style={styles.allCategoriesWrapper}>
-            {typesState?.types.map((item: any) => (
-              <TouchableOpacity
+					<OText
+						size={20}
+						mBottom={30}
+						color={theme.colors.textSecondary}
+						style={{ paddingHorizontal: 10 }}
+					>
+						{t('ALL_CATEGORIES', 'All categories')}
+					</OText>
+					<View style={styles.allCategoriesWrapper}>
+						{typesState?.types.map((item: any) => (
+							<TouchableOpacity
 								key={item.id}
 								style={styles.categoryStyle}
 								onPress={() => {
@@ -149,9 +149,9 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									{t(`BUSINESS_TYPE_${item.name.replace(/\s/g, '_').toUpperCase()}`, item.name)}
 								</OText>
 							</TouchableOpacity>
-            ))}
-          </View>
-        </ScrollView>
+						))}
+					</View>
+				</ScrollView>
 			</OModal>
 		</>
 	);
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
 		marginHorizontal: 10,
 		marginBottom: 40
 	},
-	allCategoriesContainer : {
+	allCategoriesContainer: {
 		paddingHorizontal: 30,
 		paddingVertical: 30
 	},

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

@@ -5,6 +5,7 @@ export const BCContainer = styled.View`
   width: 100%;
   justify-content: flex-start;
   text-align: center;
+  min-height: 45px; 
 `
 
 export const BusinessCategories = styled.View`

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

@@ -281,15 +281,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)}
 				{businessesList.businesses?.map(
-					(business: any) =>
-						!business.featured && (
-							<BusinessController
-								key={business.id}
-								business={business}
-								handleCustomClick={handleBusinessClick}
-								orderType={orderState?.options?.type}
-							/>
-						),
+					(business: any) => (
+						<BusinessController
+							key={business.id}
+							business={business}
+							handleCustomClick={handleBusinessClick}
+							orderType={orderState?.options?.type}
+						/>
+					)
 				)}
 				{businessesList.loading && (
 					<>

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

@@ -71,5 +71,6 @@ export const FeaturedWrapper = styled.View`
 
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
+  margin-bottom: 20px;
 	padding-horizontal: 40px;
 `