ordering-ui-react-native 0.11.25 → 0.11.26

package/package.json

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

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