ordering-ui-react-native 0.15.50 → 0.15.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.50",
+  "version": "0.15.53",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Platform, Text, StyleSheet } from 'react-native';
-import { useApi, useSession, useLanguage } from 'ordering-components/native';
+import { useApi, useSession, useLanguage, useConfig } from 'ordering-components/native';
 import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
 import uuid from 'react-native-uuid';
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -16,12 +16,12 @@ export const AppleLogin = (props: any) => {
   } = props
 
   const [ordering] = useApi();
-	const [{ auth }] = useSession();
-	const [, t] = useLanguage();
-
-	const buttonText = auth
-		? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
-		: t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
+  const [{ auth }] = useSession();
+  const [, t] = useLanguage();
+  const [{ configs }] = useConfig()
+  const buttonText = auth
+    ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
+    : t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
 
   const performAppleLogin = async (code: string) => {
     try {
@@ -32,9 +32,10 @@ export const AppleLogin = (props: any) => {
           code: code
         })
       })
-      if (!response.content.error) {
+      const { result, error } = await response.json()
+      if (!error) {
         if (handleSuccessAppleLogin) {
-          handleSuccessAppleLogin(response.content.result)
+          handleSuccessAppleLogin(result)
           handleLoading && handleLoading(false)
         }
       } else {
@@ -52,54 +53,58 @@ export const AppleLogin = (props: any) => {
   }
 
   const onIOSButtonPress = async () => {
-    
-    const appleAuthRequestResponse = await appleAuth.performRequest({
-      requestedOperation: appleAuth.Operation.LOGIN,
-      requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
-    });
-  
-    // get current authentication state for user
-    // /!\ This method must be tested on a real device. On the iOS simulator it always throws an error.
-    const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);
-  
-    // use credentialState response to ensure the user is authenticated
-    if (credentialState === appleAuth.State.AUTHORIZED) {
-      // user is authenticated
-      if (appleAuthRequestResponse.authorizationCode) {
-        performAppleLogin(appleAuthRequestResponse.authorizationCode)
+    try {
+      const appleAuthRequestResponse = await appleAuth.performRequest({
+        requestedOperation: appleAuth.Operation.LOGIN,
+        requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
+      });
+
+      // get current authentication state for user
+      // /!\ This method must be tested on a real device. On the iOS simulator it always throws an error.
+      const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);
+
+      // use credentialState response to ensure the user is authenticated
+      if (credentialState === appleAuth.State.AUTHORIZED) {
+        // user is authenticated
+        if (appleAuthRequestResponse.authorizationCode) {
+          performAppleLogin(appleAuthRequestResponse.authorizationCode)
+        }
       }
+    } catch (err: any) {
+      handleLoading && handleLoading(false)
+      handleErrors && handleErrors(err.message)
     }
-
   }
-
   const onAndroidButtonPress = async () => {
-    // Generate secure, random values for state and nonce
-    const rawNonce: any = uuid.v4();
-    const state: any = uuid.v4();
-
-    // Configure the request
-    appleAuthAndroid.configure({
-      clientId: 'com.example.client-android',
-      // Return URL added to your Apple dev console. We intercept this redirect, but it must still match
-      // the URL you provided to Apple. It can be an empty route on your backend as it's never called.
-      redirectUri: 'https://example.com/auth/callback',
-      responseType: appleAuthAndroid.ResponseType.ALL,
-      scope: appleAuthAndroid.Scope.ALL,
-      // Random nonce value that will be SHA256 hashed before sending to Apple.
-      nonce: rawNonce,
-      state,
-    });
-
-    // Open the browser window for user sign in
-    const response = await appleAuthAndroid.signIn();
-
     try {
+      // Generate secure, random values for state and nonce
+      const rawNonce: any = uuid.v4();
+      const state: any = uuid.v4();
+
+      // Configure the request
+      appleAuthAndroid.configure({
+        // The Service ID you registered with Apple
+        clientId: configs?.apple_login_client_id?.value,
+        // Return URL added to your Apple dev console. We intercept this redirect, but it must still match
+        // the URL you provided to Apple. It can be an empty route on your backend as it's never called.
+        redirectUri: 'https://example.com/auth/callback',
+        responseType: appleAuthAndroid.ResponseType.ALL,
+        scope: appleAuthAndroid.Scope.ALL,
+        // Random nonce value that will be SHA256 hashed before sending to Apple.
+        nonce: rawNonce,
+        state,
+      });
+
+      // Open the browser window for user sign in
+      const response = await appleAuthAndroid.signIn();
       if (response.code) {
         performAppleLogin(response.code)
       }
     } catch (err: any) {
-
+      handleLoading && handleLoading(false)
+      handleErrors && handleErrors(err.message)
     }
+
   }
 
   useEffect(() => {
@@ -115,35 +120,36 @@ export const AppleLogin = (props: any) => {
     if (Platform.OS === 'android') return appleAuthAndroid.isSupported;
     return false;
   }
+
   return (
     <Container>
-      {canShowButton() && 
-				<AppleButton
-					onPress={() => Platform.OS == 'android' ? onAndroidButtonPress() : onIOSButtonPress()}
-				>
-					<Icon
-						name="apple"
-						size={20}
-						color={'black'}
-						style={style.fbBtn}
-					/>
-					<Text style={style.textBtn}>
-						{buttonText}
-					</Text>
-				</AppleButton>
+      {canShowButton() &&
+        <AppleButton
+          onPress={() => Platform.OS == 'android' ? onAndroidButtonPress() : onIOSButtonPress()}
+        >
+          <Icon
+            name="apple"
+            size={20}
+            color={'black'}
+            style={style.fbBtn}
+          />
+          <Text style={style.textBtn}>
+            {buttonText}
+          </Text>
+        </AppleButton>
       }
     </Container>
   );
 }
 
 const style = StyleSheet.create({
-	fbBtn: {
-		position: 'absolute',
-		left: 0,
-		marginHorizontal: 16
-	},
-	textBtn: {
-		fontSize: 14,
-		color: '#000000'
-	}
-})
+  fbBtn: {
+    position: 'absolute',
+    left: 0,
+    marginHorizontal: 16
+  },
+  textBtn: {
+    fontSize: 14,
+    color: '#000000'
+  }
+})

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

@@ -3,14 +3,20 @@ import { TouchableOpacity } from 'react-native';
 import { LogoutAction } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
+import { _retrieveStoreData } from '../../providers/StoreUtil';
 
 const LogoutButtonUI = (props: any) => {
 	const { handleLogoutClick, text, color, iconSize } = props
 	const theme = useTheme();
 
+	const handleClick = async () => {
+		const data = await _retrieveStoreData('notification_state');
+		handleLogoutClick(data)
+	  };
+	
 	return (
 		<TouchableOpacity
-			onPress={() => handleLogoutClick()}
+			onPress={() => handleClick()}
 			style={{ flexDirection: 'row', alignItems: 'center' }}
 		>
 			<OIcon

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
+import Recaptcha from 'react-native-recaptcha-that-works'
 
 import {
 	SignupForm as SignUpController,
@@ -23,6 +24,7 @@ import {
 	LoginWith as SignupWith,
 	OTab,
 	OTabs,
+	RecaptchaButton
 } from '../LoginForm/styles';
 
 import NavBar from '../NavBar';
@@ -63,7 +65,9 @@ const SignupFormUI = (props: SignupParams) => {
 		handleSendVerifyCode,
 		handleCheckPhoneCode,
 		notificationState,
-		handleChangePromotions
+		handleChangePromotions,
+		enableReCaptcha,
+		handleReCaptcha
 	} = props;
 
 	const theme = useTheme();
@@ -117,6 +121,8 @@ const SignupFormUI = (props: SignupParams) => {
 			cellphone: null,
 		},
 	});
+	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
 	const nameRef = useRef<any>(null);
 	const lastnameRef = useRef<any>(null);
@@ -125,6 +131,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const emailRef = useRef<any>(null);
 	const phoneRef = useRef<any>(null);
 	const passwordRef = useRef<any>(null);
+	const recaptchaRef = useRef<any>({});
 
   const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
@@ -286,6 +293,33 @@ const SignupFormUI = (props: SignupParams) => {
 		}
 	}
 
+	const handleOpenRecaptcha = () => {
+		setRecaptchaVerified(false)
+	  	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)
+	}
+
+	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])
+
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
 			formState.result?.result &&
