ordering-ui-react-native 0.21.31-testing → 0.21.32-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/Help/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useTheme } from 'styled-components/native';
 import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
@@ -17,6 +18,7 @@ export const Help = (props: HelpParams) => {
     navigation
   } = props
   const [, t] = useLanguage()
+  const theme = useTheme()
   const [refreshing] = useState(false);
   const [refresh, setRefresh] = useState(false)
 
@@ -46,6 +48,11 @@ export const Help = (props: HelpParams) => {
         onActionLeft={goToBack}
         showCall={false}
         btnStyle={{ paddingLeft: 0 }}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <HelpSubItem
         onPress={() => onRedirect('HelpOrder')}

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

@@ -37,6 +37,11 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={20}>

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

@@ -43,6 +43,11 @@ export const HelpGuide = (props: HelpGuideParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={15}>

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

@@ -39,6 +39,11 @@ export const HelpOrder = (props: HelpOrderParams) => {
         onActionLeft={goToBack}
         btnStyle={{ paddingLeft: 0 }}
         showCall={false}
+        buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
       />
       <Content>
         <OText mBottom={20}>

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

@@ -62,6 +62,7 @@ export const Home = (props: any) => {
 					bgColor={theme.colors.primaryContrast}
 					borderColor={theme.colors.primaryContrast}
 					style={styles.buttons}
+					textStyle={{ color: 'black' }}
 					onClick={() => onNavigationRedirect('Signup')}
 					imgRightSrc={null}
 				/>
@@ -92,7 +93,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

@@ -40,19 +40,19 @@ export const Otp = (props: otpParams) => {
     onSubmit()
   }
 
-  const handleChangeCode = (code : string) => {
+  const handleChangeCode = (code: string) => {
     if (code?.length === pinCount) {
-      setCheckingCode(true)
+      setCheckingCode && setCheckingCode(true)
       handleLoginOtp(code)
       inputRef.current?.reset && inputRef.current.reset()
       setTimeout(() => inputRef.current?.focus && inputRef.current.focus(), 100)
     }
-    setOtpError(null)
+    setOtpError && setOtpError(null)
   }
 
   const handleCloseOtp = () => {
     setWillVerifyOtpState(false)
-    setOtpError(null)
+    setOtpError && setOtpError(null)
   }
 
   useEffect(() => {
@@ -108,18 +108,6 @@ export const Otp = (props: otpParams) => {
   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}>
-            {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
-          </OText>
-        </View>
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet, View, Keyboard, Modal } from 'react-native';
+import { StyleSheet, View, Keyboard, Modal, Platform } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
@@ -108,7 +108,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	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
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -412,6 +412,11 @@ const LoginFormUI = (props: LoginParams) => {
 					btnStyle={{ paddingLeft: 0 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+					buttonProps={{
+						bgColor: theme.colors.white,
+						borderColor: theme.colors.white,
+						textStyle: { color: theme.colors.btnFont }
+					}}
 				/>
 			)}
 			<FormSide>
@@ -802,7 +807,7 @@ const LoginFormUI = (props: LoginParams) => {
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
 									)}
-									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
+									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
 											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}

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

@@ -237,6 +237,7 @@ export const MessageListing = (props: MessageListingParams) => {
 	const [seletedOrder, setSeletedOrder] = useState<any>()
 	const [openMessages, setOpenMessges] = useState(false)
 	const [, t] = useLanguage()
+	const theme = useTheme()
 
 	const goToBack = () => {
 		navigation?.canGoBack() && navigation.goBack()
@@ -265,6 +266,11 @@ export const MessageListing = (props: MessageListingParams) => {
 				showCall={false}
 				paddingTop={Platform.OS === 'ios' ? 20 : 10}
 				btnStyle={{ paddingLeft: 0 }}
+				buttonProps={{
+          bgColor: theme.colors.white,
+          borderColor: theme.colors.white,
+          textStyle: { color: theme.colors.btnFont }
+        }}
 			/>
 			<OrderListing
 				ordersLength={{ activeOrdersLength: 0, previousOrdersLength: 0 }}

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

@@ -127,12 +127,12 @@ const MessagesUI = (props: MessagesParams) => {
 		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)}`
+				? `${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
 				?
@@ -152,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,
@@ -460,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 }}
@@ -502,6 +503,7 @@ const MessagesUI = (props: MessagesParams) => {
 					scrollToBottom
 					renderAvatarOnTop
 					renderUsernameOnMessage
+					renderAvatar={() => null}
 					renderInputToolbar={renderInputToolbar}
 					renderComposer={renderComposer}
 					renderSend={renderSend}

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
 			>
@@ -343,6 +343,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 							titleAlign={'center'}
 							titleStyle={{ fontSize: 20, marginRight: 0, marginLeft: 0 }}
 							titleWrapStyle={{ paddingHorizontal: 0 }}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
 						/>
 					)}
 					{(preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder && (
@@ -394,6 +399,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								<View style={{ flex: 1 }}>
 									{selectDate && datesWhitelist[0]?.start !== null && (
 										<CalendarStrip
+											locale={locale}
 											scrollable
 											style={styles.calendar}
 											calendarHeaderContainerStyle={styles.calendarHeaderContainer}
@@ -467,8 +473,17 @@ 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%' }}>
-					<OButton onClick={() => handleChangeMoment()} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }} textStyle={{ color: 'white', fontSize: 14 }} showNextIcon />
+				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 20, backgroundColor: 'white', width: '100%' }}>
+					<OButton
+						onClick={() => handleChangeMoment()}
+						bgColor={theme.colors.primary}
+						borderColor={theme.colors.primary}
+						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}>

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

@@ -233,6 +233,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
           toSave
           businessId={businessIds[0]}
           businessIds={businessIds}
+          businessNames={openCarts?.map?.((cart : any) => cart?.business?.name)}
           publicKey={paymethodSelected?.data?.publishable}
           requirements={props.clientSecret}
           handleSource={handlePaymethodDataChange}