ordering-ui-react-native 0.17.98 → 0.17.99-release

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

@@ -4,6 +4,7 @@ import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
 import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,28 +66,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -134,7 +134,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

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

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

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

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

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

@@ -7,7 +7,7 @@ import { Wrapper } from './styles'
 
 import { PhoneInputParams } from '../../../../../src/types';
 import { OText } from '../shared';
-import {transformCountryCode} from '../../../../../src/utils'
+import { transformCountryCode, verifyCountryCode } from '../../../../../src/utils'
 import {I18nManager} from 'react-native'
 import { useTheme } from 'styled-components/native';
 
@@ -89,7 +89,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
         containerStyle={{ width: '100%' }}
         ref={phoneInput}
         defaultValue={userphoneNumber || defaultValue}
-        defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
+        defaultCode={defaultCode ? transformCountryCode(defaultCode) : verifyCountryCode(configs?.default_country_code?.value)}
         onChangeFormattedText={(text : string) => handleChangeNumber(text)}
         withDarkTheme
         textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}

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

@@ -10,8 +10,6 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -79,19 +77,17 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
-  iconProps?: IconProps;
-  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
+      <StyledButtonDisabled style={props.style}>
+        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+          {props.text}
+        </StyledTextDisabled>
+      </StyledButtonDisabled>
       </View>
     );
   }
