ordering-ui-react-native 0.12.33 → 0.12.37

package/themes/single-business/src/components/BusinessesListing/index.tsx

@@ -1,34 +1,37 @@
 import React, { useEffect, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
-	View,
-	StyleSheet,
-	ScrollView,
-	Platform,
-	TouchableOpacity,
+  View,
+  StyleSheet,
+  ScrollView,
+  Platform,
+  TouchableOpacity,
 } from 'react-native';
 import {
-	BusinessList as BusinessesListingController,
-	useLanguage,
-	useSession,
-	useOrder,
-	useConfig,
-	useUtils,
+  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,
+  Search,
+  OrderControlContainer,
+  AddressInput,
+  WrapMomentOption,
+  HeaderWrapper,
+  ListWrapper,
+  FeaturedWrapper,
+  TopHeader,
+  DropOptionButton,
+  WrapSearchBar,
 } from './styles';
 
 import { SearchBar } from '../SearchBar';
-import { OIcon, OText } from '../shared';
+import { OButton, OIcon, OText } from '../shared';
 import { BusinessesListingParams } from '../../types';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessTypeFilter } from '../BusinessTypeFilter';
@@ -36,302 +39,310 @@ import { BusinessController } from '../BusinessController';
 import { OrderTypeSelector } from '../OrderTypeSelector';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../BusinessFeaturedController';
+import { getTypesText } from '../../utils';
+import NavBar from '../NavBar';
 
 const PIXELS_TO_SCROLL = 1000;
 
 const BusinessesListingUI = (props: BusinessesListingParams) => {
-	const {
-		navigation,
-		businessesList,
-		searchValue,
-		getBusinesses,
-		handleChangeBusinessType,
-		handleBusinessClick,
-		paginationProps,
-		handleChangeSearch,
-	} = props;
+  const {
+    navigation,
+    businessesList,
+    searchValue,
+    getBusinesses,
+    handleChangeBusinessType,
+    handleBusinessClick,
+    paginationProps,
+    handleChangeSearch,
+  } = props;
 
-	const theme = useTheme();
+  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: 'space-between',
-			marginBottom: 10,
-			zIndex: 100,
-		},
-		borderStyle: {
-			borderColor: theme.colors.backgroundGray,
-			borderWidth: 1,
-			borderRadius: 10,
-		},
-		searchInput: {
-			fontSize: 12,
-		}
-	});
+  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,
+    },
+    borderStyle: {
+      borderColor: theme.colors.backgroundGray,
+      borderWidth: 1,
+      borderRadius: 10,
+    },
+    searchInput: {
+      fontSize: 12,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      backgroundColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 40,
+      paddingRight: 40
+    },
+    headerStyle: {
+      height: 260,
+      paddingHorizontal: 40
+    },
+  });
 
 
-	const [, t] = useLanguage();
-	const [{ user, auth }] = useSession();
-	const [orderState] = useOrder();
-	const [{ configs }] = useConfig();
-	const [{ parseDate }] = useUtils();
+  const [, t] = useLanguage();
+  const [{ user, auth }] = useSession();
+  const [orderState] = useOrder();
+  const [{ configs }] = useConfig();
+  const [{ parseDate }] = useUtils();
 
-	const { top } = useSafeAreaInsets();
+  const { top } = useSafeAreaInsets();
 
-	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
+  const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 
-	// 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 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
+    );
 
-	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();
+    }
+  };
 
-		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
-			getBusinesses();
-		}
-	};
+  useEffect(() => {
+    if (businessesList.businesses.length > 0) {
+      const fb = businessesList.businesses.filter((b) => b.featured == true);
+      const ary = [];
+      while (fb.length > 0) {
+        ary.push(fb.splice(0, 2));
+      }
+      setFeaturedBusinesses(ary);
+    }
+  }, [businessesList.businesses]);
 
