ordering-ui-react-native 0.11.22 → 0.11.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.11.22",
+  "version": "0.11.26",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/BusinessTypeFilter/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react'
+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 { BusinessCategoriesTitle, BusinessCategories, Category, BCContainer } from './styles'
-import { OIcon, OText } from '../shared'
+import { OIcon, OText, OModal } from '../shared'
 import { BusinessTypeFilterParams } from '../../types'
 import { useTheme } from 'styled-components/native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import Carousel from 'react-native-snap-carousel';
 const windowWidth = Dimensions.get('window').width;
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
@@ -20,122 +20,172 @@ 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={20}
-            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>
-        </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>
     )
   }
 
-  let _carousel: Carousel<any> | null;
-
-  const typeSelectedIndex = typesState?.types?.length > 0
-    ? typesState?.types.findIndex((type: any) => type.id === (currentTypeSelected ?? 0))
-    : 0
-
   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 && (
+          <>
+            <BusinessCategoriesTitle>
+              <OText
+                size={16}
+                color={theme.colors.textSecondary}
+              >
+                {t('BUSINESS_CATEGORIES', 'Business Categories')}
+              </OText>
+            </BusinessCategoriesTitle>
+            <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 && (
-        <>
-          <BusinessCategoriesTitle>
-            <OText
-              size={16}
-              color={theme.colors.textSecondary}
-            >
-              {t('BUSINESS_CATEGORIES', 'Business Categories')}
-            </OText>
-          </BusinessCategoriesTitle>
-          <BusinessCategories>
-            <Carousel
-              keyExtractor={(item: any) => item.name}
-              ref={(c: any) => { _carousel = c }}
-              data={typesState?.types || []}
-              renderItem={renderTypes}
-              sliderWidth={windowWidth}
-              itemWidth={100}
-              alwaysBounceHorizontal
-              layout={'default'}
-              slideStyle={{
-                width: 100,
-                marginRight: 15,
-              }}
-              activeSlideOffset={15}
-              inactiveSlideScale={1}
-              snapToAlignment="start"
-              activeSlideAlignment="start"
-              inactiveSlideOpacity={1}
-              firstItem={typeSelectedIndex ?? 0}
-            />
-          </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: 75,
-    height: 75,
-    marginBottom: 15,
-    borderRadius: 25,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})
-
 export const BusinessTypeFilter = (props: BusinessTypeFilterParams) => {
   const businessTypeFilterProps = {
     ...props,

package/themes/business/src/components/OrdersOption/index.tsx

@@ -47,6 +47,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     loadOrders,
     loadMoreOrders,
     onNavigationRedirect,
+    handleClickOrder
   } = props;
 
   const theme = useTheme();
@@ -328,6 +329,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             orders={currentOrdersGroup.orders}
             onNavigationRedirect={onNavigationRedirect}
             getOrderStatus={getOrderStatus}
+            handleClickOrder={handleClickOrder}
           />
         )}
 

package/themes/business/src/components/PreviousOrders/index.tsx

@@ -3,15 +3,17 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { Card, Logo, Information, MyOrderOptions } from './styles';
+import { Card, Logo, Information, MyOrderOptions, NotificationIcon } from './styles';
+import EntypoIcon from 'react-native-vector-icons/Entypo'
 
 export const PreviousOrders = (props: any) => {
-  const { orders, onNavigationRedirect, getOrderStatus } = props;
+  const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
 
   const handlePressOrder = (order: any) => {
+    handleClickOrder && handleClickOrder(order)
     onNavigationRedirect &&
       onNavigationRedirect('OrderDetails', { order: order });
   };
@@ -96,12 +98,19 @@ export const PreviousOrders = (props: any) => {
                   />
                 </Logo>
               )}
-
               <Information>
                 <OText numberOfLines={1} style={styles.title}>
                   {order.business?.name}
                 </OText>
-
+                {order?.showNotification && (
+                  <NotificationIcon>
+                    <EntypoIcon
+                      name="dot-single"
+                      size={32}
+                      color={theme.colors.primary}
+                    />
+                  </NotificationIcon>
+                )}
                 <OText
                   style={styles.date}
                   numberOfLines={1}

package/themes/business/src/components/PreviousOrders/styles.tsx

