ordering-ui-react-native 0.13.7 → 0.13.8

package/package.json

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

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

@@ -71,7 +71,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
 		<BusinessContainer>
 			<BusinessHeader
 				style={{...styles.businesInfoheaderStyle}}
-				source={{ uri: header || optimizeImage(businessState?.business?.header, 'h_400,c_limit') }}
+				source={{ uri: header || optimizeImage(businessState?.business?.header, 'h_300,c_limit') }}
 			>
 				<BusinessLogo>
 					{loading ? (
@@ -83,7 +83,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
 					) : (
 						!isBusinessInfoShow && (
 							<OIcon
-								url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
+								url={logo || optimizeImage(businessState?.business?.logo, 'h_100,c_limit')}
 								style={styles.businessLogo}
 								cover
 							/>
@@ -140,13 +140,15 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
 								<OText color={theme.colors.textSecondary} numberOfLines={1} style={{ flexBasis: '85%', marginEnd: 6 }}>
 									{orderState?.options?.address?.address}
 								</OText>
-								<TouchableOpacity
-									onPress={() => auth
-										? onRedirect('AddressList', { isGoBack: true, isFromProductsList: true })
-										: onRedirect('AddressForm', { address: orderState.options?.address })}
-								>
-									<OIcon width={16} src={theme.images.general.pencil} />
-								</TouchableOpacity>
+								{!isBusinessInfoShow && (
+									<TouchableOpacity
+										onPress={() => auth
+											? onRedirect('AddressList', { isGoBack: true, isFromProductsList: true })
+											: onRedirect('AddressForm', { address: orderState.options?.address })}
+									>
+										<OIcon width={16} src={theme.images.general.pencil} />
+									</TouchableOpacity>
+								)}
 							</View>
 							<View style={{ ...styles.infoItem, paddingStart: 12 }}>
 								<OText color={theme.colors.textSecondary} numberOfLines={1} style={{ flexBasis: '85%', paddingEnd: 6 }}>
@@ -154,46 +156,16 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
 										? moment(orderState.options?.moment).format('dddd, MMM.DD.yyyy hh:mm A')
 										: t('ASAP_ABBREVIATION', 'ASAP')}
 								</OText>
-								<TouchableOpacity
-									onPress={() => navigation.navigate('MomentOption')}
-								>
-									<OIcon src={theme.images.general.info} width={16} />
-								</TouchableOpacity>
+								{!isBusinessInfoShow && (
+									<TouchableOpacity
+										onPress={() => navigation.navigate('MomentOption')}
+									>
+										<OIcon src={theme.images.general.info} width={16} />
+									</TouchableOpacity>
+								)}
 							</View>
 							</>
-						}
-						{/* <View style={styles.bullet}>
-							<IconEvilIcons
-								name='clock'
-								color={theme.colors.textSecondary}
-								size={16}
-							/>
-							{orderState?.options?.type === 1 ? (
-								<OText color={theme.colors.textSecondary} style={styles.metadata}>
-									{convertHoursToMinutes(business?.delivery_time)}
-								</OText>
-							) : (
-								<OText color={theme.colors.textSecondary} style={styles.metadata}>
-									{convertHoursToMinutes(business?.pickup_time)}
-								</OText>
-							)}
-						</View>
-						<View style={styles.bullet}>
-							<IconEvilIcons
-								name='location'
-								color={theme.colors.textSecondary}
-								size={16}
-							/>
-							<OText color={theme.colors.textSecondary} style={styles.metadata}>{parseDistance(business?.distance || 0)}</OText>
-						</View>
-						<View style={styles.bullet}>
-							<MaterialComIcon
-								name='truck-delivery'
-								color={theme.colors.textSecondary}
-								size={16}
-							/>
-						</View>
-						<OText color={theme.colors.textSecondary} style={styles.metadata}>{business && parsePrice(business?.delivery_price || 0)}</OText> */}
+						}					
 					</BusinessInfoItem>
 				</View>
 				{showReview && (

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

@@ -144,7 +144,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 
 			<BusinessLogo>
 				<OIcon
-					url={optimizeImage(business?.logo, 'h_300,c_limit')}
+					url={optimizeImage(business?.logo, 'h_50,c_limit')}
 					style={styles.businessLogo}
 				/>
 			</BusinessLogo>

package/themes/instacart/src/components/BusinessInformation/styles.tsx

@@ -11,7 +11,6 @@ export const GrayBackground = styled.View`
 `
 export const WrapMainContent = styled.ScrollView`
   flex: 1;
-  margin-top: 40px;
 `
 export const InnerContent = styled.View`
   padding: 30px 20px;

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

@@ -4,14 +4,15 @@ import { SingleProductCard } from '../SingleProductCard'
 import { NotFoundSource } from '../NotFoundSource'
 import { BusinessProductsListParams } from '../../types'
 import { OText } from '../shared'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { Platform, View, TouchableOpacity } from 'react-native'
+import { useTheme } from 'styled-components/native'
 import {
   ProductsContainer,
   ErrorMessage,
-  WrapperNotFound
+  WrapperNotFound,
+  ProductsWrapper
 } from './styles'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { Platform, View, TouchableOpacity } from 'react-native'
-import { useTheme } from 'styled-components/native'
 import { ScrollView } from 'react-native-gesture-handler'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
@@ -42,8 +43,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       if (categoryState?.products.length > allProducts.length) {
         setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
       }
+      if (searchValue) {
+        setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
+      }
     }
-  }, [category, categoryState])
+  }, [category, categoryState, searchValue])
 
   return (
     <ProductsContainer>
@@ -67,7 +71,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             >
               <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS == 'ios' ? '600' : 'bold'}} mBottom={10}>{t('FEATURED', 'Featured')}</OText>
             </TouchableOpacity>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <ProductsWrapper>
               {allProducts?.map((product: any, index: number) => product.featured && (
                 <SingleProductCard
                   key={index}
@@ -77,7 +81,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   onProductClick={onProductClick}
                 />
               ))}
-            </ScrollView>
+            </ProductsWrapper>
           </>
         )
       }
@@ -95,7 +99,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     >
                       <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold'}} mBottom={10}>{category.name}</OText>
                     </TouchableOpacity>
-                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                    <ProductsWrapper>
                       {
                         products.map((product: any, index: number) => (
                           <SingleProductCard
@@ -107,7 +111,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                           />
                         ))
                       }
-                    </ScrollView>
+                    </ProductsWrapper>
                   </>
                 )
               }
@@ -118,29 +122,27 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {
         (categoryState.loading || isBusinessLoading) && (
-          <>
+          <Placeholder style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
+            <PlaceholderLine width={50} height={16} style={{ marginBottom: 20 }} />
             {[...Array(categoryState?.pagination?.nextPageItems).keys()].map((item, i) => (
-              <Placeholder key={i} style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
-                <PlaceholderLine width={50} height={20} style={{ marginBottom: 20 }} />
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                  <View style={{flexBasis: '47%'}}>
-                    <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
-                    <Placeholder>
-                        <PlaceholderLine width={60} style={{marginBottom: 12}}/>
-                        <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
-                  <View style={{flexBasis: '47%'}}>
-                    <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
-                    <Placeholder>
-                        <PlaceholderLine width={60} style={{marginBottom: 25}}/>
-                        <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
+              <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <View style={{flexBasis: '47%'}}>
+                  <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
+                  <Placeholder>
+                      <PlaceholderLine width={20} />
+                      <PlaceholderLine width={60} style={{marginBottom: 12}}/>
+                  </Placeholder>
                 </View>
-              </Placeholder>
+                <View style={{flexBasis: '47%'}}>
+                  <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
+                  <Placeholder>
+                      <PlaceholderLine width={20} />
+                      <PlaceholderLine width={60} style={{marginBottom: 25}}/>
+                  </Placeholder>
+                </View>
+              </View>
             ))}
-          </>
+          </Placeholder>
         )
       }
       {

package/themes/instacart/src/components/BusinessProductsList/styles.tsx

@@ -11,4 +11,9 @@ export const ErrorMessage = styled.View`
 
 export const WrapperNotFound = styled.View`
   height: 500px;
-`
+`
+export const ProductsWrapper = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+`

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

@@ -1,6 +1,5 @@
-import React, { useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, ScrollView } from 'react-native'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import React, { useEffect, useState } from 'react'
+import { View, StyleSheet, ScrollView, Animated, Dimensions } from 'react-native'
 import {
 	BusinessAndProductList,
 	useLanguage,
@@ -28,13 +27,14 @@ import { FloatingButton } from '../FloatingButton'
 import { ProductForm } from '../ProductForm'
 import { UpsellingProducts } from '../UpsellingProducts'
 import { useTheme } from 'styled-components/native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { OrderSummary } from '../OrderSummary'
 import { Cart } from '../Cart'
-import { SingleProductCard } from '../../../../../src/components/SingleProductCard'
+import { SingleProductCard } from '../SingleProductCard'
 import NavBar from '../NavBar'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 
+const { width, height } = Dimensions.get('screen')
+
 const PIXELS_TO_SCROLL = 1000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
@@ -58,6 +58,43 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		updateProductModal
 	} = props
 
+	const styles = StyleSheet.create({
+		mainContainer: {
+			flex: 1,
+			display: categorySelected.id !== null ? 'none' : 'flex'
+		},
+		BackIcon: {
+			paddingRight: 20,
+		},
+		headerItem: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			marginHorizontal: 20,
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			color: '#FFF',
+			backgroundColor: 'rgba(0,0,0,0.3)',
+			borderRadius: 16,
+			paddingHorizontal: 15,
+			marginRight: 15,
+			marginTop: 20
+		},
+		searchIcon: {
+			borderWidth: 0,
+			color: '#FFF',
+			backgroundColor: 'rgba(0,0,0,0.3)',
+			borderRadius: 24,
+			padding: 15,
+			justifyContent: 'center'
+		},
+		productsWrapper: {
+			flexDirection: 'row',
+			flexWrap: 'wrap',
+			alignItems: 'flex-start'
+		}
+	})
+
 	const theme = useTheme()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
@@ -71,7 +108,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [canOpenUpselling, setCanOpenUpselling] = useState(false)
 	const [openCart, setOpenCart] = useState(false)
 
-	const { top, bottom } = useSafeAreaInsets();
+  const [alignment] = useState(new Animated.Value(0))
+  const actionSheetIntropolate = alignment.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-height, 0]
+  })
 
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 
@@ -117,6 +158,22 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		}
 	}
 
