ordering-ui-react-native 0.21.7 → 0.21.8-release

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

@@ -20,7 +20,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     handleToggleMap,
     locations,
     isIntGeoCoder,
-    businessZones
+    businessZones,
+    delta
   } = props
 
   const [, t] = useLanguage()
@@ -31,8 +32,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const [region, setRegion] = useState({
     latitude: location.lat,
     longitude: location.lng,
-    latitudeDelta: 0.0010,
-    longitudeDelta: 0.0010 * ASPECT_RATIO
+    latitudeDelta: delta ?? 0.0010,
+    longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO
   })
   const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
@@ -83,7 +84,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         }
         handleChangeAddressMap && handleChangeAddressMap(address, details)
         setSaveLocation && setSaveLocation(false)
-        if(!isMovingRegion){ 
+        if(!isMovingRegion){
           handleToggleMap && handleToggleMap()
         }
       } else {
@@ -265,7 +266,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 5 && businessZone?.data?.distance) && (
               <Circle
-                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                center={{ latitude: center.lat, longitude: center.lng}}
                 radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}

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

@@ -56,7 +56,7 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
             showsHorizontalScrollIndicator={false}
             nestedScrollEnabled
             horizontal
-            style={{ height: 300, paddingHorizontal: 40 }}
+            style={{ height: 325, paddingHorizontal: 20 }}
           >
             {[
               ...Array(10).keys()
@@ -162,4 +162,4 @@ export const HighestRatedBusinesses = (props: any) => {
   };
 
   return <BusinessesListingController {...highestRatedBusinessesProps} />;
-}; 
+};

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