@@ -13,6 +13,7 @@ export const Logo = styled.View`
 `;
 
 export const Information = styled.View`
+  position: relative;
   justify-content: flex-start;
   margin-horizontal: 10px;
   flex: 1;
@@ -23,3 +24,8 @@ export const MyOrderOptions = styled.View`
   flex-direction: column;
   justify-content: space-between;
 `;
+
+export const NotificationIcon = styled.View`
+  position: absolute;
+  left: 90%;
+`

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

@@ -275,6 +275,7 @@ export interface OrdersOptionParams {
   ordersGroup?: any;
   setOrdersGroup?: any;
   setCurrentFilters?: any;
+  handleClickOrder?: any;
 }
 export interface ActiveOrdersParams {
   orders?: any;

package/themes/doordash/src/components/BusinessTypeFilter/index.tsx

@@ -1,13 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { StyleSheet, FlatList, View, ScrollView, TouchableOpacity } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components/native'
 
-import { BusinessCategoriesTitle, BusinessCategories, Category, BCContainer } from './styles'
+import { BusinessCategories, Category, BCContainer } from './styles'
 import { OIcon, OText } from '../shared'
+import { OModal } from '../../../../../src/components/shared'
 import { useTheme } from 'styled-components/native'
 import { BusinessTypeFilterParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	const {
@@ -18,103 +20,169 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
-	const { width } = useWindowDimensions();
+	const { width, height } = useWindowDimensions();
+  const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
 
-	const renderTypes = ({ item }: any) => {
+	const styles = StyleSheet.create({
+		icons: {
+			padding: 10
+		},
+		logo: {
+      width: isOpenAllCategories ? width / 3 - 27 : width / 4 - 30,
+      height: isOpenAllCategories ? width / 3 - 27 : width / 4 - 30,
+      marginBottom: 15,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+		categoryStyle: {
+      width: isOpenAllCategories ? width / 3 - 27 : width / 4 - 30,
+      height: 120,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginHorizontal: isOpenAllCategories ? 10 : 0,
+      marginBottom: isOpenAllCategories ? 40 : 0
+    },
+		allCategoriesContainer : {
+      paddingHorizontal: 10,
+      paddingVertical: 30,
+			height: height,
+			backgroundColor: 'white',
+			flex: 1
+    },
+    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={12}
-						weight={'400'}
-						color={currentTypeSelected === item.id ? theme.colors.textPrimary : 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={12}
+					weight={'400'}
+					color={currentTypeSelected === item.id ? theme.colors.textPrimary : theme.colors.textSecondary}
+					numberOfLines={1}
+				>
+					{t(`BUSINESS_TYPE_${item.name.replace(/\s/g, '_').toUpperCase()}`, item.name)}
+				</OText>
 			</TouchableOpacity>
 		)
 	}
 
 	return (
-		<BCContainer style={{ marginStart: -40, width: width }}>
-			{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 && (
-				<>
-					{/* <BusinessCategoriesTitle>
-						<OText
-							size={16}
-							color={theme.colors.textSecondary}
-						>
-							{t('BUSINESS_CATEGORIES', 'Business Categories')}
-						</OText>
-					</BusinessCategoriesTitle> */}
-					<BusinessCategories>
-						<FlatList
-							horizontal
-							showsHorizontalScrollIndicator={false}
-							data={typesState?.types}
-							renderItem={renderTypes}
-							keyExtractor={type => type.name}
-							contentContainerStyle={{ paddingHorizontal: 40 }}
-						/>
-					</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={12}
+										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: 52,
-		height: 52,
-		marginBottom: 7,
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-})
-
 export const BusinessTypeFilter = (props: BusinessTypeFilterParams) => {
 	const businessTypeFilterProps = {
 		...props,

package/themes/doordash/src/components/BusinessTypeFilter/styles.tsx

@@ -5,7 +5,6 @@ export const BCContainer = styled.View`
   width: 100%;
   justify-content: flex-start;
   text-align: center;
-  min-height: 140px;
 `
 
 export const BusinessCategoriesTitle = styled.View`
@@ -19,7 +18,7 @@ export const BusinessCategories = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin: 30px 0px;
+  margin: 10px 0px;
   width: 100%;
 `
 export const Category = styled.View`