ordering-ui-react-native 0.18.55 → 0.18.56-crash-driver-1

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

@@ -1,30 +1,40 @@
 import React from 'react';
 import FastImage from 'react-native-fast-image'
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import {
 	AddressDetails as AddressDetailsController,
 	useOrder,
 	useLanguage,
 } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
 
 import { ADContainer, ADHeader, ADAddress, ADMap } from './styles';
-
-import { useTheme } from 'styled-components/native';
-import { OText, OIcon } from '../shared';
-import { useWindowDimensions } from 'react-native';
+import { OText } from '../shared';
+import { getTypesText } from '../../utils';
 
 const AddressDetailsUI = (props: any) => {
-	const { navigation, addressToShow, isCartPending, googleMapsUrl, apiKey } =
-		props;
+	const {
+		navigation,
+		addressToShow,
+		isCartPending,
+		googleMapsUrl,
+		apiKey
+	} = props;
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
+	const [{ options }] = useOrder();
 	const [, t] = useLanguage();
 	const { width } = useWindowDimensions();
 
+	const orderTypeText = {
+		key: getTypesText(options?.type || 1),
+		value: t(getTypesText(options?.type || 1), 'Delivery')
+	}
+
 	const styles = StyleSheet.create({
 		productStyle: {
-			width: width,
+			width,
 			height: 151,
 			marginVertical: 10
 		}
@@ -39,13 +49,13 @@ const AddressDetailsUI = (props: any) => {
 						lineHeight={24}
 						color={theme.colors.textNormal}
 					>
-						{t('DELIVERY_ADDRESS', 'Delivery address')}
+						{t(`${orderTypeText.key}_ADDRESS`, `${orderTypeText.value} address`)}
 					</OText>
 				)}
 			</ADHeader>
 			{!!apiKey && googleMapsUrl && (
 				<ADMap
-					style={{ marginStart: -40, marginEnd: -40, width: width, flex: 1 }}>
+					style={{ width, flex: 1, marginStart: -20, marginEnd: -20, }}>
 					<FastImage
 						style={styles.productStyle}
 						source={{

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

@@ -66,7 +66,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
-		businessSlug
+		businessSlug,
+		isFromCheckout
 	} = props;
 
 	const theme = useTheme();
@@ -122,8 +123,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
-			: { paddingVertical: 20, paddingLeft: 40, paddingRight: 20 }
+			? { paddingVertical: 0, paddingLeft: 20, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 20, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();
@@ -176,7 +177,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 
 	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) {
@@ -372,6 +372,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		setToggleMap(!toggleMap);
 	};
 
+	const showFieldWithTheme = (name) => {
+		return !theme?.address?.components?.[name]?.hidden
+	}
+
 	useEffect(() => {
 		if (
 			orderState.loading &&
@@ -380,9 +384,11 @@ const AddressFormUI = (props: AddressFormParams) => {
 			auth &&
 			!afterSignup
 		) {
-			!isFromProductsList
-				? navigation.navigate('BottomTab')
-				: navigation.navigate('Business');
+			isFromCheckout
+				? navigation.goBack()
+				: !isFromProductsList
+					? navigation.navigate('BottomTab')
+					: navigation.navigate('Business');
 		}
 	}, [orderState?.options?.address]);
 
@@ -437,16 +443,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);
 				}
@@ -491,6 +497,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		}
 	}, []);
 
+	useEffect(() => {
+		Geocoder.init(googleMapsApiKey);
+	}, [googleMapsApiKey]);
+
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener(
 			'keyboardDidShow',
@@ -532,10 +542,15 @@ const AddressFormUI = (props: AddressFormParams) => {
 					style={{ marginTop: Platform.OS === 'ios' ? 0 : 10 }}
 					titleWrapStyle={{ paddingHorizontal: 0, width: '100%' }}
 					titleStyle={{ marginRight: 0, marginLeft: 0, paddingRight: 5 }}
+          buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: HEIGHT_SCREEN * .78, overflow: 'scroll' }}>
+				<AddressFormContainer style={{ overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>
@@ -640,6 +655,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													}
 												}}
 												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+												isIntGeoCoder
 											/>
 										</View>
 									)}