-	useEffect(() => {
-		if (businessesList.businesses.length > 0) {
-			const fb = businessesList.businesses.filter((b) => b.featured == true);
-			const ary = [];
-			while (fb.length > 0) {
-				ary.push(fb.splice(0, 2));
-			}
-			setFeaturedBusinesses(ary);
-		}
-	}, [businessesList.businesses]);
-	// const resetInactivityTimeout = () => {
-	//   clearTimeout(timerId.current)
-	//   timerId.current = setInterval(() => {
-	//     getBusinesses(true)
-	//   }, 600000)
-	// }
+  return (
+    <ScrollView
+      style={styles.container}
+      onScroll={(e) => handleScroll(e)}
+      showsVerticalScrollIndicator={false}
+    >
+      <HeaderWrapper
+        source={theme.images.backgrounds.business_list_header}
+      >
+        {!auth && (
+          <TopHeader style={{ top: top }}>
+            <NavBar
+              style={{ paddingBottom: 0, marginLeft: 20, backgroundColor: 'transparent' }}
+              btnStyle={{ backgroundColor: 'transparent' }}
+              leftImageStyle={{ tintColor: theme.colors.white }}
+              onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+            />
+          </TopHeader>
+        )}
 
-	// useEffect(() => {
-	//   resetInactivityTimeout()
-	// }, [])
-
-	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
-			<HeaderWrapper
-				source={theme.images.backgrounds.business_list_header}
-				style={{ paddingTop: top + 20 }}>
-				{!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} numberOfLines={1} style={{ width: '90%' }}>
-							{orderState?.options?.address?.address}
-						</OText>
-					</AddressInput>
-				</Search>
-				<OrderControlContainer>
-					<View style={styles.wrapperOrderOptions}>
-						<OrderTypeSelector configTypes={configTypes} />
-						<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>
-
-						<SearchBar
-							onSearch={handleChangeSearch}
-							searchValue={searchValue}
-							lazyLoad
-							isCancelXButtonShow={!!searchValue}
-							borderStyle={styles.borderStyle}
-							onCancel={() => handleChangeSearch('')}
-							placeholder={t('SEARCH', 'Search')}
-							height={26}
-							inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-						/>
-					</View>
-				</OrderControlContainer>
-			</HeaderWrapper>
-			{featuredBusiness && featuredBusiness.length > 0 && (
-				<FeaturedWrapper>
-					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
-					<ScrollView
-						showsHorizontalScrollIndicator={false}
-						nestedScrollEnabled
-						horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
-						{featuredBusiness.map((bAry: any, idx) => (
-							<View key={'f-listing_' + idx}>
-								<BusinessFeaturedController
-									key={bAry[0].id}
-									business={bAry[0]}
-									handleCustomClick={handleBusinessClick}
-									orderType={orderState?.options?.type}
-								/>
-								{bAry.length > 1 && (
-									<BusinessFeaturedController
-										key={bAry[1].id}
-										business={bAry[1]}
-										handleCustomClick={handleBusinessClick}
-										orderType={orderState?.options?.type}
-									/>
-								)}
-							</View>
-						))}
-					</ScrollView>
-				</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>
-	);
+        <AddressInput
+          onPress={() => auth
+            ? navigation.navigate('AddressList', { isFromBusinesses: true })
+            : navigation.navigate('AddressForm', {
+              address: orderState.options?.address,
+              isFromBusinesses: true,
+            })
+          }
+          style={{ marginTop: !auth ? 36 : top > 0 ? 0 : 20 }}
+          activeOpacity={0.8}
+        >
+          <OIcon src={theme.images.general.pin} width={16} color={theme.colors.textSecondary} />
+          <OText color={theme.colors.textPrimary} numberOfLines={1} lineHeight={20} weight={Platform.OS === 'android' ? 'bold' : '600'} style={{ paddingStart: 10, flexBasis: '90%' }}>
+            {orderState?.options?.address?.address}
+          </OText>
+        </AddressInput>
+        <OrderControlContainer>
+          <View style={styles.wrapperOrderOptions}>
+            <DropOptionButton
+              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 }}
+              />
+            </DropOptionButton>
+            <DropOptionButton
+              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 }}
+              />
+            </DropOptionButton>
+          </View>
+        </OrderControlContainer>
+      </HeaderWrapper>
+      <WrapSearchBar>
+        <SearchBar
+          onSearch={handleChangeSearch}
+          isCancelXButtonShow
+          noBorderShow
+          placeholder={t('SEARCH', 'Search')}
+          lazyLoad
+        />
+      </WrapSearchBar>
+      <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('FEATURED_BUSINESS', 'Featured business')}</OText>
+          <ScrollView
+            showsHorizontalScrollIndicator={false}
+            nestedScrollEnabled
+            horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+            {featuredBusiness.map((bAry: any, idx) => (
+              <View key={'f-listing_' + idx}>
+                <BusinessFeaturedController
+                  key={bAry[0].id}
+                  business={bAry[0]}
+                  handleCustomClick={handleBusinessClick}
+                  orderType={orderState?.options?.type}
+                />
+                {bAry.length > 1 && (
+                  <BusinessFeaturedController
+                    key={bAry[1].id}
+                    business={bAry[1]}
+                    handleCustomClick={handleBusinessClick}
+                    orderType={orderState?.options?.type}
+                  />
+                )}
+              </View>
+            ))}
+          </ScrollView>
+        </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,
-	};
+  const BusinessesListingProps = {
+    ...props,
+    isForceSearch: Platform.OS === 'ios',
+    UIComponent: BusinessesListingUI,
+  };
 
-	return <BusinessesListingController {...BusinessesListingProps} />;
+  return <BusinessesListingController {...BusinessesListingProps} />;
 };