ordering-ui-react-native 0.16.46 → 0.16.47-release

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/ProductForm/index.tsx

@@ -550,7 +550,7 @@ export const ProductOptionsUI = (props: any) => {
             </View>
           )}
           <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
-            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
+            {productCart && !isSoldOut && maxProductQuantity > 0 && auth && (
               <OButton
                 onClick={() => handleSaveProduct()}
                 imgRightSrc=''
@@ -563,19 +563,6 @@ export const ProductOptionsUI = (props: any) => {
                 }}
               />
             )}
-            {auth && !orderState.options?.address_id && (
-              orderState.loading ? (
-                <OButton
-                  isDisabled
-                  text={t('LOADING', 'Loading')}
-                  imgRightSrc=''
-                />
-              ) : (
-                <OButton
-                  onClick={navigation?.navigate('AddressList')}
-                />
-              )
-            )}
             {(!auth || isSoldOut || maxProductQuantity <= 0) && (
               <OButton
                 isDisabled={isSoldOut || maxProductQuantity <= 0}

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/kiosk/src/types/index.d.ts

@@ -82,6 +82,8 @@ export interface LoginParams {
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
   useRootPoint?: any;
+  enableReCaptcha?: boolean;
+  handleReCaptcha?: (vlaue: any) => void;
 }
 
 export interface ProductItemAccordionParams {

package/themes/original/index.tsx

@@ -51,6 +51,7 @@ import { LastOrders } from './src/components/LastOrders';
 import { MultiCheckout } from './src/components/MultiCheckout'
 import { MultiOrdersDetails } from './src/components/MultiOrdersDetails'
 import NavBar from './src/components/NavBar';
+import { NotificationsList } from './src/components/Notifications'
 import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
 import { BusinessController } from './src/components/BusinessController';
 import { BusinessFeaturedController } from './src/components/BusinessFeaturedController';
@@ -59,6 +60,7 @@ import { PaymentOptions } from './src/components/PaymentOptions';
 import { DriverTips } from './src/components/DriverTips';
 import { UserDetails } from './src/components/UserDetails';
 import { OrderSummary } from './src/components/OrderSummary';
+import { OrderItAgain } from './src/components/OrderItAgain';
 import { CartStoresListing } from './src/components/CartStoresListing';
 import { PaymentOptionsWebView } from '../../src/components/PaymentOptionsWebView';
 import { GoogleMap } from './src/components/GoogleMap';
@@ -182,6 +184,7 @@ export {
 	OrderDetails,
 	OrderProgress,
 	BusinessPreorder,
+	NotificationsList,
 	UserProfileForm,
 	ReviewOrder,
 	ReviewProducts,
@@ -219,6 +222,7 @@ export {
 	DriverTips,
 	UserDetails,
 	OrderSummary,
+	OrderItAgain,
 	CartStoresListing,
 	PaymentOptionsWebView,
 	GoogleMap,

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

@@ -24,13 +24,15 @@ const AddressDetailsUI = (props: any) => {
 	return (
 		<ADContainer>
 			<ADHeader>
-				<OText
-					size={16}
-					lineHeight={24}
-					color={theme.colors.textNormal}
-					weight={'500'}>
-					{t('DELIVERY_ADDRESS', 'Delivery address')}
-				</OText>
+				{props.HeaderTitle ?? (
+					<OText
+						size={16}
+						lineHeight={24}
+						color={theme.colors.textNormal}
+					>
+						{t('DELIVERY_ADDRESS', 'Delivery address')}
+					</OText>
+				)}
 			</ADHeader>
 			{!!apiKey && (
 				<ADMap
@@ -57,7 +59,7 @@ const AddressDetailsUI = (props: any) => {
 						}>
 						<OText
 							size={12}
-							color={theme.colors.textSecondary}
+							color={theme.colors.primary}
 							style={{ textDecorationLine: 'underline' }}>
 							{t('CHANGE', 'Change')}
 						</OText>

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

@@ -5,7 +5,6 @@ import {
 	TouchableOpacity,
 	Keyboard,
 	TouchableWithoutFeedback,
-	KeyboardAvoidingView,
 	Platform,
 } from 'react-native';
 import {
@@ -22,7 +21,7 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import Geocoder from 'react-native-geocoding';
 
-import { OInput, OButton, OText, OModal, OIcon } from '../shared';
+import { OInput, OButton, OModal, OIcon } from '../shared';
 import { AddressFormParams } from '../../types';
 import { getTraduction } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -57,15 +56,16 @@ const AddressFormUI = (props: AddressFormParams) => {
 		addressState,
 		addressesList,
 		saveAddress,
-		userCustomerSetup,
 		isGuestUser,
 		isRequiredField,
+		showField,
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
 	} = props;
 
 	const theme = useTheme();
+	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const tagsName = [
 		{ icon: theme.images.general.tag_home, value: 'home' },
@@ -84,7 +84,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			backgroundColor: theme.colors.clear
 		},
 		inputsStyle: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 50,
@@ -93,7 +92,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			flex: 1,
 		},
 		textAreaStyles: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 104,
@@ -107,10 +105,16 @@ const AddressFormUI = (props: AddressFormParams) => {
 			end: 0,
 			top: 12,
 			zIndex: 1002,
+			right: autoCompleteInputFocused && (
+				!!address?.address ||
+				!!formState.changes?.address ||
+				!!addressState.address.address
+			) ? 30 : 15,
+			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? {  paddingVertical: 0, paddingHorizontal: 40 }
-			: {  paddingVertical: 20, paddingHorizontal: 40 }
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
 	});
 
 	const [, t] = useLanguage();
@@ -155,8 +159,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 		'true';
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
-
-	const continueAsGuest = () => navigation.navigate('BusinessList');
+	const countryCode = configState?.configs?.country_autocomplete?.value
+	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const getAddressFormatted = (address: any) => {
@@ -203,6 +207,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 						saveAddress(data.address);
 						if (isGuestUser) {
 							continueAsGuest();
+							return;
 						}
 						if (!isGuestUser && !auth) {
 							!isFromProductsList
@@ -544,7 +549,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 											onPress={(data, details: any) => {
 												handleChangeAddress(data, details);
 											}}
-											query={{ key: googleMapsApiKey }}
+											query={{
+												key: googleMapsApiKey,
+												components: countryCode && countryCode !== '*' ? `country:${countryCode}` : ''
+											}}
 											fetchDetails
 											ref={googleInput}
 											textInputProps={{
@@ -563,6 +571,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 												autoCorrect: false,
 												blurOnSubmit: false,
 												returnKeyType: 'next',
+												onFocus: () => setAutoCompleteInputFocused(true),
+												onBlur: () => setAutoCompleteInputFocused(false)
 											}}
 											onFail={(error) =>
 												setAlertState({
@@ -586,45 +596,40 @@ const AddressFormUI = (props: AddressFormParams) => {
 												textInput: {
 													borderWidth: 1,
 													borderRadius: 7.6,
-													borderColor: theme.colors.border,
+													borderColor: autoCompleteInputFocused ? theme.colors.primary : theme.colors.border,
 													flexGrow: 1,
 													fontSize: 15,
-													paddingHorizontal: 16,
+													paddingLeft: 16,
+													paddingRight: 32,
 													minHeight: 50,
 													fontFamily: 'Poppins-Regular',
-													marginBottom: 24,
+													marginBottom: 24
 												},
 											}}
 										/>
 									)}
 								/>
-								{hasEditing ? (
-									<View style={styles.pinIcon}>
-										<GPSButton 
-											apiKey={googleMapsApiKey}
-											handleGPS={(data: any, detail: any) => {
-												handleChangeAddress(data, detail);
-												setValue(data.address);
-												if (googleInput?.current) {
-													googleInput?.current?.setAddressText( data.address );
-												}
-											}}
-											IconButton={<OIcon src={theme.images.general.pin} width={16} />}
-										/>
-									</View>
-								) : null}
-							</AutocompleteInput>
 
-							{/* {!isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) && (
-                <TouchableOpacity onPress={handleToggleMap} style={{ marginBottom: 10 }}>
-                  <OText
-                    color={theme.colors.primary}
-                    style={{ textAlign: 'center' }}
-                  >
-                    {t('VIEW_MAP', 'View map to modify the exact location')}
-                  </OText>
-                </TouchableOpacity>
-              )} */}
+								{(
+									((!isEditing && !isGuestUser) ||
+										(isEditing && !isGuestUser)) ||
+									(isGuestUser)) &&
+									(
+										<View style={styles.pinIcon}>
+											<GPSButton
+												apiKey={googleMapsApiKey}
+												handleGPS={(data: any, detail: any) => {
+													handleChangeAddress(data, detail);
+													setValue('address', data.address);
+													if (googleInput?.current) {
+														googleInput?.current?.setAddressText(data.address);
+													}
+												}}
+												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+											/>
+										</View>
+									)}
+							</AutocompleteInput>
 
 							{(locationChange || formState.changes?.location) && (
 								<View
@@ -648,129 +653,141 @@ const AddressFormUI = (props: AddressFormParams) => {
 							)}
 
 							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								<Controller
-									control={control}
-									name="internal_number"
-									rules={{
-										required:
-											isRequiredField && isRequiredField('internal_number')
-												? t(
-													`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
-													`The field internal number is required`,
-												)
-												: null,
-									}}
-									defaultValue={
-										address?.internal_number ||
-										formState.changes?.internal_number ||
-										addressState?.address?.internal_number ||
-										''
-									}
-									render={() => (
-										<OInput
-											name="internal_number"
-											placeholder={t('INTERNAL_NUMBER', 'Internal number')}
-											onChange={(text: string) => {
-												handleChangeInput(text);
-												setValue('internal_number', text);
-											}}
-											value={
-												address?.internal_number ||
-												formState.changes?.internal_number ||
-												addressState?.address?.internal_number ||
-												''
-											}
-											style={{ ...styles.inputsStyle, marginRight: 24 }}
-											forwardRef={internalNumberRef}
-											returnKeyType="next"
-											onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
-											blurOnSubmit={false}
-										/>
-									)}
-								/>
+								{showField && showField('internal_number') && (
+									<Controller
+										control={control}
+										name="internal_number"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('internal_number')
+													? t(
+														`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
+														`The field internal number is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.internal_number ||
+											formState.changes?.internal_number ||
+											addressState?.address?.internal_number ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="internal_number"
+												placeholder={t('INTERNAL_NUMBER', 'Internal number')}
+												onChange={(text: string) => {
+													handleChangeInput(text);
+													setValue('internal_number', text);
+												}}
+												value={
+													address?.internal_number ||
+													formState.changes?.internal_number ||
+													addressState?.address?.internal_number ||
+													''
+												}
+												isFocusHighlight
+												style={{
+													...styles.inputsStyle,
+													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
+												}}
+												forwardRef={internalNumberRef}
+												returnKeyType="next"
+												onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
 
+								{showField && showField('zipcode') && (
+									<Controller
+										control={control}
+										name="zipcode"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('zipcode')
+													? t(
+														`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
+														`The field Zip Code is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.zipcode ||
+											formState.changes?.zipcode ||
+											addressState.address.zipcode ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="zipcode"
+												placeholder={t('ZIP_CODE', 'Zip code')}
+												onChange={(text: string) => {
+													handleChangeInput(text);
+													setValue('zipcode', text);
+												}}
+												value={
+													address?.zipcode ||
+													formState.changes?.zipcode ||
+													addressState.address.zipcode ||
+													''
+												}
+												isFocusHighlight
+												style={styles.inputsStyle}
+												forwardRef={zipCodeRef}
+												returnKeyType="next"
+												onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+							</View>
+
+							{showField && showField('address_notes') && (
 								<Controller
 									control={control}
-									name="zipcode"
+									name="address_notes"
 									rules={{
 										required:
-											isRequiredField && isRequiredField('zipcode')
+											isRequiredField && isRequiredField('address_notes')
 												? t(
-													`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
-													`The field Zip Code is required`,
+													`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
+													`The field address notes is required`,
 												)
 												: null,
 									}}
 									defaultValue={
-										address?.zipcode ||
-										formState.changes?.zipcode ||
-										addressState.address.zipcode ||
+										address?.address_notes ||
+										formState.changes?.address_notes ||
+										addressState.address.address_notes ||
 										''
 									}
 									render={() => (
 										<OInput
-											name="zipcode"
-											placeholder={t('ZIP_CODE', 'Zip code')}
-											onChange={(text: string) => {
+											name="address_notes"
+											placeholder={t('ADDRESS_NOTES', 'Address notes')}
+											onChange={(text: any) => {
 												handleChangeInput(text);
-												setValue('zipcode', text);
+												setValue('address_notes', text);
 											}}
 											value={
-												address?.zipcode ||
-												formState.changes?.zipcode ||
-												addressState.address.zipcode ||
+												address?.address_notes ||
+												formState.changes?.address_notes ||
+												addressState.address.address_notes ||
 												''
 											}
-											style={styles.inputsStyle}
-											forwardRef={zipCodeRef}
-											returnKeyType="next"
-											onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
-											blurOnSubmit={false}
+											multiline
+											isFocusHighlight
+											style={styles.textAreaStyles}
+											returnKeyType="done"
+											forwardRef={addressNotesRef}
+											blurOnSubmit
 										/>
 									)}
 								/>
-							</View>
-
-							<Controller
-								control={control}
-								name="address_notes"
-								rules={{
-									required:
-										isRequiredField && isRequiredField('address_notes')
-											? t(
-												`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
-												`The field address notes is required`,
-											)
-											: null,
-								}}
-								defaultValue={
-									address?.address_notes ||
-									formState.changes?.address_notes ||
-									addressState.address.address_notes ||
-									''
-								}
-								render={() => (
-									<OInput
-										name="address_notes"
-										placeholder={t('ADDRESS_NOTES', 'Address notes')}
-										onChange={(text: any) => {
-											handleChangeInput(text);
-											setValue('address_notes', text);
-										}}
-										value={
-											address?.address_notes ||
-											formState.changes?.address_notes ||
-											addressState.address.address_notes ||
-											''
-										}
-										multiline
-										style={styles.textAreaStyles}
-										returnKeyType="done"
-										forwardRef={addressNotesRef}
-										blurOnSubmit
-									/>
-								)}
-							/>
+							)}
 						</FormInput>
 						<IconsContainer>
 							{tagsName.map((tag) => (

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

@@ -56,7 +56,7 @@ const AddressListUI = (props: AddressListParams) => {
 	}
 
 	const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
-		(address: any, i: number, self: any) =>
+		(address: any, i: number, self: any) => address.address &&
 			i === self.findIndex((obj: any) => (
 				address.address === obj.address &&
 				address.address_notes === obj.address_notes &&