ordering-ui-react-native 0.11.22 → 0.11.26

package/themes/original/src/components/HighestRatedBusinesses/index.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import {
+	BusinessList as BusinessesListingController,
+  useLanguage,
+	useOrder
+} from 'ordering-components/native';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { View, ScrollView, Platform, Dimensions } from 'react-native';
+import { OText } from '../shared';
+import { HighestRatedBusinessesParams } from '../../types';
+import { BusinessController } from '../BusinessController'
+import {
+  ListWrapper
+} from './styles'
+
+const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
+  const {
+    businessesList,
+    onBusinessClick
+  } = props;
+
+  const [, t] = useLanguage()
+	const [orderState] = useOrder();
+
+  const windowWidth = Dimensions.get('window').width;
+
+  return (
+    <>
+      <ListWrapper>
+        <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
+        <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
+        <ScrollView
+          showsHorizontalScrollIndicator={false}
+          nestedScrollEnabled
+          horizontal
+          style={{ height: 300 }}
+        >
+          {businessesList.businesses?.map(
+            (business: any) => (
+              <View
+                key={business.id}
+                style={{
+                	width: windowWidth - 100,
+                	paddingHorizontal: 5,
+                	height: '100%'
+                }}
+              >
+                <BusinessController
+                  business={business}
+                  handleCustomClick={onBusinessClick}
+                  orderType={orderState?.options?.type}
+                />
+              </View>
+            )
+          )}
+          {businessesList.loading && (
+            <>
+              {[
+                ...Array(10).keys()
+              ].map((item, i) => (
+                <Placeholder
+                  Animation={Fade}
+                  key={i}
+                  style={{
+                    marginBottom: 20,
+                    width: windowWidth - 100,
+                    paddingHorizontal: 5,
+                    height: '100%'
+                  }}>
+                  <View style={{ width: '100%' }}>
+                    <PlaceholderLine
+                      height={150}
+                      style={{ marginBottom: 20, borderRadius: 8 }}
+                    />
+                    <View style={{ paddingHorizontal: 10 }}>
+                      <View
+                        style={{
+                          flexDirection: 'row',
+                          justifyContent: 'space-between',
+                        }}>
+                        <PlaceholderLine
+                          height={15}
+                          width={40}
+                          style={{ marginBottom: 15 }}
+                        />
+                        <PlaceholderLine
+                          height={15}
+                          width={20}
+                          style={{ marginBottom: 15 }}
+                        />
+                      </View>
+                      <PlaceholderLine
+                        height={15}
+                        width={30}
+                        style={{ marginBottom: 10 }}
+                      />
+                      <PlaceholderLine
+                        height={15}
+                        width={80}
+                        style={{ marginBottom: 10 }}
+                      />
+                    </View>
+                  </View>
+                </Placeholder>
+              ))}
+            </>
+          )}
+        </ScrollView>
+      </ListWrapper>
+    </>
+  )
+}
+
+export const HighestRatedBusinesses = (props: any) => {
+	const highestRatedBusinessesProps = {
+		...props,
+		UIComponent: HighestRatedBusinessesUI,
+    initialOrderByValue: 'rating'
+	};
+
+	return <BusinessesListingController {...highestRatedBusinessesProps} />;
+}; 

package/themes/original/src/components/HighestRatedBusinesses/styles.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components/native'
+
+export const ListWrapper = styled.View`
+	background-color: ${(props: any) => props.theme.colors.backgroundLight};
+	padding-horizontal: 40px;
+    padding-top: 30px;
+`;

package/themes/original/src/types/index.tsx

@@ -129,6 +129,10 @@ export interface BusinessesListingParams {
 	businessTypes?: any;
 	defaultBusinessType?: any;
 }