@@ -115,15 +111,6 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
-        {props.iconProps ? (
-          <>
-            {props?.IconCustom ? (
-              <props.IconCustom {...props.iconProps} />
-            ) : (
-              <AntDesignIcon {...props.iconProps} />
-            )}
-          </>
-        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}

package/themes/original/index.tsx

@@ -96,9 +96,10 @@ import { LogoutButton } from './src/components/LogoutButton';
 import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { WalletTransactionItem } from './src/components/WalletTransactionItem';
 import { Promotions } from './src/components/Promotions'
-import { PageBanner } from './src/components/PageBanner'
 import { MultiCart } from './src/components/MultiCart'
+import { PageBanner } from './src/components/PageBanner'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
+import { DatePickerUI } from './src/components/DatePicker'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
 
@@ -263,7 +264,7 @@ export {
 	Promotions,
 	PageBanner,
 	MyOrders,
-  MultiCart,
+	MultiCart,
 	ORDER_TYPES,
 	USER_TYPE,
 
@@ -340,5 +341,8 @@ export {
 	_retrieveStoreData,
 	_setStoreData,
 	_removeStoreData,
-	_clearStoreData
+	_clearStoreData,
+
+	// Date Picker
+	DatePickerUI
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import FastImage from 'react-native-fast-image'
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import {
 	AddressDetails as AddressDetailsController,
 	useOrder,
@@ -21,6 +22,14 @@ const AddressDetailsUI = (props: any) => {
 	const [, t] = useLanguage();
 	const { width } = useWindowDimensions();
 
+	const styles = StyleSheet.create({
+		productStyle: {
+			width: width,
+			height: 151,
+			marginVertical: 10
+		}
+	})
+
 	return (
 		<ADContainer>
 			<ADHeader>
@@ -34,10 +43,17 @@ const AddressDetailsUI = (props: any) => {
 					</OText>
 				)}
 			</ADHeader>
-			{!!apiKey && (
+			{!!apiKey && googleMapsUrl && (
 				<ADMap
 					style={{ marginStart: -40, marginEnd: -40, width: width, flex: 1 }}>
-					<OIcon url={googleMapsUrl} height={151} width={width} />
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: googleMapsUrl,
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
 				</ADMap>
 			)}
 			<ADAddress>

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

@@ -16,6 +16,8 @@ import {
 	useToast,
 	ToastType
 } from 'ordering-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
 import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
@@ -38,6 +40,8 @@ import {
 import { GPSButton } from '../GPSButton';
 import { ScrollView } from 'react-native-gesture-handler';
 
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const inputNames = [
 	{ name: 'address', code: 'Address' },
 	{ name: 'internal_number', code: 'Internal number' },
@@ -62,9 +66,12 @@ const AddressFormUI = (props: AddressFormParams) => {
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
+		businessSlug
 	} = props;
 
 	const theme = useTheme();
+	const [orientationState] = useDeviceOrientation();
+
 	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const tagsName = [
@@ -74,6 +81,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 		{ icon: theme.images.general.tag_plus, value: 'other' },
 	];
 
+	const HEIGHT_SCREEN = orientationState?.dimensions?.height
+
 	const styles = StyleSheet.create({
 		iconContainer: {
 			display: 'flex',
@@ -113,8 +122,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingHorizontal: 40 }
-			: { paddingVertical: 20, paddingHorizontal: 40 }
+			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 40, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();
@@ -162,12 +171,11 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const countryCode = configState?.configs?.country_autocomplete?.value
 	const isHideMap = theme?.address?.components?.map?.hidden
 	const isHideIcons = theme?.address?.components?.icons?.hidden
-	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
+	const continueAsGuest = () => navigation.navigate(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const getAddressFormatted = (address: any) => {
 		const data: any = { address: null, error: null };
-		Geocoder.init(googleMapsApiKey);
 		Geocoder.from(address)
 			.then((json) => {
 				if (json.results && json.results?.length > 0) {
@@ -343,6 +351,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 			map_data: { library: 'google', place_id: data.place_id },
 			zip_code: data?.zip_code || null,
 		};
+		if (googleInput?.current) {
+			googleInput?.current?.setAddressText(addressSelected.address);
+		}
 		updateChanges(addressSelected);
 	};
 
@@ -425,16 +436,16 @@ const AddressFormUI = (props: AddressFormParams) => {
 		if (isEditing) {
 			if (formState?.changes?.location) {
 				const prevLocation = {
-					lat: Math.trunc(locationChange.lat),
-					lng: Math.trunc(locationChange.lng),
+					lat: locationChange?.lat?.toFixed(5),
+					lng: locationChange?.lng?.toFixed(5),
 				};
 				const newLocation = {
-					lat: Math.trunc(formState?.changes?.location?.lat),
-					lng: Math.trunc(formState?.changes?.location?.lng),
+					lat: formState?.changes?.location?.lat?.toFixed(5),
+					lng: formState?.changes?.location?.lng?.toFixed(5),
 				};
 				if (
-					prevLocation.lat !== newLocation.lat &&
-					prevLocation.lng !== newLocation.lng
+					prevLocation?.lat !== newLocation?.lat &&
+					prevLocation?.lng !== newLocation?.lng
 				) {
 					setLocationChange(formState?.changes?.location);
 				}
@@ -479,6 +490,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		}
 	}, []);
 
+	useEffect(() => {
+		Geocoder.init(googleMapsApiKey);
+	}, [googleMapsApiKey]);
+
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener(
 			'keyboardDidShow',
@@ -516,14 +531,14 @@ const AddressFormUI = (props: AddressFormParams) => {
 					titleAlign={'center'}
 					onActionLeft={goToBack}
 					showCall={false}
-					btnStyle={{ paddingLeft: 0 }}
-					style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
-					titleWrapStyle={{ paddingHorizontal: 0 }}
-					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+					btnStyle={{ paddingLeft: 0, paddingRight: 5 }}
+					style={{ marginTop: Platform.OS === 'ios' ? 0 : 10 }}
+					titleWrapStyle={{ paddingHorizontal: 0, width: '100%' }}
+					titleStyle={{ marginRight: 0, marginLeft: 0, paddingRight: 5 }}
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
+				<AddressFormContainer style={{ overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>
@@ -628,6 +643,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													}
 												}}
 												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+												isIntGeoCoder
 											/>
 										</View>
 									)}
@@ -649,6 +665,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 											saveLocation={saveMapLocation}
 											setSaveLocation={setSaveMapLocation}
 											handleToggleMap={handleToggleMap}
+											isIntGeoCoder
 										/>
 									</GoogleMapContainer>
 								</View>
@@ -859,6 +876,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									saveLocation={saveMapLocation}
 									setSaveLocation={setSaveMapLocation}
 									handleToggleMap={handleToggleMap}
+									isIntGeoCoder
 								/>
 							</GoogleMapContainer>
 						)}

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

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
-import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
+import { AddressList as AddressListController, useLanguage, useOrder } from 'ordering-components/native'
 import { AddressItem, Container } from './styles'
 import { Platform, RefreshControl, StyleSheet, View } from 'react-native'
-import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
+import { OButton, OText, OAlert, OIcon } from '../shared'
 import { AddressListParams } from '../../types'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
@@ -18,12 +18,10 @@ const AddressListUI = (props: AddressListParams) => {
 		route,
 		addressList,
 		isFromProfile,
-		nopadding,
 		handleSetDefault,
 		handleDelete,
 		setAddressList,
 		isGoBack,
-		actionStatus,
 		isFromBusinesses,
 		isFromProductsList,
 		afterSignup,
@@ -34,7 +32,6 @@ const AddressListUI = (props: AddressListParams) => {
 
 	const [orderState] = useOrder()
 	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
 	const [refreshing] = useState(false);
 
 	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
@@ -296,8 +293,8 @@ const AddressListUI = (props: AddressListParams) => {
 							<OButton
 								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
 								imgRightSrc=''
-								bgColor={theme.colors.white}
-								textStyle={{ color: theme.colors.primary }}
+								bgColor={theme.colors.primary}
+								textStyle={{ color: theme.colors.white }}
 								style={styles.button}
 								borderColor={theme.colors.primary}
 								onClick={() => !afterSignup ? onNavigationRedirect(
@@ -346,7 +343,7 @@ const styles = StyleSheet.create({
 	},
 	button: {
 		marginTop: 30,
-		marginBottom: 0,
+		marginBottom: 30,
 		borderRadius: 7.6,
 		borderWidth: 1,
 		shadowOpacity: 0,