ordering-ui-react-native 0.12.54 → 0.12.58

package/themes/franchises/src/components/BusinessesListing/index.tsx

@@ -1,339 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import {
-	View,
-	StyleSheet,
-	ScrollView,
-	Platform,
-	TouchableOpacity,
-} from 'react-native';
-import {
-	BusinessList as BusinessesListingController,
-	useLanguage,
-	useSession,
-	useOrder,
-	useConfig,
-	useUtils,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-
-import {
-	Search,
-	OrderControlContainer,
-	AddressInput,
-	WrapMomentOption,
-	HeaderWrapper,
-	ListWrapper,
-	FeaturedWrapper,
-	HeaderContainer,
-	SearchWrap,
-	DistanceWarning,
-} from './styles';
-
-import { SearchBar } from '../SearchBar';
-import { OIcon, OText } from '../shared';
-import { BusinessesListingParams } from '../../types';
-import { NotFoundSource } from '../NotFoundSource';
-import { BusinessTypeFilter } from '../BusinessTypeFilter';
-import { BusinessController } from '../BusinessController';
-import { OrderTypeSelector } from '../OrderTypeSelector';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { BusinessFeaturedController } from '../BusinessFeaturedController';
-import { getTypesText } from '../../utils';
-
-const PIXELS_TO_SCROLL = 1000;
-
-const BusinessesListingUI = (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.inputDisabled,
-			flex: 1,
-		},
-		wrapperOrderOptions: {
-			width: '100%',
-			flexDirection: 'row',
-			justifyContent: 'flex-start',
-			marginBottom: 10,
-			zIndex: 100,
-		},
-		searchInput: {
-			fontSize: 14,
-		}
-	});
-
-
-	const [, t] = useLanguage();
-	const [{ user, auth }] = useSession();
-	const [orderState] = useOrder();
-	const [{ configs }] = useConfig();
-	const [{ parseDate }] = useUtils();
-
-	const { top } = useSafeAreaInsets();
-
-	const [featuredBusiness, setFeaturedBusinesses] = useState([]);
-
-	// const timerId = useRef<any>(false)
-	// const panResponder = useRef(
-	//   PanResponder.create({
-	//     onMoveShouldSetPanResponder: (e, gestureState) => {
-	//       const {dx, dy} = gestureState;
-	//       resetInactivityTimeout()
-	//       return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
-	//     },
-	//   })
-	// ).current
-
-	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();
-		}
-	};
-
-	useEffect(() => {
-		if (businessesList.businesses.length > 0) {
-			const fb = businessesList.businesses.filter((b) => b.reviews?.total === 5);
-			// const ary = [];
-			// while (fb.length > 0) {
-			// 	ary.push(fb.splice(0, 2));
-			// }
-			setFeaturedBusinesses(fb as Array<never>);
-		}
-	}, [businessesList.businesses]);
-	// const resetInactivityTimeout = () => {
-	//   clearTimeout(timerId.current)
-	//   timerId.current = setInterval(() => {
-	//     getBusinesses(true)
-	//   }, 600000)
-	// }
-
-	// useEffect(() => {
-	//   resetInactivityTimeout()
-	// }, [])
-
-	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
-			<HeaderContainer>	
-				<HeaderWrapper
-					source={theme.images.backgrounds.business_list_header}
-					style={{ paddingTop: 40 }}>
-					{!auth && (
-						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-							<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
-						</TouchableOpacity>
-					)}
-					<Search>
-						<AddressInput
-							onPress={() =>
-								auth
-									? navigation.navigate('AddressList', { isFromBusinesses: true })
-									: navigation.navigate('AddressForm', {
-										address: orderState.options?.address,
-										isFromBusinesses: true,
-									})
-							}>
-							<OIcon
-								src={theme.images.general.pin}
-								color={theme.colors.disabled}
-								width={16}
-								style={{ marginRight: 10 }}
-							/>
-							<OText size={12} weight={'bold'} numberOfLines={1} style={{ width: '90%' }}>
-								{orderState?.options?.address?.address}
-							</OText>
-						</AddressInput>
-						<DistanceWarning>
-							<OIcon src={theme.images.general.warning} width={16} />
-							<OText size={12} lineHeight={18} mLeft={10}>{t('YOU_FAR_FROM_THIS_ADDRESS', 'You are far from this address')}</OText>
-						</DistanceWarning>
-					</Search>
-					<OrderControlContainer>
-						<View style={styles.wrapperOrderOptions}>
-							<WrapMomentOption activeOpacity={0.7} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-								<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderState?.options?.type || 1), 'Delivery')}</OText>
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
-							</WrapMomentOption>
-							<WrapMomentOption
-								onPress={() => navigation.navigate('MomentOption')}>
-								<OText
-									size={12}
-									numberOfLines={1}
-									ellipsizeMode="tail"
-									color={theme.colors.textSecondary}>
-									{orderState.options?.moment
-										? parseDate(orderState.options?.moment, {
-											outputFormat:
-												configs?.format_time?.value === '12'
-													? 'MM/DD hh:mma'
-													: 'MM/DD HH:mm',
-										})
-										: t('ASAP_ABBREVIATION', 'ASAP')}
-								</OText>
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
-							</WrapMomentOption>
-						</View>
-					</OrderControlContainer>
-				</HeaderWrapper>
-				<SearchWrap>
-					<SearchBar
-						onSearch={handleChangeSearch}
-						searchValue={searchValue}
-						lazyLoad
-						isCancelXButtonShow={!!searchValue}
-						onCancel={() => handleChangeSearch('')}
-						placeholder={t('SEARCH_BUSINESS', 'Search business')}
-						height={27}
-						inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-						inputWrapStyle={{	paddingLeft: 0, paddingRight: 0, paddingBottom: 12}}
-						showFilter
-						onHandleFilter={() => {}}
-					/>
-				</SearchWrap>
-			</HeaderContainer>
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			{featuredBusiness && featuredBusiness.length > 0 && (
-				<FeaturedWrapper>
-					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
-					<OText size={12} lineHeight={22} style={{ marginLeft: 40 }} >{t('TOP_RATING_GREAT_SERVICE', 'Top ratings and great service')}</OText>
-					<ListWrapper>
-					{featuredBusiness.map((business: any) => (
-						<BusinessController
-							key={business.id}
-							business={business}
-							handleCustomClick={handleBusinessClick}
-							orderType={orderState?.options?.type}
-						/>
-					))}
-					</ListWrapper>
-				</FeaturedWrapper>
-			)}
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<ListWrapper>
-				{/* <BusinessTypeFilter
-					images={props.images}
-					businessTypes={props.businessTypes}
-					defaultBusinessType={props.defaultBusinessType}
-					handleChangeBusinessType={handleChangeBusinessType}
-				/> */}
-				{!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.businesses?.map(
-					(business: any) =>
-						!business.featured && (
-							<BusinessController
-								key={business.id}
-								business={business}
-								handleCustomClick={handleBusinessClick}
-								orderType={orderState?.options?.type}
-							/>
-						),
-				)}
-				{businessesList.loading && (
-					<>
-						{[
-							...Array(
-								paginationProps.nextPageItems
-									? paginationProps.nextPageItems
-									: 8,
-							).keys(),
-						].map((item, i) => (
-							<Placeholder
-								Animation={Fade}
-								key={i}
-								style={{ marginBottom: 20 }}>
-								<View style={{ width: '100%' }}>
-									<PlaceholderLine
-										height={200}
-										style={{ marginBottom: 20, borderRadius: 25 }}
-									/>
-									<View style={{ paddingHorizontal: 10 }}>
-										<View
-											style={{
-												flexDirection: 'row',
-												justifyContent: 'space-between',
-											}}>
-											<PlaceholderLine
-												height={25}
-												width={40}
-												style={{ marginBottom: 10 }}
-											/>
-											<PlaceholderLine
-												height={25}
-												width={20}
-												style={{ marginBottom: 10 }}
-											/>
-										</View>
-										<PlaceholderLine
-											height={20}
-											width={30}
-											style={{ marginBottom: 10 }}
-										/>
-										<PlaceholderLine
-											height={20}
-											width={80}
-											style={{ marginBottom: 10 }}
-										/>
-									</View>
-								</View>
-							</Placeholder>
-						))}
-					</>
-				)}
-			</ListWrapper>
-		</ScrollView>
-	);
-};
-
-export const BusinessesListing = (props: BusinessesListingParams) => {
-	const BusinessesListingProps = {
-		...props,
-		isForceSearch: Platform.OS === 'ios',
-		UIComponent: BusinessesListingUI,
-	};
-
-	return <BusinessesListingController {...BusinessesListingProps} />;
-};