@@ -661,13 +677,14 @@ const AddressFormUI = (props: AddressFormParams) => {
 											saveLocation={saveMapLocation}
 											setSaveLocation={setSaveMapLocation}
 											handleToggleMap={handleToggleMap}
+											isIntGeoCoder
 										/>
 									</GoogleMapContainer>
 								</View>
 							)}
 
 							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								{showField && showField('internal_number') && (
+								{((isRequiredField && isRequiredField('internal_number')) || showFieldWithTheme('internal_number')) && (
 									<Controller
 										control={control}
 										name="internal_number"
@@ -703,7 +720,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												isFocusHighlight
 												style={{
 													...styles.inputsStyle,
-													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
+													marginRight: showField?.('internal_number') && showField?.('zipcode') ? 24 : 0
 												}}
 												forwardRef={internalNumberRef}
 												returnKeyType="next"
@@ -714,7 +731,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									/>
 								)}
 
-								{showField && showField('zipcode') && (
+								{((isRequiredField && isRequiredField('zipcode')) || showFieldWithTheme('zipcode')) && (
 									<Controller
 										control={control}
 										name="zipcode"
@@ -759,7 +776,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 								)}
 							</View>
 
-							{showField && showField('address_notes') && (
+							{((isRequiredField && isRequiredField('address_notes')) || showFieldWithTheme('address_notes')) && (
 								<Controller
 									control={control}
 									name="address_notes"
@@ -850,8 +867,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 						) : (
 							<OButton
 								text={t('CANCEL', 'Cancel')}
-								bgColor={theme.colors.white}
-								borderColor={theme.colors.primary}
+								bgColor={theme.colors.secundary}
+								borderColor={theme.colors.secundary}
+								textStyle={{ color: theme.colors.black }}
 								style={{ borderRadius: 7.6, borderWidth: 1, shadowOpacity: 0 }}
 								onClick={() => navigation?.canGoBack() && navigation.goBack()}
 							/>
@@ -871,12 +889,15 @@ const AddressFormUI = (props: AddressFormParams) => {
 									saveLocation={saveMapLocation}
 									setSaveLocation={setSaveMapLocation}
 									handleToggleMap={handleToggleMap}
+									isIntGeoCoder
 								/>
 							</GoogleMapContainer>
 						)}
 						<OButton
 							text={t('SAVE', 'Save')}
 							textStyle={{ color: theme.colors.white }}
+							bgColor={theme.colors.primary}
+							borderColor={theme.colors.primary}
 							imgRightSrc={null}
 							style={{ marginHorizontal: 30, marginBottom: 10 }}
 							onClick={() => setSaveMapLocation(true)}

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

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

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);
@@ -155,6 +152,11 @@ const AddressListUI = (props: AddressListParams) => {
 							showCall={false}
 							paddingTop={10}
 							btnStyle={{ paddingLeft: 0 }}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
 						/>
 					)}
 					{
@@ -176,6 +178,11 @@ const AddressListUI = (props: AddressListParams) => {
 								style={{ marginTop: 0 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
+                buttonProps={{
+                  bgColor: theme.colors.white,
+                  borderColor: theme.colors.white,
+                  textStyle: { color: theme.colors.btnFont }
+                }}
 							/>
 						)}
 					{addressList.loading && addressList?.addresses?.length === 0 && (
@@ -220,7 +227,8 @@ const AddressListUI = (props: AddressListParams) => {
 													onSaveAddress: handleSaveAddress,
 													isSelectedAfterAdd: true,
 													isFromProductsList: isFromProductsList,
-													hasAddressDefault: !!orderState.options?.address?.location
+													hasAddressDefault: !!orderState.options?.address?.location,
+													isFromCheckout: route?.params?.isFromCheckout
 												}
 											) : onNavigationRedirect(
 												'AddressFormInitial',
@@ -231,7 +239,8 @@ const AddressListUI = (props: AddressListParams) => {
 													onSaveAddress: handleSaveAddress,
 													isSelectedAfterAdd: true,
 													isFromProductsList: isFromProductsList,
-													hasAddressDefault: !!orderState.options?.address?.location
+													hasAddressDefault: !!orderState.options?.address?.location,
+													isFromCheckout: route?.params?.isFromCheckout
 												})}
 										>
 											<OIcon src={theme.images.general.pencil} width={16} style={{ marginHorizontal: 4 }} />
@@ -296,8 +305,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(
@@ -308,7 +317,8 @@ const AddressListUI = (props: AddressListParams) => {
 										addressesList: addressList?.addresses,
 										nopadding: true,
 										isSelectedAfterAdd: true,
-										hasAddressDefault: !!orderState.options?.address?.location
+										hasAddressDefault: !!orderState.options?.address?.location,
+										isFromCheckout: route?.params?.isFromCheckout
 									}) : onNavigationRedirect(
 										'AddressFormInitial',
 										{
@@ -317,7 +327,8 @@ const AddressListUI = (props: AddressListParams) => {
 											addressesList: addressList?.addresses,
 											nopadding: true,
 											isSelectedAfterAdd: true,
-											hasAddressDefault: !!orderState.options?.address?.location
+											hasAddressDefault: !!orderState.options?.address?.location,
+											isFormCheckout: route?.params?.isFromCheckout
 										})}
 							/>
 						</>

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

@@ -3,10 +3,10 @@ import styled from 'styled-components/native'
 export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
-	 paddingLeft: 40px;
-	 paddingRight: 40px;
-     margin-bottom: 40px;
-     padding-top: 10px;
+	paddingLeft: 20px;
+	paddingRight: 20px;
+    margin-bottom: 40px;
+    padding-top: 10px;
 `
 
 export const AddressItem = styled.TouchableOpacity`

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

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
+import {
+  createClient,
+  AnalyticsProvider
+} from '@segment/analytics-react-native';
 import { useEvent, useConfig, useLanguage } from 'ordering-components/native';
 
 export const AnalyticsSegment = (props: any) => {
@@ -20,8 +23,7 @@ export const AnalyticsSegment = (props: any) => {
     segmentClient.track('Product List Viewed', {
       business_id: category?.business_id,
       category_id: category?.id,
-      category: category?.name,
-      products: category?.products
+      category: category?.name
     })
   }
 
@@ -59,11 +61,12 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
-  const handleProductAdded = (product: any) => {
+  const handleProductAdded = (product: any, result: any) => {
     segmentClient.track('Product Added', {
-      id: product.id,
+      cart_id: result.uuid,
+      product_id: product.id,
       name: product.name,
-      category: product.category_id,
+      category: product.category_id || product?.categoryId,
       price: product.price,
       quantity: product.quantity
     })
@@ -98,7 +101,7 @@ export const AnalyticsSegment = (props: any) => {
 
   const handleOrderPlaced = (order: any) => {
     segmentClient.track('Order Placed', {
-      id: order.id,
+      order_id: order.id,
       affiliation: order.business?.name,
       revenue: order.total,
       tax: order.tax_total,

package/themes/original/src/components/AppleLogin/styles.tsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components/native'
 
-export const Container = styled.View``
+export const Container = styled.View`
+  margin-bottom: 20px;
+`
 
 export const AppleButton = styled.TouchableOpacity`
   background-color: #FFFFFF;

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

@@ -26,7 +26,6 @@ import {
 	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-const types = ['food', 'laundry', 'alcohol', 'groceries'];
 
 let BusinessInformation: null | React.ElementType = null
 let BusinessReviews: null | React.ElementType = null
@@ -36,6 +35,7 @@ export const BusinessBasicInformation = (
 ) => {
 	const { navigation, businessState, isBusinessInfoShow, logo, header, isPreOrder } = props;
 	const { business, loading } = businessState;
+	const types = business?.types && business?.types?.filter(({ enabled }) => (enabled)).map(({ name }) => (name))
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
@@ -72,7 +72,7 @@ export const BusinessBasicInformation = (
 			alignItems: 'flex-start'
 		},
 		businessInfo: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			paddingTop: isChewLayout ? 0 : 56,
 		},
 		bullet: {
@@ -95,7 +95,7 @@ export const BusinessBasicInformation = (
 			width: '100%',
 			top: 0,
 			zIndex: 100,
-			left: 40
+			left: 20
 		},
 		socialIcon: {
 			borderRadius: 3,
@@ -146,14 +146,11 @@ export const BusinessBasicInformation = (
 	}
 
 	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
+		if (!types) return t('GENERAL', 'General');
 		const _types: any = [];
 		types.forEach(
-			(type) =>
-				business[type] &&
-				_types.push(
-					t(`BUSINESS_TYPE_${type?.replace(/\s/g, '_')?.toUpperCase()}`, type),
-				),
+			(type: any) =>
+				_types.push(type)
 		);
 		return _types.join(', ');
 	};
@@ -217,7 +214,7 @@ export const BusinessBasicInformation = (
 					<Placeholder Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
 							{[...Array(5).keys()].map(i => (
-								<View style={styles.socialIcon} key={i}>
+								<View style={{ ...styles.socialIcon, borderWidth: 0 }} key={i}>
 									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
 								</View>
 							))}
@@ -247,7 +244,7 @@ export const BusinessBasicInformation = (
 								<View style={styles.tiktokIcon}>
 									<OIcon
 										src={theme.images.general.tiktok}
-										style={{ width: 10, height: 12 }}
+										style={{ width: 10, height: 12, bottom: 1 }}
 										cover
 									/>
 								</View>

package/themes/original/src/components/BusinessBasicInformation/styles.tsx

@@ -11,7 +11,7 @@ export const BusinessHeader = styled.ImageBackground`
 `;
 export const BusinessLogo = styled.View`
   position: absolute;
-  start: 40px;
+  start: 20px;
   top: -36px;
   z-index: 50;
   box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};