ordering-ui-react-native 0.8.3 → 0.8.7

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react'
-import { StyleSheet, View, TouchableOpacity, Keyboard, TouchableWithoutFeedback, Platform } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, Keyboard, TouchableWithoutFeedback } from 'react-native'
 import { AddressForm as AddressFormController, useLanguage, useConfig, useSession, useOrder, ToastType, useToast } from 'ordering-components/native'
 import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
 import Spinner from 'react-native-loading-spinner-overlay';
@@ -13,14 +13,6 @@ import { AddressFormParams } from '../../types'
 import { getTraduction } from '../../utils'
 import { GoogleMap } from '../GoogleMap'
 import NavBar from '../NavBar'
-import Geolocation from '@react-native-community/geolocation';
-
-import {
-	PERMISSIONS,
-	PermissionStatus,
-	request,
-	openSettings,
-  } from 'react-native-permissions';
 
 import {
 	AddressFormContainer,
@@ -132,49 +124,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const continueAsGuest = () => navigation.navigate('BusinessList')
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
-	const requestLocationPermission = async () => {
-		let permissionStatus: PermissionStatus;
-		if (Platform.OS === 'ios') {
-		  permissionStatus = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
-		} else {
-		  permissionStatus = await request(
-			PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
-		  );
-		}
-
-		if (permissionStatus === 'denied') {
-		  openSettings();
-		}
-		getOneTimeLocation();
-	  };
-
-	const getOneTimeLocation = () => {
-		Geolocation.getCurrentPosition( (position) => {
-		  getAddressFormatted({
-							latitude: position.coords.latitude,
-							longitude: position.coords.longitude
-		  })
-		},(error) => {
-			console.log(error.message);
-		},
-		{
-			enableHighAccuracy: false,
-			timeout: 30000,
-			maximumAge: 1000
-		});
-	};
-
 	const getAddressFormatted = (address: any) => {
 		const data: any = { address: null, error: null }
-		const isObjet = typeof address === 'object';
-		const filterAddressInfo = [
-			{ tag: 'street_number', isShort: true },
-			{ tag: 'route', isShort: true },
-			{ tag: 'locality', isShort: true },
-			{ tag: 'administrative_area_level_1', isShort: false },
-			{ tag: 'country', isShort: false },
-		]
-   		let addressValue: any = [];
 		Geocoder.init(googleMapsApiKey);
 		Geocoder.from(address)
 			.then((json: any) => {
@@ -182,18 +133,11 @@ const AddressFormUI = (props: AddressFormParams) => {
 					let postalCode = null
 					for (const component of json.results?.[0].address_components) {
 						const addressType = component.types?.[0]
-						if (typeof address === 'object') {
-							for (const filterProps of filterAddressInfo)  {
-							  if(filterProps.tag.includes(addressType)) {
-								addressValue.push(filterProps.isShort ? component.short_name : component.long_name)
-							  }
-							}
-						}
 						if (addressType === 'postal_code') {
 							postalCode = component.short_name
+							break
 						}
 					}
-					isObjet ? address = addressValue.join(', ') : address
 					data.address = {
 						address,
 						location: json.results[0].geometry.location,
@@ -533,9 +477,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 								/>
 								{((!isInputFocused && curInpVal.length > 0) || (curInpVal.length == 0)) && (
 									<View style={{ position: 'absolute', zIndex: 100, top: 10, end: 10 }}>
-										<TouchableOpacity onPress={requestLocationPermission}>
 										<OIcon src={theme.images.general.pin_line} width={16} color={theme.colors.primary} />
-										</TouchableOpacity>
 									</View>
 								)}
 							</AutocompleteInput>

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

@@ -156,17 +156,20 @@ const AddressListUI = (props: AddressListParams) => {
 		<Container>
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile)) && (
 				<AddressListContainer>
+					{isFromProfile && (
+						<OText size={16} mBottom={20} weight={'600'}>{t('SAVED_PLACES', 'My saved places')}</OText>
+					)}
 					{
 						route &&
 						(
 							route?.params?.isFromBusinesses ||
 							route?.params?.isFromCheckout ||
-							route?.params?.isFromProductsList ||
-							route?.params?.isFromProfile
+							route?.params?.isFromProductsList
 						) &&
+						!isFromProfile &&
 						(
 							<NavBar
-								title={route?.params?.isFromProfile ? t('SAVED_PLACES', 'My saved places') : t('ADDRESS_LIST', 'Address List')}
+								title={t('ADDRESS_LIST', 'Address List')}
 								titleAlign={'center'}
 								onActionLeft={() => goToBack()}
 								showCall={false}

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

@@ -1,15 +1,16 @@
 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 } from 'react-native';
+import { StyleSheet, View, Dimensions, TextStyle, Animated, PanResponder, KeyboardAvoidingView, Platform } from 'react-native';
 import { OBottomPopup, OButton, OIcon, OText } from '../shared';
-import { LogoWrapper, Slogan } from './styles';
+import { BottomPopup, LogoWrapper, Slogan } from './styles';
 import { LanguageSelector } from '../LanguageSelector'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { _setStoreData, _removeStoreData } from '../../providers/StoreUtil';
 import { ScrollView } from 'react-native-gesture-handler';
 import { LoginForm } from '../LoginForm';
 import { SignupForm } from '../SignupForm';
+import Modal from 'react-native-modal';
 
 const windowHeight = Dimensions.get('window').height
 
@@ -212,20 +213,40 @@ export const Home = (props: any) => {
 			</View>
 
 
-			<OBottomPopup
-				title={t('LOG_IN', 'Log in')}
-				open={openLogin}
-				onClose={() => handleLoginPage()}
+			<Modal
+				isVisible={openLogin}
+				coverScreen={false}
+				onModalHide={handleLoginPage}
+				onSwipeComplete={handleLoginPage}
+				onBackdropPress={handleLoginPage}
+				style={styles.bottomModalStyle}
 			>
-				<LoginForm {...loginProps} />
-			</OBottomPopup>
-			<OBottomPopup
-				title={t('SIGN_UP', 'Sign up')}
-				open={openSignUp}
-				onClose={() => handleSignUpPage()}
+				<BottomPopup>
+					<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} style={{flex: 0, justifyContent: 'flex-end'}}>
+						<ScrollView style={{backgroundColor: 'white', overflow: 'visible'}} showsVerticalScrollIndicator={false}>
+							<OText size={20} lineHeight={30} weight={'600'} mBottom={20}>{t('LOGIN', 'Login')}</OText>
+							<LoginForm {...loginProps} />
+						</ScrollView>
+					</KeyboardAvoidingView>
+				</BottomPopup>
+			</Modal>
+			<Modal
+				isVisible={openSignUp}
+				coverScreen={false}
+				onModalHide={handleSignUpPage}
+				onSwipeComplete={handleSignUpPage}
+				onBackdropPress={handleSignUpPage}
+				style={styles.bottomModalStyle}
 			>
-				<SignupForm {...signupProps} />
-			</OBottomPopup>
+				<BottomPopup>
+					<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} style={{flex: 0, justifyContent: 'flex-end'}}>
+						<ScrollView style={{backgroundColor: 'transparent', overflow: 'visible'}} showsVerticalScrollIndicator={false}>
+							<OText size={20} lineHeight={30} weight={'600'} mBottom={20}>{t('SIGN_UP', 'Sign up')}</OText>
+							<SignupForm {...signupProps} />
+						</ScrollView>
+					</KeyboardAvoidingView>
+				</BottomPopup>
+			</Modal>
 		</>
 	);
 };
@@ -288,4 +309,8 @@ const styles = StyleSheet.create({
 		borderTopLeftRadius: 12,
 		paddingHorizontal: 40
 	},
+	bottomModalStyle: {
+		justifyContent: 'flex-end',
+		margin: 0
+	}
 });

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

@@ -16,3 +16,10 @@ export const Slogan = styled.View`
   align-items: center;
   margin-bottom: 10px;
 `;
+
+export const BottomPopup = styled.View`
+  padding: 40px 40px 0;
+  background-color: white;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+`;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Pressable, StyleSheet, View, Keyboard, Animated } from 'react-native';
+import { Pressable, StyleSheet, View, Keyboard, Animated, Platform } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber'
@@ -257,7 +257,7 @@ const LoginFormUI = (props: LoginParams) => {
 					{(useLoginByCellphone || useLoginByEmail) && (
 						<FormInput>
 							{useLoginByEmail && loginTab === 'email' && (
-								<View style={loginStyle.inputWrap}>
+								<View style={{...loginStyle.inputWrap, marginBottom: Platform.OS == 'android' ? 18 : 0}}>
 									<Controller
 										control={control}
 										render={({ onChange, value }: any) => (
@@ -408,7 +408,7 @@ const LoginFormUI = (props: LoginParams) => {
 						{t('MOBILE_FRONT_ALREADY_DONT_HAVE_AN_ACCOUNT', 'Don\'t have an account?')}
 					</OText>
 					<Pressable onPress={() => onHandleOpenSignup()}>
-						<OText style={{ ...theme.labels.normal, marginStart: 5, fontWeight: '600' }} color={theme.colors.primary}>
+						<OText style={{ ...theme.labels.normal, marginLeft: 5, fontWeight: '600' }} color={theme.colors.primary}>
 							{registerButtonText}
 						</OText>
 					</Pressable>

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

@@ -1,8 +1,6 @@
 import styled, { css } from 'styled-components/native';
 
-export const Container = styled.View`
-  flex-grow: 1;
-`
+export const Container = styled.View``
 
 export const FormSide = styled.View`
   width: 100%;

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

@@ -7,11 +7,11 @@ import { OIcon, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 
 const LogoutButtonUI = (props: any) => {
-  const { handleLogoutClick, formState } = props
+  const { handleLogoutClick, formState, showText, iconStyle } = props
 
   const theme = useTheme();
   const [, { showToast }] = useToast();
-  const [, t] = useLanguage();
+  const [, t] = useLanguage()
 
   const handleClick = async () => {
     const data = await _retrieveStoreData('notification_state');
@@ -35,15 +35,16 @@ const LogoutButtonUI = (props: any) => {
   return (
     <TouchableOpacity
       onPress={() => handleClick()}
-      style={{ flexDirection: 'row', alignItems: 'center' }}
+      style={{flexDirection: 'row', marginHorizontal: 2}}
     >
       <OIcon
         src={theme.images.general.menulogout}
-        width={24}
-        height={24}
+        width={28}
+        height={28}
         color={theme.colors.disabledContrast}
+        style={iconStyle}
       />
-      <OText style={{ paddingHorizontal: 10 }}>{t('LOGOUT', 'Logout')}</OText>
+      {showText && <OText mLeft={12} mRight={12}>{t('LOGOUT', 'LogOut')}</OText>}
     </TouchableOpacity>
   )
 }

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

@@ -1,15 +1,17 @@
-import React, { useState } from 'react';
-import { ImageSourcePropType, Platform } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { ImageSourcePropType, ImageStyle, Platform, StyleSheet } from 'react-native';
 import Share from 'react-native-share';
-import { OIcon, OIconButton, OText } from '../shared';
-import { FavItem, FavMenu, FavMenuItem } from './styles';
+import { OIcon } from '../shared';
+import { FavItem, FavMenu } from './styles';
 import { useTheme } from 'styled-components/native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
+import { ToastType, useToast } from 'ordering-components/native';
 
 interface SSFTypes {
 	icon?: ImageSourcePropType,
 	mode?: 'dropdown' | 'sheets',
 	data?: {url?: string, image?: string, msg?: string},
+	style?: ImageStyle
 }
 
 const SAppName = {
@@ -23,9 +25,10 @@ const SAppName = {
 };
 
 const SocialShareFav = (props: SSFTypes) => {
-	const { icon, mode, data } = props;
+	const { icon, mode, data, style } = props;
 
 	const theme = useTheme();
+	const [, { showToast }] = useToast();
 
 	const SApps: Array<any> = [
 		{
@@ -73,44 +76,68 @@ const SocialShareFav = (props: SSFTypes) => {
 	];
 
 	const [showMenu, setShowMenu] = useState(false);
+	const [result, setResult] = useState<{success: boolean, message: string}>({success: true, message: ''});
+
+	const getErrorString = (error: any, defaultValue?: any) => {
+    let e = defaultValue || 'Something went wrong. Please try again';
+    if (typeof error === 'string') {
+      e = error;
+    } else if (error && error.message) {
+      e = error.message;
+    } else if (error && error.props) {
+      e = error.props;
+    }
+    return e;
+  }
 
 	const onShare = async (social: any) => {
 		const options = {
-			title: 'Share Ordering App',
-			message: data?.msg ? `${data.msg}` : ``,
-			url: data?.url ? `${data?.url}` : `https://ordering.co`,
+			title: 'Share via',
+			message: 'Awesome Restaurant!, Please enjoy your meal ;)',
+			url: 'https://www.ordering.co',
 			social: social,
-			whatsAppNumber: "9199999999",  // country code + phone number
+			whatsAppNumber: "8615640383320",  // country code + phone number
 			// filename: 'test' , // only for base64 file in Android
 		}
-		const shareResult = await Share.shareSingle(options);
+		setShowMenu(false);
+		try {
+      const shareResult = await Share.shareSingle(options);
+      setResult({success: shareResult.success, message: shareResult.message});
+    } catch (error) {
+      setResult({success: false, message: 'error: '.concat(getErrorString(error, `Wrong ${social} configuration!`))});
+    }
 	}
 
 	const onOpenMenu = () => {
 		setShowMenu(!showMenu);
 	}
 
+	useEffect(() => {
+		if (result.message.length < 3) return;
+		if (result.success) {
+			showToast(ToastType.Success, result.message);
+		} else {
+			showToast(ToastType.Error, result.message);
+		}
+	}, [result])
+
 	return (
 		<>
 		<FavItem onPress={onOpenMenu}>
-			<OIcon src={icon} width={17} />
+			<OIcon src={icon} style={style} />
 		</FavItem>
 		{showMenu && 
 			<FavMenu>
 				{SApps.map(({name, social, icon, color}) => 
 					<React.Fragment key={name}>
 					{name === SAppName.LINKEDIN ? Platform.OS === 'android' ? 
-					 	<FavMenuItem>
-							<TouchableOpacity key={name} onPress={() => onShare(social)}>
-								<OIcon src={icon} color={color} />
-							</TouchableOpacity>
-						 </FavMenuItem>
+					 	<TouchableOpacity key={name} style={favStyles.itemBtn} onPress={() => onShare(social)}>
+							<OIcon src={icon} color={color} />
+						</TouchableOpacity>
 					 : null :
-					 <FavMenuItem>
-					 	<TouchableOpacity key={name} onPress={() => onShare(social)}>
+					 	<TouchableOpacity key={name} style={favStyles.itemBtn} onPress={() => onShare(social)}>
 							<OIcon src={icon} color={color} />
 						</TouchableOpacity>
-					 </FavMenuItem>
 					 }
 					</React.Fragment>
 				)}
@@ -120,4 +147,14 @@ const SocialShareFav = (props: SSFTypes) => {
 	)
 }
 
+const favStyles = StyleSheet.create({
+	itemBtn: {
+		borderRadius: 7.6,
+		marginBottom: 4,
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundColor: 'white'
+	}
+});
+
 export default SocialShareFav;

package/themes/instacart/src/components/SocialShare/styles.ts

@@ -18,11 +18,3 @@ export const FavMenu = styled.View`
 	width: 50px;
 	height: 170px;
 `;
-
-export const FavMenuItem = styled.View`	
-	border-radius: 7.6px;
-	margin-bottom: 4px;
-	justify-content: center;
-	align-items: center;
-	background-color: white;
-`;

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

@@ -99,7 +99,7 @@ export const UserProfileForm = (props: ProfileParams) => {
           <Ionicons name='globe-outline' style={styles.iconStyle} />
           <LanguageSelector />
         </LanguageContainer>
-        <LogoutButton />
+        <LogoutButton iconStyle={{width: 20, height: 20}} showText />
       </View>
     </Container>
   );

package/themes/instacart/src/components/shared/OIcon.tsx

@@ -52,7 +52,8 @@ OImage.defaultProps = {
 
 const areEqual=(prevProps: { src?: any; color?: string; }, nextProps: { src?: any; color?: string; })=>{
   // return false prevProps.text & nextProps.text are not equal.
-  return prevProps.color === nextProps.color || prevProps.src === nextProps.src
+	console.log('PreviewColor: '+prevProps.color, 'NextColor: '+nextProps.color);
+  return prevProps.color === nextProps.color && prevProps.src === nextProps.src
   // else all are equal, no re-render
   return true
 }

package/themes/instacart/src/layouts/Container.tsx

@@ -20,7 +20,7 @@ export const Container = (props: any) => {
 					{props.children}
 				</View>
 			) : (
-				<ContainerStyled keyboardShouldPersistTaps='handled' style={{ padding: props.nopadding ? 0 : 20, paddingTop: 0 }}>
+				<ContainerStyled keyboardShouldPersistTaps='handled' {...props} style={{ padding: props.nopadding ? 0 : 40, paddingTop: 0 }}>
 					{props.children}
 				</ContainerStyled>
 			)}

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

@@ -408,26 +408,26 @@ export interface AccountParams {
 	toggleIsEdit?: any;
 	validationFields?: any;
 	handleButtonUpdateClick?: any;
-  }
+}
   
-  export interface HelpParams {
+export interface HelpParams {
 	navigation: any;
-  }
+}
   
-  export interface LastOrdersParams {
+export interface LastOrdersParams {
 	orderList?: any,
 	onRedirect?: any,
-  }
+}
   
-  export interface HelpOrderParams {
+export interface HelpOrderParams {
 	navigation: any;
-  }
+}
   
-  export interface HelpGuideParams {
+export interface HelpGuideParams {
 	navigation: any;
-  }
+}
   
-  export interface HelpAccountAndPaymentParams {
+export interface HelpAccountAndPaymentParams {
 	navigation: any;
-  }
-  
+}
+