ordering-ui-react-native 0.15.56 → 0.15.58-release

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

@@ -1,16 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {
 	ForgotPasswordForm as ForgotPasswordController,
 	useLanguage,
 	useToast,
 	ToastType,
+	useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import NavBar from '../NavBar';
-import { FormInput, FormSide } from '../LoginForm/styles'
+import { FormInput, FormSide, RecaptchaButton } from '../LoginForm/styles'
 import { Container } from './styles'
 
 import { OButton, OInput, OText } from '../shared';
@@ -20,10 +24,16 @@ const ForgotPasswordUI = (props: any) => {
 		navigation,
 		formState,
 		handleButtonForgotPasswordClick,
+		handleReCaptcha,
+		enableReCaptcha,
+		reCaptchaValue
 	} = props;
 	const [, t] = useLanguage();
 	const [, { showToast }] = useToast();
+	const [{ configs }] = useConfig();
 	const { control, handleSubmit, errors } = useForm();
+	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
 	const theme = useTheme();
 
@@ -38,6 +48,7 @@ const ForgotPasswordUI = (props: any) => {
 	});
 
 	const [emailSent, setEmailSent] = useState(null);
+	const recaptchaRef = useRef<any>({});
 
 	const onSubmit = (values: any) => {
 		setEmailSent(values.email)
@@ -48,23 +59,60 @@ const ForgotPasswordUI = (props: any) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
 	}
 
+	const handleOpenRecaptcha = () => {
+		setRecaptchaVerified(false)
+		handleReCaptcha(null)
+		if (reCaptchaValue) return
+
+	  if (!recaptchaConfig?.siteKey) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			return
+		}
+		if (!recaptchaConfig?.baseUrl) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			return
+		}
+		recaptchaRef.current.open()
+  	}
+
+	const onRecaptchaVerify = (token: any) => {
+		setRecaptchaVerified(true)
+		handleReCaptcha(token)
+	}
+
+	const handleRecaptchaExpire = () => {
+		setRecaptchaVerified(false)
+		handleReCaptcha(null)
+	}
+
 	useEffect(() => {
 		if (!formState.loading && emailSent) {
 			if (formState.result?.error) {
 				setEmailSent(null)
 				formState.result?.result && showToast(
 					ToastType.Error,
-					formState.result?.result[0]
+					typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
 				)
 				return
 			}
 			showToast(
 				ToastType.Success,
-				`${t('SUCCESS_SEND_FORGOT_PASSWORD', 'Your link has been sent to the email')}: ${emailSent}`
+				t('IF_ACCOUNT_EXIST_EMAIL_SEND_PASSWORD', 'If an account exists with this email a password will be sent')
 			)
 		}
 	}, [formState])
 
+	useEffect(() => {
+		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+			setRecaptchaConfig({
+				siteKey: configs?.security_recaptcha_site_key?.value || null,
+				baseUrl: configs?.security_recaptcha_base_url?.value || null
+			})
+		}
+	}, [configs, enableReCaptcha])
+
 	return (
 		<Container>
 			<NavBar
@@ -126,6 +174,37 @@ const ForgotPasswordUI = (props: any) => {
 						}}
 						defaultValue=""
 					/>
+					{enableReCaptcha && (
+						<>
+							<TouchableOpacity
+								onPress={handleOpenRecaptcha}
+							>
+								<RecaptchaButton>
+									{recaptchaVerified ? (
+										<MaterialCommunityIcons
+											name="checkbox-marked"
+											size={26}
+											color={theme.colors.primary}
+										/>
+									) : (
+										<MaterialCommunityIcons
+											name="checkbox-blank-outline"
+											size={26}
+											color={theme.colors.mediumGray}
+										/>
+									)}
+									<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+								</RecaptchaButton>
+							</TouchableOpacity>
+							<Recaptcha
+								ref={recaptchaRef}
+								siteKey={recaptchaConfig?.siteKey}
+								baseUrl={recaptchaConfig?.baseUrl}
+								onVerify={onRecaptchaVerify}
+								onExpire={handleRecaptchaExpire}
+							/>
+						</>
+					)}
 
 					<OButton
 						text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
