ordering-ui-react-native 0.19.2-testing → 0.19.3-release

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

@@ -288,43 +288,37 @@ const ProfileUI = (props: ProfileParams) => {
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
 				/>
-				<KeyboardAvoidingView
-					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-					enabled={Platform.OS === 'ios' ? true : false}
-					style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}
-				>
-					<CenterView>
-						<View style={styles.photo}>
-							{user?.photo ? (
-								<FastImage
-									style={{ height: 80, width: 80, borderRadius: 8 }}
-									source={{
-										uri: user?.photo,
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
-							) : (
-								<Ionicons name='person-outline' size={50} />
-							)}
-						</View>
-						<OIconButton
-							icon={theme.images.general.camera}
-							borderColor={theme.colors.clear}
-							iconStyle={{ width: 20, height: 20 }}
-							style={{ maxWidth: 40, position: 'absolute', alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
-							onClick={() => handleImagePicker()}
-						/>
-					</CenterView>
-					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
-					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
-					<UserFormDetailsUI
-						{...props}
-						isProfile
-						isEdit
-						setWillVerifyOtpState={setWillVerifyOtpState}
+				<CenterView>
+					<View style={styles.photo}>
+						{user?.photo ? (
+							<FastImage
+								style={{ height: 80, width: 80, borderRadius: 8 }}
+								source={{
+									uri: user?.photo,
+									priority: FastImage.priority.normal,
+								}}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						) : (
+							<Ionicons name='person-outline' size={50} />
+						)}
+					</View>
+					<OIconButton
+						icon={theme.images.general.camera}
+						borderColor={theme.colors.clear}
+						iconStyle={{ width: 20, height: 20 }}
+						style={{ maxWidth: 40, position: 'absolute', alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
+						onClick={() => handleImagePicker()}
 					/>
-				</KeyboardAvoidingView>
+				</CenterView>
+				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
+				<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
+				<UserFormDetailsUI
+					{...props}
+					isProfile
+					isEdit
+					setWillVerifyOtpState={setWillVerifyOtpState}
+				/>
 			</Container>
 			<OModal
 				open={isModalVisible}

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

@@ -195,38 +195,39 @@ const UserVerificationUI = (props: any) => {
   }
 
   useEffect(() => {
-    let _timer = TIME_COUNTDOWN - 1;
-    let minutes = 0;
-    let seconds = 0;
-    const interval = setInterval(() => {
-      minutes = _timer / 60;
-      seconds = _timer % 60;
-
-      minutes = minutes < 10 ? 0 + minutes : minutes;
-      seconds = seconds < 10 ? 0 + seconds : seconds;
-
-      const formatMinutes = parseInt(minutes.toString()) < 10
-        ? `0${parseInt(minutes.toString())}`
-        : parseInt(minutes.toString());
-
-      const formatseconds = parseInt(seconds.toString()) < 10
-        ? `0${parseInt(seconds.toString())}`
-        : parseInt(seconds.toString());
-
-      setTimer(`${formatMinutes}:${formatseconds}`);
-
-      if (--_timer < 0) {
-        clearInterval(interval);
-      }
-
-      if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
-        setIsSendCodeAgain(false)
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval)
-  }, [isSendCodeAgain])
+    if (verificationState.phone) {
+      let _timer = TIME_COUNTDOWN - 1;
+      let minutes = 0;
+      let seconds = 0;
+      const interval = setInterval(() => {
+        minutes = _timer / 60;
+        seconds = _timer % 60;
+
+        minutes = minutes < 10 ? 0 + minutes : minutes;
+        seconds = seconds < 10 ? 0 + seconds : seconds;
+
+        const formatMinutes = parseInt(minutes.toString()) < 10
+          ? `0${parseInt(minutes.toString())}`
+          : parseInt(minutes.toString());
+
+        const formatseconds = parseInt(seconds.toString()) < 10
+          ? `0${parseInt(seconds.toString())}`
+          : parseInt(seconds.toString());
+
+        setTimer(`${formatMinutes}:${formatseconds}`);
+
+        if (--_timer < 0) {
+          clearInterval(interval);
+        }
+
+        if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
+          setIsSendCodeAgain(false)
+          clearInterval(interval);
+        }
+      }, 1000);
+      return () => clearInterval(interval)
+    }
+  }, [isSendCodeAgain, verificationState.phone])
 
   useEffect(() => {
     if (otpState?.length === CODE_LENGTH) {
@@ -292,7 +293,7 @@ const UserVerificationUI = (props: any) => {
 
   useEffect(() => {
     setupUserPhoneNumber()
-  }, [user])
+  }, [user?.cellphone, user?.country_phone_code])
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
@@ -401,6 +402,7 @@ const UserVerificationUI = (props: any) => {
                       textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
                       noDropIcon
                       isDisabled
+                      updateStateWithSubmit
                     />
                   </InputWrapper>
                 </>
@@ -460,28 +462,31 @@ const UserVerificationUI = (props: any) => {
           )}
 
         </Container>
-        <ButtonsActions>
-          <View style={{ width: '100%' }}>
-            <OButton
-              onClick={(verificationState.email || verificationState.phone)
-                ? () => setVerificationState({ email: false, phone: false })
-                : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
-              }
-              text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
-              bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-              borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-              textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
-              imgRightSrc={null}
-              isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-              style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
-            />
-          </View>
-        </ButtonsActions>
+        {!!phoneState?.cellphone && (
+          <ButtonsActions>
+            <View style={{ width: '100%' }}>
+              <OButton
+                onClick={(verificationState.email || verificationState.phone)
+                  ? () => setVerificationState({ email: false, phone: false })
+                  : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
+                }
+                text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
+                bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+                borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+                textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
+                imgRightSrc={null}
+                isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+              />
+            </View>
+          </ButtonsActions>
+        )}
         <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
           <UserDetails
             user={user}
             isEdit
             isVerifiedPhone
+            dontToggleEditMode
           />
         </View>
       </ScrollView>

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

@@ -3,6 +3,7 @@ import styled from 'styled-components/native'
 export const Container = styled.View`
   display: flex;
   flex-direction: column;
+  width: 100%;
 `
 
 export const TransactionsWrapper = styled.View`

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

@@ -73,7 +73,7 @@ const WalletsUI = (props: any) => {
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
   const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const hideWalletsTheme = theme?.bar_menu?.components?.wallets?.hidden
+  const hideWalletsTheme = theme?.bar_menu?.components?.wallet?.hidden === true
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
@@ -120,18 +120,16 @@ const WalletsUI = (props: any) => {
 
   return (
     <>
-      <Container
-        pdng={Platform.OS === 'ios' ? '10px' : '0'}
-      >
+      <Container>
         <Header>
           <View style={{
             ...{
               width: '100%',
               display: 'flex',
-              flexDirection: hideWalletsTheme ? 'column' : 'row',
-              justifyContent: hideWalletsTheme ? 'flex-start' : 'space-between',
-              alignItems: hideWalletsTheme ? 'flex-start' : 'center',
-              marginTop: hideWalletsTheme ? 0 : 10,
+              flexDirection: !hideWalletsTheme ? 'column' : 'row',
+              justifyContent: !hideWalletsTheme ? 'flex-start' : 'space-between',
+              alignItems: !hideWalletsTheme ? 'flex-start' : 'center',
+              marginTop: !hideWalletsTheme ? Platform.OS === 'ios' ? 20 : 30 : 10,
             },
           }}>
             <NavBar
@@ -141,6 +139,7 @@ const WalletsUI = (props: any) => {
               showCall={false}
               paddingTop={10}
               btnStyle={{ paddingLeft: 0 }}
+              isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
             />
             {isChewLayout && !openHistory && (
@@ -151,7 +150,7 @@ const WalletsUI = (props: any) => {
                 imgRightSrc={null}
                 textStyle={{ fontSize: 12, color: theme.colors.disabled }}
                 onClick={() => setOpenHistory(true)}
-                style={{ borderRadius: 8, height: 40, width: hideWalletsTheme ? '100%' : 150, marginTop: hideWalletsTheme ? 10 : 0 }}
+                style={{ borderRadius: 8, height: 40, width: !hideWalletsTheme ? '100%' : 150, marginTop: !hideWalletsTheme ? 10 : 0 }}
               />
             )}
           </View>

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

@@ -3,7 +3,7 @@ import styled from 'styled-components/native'
 export const Container = styled.View`
   padding-horizontal: 20px;
   padding-bottom: 20px;
-  padding-top: ${(props: any) => props.pdng};
+  padding-top: ${(props: any) => props.pdng || 0};
 `
 export const Header = styled.View`
   flex-direction: row;

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

@@ -13,7 +13,7 @@ const HeaderTitle = (props: any) => {
       weight={Platform.OS === 'ios' ? '600' : 'bold'}
       style={style ?? {
         marginTop: Platform.OS === 'android' ? 50 : 30,
-        paddingHorizontal: props.ph ?? 40,
+        paddingHorizontal: props.ph ?? 20,
         textTransform: 'capitalize',
         color: props.titleColor || theme.colors.textNormal,
       }}

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.theme?.general?.components?.inputs?.borderRadius && css`
-      border-radius: ${props?.theme?.general?.components?.inputs?.borderRadius};
-  `}
 `;
 
 const OInput = (props: Props): React.ReactElement => {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
-import { OIcon } from '.';
-import styled, { useTheme } from 'styled-components/native';
+import styled from 'styled-components/native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 interface Props {
 	open?: boolean;
@@ -50,17 +50,15 @@ const OModal = (props: Props): React.ReactElement => {
 		isAvoidKeyBoardView
 	} = props
 
-	const theme = useTheme();
-
 	const renderSafeAreaView = () => (
 		<SafeAreaView style={styles.container}>
 			{!entireModal ? (
 				<View style={styles.centeredView}>
 					<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-						<TouchableOpacity style={{...styles.wrapperIcon, ...styleContainerCloseButton}} onPress={onClose}>
-							<OIcon
-								src={theme.images.general.close}
-								width={16}
+						<TouchableOpacity style={{ ...styles.wrapperIcon, ...styleContainerCloseButton }} onPress={onClose}>
+							<AntDesignIcon
+								name='close'
+								size={26}
 								style={isNotDecoration && (styleCloseButton || styles.cancelBtn)}
 							/>
 						</TouchableOpacity>
@@ -73,9 +71,9 @@ const OModal = (props: Props): React.ReactElement => {
 					{!customClose && (
 						<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
 							<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
-								<OIcon
-									src={theme.images.general.close}
-									width={16}
+								<AntDesignIcon
+									name='close'
+									size={26}
 									style={styleCloseButton || styles.cancelBtn}
 								/>
 							</TouchableOpacity>
@@ -93,7 +91,7 @@ const OModal = (props: Props): React.ReactElement => {
 			animationType="slide"
 			transparent={isTransparent}
 			visible={open}
-			onRequestClose={() =>  onClose && onClose()}
+			onRequestClose={() => onClose && onClose()}
 			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
 		>
 			{isAvoidKeyBoardView ? (
@@ -125,8 +123,8 @@ const styles = StyleSheet.create({
 		flex: 1,
 		justifyContent: 'space-between',
 		alignItems: 'flex-start',
-		paddingLeft: 40,
-		paddingRight: 40,
+		paddingLeft: 20,
+		paddingRight: 20,
 		marginBottom: 40
 	},
 	cancelBtn: {

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

@@ -4,9 +4,11 @@ import styled, { css, useTheme } from 'styled-components/native';
 import { Platform, View } from 'react-native';
 
 const ContainerStyled = styled.ScrollView`
-  flex: 1;
+  ${(props: any) => !props.disableFlex && css`
+    flex: 1
+  `}
   ${(props: any) => !props.noPadding && css`
-    padding: ${Platform.OS === 'ios' ? '0px 40px' : '20px 40px'};
+    padding: ${Platform.OS === 'ios' ? '0px 20px' : '20px 20px'};
   `}
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
@@ -17,7 +19,7 @@ export const Container = (props: any) => {
   return (
     <View
       style={{
-        flex: 1,
+        flex: props.disableFlex ? undefined : 1,
         paddingTop: props.pt ?? insets.top,
         backgroundColor: theme.colors.backgroundPage
       }}

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

@@ -147,6 +147,7 @@ export interface PhoneInputParams {
 	isDisabled?: any;
 	isStartValidation?: any;
 	changeCountry?: any;
+	updateStateWithSubmit?: boolean
 }
 
 export interface LanguageSelectorParams {
@@ -256,6 +257,7 @@ export interface BusinessProductsListingParams {
 	onBusinessClick?: any;
 	onNavigationRedirect?: any;
 	businessSingleId?: number | string
+	fromMulti?: boolean
 }
 export interface BusinessBasicInformationParams {
 	navigation?: any;
@@ -392,6 +394,7 @@ export interface OrdersOptionParams {
 	BusinessControllerSkeletons?: any,
 	businessPaginationProps?: any,
 	businesses?: any
+	businessId?: any;
 }
 export interface ActiveOrdersParams {
 	orders?: any,
@@ -435,6 +438,7 @@ export interface OrderDetailsParams {
 	onNavigationRedirect?: any,
 	reorderState?: any,
 	handleReorder?: any,
+	hideViaText?: boolean,
 }
 export interface ProductItemAccordionParams {
 	key?: any;
@@ -579,7 +583,7 @@ export interface BusinessPreorderParams {
 	handleBusinessClick: (value: any) => {};
 	getActualSchedule?: any;
 	cateringPreorder?: boolean;
-	preorderLeadTime?: number 
+	preorderLeadTime?: number
 }
 export interface BusinessMenuListParams {
 	menu: any;
@@ -630,7 +634,9 @@ export interface GoogleMapsParams {
 	locations?: Array<any>,
 	setSaveLocation?: (val: boolean) => void,
 	handleToggleMap?: () => void,
-	isIntGeoCoder: boolean
+	isIntGeoCoder: boolean,
+	businessZones?: any
+	delta?: number
 }
 
 export interface HelpParams {
@@ -728,6 +734,8 @@ export interface otpParams {
 	pinCount: number;
 	otpError: any,
 	setOtpError: any
+	isCheckingCode: boolean
+	setCheckingCode: (value: boolean) => void
 }
 
 export interface FavoriteParams {

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()
@@ -575,6 +576,119 @@ export const getOrderStatus = (s: string) => {
   return objectStatus && objectStatus;
 }
 
+export const getOrderStatuPickUp = (s: any) => {
+  const status = parseInt(s);
+  const orderStatus = [
+    {
+      key: 0,
+      value: t('PENDING', 'Pending'),
+      slug: 'PENDING',
+      percentage: 0.1,
+      image: theme.images.order.status0,
+    },
+    {
+      key: 1,
+      value: t('COMPLETED', 'Completed'),
+      slug: 'COMPLETED',
+      percentage: 1,
+      image: theme.images.order.status1,
+    },
+    {
+      key: 2,
+      value: t('REJECTED', 'Rejected'),
+      slug: 'REJECTED',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 4,
+      value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
+      slug: 'PREPARATION_COMPLETED',
+      percentage: 0.5,
+      image: theme.images.order.status4,
+    },
+    {
+      key: 5,
+      value: t('REJECTED_BY_BUSINESS', 'Rejected by business'),
+      slug: 'REJECTED_BY_BUSINESS',
+      percentage: 0,
+      image: theme.images.order.status5,
+    },
+    {
+      key: 7,
+      value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
+      slug: 'ACCEPTED_BY_BUSINESS',
+      percentage: 0.3,
+      image: theme.images.order.status7,
+    },
+    {
+      key: 13,
+      value: t('PREORDER', 'PreOrder'),
+      slug: 'PREORDER',
+      percentage: 0,
+      image: theme.images.order.status13,
+    },
+    {
+      key: 14,
+      value: t('ORDER_NOT_READY', 'Order not ready'),
+      slug: 'ORDER_NOT_READY',
+      percentage: 0.3,
+      image: theme.images.order.status13,
+    },
+    {
+      key: 15,
+      value: t(
+        'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+        'Order picked up completed by customer',
+      ),
+      slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+      percentage: 1,
+      image: theme.images.order.status1,
+    },
+    {
+      key: 16,
+      value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
+      slug: 'CANCELLED_BY_CUSTOMER',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 17,
+      value: t(
+        'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+        'Order not picked up by customer',
+      ),
+      slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 20,
+      value: t(
+        'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+        'Customer almost arrived to business',
+      ),
+      slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+      percentage: 0.7,
+      image: theme.images.order.status7,
+    },
+    {
+      key: 21,
+      value: t(
+        'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+        'Customer arrived to business',
+      ),
+      slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+      percentage: 0.9,
+      image: theme.images.order.status7,
+    }
+  ];
+
+  const objectStatus = orderStatus.find((o) => o.key === status);
+
+  return objectStatus && objectStatus;
+}
+
 /**
  * Function to get brightness of color.
  */
@@ -612,3 +726,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}>