ordering-ui-react-native 0.22.52 → 0.22.53-release

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -36,10 +36,10 @@ const RedeemGiftCardUI = (props: any) => {
       marginTop: 20
     },
     inputStyle: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-		},
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
   })
 
   const onSubmit = (values) => {
@@ -65,7 +65,7 @@ const RedeemGiftCardUI = (props: any) => {
         t('ERROR', 'Error'),
         stringError,
         [
-          { text: t('OK', 'oK'), onPress: () => {} }
+          { text: t('OK', 'oK'), onPress: () => { } }
         ]
       )
     }
@@ -85,7 +85,7 @@ const RedeemGiftCardUI = (props: any) => {
       t('ERROR', 'Error'),
       stringError,
       [
-        { text: t('OK', 'oK'), onPress: () => {} }
+        { text: t('OK', 'oK'), onPress: () => { } }
       ]
     )
   }, [actionState.error])
@@ -108,12 +108,10 @@ const RedeemGiftCardUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
               }}
+              useArrow
               onClick={onClose}
               icon={AntDesignIcon}
               iconProps={{
@@ -124,25 +122,25 @@ const RedeemGiftCardUI = (props: any) => {
                 }
               }}
             />
-              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+            <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
           </View>
           <FormController>
             <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
-              <OInput
-                placeholder='XXXX-XXXX-XXXX-XXXX'
-                value={codeValue}
-                onChange={(val: any) => {
-                  onChange(val)
-                  handleChangeCode(val)
-                }}
-                autoCapitalize='characters'
-                autoCorrect={false}
-                blurOnSubmit={false}
-                style={style.inputStyle}
-              />
+                <OInput
+                  placeholder='XXXX-XXXX-XXXX-XXXX'
+                  value={codeValue}
+                  onChange={(val: any) => {
+                    onChange(val)
+                    handleChangeCode(val)
+                  }}
+                  autoCapitalize='characters'
+                  autoCorrect={false}
+                  blurOnSubmit={false}
+                  style={style.inputStyle}
+                />
               )}
               name='code'
               rules={{
@@ -178,9 +176,7 @@ const RedeemGiftCardUI = (props: any) => {
           <OButton
             onClick={handleSubmit(onSubmit)}
             text={actionState?.loading ? t('LOADING', 'Loading') : t('APPLY_TO_YOUR_BALANCE', 'Apply to your balance')}
-            bgColor={theme.colors.primary}
-            borderColor={theme.colors.primary}
-            textStyle={{ color: 'white', fontSize: 13 }}
+            textStyle={{ fontSize: 13 }}
             imgRightSrc={null}
             style={style.btnStyle}
             isDisabled={actionState.loading}
@@ -202,12 +198,10 @@ const RedeemGiftCardUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
               }}
+              useArrow
               onClick={onClose}
               icon={AntDesignIcon}
               iconProps={{
@@ -218,7 +212,7 @@ const RedeemGiftCardUI = (props: any) => {
                 }
               }}
             />
-              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
+            <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
           </View>
           <View>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
@@ -232,9 +226,7 @@ const RedeemGiftCardUI = (props: any) => {
                 onClose()
               }}
               text={t('OK', 'Ok')}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-              textStyle={{ color: 'white', fontSize: 13 }}
+              textStyle={{ fontSize: 13 }}
               imgRightSrc={null}
               style={style.btnStyle}
             />

package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { StyleSheet, Platform, Alert } from 'react-native';
-import { useLanguage, SendGiftCard as SendGiftCardController  } from 'ordering-components/native';
+import { useLanguage, SendGiftCard as SendGiftCardController } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OInput } from '../../shared';
 import { useForm, Controller } from 'react-hook-form'
@@ -29,10 +29,10 @@ const SendGiftCardUI = (props: any) => {
       marginTop: 20
     },
     inputStyle: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-		},
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
   })
 
   const onSubmit = (values) => {
@@ -50,7 +50,7 @@ const SendGiftCardUI = (props: any) => {
         t('ERROR', 'Error'),
         stringError,
         [
-          { text: t('OK', 'oK'), onPress: () => {} }
+          { text: t('OK', 'oK'), onPress: () => { } }
         ]
       )
     }
