ordering-ui-react-native 0.12.2 → 0.12.6

package/themes/uber-eats/src/components/BusinessesListing/index.tsx

@@ -1,210 +1,214 @@
-import React, { useState } from 'react'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { View, StyleSheet, ScrollView, Platform, PanResponder, I18nManager } from 'react-native'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import {
-  BusinessList as BusinessesListingController,
-  useLanguage,
-  useSession,
-  useOrder,
-  useConfig,
-  useUtils,
-  ToastType,
-  useToast
-} from 'ordering-components/native'
-
-import { BusinessListContainer, Divider, Search, OrderControlContainer, AddressInput, WrapMomentOption } from './styles'
-
-import NavBar from '../NavBar'
-import { SearchBar } from '../SearchBar'
-import { OText } from '../shared'
-import { OBottomPopup } from '../shared'
-import { BusinessesListingParams } from '../../types'
-import { NotFoundSource } from '../NotFoundSource'
-import { BusinessTypeFilter } from '../BusinessTypeFilter'
-import { BusinessController } from '../BusinessController'
-import { OrderTypeSelector } from '../OrderTypeSelector'
-import { MomentOption } from '../MomentOption'
-import { useTheme } from 'styled-components/native'
-
-const PIXELS_TO_SCROLL = 1200
-
-const BusinessesListingUI = (props: BusinessesListingParams) => {
-  const {
-    navigation,
-    businessesList,
-    searchValue,
-    getBusinesses,
-    handleChangeBusinessType,
-    handleBusinessClick,
-    paginationProps,
-    handleChangeSearch
-  } = props
-
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1
-    },
-    wrapperOrderOptions: {
-      width: '100%',
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginBottom: 10,
-      zIndex: 100,
-      marginVertical: 15
-    },
-    borderStyle: {
-      borderColor: theme.colors.backgroundGray,
-      borderWidth: 1,
-      borderRadius: 10,
-    }
-  })
-
-  const [, t] = useLanguage()
-  const [{ user, auth }] = useSession()
-  const [orderState] = useOrder()
-  const [{ configs }] = useConfig()
-  const [{ parseDate }] = useUtils()
-  const [, {showToast}] = useToast()
-
-  const [openMomentOption, setOpenMomentOption] = 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 (
-    <BusinessListContainer>
-      {!auth && (
-        <NavBar
-          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-          showCall={false}
-          btnStyle={{ paddingLeft: 0 }}
-          style={{ paddingBottom: 0 }}
-        />
-      )}
-      <OrderControlContainer>
-        <OText color={theme.colors.green} style={{ marginVertical: 10 }}>
-          {t('DELIVER_TO', 'Deliver to')}
-        </OText>
-        <AddressInput
-          onPress={() => auth
-            ? navigation.navigate('AddressList', { isFromBusinesses: true })
-            : navigation.navigate('AddressForm', { address: orderState.options?.address,isFromBusinesses: true  })}
-        >
-          <OText size={16} numberOfLines={1} style={{ paddingHorizontal: 20 }}>
-            {orderState?.options?.address?.address}
-          </OText>
-          <MaterialIcon
-            name='keyboard-arrow-down'
-            color={theme.colors.primary}
-            size={20}
-            style={{ marginRight: 10 }}
-          />
-        </AddressInput>
-        <View style={styles.wrapperOrderOptions}>
-          <OrderTypeSelector configTypes={configTypes} />
-          <WrapMomentOption
-            onPress={() => setOpenMomentOption(true)}
-          >
-            <OText size={14} color={theme.colors.white} numberOfLines={1} ellipsizeMode='tail'>
-              {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>
-          </WrapMomentOption>
-        </View>
-      </OrderControlContainer>
-      <ScrollView showsVerticalScrollIndicator={false} style={styles.container} onScroll={(e) => handleScroll(e)}>
-        <Search>
-          <SearchBar
-            onSearch={handleChangeSearch}
-            searchValue={searchValue}
-            lazyLoad
-            isCancelXButtonShow={!!searchValue}
-            borderStyle={styles.borderStyle}
-            onCancel={() => handleChangeSearch('')}
-            placeholder={t('FIND_BUSINESS', 'Find a Business')}
-          />
-        </Search>
-
-        <BusinessTypeFilter
-          images={props.images}
-          businessTypes={props.businessTypes}
-          defaultBusinessType={props.defaultBusinessType}
-          handleChangeBusinessType={handleChangeBusinessType}
-        />
-        <Divider />
-        {
-          !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) => (
-            <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%' }}>
-                  <PlaceholderLine height={180} style={{ marginBottom: 20, borderRadius: 0 }} />
-                  <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>
-            ))}
-          </>
-        )}
-      </ScrollView>
-      <OBottomPopup
-        customHeaderShow
-        title={t('SELECT_DELIVERY_TIME', 'Select delivery time')}
-        open={openMomentOption}
-        onClose={() => setOpenMomentOption(false)}
-      >
-        <MomentOption
-          onClose={() => setOpenMomentOption(false)}
-        />
-      </OBottomPopup>
-    </BusinessListContainer>
-  )
-}
-
-export const BusinessesListing = (props: BusinessesListingParams) => {
-
-  const BusinessesListingProps = {
-    ...props,
-    isForceSearch: Platform.OS === 'ios',
-    UIComponent: BusinessesListingUI
-  }
-
-  return <BusinessesListingController {...BusinessesListingProps} />
-}
+import React, { useState } from 'react'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { View, StyleSheet, ScrollView, Platform, PanResponder, I18nManager } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import {
+  BusinessList as BusinessesListingController,
+  useLanguage,
+  useSession,
+  useOrder,
+  useConfig,
+  useUtils,
+  ToastType,
+  useToast
+} from 'ordering-components/native'
+
+import { BusinessListContainer, Divider, Search, OrderControlContainer, AddressInput, WrapMomentOption } from './styles'
+
+import NavBar from '../NavBar'
+import { SearchBar } from '../SearchBar'
+import { OText } from '../shared'
+import { OBottomPopup } from '../shared'
+import { BusinessesListingParams } from '../../types'
+import { NotFoundSource } from '../NotFoundSource'
+import { BusinessTypeFilter } from '../BusinessTypeFilter'
+import { BusinessController } from '../BusinessController'
+import { OrderTypeSelector } from '../OrderTypeSelector'
+import { MomentOption } from '../MomentOption'
+import { HighestRatedBusinesses } from '../HighestRatedBusinesses'
+import { useTheme } from 'styled-components/native'
+
+const PIXELS_TO_SCROLL = 1200
+
+const BusinessesListingUI = (props: BusinessesListingParams) => {
+  const {
+    navigation,
+    businessesList,
+    searchValue,
+    getBusinesses,
+    handleChangeBusinessType,
+    handleBusinessClick,
+    paginationProps,
+    handleChangeSearch
+  } = props
+
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1
+    },
+    wrapperOrderOptions: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 10,
+      zIndex: 100,
+      marginVertical: 15
+    },
+    borderStyle: {
+      borderColor: theme.colors.backgroundGray,
+      borderWidth: 1,
+      borderRadius: 10,
+    }
+  })
+
+  const [, t] = useLanguage()
+  const [{ user, auth }] = useSession()
+  const [orderState] = useOrder()
+  const [{ configs }] = useConfig()
+  const [{ parseDate }] = useUtils()
+  const [, {showToast}] = useToast()
+
+  const [openMomentOption, setOpenMomentOption] = 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 (
+    <BusinessListContainer>
+      {!auth && (
+        <NavBar
+          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          showCall={false}
+          btnStyle={{ paddingLeft: 0 }}
+          style={{ paddingBottom: 0 }}
+        />
+      )}
+      <OrderControlContainer>
+        <OText color={theme.colors.green} style={{ marginVertical: 10 }}>
+          {t('DELIVER_TO', 'Deliver to')}
+        </OText>
+        <AddressInput
+          onPress={() => auth
+            ? navigation.navigate('AddressList', { isFromBusinesses: true })
+            : navigation.navigate('AddressForm', { address: orderState.options?.address,isFromBusinesses: true  })}
+        >
+          <OText size={16} numberOfLines={1} style={{ paddingHorizontal: 20 }}>
+            {orderState?.options?.address?.address}
+          </OText>
+          <MaterialIcon
+            name='keyboard-arrow-down'
+            color={theme.colors.primary}
+            size={20}
+            style={{ marginRight: 10 }}
+          />
+        </AddressInput>
+        <View style={styles.wrapperOrderOptions}>
+          <OrderTypeSelector configTypes={configTypes} />
+          <WrapMomentOption
+            onPress={() => setOpenMomentOption(true)}
+          >
+            <OText size={14} color={theme.colors.white} numberOfLines={1} ellipsizeMode='tail'>
+              {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>
+          </WrapMomentOption>
+        </View>
+      </OrderControlContainer>
+      <ScrollView showsVerticalScrollIndicator={false} style={styles.container} onScroll={(e) => handleScroll(e)}>
+        <Search>
+          <SearchBar
+            onSearch={handleChangeSearch}
+            searchValue={searchValue}
+            lazyLoad
+            isCancelXButtonShow={!!searchValue}
+            borderStyle={styles.borderStyle}
+            onCancel={() => handleChangeSearch('')}
+            placeholder={t('FIND_BUSINESS', 'Find a Business')}
+          />
+        </Search>
+
+  			<HighestRatedBusinesses onBusinessClick={handleBusinessClick} />
+        <Divider />
+
+        <BusinessTypeFilter
+          images={props.images}
+          businessTypes={props.businessTypes}
+          defaultBusinessType={props.defaultBusinessType}
+          handleChangeBusinessType={handleChangeBusinessType}
+        />
+        <Divider />
+        {
+          !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) => (
+            <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%' }}>
+                  <PlaceholderLine height={180} style={{ marginBottom: 20, borderRadius: 0 }} />
+                  <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>
+            ))}
+          </>
+        )}
+      </ScrollView>
+      <OBottomPopup
+        customHeaderShow
+        title={t('SELECT_DELIVERY_TIME', 'Select delivery time')}
+        open={openMomentOption}
+        onClose={() => setOpenMomentOption(false)}
+      >
+        <MomentOption
+          onClose={() => setOpenMomentOption(false)}
+        />
+      </OBottomPopup>
+    </BusinessListContainer>
+  )
+}
+
+export const BusinessesListing = (props: BusinessesListingParams) => {
+
+  const BusinessesListingProps = {
+    ...props,
+    isForceSearch: Platform.OS === 'ios',
+    UIComponent: BusinessesListingUI
+  }
+
+  return <BusinessesListingController {...BusinessesListingProps} />
+}