@@ -146,6 +225,7 @@ const ForgotPasswordUI = (props: any) => {
 export const ForgotPasswordForm = (props: any) => {
 	const ForgotPasswordProps = {
 		...props,
+		isRecaptchaEnable: true,
 		UIComponent: ForgotPasswordUI
 	}
 	return <ForgotPasswordController {...ForgotPasswordProps} />

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import Geolocation from '@react-native-community/geolocation'
 import Geocoder from 'react-native-geocoding'
 import { GpsButtonStyle } from './styles'
@@ -55,14 +56,20 @@ export const GPSButton = (props: any) => {
     })
   }
 
-	const getCurrentPosition = () => {
-		setLoading(true);
-		Geolocation.getCurrentPosition((pos) => {
-			geoCodePosition(pos.coords);
-		}, (err) => {
-			setLoading(false);
-			console.log(err);
-		});
+	const getCurrentPosition = async () => {
+    let trackingStatus = await getTrackingStatus()
+		if (trackingStatus === 'not-determined') {
+			trackingStatus = await requestTrackingPermission()
+		}
+		if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+      setLoading(true);
+      Geolocation.getCurrentPosition((pos) => {
+        geoCodePosition(pos.coords);
+      }, (err) => {
+        setLoading(false);
+        console.log(err);
+      });
+    }
 	}
 
 	useEffect(() => {

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

@@ -32,6 +32,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     latitudeDelta: 0.0010,
     longitudeDelta: 0.0010 * ASPECT_RATIO
   })
+  const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
 
