ordering-ui-react-native 0.15.1 → 0.15.4

package/package.json

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

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

@@ -116,7 +116,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 				<FastImage
 					style={{ height: 120 }}
 					source={{
-							uri: optimizeImage(business?.header, 'h_120,c_limit'),
+							uri: optimizeImage(business?.header, 'h_500,c_limit'),
 							priority: FastImage.priority.normal,
 					}}
 					resizeMode={FastImage.resizeMode.cover}
@@ -145,7 +145,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						<FastImage
 							style={{ width: 56, height: 56 }}
 							source={{
-									uri: optimizeImage(business?.logo, 'h_60,c_limit'),
+									uri: optimizeImage(business?.logo, 'h_150,c_limit'),
 									priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}

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

@@ -7,6 +7,7 @@ import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import SelectDropdown from 'react-native-select-dropdown'
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const windowHeight = Dimensions.get('window').height;
 
@@ -18,6 +19,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const {top} = useSafeAreaInsets()
 
   const styles = StyleSheet.create({
     container: {
@@ -81,7 +83,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 dropdownStyle={{
                   borderRadius: 8,
                   borderColor: theme.colors.lightGray,
-                  marginTop: Platform.OS === 'ios' ? 12 : -15,
+                  marginTop: Platform.OS === 'ios' ? 12 : -top,
                   maxHeight: 160
                 }}
                 rowStyle={{
@@ -123,4 +125,4 @@ export const BusinessMenuList = (props: any) => {
   };
 
   return <BusinessMenuListing {...businessMenuListProps} />;
-};
+};

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

@@ -21,6 +21,7 @@ import {
   TimeContentWrapper,
   TimeItem
 } from './styles'
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const windowHeight = Dimensions.get('window').height;
 
@@ -50,7 +51,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [selectDate, setSelectedDate] = useState<any>(null)
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
-
+  const {top} = useSafeAreaInsets()
   const styles = StyleSheet.create({
     container: {
       height: windowHeight,
@@ -333,7 +334,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             dropdownStyle={{
               borderRadius: 8,
               borderColor: theme.colors.lightGray,
-              marginTop: Platform.OS === 'ios' ? 12 : -15
+              marginTop: Platform.OS === 'ios' ? 12 : -top
             }}
             rowStyle={{
               borderBottomColor: theme.colors.backgroundGray100,

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

@@ -101,7 +101,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 >
                   <View style={bpStyles.catIcon}>
                     <OIcon
-                      url={optimizeImage(category.image, 'h_100,c_limit')}
+                      url={optimizeImage(category.image, 'h_250,c_limit')}
                       width={41}
                       height={41}
                       style={{ borderRadius: 7.6 }}

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

@@ -237,9 +237,10 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 							))}
 					</>
 				)}
-				{!reviewsList.loading && reviewsList?.reviews.length === 0 && (
-					<OText>{t('REVIEWS_NOT_FOUND', 'Reviews Not Found')}</OText>
-				)}
+				{reviewsList?.reviews
+					.filter((review: any) => searchReview !== '' ? review.comment?.toLowerCase()?.includes(searchReview?.toLowerCase()) : true).length === 0 && (
+						<OText>{t('REVIEWS_NOT_FOUND', 'Reviews Not Found')}</OText>
+					)}
 			</BusinessReviewContent>
 		</BusinessReviewsContainer>
 	);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
 	BusinessList as BusinessesListingController,
   useLanguage,
@@ -18,7 +18,9 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
   const {
     businessesList,
     onBusinessClick,
-    navigation
+    navigation,
+    isLoading,
+    getBusinesses
   } = props;
 
   const [, t] = useLanguage()
@@ -26,6 +28,11 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
 
   const windowWidth = Dimensions.get('window').width;
 
+  useEffect(() => {
+    if (businessesList?.loading || !isLoading) return 
+    getBusinesses(true)
+  }, [isLoading])
+
   return (
     <>
       <ListWrapper>

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

@@ -9,7 +9,7 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import moment from 'moment';
 import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, TouchableOpacity } from 'react-native'
+import { View, StyleSheet, TouchableOpacity, Platform } from 'react-native'
 import { Placeholder, Fade, PlaceholderLine } from "rn-placeholder";
 import FastImage from 'react-native-fast-image'
 import {
@@ -19,7 +19,6 @@ import {
   ProgressTextWrapper,
   OrderInfoWrapper
 } from './styles'
-
 const OrderProgressUI = (props: any) => {
   const {
     orderList,
@@ -139,7 +138,7 @@ const OrderProgressUI = (props: any) => {
   return (
     <>
       {orderList?.loading && (
-        <Placeholder Animation={Fade} height={158}>
+        <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
           <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
           <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
           <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />

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

@@ -37,7 +37,8 @@ import {
 	ExtraOptionWrap,
 	WeightUnitSwitch,
 	WeightUnitItem,
-	TopActions
+	TopActions,
+	ProductSummary
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -170,8 +171,11 @@ export const ProductOptionsUI = (props: any) => {
 		pieces: true
 	})
 	const [pricePerWeightUnit, setPricePerWeightUnit] = useState<any>(null)
-
+	const scrollViewRef = useRef<any>(null);
 	const swiperRef: any = useRef(null)
+	const [optionLayout, setOptionLayout] = useState<any>({})
+	const [headerRefHeight, setHeaderRefHeight] = useState(0)
+	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -253,6 +257,28 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeProductCartQuantity(quantity)
 	}
 
+	const scrollDown = (id: any) => {
+		const isErrors = Object.values(errors).length > 0
+		if (!isErrors) {
+			return
+		}
+		const targetOptionId = Object.getOwnPropertyNames(errors).filter(item => !item.includes(id))[0]
+		const targetY = optionLayout[targetOptionId]?.y
+		if (targetY) {
+			scrollViewRef.current.scrollTo({
+				y: targetY + headerRefHeight + summaryRefHeight,
+				animated: true
+			})
+		}
+	}
+
+	const handleOnLayout = (event: any, optionId: any) => {
+		const _optionLayout = { ...optionLayout }
+		const optionKey = 'id:' + optionId
+		_optionLayout[optionKey] = { y: event.nativeEvent.layout?.y }
+		setOptionLayout(_optionLayout)
+	}
+
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
@@ -343,10 +369,10 @@ export const ProductOptionsUI = (props: any) => {
 					<OIcon src={theme.images.general.arrow_left} width={15} />
 				</TopActions>
 			</TopHeader>
-			<ScrollView>
+			<ScrollView ref={scrollViewRef}>
 				{!error && (
 					<View style={{ paddingBottom: 80 }}>
-						<WrapHeader>
+						<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
 							{loading && !product ? (
 								<View style={styles.productHeaderSkeleton}>
 									<Placeholder Animation={Fade}>
@@ -470,96 +496,98 @@ export const ProductOptionsUI = (props: any) => {
 							)}
 						</WrapHeader>
 						<WrapContent>
-							<ProductTitle>
-								{loading && !product ? (
-									<Placeholder Animation={Fade}>
-										<View
-											style={{
-												flexDirection: 'row',
-												justifyContent: 'space-between',
-											}}>
-											<PlaceholderLine width={40} height={20} />
-											<PlaceholderLine width={30} height={20} />
-										</View>
-									</Placeholder>
-								) : (
-									<>
-										<View style={{ flexDirection: 'row' }}>
-											<OText
-												size={20}
-												lineHeight={30}
-												weight={'600'}
-												style={{ flex: 1, marginBottom: 10 }}>
-												{product?.name || productCart.name}
-											</OText>
-											{!!product?.calories && (
-												<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+							<ProductSummary onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}>
+								<ProductTitle>
+									{loading && !product ? (
+										<Placeholder Animation={Fade}>
+											<View
+												style={{
+													flexDirection: 'row',
+													justifyContent: 'space-between',
+												}}>
+												<PlaceholderLine width={40} height={20} />
+												<PlaceholderLine width={30} height={20} />
+											</View>
+										</Placeholder>
+									) : (
+										<>
+											<View style={{ flexDirection: 'row' }}>
+												<OText
+													size={20}
+													lineHeight={30}
+													weight={'600'}
+													style={{ flex: 1, marginBottom: 10 }}>
+													{product?.name || productCart.name}
 												</OText>
-											)}
-										</View>
-										{((!!product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (!!product?.estimated_person)) && (
-											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
-												{
-													((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
-													&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
-												}
-												{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
-													<>&nbsp;&#183;&nbsp;</>
-												)}
-												{product?.estimated_person
-													&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
-												}
-											</OText>
-										)}
-										{isHaveWeight ? (
-											<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
-										) : (
-											<View style={{ flexDirection: 'row', marginBottom: 10 }}>
-												<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-												{product?.offer_price !== null && product?.in_offer && (
-													<OText style={{
-														fontSize: 14,
-														color: '#808080',
-														textDecorationLine: 'line-through',
-														marginLeft: 7,
-														marginRight: 7
-													}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+												{!!product?.calories && (
+													<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+													</OText>
 												)}
 											</View>
-										)}
-									</>
-								)}
-							</ProductTitle>
-							<ProductDescription>
-								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
-									{product?.description || productCart?.description}
-								</OText>
-							</ProductDescription>
-							<ScrollView
-								horizontal
-								showsHorizontalScrollIndicator={false}
-								contentContainerStyle={{ paddingBottom: 30 }}
-							>
-								{product?.tags?.map((tag: any) => (
-									<View
-										key={tag.id}
-										style={styles.productTagWrapper}
-									>
-										{!!tag?.image ? (
-											<OIcon
-												url={optimizeImage(tag?.image, 'h_40,c_limit')}
-												style={styles.productTagImageStyle}
-											/>
-										) : (
-											<OIcon
-												src={theme.images?.dummies?.product}
-												style={styles.productTagImageStyle}
-											/>
-										)}
-										<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
-									</View>
-								))}
-							</ScrollView>
+											{((!!product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (!!product?.estimated_person)) && (
+												<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
+													{
+														((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+														&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+													}
+													{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+														<>&nbsp;&#183;&nbsp;</>
+													)}
+													{product?.estimated_person
+														&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+													}
+												</OText>
+											)}
+											{isHaveWeight ? (
+												<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
+											) : (
+												<View style={{ flexDirection: 'row', marginBottom: 10 }}>
+													<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+													{product?.offer_price !== null && product?.in_offer && (
+														<OText style={{
+															fontSize: 14,
+															color: '#808080',
+															textDecorationLine: 'line-through',
+															marginLeft: 7,
+															marginRight: 7
+														}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+													)}
+												</View>
+											)}
+										</>
+									)}
+								</ProductTitle>
+								<ProductDescription>
+									<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
+										{product?.description || productCart?.description}
+									</OText>
+								</ProductDescription>
+								<ScrollView
+									horizontal
+									showsHorizontalScrollIndicator={false}
+									contentContainerStyle={{ paddingBottom: 30 }}
+								>
+									{product?.tags?.map((tag: any) => (
+										<View
+											key={tag.id}
+											style={styles.productTagWrapper}
+										>
+											{!!tag?.image ? (
+												<OIcon
+													url={optimizeImage(tag?.image, 'h_40,c_limit')}
+													style={styles.productTagImageStyle}
+												/>
+											) : (
+												<OIcon
+													src={theme.images?.dummies?.product}
+													style={styles.productTagImageStyle}
+												/>
+											)}
+											<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
+										</View>
+									))}
+								</ScrollView>
+							</ProductSummary>
 							{loading && !product ? (
 								<>
 									{[...Array(2)].map((item, i) => (
@@ -658,7 +686,7 @@ export const ProductOptionsUI = (props: any) => {
 													return (
 														<React.Fragment key={`popt_${option.id}`}>
 															{showOption(option) && (
-																<View style={styles.optionContainer}>
+																<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
 																	<ProductOption
 																		option={option}
 																		currentState={currentState}
@@ -695,6 +723,8 @@ export const ProductOptionsUI = (props: any) => {
 																								isSoldOut ||
 																								maxProductQuantity <= 0
 																							}
+																							scrollDown={scrollDown}
+																							error={errors[`id:${option.id}`]}
 																						/>
 																					);
 																				},
@@ -855,7 +885,7 @@ export const ProductOptionsUI = (props: any) => {
 							{qtyBy?.pieces && (
 								<TextInput
 									keyboardType='numeric'
-									value={`${productCart?.quantity > 0 ? productCart?.quantity: ''}`}
+									value={`${productCart?.quantity > 0 ? productCart?.quantity : ''}`}
 									onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
 									editable={!orderState.loading}
 									style={{

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

@@ -71,7 +71,7 @@ export const ProductActions = styled.View`
   position: absolute;
   bottom: 0px;
 	min-height: 70px;
-  padding-top: ${(props : any) => props.ios ? '20px' : '0'};
+  padding-top: ${(props: any) => props.ios ? '20px' : '0'};
   padding-horizontal: 40px;
   width: 100%;
   flex-direction: row;
@@ -97,3 +97,5 @@ export const WeightUnitItem = styled.View`
     background-color: ${(props: any) => props.theme.colors.primary}20;
   `}
 `
+export const ProductSummary = styled.View`
+`

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

@@ -27,7 +27,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		suboption,
 		toggleSelect,
 		changePosition,
-		disabled
+		disabled,
+		error,
+		scrollDown
 	} = props
 
 	const theme = useTheme();
@@ -38,6 +40,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
+		if (error) {
+			scrollDown(option?.id)
+		}
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}

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

@@ -140,7 +140,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				<FastImage
 					style={styles.productStyle}
 					source={{
-						uri: optimizeImage(product?.images, 'h_75,c_limit'),
+						uri: optimizeImage(product?.images, 'h_250,c_limit'),
 						priority: FastImage.priority.normal,
 					}}
 					resizeMode={FastImage.resizeMode.cover}

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

@@ -141,12 +141,17 @@ const ProfileListUI = (props: ProfileParams) => {
 			</OText>
 			<CenterView style={styles.pagePadding}>
 				<View style={styles.photo}>
-					<OIcon
-						url={user?.photo}
-						src={!user?.photo && theme.images.general.user}
-						width={60}
-						height={60}
-					/>
+					{user?.photo ? (
+						<OIcon
+							url={user?.photo}
+							cover
+							width={60}
+							height={60}
+							borderRadius={8}
+						/>
+					) : (
+						<Ionicons name='person-outline' size={50} style={{ marginRight: 10 }} />
+					)}
 				</View>
 				<View style={{ flexBasis: '70%' }}>
 					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{user?.name} {user?.lastname}</OText>

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

@@ -20,6 +20,7 @@ import { CenterView } from './styles';
 import NavBar from '../NavBar';
 import { Container } from '../../layouts/Container';
 import { VerifyPhone } from '../VerifyPhone'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 const ProfileUI = (props: ProfileParams) => {
 	const {
@@ -286,18 +287,23 @@ const ProfileUI = (props: ProfileParams) => {
 					/>
 					<CenterView style={styles.pagePadding}>
 						<View style={styles.photo}>
-							<OIcon
-								url={user?.photo}
-								src={!user?.photo && theme.images.general.user}
-								width={79}
-								height={79}
-							/>
+							{user?.photo ? (
+								<OIcon
+									url={user?.photo}
+									cover
+									width={60}
+									height={60}
+									borderRadius={8}
+								/>
+							) : (
+								<Ionicons name='person-outline' size={50} />
+							)}
 						</View>
 						<OIconButton
 							icon={theme.images.general.camera}
 							borderColor={theme.colors.clear}
-							iconStyle={{ width: 16, height: 16 }}
-							style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center' }}
+							iconStyle={{ width: 20, height: 20 }}
+							style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
 							onClick={() => handleImagePicker()}
 						/>
 					</CenterView>

package/themes/original/src/types/index.tsx

@@ -143,6 +143,8 @@ export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
 	onBusinessClick?: void;
 	navigation? :any;
+	isLoading?: boolean;
+	getBusinesses: (newFetch : boolean) => void
 }
 export interface BusinessTypeFilterParams {
 	businessTypes?: Array<any>;