ordering-ui-react-native 0.15.27 → 0.15.28-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/GoogleMap/index.tsx

@@ -193,6 +193,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
               <React.Fragment key={i}>
                 {
                   <Marker
+                    zIndex={i}
                     coordinate={location}
                     title={locations[i]?.title}
                   >

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

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import {
-	BusinessList as BusinessesListingController,
+  BusinessList as BusinessesListingController,
   useLanguage,
-	useOrder
+  useOrder
 } from 'ordering-components/native';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView, Platform, Dimensions } from 'react-native';
@@ -24,117 +24,125 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
   } = props;
 
   const [, t] = useLanguage()
-	const [orderState] = useOrder();
+  const [orderState] = useOrder()
 
   const windowWidth = Dimensions.get('window').width;
 
   useEffect(() => {
-    if (businessesList?.loading || !isLoading) return 
+    if (businessesList?.loading || !isLoading) return
     getBusinesses(true)
   }, [isLoading])
 
   return (
     <>
-      <ListWrapper>
-        <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
-        <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
-        <ScrollView
-          showsHorizontalScrollIndicator={false}
-          nestedScrollEnabled
-          horizontal
-          style={{ height: 300 }}
-        >
-          {businessesList.loading ? (
-            <>
-              {[
-                ...Array(10).keys()
-              ].map((item, i) => (
-                <Placeholder
-                  Animation={Fade}
-                  key={i}
-                  style={{
-                    marginTop: 20,
-                    width: windowWidth - 100,
-                    paddingHorizontal: 5,
-                    height: '100%'
-                  }}>
-                  <View style={{ width: '100%' }}>
-                    <PlaceholderLine
-                      height={150}
-                      style={{ marginBottom: 20, borderRadius: 8 }}
-                    />
-                    <View style={{ paddingHorizontal: 10 }}>
-                      <View
-                        style={{
-                          flexDirection: 'row',
-                          justifyContent: 'space-between',
-                        }}>
-                        <PlaceholderLine
-                          height={15}
-                          width={40}
-                          style={{ marginBottom: 15 }}
-                        />
-                        <PlaceholderLine
-                          height={15}
-                          width={20}
-                          style={{ marginBottom: 15 }}
-                        />
-                      </View>
+
+      {businessesList.loading ? (
+        <>
+          <ScrollView
+            showsHorizontalScrollIndicator={false}
+            nestedScrollEnabled
+            horizontal
+            style={{ height: 300, paddingHorizontal: 40 }}
+          >
+            {[
+              ...Array(10).keys()
+            ].map((item, i) => (
+              <Placeholder
+                Animation={Fade}
+                key={i}
+                style={{
+                  marginTop: 20,
+                  width: windowWidth - 100,
+                  paddingHorizontal: 5,
+                  height: '100%'
+                }}>
+                <View style={{ width: '100%' }}>
+                  <PlaceholderLine
+                    height={150}
+                    style={{ marginBottom: 20, borderRadius: 8 }}
+                  />
+                  <View style={{ paddingHorizontal: 10 }}>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}>
                       <PlaceholderLine
                         height={15}
-                        width={30}
-                        style={{ marginBottom: 10 }}
+                        width={40}
+                        style={{ marginBottom: 15 }}
                       />
                       <PlaceholderLine
                         height={15}
-                        width={80}
-                        style={{ marginBottom: 10 }}
+                        width={20}
+                        style={{ marginBottom: 15 }}
                       />
                     </View>
+                    <PlaceholderLine
+                      height={15}
+                      width={30}
+                      style={{ marginBottom: 10 }}
+                    />
+                    <PlaceholderLine
+                      height={15}
+                      width={80}
+                      style={{ marginBottom: 10 }}
+                    />
                   </View>
-                </Placeholder>
-              ))}
-            </>
-          ) : (
-            <>
-              {businessesList.businesses.length > 0 ? (
-                businessesList.businesses?.map(
-                  (business: any) => (
-                    <View
-                      key={business.id}
-                      style={{
-                        width: windowWidth - 100,
-                        paddingHorizontal: 5,
-                        height: '100%'
-                      }}
-                    >
-                      <BusinessController
-                        business={business}
-                        isBusinessOpen={business?.open}
-                        handleCustomClick={onBusinessClick}
-                        orderType={orderState?.options?.type}
-                        navigation={navigation}
-                      />
-                    </View>
+                </View>
+              </Placeholder>
+            ))}
+          </ScrollView>
+        </>
+      ) : (
+        <>
+          {businessesList.businesses.length > 0 && (
+            <ListWrapper>
+              <OText size={16} mBottom={5} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('HIGHEST_RATED', 'Highest rated')}</OText>
+              <OText size={12}>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</OText>
+              <ScrollView
+                showsHorizontalScrollIndicator={false}
+                nestedScrollEnabled
+                horizontal
+                style={{ height: 300 }}
+              >
+                {
+                  businessesList.businesses?.map(
+                    (business: any) => (
+                      <View
+                        key={business.id}
+                        style={{
+                          width: windowWidth - 100,
+                          paddingHorizontal: 5,
+                          height: '100%'
+                        }}
+                      >
+                        <BusinessController
+                          business={business}
+                          isBusinessOpen={business?.open}
+                          handleCustomClick={onBusinessClick}
+                          orderType={orderState?.options?.type}
+                          navigation={navigation}
+                        />
+                      </View>
+                    )
                   )
-                )
-              ) : (
-                <NotFoundSource />
-              )}
-            </>
+                }
+              </ScrollView>
+            </ListWrapper>
           )}
-        </ScrollView>
-      </ListWrapper>
+        </>
+      )}
     </>
   )
 }
 
 export const HighestRatedBusinesses = (props: any) => {
-	const highestRatedBusinessesProps = {
-		...props,
-		UIComponent: HighestRatedBusinessesUI,
+  const highestRatedBusinessesProps = {
+    ...props,
+    UIComponent: HighestRatedBusinessesUI,
     initialOrderByValue: 'rating'
-	};
+  };
 
-	return <BusinessesListingController {...highestRatedBusinessesProps} />;
+  return <BusinessesListingController {...highestRatedBusinessesProps} />;
 }; 

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,90 @@
+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
+    } = 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={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 
+`