+	useEffect(() => {
+		if (categorySelected.id === null) {
+			Animated.timing(alignment, {
+				toValue: 0,
+				duration: 500,
+				useNativeDriver: false
+			}).start()
+		} else {
+			Animated.timing(alignment, {
+				toValue: 1,
+				duration: 500,
+				useNativeDriver: false
+			}).start()
+		}
+	}, [categorySelected.id])
+
 	return (
 		<>
 			<BusinessProductsListingContainer
@@ -129,7 +186,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				<WrapHeader>
 					{!loading && business?.id && (
 						<>
-							<TopHeader style={{ marginTop: top }}>
+							<TopHeader>
 								<View style={{ ...styles.headerItem, flex: 1 }}>
 									<OButton
 										imgLeftSrc={theme.images.general.arrow_left}
@@ -213,6 +270,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					handleClick={() => onRedirect('CartPage', { cart: currentCart })}
 				/>
 			)}
+
 			<OModal
 				open={!!curProduct || (!!productModal.product && !orderState.loading)}
 				onClose={handleCloseProductModal}
@@ -230,18 +288,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				/>
 			</OModal>
 
-			<OModal
-				open={categorySelected.id !== null}
-				onClose={() => handleChangeCategory({ id: null, name: 'All' })}
-				entireModal
-				customClose
-			>
-				<ScrollView
+			{categorySelected.id !== null && (
+				<Animated.ScrollView
 					contentContainerStyle={{
 						paddingHorizontal: 40,
 						paddingVertical: 20
 					}}
 					onScroll={(e: any) => handleScroll(e)}
+					style={{
+						bottom: actionSheetIntropolate
+					}}
 				>
 					<NavBar
 						title={categorySelected?.name}
@@ -249,7 +305,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						showCall={false}
 						style={{ paddingHorizontal: 0, marginHorizontal: -7 }}
 					/>
-					<View>
+					<View style={styles.productsWrapper}>
 						{categorySelected.id && (
 							categoryState.products?.map((product: any, index: number) => (
 								<SingleProductCard
@@ -265,27 +321,30 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 					{
 						categoryState.loading && (
-						<>
-							{[...Array(10).keys()].map((item, i) => (
-							<Placeholder key={i} style={{ marginBottom: 10 }} Animation={Fade}>
-								<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-									<View
-										style={{ width: 80, height: 80 }}
-									>
-										<PlaceholderLine width={80} height={70} />
+							<Placeholder style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
+								{[...Array(categoryState?.pagination?.nextPageItems).keys()].map((item, i) => (
+								<View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+									<View style={{flexBasis: '47%'}}>
+									<PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
+									<Placeholder>
+										<PlaceholderLine width={20} />
+										<PlaceholderLine width={60} style={{marginBottom: 12}}/>
+									</Placeholder>
 									</View>
+									<View style={{flexBasis: '47%'}}>
+									<PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
 									<Placeholder>
-										<PlaceholderLine width={60} style={{marginBottom: 30}}/>
 										<PlaceholderLine width={20} />
+										<PlaceholderLine width={60} style={{marginBottom: 25}}/>
 									</Placeholder>
+									</View>
 								</View>
+								))}
 							</Placeholder>
-							))}
-						</>
 						)
 					}
-				</ScrollView>
-			</OModal>
+				</Animated.ScrollView>
+			)}
 
 			{openUpselling && (
 				<UpsellingProducts
@@ -302,37 +361,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	)
 }
 
-const styles = StyleSheet.create({
-	mainContainer: {
-		flex: 1,
-	},
-	BackIcon: {
-		paddingRight: 20,
-	},
-	headerItem: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		marginHorizontal: 20,
-	},
-	btnBackArrow: {
-		borderWidth: 0,
-		color: '#FFF',
-		backgroundColor: 'rgba(0,0,0,0.3)',
-		borderRadius: 16,
-		paddingHorizontal: 15,
-		marginRight: 15,
-		marginTop: 20
-	},
-	searchIcon: {
-		borderWidth: 0,
-		color: '#FFF',
-		backgroundColor: 'rgba(0,0,0,0.3)',
-		borderRadius: 24,
-		padding: 15,
-		justifyContent: 'center'
-	}
-})
-
 export const BusinessProductsListing = (props: BusinessProductsListingParams) => {
 	const businessProductslistingProps = {
 		...props,

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

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import { useLanguage, useConfig, useOrder, useUtils } from 'ordering-components/native'
 import { SingleProductCardParams } from '../../types'
 import {
@@ -23,9 +23,8 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 
   const styles = StyleSheet.create({
     container: {
-      marginBottom: 15,
-      width: (windowWidth - 140) / 2,
-      minHeight: (windowWidth - 140) / 2 + 50
+      width: (windowWidth - 80) / 2,
+      height: (windowWidth - 80) / 2 + 40
     },
     textStyle: {
       flex: 1,
@@ -37,8 +36,8 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       lineHeight: 18
     },
     productStyle: {
-      width: (windowWidth - 200) / 2,
-      height: (windowWidth - 200) / 2,
+      width: (windowWidth - 160) / 2,
+      height: (windowWidth - 160) / 2,
       borderRadius: 3,
 		  marginTop: 5
     },
@@ -70,10 +69,6 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 
   const maxProductQuantity = Math.min(maxCartProductConfig, maxCartProductInventory)
 
-  useEffect(() => {
-    
-  }, [product]);
-
   return (
     <CardContainer style={styles.container}
       onPress={() => onProductClick?.(product)}

package/themes/instacart/src/components/SingleProductCard/styles.tsx

@@ -1,11 +1,11 @@
 import styled from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
-  flex: 1;
+  /* flex-grow: 1; */
   align-items: flex-start;
   padding: 10px;
   position: relative;
-  margin-end: 10px;
+  /* margin-end: 10px; */
   border-radius: 3px;
 `
 export const CardInfo = styled.View`