ordering-ui-react-native 0.22.41 → 0.22.42-release

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

@@ -44,6 +44,7 @@ const ProfileListUI = (props: ProfileParams) => {
 		handleRemoveAccount,
 		removeAccountState,
 		handleChangePromotions,
+		appVersion
 	} = props;
 
 	const theme = useTheme();
@@ -151,7 +152,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const detailProps = {
 		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
 		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
-		handleRemoveAccount
+		handleRemoveAccount,
 	}
 
 	useEffect(() => {
@@ -271,6 +272,13 @@ const ProfileListUI = (props: ProfileParams) => {
 				</Actions>
 			</ListWrap>
 			<WebsocketStatus />
+			{appVersion && (
+				<View
+					style={{ alignItems: 'center' }}
+				>
+					<OText>v{appVersion}</OText>
+				</View>
+			)}
 			<OAlert
 				open={confirm.open}
 				title={confirm.title}

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

@@ -37,6 +37,7 @@ import {
   WrapperActions
 } from './styles'
 
+const CONDITIONAL_CODES = [1787]
 const TIME_COUNTDOWN = 60 * 10 // 10 minutes
 
 const UserDetails = (props: any) => {
@@ -176,9 +177,18 @@ const UserVerificationUI = (props: any) => {
     setTimer(`${TIME_COUNTDOWN / 60}:00`)
     setIsSendCodeAgain(true)
     if (opt === 'phone') {
+      let cellphone = phoneState?.cellphone
+      let country_phone_code = phoneState?.country_phone_code
+
+      if (CONDITIONAL_CODES.includes(Number(country_phone_code))) {
+        if (Number(country_phone_code) === 1787) {
+          cellphone = `787${cellphone}`
+          country_phone_code = '1'
+        }
+      }
       sendVerifyPhoneCode({
-        cellphone: phoneState?.cellphone,
-        country_phone_code: phoneState?.country_phone_code
+        cellphone,
+        country_phone_code
       })
       return
     }
@@ -188,8 +198,8 @@ const UserVerificationUI = (props: any) => {
   const setupUserPhoneNumber = () => {
     if (!user || !user?.cellphone || !user?.country_phone_code) return
     setPhoneState({
-      cellphone: user?.cellphone,
-      country_phone_code: user?.country_phone_code,
+      cellphone: user?.country_code === "PR" ? user?.cellphone.replace('787', '') : user?.cellphone,
+      country_phone_code: user?.country_code === "PR" ? '1787' : user?.country_phone_code,
       formatted: `+${user?.country_phone_code} ${user?.cellphone}`
     })
   }
@@ -399,6 +409,7 @@ const UserVerificationUI = (props: any) => {
                       defaultCode={phoneState?.country_phone_code.replace('+', '')}
                       boxStyle={style.phoneSelect}
                       inputStyle={style.phoneInputStyle}
+                      defaultCodeFallback={phoneState?.country_phone_code.replace('+', '')}
                       textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
                       noDropIcon
                       isDisabled

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

@@ -141,6 +141,11 @@ const WalletsUI = (props: any) => {
               btnStyle={{ paddingLeft: 0 }}
               isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
             />
             {isChewLayout && !openHistory && (
               <OButton
@@ -304,13 +309,11 @@ const WalletsUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
                 marginBottom: 10
               }}
+              useArrow
               onClick={() => setOpenHistory(false)}
               icon={AntDesignIcon}
               iconProps={{

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

@@ -143,15 +143,12 @@ const SocketStatusUI = (props: any) => {
               <OButton
                 onClick={() => setOpenModal(false)}
                 bgColor={theme.colors.white}
-                borderColor={theme.colors.primary}
                 textStyle={{ color: theme.colors.primary }}
                 style={{ borderRadius: 8, height: 48 }}
                 text={t('CLOSE', 'Close')}
               />
-               <OButton
+              <OButton
                 onClick={() => RNRestart.Restart()}
-                borderColor={theme.colors.primary}
-                textStyle={{ color: theme.colors.white }}
                 style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
                 text={t('UPDATE', 'Update')}
               />

package/themes/original/src/components/shared/OAlert.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components/native'
-import { Alert } from 'react-native'
+import { Alert, Vibration } from 'react-native'
 import { useLanguage } from 'ordering-components/native'
 
 const Wrapper = styled.TouchableOpacity`
@@ -41,6 +41,7 @@ const OAlert = (props: Props) => {
   }
 
   const handleClick = () => {
+    Vibration.vibrate(100)
     props.onClick && props.onClick()
     createTwoButtonAlert()
   }

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

@@ -85,6 +85,7 @@ interface Props {
 	isDisabledWithSameStyles?: boolean;
 	icon?: any;
 	iconProps?: any
+	useArrow?: boolean;
 }
 
 const OButton = (props: Props): React.ReactElement => {
@@ -94,8 +95,8 @@ const OButton = (props: Props): React.ReactElement => {
 	if (props.isDisabled) {
 		return (
 			<View style={props.parentStyle}>
-				<StyledButtonDisabled style={props.style}>
-					<StyledTextDisabled style={props.textStyle}>
+				<StyledButtonDisabled style={{ ...props.style, backgroundColor: theme.colors.disabled }}>
+					<StyledTextDisabled style={{ ...props.textStyle, color: theme.colors.backgroundGray200 }}>
 						{props.text}
 					</StyledTextDisabled>
 				</StyledButtonDisabled>
@@ -119,7 +120,7 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={{ ...props.style, backgroundColor: props.bgColor ?? theme?.general?.components?.buttons?.color, borderColor: props.borderColor ?? theme?.general?.components?.buttons?.color, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
+			<StyledButton style={{ ...props.style, backgroundColor: props.useArrow ? theme.colors.white : props.bgColor ?? theme.colors.primary, borderColor: props.useArrow ? theme.colors.white : props.borderColor ?? theme.colors.primary, borderRadius: props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
@@ -127,7 +128,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
-					<StyledText style={{ ...props.textStyle, color: props?.textStyle?.color ?? theme?.general?.components?.buttons?.buttonTextColor }}>{props.text}</StyledText>
+					<StyledText style={{ ...props.textStyle, color: props.useArrow ? theme.colors.btnFont : props?.textStyle?.color ?? theme.colors.white }}>{props.text}</StyledText>
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />

package/themes/original/src/components/shared/OInput.tsx

@@ -3,7 +3,7 @@ import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle }
 import styled from 'styled-components/native';
 import OIcon from './OIcon';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import { useTheme, css } from 'styled-components/native';
+import { useTheme } from 'styled-components/native';
 
 const Input = styled.TextInput`
   flex-grow: 1;
@@ -53,9 +53,6 @@ const Wrapper = styled.Pressable`
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	${(props: any) => props?.borderRadius && css`
-      border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
-  	`}
 `;
 
 const OInput = (props: Props): React.ReactElement => {
@@ -70,7 +67,6 @@ const OInput = (props: Props): React.ReactElement => {
 					? props.borderColor
 					: inputFocused ? theme.colors.primary : theme.colors.border,
 				...props.style,
-				borderRadius: parseInt(theme?.general?.components?.inputs?.borderRadius) || props.style?.borderRadius
 			}}>
 			{props.icon ? (
 				<OIcon
@@ -105,9 +101,9 @@ const OInput = (props: Props): React.ReactElement => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={{
-					...(theme?.general?.components?.inputs?.color && {
-						color: theme?.general?.components?.inputs?.color
-					}),
+          ...(theme?.general?.components?.inputs?.color && {
+            color: theme?.general?.components?.inputs?.color
+          }),
 					...props?.inputStyle
 				}}
 				onFocus={() => setInputFocused(true)}

package/themes/original/src/components/shared/OModal.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
 import styled from 'styled-components/native';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-
+import { Toast } from '../../../../../src/components/shared/OToast'
 interface Props {
 	open?: boolean;
 	title?: string;
@@ -22,6 +22,7 @@ interface Props {
 	styleCloseButton?: any,
 	isAvoidKeyBoardView?: boolean;
 	styleContainerCloseButton?: any;
+	showToastInsideModal?: boolean;
 }
 const KeyboardView = styled.KeyboardAvoidingView`
   flex-grow: 1;
@@ -47,7 +48,8 @@ const OModal = (props: Props): React.ReactElement => {
 		style,
 		styleCloseButton,
 		styleContainerCloseButton,
-		isAvoidKeyBoardView
+		isAvoidKeyBoardView,
+		showToastInsideModal
 	} = props
 
 	const renderSafeAreaView = () => (
@@ -94,6 +96,9 @@ const OModal = (props: Props): React.ReactElement => {
 			onRequestClose={() => onClose && onClose()}
 			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
 		>
+			{showToastInsideModal && (
+				<Toast />
+			)}
 			{isAvoidKeyBoardView ? (
 				<KeyboardView
 					enabled

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

@@ -25,7 +25,8 @@ export interface LoginParams {
 	generateOtpCode: (values?: any) => void,
 	useLoginOtpEmail?: boolean,
 	useLoginOtpCellphone?: boolean,
-	useLoginOtp?: boolean
+	useLoginOtp?: boolean,
+	setCellphoneStartZero?: any
 }
 export interface ProfileParams {
 	navigation?: any;
@@ -50,6 +51,7 @@ export interface ProfileParams {
 	removeAccountState?: any;
 	handleChangePromotions?: any;
 	notificationsGroup?: any;
+	appVersion?: string
 }
 
 export interface AddressListParams {
@@ -130,6 +132,7 @@ export interface SignupParams {
 	setSignUpTab?: (in1: string) => void;
 	setWillVerifyOtpState?: (in1: boolean) => void;
 	setOtpState?: (in1: string) => void;
+	setCellphoneStartZero?: any
 }
 
 export interface PhoneInputParams {
@@ -147,7 +150,8 @@ export interface PhoneInputParams {
 	isDisabled?: any;
 	isStartValidation?: any;
 	changeCountry?: any;
-	updateStateWithSubmit?: boolean
+	updateStateWithSubmit?: boolean,
+	defaultCodeFallback?: number
 }
 
 export interface LanguageSelectorParams {
@@ -451,7 +455,8 @@ export interface ProductItemAccordionParams {
 	onEditProduct?: (product: any) => void,
 	offsetDisabled?: any,
 	isFromCheckout?: any,
-	isDisabledEdit?: any
+	isDisabledEdit?: any,
+	productInfo?: any
 }
 export interface ReviewOrderParams {
 	order?: { id: number, business_id: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any };
@@ -607,7 +612,7 @@ export interface UpsellingProductsParams {
 	business?: any;
 	businessId?: number;
 	cartProducts?: Array<any>;
-	handleUpsellingPage: (cart ?: any) => void;
+	handleUpsellingPage: (cart?: any) => void;
 	openUpselling: boolean;
 	canOpenUpselling?: boolean;
 	setCanOpenUpselling?: (value: any) => void;
@@ -637,6 +642,9 @@ export interface GoogleMapsParams {
 	isIntGeoCoder: boolean,
 	businessZones?: any
 	delta?: number
+	setAutoCompleteAddress?: (val: boolean) => void,
+	autoCompleteAddress?: boolean,
+	manualZoom?: boolean
 }
 
 export interface HelpParams {

package/themes/original/src/utils/index.tsx

@@ -4,6 +4,7 @@ import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { CODES } from 'ordering-components/native'
 import { ORDER_TYPES } from '../config/constants';
 import { useTheme } from 'styled-components/native';
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 const [languageState, t] = useLanguage();
 const theme = useTheme()
@@ -567,6 +568,24 @@ export const getOrderStatus = (s: string) => {
       slug: 'ORDER_DRIVER_ON_WAY',
       percentage: 0.8,
       image: theme.images.order.status8
+    },
+    {
+      key: 24,
+      value: t('ORDER_DRIVER_WAITING_FOR_ORDER', 'Driver waiting for order'),
+      slug: 'ORDER_DRIVER_WAITING_FOR_ORDER',
+      percentage: 0.25
+    },
+    {
+      key: 25,
+      value: t('ORDER_ACCEPTED_BY_DRIVER_COMPANY', 'Accepted by driver company'),
+      slug: 'ORDER_ACCEPTED_BY_DRIVER_COMPANY',
+      percentage: 0.25
+    },
+    {
+      key: 26,
+      value: t('ORDER_DRIVER_ARRIVED_CUSTOMER', 'Driver arrived to customer'),
+      slug: 'ORDER_DRIVER_ARRIVED_CUSTOMER',
+      percentage: 0.8
     }
   ];
 
@@ -725,3 +744,13 @@ export const lightenDarkenColor = (color: any) => {
     return false
   }
 }
+
+export const vibrateApp = (impact ?: string) => {
+  const options = {
+    enableVibrateFallback: true,
+    ignoreAndroidSystemSettings: false
+  };
+
+  ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+
+}

package/themes/uber-eats/src/components/BusinessesListing/index.tsx

@@ -144,7 +144,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
         <View style={styles.wrapperOrderOptions}>