@@ -144,9 +144,7 @@ const SendGiftCardUI = (props: any) => {
       <OButton
         onClick={handleSubmit(onSubmit)}
         text={actionState?.loading ? t('LOADING', 'Loading') : t('SEND_GIFT_CARD', 'Send gift card')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
-        textStyle={{ color: 'white', fontSize: 13 }}
+        textStyle={{ fontSize: 13 }}
         imgRightSrc={null}
         style={style.btnStyle}
         isDisabled={actionState.loading}

package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.tsx

@@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
 import { useLanguage, GiftCardOrdersList as GiftCardOrdersListController } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
-	Placeholder,
-	PlaceholderLine,
-	Fade
+  Placeholder,
+  PlaceholderLine,
+  Fade
 } from 'rn-placeholder';
 import { SingleGiftCard } from '../SingleGiftCard';
 import { OButton, OText } from '../../shared';
@@ -24,7 +24,7 @@ const VerticalGiftCardOrdersLayoutUI = (props: any) => {
     onNavigationRedirect
   } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
   const [, t] = useLanguage()
 
   useEffect(() => {
@@ -40,8 +40,8 @@ const VerticalGiftCardOrdersLayoutUI = (props: any) => {
             <PlaceholderLine width={30} height={16} />
           </Placeholder>
         ) : giftCards.list?.length > 0 && (
-        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={24} style={{ marginTop: 24 }}>{title}</OText>
-      )}
+          <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={24} style={{ marginTop: 24 }}>{title}</OText>
+        )}
       {giftCards.list.map(card => (
         <SingleGiftCardWrapper key={card.id}>
           <SingleGiftCard
@@ -62,12 +62,11 @@ const VerticalGiftCardOrdersLayoutUI = (props: any) => {
       {paginationProps.totalPages && paginationProps.currentPage < paginationProps.totalPages && (
         <WrappButton>
           <OButton
-						onClick={loadMoreOrders}
-						text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-						imgRightSrc={null}
-						textStyle={{ color: theme.colors.white }}
-						style={{ borderRadius: 7.6, shadowOpacity: 0 }}
-					/>
+            onClick={loadMoreOrders}
+            text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+            imgRightSrc={null}
+            style={{ borderRadius: 7.6, shadowOpacity: 0 }}
+          />
         </WrappButton>
       )}
     </ProductsListContainer>

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

@@ -8,7 +8,6 @@ import Alert from '../../../../../src/providers/AlertProvider'
 import { OIcon } from '../shared';
 
 export const GoogleMap = (props: GoogleMapsParams) => {
-
   const {
     location,
     handleChangeAddressMap,
@@ -21,7 +20,10 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     locations,
     isIntGeoCoder,
     businessZones,
-    delta
+    delta,
+    autoCompleteAddress,
+    setAutoCompleteAddress,
+    manualZoom
   } = props
 
   const [, t] = useLanguage()
@@ -59,7 +61,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     strokeWidth: 2
   }
 
-  const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
+  const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
       longitude: pos.longitude
@@ -84,7 +86,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         }
         handleChangeAddressMap && handleChangeAddressMap(address, details)
         setSaveLocation && setSaveLocation(false)
-        if(!isMovingRegion){ 
+        if (!isMovingRegion) {
           handleToggleMap && handleToggleMap()
         }
       } else {
@@ -95,7 +97,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     })
   }
 
-  const validateResult = (curPos: { latitude: number, longitude: number }) => {
+  const validateResult = (curPos: any) => {
     const loc1 = center
     const loc2 = curPos
     const distance = calculateDistance(loc1, loc2)
@@ -103,25 +105,33 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     if (!maxLimitLocation) {
       geocodePosition(curPos)
       setMarkerPosition(curPos)
-      setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
+      if (!autoCompleteAddress) {
+        setRegion({ longitude: curPos?.longitude || 0, latitude: curPos?.latitude || 0, latitudeDelta: curPos?.latitudeDelta || 0.0010, longitudeDelta: curPos?.longitudeDelta || (delta ?? 0.0010) * ASPECT_RATIO })
+      } else {
+        setRegion({ longitude: curPos?.longitude, latitude: curPos?.latitude, latitudeDelta: delta ?? 0.0010, longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO })
+      }
       return
     }
 
     const _maxLimitLocation = typeof maxLimitLocation === 'string' ? parseInt(maxLimitLocation, 10) : maxLimitLocation
 
     if (distance <= _maxLimitLocation) {
-      if (!aproxEqual(curPos.latitude, center.lat) || !aproxEqual(curPos.longitude, center.lng)){
+      if (!aproxEqual(curPos?.latitude, center.lat) || !aproxEqual(curPos?.longitude, center.lng)) {
         geocodePosition(curPos, true)
       }
       setMarkerPosition(curPos)
-      setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
+      if (!autoCompleteAddress) {
+        setRegion({ longitude: curPos?.longitude || 0, latitude: curPos?.latitude || 0, latitudeDelta: curPos?.latitudeDelta || 0.0010, longitudeDelta: curPos?.longitudeDelta || (delta ?? 0.0010) * ASPECT_RATIO })
+      } else {
+        setRegion({ longitude: curPos?.longitude, latitude: curPos?.latitude, latitudeDelta: delta ?? 0.0010, longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO })
+      }
     } else {
       setMapErrors && setMapErrors('ERROR_MAX_LIMIT_LOCATION')
       setMarkerPosition({ latitude: center.lat, longitude: center.lng })
     }
   }
 
-  const aproxEqual = (n1 : number, n2 : number, epsilon = 0.000001) => {
+  const aproxEqual = (n1: number, n2: number, epsilon = 0.000001) => {
     return Math.abs(n1 - n2) < epsilon
   }
 
@@ -182,11 +192,21 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }, [isIntGeoCoder])
 
   useEffect(() => {
-    mapRef.current.animateToRegion({
-      ...region,
+    const regionConfig = {
       latitude: location?.lat,
       longitude: location?.lng,
-    })
+      latitudeDelta: region?.latitudeDelta ?? delta ?? 0.0010,
+      longitudeDelta: region?.longitudeDelta ?? (delta ?? 0.0010) * ASPECT_RATIO
+    }
+
+    mapRef.current.animateToRegion(autoCompleteAddress
+      ? regionConfig
+      : { ...region, ...regionConfig }
+    )
+
+    if (autoCompleteAddress) {
+      setAutoCompleteAddress && setAutoCompleteAddress(false)
+    }
   }, [location])
 
   useEffect(() => {
@@ -197,11 +217,12 @@ export const GoogleMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (mapRef.current && locations) {
+      if (mapRef.current && locations && !manualZoom) {
         fitAllMarkers()
       }
     }, 1000)
     if (locations) {
+      fitAllMarkers()
       SETMARKERS(locations)
     }
     return () => clearInterval(interval)
@@ -213,7 +234,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         provider={PROVIDER_GOOGLE}
         initialRegion={region}
         style={styles.map}
-        onRegionChangeComplete={!readOnly ? (coordinates) => handleChangeRegion(coordinates) : () => { }}
+        onRegionChangeComplete={!readOnly ? (coordinates) => { handleChangeRegion(coordinates) } : () => { }}
         zoomTapEnabled
         zoomEnabled
         zoomControlEnabled
@@ -249,7 +270,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           <React.Fragment key={i}>
             {businessZone?.type === 2 && Array.isArray(businessZone?.data) && (
               <Polygon
-                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng}))}
+                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng }))}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
                 strokeWidth={fillStyles.strokeWidth}
