ordering-ui-react-native 0.16.70 → 0.16.73

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
-import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components/native';
+import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
@@ -38,7 +38,6 @@ export const BusinessBasicInformation = (
 	const { business, loading } = businessState;
 
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
@@ -46,8 +45,8 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-	const isChewLayout = orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
-	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'original'
+	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 
 	const styles = StyleSheet.create({
 		businesInfoheaderStyle: {

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

@@ -327,16 +327,17 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
         </OText>
       </WrapHeader>
       <SearchWrapper>
-        <SearchBar
-          autoFocus
-          lazyLoad
-          inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
-          onSearch={(val: string) => handleChangeTermValue(val)}
-          value={termValue}
-          iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
-        />
-
+        {isFocused && (
+          <SearchBar
+            autoFocus
+            lazyLoad
+            inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+            placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
+            onSearch={(val: string) => handleChangeTermValue(val)}
+            value={termValue}
+            iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
+          />
+        )}
       </SearchWrapper>
       {
         noResults && (

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

@@ -10,9 +10,9 @@ import {
 	useUtils,
 	ToastType,
 	useToast,
-	useConfig,
-	useOrderingTheme
+	useConfig
 } from 'ordering-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import Alert from '../../providers/AlertProvider'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -66,7 +66,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	} = props
 
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
 	const [orderState, { clearCart }] = useOrder()
@@ -75,9 +74,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [{ configs }] = useConfig()
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
-	const isChewLayout = orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
-	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-	const hideBusinessNearCity = orderingTheme?.theme?.business_view?.components?.near_business?.hidden
+	const isChewLayout = theme?.business_view?.components?.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
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -103,7 +102,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			padding: 15,
 			justifyContent: 'center',
 			shadowColor: theme.colors.clear,
-		}
+		},
+		businessSkeleton: {
+			borderRadius: 8,
+			marginRight: 20,
+			width: 56,
+			height: 56
+		},
 	})
 
 	const { business, loading, error } = businessState
@@ -277,6 +282,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</WrapSearchBar>
 						)}
 					</TopHeader>