@@ -467,6 +501,39 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
+							{enableReCaptcha && (
+								<>
+									<TouchableOpacity
+										onPress={handleOpenRecaptcha}
+										style={{ marginHorizontal: 4, marginBottom: 10 }}
+									>
+										<RecaptchaButton>
+											{recaptchaVerified ? (
+												<MaterialCommunityIcons
+													name="checkbox-marked"
+													size={23}
+													color={theme.colors.primary}
+												/>
+											) : (
+												<MaterialCommunityIcons
+													name="checkbox-blank-outline"
+													size={23}
+													color={theme.colors.disabled}
+												/>
+											)}
+											<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={() => setRecaptchaVerified(false)}
+									/>
+								</>
+							)}
+
 							<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
 								<Controller
 									control={control}
@@ -736,6 +803,7 @@ const SignupFormUI = (props: SignupParams) => {
 export const SignupForm = (props: any) => {
 	const signupProps = {
 		...props,
+		isRecaptchaEnable: true,
 		UIComponent: SignupFormUI,
 	};
 	return <SignUpController {...signupProps} />;

package/themes/original/src/types/index.tsx

@@ -102,6 +102,8 @@ export interface SignupParams {
 	handleCheckPhoneCode?: any;
 	notificationState?: any;
 	handleChangePromotions: () => void;
+	enableReCaptcha?: boolean;
+	handleReCaptcha?: () => void;
 }
 
 export interface PhoneInputParams {