ordering-ui-react-native 0.11.30 → 0.11.34

package/package.json

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

package/src/components/BusinessTypeFilter/index.tsx

@@ -35,7 +35,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
       alignItems: 'center',
     },
     categoryStyle: {
-      width: isOpenAllCategories ? windowWidth / 3 - 27 : windowWidth / 4 - 20,
+      width: isOpenAllCategories ? windowWidth / 3 - 27 : windowWidth / 4 - 10,
       height: 150,
       flexDirection: 'column',
       justifyContent: 'center',

package/src/components/Checkout/index.tsx

@@ -119,9 +119,7 @@ const CheckoutUI = (props: any) => {
   const [userErrors, setUserErrors] = useState<any>([]);
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
-  const [prog, setProg] = useState(true);
   const [showGateway, setShowGateway] = useState<any>({closedByUsed: false, open: false});
-  const [progClr, setProgClr] = useState('#424242');
   const [paypalMethod, setPaypalMethod] = useState<any>(null)
 
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -130,7 +128,6 @@ const CheckoutUI = (props: any) => {
 
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
-  
   const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
 
   const handlePlaceOrder = () => {
@@ -205,8 +202,12 @@ const CheckoutUI = (props: any) => {
   }
 
   const handlePaymentMethodClick = (paymethod : any) => {
-      setShowGateway({closedByUser: false, open: true})
-      setPaypalMethod(paymethod)
+    setShowGateway({closedByUser: false, open: true})
+    setPaypalMethod(paymethod)
+  }
+
+  const handleCloseWebview = () => {
+    setShowGateway({open: false, closedByUser: true})
   }
 
   useEffect(() => {
@@ -558,9 +559,9 @@ const CheckoutUI = (props: any) => {
       )}
       <OModal
         open={paypalMethod && showGateway.open}
-        onCancel={() => setShowGateway({open: false, closedByUser: true})}
-        onAccept={() => setShowGateway({open: false, closedByUser: true})}
-        onClose={() => setShowGateway({open: false, closedByUser: true})}
+        onCancel={handleCloseWebview}
+        onAccept={handleCloseWebview}
+        onClose={handleCloseWebview}
         entireModal
       >
         <OText
@@ -573,9 +574,6 @@ const CheckoutUI = (props: any) => {
           }}>
           {t('PAYPAL_GATEWAY', 'PayPal GateWay')}
         </OText>
-        <View style={{padding: 13, opacity: prog ? 1 : 0}}>
-          <ActivityIndicator size={24} color={progClr} />
-        </View>
         <WebView
           source={{ uri: `${ordering.root}/html/paypal_react_native` }}
           onMessage={onMessage}
@@ -585,18 +583,6 @@ const CheckoutUI = (props: any) => {
           cacheEnabled={false}
           cacheMode='LOAD_NO_CACHE'
           style={{ flex: 1 }}
-          onLoadStart={() => {
-            setProg(true);
-            setProgClr('#424242');
-          }}
-          onLoadProgress={() => {
-            setProg(true);
-            setProgClr('#00457C');
-          }}
-          onLoad={() => {
-            setProg(true);
-            setProgClr('#00457C');
-          }}
           onLoadEnd={(e) => {
             const message = {
               action: 'init',
@@ -614,7 +600,6 @@ const CheckoutUI = (props: any) => {
                 clientId: paypalMethod?.credentials?.client_id
               }
             }
-            setProg(false);
             webviewRef.current.postMessage(JSON.stringify(message))
           }}
         />

package/src/components/CouponControl/index.tsx

@@ -30,7 +30,7 @@ const CouponControlUI = (props: any) => {
       borderColor: theme.colors.secundaryContrast,
       borderRadius: 50,
       flex: 1,
-      marginRight: 30
+      marginRight: 20
     },
   });
 
@@ -102,7 +102,8 @@ const CouponControlUI = (props: any) => {
             onClick={() => handleButtonApplyClick()}
             bgColor={theme.colors.primary}
             borderColor={theme.colors.primary}
-            textStyle={{color: 'white'}}
+            textStyle={{ color: 'white', fontSize: 18, maxWidth: 110, minWidth: 60 }}
+            textProps={{numberOfLines: 1}}
             imgRightSrc={null}
             text={t('APPLY', 'Apply')}
             isDisabled={!couponInput}

package/src/components/DriverTips/index.tsx

@@ -118,8 +118,9 @@ const DriverTipsUI = (props: any) => {
               text={t('APPLY_TIP', 'Apply Tip')}
               bgColor={theme.colors.primary}
               borderColor={theme.colors.primary}
-              textStyle={{ color: 'white', fontSize: 20 }}
+              textStyle={{ color: 'white', fontSize: 18, maxWidth: 110, minWidth: 60 }}
               imgRightSrc={null}
+              textProps={{numberOfLines: 1}}
               isDisabled={!(value > 0 && value !== driverTip) || !value}
               onClick={() => {
                 handlerChangeOption(value)

package/src/components/ProductItemAccordion/styles.tsx

@@ -73,9 +73,9 @@ export const SelectItemBtn = styled(SelectItem)`
   border-width: 1px;
   border-color: transparent;
   border-radius: 10px;
-  width: 70px;
+  width: 65px;
   max-width: 140px;
   margin-vertical: 5px;
-  padding: 15px 20px;
+  padding: 15px;
   background-color: ${(props: any) => props.theme.colors.inputDisabled};
 `

package/src/components/shared/OButton.tsx

@@ -77,6 +77,7 @@ interface Props {
   borderColor?: string;
   loadingStyle?: ViewStyle;
   theme?: any;
+  textProps?: any
 }
 
 const OButton = (props: Props): React.ReactElement => {
@@ -84,7 +85,7 @@ const OButton = (props: Props): React.ReactElement => {
     return (
       <View style={props.parentStyle}>
       <StyledButtonDisabled style={props.style}>
-        <StyledTextDisabled style={props.textStyle}>
+        <StyledTextDisabled style={props.textStyle} {...props.textProps}>
           {props.text}
         </StyledTextDisabled>
       </StyledButtonDisabled>
@@ -112,7 +113,7 @@ const OButton = (props: Props): React.ReactElement => {
           <StyledImage style={{transform: [{scaleX: I18nManager.isRTL ? -1 : 1}], ...props.imgLeftStyle}} source={props.imgLeftSrc} />
         ) : null}
         {props.text ? (
-          <StyledText style={props.textStyle}>{props.text}</StyledText>
+          <StyledText style={props.textStyle} {...props.textProps}>{props.text}</StyledText>
         ) : null}
         {props.imgRightSrc ? (
           <EndImage style={props.imgRightStyle} source={props.imgRightSrc} />

package/src/config.json

@@ -2,7 +2,7 @@
   "app_id": "react-native-app",
   "notification_app": "orderingapp",
   "app_name": "Ordering",
-  "project": "reactdemo",
+  "project": "luisv4",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/themes/instacart/src/components/AddressForm/index.tsx

@@ -13,6 +13,7 @@ import { AddressFormParams } from '../../types'
 import { getTraduction } from '../../utils'
 import { GoogleMap } from '../GoogleMap'
 import NavBar from '../NavBar'
+import { Container } from '../../layouts/Container';
 
 import {
 	AddressFormContainer,
@@ -398,13 +399,13 @@ const AddressFormUI = (props: AddressFormParams) => {
 	}, [])
 
 	return (
-		<>
+		<Container>
 			<NavBar
 				title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
 				titleAlign={'center'}
 				onActionLeft={goToBack}
 				showCall={false}
-				style={{ paddingHorizontal: 14 }}
+				style={{ paddingHorizontal: 0, marginHorizontal: -7 }}
 			/>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
 				<AddressFormContainer
@@ -650,7 +651,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 					<Spinner visible={saveMapLocation} />
 				</AddressFormContainer>
 			</TouchableWithoutFeedback>
-		</>
+		</Container>
 	)
 }
 

package/themes/instacart/src/components/AddressForm/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const AddressFormContainer = styled.View`
   flex: 1;
-  padding: 5px 40px;
+  padding-vertical: 5px;
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
   justify-content: space-between;
 `

package/themes/instacart/src/components/ForgotPasswordForm/index.tsx

@@ -88,9 +88,9 @@ const ForgotPasswordUI = (props: any) => {
 			onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 			showCall={false}
 			paddingTop={0}
-			style={{paddingStart: 20}}
+			btnStyle={{marginStart: -6, paddingEnd: 10}}
 		/>
-		<Container style={{ paddingHorizontal: 20}}>
+		<Container>
 			<FormSide>
 				<OText
 					color={theme.colors.textSecondary}

package/themes/instacart/src/components/Home/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useLanguage, useOrder, useApi, useSession, useUtils } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, View, Dimensions, TextStyle, Animated, PanResponder, KeyboardAvoidingView, Platform } from 'react-native';
+import { StyleSheet, View, Dimensions, TextStyle, Animated, PanResponder, KeyboardAvoidingView, Platform, BackHandler } from 'react-native';
 import { OBottomPopup, OButton, OIcon, OText } from '../shared';
 import { BottomPopup, LogoWrapper, Slogan } from './styles';
 import { LanguageSelector } from '../LanguageSelector'
@@ -11,6 +11,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { LoginForm } from '../LoginForm';
 import { SignupForm } from '../SignupForm';
 import Modal from 'react-native-modal';
+import { useFocusEffect } from '@react-navigation/core';
 
 const windowHeight = Dimensions.get('window').height
 
@@ -151,6 +152,25 @@ export const Home = (props: any) => {
 		resetPositionAnim.start();
 	}, [])
 
+	useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        if (openLogin) {
+          setOpenLogin(false)
+          return true;
+        } else if (openSignUp) {
+          setOpenSignUp(false)
+          return true;
+        } else {
+          return false;
+        }
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [openLogin, openSignUp])
+  );
+
 	return (
 		<>
 			<View style={styles.container}>

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

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

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

@@ -90,7 +90,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         <Container nopadding nestedScrollEnabled>
           <View style={{ paddingTop: 20 }}>
             <NavBar
-              title={t('CATEGORY', 'Category')}
+              title={t('CATEGORY_X_ID', 'Category')}
               onActionLeft={goToBack}
               rightComponent={cart && (
                 <TouchableOpacity

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

@@ -110,13 +110,13 @@ const CustomerName = (props: Props): React.ReactElement => {
           name="name"
           rules={{
             required: t(
-              'VALIDATION_ERROR_CUSTOMER_NAME_REQUIRED',
+              'VALIDATION_ERROR_REQUIRED',
               'The field Customer Name is required',
-            ).replace('_attribute_', t('CUSTOMER_NAME', 'Customer Name')),
+            ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
             pattern: {
               value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
               message: t(
-                'INVALID_ERROR_NAME',
+                'INVALID_ERROR',
                 'Invalid name',
               ).replace('_attribute_', t('NAME', 'Name')),
             }

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

@@ -160,7 +160,7 @@ const PaymentOptionsUI = (props: any) => {
             ),
             bgImage: theme.images.general.carddelivery,
             icon: theme.images.general.pushPin,
-            callToActionText: t("LET'S GO", "Let's go"),
+            callToActionText: t("LETS_GO", "Let's go"),
             onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
             ...supportedMethods[cardOnDeliveryIndex],
           }

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

@@ -5,6 +5,8 @@ import {
 	TouchableOpacity,
 	Keyboard,
 	TouchableWithoutFeedback,
+	KeyboardAvoidingView,
+	Platform,
 } from 'react-native';
 import {
 	AddressForm as AddressFormController,
@@ -35,6 +37,7 @@ import {
 	FormInput,
 } from './styles';
 import { GPSButton } from '../GPSButton';
+import { ScrollView } from 'react-native-gesture-handler';
 
 const inputNames = [
 	{ name: 'address', code: 'Address' },
@@ -94,6 +97,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 			marginBottom: 20,
 			height: 104,
 			maxHeight: 104,
+			minHeight: 104,
 			textAlignVertical: 'top',
 			alignItems: 'flex-start',
 		},
@@ -491,7 +495,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	}, [orderState.loading]);
 
 	return (
-		<>
+		<ScrollView>
 			<NavBar
 				title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
 				titleAlign={'center'}
@@ -759,29 +763,27 @@ const AddressFormUI = (props: AddressFormParams) => {
 								)}
 							/>
 						</FormInput>
-						{!isKeyboardShow && (
-							<IconsContainer>
-								{tagsName.map((tag) => (
-									<TouchableOpacity
-										key={tag.value}
-										onPress={() => handleAddressTag(tag.value)}>
-										<View
-											style={{
-												...styles.iconContainer,
-											}}>
-											<OIcon
-												src={tag.icon}
-												width={24}
-												color={
-													addressTag === tag.value ?
-														theme.colors.primary : theme.colors.disabled
-												}
-											/>
-										</View>
-									</TouchableOpacity>
-								))}
-							</IconsContainer>
-						)}
+						<IconsContainer>
+							{tagsName.map((tag) => (
+								<TouchableOpacity
+									key={tag.value}
+									onPress={() => handleAddressTag(tag.value)}>
+									<View
+										style={{
+											...styles.iconContainer,
+										}}>
+										<OIcon
+											src={tag.icon}
+											width={24}
+											color={
+												addressTag === tag.value ?
+													theme.colors.primary : theme.colors.disabled
+											}
+										/>
+									</View>
+								</TouchableOpacity>
+							))}
+						</IconsContainer>
 					</View>
 
 					<View>
@@ -841,7 +843,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 					<Spinner visible={saveMapLocation} />
 				</AddressFormContainer>
 			</TouchableWithoutFeedback>
-		</>
+		</ScrollView>
 	);
 };
 

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, KeyboardAvoidingView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 
 import {

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

@@ -31,7 +31,7 @@ const ForgotPasswordUI = (props: any) => {
 		inputStyle: {
 			marginBottom: 25,
 			borderWidth: 1,
-			borderColor: theme.theme.colors.border,
+			borderColor: theme.colors.border,
 			minHeight: 40,
 			borderRadius: 7.6,
 		}

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

@@ -176,7 +176,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   return (
     <>
       <MapView
-        provider={Platform.OS === "android" ? PROVIDER_GOOGLE : PROVIDER_DEFAULT}
+        provider={PROVIDER_GOOGLE}
         initialRegion={region}
         style={styles.map}
         onRegionChangeComplete={!readOnly ? (coordinates) => handleChangeRegion(coordinates) : () => { }}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, useWindowDimensions } from 'react-native';
+import { View, StyleSheet, useWindowDimensions, Keyboard } from 'react-native';
 import { useLanguage, useSession } from 'ordering-components/native';
 import {
 	StripeProvider,
@@ -35,6 +35,7 @@ const StripeElementsFormUI = (props: any) => {
 	const [createPmLoading, setCreatePmLoading] = useState(false);
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
+	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 
 	const billingDetails = {
 		name: `${user.name} ${user.lastname}`,
@@ -67,7 +68,7 @@ const StripeElementsFormUI = (props: any) => {
 			//       : error.message
 			//   );
 			// }
-		} catch (error) {
+		} catch (error: any) {
 			setErrors(error?.message || error?.toString());
 		}
 	}
@@ -95,7 +96,7 @@ const StripeElementsFormUI = (props: any) => {
 						: error.message
 				);
 			}
-		} catch (error) {
+		} catch (error: any) {
 			setErrors(error?.message || error?.toString());
 		}
 	};
@@ -111,8 +112,29 @@ const StripeElementsFormUI = (props: any) => {
 		}
 	}, [card])
 
+	useEffect(() => {
+		const keyboardDidShowListener = Keyboard.addListener(
+			'keyboardDidShow',
+			() => {
+				setIsKeyboardShow(true);
+				console.log('----- keyboard showing ----')
+			},
+		);
+		const keyboardDidHideListener = Keyboard.addListener(
+			'keyboardDidHide',
+			() => {
+				setIsKeyboardShow(false);
+				console.log('----- keyboard hidding ----')
+			},
+		);
+		return () => {
+			keyboardDidShowListener.remove();
+			keyboardDidHideListener.remove();
+		};
+	}, []);
+
 	return (
-		<View style={{ ...styles.container, ...{ height: height - top - bottom - 60 } }}>
+		<View style={{ ...styles.container, height: height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
 					<StripeProvider publishableKey={publicKey}>

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

@@ -10,7 +10,7 @@ import { useTheme } from 'styled-components/native';
 import { useForm } from 'react-hook-form';
 import { launchImageLibrary } from 'react-native-image-picker';
 import Spinner from 'react-native-loading-spinner-overlay';
-import { StyleSheet, View } from 'react-native';
+import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
 import { ProfileParams } from '../../types';
 import { UserFormDetailsUI } from '../UserFormDetails';
 
@@ -208,38 +208,39 @@ const ProfileUI = (props: ProfileParams) => {
 	}, [user?.country_phone_code]);
 
 	return (
-		<Container noPadding>
-			<NavBar
-				onActionLeft={() => navigation.goBack()}
-				btnStyle={{ paddingStart: 0 }}
-				title={t('ACCOUNT', 'Account')}
-				isVertical
-				style={styles.pagePadding}
-			/>
-			<CenterView style={styles.pagePadding}>
-				<View style={styles.photo}>
-					<OIcon
-						url={user?.photo}
-						src={!user?.photo && theme.images.general.user}
-						width={79}
-						height={79}
+		<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}}>
+			<Container noPadding>
+				<NavBar
+					onActionLeft={() => navigation.goBack()}
+					btnStyle={{ paddingStart: 0 }}
+					title={t('ACCOUNT', 'Account')}
+					isVertical
+					style={styles.pagePadding}
+				/>
+				<CenterView style={styles.pagePadding}>
+					<View style={styles.photo}>
+						<OIcon
+							url={user?.photo}
+							src={!user?.photo && theme.images.general.user}
+							width={79}
+							height={79}
+						/>
+					</View>
+					<OIconButton
+						icon={theme.images.general.camera}
+						borderColor={theme.colors.clear}
+						iconStyle={{ width: 16, height: 16 }}
+						style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center' }}
+						onClick={() => handleImagePicker()}
 					/>
+				</CenterView>
+				<View style={{ height: 8, marginLeft: -40, marginRight: -40, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
+				<Spinner visible={formState?.loading} />
+				<View style={styles.pagePadding}>
+					<UserFormDetailsUI {...props} isEdit />
 				</View>
-				<OIconButton
-					icon={theme.images.general.camera}
-					borderColor={theme.colors.clear}
-					iconStyle={{ width: 16, height: 16 }}
-					style={{ maxWidth: 40, position: 'absolute', bottom: -2, alignSelf: 'center' }}
-					onClick={() => handleImagePicker()}
-				/>
-			</CenterView>
-			<View style={{ height: 8, marginLeft: -40, marginRight: -40, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
-			<Spinner visible={formState?.loading} />
-			<View style={styles.pagePadding}>
-				<UserFormDetailsUI {...props} isEdit />
-			</View>
-
-		</Container>
+			</Container>
+		</KeyboardAvoidingView>
 	);
 };