ordering-ui-react-native 0.24.16 → 0.24.18

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

@@ -1,384 +1,384 @@
-import React, { useEffect, useState } from 'react';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import Geolocation from '@react-native-community/geolocation'
-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,
-  TopHeader,
-  DropOptionButton,
-  WrapSearchBar,
-  FarAwayMessage
-} from './styles';
-
-import { SearchBar } from '../SearchBar';
-import { OButton, 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';
-import NavBar from '../NavBar';
-import { getDistance } from '../../utils'
-import Ionicons from 'react-native-vector-icons/Ionicons'
-
-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,
-    },
-    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
-    },
-    iconStyle: {
-			fontSize: 18,
-			color: theme.colors.warning5,
-			marginRight: 8
-		},
-  });
-
-
-  const [, t] = useLanguage();
-  const [{ user, auth }] = useSession();
-  const [orderState] = useOrder();
-  const [{ configs }] = useConfig();
-  const [{ parseDate }] = useUtils();
-
-  const { top } = useSafeAreaInsets();
-
-  const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
-	const [isFarAway, setIsFarAway] = 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();
-    }
-  };
-
-  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(() => {
-		Geolocation.getCurrentPosition((pos) => {
-      const crd = pos.coords
-      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-      if (distance > 20) setIsFarAway(true)
-			else setIsFarAway(false)
-    }, (err) => {
-      console.log(`ERROR(${err.code}): ${err.message}`)
-    }, {
-      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
-    })
-  }, [orderState?.options?.address?.location])
-
-  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>
-        )}
-
-        <AddressInput
-          onPress={() => auth
-            ? navigation.navigate('AddressList', { isFromBusinesses: true })
-            : navigation.navigate('AddressForm', {
-              address: orderState.options?.address,
-              isFromBusinesses: true,
-            })
-          }
-          style={{ marginTop: !auth ? 36 : 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>
-        {isFarAway && (
-          <FarAwayMessage>
-            <Ionicons name='md-warning-outline' style={styles.iconStyle} />
-            <OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
-          </FarAwayMessage>
-        )}
-        <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
-          inputStyle={{
-            borderRadius: 8,
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.border,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-          }}
-        />
-      </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,
-  };
-
-  return <BusinessesListingController {...BusinessesListingProps} />;
-};
+import React, { useEffect, useState } from 'react';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import Geolocation from '@react-native-community/geolocation'
+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,
+  TopHeader,
+  DropOptionButton,
+  WrapSearchBar,
+  FarAwayMessage
+} from './styles';
+
+import { SearchBar } from '../SearchBar';
+import { OButton, 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';
+import NavBar from '../NavBar';
+import { getDistance } from '../../utils'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+
+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,
+    },
+    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
+    },
+    iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+  });
+
+
+  const [, t] = useLanguage();
+  const [{ user, auth }] = useSession();
+  const [orderState] = useOrder();
+  const [{ configs }] = useConfig();
+  const [{ parseDate }] = useUtils();
+
+  const { top } = useSafeAreaInsets();
+
+  const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
+	const [isFarAway, setIsFarAway] = 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();
+    }
+  };
+
+  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(() => {
+		Geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+			else setIsFarAway(false)
+    }, (err) => {
+      console.log(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+    })
+  }, [orderState?.options?.address?.location])
+
+  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>
+        )}
+
+        <AddressInput
+          onPress={() => auth
+            ? navigation.navigate('AddressList', { isFromBusinesses: true })
+            : navigation.navigate('AddressForm', {
+              address: orderState.options?.address,
+              isFromBusinesses: true,
+            })
+          }
+          style={{ marginTop: !auth ? 36 : 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>
+        {isFarAway && (
+          <FarAwayMessage>
+            <Ionicons name='md-warning-outline' style={styles.iconStyle} />
+            <OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+          </FarAwayMessage>
+        )}
+        <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
+          inputStyle={{
+            borderRadius: 8,
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          }}
+        />
+      </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,
+  };
+
+  return <BusinessesListingController {...BusinessesListingProps} />;
+};