+					{!hideBusinessNearCity && loading && (
+						<NearBusiness style={{ paddingBottom: 10 }}>
+							<Placeholder Animation={Fade}>
+								<View style={{ flexDirection: 'row' }}>
+									{[...Array(10).keys()].map(i => (
+										<View style={styles.businessSkeleton} key={i}>
+											<PlaceholderLine style={{ width: '100%', height: '100%' }} />
+										</View>
+									))}
+								</View>
+							</Placeholder>
+						</NearBusiness>
+					)}
 					{!hideBusinessNearCity && businessState?.business?.city_id && (
 						<NearBusiness>
 							<BusinessesListing

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

@@ -18,8 +18,7 @@ import {
 	useSession,
 	useOrder,
 	useConfig,
-	useUtils,
-	useOrderingTheme
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
@@ -75,13 +74,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		logosLayout
 	} = props;
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
 	const searchBarRef = useRef<any>()
 	const [appStateVisible, setAppStateVisible] = useState(appState.current);
-	const isChewLayout = orderingTheme?.theme?.header?.components?.layout?.type === 'chew'
-	const hideCities = orderingTheme?.theme?.business_listing_view?.components?.cities?.hidden
+	const isChewLayout = theme?.header?.components?.layout?.type === 'original'
+	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
 	const styles = StyleSheet.create({
 		container: {
@@ -132,7 +130,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			borderColor: theme.colors.backgroundGray,
 			borderRadius: 8,
 			marginHorizontal: 40,
-			height: 45
+			minHeight: 45,
+			paddingVertical: 5,
+			paddingHorizontal: 20,
+			borderWidth: 1
 		},
 		businessSkeleton: {
 			borderRadius: 8,
@@ -426,7 +427,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</OrderControlContainer>
 				) : (
 					<>
-						{!isPreOrderSetting && (// cambiar
+						{isPreOrderSetting && (
 							<View style={{ paddingHorizontal: 30 }}>
 								<PreorderInput
 									isChewLayout={isChewLayout}
@@ -464,36 +465,26 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</OrderTypesContainer>
 			)}
 			{!businessId && (
-				<SearchBar
-					forwardRef={searchBarRef}
-					onSearch={handleChangeSearch}
-					searchValue={searchValue}
-					lazyLoad
-					hideIcon
-					isCancelXButtonShow={!!searchValue}
-					onCancel={() => handleChangeSearch('')}
-					placeholder={t('SEARCH', 'Search')}
-					height={50}
-					isDisabled={true}
-					inputContainerStyles={styles.inputContainerStyles}
-					containerStyles={{
-						marginHorizontal: 40,
-						marginTop: 20
-					}}
-					inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? { paddingBottom: 6 } : { paddingBottom: 4 } }}
-					onPress={() => { navigation.navigate('BusinessSearch', { businessTypes }) }}
-					onSubmitEditing={() => { navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
-				/>
+				<View style={{ marginTop: 20 }}>
+					<OButton
+						onClick={() => navigation.navigate('BusinessSearch', { businessTypes })}
+						text={t('SEARCH', 'Search')}
+						style={styles?.buttonCityStyle}
+						textStyle={{ color: theme.colors.textSecondary, fontSize: 16 }}
+					/>
+				</View>
 			)}
 
 			{!hideCities && (
 				<View style={{ marginTop: 10 }}>
-					<OButton
-						onClick={() => setIsOpenCities(true)}
-						text={citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
-						style={styles?.buttonCityStyle}
-						textStyle={{ color: theme.colors.backgroundGray, fontWeight: 'bold', fontSize: 18 }}
-					/>
+					<TouchableOpacity
+						style={styles.buttonCityStyle}
+						onPress={() => setIsOpenCities(true)}
+					>
+						<OText size={18} color={theme.colors.backgroundGray} weight='bold' style={{ textAlign: 'center' }}>
+							{citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
+						</OText>
+					</TouchableOpacity>
 				</View>
 			)}
 			<OrderProgressWrapper>

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

@@ -1,6 +1,6 @@
 
 import React, { useState, useEffect } from 'react'
-import { useOrder, useSession, useLanguage, useOrderingTheme } from 'ordering-components/native';
+import { useOrder, useSession, useLanguage } from 'ordering-components/native';
 
 import { useTheme } from 'styled-components/native'
 import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
@@ -12,8 +12,7 @@ import { NotificationSetting } from '../../../../../src/components/NotificationS
 export const BusinessesListing = (props: any) => {
   const { logosLayout } = props
   const theme = useTheme()
-  const [orderingTheme] = useOrderingTheme()
-  const layout = orderingTheme?.theme?.business_listing_view?.components?.layout?.type || 'original'
+  const layout = theme?.business_listing_view?.components?.layout?.type || 'original'
   const [, t] = useLanguage();
   const [{ auth }] = useSession()
   const [, { getLastOrderHasNoReview }] = useOrder();

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

@@ -145,6 +145,10 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   };
 
   const handleClickViewOrder = (uuid: string) => {
+    if (isMessageView) {
+      handleClickOrder(order?.uuid)
+      return
+    }
     onNavigationRedirect &&
       onNavigationRedirect('OrderDetails', { orderId: uuid });
   };
@@ -274,16 +278,18 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   {getOrderStatus(order.status)?.value}
                 </OText>
               </View>
-              <TouchableOpacity
-                onPress={handleChangeFavorite}
-                style={{ marginTop: 5 }}
-              >
-                <IconAntDesign
-                  name={order?.favorite ? 'heart' : 'hearto'}
-                  color={theme.colors.danger5}
-                  size={16}
-                />
-              </TouchableOpacity>
+              {!isMessageView && (
+                <TouchableOpacity
+                  onPress={handleChangeFavorite}
+                  style={{ marginTop: 5 }}
+                >
+                  <IconAntDesign
+                    name={order?.favorite ? 'heart' : 'hearto'}
+                    color={theme.colors.danger5}
+                    size={16}
+                  />
+                </TouchableOpacity>
+              )}
             </ContentFooter>
           </CardInfoWrapper>
         </InnerContainer>

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

@@ -5,7 +5,6 @@ import {
 	useOrder,
 	useUtils,
 	useSession,
-	useOrderingTheme,
 	SingleProductCard as SingleProductCardController
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -41,8 +40,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	} = props;
 
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
-	const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
+	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 
 	const fadeAnim = useRef(new Animated.Value(0)).current;
 
@@ -52,6 +50,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.border,
 			marginBottom: 28,
+			minHeight: 165
 		},
 		titleWrapper: {
 			flexDirection: 'row',