package/themes/uber-eats/src/components/BusinessesListing/styles.tsx

@@ -1,54 +1,54 @@
-import styled from 'styled-components/native'
-
-export const BusinessListContainer = styled.View`
-  flex: 1;
-  flex-direction: column;
-  padding: 0px 30px 20px 30px;
-`
-
-export const Divider = styled.View`
-  margin-top: 10px;
-  height: 8px;
-  background-color: ${(props: any) => props.theme.colors.backgroundGray};
-`
-
-export const BusinessList = styled.View`
-  flex-wrap: wrap;
-`
-
-export const Search = styled.View`
-  flex-direction: row;
-  flex: 1;
-  justify-content: flex-end;
-  align-items: center;
-  margin-vertical: 10px;
-`
-
-export const AddressInput = styled.TouchableOpacity`
-  flex-direction: row;
-  justify-content: center;
-  border-radius: 10px;
-  align-items: center;
-  margin-horizontal: 10px;
-  width: 100%;
-`
-
-export const OrderControlContainer = styled.View`
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 10;
-`
-
-export const WrapMomentOption = styled.TouchableOpacity`
-  background-color: ${(props: any) => props.theme.colors.primary};
-  border-radius: 20px;
-  margin-vertical: 5px;
-  height: 40px;
-  flex-direction: row;
-  align-items: center;
-  padding: 0px 20px;
-  margin-horizontal: 10px;
-  max-width: 240px;
-`
+import styled from 'styled-components/native'
+
+export const BusinessListContainer = styled.View`
+  flex: 1;
+  flex-direction: column;
+  padding: 0px 30px 20px 30px;
+`
+
+export const Divider = styled.View`
+  margin-top: 10px;
+  height: 8px;
+  background-color: ${(props: any) => props.theme.colors.backgroundGray};
+`
+
+export const BusinessList = styled.View`
+  flex-wrap: wrap;
+`
+
+export const Search = styled.View`
+  flex-direction: row;
+  flex: 1;
+  justify-content: flex-end;
+  align-items: center;
+  margin-vertical: 10px;
+`
+
+export const AddressInput = styled.TouchableOpacity`
+  flex-direction: row;
+  justify-content: center;
+  border-radius: 10px;
+  align-items: center;
+  margin-horizontal: 10px;
+  width: 100%;
+`
+
+export const OrderControlContainer = styled.View`
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 10;
+`
+
+export const WrapMomentOption = styled.TouchableOpacity`
+  background-color: ${(props: any) => props.theme.colors.primary};
+  border-radius: 20px;
+  margin-vertical: 5px;
+  height: 40px;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px 20px;
+  margin-horizontal: 10px;
+  max-width: 240px;
+`