ordering-ui-react-native 0.11.24 → 0.11.28

package/themes/kiosk/src/components/UpsellingProducts/index.tsx

@@ -206,47 +206,50 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                     <GridContainer>
                       {
                         !upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
-                          <Item key={product.id}>
-                            <OImage source={{ uri: product.images }} style={styles.imageStyle} />
-                            <Details>
-                              <OText
-                                weight="500"
-                                size={18}
-                                numberOfLines={3}
-                                mBottom={10}
-                              >
-                                {product.name}
-                              </OText>
-
-                              {product?.price && (
-                                <OText>
-                                  <OText
-                                    color={theme.colors.primary}
-                                    weight="500"
-                                  >
-                                    {parsePrice(product.price)}
-                                  </OText>
-
-                                  <OText
-                                    color={theme.colors.mediumGray}
-                                    size={12}
-                                    style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
+                          <React.Fragment key={product.id}>
+                          {!product?.inventoried && (
+                            <Item>
+                              <OImage source={{ uri: product.images }} style={styles.imageStyle} />
+                              <Details>
+                                <OText
+                                  weight="500"
+                                  size={18}
+                                  numberOfLines={3}
+                                  mBottom={10}
                                   >
-                                    {product?.offer_price ? parsePrice(product?.offer_price) : ''}
-                                  </OText>
+                                  {product.name}
                                 </OText>
-                              )}
-                            </Details>
 
-                            <OButton
-                              text={t('ADD_PRODUCT', 'add product')}
-                              textStyle={{ color: theme.colors.primary, textAlign: "center" }}
-                              style={{ minHeight: 40, height: 'auto', width: '100%' }}
-                              bgColor="#EAF2FE"
-                              borderColor="#EAF2FE"
-                              onClick={() => handleFormProduct(product)}
-                            />
-                          </Item>
+                                {product?.price && (
+                                  <OText>
+                                    <OText
+                                      color={theme.colors.primary}
+                                      weight="500"
+                                      >
+                                      {parsePrice(product.price)}
+                                    </OText>
+
+                                    <OText
+                                      color={theme.colors.mediumGray}
+                                      size={12}
+                                      style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
+                                      >
+                                      {product?.offer_price ? parsePrice(product?.offer_price) : ''}
+                                    </OText>
+                                  </OText>
+                                )}
+                              </Details>
+                              <OButton
+                                text={t('ADD_PRODUCT', 'add product')}
+                                textStyle={{ color: theme.colors.primary, textAlign: "center" }}
+                                style={{ minHeight: 40, height: 'auto', width: '100%' }}
+                                bgColor="#EAF2FE"
+                                borderColor="#EAF2FE"
+                                onClick={() => handleFormProduct(product)}
+                              />
+                            </Item>
+                          )}
+                          </React.Fragment>
                         )) : (
                           <OText>
                             {upsellingProducts.message}

package/themes/kiosk/src/components/shared/OCard.tsx

@@ -8,7 +8,7 @@ import OText from './OText';
 
 const CardContainer = styled.TouchableOpacity`
 	width: 21%;
-	margin: 2%;
+	margin: 10px 20px;
 	overflow: hidden;
 `
 

package/themes/kiosk/src/components/shared/OInput.tsx

@@ -54,6 +54,8 @@ interface Props {
   onSubmitEditing?: any;
   blurOnSubmit?: boolean;
   inputStyle?: TextInputProps
+  onFocus?: TextInputProps
+  onBlur?: TextInputProps
 }
 
 const OInput = (props: Props): React.ReactElement => {
@@ -93,6 +95,8 @@ const OInput = (props: Props): React.ReactElement => {
         returnKeyType={props.returnKeyType}
         onSubmitEditing={props.onSubmitEditing}
         blurOnSubmit={props.blurOnSubmit}
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
       />
       {props.iconRight && (
         <OIcon

package/themes/kiosk/src/types/index.d.ts

@@ -164,6 +164,9 @@ export interface Product {
   extras: Extra[];
   gallery: any[];
   ingredients: Ingredient[];
+  options: any;
+  comment: string;
+  valid_menu: boolean;
 }
 
 export interface Gallery {

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

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	StyleSheet,
 	FlatList,
 	View,
 	ScrollView,
 	TouchableOpacity,
+	Dimensions
 } from 'react-native';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
@@ -13,20 +14,22 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
-	BusinessCategoriesTitle,
 	BusinessCategories,
 	Category,
 	BCContainer,
 } from './styles';
-import { OIcon, OText } from '../shared';
+import { OIcon, OText, OModal } from '../shared';
 import { BusinessTypeFilterParams } from '../../types';
 
+const windowWidth = Dimensions.get('window').width;
+
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	const { typesState, currentTypeSelected, handleChangeBusinessType } = props;
 
 	const [, t] = useLanguage();
 
 	const theme = useTheme();
+  const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
 
 	const renderTypes = ({ item }: any) => {
 		return (
@@ -36,7 +39,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 				style={{
 					height: 34,
 					justifyContent: 'center',
-					borderBottomWidth: 1,
+					borderBottomWidth: currentTypeSelected === item.id ? 1 : 0,
 					borderBottomColor: currentTypeSelected === item.id ? theme.colors.textNormal : theme.colors.border,
 				}}>
 				<OText
@@ -58,45 +61,99 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	};
 
 	return (
-		<BCContainer>
-			{typesState?.loading && (
-				<View>
-					<Placeholder style={{ marginVertical: 10 }} Animation={Fade}>
-						<ScrollView
-							horizontal
-							showsVerticalScrollIndicator={false}
-							showsHorizontalScrollIndicator={false}>
-							{[...Array(4)].map((_, i) => (
-								<View
-									key={i}
-									style={{ width: 80, borderRadius: 10, marginRight: 15 }}>
-									<PlaceholderLine height={80} noMargin />
-								</View>
-							))}
-						</ScrollView>
-					</Placeholder>
-				</View>
-			)}
-			{!typesState?.loading &&
-				!typesState?.error &&
-				typesState?.types &&
-				typesState?.types.length > 0 && (
-					<>
-						<BusinessCategoriesTitle>
-
-						</BusinessCategoriesTitle>
-						<BusinessCategories>
-							<FlatList
+		<>
+			<BCContainer>
+				{typesState?.loading && (
+					<View>
+						<Placeholder style={{ marginVertical: 10 }} Animation={Fade}>
+							<ScrollView
 								horizontal
-								showsHorizontalScrollIndicator={false}
-								data={typesState?.types}
-								renderItem={renderTypes}
-								keyExtractor={(type) => type.name}
-							/>
-						</BusinessCategories>
-					</>
+								showsVerticalScrollIndicator={false}
+								showsHorizontalScrollIndicator={false}>
+								{[...Array(4)].map((_, i) => (
+									<View
+										key={i}
+										style={{ width: 80, borderRadius: 10, marginRight: 15 }}>
+										<PlaceholderLine height={80} noMargin />
+									</View>
+								))}
+							</ScrollView>
+						</Placeholder>
+					</View>
 				)}
-		</BCContainer>
+				{!typesState?.loading &&
+					!typesState?.error &&
+					typesState?.types &&
+					typesState?.types.length > 0 && (
+						<>
+							<BusinessCategories>
+								<FlatList
+									horizontal
+									showsHorizontalScrollIndicator={false}
+									data={typesState?.types}
+									renderItem={renderTypes}
+									keyExtractor={(type) => type.name}
+								/>
+								<TouchableOpacity
+									style={{ marginLeft: 15 }}
+									onPress={() => setIsOpenAllCategories(true)}
+								>
+									<OText size={12} color={theme.colors.primary}>{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((item: any) => (
+              <TouchableOpacity
+								key={item.id}
+								style={styles.categoryStyle}
+								onPress={() => {
+									handleChangeBusinessType(item.id)
+									isOpenAllCategories && setIsOpenAllCategories(false)
+								}}
+							>
+								{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>
+            ))}
+          </View>
+        </ScrollView>
+			</OModal>
+		</>
 	);
 };
 
@@ -105,13 +162,30 @@ const styles = StyleSheet.create({
 		padding: 10,
 	},
 	logo: {
-		width: 75,
-		height: 75,
+		width: windowWidth / 3 - 40,
+		height: windowWidth / 3 - 40,
 		marginBottom: 15,
-		borderRadius: 25,
+		borderRadius: 8,
 		justifyContent: 'center',
 		alignItems: 'center',
 	},
+	categoryStyle: {
+		width: windowWidth / 3 - 40,
+		height: 150,
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center',
+		marginHorizontal: 10,
+		marginBottom: 40
+	},
+	allCategoriesContainer : {
+		paddingHorizontal: 30,
+		paddingVertical: 30
+	},
+	allCategoriesWrapper: {
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+	}
 });
 
 export const BusinessTypeFilter = (props: BusinessTypeFilterParams) => {

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

@@ -7,17 +7,17 @@ export const BCContainer = styled.View`
   text-align: center;
 `
 
-export const BusinessCategoriesTitle = styled.View`
-  flex: 1;
-`
-
 export const BusinessCategories = styled.View`
   flex: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   margin: 10px 0px;
   width: 100%;
+  min-height: 35px;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
 `
 export const Category = styled.View`
   height: 150px;

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

@@ -36,6 +36,7 @@ import { BusinessController } from '../BusinessController';
 import { OrderTypeSelector } from '../OrderTypeSelector';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../BusinessFeaturedController';
+import { HighestRatedBusinesses } from '../HighestRatedBusinesses';
 import { getTypesText } from '../../utils';
 
 const PIXELS_TO_SCROLL = 1000;
@@ -252,6 +253,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</FeaturedWrapper>
 			)}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
+			<HighestRatedBusinesses onBusinessClick={handleBusinessClick} />
+			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
 				<BusinessTypeFilter
 					images={props.images}

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;