@@ -257,7 +278,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 1 && businessZone?.data?.center && businessZone?.data?.radio) && (
               <Circle
-                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng }}
                 radius={businessZone?.data.radio * 1000}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
@@ -266,7 +287,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 5 && businessZone?.data?.distance) && (
               <Circle
-                center={{ latitude: center.lat, longitude: center.lng}}
+                center={{ latitude: center.lat, longitude: center.lng }}
                 radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
@@ -275,7 +296,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
           </React.Fragment>
         ))}
-      </MapView>
+      </MapView >
       <Alert
         open={alertState.open}
         onAccept={closeAlert}

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

@@ -48,11 +48,6 @@ 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,11 +37,6 @@ 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,11 +43,6 @@ 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,11 +39,6 @@ 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

@@ -162,4 +162,4 @@ export const HighestRatedBusinesses = (props: any) => {
   };
 
   return <BusinessesListingController {...highestRatedBusinessesProps} />;
-}; 
+};

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

@@ -1,33 +1,53 @@
-import React, { useEffect } from 'react';
-import { useLanguage, useOrder, useConfig } from 'ordering-components/native';
+import React from 'react';
+import { useLanguage, useOrder, useConfig, useSession, useApi, ToastType, useToast } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
 import { LanguageSelector } from '../LanguageSelector';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useWindowDimensions, Platform } from 'react-native';