package/themes/franchises/src/components/BusinessesListing/styles.tsx

@@ -1,92 +0,0 @@
-import styled from 'styled-components/native'
-
-export const WelcomeTitle = styled.View`
-  flex: 1;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 15px;
-`
-
-export const BusinessList = styled.View`
-  flex-wrap: wrap;
-`
-
-export const Search = styled.View`
-  justify-content: flex-end;
-  align-items: center;
-  margin-vertical: 10px;
-`
-
-export const DistanceWarning = styled.View`
-  border-radius: 7.6px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.warningDark};
-  background-color: ${(props: any) => props.theme.colors.warning};
-  padding: 2px 16px;
-  margin-top: 11px;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-`
-
-export const AddressInput = styled.TouchableOpacity`
-  flex-direction: row;
-  background-color: ${(props: any) => props.theme.colors.white};
-  border-radius: 22px;
-  padding-horizontal: 20px;
-  align-items: center;
-  width: 100%;
-  height: 44px;
-  max-height: 44px;
-`
-
-export const OrderControlContainer = styled.View`
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 10;
-  padding-bottom: 20px;
-  margin-top: 12px;
-  flex: 1;
-`
-
-export const WrapMomentOption = styled.TouchableOpacity`
-  background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-  border-radius: 7.6px;
-  font-size: 12px;
-  max-width: 240px;
-  height: 26px;
-  align-items: center;
-  justify-content: center;
-  padding-horizontal: 8px;
-  flex-direction: row;
-  margin-end: 19px;
-`
-
-export const HeaderWrapper = styled.ImageBackground`
-	width: 100%;
-	height: 224px;
-	padding: 20px 40px;
-	background-color: transparent;
-`;
-
-export const HeaderContainer = styled.View`
-  background-color: white;
-`;
-export const SearchWrap = styled.View`
-  background-color: white;
-  min-height: 80px;
-  padding: 30px 40px 20px;
-`;
-
-export const ListWrapper = styled.View`
-	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
-  padding-top: 12px;
-`;
-
-export const FeaturedWrapper = styled.View`
-	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	paddingVertical: 24px;
-`;