@@ -2,6 +2,6 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
   padding-top: 30px;
 `;

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

@@ -92,7 +92,7 @@ const styles = StyleSheet.create({
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'space-between',
-		paddingHorizontal: 40,
+		paddingHorizontal: 20,
 	},
 	logo: {
 		marginTop: 64,

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

@@ -129,7 +129,8 @@ export const LastOrder = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 3,
 			controlType: 'infinity'
-		}
+		},
+		noGiftCardOrders: true
 	}
 
 	return <OrderList {...MyOrdersProps} />

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

@@ -117,7 +117,8 @@ export const LastOrders = (props: any) => {
       initialPage: 1,
       pageSize: 3,
       controlType: 'infinity'
-    }
+    },
+    noGiftCardOrders: true
   }
   return <OrderListController {...helpProps} />
 }

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -1,24 +1,27 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity, View, Platform } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, SafeAreaView } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
 import { OText, OButton, OIcon } from '../../shared';
-import OtpInputs from 'react-native-otp-inputs';
+import OtpInputs, { OtpInputsRef } from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
+import { ActivityIndicator } from 'react-native';
 
 export const Otp = (props: otpParams) => {
   const {
+    pinCount,
+    otpError,
+    setOtpError,
+    setAlertState,
     willVerifyOtpState,
+    isCheckingCode,
+    setCheckingCode,
     setWillVerifyOtpState,
-    onSubmit,
     handleLoginOtp,
-    setAlertState,
-    pinCount,
-    otpError,
-    setOtpError
+    onSubmit,
   } = props
 
   const theme = useTheme();
@@ -26,8 +29,7 @@ export const Otp = (props: otpParams) => {
   const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
     600, willVerifyOtpState)
 
-  const [code, setCode] = useState('')
-  const inputRef = useRef<any>()
+  const inputRef = useRef<OtpInputsRef | any>(null)
 
   const handleOnSubmit = () => {
     setAlertState({
@@ -38,14 +40,19 @@ export const Otp = (props: otpParams) => {
     onSubmit()
   }
 
-  const handleChangeCode = (code : string) => {
-    setCode(code)
-    setOtpError(null)
+  const handleChangeCode = (code: string) => {
+    if (code?.length === pinCount) {
+      setCheckingCode && setCheckingCode(true)
+      handleLoginOtp(code)
+      inputRef.current?.reset && inputRef.current.reset()
+      setTimeout(() => inputRef.current?.focus && inputRef.current.focus(), 100)
+    }
+    setOtpError && setOtpError(null)
   }
 
   const handleCloseOtp = () => {
     setWillVerifyOtpState(false)
-    setOtpError(null)
+    setOtpError && setOtpError(null)
   }
 
   useEffect(() => {
@@ -58,13 +65,6 @@ export const Otp = (props: otpParams) => {
     }
   }, [otpLeftTime])
 
-  useEffect(() => {
-    if (code?.length === (pinCount || 6)) {
-      handleLoginOtp(code)
-      inputRef?.current?.reset()
-    }
-  }, [code])
-
   const loginStyle = StyleSheet.create({
     container: {
       width: '100%',
@@ -87,46 +87,48 @@ export const Otp = (props: otpParams) => {
       fontSize: 16
     },
     wrapperIcon: {
-      marginTop: Platform.OS === 'ios' ? 40 : 12,
-      marginBottom: 20,
       alignItems: 'center',
       justifyContent: 'center',
-      paddingRight: 35
+      paddingRight: 20
     },
     closeContainer: {
       width: '100%',
       flexDirection: 'row',
+      alignItems: 'center'
+    },
+    checkingCode: {
+      height: 50,
+      width: '100%',
+      marginVertical: 30,
+      justifyContent: 'center',
+      alignItems: 'center'
     }
   });
 
   return (
-    <>
+    <SafeAreaView style={{ flex: 1, backgroundColor: theme.colors.backgroundPage }}>
       <OTPContainer>
-        <View
-          style={loginStyle.closeContainer}>
-          <TouchableOpacity onPress={() => handleCloseOtp()} style={loginStyle.wrapperIcon}>
-            <OIcon
-              src={theme.images.general.close}
-              width={22}
-            />
-          </TouchableOpacity>
-          <OText size={22} style={{
-            marginTop: 5
-          }}>
-            {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
-          </OText>
-        </View>
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>
-        <OtpInputs
-          ref={inputRef}
-          autofillFromClipboard
-          numberOfInputs={pinCount || 6}
-          style={loginStyle.container}
-          inputStyles={loginStyle.underlineStyleBase}
-          handleChange={handleChangeCode}
-        />
+        {isCheckingCode && (
+          <View style={loginStyle.checkingCode}>
+            <OText size={18}>
+              <ActivityIndicator size="large" color={theme.colors.primary} />
+            </OText>
+          </View>
+        )}
+        {!isCheckingCode && (
+          <OtpInputs
+            ref={inputRef}
+            autofillFromClipboard={false}
+            numberOfInputs={pinCount}
+            style={loginStyle.container}
+            returnKeyType={'done'}
+            inputStyles={loginStyle.underlineStyleBase}
+            handleChange={handleChangeCode}
+          />
+        )}
         {!!otpError && (
           <OText
             color={theme?.colors?.error}
@@ -150,6 +152,10 @@ export const Otp = (props: otpParams) => {
           text={t('CANCEL', 'Cancel')}
         />
       </OTPContainer>
-    </>
+    </SafeAreaView>
   )
 }
+
+Otp.defaultProps = {
+  pinCount: 6
+}

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

@@ -104,6 +104,8 @@ const LoginFormUI = (props: LoginParams) => {
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
 
+	const [isCheckingCode, setCheckingCode] = useState(false)
+
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
 	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
@@ -179,7 +181,7 @@ const LoginFormUI = (props: LoginParams) => {
 				vibrateApp()
 				return
 			}
-			if (!values?.cellphone && otpType === 'cellphone') {
+			if (otpType === 'cellphone' && phoneInputData?.error && !phoneInputData?.phone?.cellphone) {
 				showToast(ToastType.Error, t('PHONE_NUMBER_REQUIRED', 'Phone number is required'));
 				return
 			}
@@ -268,6 +270,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleLoginOtp = async (code: string) => {
 		if (!code) return
 		const logged = await handleButtonLoginClick({ code })
+		setCheckingCode(false)
 		if (logged) {
 			setWillVerifyOtpState(false)
 		} else {
@@ -854,6 +857,8 @@ const LoginFormUI = (props: LoginParams) => {
 				animationType='slide'
 			>
 				<Otp
+					isCheckingCode={isCheckingCode}
+					setCheckingCode={setCheckingCode}
 					willVerifyOtpState={willVerifyOtpState}
 					otpError={otpError}
 					setOtpError={setOtpError}

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

@@ -126,9 +126,13 @@ const MessagesUI = (props: MessagesParams) => {
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
 			?
-			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
-				`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
-				`${message.change?.attribute !== 'logistic_status' ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)]) : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status' ? t(ORDER_STATUS[parseInt(message.change.new, 10)]) : getLogisticTag(message.change.new)}`
+			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
+        ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
+        : `${message.change?.attribute !== 'logistic_status'
+          ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
+          : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
+            ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
+            : getLogisticTag(message.change.new)}`
 			}`
 			: message.change.new
 				?
@@ -148,6 +152,7 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 		const newMessage: any = [];
 		messages.messages.map((message: any) => {
+			if (message.change?.attribute === 'driver_group_id') return
 			if (business && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('2'))) {
 				newMessage.push({
 					_id: message?.id,
@@ -456,7 +461,7 @@ const MessagesUI = (props: MessagesParams) => {
 										active={business}
 									>
 										<OIcon
-											url={order?.business?.logo || theme.images.dummies.businessLogo}
+											url={order?.business?.logo}
 											width={32}
 											height={32}
 											style={{ borderRadius: 32 }}

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

@@ -10,7 +10,7 @@ export const Header = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   box-shadow: 0 2px 2px #0000001A;
   padding-bottom: 10px;
-  padding-horizontal: 20px;
+  padding-horizontal: 10px;
 `
 
 export const TitleHeader = styled.View``

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

@@ -327,8 +327,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		<>
 			<Container
 				style={{
-					paddingLeft: !cateringPreorder || isPage ? 40 : 0,
-					paddingRight: !cateringPreorder || isPage ? 40 : 0
+					paddingLeft: !cateringPreorder || isPage ? 20 : 0,
+					paddingRight: !cateringPreorder || isPage ? 20 : 0
 				}}
 				nestedScrollEnabled
 			>
@@ -467,7 +467,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 				<Spinner visible={momentState.isLoading === 1} />
 			</Container>
 			{!isCart && !cateringPreorder && (
-				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, backgroundColor: 'white', width: '100%' }}>
+				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 20, backgroundColor: 'white', width: '100%' }}>
 					<OButton onClick={() => handleChangeMoment()} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }} textStyle={{ color: 'white', fontSize: 14 }} showNextIcon />
 				</View>
 			)}

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

@@ -11,7 +11,7 @@ export const MultiCartUI = () => {
   const theme = useTheme();
   return (
     <Container noPadding>
-      <ChContainer style={{ paddingHorizontal: 40 }}>
+      <ChContainer style={{ paddingHorizontal: 20 }}>
         <ChSection>
           <ChUserDetails>
             <Placeholder Animation={Fade}>