+import uuid from 'react-native-uuid';
 
 export const Home = (props: any) => {
 	const { onNavigationRedirect, businessSlug } = props;
 	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
-	const [orderState] = useOrder();
+	const [orderState, { handleOrderStateLoading, setStateInitialValues }] = useOrder();
 	const [{ configs }] = useConfig()
+	const [, { login }] = useSession()
+	const [ordering] = useApi()
+	const [, { showToast }] = useToast()
 
 	const theme = useTheme();
-	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
-	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
 
-	useEffect(() => {
-		if (isAllowUnaddressOrderType) {
-			onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+	const handleCreateGuestUser = async (values: any) => {
+		try {
+			await handleOrderStateLoading(true)
+			const { content: { error, result } } = await ordering.users().save(values)
+			if (!error) {
+				await login({
+					user: result,
+					token: result.session?.access_token
+				})
+			} else {
+				showToast(ToastType.Error, t('ERROR_CREATING_GUEST_USER', 'Error creating guest users'))
+			}
+			await handleOrderStateLoading(false)
+		} catch (err) {
+			await handleOrderStateLoading(false)
+			showToast(ToastType.Error, t('ERROR_CREATING_GUEST_USER', 'Error creating guest users'))
 		}
-	}, [isAllowUnaddressOrderType])
+	}
+
+	const handleUpdateGuest = async () => {
+		const guestToken = uuid.v4()
+		if (guestToken) await handleCreateGuestUser({ guest_token: guestToken })
+	}
 
 	return (
 		<View style={styles.container}>
 			<View>
-				<View style={{ paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0 }}>
+				<View style={{paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0 }}>
 					<LanguageSelector />
 				</View>
 				<OIcon
@@ -49,13 +69,11 @@ export const Home = (props: any) => {
 				</OText>
 				<OButton
 					text={t('LOGIN_NOW', 'Login now')}
-					bgColor={theme.colors.primary}
-					borderColor={theme.colors.primary}
 					style={styles.buttons}
 					isCircle={false}
-					textStyle={{ color: 'white' }}
 					onClick={() => onNavigationRedirect('Login')}
 					imgRightSrc={null}
+					isDisabled={orderState?.loading}
 				/>
 				<OButton
 					text={t('SIGNUP', 'Signup')}
@@ -65,15 +83,13 @@ export const Home = (props: any) => {
 					textStyle={{ color: 'black' }}
 					onClick={() => onNavigationRedirect('Signup')}
 					imgRightSrc={null}
+					isDisabled={orderState?.loading}
 				/>
 				<TouchableOpacity
+					disabled={orderState?.loading}
 					style={{ ...styles.textLink, marginTop: 12 }}
-					onPress={() =>
-						orderState?.options?.address?.address
-							? onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true })
-							: onNavigationRedirect('AddressForm', { isGuestUser: true })
-					}>
-					<OText weight="normal" size={18} color={theme.colors.white}>
+					onPress={() => handleUpdateGuest()}>
+					<OText weight="normal" size={18} color={orderState?.loading ? '#ccc' : theme.colors.white}>
 						{t('CONTINUE_AS_GUEST', 'Continue as guest')}
 					</OText>
 				</TouchableOpacity>

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

@@ -145,9 +145,6 @@ export const Otp = (props: otpParams) => {
         </TouchableOpacity>
         <OButton
           onClick={() => handleCloseOtp()}
-          bgColor={theme.colors.white}
-          borderColor={theme.colors.primary}
-          textStyle={{ color: theme.colors.primary }}
           style={{ borderRadius: 8, width: '100%' }}
           text={t('CANCEL', 'Cancel')}
         />

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

@@ -73,7 +73,8 @@ const LoginFormUI = (props: LoginParams) => {
 		generateOtpCode,
 		useLoginOtpEmail,
 		useLoginOtpCellphone,
-		isGuest
+		isGuest,
+		setCellphoneStartZero
 	} = props;
 
 	const [, { showToast }] = useToast();
@@ -106,9 +107,9 @@ const LoginFormUI = (props: LoginParams) => {
 
 	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 = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
+	const googleLoginEnabled = configs?.google_login_enabled?.value === '1'
+	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1'
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1')
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -300,6 +301,11 @@ const LoginFormUI = (props: LoginParams) => {
 		setTabLayouts(_tabLayouts)
 	}
 
+	const handleChangePhoneNumber = (number: any, rawNumber: any) => {
+		setPhoneInputData(number)
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			if (configs?.security_recaptcha_type?.value === 'v3' &&
@@ -412,11 +418,6 @@ 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>
@@ -591,7 +592,7 @@ const LoginFormUI = (props: LoginParams) => {
 							<View style={{ marginBottom: 28 }}>
 								<PhoneInputNumber
 									data={phoneInputData}
-									handleData={(val: any) => setPhoneInputData(val)}
+									handleData={handleChangePhoneNumber}
 									textInputProps={{
 										returnKeyType: 'next',
 										onSubmitEditing: () => passwordRef?.current?.focus?.(),
@@ -635,6 +636,7 @@ const LoginFormUI = (props: LoginParams) => {
 												/>
 											)
 										}
+										autoCapitalize='none'
 										value={value}
 										forwardRef={passwordRef}
 										onChange={(val: any) => onChange(val)}
@@ -711,9 +713,6 @@ const LoginFormUI = (props: LoginParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={loginTab !== 'otp' ? loginButtonText : t('GET_VERIFY_CODE', 'Get verify code')}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isLoading={formState.loading}
 							style={{ borderRadius: 7.6, marginTop: 10, marginBottom: 25 }}
@@ -752,7 +751,6 @@ const LoginFormUI = (props: LoginParams) => {
 								<OButton
 									onClick={handleVerifyCodeClick}
 									text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-									borderColor={theme.colors.primary}
 									style={loginStyle.btnOutline}
 									imgRightSrc={null}
 									isLoading={isLoadingVerifyModal}

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

@@ -200,7 +200,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
-		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
+		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26],
 		useDefualtSessionManager: true,
 		paginationSettings: {
 			initialPage: 1,
@@ -266,11 +266,6 @@ 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 }}