ordering-ui-react-native 0.17.61 → 0.17.63

package/package.json

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

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

@@ -24,13 +24,15 @@ const AddressDetailsUI = (props: any) => {
 	return (
 		<ADContainer>
 			<ADHeader>
-				<OText
-					size={16}
-					lineHeight={24}
-					color={theme.colors.textNormal}
-				>
-					{t('DELIVERY_ADDRESS', 'Delivery address')}
-				</OText>
+				{props.HeaderTitle ?? (
+					<OText
+						size={16}
+						lineHeight={24}
+						color={theme.colors.textNormal}
+					>
+						{t('DELIVERY_ADDRESS', 'Delivery address')}
+					</OText>
+				)}
 			</ADHeader>
 			{!!apiKey && (
 				<ADMap

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

@@ -65,6 +65,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	} = props;
 
 	const theme = useTheme();
+	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const tagsName = [
 		{ icon: theme.images.general.tag_home, value: 'home' },
@@ -104,6 +105,12 @@ const AddressFormUI = (props: AddressFormParams) => {
 			end: 0,
 			top: 12,
 			zIndex: 1002,
+			right: autoCompleteInputFocused && (
+				!!address?.address ||
+				!!formState.changes?.address ||
+				!!addressState.address.address
+			) ? 30 : 15,
+			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
 			? { paddingVertical: 0, paddingHorizontal: 40 }
@@ -138,7 +145,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const [isSignUpEffect, setIsSignUpEffect] = useState(false);
 	const [hasEditing, setAddressEditing] = useState(false);
-	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const googleInput: any = useRef(null);
 	const internalNumberRef: any = useRef(null);

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

@@ -11,7 +11,7 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
@@ -40,6 +40,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		navigation,
 		isBusinessOpen,
 		style,
+		isCustomLayout,
 		businessHeader,
 		businessFeatured,
 		businessLogo,
@@ -51,6 +52,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		handleFavoriteBusiness,
 		enableIntersection
 	} = props;
+
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
@@ -58,14 +60,19 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const windowHeight = Dimensions.get('window').height
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
+	const textSize = isCustomLayout ? 12 : 10
+	const cardHeight = windowHeight * 0.3
+
 	const styles = StyleSheet.create({
 		container: {
 			marginVertical: 20,
 			borderRadius: 7.6,
 			width: '100%',
-			position: 'relative'
+			position: 'relative',
+			height: cardHeight
 		},
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -159,11 +166,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
 				<CardAnimation
+					style={[style, styles.container]}
 					onClick={() => handleBusinessClick(business)}
-					style={[
-						style,
-						styles.container
-					]}
 				>
 					{business?.ribbon?.enabled && (
 						<RibbonBox
@@ -185,7 +189,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					)}
 					<BusinessHero>
 						<FastImage
-							style={{ height: 120 }}
+							style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
 							source={(businessHeader || business?.header) ? {
 								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
 								priority: FastImage.priority.normal,
@@ -211,7 +215,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo>
+						<BusinessInfo style={isCustomLayout && { position: 'absolute', bottom: 85, left: 15 }}>
 							<BusinessLogo style={styles.businessLogo}>
 								<FastImage
 									style={{ width: 56, height: 56 }}
@@ -222,38 +226,60 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 									resizeMode={FastImage.resizeMode.cover}
 								/>
 							</BusinessLogo>
-							<ReviewAndFavorite>
-								{(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(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-										</OText>
-									</Reviews>
-								)}
-								<LottieAnimation
-									type='favorite'
-									onClick={handleChangeFavorite}
-									initialValue={business?.favorite ? 0.75 : 0}
-									toValue={business?.favorite ? 0 : 0.75}
-									disableAnimation={!auth}
-									iconProps={{ color: theme.colors.danger5, size: 18 }}
-									isActive={business?.favorite}
-								/>
-							</ReviewAndFavorite>
+							{!isCustomLayout && (
+								<ReviewAndFavorite>
+									{(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(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+											</OText>
+										</Reviews>
+									)}
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={business?.favorite ? 0.75 : 0}
+										toValue={business?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={business?.favorite}
+									/>
+								</ReviewAndFavorite>
+							)}
 						</BusinessInfo>
-						<OText
-							size={12}
-							style={{ lineHeight: 18, marginBottom: 6 }}
-							weight={'500'}>
-							{business?.name}
-						</OText>
-						<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+						<View style={isCustomLayout && { width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+							<OText
+								size={textSize + 2}
+								style={{ lineHeight: 18, marginBottom: 6 }}
+								weight={'500'}>
+								{business?.name}
+							</OText>
+							{isCustomLayout && (
+								<ReviewAndFavorite>
+									{(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(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+											</OText>
+										</Reviews>
+									)}
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={business?.favorite ? 0.75 : 0}
+										toValue={business?.favorite ? 0 : 0.75}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={business?.favorite}
+									/>
+								</ReviewAndFavorite>
+							)}
+						</View>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={isCustomLayout ? 1 : 2}>
 							{business?.address}
 						</OText>
-						{/* <BusinessCategory>
-          <OText>{getBusinessType()}</OText>
-        </BusinessCategory> */}
 						<Metadata>
 							{!isBusinessOpen ? (
 								<View style={styles.closed}>
@@ -264,16 +290,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							) : (
 								<View style={styles.bullet}>
 									{orderState?.options?.type === 1 && (
-										<OText size={10} color={theme.colors.textSecondary}>
+										<OText size={textSize} color={theme.colors.textSecondary}>
 											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 										</OText>
 									)}
-									<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+									<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
 										orderState?.options?.type === 1
 											? (businessDeliveryTime ?? business?.delivery_time)
 											: (businessPickupTime ?? business?.pickup_time),
 									)} \u2022 `}</OText>
-									<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+									<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
 								</View>
 							)}
 						</Metadata>

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

@@ -9,7 +9,7 @@ export const BusinessHero = styled.View`
 
 export const BusinessContent = styled.View`
     padding-horizontal: 18px;
-    padding-bottom: 18px;
+    padding-bottom: 10px;
     border-bottom-left-radius: 7.6px;
     border-bottom-right-radius: 7.6px;
     border-width: 1px;

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

@@ -76,6 +76,8 @@ 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 priceList = [
     { level: '1', content: '$' },
     { level: '2', content: '$$' },
@@ -97,7 +99,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       width: '100%'
     },
     searchInput: {
-      fontSize: 10,
+      fontSize: 12,
     },
     productsContainer: {
       marginTop: 20
@@ -231,6 +233,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       <SearchWrapper>
         <SearchBar
           lazyLoad
+          {...(isChewLayout && { height: 55 })}
           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)}
@@ -255,6 +258,12 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           BusinessControllerSkeletons={BusinessControllerSkeletons}
           businessPaginationProps={paginationProps}
           franchiseId={brandId}
+          hideBackBtn
+          titleStyle={{
+            paddingHorizontal: 0,
+            marginTop: 0,
+            marginLeft: 0
+          }}
         />
       )}
 
@@ -263,19 +272,26 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           {t('BUSINESSES', 'Businesses')}
         </OText>
       </OptionTitle>
-      <ScrollView horizontal>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
-          <BusinessController
+          <View
             key={business.id}
-            business={business}
-            isBusinessOpen={business.open}
-            enableIntersection={false}
-            handleCustomClick={() => onBusinessClick(business)}
-            handleUpdateBusinessList={handleUpdateBusinessList}
-            orderType={orderState?.options?.type}
-            style={{ width: screenWidth - 120, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
-          />
+            style={{
+              width: screenWidth - 120,
+              marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0
+            }}
+          >
+            <BusinessController
+              business={business}
+              isBusinessOpen={business.open}
+              enableIntersection={false}
+              handleCustomClick={() => onBusinessClick(business)}
+              handleUpdateBusinessList={handleUpdateBusinessList}
+              orderType={orderState?.options?.type}
+            />
+          </View>
         ))}
+        {console.log(screenWidth)}
         {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
           <LoadMoreBusinessContainer>
             <OButton

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

@@ -166,14 +166,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   style={bpStyles.catWrap}
                   onLayout={(event: any) => handleOnLayout(event, category.id)}
                 >
-                  <View style={bpStyles.catIcon}>
-                    <OIcon
-                      url={optimizeImage(category.image, 'h_250,c_limit')}
-                      width={41}
-                      height={41}
-                      style={{ borderRadius: 7.6 }}
-                    />
-                  </View>
+                  {!!category.image && (
+                    <View style={bpStyles.catIcon}>
+                      <OIcon
+                        url={optimizeImage(category.image, 'h_250,c_limit')}
+                        width={41}
+                        height={41}
+                        style={{ borderRadius: 7.6 }}
+                      />
+                    </View>
+                  )}
                   <OText size={16} weight="600">
                     {category.name}
                   </OText>

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

@@ -394,7 +394,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<BackgroundGray isIos={Platform.OS === 'ios'} />
 				)}
 				<IOScrollView
-					stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
+					stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
 					style={{
 						...styles.mainContainer,
 						marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?

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

@@ -39,8 +39,7 @@ import {
 	BusinessLogosContainer
 } from './styles';
 
-import { SearchBar } from '../../../SearchBar';
-import { OButton, OIcon, OText, OBottomPopup, OModal } from '../../../shared';
+import { OIcon, OText, OModal } from '../../../shared';
 import { BusinessesListingParams } from '../../../../types';
 import { NotFoundSource } from '../../../NotFoundSource';
 import { BusinessTypeFilter } from '../../../BusinessTypeFilter';
@@ -55,6 +54,7 @@ import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { PageBanner } from '../../../PageBanner'
+import { CitiesControl } from '../../../CitiesControl'
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -62,12 +62,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const {
 		navigation,
 		businessesList,
-		searchValue,
 		getBusinesses,
 		handleChangeBusinessType,
 		handleBusinessClick,
 		paginationProps,
-		handleChangeSearch,
 		businessId,
 		isGuestUser,
 		handleUpdateBusinessList,
@@ -79,8 +77,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
-	const searchBarRef = useRef<any>()
-	const [appStateVisible, setAppStateVisible] = useState(appState.current);
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
@@ -314,10 +310,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 									key={business?.id}
 									onPress={() => handleBusinessClick && handleBusinessClick(business)}
 									style={{
-										width: 57,
-										height: 58,
-										borderBottomColor: theme.colors.primary,
-										borderBottomWidth: business?.slug === actualSlug ? 2 : 0,
+										width: 60,
+										height: 60,
+										borderRadius: 8,
 										marginRight: 5
 									}}
 								>
@@ -326,8 +321,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 											width: 56,
 											height: 56,
 											marginRight: 20,
-											borderTopLeftRadius: 7.6,
-											borderTopRightRadius: 7.6
+											borderRadius: 8,
+											borderColor: theme.colors.primary,
+											borderWidth: business?.slug === actualSlug ? 2 : 0
 										}}
 										source={{
 											uri: business?.logo,
@@ -370,8 +366,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			>
 				{isChewLayout && (
 					<View style={{ marginTop: 30, paddingHorizontal: 30, flexDirection: 'row', justifyContent: 'space-between' }}>
-						<OText size={18} weight={700} color={theme.colors?.white}>
-							{t('WELCOME', 'Welcome')} {user?.name}!
+						<OText size={24} weight={700} color={theme.colors?.white}>
+							{t('WELCOME', 'Welcome')} {user?.name}
 						</OText>
 					</View>
 				)}
@@ -494,6 +490,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					<TouchableOpacity
 						style={styles.buttonCityStyle}
 						onPress={() => setIsOpenCities(true)}
+						disabled={orderState?.loading}
 					>
 						<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')}
@@ -575,6 +572,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						<BusinessController
 							key={`${business.id}_` + i}
 							enableIntersection
+							isCustomLayout={isChewLayout}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -651,36 +649,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				onClose={() => setIsOpenCities(false)}
 				title={t('SELECT_A_CITY', 'Select a city')}
 			>
-				<View style={{ padding: 40, width: '100%' }}>
-					{citiesState?.cities?.map((city: any) => (
-						<TouchableOpacity
-							key={city?.id}
-							style={{
-								padding: 10,
-								flexDirection: 'row'
-							}}
-							onPress={() => handleChangeCity(city?.id)}
-							disabled={orderState?.loading}
-						>
-							{orderState?.options?.city_id === city?.id ? (
-								<OIcon
-									src={theme.images.general.option_checked}
-									width={16}
-									style={{ marginEnd: 24 }}
-								/>
-							) : (
-								<OIcon
-									src={theme.images.general.option_normal}
-									width={16}
-									style={{ marginEnd: 24 }}
-								/>
-							)}
-							<OText color={theme.colors.black}>
-								{city?.name}
-							</OText>
-						</TouchableOpacity>
-					))}
-				</View>
+				<CitiesControl
+					cities={citiesState?.cities}
+					onClose={() => setIsOpenCities(false)}
+					handleChangeCity={handleChangeCity}
+				/>
 			</OModal>
 		</IOScrollView>
 	);