+export interface HighestRatedBusinessesParams {
+	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
+	onBusinessClick?: void;
+}
 export interface BusinessTypeFilterParams {
 	businessTypes?: Array<any>;
 	handleChangeBusinessType: any;

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

@@ -1,13 +1,15 @@
-import React from 'react'
-import { StyleSheet, FlatList, View, ScrollView, TouchableOpacity } from 'react-native'
+import React, { useState } from 'react'
+import { StyleSheet, View, ScrollView, TouchableOpacity, Dimensions } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components/native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import { BusinessCategories, Category, BCContainer } from './styles'
-import { OIcon, OText } from '../shared'
+import { BusinessCategories, BCContainer } from './styles'
+import { OIcon, OText, OModal } from '../shared'
 import { BusinessTypeFilterParams } from '../../types'
 import { useTheme } from 'styled-components/native'
 
+const windowWidth = Dimensions.get('window').width;
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
   const {
@@ -18,92 +20,165 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 
   const theme = useTheme()
   const [, t] = useLanguage();
+  const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
 
-  const renderTypes = ({ item }: any) => {
+
+  const styles = StyleSheet.create({
+    icons: {
+      padding: 10
+    },
+    logo: {
+      width: isOpenAllCategories ? windowWidth / 3 - 27 : windowWidth / 4 - 20,
+      height: isOpenAllCategories ? windowWidth / 3 - 27 : windowWidth / 4 - 20,
+      marginBottom: 15,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    categoryStyle: {
+      width: isOpenAllCategories ? windowWidth / 3 - 27 : windowWidth / 4 - 20,
+      height: 150,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginHorizontal: isOpenAllCategories ? 10 : 0,
+      marginBottom: isOpenAllCategories ? 40 : 0
+    },
+    allCategoriesContainer : {
+      paddingHorizontal: 10,
+      paddingVertical: 30
+    },
+    allCategoriesWrapper: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    }
+  })
+
+  const RenderTypes = ({ item }: any ) => {
     return (
       <TouchableOpacity
-        key={item.id}
-        onPress={() => handleChangeBusinessType(item.id)}
+        style={styles.categoryStyle}
+        onPress={() => {
+          handleChangeBusinessType(item.id)
+          isOpenAllCategories && setIsOpenAllCategories(false)
+        }}
       >
-        <Category>
-          {item.image ? (
-            <OIcon
-              url={item.image}
-              style={styles.logo}
-            />
-          ) : (
-            <OIcon
-              src={theme.images.categories.all}
-              style={styles.logo}
-            />
-          )}
-          <OText
-            style={{ textAlign: 'center' }}
-            size={14}
-            color={currentTypeSelected === item.id ? theme.colors.primary : theme.colors.textSecondary}
-          >
-            {t(`BUSINESS_TYPE_${item.name.replace(/\s/g, '_').toUpperCase()}`, item.name)}
-          </OText>
-        </Category>
+        {item.image ? (
+          <OIcon
+            url={item.image}
+            style={styles.logo}
+          />
+        ) : (
+          <OIcon
+            src={theme.images.categories.all}
+            style={styles.logo}
+          />
+        )}
+        <OText
+          style={{ textAlign: 'center' }}
+          size={14}
+          color={currentTypeSelected === item.id ? theme.colors.primary : theme.colors.textSecondary}
+          numberOfLines={1}
+          ellipsizeMode='tail'
+        >
+          {t(`BUSINESS_TYPE_${item.name.replace(/\s/g, '_').toUpperCase()}`, item.name)}
+        </OText>
       </TouchableOpacity>
     )
   }
 
   return (
-    <BCContainer>
-      {typesState?.loading && (
-        <View>
-          <Placeholder
-            style={{ marginVertical: 10 }}
-            Animation={Fade}
-          >
-            <ScrollView
-              horizontal
-              showsVerticalScrollIndicator={false}
-              showsHorizontalScrollIndicator={false}
+    <>
+      <BCContainer>
+        {typesState?.loading && (
+          <View>
+            <Placeholder
+              style={{ marginVertical: 10 }}
+              Animation={Fade}
             >
-              {[...Array(4)].map((_, i) => (
-                <View key={i} style={{ width: 80, borderRadius: 10, marginRight: 15 }}>
-                  <PlaceholderLine
-                    height={80}
-                    noMargin
-                  />
-                </View>
+              <ScrollView
+                horizontal
+                showsVerticalScrollIndicator={false}
+                showsHorizontalScrollIndicator={false}
+              >
+                {[...Array(4)].map((_, i) => (
+                  <View key={i} style={{ width: 80, borderRadius: 8, marginRight: 15 }}>
+                    <PlaceholderLine
+                      height={80}
+                      noMargin
+                    />
+                  </View>
+                ))}
+              </ScrollView>
+            </Placeholder>
+          </View>
+        )}
+        {!typesState?.loading && !typesState?.error && typesState?.types && typesState?.types.length > 0 && (
+          <>
+            <BusinessCategories>
+              {typesState?.types.slice(0, 3).map((type: any) => (
+                <RenderTypes
+                  key={type.id}
+                  item={type}
+                />
               ))}
-            </ScrollView>
-          </Placeholder>
-        </View>
-      )}
-      {!typesState?.loading && !typesState?.error && typesState?.types && typesState?.types.length > 0 && (
-        <>
-          <BusinessCategories>
-            <FlatList
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              data={typesState?.types}
-              renderItem={renderTypes}
-              keyExtractor={type => type.name}
-            />
-          </BusinessCategories>
-        </>
-      )}
-    </BCContainer>
+              {typesState?.types.length > 3 && (
+                <TouchableOpacity
+                    style={styles.categoryStyle}
+                    onPress={() => setIsOpenAllCategories(true)}
+                  >
+                    <View
+                      style={{ ...styles.logo, backgroundColor: theme.colors.lightGray }}
+                    >
+                      <MaterialIcon
+                        name='dots-horizontal'
+                        size={32}
+                        color={theme.colors.black}
+                      />
+                    </View>
+                    <OText
+                      style={{ textAlign: 'center' }}
+                      size={14}
+                      color={theme.colors.textSecondary}
+                      numberOfLines={1}
+                      ellipsizeMode='tail'
+                    >
+                      {t('SEE_ALL', 'See all')}
+                    </OText>
+                  </TouchableOpacity>
+              )}
+            </BusinessCategories>
+          </>
+        )}
+      </BCContainer>
+      <OModal
+        open={isOpenAllCategories}
+        onClose={() => setIsOpenAllCategories(false)}
+        entireModal
+      >
+        <ScrollView style={styles.allCategoriesContainer}>
+          <OText
+            size={20}
+            mBottom={30}
+            color={theme.colors.textSecondary}
+            style={{ paddingHorizontal: 10 }}
+          >
+            {t('ALL_CATEGORIES', 'All categories')}
+          </OText>
+          <View style={styles.allCategoriesWrapper}>
+            {typesState?.types.map((type: any) => (
+              <RenderTypes
+                key={type.id}
+                item={type}
+              />
+            ))}
+          </View>
+        </ScrollView>
+      </OModal>
+    </>
   )
 }
 
-const styles = StyleSheet.create({
-  icons: {
-    padding: 10
-  },
-  logo: {
-    width: 50,
-    height: 50,
-    marginBottom: 15,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})
-
 export const BusinessTypeFilter = (props: BusinessTypeFilterParams) => {
   const businessTypeFilterProps = {
     ...props,

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

@@ -16,15 +16,6 @@ export const BusinessCategories = styled.View`
   margin: 10px 0px;
   width: 100%;
 `
-export const Category = styled.View`
-  height: 100px;
-  min-width: 70px;
-  margin-right: 15px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`
 
 export const IconContainer = styled.View`
   border-width: 1px;