ordering-ui-react-native 0.15.31 → 0.15.34

package/themes/kiosk/src/components/UpsellingProducts/index.tsx

@@ -1,6 +1,6 @@
 import React,{ useState, useEffect } from 'react'
 import Spinner from 'react-native-loading-spinner-overlay';
-import { StyleSheet, View, Platform } from 'react-native'
+import { StyleSheet, View, Platform, ImageBackground } from 'react-native'
 import {
   UpsellingPage as UpsellingPageController,
   useUtils,
@@ -20,6 +20,7 @@ import { Container } from '../../layouts/Container';
 import GridContainer from '../../layouts/GridContainer';
 import { PORTRAIT, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 import { useTheme } from 'styled-components/native';
+import FastImage from 'react-native-fast-image';
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   const {
@@ -114,7 +115,24 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                 {
                   !upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
                     <Item key={product.id}>
-                      <OImage source={{ uri: product.images }} style={styles.imageStyle} />
+                      {product?.images ? (
+                        <FastImage
+                          style={styles.imageStyle}
+                          source={{
+                            uri: product?.images,
+                            priority: FastImage.priority.normal,
+                            // cache:FastImage.cacheControl.web
+                          }}
+                          resizeMode={FastImage.resizeMode.cover}
+                        />
+                      ) : (
+                        <ImageBackground
+                          style={styles.imageStyle}
+                          source={theme.images.dummies.product}
+                          imageStyle={{ borderRadius: 10 }}
+                          resizeMode='cover'
+                        />
+                      )}
                       <Details>
                         <OText
                           weight="500"
@@ -125,24 +143,22 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                           {product.name}
                         </OText>
 
-                        {!!product?.price && (
-                          <OText>
-                            <OText
-                              color={theme.colors.primary}
-                              weight="500"
-                            >
-                              {parsePrice(product.price)}
-                            </OText>
+                        <OText>
+                          <OText
+                            color={theme.colors.primary}
+                            weight="500"
+                          >
+                            {parsePrice(product.price)}
+                          </OText>
 
-                            <OText
-                              color={theme.colors.mediumGray}
-                              size={12}
-                              style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
-                            >
-                              {product?.offer_price ? `  ${parsePrice(product?.offer_price)}  ` : ''}
-                            </OText>
+                          <OText
+                            color={theme.colors.mediumGray}
+                            size={12}
+                            style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
+                          >
+                            {product?.offer_price ? `  ${parsePrice(product?.offer_price)}  ` : ''}
                           </OText>
-                        )}
+                        </OText>
                       </Details>
 
                       <OButton
@@ -200,24 +216,22 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                                   {product.name}
                                 </OText>
 
-                                {!!product?.price && (
-                                  <OText>
-                                    <OText
-                                      color={theme.colors.primary}
-                                      weight="500"
-                                      >
-                                      {parsePrice(product.price)}
-                                    </OText>
+                                <OText>
+                                  <OText
+                                    color={theme.colors.primary}
+                                    weight="500"
+                                    >
+                                    {parsePrice(product.price)}
+                                  </OText>
 
-                                    <OText
-                                      color={theme.colors.mediumGray}
-                                      size={12}
-                                      style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
-                                      >
-                                      {product?.offer_price ? parsePrice(product?.offer_price) : ''}
-                                    </OText>
+                                  <OText
+                                    color={theme.colors.mediumGray}
+                                    size={12}
+                                    style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
+                                    >
+                                    {product?.offer_price ? parsePrice(product?.offer_price) : ''}
                                   </OText>
-                                )}
+                                </OText>
                               </Details>
                               <OButton
                                 text={t('ADD_PRODUCT', 'add product')}

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

@@ -25,12 +25,20 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-	const { 
-		business, 
-		handleClick, 
-		navigation, 
-		isBusinessOpen, 
-		style
+	const {
+		business,
+		handleClick,
+		navigation,
+		isBusinessOpen,
+		style,
+		businessHeader,
+		businessFeatured,
+		businessLogo,
+		businessReviews,
+		businessDeliveryPrice,
+		businessDeliveryTime,
+		businessPickupTime,
+		businessDistance
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
@@ -116,12 +124,12 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 				<FastImage
 					style={{ height: 120 }}
 					source={{
-							uri: optimizeImage(business?.header, 'h_500,c_limit'),
-							priority: FastImage.priority.normal,
+						uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
+						priority: FastImage.priority.normal,
 					}}
 					resizeMode={FastImage.resizeMode.cover}
 				/>
-				{business?.featured && (
+				{(businessFeatured ?? business?.featured) && (
 					<View style={styles.featured}>
 						<FontAwesomeIcon name="crown" size={26} color="gold" />
 					</View>
@@ -145,17 +153,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						<FastImage
 							style={{ width: 56, height: 56 }}
 							source={{
-									uri: optimizeImage(business?.logo, 'h_150,c_limit'),
-									priority: FastImage.priority.normal,
+								uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+								priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
 					</BusinessLogo>
-					{business?.reviews?.total > 0 && (
+					{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
 						<Reviews>
 							<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
 							<OText size={10} style={{ lineHeight: 15 }}>
-								{parseNumber(business?.reviews?.total, { separator: '.' })}
+								{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
 							</OText>
 						</Reviews>
 					)}
@@ -182,14 +190,14 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					) : (
 						<View style={styles.bullet}>
 							<OText size={10} color={theme.colors.textSecondary}>
-								{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(business?.delivery_price) + ' \u2022 '}`}
+								{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 							</OText>
 							<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
 								orderState?.options?.type === 1
-									? business?.delivery_time
-									: business?.pickup_time,
+									? (businessDeliveryTime ?? business?.delivery_time)
+									: (businessPickupTime ?? business?.pickup_time),
 							)} \u2022 `}</OText>
-							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(business?.distance)}</OText>
+							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
 						</View>
 					)}
 				</Metadata>

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

@@ -237,7 +237,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 };
 
 const bpStyles = StyleSheet.create({
-  catWrap: { flexDirection: 'row', alignItems: 'center', height: 41, marginBottom: 19 },
+  catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
   catIcon: {
     borderRadius: 7.6,
     shadowColor: '#000000',

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

@@ -72,6 +72,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			borderWidth: 0,
 			backgroundColor: theme.colors.clear,
 			shadowColor: theme.colors.clear,
+			padding: 40,
 		},
 		searchIcon: {
 			borderWidth: 0,

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

@@ -166,8 +166,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		return R * c
 	}
 
+	const resetInactivityTimeout = () => {
+		clearTimeout(timerId.current)
+		timerId.current = setInterval(() => {
+			getBusinesses(true)
+		}, 120000)
+	}
+
 	useEffect(() => {
-		if (businessesList.businesses.length > 0) {
+		if (!businessesList?.loading) {
 			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
 			const ary = [];
 			while (fb.length > 0) {
@@ -175,16 +182,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			}
 			setFeaturedBusinesses(ary);
 		}
-	}, [businessesList.businesses]);
-
-	const resetInactivityTimeout = () => {
-		clearTimeout(timerId.current)
-		timerId.current = setInterval(() => {
-			getBusinesses(true)
-		}, 300000)
-	}
-
-	useEffect(() => {
 		resetInactivityTimeout()
 	}, [businessesList.loading])
 
@@ -207,27 +204,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		})
 	}, [orderState?.options?.address?.location])
 
-	useEffect(() => {
-		const onFocusApp = (nextAppState: any) => {
-			if (
-				appState.current.match(/inactive|background/) &&
-				nextAppState === "active"
-			) {
-				getBusinesses(true);
-			}
-			appState.current = nextAppState;
-			setAppStateVisible(appState.current);
-		}
-
-		AppState.addEventListener("change", onFocusApp);
-		return () => {
-			AppState.removeEventListener('change', onFocusApp);
-		};
-	}, [])
-
 	useFocusEffect(
 		useCallback(() => {
-			getBusinesses(true)
 			resetInactivityTimeout()
 			return () => clearTimeout(timerId.current)
 		}, [navigation])
@@ -401,6 +379,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							handleCustomClick={handleBusinessClick}
 							orderType={orderState?.options?.type}
 							navigation={navigation}
+							businessHeader={business?.header}
+							businessFeatured={business?.featured}
+							businessLogo={business?.logo}
+							businessReviews={business?.reviews}
+							businessDeliveryPrice={business?.delivery_price}
+							businessDeliveryTime={business?.delivery_time}
+							businessPickupTime={business?.pickup_time}
+							businessDistance={business?.distance}
 						/>
 					)
 				)}

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

@@ -254,8 +254,8 @@ const CheckoutUI = (props: any) => {
 					isVertical
 					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 					title={t('CHECKOUT', 'Checkout')}
-					style={styles.pagePadding}
-					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+					titleStyle={{ marginLeft: 0, marginRight: 0, paddingLeft: 40 }}
+					btnStyle={{ marginLeft: 40, padding: 40 }}
 				/>
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>

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

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import {
-	BusinessList as BusinessesListingController,
+  BusinessList as BusinessesListingController,
   useLanguage,
-	useOrder
+  useOrder
 } from 'ordering-components/native';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView, Platform, Dimensions } from 'react-native';
@@ -24,117 +24,125 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
   } = props;
 
   const [, t] = useLanguage()
-	const [orderState] = useOrder();
+  const [orderState] = useOrder()
 
   const windowWidth = Dimensions.get('window').width;
 
   useEffect(() => {
-    if (businessesList?.loading || !isLoading) return 
+    if (businessesList?.loading || !isLoading) return
     getBusinesses(true)
   }, [isLoading])
 
   return (
     <>
-      <ListWrapper>
-        <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
-        <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
-        <ScrollView
-          showsHorizontalScrollIndicator={false}
-          nestedScrollEnabled
-          horizontal
-          style={{ height: 300 }}
-        >
-          {businessesList.loading ? (
-            <>
-              {[
-                ...Array(10).keys()
-              ].map((item, i) => (
-                <Placeholder
-                  Animation={Fade}
-                  key={i}
-                  style={{
-                    marginTop: 20,
-                    width: windowWidth - 100,
-                    paddingHorizontal: 5,
-                    height: '100%'
-                  }}>
-                  <View style={{ width: '100%' }}>
-                    <PlaceholderLine
-                      height={150}
-                      style={{ marginBottom: 20, borderRadius: 8 }}
-                    />
-                    <View style={{ paddingHorizontal: 10 }}>
-                      <View
-                        style={{
-                          flexDirection: 'row',
-                          justifyContent: 'space-between',
-                        }}>
-                        <PlaceholderLine
-                          height={15}
-                          width={40}
-                          style={{ marginBottom: 15 }}
-                        />
-                        <PlaceholderLine
-                          height={15}
-                          width={20}
-                          style={{ marginBottom: 15 }}
-                        />
-                      </View>
+
+      {businessesList.loading ? (
+        <>
+          <ScrollView
+            showsHorizontalScrollIndicator={false}
+            nestedScrollEnabled
+            horizontal
+            style={{ height: 300, paddingHorizontal: 40 }}
+          >
+            {[
+              ...Array(10).keys()
+            ].map((item, i) => (
+              <Placeholder
+                Animation={Fade}
+                key={i}
+                style={{
+                  marginTop: 20,
+                  width: windowWidth - 100,
+                  paddingHorizontal: 5,
+                  height: '100%'
+                }}>
+                <View style={{ width: '100%' }}>
+                  <PlaceholderLine
+                    height={150}
+                    style={{ marginBottom: 20, borderRadius: 8 }}
+                  />
+                  <View style={{ paddingHorizontal: 10 }}>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}>
                       <PlaceholderLine
                         height={15}
-                        width={30}
-                        style={{ marginBottom: 10 }}
+                        width={40}
+                        style={{ marginBottom: 15 }}
                       />
                       <PlaceholderLine
                         height={15}
-                        width={80}
-                        style={{ marginBottom: 10 }}
+                        width={20}
+                        style={{ marginBottom: 15 }}
                       />
                     </View>
+                    <PlaceholderLine
+                      height={15}
+                      width={30}
+                      style={{ marginBottom: 10 }}
+                    />
+                    <PlaceholderLine
+                      height={15}
+                      width={80}
+                      style={{ marginBottom: 10 }}
+                    />
                   </View>
-                </Placeholder>
-              ))}
-            </>
-          ) : (
-            <>
-              {businessesList.businesses.length > 0 ? (
-                businessesList.businesses?.map(
-                  (business: any) => (
-                    <View
-                      key={business.id}
-                      style={{
-                        width: windowWidth - 100,
-                        paddingHorizontal: 5,
-                        height: '100%'
-                      }}
-                    >
-                      <BusinessController
-                        business={business}
-                        isBusinessOpen={business?.open}
-                        handleCustomClick={onBusinessClick}
-                        orderType={orderState?.options?.type}
-                        navigation={navigation}
-                      />
-                    </View>
+                </View>
+              </Placeholder>
+            ))}
+          </ScrollView>
+        </>
+      ) : (
+        <>
+          {businessesList.businesses.length > 0 && (
+            <ListWrapper>
+              <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
+              <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
+              <ScrollView
+                showsHorizontalScrollIndicator={false}
+                nestedScrollEnabled
+                horizontal
+                style={{ height: 300 }}
+              >
+                {
+                  businessesList.businesses?.map(
+                    (business: any) => (
+                      <View
+                        key={business.id}
+                        style={{
+                          width: windowWidth - 100,
+                          paddingHorizontal: 5,
+                          height: '100%'
+                        }}
+                      >
+                        <BusinessController
+                          business={business}
+                          isBusinessOpen={business?.open}
+                          handleCustomClick={onBusinessClick}
+                          orderType={orderState?.options?.type}
+                          navigation={navigation}
+                        />
+                      </View>
+                    )
                   )
-                )
-              ) : (
-                <NotFoundSource />
-              )}
-            </>
+                }
+              </ScrollView>
+            </ListWrapper>
           )}
-        </ScrollView>
-      </ListWrapper>
+        </>
+      )}
     </>
   )
 }
 
 export const HighestRatedBusinesses = (props: any) => {
-	const highestRatedBusinessesProps = {
-		...props,
-		UIComponent: HighestRatedBusinessesUI,
+  const highestRatedBusinessesProps = {
+    ...props,
+    UIComponent: HighestRatedBusinessesUI,
     initialOrderByValue: 'rating'
-	};
+  };
 
-	return <BusinessesListingController {...highestRatedBusinessesProps} />;
+  return <BusinessesListingController {...highestRatedBusinessesProps} />;
 }; 

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

@@ -332,30 +332,34 @@ const MessagesUI = (props: MessagesParams) => {
 		)
 	)
 
-	const renderSend = (props: any) => (
-		<Send
-			{...props}
-			disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-			alwaysShowSend
-			containerStyle={styles.containerSend}
-		>
-			<OIconButton
-				onClick={onSubmit}
-				style={{
-					height: 44,
-					width: 44,
-					borderRadius: 7.6,
-					opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
-					borderColor: theme.colors.primary,
-					backgroundColor: theme.colors.primary,
-				}}
-				iconStyle={{ marginTop: 3, marginRight: 2 }}
-				icon={theme.images.general.enter}
-				disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-				disabledColor={theme.colors.white}
-			/>
-		</Send>
-	)
+	const renderSend = (props: any) => {
+		const isDisabled = (sendMessage?.loading || (message === '' && !image) || messages?.loading)
+		return (
+			<Send
+				{...props}
+				disabled={isDisabled}
+				alwaysShowSend
+				containerStyle={styles.containerSend}
+			>
+				<OIconButton
+					onClick={onSubmit}
+					style={{
+						height: 44,
+						width: 44,
+						borderRadius: 7.6,
+						opacity: isDisabled ? 0.2 : 1,
+						borderColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+						backgroundColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+					}}
+					iconStyle={{ marginTop: 3, marginRight: 2 }}
+					icon={theme.images.general.enter}
+					iconColor={isDisabled ? '#000' : '#fff'}
+					disabled={isDisabled}
+					disabledColor={theme.colors.secondary}
+				/>
+			</Send>
+		)
+	}
 
 	const renderBubble = (props: any) => (
 		<Bubble

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

@@ -218,7 +218,7 @@ export const OrderProgress = (props: any) => {
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
-    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,

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

@@ -239,8 +239,8 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 		...props,
 		UIComponent: OrdersOptionUI,
 		orderStatus: props.preOrders ? [13] : props.activeOrders
-			? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21, 22, 23]
-			: [1, 2, 5, 6, 10, 11, 12, 16, 17],
+			? [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+			: [1, 2, 5, 6, 10, 11, 12, 15, 16, 17],
 		useDefualtSessionManager: true,
 	}
 

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

@@ -85,7 +85,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 				order: {
 					id: order?.id,
 					business_id: order?.business_id,
-					logo: order.business?.logo,
+					logo: order?.business?.logo,
 					driver: order?.driver,
 					products: order?.products,
 					review: order?.review,

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

@@ -6,9 +6,10 @@ export const WrapHeader = styled.View`
 `
 
 export const TopActions = styled.TouchableOpacity`
-	height: 44px;
+	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
+  width: 80px;
 `;
 
 export const TopHeader = styled.View`