ordering-ui-react-native 0.16.44 → 0.16.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.44",
+  "version": "0.16.45",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -86,6 +86,7 @@
     "react-native-google-places-autocomplete": "^2.1.3",
     "react-native-html-to-pdf": "^0.10.0",
     "react-native-image-picker": "^4.0.6",
+    "react-native-intersection-observer": "^0.0.9",
     "react-native-lightbox": "^0.8.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",

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

@@ -203,7 +203,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			multiRemoveProducts && await multiRemoveProducts(unavailableProducts, _carts)
 			return
 		}
-	
+
 		if (alreadyRemoved === 'removed') {
 			setAlertState({ open: true, content: [t('NOT_AVAILABLE_PRODUCT', 'This product is not available.')] })
 		}
@@ -223,7 +223,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	return (
 		<>
-					<ContainerSafeAreaView
+			<ContainerSafeAreaView
 				style={{ flex: 1 }}
 				isOpenFiltProducts={isOpenFiltProducts}
 			>
@@ -237,7 +237,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 										imgRightSrc={null}
 										style={styles.btnBackArrow}
 										onClick={() => handleBackNavigation()}
-										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 30 }}
 									/>
 								</View>
 								{!errorQuantityProducts && (
@@ -255,6 +255,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						{isOpenSearchBar && (
 							<WrapSearchBar>
 								<SearchBar
+									autoFocus
 									onSearch={handleChangeSearch}
 									onCancel={() => handleCancel()}
 									isCancelXButtonShow
@@ -268,42 +269,42 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				</Animated.View>
 
 				{business?.categories?.length > 0 && isOpenFiltProducts && (
-						<FiltProductsContainer
-							isIos={Platform.OS === 'ios'}
-							style={{
-								height: Dimensions.get('window').height - filtProductsHeight
-							}}
-						>
-							<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
-								<BusinessProductsList
-									categories={[
-										{ id: null, name: t('ALL', 'All') },
-										{ id: 'featured', name: t('FEATURED', 'Featured') },
-										...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
-									]}
-									category={categorySelected}
-									categoryState={categoryState}
-									businessId={business.id}
-									errors={errors}
-									onProductClick={onProductClick}
-									handleSearchRedirect={handleSearchRedirect}
-									featured={featuredProducts}
-									searchValue={searchValue}
-									handleClearSearch={handleChangeSearch}
-									errorQuantityProducts={errorQuantityProducts}
-									handleCancelSearch={handleCancel}
-									categoriesLayout={categoriesLayout}
-									subcategoriesSelected={subcategoriesSelected}
-									lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
-									setCategoriesLayout={setCategoriesLayout}
-									currentCart={currentCart}
-									setSubcategoriesSelected={setSubcategoriesSelected}
-									onClickCategory={handleChangeCategory}
-									handleUpdateProducts={handleUpdateProducts}
-									isFiltMode
-								/>
-							</View>
-						</FiltProductsContainer>
+					<FiltProductsContainer
+						isIos={Platform.OS === 'ios'}
+						style={{
+							height: Dimensions.get('window').height - filtProductsHeight
+						}}
+					>
+						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
+							<BusinessProductsList
+								categories={[
+									{ id: null, name: t('ALL', 'All') },
+									{ id: 'featured', name: t('FEATURED', 'Featured') },
+									...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+								]}
+								category={categorySelected}
+								categoryState={categoryState}
+								businessId={business.id}
+								errors={errors}
+								onProductClick={onProductClick}
+								handleSearchRedirect={handleSearchRedirect}
+								featured={featuredProducts}
+								searchValue={searchValue}
+								handleClearSearch={handleChangeSearch}
+								errorQuantityProducts={errorQuantityProducts}
+								handleCancelSearch={handleCancel}
+								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+								setCategoriesLayout={setCategoriesLayout}
+								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								handleUpdateProducts={handleUpdateProducts}
+								isFiltMode
+							/>
+						</View>
+					</FiltProductsContainer>
 				)}
 				{isOpenFiltProducts && (
 					<BackgroundGray />

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

@@ -370,7 +370,7 @@ export const ProductOptionsUI = (props: any) => {
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
 				<TopActions onPress={() => handleGoBack()}>
-					<OIcon src={theme.images.general.arrow_left} width={15} />
+					<OIcon src={theme.images.general.arrow_left} width={30} />
 				</TopActions>
 			</TopHeader>
 			<ScrollView ref={scrollViewRef}>

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

@@ -25,7 +25,8 @@ export const SearchBar = (props: any) => {
 		blurOnSubmit,
 		inputContainerStyles,
 		containerStyles,
-		hideIcon
+		hideIcon,
+		autoFocus
 	} = props
 
 	const theme = useTheme();
@@ -82,15 +83,16 @@ export const SearchBar = (props: any) => {
 	return (
 		<Pressable style={[styles.container, containerStyles, { height: height }]}>
 			<OInput
+				autoFocus={autoFocus}
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={{...styles.inputStyle, ...inputContainerStyles}}
+				style={{ ...styles.inputStyle, ...inputContainerStyles }}
 				placeholder={placeholder}
 				icon={!hideIcon && theme.images.general.search}
 				isDisabled={isDisabled}
 				iconStyle={{ width: 12 }}
 				returnKeyType='done'
-				inputStyle={{padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle}}
+				inputStyle={{ padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle }}
 				onPress={() => onPress && onPress()}
 				iconCustomRight={iconCustomRight}
 				onSubmitEditing={() => onSubmitEditing && onSubmitEditing()}

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

@@ -271,16 +271,16 @@ const ProfileUI = (props: ProfileParams) => {
 	}, [verifyPhoneState])
 
 	const handleSendPhoneCode = (values: any) => {
-    setWillVerifyOtpState(false)
+		setWillVerifyOtpState(false)
 		setIsModalVisible(false)
-    setFormState({
-      ...formState,
-      changes: {
-        ...formState?.changes,
-        verification_code: values?.code
-      }
-    })
-  }
+		setFormState({
+			...formState,
+			changes: {
+				...formState?.changes,
+				verification_code: values?.code
+			}
+		})
+	}
 
 	return (
 		<>
@@ -289,7 +289,7 @@ const ProfileUI = (props: ProfileParams) => {
 				titleAlign={'center'}
 				onActionLeft={() => navigation.goBack()}
 				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 , marginTop: Platform.OS === 'ios' ? 50 : 40 }}
+				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
 			/>
 			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
 				<Container noPadding>

package/themes/original/src/components/shared/OInput.tsx

@@ -56,7 +56,7 @@ const Wrapper = styled.Pressable`
 const OInput = (props: Props): React.ReactElement => {
 	return (
 		<Wrapper
-			onPress={() => {props.forwardRef?.current?.focus?.(); props.onPress && props.onPress()}}
+			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
 			style={{
 				backgroundColor: props.bgColor,
 				borderColor: props.borderColor,
@@ -75,6 +75,7 @@ const OInput = (props: Props): React.ReactElement => {
 				<MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
 			)}
 			<Input
+				autoFocus={props?.autoFocus}
 				name={props.name}
 				secureTextEntry={props.isSecured}
 				onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
@@ -90,7 +91,7 @@ const OInput = (props: Props): React.ReactElement => {
 				returnKeyType={props.returnKeyType}
 				onSubmitEditing={props.onSubmitEditing}
 				blurOnSubmit={props.blurOnSubmit}
-				ref={(e : any) => {
+				ref={(e: any) => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={props?.inputStyle}