ordering-ui-react-native 0.11.22 → 0.11.26

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

@@ -72,7 +72,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingVertical: 20 }}>
+          <View style={{ paddingTop: 20 }}>
             <NavBar
               title={t('MENU', 'Menu')}
               onActionLeft={goToBack}

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

@@ -1,22 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import {
-  BusinessAndProductList,
-  useLanguage,
-  useOrder,
-  useSession,
-  useConfig,
-  useApi
-} from 'ordering-components/native'
+import { BusinessAndProductList, useLanguage } from 'ordering-components/native'
 import Carousel from 'react-native-snap-carousel';
 import { BusinessProductsListingParams, Business, Product } from '../../types'
-import { OCard, OText } from '../shared'
+import { OCard, OText, OIcon } from '../shared'
 import GridContainer from '../../layouts/GridContainer'
 import PromoCard from '../PromoCard';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import { useTheme } from 'styled-components/native';
-import { OIcon } from '../shared';
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const {navigation, businessState} = props;
@@ -40,8 +32,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   });
 
   const _renderTitle = (title: string): React.ReactElement => (
-    <View style={{paddingHorizontal: 20, paddingVertical: 40}}>
-      <OText size={orientationState?.dimensions?.width * 0.035} weight="bold">
+    <View style={{paddingHorizontal: 20, paddingVertical: 15 }}>
+      <OText size={orientationState?.dimensions?.width * 0.022} weight="bold">
         {title}
       </OText>
     </View>
@@ -69,7 +61,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const _renderPromos = (): React.ReactElement => (
     <>
-      {_renderTitle(t('PROMOS', 'Promos'))}
+      {_renderTitle(t('FEATURED', 'Featured'))}
       <Carousel
         keyExtractor={(item: any) => item.id}
         ref={(c: any) => {

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

@@ -10,7 +10,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CheckoutAction, Actions, KeyboardView, OrderTypeWrapper } from './styles';
+import { CheckoutAction, OrderTypeWrapper, FloatingLayout } from './styles';
 
 import { OSBill, OSCoupon, OSTable } from '../OrderSummary/styles';
 
@@ -22,8 +22,8 @@ import CartItem from '../CartItem';
 import NavBar from '../NavBar';
 import { CouponControl } from '../CouponControl';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation} from "../../../../../src/hooks/DeviceOrientation";
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
+import { Container } from '../../../../../src/layouts/Container';
 
 const CartUI = (props: any) => {
   const {
@@ -91,16 +91,8 @@ const CartUI = (props: any) => {
   const goToBack = () => navigation.goBack();
 
   return (
-    <KeyboardView
-      enabled
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <SafeAreaView style={{
-        flex: 1,
-        padding: 20,
-        backgroundColor: '#fff',
-      }}>
-
+    <>
+      <Container>
         <NavBar
           title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
           onActionLeft={goToBack}
@@ -141,29 +133,50 @@ const CartUI = (props: any) => {
           />
         </OrderTypeWrapper>
 
-        <ScrollView style={{flex: 1}}>
-          {cart?.products?.length > 0 && cart?.products.map((product: any) => (
-            <CartItem
-              key={product.code}
-              isCartPending={isCartPending}
-              isCartProduct
-              product={product}
-              changeQuantity={changeQuantity}
-              getProductMax={getProductMax}
-              offsetDisabled={offsetDisabled}
-              onDeleteProduct={handleDeleteClick}
-              onEditProduct={handleEditProduct}
-            />
-          ))}
-        </ScrollView>
-
-        <Actions
+        <ScrollView
+          nestedScrollEnabled={true}
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
           style={{
-            flex: 1
+            minHeight: orientationState?.dimensions?.height * 0.05,
+            maxHeight: orientationState?.dimensions?.height * 0.5,
           }}
         >
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              opacity: 1
+            }}
+          >
+            {cart?.products?.length > 0 && cart?.products.map((product: any) => (
+              <CartItem
+                isCartProduct
+                key={product.code}
+                product={product}
+                isCartPending={isCartPending}
+                changeQuantity={changeQuantity}
+                getProductMax={getProductMax}
+                offsetDisabled={offsetDisabled}
+                onDeleteProduct={handleDeleteClick}
+                onEditProduct={handleEditProduct}
+              />
+            ))}
+          </View>
+        </ScrollView>
+
+        <View style={{ marginTop: 10 }}>
           {cart?.valid_products && (
             <OSBill>
+              <OSTable>
+                <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
+                <OText>
+                  {cart.business.tax_type === 1
+                    ? parsePrice((cart?.subtotal + cart?.tax) || 0)
+                    : parsePrice(cart?.subtotal || 0)}
+                </OText>
+              </OSTable>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == PORTRAIT && (
                 <OSTable
                   style={{
@@ -260,19 +273,21 @@ const CartUI = (props: any) => {
                   </OSCoupon>
                 </OSTable>
               )}
-              {/*ESTE CODIGO GENERA UNA LINEA EN LA PAGINA QUE SE VE MAL, validar si es necesario este codigo*/}
-              {/*<OSTotal>*/}
-              {/*  <OSTable style={{ marginTop: 15 }}>*/}
-              {/*    <OText style={{ fontWeight: 'bold' }}>*/}
-              {/*      {t('TOTAL', 'Total')}*/}
-              {/*    </OText>*/}
-              {/*    <OText style={{ fontWeight: 'bold' }} color={theme.colors.primary}>*/}
-              {/*      {cart?.total >= 1 && parsePrice(cart?.total)}*/}
-              {/*    </OText>*/}
-              {/*  </OSTable>*/}
-              {/*</OSTotal>*/}
+              <OSTable>
+                <OText weight='bold'>
+                  {t('TOTAL', 'Total')}
+                </OText>
+                <OText weight='bold' color={theme.colors.primary}>
+                  {cart?.total >= 1 && parsePrice(cart?.total)}
+                </OText>
+              </OSTable>
             </OSBill>
           )}
+        </View>
+      </Container>
+
+      <>
+        <FloatingLayout isIos={Platform.OS === 'ios'}>
           <CheckoutAction>
             <View style={{display: 'flex', flexDirection: 'row'}}>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == LANDSCAPE && (
@@ -337,7 +352,7 @@ const CartUI = (props: any) => {
               }}>
                 <OButton
                   text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
-                    `${t('CONFIRM_THIS', 'Confirm this')} ${parsePrice(cart?.total)} ${t('ORDER', 'order')}`
+                    `${t('CONFIRM_THIS_ORDER', 'Confirm this order')}`
                   ) : !cart?.valid_address ? (
                     `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
                   ) : (
@@ -354,27 +369,27 @@ const CartUI = (props: any) => {
               </View>
             </View>
           </CheckoutAction>
-        </Actions>
+        </FloatingLayout>
+      </>
 
-        <OModal
-          open={openProduct}
-          entireModal
-          customClose
+      <OModal
+        open={openProduct}
+        entireModal
+        customClose
+        onClose={() => setModalIsOpen(false)}
+      >
+        <ProductForm
+          productCart={curProduct}
+          businessSlug={cart?.business?.slug}
+          businessId={curProduct?.business_id}
+          categoryId={curProduct?.category_id}
+          productId={curProduct?.id}
+          onSave={handlerProductAction}
           onClose={() => setModalIsOpen(false)}
-        >
-          <ProductForm
-            productCart={curProduct}
-            businessSlug={cart?.business?.slug}
-            businessId={curProduct?.business_id}
-            categoryId={curProduct?.category_id}
-            productId={curProduct?.id}
-            onSave={handlerProductAction}
-            onClose={() => setModalIsOpen(false)}
-          />
+        />
 
-        </OModal>
-      </SafeAreaView>
-    </KeyboardView>
+      </OModal>
+    </>
   )
 }
 

package/themes/kiosk/src/components/Cart/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const CContainer = styled.View`
   padding: 0 20px;
@@ -50,3 +50,21 @@ export const OrderTypeWrapper = styled.View`
   border-bottom-width: 1px;
   margin-bottom: 30px;
 `;
+
+export const FloatingLayout = styled.View`
+  position: absolute;
+  flex: 1;
+  bottom: 0px;
+  left: 0;
+  padding: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #FFF;
+  z-index: 1000;
+
+  ${((props: any) => props.isIos && css`
+    padding-bottom: 20px;
+  `)}
+`

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Platform, View } from 'react-native';
 import { useLanguage, useOrder, useUtils } from 'ordering-components/native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -87,7 +87,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingVertical: 20 }}>
+          <View style={{ paddingTop: 20 }}>
             <NavBar
               title={t('CATEGORY', 'Category')}
               onActionLeft={goToBack}
@@ -114,21 +114,12 @@ const CategoriesMenu = (props: any): React.ReactElement => {
               items={categories.map((category) => ({
                 text: category.name
               }))}
-              selectedIdx={curIndexCateg} 
+              selectedIdx={curIndexCateg}
               onSelectItem={onChangeTabs}
             />
           </View>
-          
-          <View style={{ paddingHorizontal: 20, paddingVertical: 8 }}>
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight="bold"
-            >
-              {categories[curIndexCateg].name}
-            </OText>
-          </View>
 
-          <GridContainer>
+          <GridContainer style={{ marginTop: 20 }}>
             {categories[curIndexCateg].products.map((product) => (
               <OCard
                 key={product.id}
@@ -137,7 +128,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                 style={{
                   width: orientationState?.orientation === LANDSCAPE
                     ? orientationState?.dimensions?.width * 0.16
-                    : orientationState?.dimensions?.width * 0.21,
+                    : orientationState?.dimensions?.width * 0.21
                 }}
                 titleStyle={{marginTop: Platform.OS === 'ios' ? 10 : 0}}
                 onPress={() => {
@@ -156,7 +147,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         </Container>
       </View>
 
-      {bottomSheetVisibility &&  
+      {bottomSheetVisibility &&
         (<View
           style={{
             flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useTheme } from 'styled-components/native';
 
@@ -22,7 +22,6 @@ import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/ho
 const LoginFormUI = (props: LoginParams) => {
   const {
     loginButtonText,
-    forgotButtonText,
     formState,
     handleButtonLoginClick,
   } = props;
@@ -161,12 +160,6 @@ const LoginFormUI = (props: LoginParams) => {
         style={{ borderRadius: 0 }}
         textStyle={{ fontSize: 24 }}
       />
-
-      <Pressable>
-        <OText size={24} mBottom={18} style={styles.forgotStyle}>
-          {forgotButtonText}
-        </OText>
-      </Pressable>
     </>
   );
 

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

@@ -83,7 +83,8 @@ const PaymentOptionsUI = (props: any) => {
     }
   }, [isOpenMethod.paymethod, placing, isLoading, paySelected]);
 
-  const includePaymethods = ['cash', 'card_delivery', 'stripe'];
+  // const includePaymethods = ['cash', 'card_delivery', 'stripe'];
+  const includePaymethods = ['cash', 'card_delivery'];
 
   const supportedMethods = paymethodsList.paymethods.filter((p: any) =>
     includePaymethods.includes(p.gateway),

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/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}