@@ -41,12 +42,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
-  const MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
-    return {
-      latitude: location.lat,
-      longitude: location.lng
-    }
-  })
+
   const geocodePosition = (pos: { latitude: number, longitude: number }) => {
     Geocoder.from({
       latitude: pos.latitude,
@@ -147,7 +143,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   const fitAllMarkers = () => {
-    mapRef.current.fitToCoordinates(MARKERS, {
+    mapRef.current.fitToCoordinates(MARKERS?.map(location => ({ latitude: location.lat, longitude: location.lng })), {
       edgePadding: { top: 80, right: 80, bottom: 80, left: 80 },
       animated: true,
     });
@@ -170,6 +166,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         fitAllMarkers()
       }
     }, 1000)
+    if (locations) {
+      SETMARKERS(locations)
+    }
     return () => clearInterval(interval)
   }, [locations])
 
@@ -189,15 +188,16 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       >
         {locations ? (
           <>
-            {MARKERS && MARKERS.map((location: { latitude: number, longitude: number }, i: number) => (
+            {MARKERS && MARKERS.map((location: { lat: number, lng: number }, i: number) => (
               <React.Fragment key={i}>
                 {
                   <Marker
-                    coordinate={location}
-                    title={locations[i]?.title}
+                    zIndex={i}
+                    coordinate={{ latitude: location.lat ?? 0, longitude: location.lng ?? 0 }}
+                    title={MARKERS[i]?.title}
                   >
                     <View>
-                      <OIcon url={locations[i].icon} width={50} height={50} />
+                      <OIcon url={MARKERS[i].icon} width={50} height={50} />
                     </View>
                   </Marker>
                 }

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

@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
 import { LastOrders } from '../LastOrders'
+import { Container } from '../../layouts/Container'
 
 import {
   HelpSubItem,
@@ -15,13 +17,28 @@ export const Help = (props: HelpParams) => {
     navigation
   } = props
   const [, t] = useLanguage()
+  const [refreshing] = useState(false);
+  const [refresh, setRefresh] = useState(false)
 
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
+
+  const handleOnRefresh = () => {
+    setRefresh(true)
+  }
+
   return (
-    <>
+    <Container
+      noPadding
+      refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+    >
       <NavBar
         title={t('HELP', 'Help')}
         titleAlign={'center'}
@@ -48,8 +65,8 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders {...props} onRedirect={onRedirect} />
+        <LastOrders {...props} onRedirect={onRedirect} refresh={refresh} setRefresh={setRefresh} />
       </LastOrdersContainer>
-    </>
+    </Container>
   )
 }

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

@@ -20,7 +20,10 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     onBusinessClick,
     navigation,
     isLoading,
-    getBusinesses
+    getBusinesses,
+    favoriteIds,
+    setFavoriteIds,
+    handleUpdateBusinessList
   } = props;
 
   const [, t] = useLanguage()
@@ -33,6 +36,17 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     getBusinesses(true)
   }, [isLoading])
 
+  useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...favoriteIds]
+    businessesList.businesses.forEach(business => {
+      if (business?.favorite) {
+        ids.push(business.id)
+      }
+    })
+    setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
   return (
     <>
 
@@ -123,6 +137,9 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
                           handleCustomClick={onBusinessClick}
                           orderType={orderState?.options?.type}
                           navigation={navigation}
+                          favoriteIds={favoriteIds}
+                          setFavoriteIds={setFavoriteIds}
+                          handleUpdateBusinessList={handleUpdateBusinessList}
                         />
                       </View>
                     )

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

@@ -36,7 +36,7 @@ export const Home = (props: any) => {
 					{t('WELCOME', 'Welcome!')}
 				</OText>
 				<OText color={theme.colors.white} size={14} style={{ marginBottom: 46 }}>
-					{t('LETS_START_ORDER', "Let's start to order now")}
+					{t('SUBTITLE_HOME', "Let's start to order now")}
 				</OText>
 				<OButton
 					text={t('LOGIN_NOW', 'Login now')}

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

@@ -18,11 +18,15 @@ import {
   OrderContainer,
   OrderInfo
 } from './styles'
+import { useEffect } from 'react'
 
 const LastOrdersUI = (props: LastOrdersParams) => {
   const {
     orderList,
-    onRedirect
+    onRedirect,
+    loadOrders,
+    refresh,
+    setRefresh
   } = props
   const { loading, error, orders } = orderList
 
@@ -46,6 +50,13 @@ const LastOrdersUI = (props: LastOrdersParams) => {
     onRedirect && onRedirect('OrderDetails', { orderId: uuid })
   }
 
+  useEffect(() => {
+		if(refresh){
+			loadOrders(false, false, false, true)
+			setRefresh && setRefresh(false)
+		}
+	}, [refresh])
+
   return (
     <>
       {loading ? (

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

@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react'
+import { formatSeconds } from '../../../utils'
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
+import { useLanguage } from 'ordering-components/native';
+import { OTPContainer } from './styles';
+import { OText, OButton } from '../../shared';
+import OTPInputView from '@twotalltotems/react-native-otp-input'
+import { useTheme } from 'styled-components/native';
+import { otpParams } from '../../../types'
+
+export const Otp = (props: otpParams) => {
+    const {
+        willVerifyOtpState,
+        setWillVerifyOtpState,
+        onSubmit,
+        handleLoginOtp,
+        setAlertState,
+        pinCount
+    } = props
+
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+        600, willVerifyOtpState)
+
+
+    const handleOnSubmit = () => {
+        setAlertState({
+            open: true,
+            title: t('CODE_SENT', 'The code has been sent'),
+        })
+        resetOtpLeftTime()
+        onSubmit()
+    }
+
+    useEffect(() => {
+        if (otpLeftTime === 0) {
+            setAlertState({
+                open: true,
+                title: t('TIME_IS_UP', 'Time is up'),
+                content: t('PLEASE_RESEND_CODE', 'Please resend code again')
+            })
+        }
+    }, [otpLeftTime])
+
+    const loginStyle = StyleSheet.create({
+        underlineStyleBase: {
+            width: 45,
+            height: 60,
+            borderWidth: 1,
+            fontSize: 16
+        },
+        underlineStyleHighLighted: {
+            borderColor: theme.colors.primary,
+            color: theme.colors.primary,
+            fontSize: 16
+        },
+    });
+
+    return (
+        <>
+            <OTPContainer>
+                <OText size={24}>
+                    {formatSeconds(otpLeftTime)}
+                </OText>
+                <OTPInputView
+                    style={{ width: '100%', height: 150 }}
+                    pinCount={pinCount || 6}
+                    codeInputFieldStyle={loginStyle.underlineStyleBase}
+                    codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
+                    onCodeFilled={(code: string) => handleLoginOtp(code)}
+                    selectionColor={theme.colors.primary}
+                />
+                <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
+                    <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
+                        {t('RESEND_CODE', 'Resend code')}
+                    </OText>
+                </TouchableOpacity>
+                <OButton
+                    onClick={() => setWillVerifyOtpState(false)}
+                    bgColor={theme.colors.white}
+                    borderColor={theme.colors.primary}
+                    textStyle={{ color: theme.colors.primary }}
+                    style={{ borderRadius: 8, width: '100%' }}
+                    text={t('CANCEL', 'Cancel')}
+                />
+            </OTPContainer>
+        </>
+    )
+}

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components/native';
+
+export const OTPContainer = styled.View`
+  padding: 20px;
+  align-items: center;
+  flex: 1 
+`