ordering-ui-react-native 0.24.16 → 0.24.18

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

@@ -1,357 +1,357 @@
-import React, { useState } from 'react'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { View, StyleSheet, ScrollView, Platform, TouchableOpacity } from 'react-native'
-import {
-	BusinessList as BusinessesListingController,
-	BusinessAndProductList,
-	useLanguage,
-	useSession,
-	useOrder,
-	useConfig,
-	useUtils,
-	ToastType,
-	useToast
-} from 'ordering-components/native'
-
-import { Search, WrapContent } from './styles'
-
-import { SearchBar } from '../SearchBar'
-import { OIcon, OModal, OText } from '../shared'
-import { BusinessesListingParams, BusinessProductsListingParams } from '../../types'
-import { NotFoundSource } from '../NotFoundSource'
-import { BusinessTypeFilter } from '../BusinessTypeFilter'
-import { BusinessController } from '../BusinessController'
-import { useTheme } from 'styled-components/native'
-import { BusinessProductsListingContainer } from '../BusinessProductsListing/styles'
-import { BusinessProductsList } from '../BusinessProductsList'
-import { ProductForm } from '../ProductForm'
-import { UpsellingProducts } from '../UpsellingProducts'
-
-const PIXELS_TO_SCROLL = 1200
-
-const SearchBusinessUI = (props: BusinessesListingParams) => {
-	const {
-		navigation,
-		businessesList,
-		searchValue,
-		getBusinesses,
-		handleChangeBusinessType,
-		handleBusinessClick,
-		paginationProps,
-		handleChangeSearch
-	} = props
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		container: {
-			marginBottom: 0
-		},
-		welcome: {
-			flex: 1,
-			flexDirection: 'row'
-		},
-		inputStyle: {
-			backgroundColor: theme.colors.clear,
-			flex: 1,
-			paddingStart: 12,
-		},
-		wrapperOrderOptions: {
-			width: '100%',
-			display: 'flex',
-			flexDirection: 'row',
-			justifyContent: 'space-between',
-			alignItems: 'center',
-			marginBottom: 10,
-			zIndex: 100
-		},
-		borderStyle: {
-
-		}
-	})
-
-	const [, t] = useLanguage()
-	const [{ user, auth }] = useSession()
-	const [orderState] = useOrder()
-	const [{ configs }] = useConfig()
-	const [{ parseDate }] = useUtils()
-	const [, { showToast }] = useToast()
-	const [isFilter, setIsFilter] = useState(false);
-
-	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
-
-	const handleScroll = ({ nativeEvent }: any) => {
-		const y = nativeEvent.contentOffset.y
-		const height = nativeEvent.contentSize.height
-		const hasMore = !(paginationProps.totalPages === paginationProps.currentPage)
-
-		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
-			getBusinesses()
-			showToast(ToastType.Info, 'loading more business')
-		}
-	}
-
-	return (
-		<View style={{flex: 1}}>
-			<Search>
-				<SearchBar
-					onSearch={handleChangeSearch}
-					searchValue={searchValue}
-					lazyLoad
-					isCancelXButtonShow={!!searchValue}
-					borderStyle={styles.borderStyle}
-					onCancel={() => handleChangeSearch('')}
-					placeholder={t('FIND_BUSINESS', 'Find a Business')}
-				/>
-				<TouchableOpacity style={{ paddingStart: 12 }} activeOpacity={0.7} onPress={() => setIsFilter(!isFilter)}>
-					<OIcon src={theme.images.general.filter} width={16} color={theme.colors.textPrimary} />
-				</TouchableOpacity>
-			</Search>
-			<ScrollView style={styles.container} contentContainerStyle={{ paddingHorizontal: 40 }} onScroll={(e: any) => handleScroll(e)}>
-
-				{isFilter && <BusinessTypeFilter
-					images={props.images}
-					businessTypes={props.businessTypes}
-					defaultBusinessType={props.defaultBusinessType}
-					handleChangeBusinessType={handleChangeBusinessType}
-					isMini
-					noTitle
-				/>}
-
-				{
-					!businessesList.loading && businessesList.businesses.length === 0 && (
-						<NotFoundSource
-							content={t('NOT_FOUND_BUSINESSES', 'No businesses to delivery / pick up at this address, please change filters or change address.')}
-						/>
-					)
-				}
-
-				{!businessesList.loading && businessesList.businesses.length > 0 && (
-					businessesList.businesses?.map((business: any) => (
-						<BusinessController
-							key={business.id}
-							business={business}
-							handleCustomClick={handleBusinessClick}
-							orderType={orderState?.options?.type}
-							isBusinessOpen={business?.open}
-						/>
-					))
-				)
-				}
-				{businessesList.loading && (
-					<>
-						{[...Array(paginationProps.nextPageItems ? paginationProps.nextPageItems : 8).keys()].map((item, i) => (
-							<Placeholder Animation={Fade} key={i} style={{ marginBottom: 20 }}>
-								<View style={{ width: '100%', flexDirection: 'row' }}>
-									<PlaceholderLine height={50} style={{ borderRadius: 25, width: 50 }} />
-									<Placeholder style={{ marginStart: 10 }}>
-										<PlaceholderLine height={24} width={50} style={{ marginBottom: 4 }} />
-										<PlaceholderLine height={15} width={40} style={{ marginBottom: 4 }} />
-										<PlaceholderLine height={15} width={70} />
-									</Placeholder>
-								</View>
-							</Placeholder>
-						))}
-					</>
-				)}
-			</ScrollView>
-		</View>
-	)
-}
-
-const SearchBusinessList = (businessProps: BusinessesListingParams) => {
-
-	const BusinessesListingProps = {
-		...businessProps,
-		isForceSearch: Platform.OS === 'ios',
-		UIComponent: SearchBusinessUI
-	}
-
-	return <BusinessesListingController {...BusinessesListingProps} />
-}
-
-const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
-	const {
-		navigation,
-		errors,
-		businessState,
-		categoryState,
-		handleChangeSearch,
-		categorySelected,
-		searchValue,
-		handleSearchRedirect,
-		featuredProducts,
-		errorQuantityProducts,
-		header,
-		logo,
-		productModal,
-		handleChangeCategory,
-		setProductLogin,
-		updateProductModal
-	} = props
-
-	const theme = useTheme()
-	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
-	const [orderState] = useOrder()
-	const [{ parsePrice }] = useUtils()
-	const { business, loading, error } = businessState
-	const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
-	const [curProduct, setCurProduct] = useState(null)
-	const [openUpselling, setOpenUpselling] = useState(false)
-	const [canOpenUpselling, setCanOpenUpselling] = useState(false)
-
-	const styles = StyleSheet.create({
-		mainContainer: {
-			flex: 1,
-		},
-		BackIcon: {
-			paddingRight: 20,
-		},
-		headerItem: {
-			flexDirection: 'row',
-			alignItems: 'center',
-			marginHorizontal: 20,
-		},
-		btnBackArrow: {
-			borderWidth: 0,
-			color: '#FFF',
-			backgroundColor: 'transparent',
-			borderRadius: 24,
-			marginRight: 15,
-		},
-		searchIcon: {
-			borderWidth: 0,
-			color: '#FFF',
-			backgroundColor: 'rgba(0,0,0,0.3)',
-			borderRadius: 24,
-			padding: 15,
-			justifyContent: 'center'
-		}
-	})
-
-	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
-
-	const onRedirect = (route: string, params?: any) => {
-		navigation.navigate(route, params)
-	}
-
-	const onProductClick = (product: any) => {
-		setCurProduct(product)
-	}
-
-	const handleCancel = () => {
-		handleChangeSearch('')
-	}
-
-	const handleCloseProductModal = () => {
-		setCurProduct(null)
-		updateProductModal && updateProductModal(null)
-	}
-
-	const handlerProductAction = () => {
-		handleCloseProductModal()
-	}
-
-	const handleUpsellingPage = () => {
-		onRedirect('CheckoutNavigator', {
-			screen: 'CheckoutPage',
-			cartUuid: currentCart?.uuid,
-			businessLogo: logo,
-			businessName: business?.name,
-			cartTotal: currentCart?.total
-		})
-		setOpenUpselling(false)
-	}
-
-	return (
-		<>
-			<BusinessProductsListingContainer
-				style={styles.mainContainer}
-				isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
-				contentContainerStyle={{ paddingBottom: 40 }}
-				showsVerticalScrollIndicator={false}
-			>
-
-				{!loading && business?.id && (
-					<>
-						<WrapContent>
-							<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}
-							/>
-						</WrapContent>
-					</>
-				)}
-
-			</BusinessProductsListingContainer>
-
-			<OModal
-				open={!!curProduct || (!!productModal.product && !orderState.loading)}
-				onClose={handleCloseProductModal}
-				entireModal
-				customClose
-			>
-				<ProductForm
-					product={curProduct || productModal.product}
-					businessSlug={business?.slug}
-					businessId={business?.id || productModal?.product?.category?.business_id}
-					onClose={handleCloseProductModal}
-					navigation={navigation}
-					onSave={handlerProductAction}
-					setProductLogin={setProductLogin}
-				/>
-			</OModal>
-			{openUpselling && (
-				<UpsellingProducts
-					businessId={currentCart?.business_id}
-					business={currentCart?.business}
-					cartProducts={currentCart?.products}
-					handleUpsellingPage={handleUpsellingPage}
-					openUpselling={openUpselling}
-					canOpenUpselling={canOpenUpselling}
-					setCanOpenUpselling={setCanOpenUpselling}
-				/>
-			)}
-		</>
-	)
-}
-
-const SearchProductsListing = (props: BusinessProductsListingParams) => {
-	const businessProductslistingProps = {
-		...props,
-		UIComponent: BusinessProductsListingUI
-	}
-	return (
-		<BusinessAndProductList {...businessProductslistingProps} />
-	)
-}
-
-interface SearchProps {
-	bProps: BusinessesListingParams,
-	pProps: BusinessProductsListingParams
-}
-
-export const SearchList = ({ bProps, pProps }: SearchProps) => {
-
-	return (
-		// <View>
-		<SearchBusinessList {...bProps} />
-		// <SearchProductsListing {...pProps} />
-		// </View>
-	)
-}
+import React, { useState } from 'react'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { View, StyleSheet, ScrollView, Platform, TouchableOpacity } from 'react-native'
+import {
+	BusinessList as BusinessesListingController,
+	BusinessAndProductList,
+	useLanguage,
+	useSession,
+	useOrder,
+	useConfig,
+	useUtils,
+	ToastType,
+	useToast
+} from 'ordering-components/native'
+
+import { Search, WrapContent } from './styles'
+
+import { SearchBar } from '../SearchBar'
+import { OIcon, OModal, OText } from '../shared'
+import { BusinessesListingParams, BusinessProductsListingParams } from '../../types'
+import { NotFoundSource } from '../NotFoundSource'
+import { BusinessTypeFilter } from '../BusinessTypeFilter'
+import { BusinessController } from '../BusinessController'
+import { useTheme } from 'styled-components/native'
+import { BusinessProductsListingContainer } from '../BusinessProductsListing/styles'
+import { BusinessProductsList } from '../BusinessProductsList'
+import { ProductForm } from '../ProductForm'
+import { UpsellingProducts } from '../UpsellingProducts'
+
+const PIXELS_TO_SCROLL = 1200
+
+const SearchBusinessUI = (props: BusinessesListingParams) => {
+	const {
+		navigation,
+		businessesList,
+		searchValue,
+		getBusinesses,
+		handleChangeBusinessType,
+		handleBusinessClick,
+		paginationProps,
+		handleChangeSearch
+	} = props
+
+	const theme = useTheme();
+
+	const styles = StyleSheet.create({
+		container: {
+			marginBottom: 0
+		},
+		welcome: {
+			flex: 1,
+			flexDirection: 'row'
+		},
+		inputStyle: {
+			backgroundColor: theme.colors.clear,
+			flex: 1,
+			paddingStart: 12,
+		},
+		wrapperOrderOptions: {
+			width: '100%',
+			display: 'flex',
+			flexDirection: 'row',
+			justifyContent: 'space-between',
+			alignItems: 'center',
+			marginBottom: 10,
+			zIndex: 100
+		},
+		borderStyle: {
+
+		}
+	})
+
+	const [, t] = useLanguage()
+	const [{ user, auth }] = useSession()
+	const [orderState] = useOrder()
+	const [{ configs }] = useConfig()
+	const [{ parseDate }] = useUtils()
+	const [, { showToast }] = useToast()
+	const [isFilter, setIsFilter] = useState(false);
+
+	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+
+	const handleScroll = ({ nativeEvent }: any) => {
+		const y = nativeEvent.contentOffset.y
+		const height = nativeEvent.contentSize.height
+		const hasMore = !(paginationProps.totalPages === paginationProps.currentPage)
+
+		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
+			getBusinesses()
+			showToast(ToastType.Info, 'loading more business')
+		}
+	}
+
+	return (
+		<View style={{flex: 1}}>
+			<Search>
+				<SearchBar
+					onSearch={handleChangeSearch}
+					searchValue={searchValue}
+					lazyLoad
+					isCancelXButtonShow={!!searchValue}
+					borderStyle={styles.borderStyle}
+					onCancel={() => handleChangeSearch('')}
+					placeholder={t('FIND_BUSINESS', 'Find a Business')}
+				/>
+				<TouchableOpacity style={{ paddingStart: 12 }} activeOpacity={0.7} onPress={() => setIsFilter(!isFilter)}>
+					<OIcon src={theme.images.general.filter} width={16} color={theme.colors.textPrimary} />
+				</TouchableOpacity>
+			</Search>
+			<ScrollView style={styles.container} contentContainerStyle={{ paddingHorizontal: 40 }} onScroll={(e: any) => handleScroll(e)}>
+
+				{isFilter && <BusinessTypeFilter
+					images={props.images}
+					businessTypes={props.businessTypes}
+					defaultBusinessType={props.defaultBusinessType}
+					handleChangeBusinessType={handleChangeBusinessType}
+					isMini
+					noTitle
+				/>}
+
+				{
+					!businessesList.loading && businessesList.businesses.length === 0 && (
+						<NotFoundSource
+							content={t('NOT_FOUND_BUSINESSES', 'No businesses to delivery / pick up at this address, please change filters or change address.')}
+						/>
+					)
+				}
+
+				{!businessesList.loading && businessesList.businesses.length > 0 && (
+					businessesList.businesses?.map((business: any) => (
+						<BusinessController
+							key={business.id}
+							business={business}
+							handleCustomClick={handleBusinessClick}
+							orderType={orderState?.options?.type}
+							isBusinessOpen={business?.open}
+						/>
+					))
+				)
+				}
+				{businessesList.loading && (
+					<>
+						{[...Array(paginationProps.nextPageItems ? paginationProps.nextPageItems : 8).keys()].map((item, i) => (
+							<Placeholder Animation={Fade} key={i} style={{ marginBottom: 20 }}>
+								<View style={{ width: '100%', flexDirection: 'row' }}>
+									<PlaceholderLine height={50} style={{ borderRadius: 25, width: 50 }} />
+									<Placeholder style={{ marginStart: 10 }}>
+										<PlaceholderLine height={24} width={50} style={{ marginBottom: 4 }} />
+										<PlaceholderLine height={15} width={40} style={{ marginBottom: 4 }} />
+										<PlaceholderLine height={15} width={70} />
+									</Placeholder>
+								</View>
+							</Placeholder>
+						))}
+					</>
+				)}
+			</ScrollView>
+		</View>
+	)
+}
+
+const SearchBusinessList = (businessProps: BusinessesListingParams) => {
+
+	const BusinessesListingProps = {
+		...businessProps,
+		isForceSearch: Platform.OS === 'ios',
+		UIComponent: SearchBusinessUI
+	}
+
+	return <BusinessesListingController {...BusinessesListingProps} />
+}
+
+const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
+	const {
+		navigation,
+		errors,
+		businessState,
+		categoryState,
+		handleChangeSearch,
+		categorySelected,
+		searchValue,
+		handleSearchRedirect,
+		featuredProducts,
+		errorQuantityProducts,
+		header,
+		logo,
+		productModal,
+		handleChangeCategory,
+		setProductLogin,
+		updateProductModal
+	} = props
+
+	const theme = useTheme()
+	const [, t] = useLanguage()
+	const [{ auth }] = useSession()
+	const [orderState] = useOrder()
+	const [{ parsePrice }] = useUtils()
+	const { business, loading, error } = businessState
+	const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
+	const [curProduct, setCurProduct] = useState(null)
+	const [openUpselling, setOpenUpselling] = useState(false)
+	const [canOpenUpselling, setCanOpenUpselling] = useState(false)
+
+	const styles = StyleSheet.create({
+		mainContainer: {
+			flex: 1,
+		},
+		BackIcon: {
+			paddingRight: 20,
+		},
+		headerItem: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			marginHorizontal: 20,
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			color: '#FFF',
+			backgroundColor: 'transparent',
+			borderRadius: 24,
+			marginRight: 15,
+		},
+		searchIcon: {
+			borderWidth: 0,
+			color: '#FFF',
+			backgroundColor: 'rgba(0,0,0,0.3)',
+			borderRadius: 24,
+			padding: 15,
+			justifyContent: 'center'
+		}
+	})
+
+	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
+
+	const onRedirect = (route: string, params?: any) => {
+		navigation.navigate(route, params)
+	}
+
+	const onProductClick = (product: any) => {
+		setCurProduct(product)
+	}
+
+	const handleCancel = () => {
+		handleChangeSearch('')
+	}
+
+	const handleCloseProductModal = () => {
+		setCurProduct(null)
+		updateProductModal && updateProductModal(null)
+	}
+
+	const handlerProductAction = () => {
+		handleCloseProductModal()
+	}
+
+	const handleUpsellingPage = () => {
+		onRedirect('CheckoutNavigator', {
+			screen: 'CheckoutPage',
+			cartUuid: currentCart?.uuid,
+			businessLogo: logo,
+			businessName: business?.name,
+			cartTotal: currentCart?.total
+		})
+		setOpenUpselling(false)
+	}
+
+	return (
+		<>
+			<BusinessProductsListingContainer
+				style={styles.mainContainer}
+				isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
+				contentContainerStyle={{ paddingBottom: 40 }}
+				showsVerticalScrollIndicator={false}
+			>
+
+				{!loading && business?.id && (
+					<>
+						<WrapContent>
+							<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}
+							/>
+						</WrapContent>
+					</>
+				)}
+
+			</BusinessProductsListingContainer>
+
+			<OModal
+				open={!!curProduct || (!!productModal.product && !orderState.loading)}
+				onClose={handleCloseProductModal}
+				entireModal
+				customClose
+			>
+				<ProductForm
+					product={curProduct || productModal.product}
+					businessSlug={business?.slug}
+					businessId={business?.id || productModal?.product?.category?.business_id}
+					onClose={handleCloseProductModal}
+					navigation={navigation}
+					onSave={handlerProductAction}
+					setProductLogin={setProductLogin}
+				/>
+			</OModal>
+			{openUpselling && (
+				<UpsellingProducts
+					businessId={currentCart?.business_id}
+					business={currentCart?.business}
+					cartProducts={currentCart?.products}
+					handleUpsellingPage={handleUpsellingPage}
+					openUpselling={openUpselling}
+					canOpenUpselling={canOpenUpselling}
+					setCanOpenUpselling={setCanOpenUpselling}
+				/>
+			)}
+		</>
+	)
+}
+
+const SearchProductsListing = (props: BusinessProductsListingParams) => {
+	const businessProductslistingProps = {
+		...props,
+		UIComponent: BusinessProductsListingUI
+	}
+	return (
+		<BusinessAndProductList {...businessProductslistingProps} />
+	)
+}
+
+interface SearchProps {
+	bProps: BusinessesListingParams,
+	pProps: BusinessProductsListingParams
+}
+
+export const SearchList = ({ bProps, pProps }: SearchProps) => {
+
+	return (
+		// <View>
+		<SearchBusinessList {...bProps} />
+		// <SearchProductsListing {...pProps} />
+		// </View>
+	)
+}