ordering-ui-react-native 0.16.74 → 0.16.75-release

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, TouchableOpacity } from 'react-native'
+import { View, TouchableOpacity, Platform } from 'react-native'
 import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { SessionsParams } from '../../types'
@@ -12,7 +12,8 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import {
   SessionsWrapper,
   SessionItem,
-  DurationWrapper
+  DurationWrapper,
+  Container
 } from './styles'
 
 export const SessionsUI = (props: SessionsParams) => {
@@ -27,7 +28,7 @@ export const SessionsUI = (props: SessionsParams) => {
   const [, t] = useLanguage()
   const [{ user }] = useSession()
   const [{ parseDate }] = useUtils()
-	const theme = useTheme()
+  const theme = useTheme()
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -61,7 +62,9 @@ export const SessionsUI = (props: SessionsParams) => {
   }
 
   return (
-    <>
+    <Container
+      pdng={Platform.OS === 'ios' ? '10px' : '0'}
+    >
       <NavBar
         title={t('SESSIONS', 'Sessions')}
         titleAlign={'center'}
@@ -77,11 +80,11 @@ export const SessionsUI = (props: SessionsParams) => {
               <SessionItem key={i}>
                 <Placeholder Animation={Fade}>
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <View style={{ flex: 1}}>
+                    <View style={{ flex: 1 }}>
                       <PlaceholderLine width={40} />
                       <PlaceholderLine width={40} />
                     </View>
-                    <PlaceholderLine width={5}/>
+                    <PlaceholderLine width={5} />
                   </View>
                 </Placeholder>
               </SessionItem>
@@ -120,7 +123,7 @@ export const SessionsUI = (props: SessionsParams) => {
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
               </SessionsWrapper>
-             ) : (
+            ) : (
               <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
             )
           )}
@@ -147,7 +150,7 @@ export const SessionsUI = (props: SessionsParams) => {
         onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
         onClose={() => setConfirm({ ...confirm, open: false, title: null })}
       />
-    </>
+    </Container>
   )
 }
 

package/themes/original/src/components/Sessions/styles.tsx

@@ -13,3 +13,8 @@ export const SessionItem = styled.View`
 export const DurationWrapper = styled.View`
   /* flex-direction: row; */
 `
+
+export const Container = styled.View`
+  padding-top: ${(props: any) => props.pdng};
+  margin-bottom: 50px;
+`

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Vibration } 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';
@@ -7,6 +7,7 @@ import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
 	SignupForm as SignUpController,
@@ -82,7 +83,8 @@ const SignupFormUI = (props: SignupParams) => {
 		signUpTab,
 		useSignUpFullDetails,
 		useSignUpOtpEmail,
-		useSignUpOtpCellphone
+		useSignUpOtpCellphone,
+		isGuest
 	} = props;
 
 	const theme = useTheme();
@@ -244,6 +246,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
+			Vibration.vibrate()
 			return;
 		}
 		if (
@@ -261,6 +264,7 @@ const SignupFormUI = (props: SignupParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
+			Vibration.vibrate()
 			return;
 		}
 		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
@@ -329,6 +333,7 @@ const SignupFormUI = (props: SignupParams) => {
 			await Linking.openURL(url);
 		} else {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
+			Vibration.vibrate()
 		}
 	}
 
@@ -336,10 +341,12 @@ const SignupFormUI = (props: SignupParams) => {
 		setRecaptchaVerified(false)
 		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			Vibration.vibrate()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			Vibration.vibrate()
 			return
 		}
 		recaptchaRef.current.open()
@@ -347,22 +354,47 @@ const SignupFormUI = (props: SignupParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha && handleReCaptcha(token)
+		handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
 	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
-			})
+			if (configs?.security_recaptcha_type?.value === 'v3' &&
+				configs?.security_recaptcha_score_v3?.value > 0 &&
+				configs?.security_recaptcha_site_key_v3?.value
+			) {
+				setRecaptchaConfig({
+					version: 'v3',
+					siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				return
+			}
+			if (configs?.security_recaptcha_site_key?.value) {
+				setRecaptchaConfig({
+					version: 'v2',
+					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 &&
-				showToast(ToastType.Error, formState.result?.result[0]);
+			if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+				setRecaptchaVerified(false)
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				Vibration.vibrate()
+				return
+			}
+			formState.result?.result && showToast(ToastType.Error, formState.result?.result[0]);
+			formState.result?.result && Vibration.vibrate()
 			setIsLoadingVerifyModal(false);
 		}
 	}, [formState]);
@@ -370,6 +402,7 @@ const SignupFormUI = (props: SignupParams) => {
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
+			Vibration.vibrate()
 		}
 	}, [errors])
 
@@ -398,6 +431,7 @@ const SignupFormUI = (props: SignupParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
+				verifyPhoneState.result?.result && Vibration.vibrate()
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -432,16 +466,19 @@ const SignupFormUI = (props: SignupParams) => {
 
 	return (
 		<View>
-			<NavBar
-				title={t('SIGNUP', 'Signup')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				btnStyle={{ paddingLeft: 0 }}
-				style={{ flexDirection: 'column', alignItems: 'flex-start' }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-				titleStyle={{ marginLeft: 0, marginRight: 0 }}
-			/>
+			{isGuest ? (
+				<OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('SIGNUP', 'Signup')}</OText>
+			) : (
+				<NavBar
+					title={t('SIGNUP', 'Signup')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+				/>
+			)}
 			<FormSide>
 				{((Number(useSignUpFullDetails) + Number(useSignUpOtpEmail) + Number(useSignUpOtpCellphone)) > 1) && (
 					<SignupWith>
@@ -610,7 +647,6 @@ const SignupFormUI = (props: SignupParams) => {
 											}
 										})}
 										forwardRef={phoneRef}
-										defaultCode={formState?.country_code ?? formState?.country_phone_code ?? null}
 										changeCountry={(val: any) => setPhoneInputData({
 											...phoneInputData,
 											phone: {
@@ -627,36 +663,49 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
-							{enableReCaptcha && (
+							{(enableReCaptcha && recaptchaConfig?.version) && (
 								<>
-									<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)}
-									/>
+									{recaptchaConfig?.version === 'v3' ? (
+										<ReCaptcha
+											url={recaptchaConfig?.baseUrl}
+											siteKey={recaptchaConfig?.siteKey}
+											containerStyle={{ height: 40 }}
+											onExecute={onRecaptchaVerify}
+											reCaptchaType={1}
+										/>
+									) : (
+										<>
+											<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)}
+											/>
+										</>
+									)}
+
 								</>
 							)}
 							{(signUpTab === 'default') && (
@@ -849,64 +898,65 @@ const SignupFormUI = (props: SignupParams) => {
 						</View>
 					)
 				}
-				<View
-					style={{
-						flexDirection: 'row',
-						width: '100%',
-						justifyContent: 'space-between',
-						alignItems: 'center',
-						marginVertical: 30,
-					}}>
-					<View style={style.line} />
-					<OText
-						size={14}
-						mBottom={10}
-						style={{ paddingHorizontal: 19 }}
-						color={theme.colors.disabled}>
-						{t('OR', 'or')}
-					</OText>
-					<View style={style.line} />
-				</View>
-
-				{configs && Object.keys(configs).length > 0 && (
-					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
-						(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
+				{configs && Object.keys(configs).length > 0 && !isGuest && (
+					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
+						((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
+						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&
 					(
-						<ButtonsWrapper>
-							<SocialButtons>
-								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-									configs?.facebook_id?.value &&
-									facebookLoginEnabled &&
-									(
-										<FacebookLogin
+						<>
+							<View
+								style={{
+									flexDirection: 'row',
+									width: '100%',
+									justifyContent: 'space-between',
+									alignItems: 'center',
+									marginVertical: 30,
+								}}>
+								<View style={style.line} />
+								<OText
+									size={14}
+									mBottom={10}
+									style={{ paddingHorizontal: 19 }}
+									color={theme.colors.disabled}>
+									{t('OR', 'or')}
+								</OText>
+								<View style={style.line} />
+							</View>
+							<ButtonsWrapper>
+								<SocialButtons>
+									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+										configs?.facebook_id?.value &&
+										facebookLoginEnabled &&
+										(
+											<FacebookLogin
+												notificationState={notificationState}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+												handleLoading={(val: boolean) => setIsFBLoading(val)}
+												handleSuccessFacebookLogin={handleSuccessFacebook}
+											/>
+										)}
+									{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
+										<GoogleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											webClientId={configs?.google_login_client_id?.value}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
-											handleSuccessFacebookLogin={handleSuccessFacebook}
+											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
 									)}
-								{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
-									<GoogleLogin
-										notificationState={notificationState}
-										webClientId={configs?.google_login_client_id?.value}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessGoogleLogin={handleSuccessFacebook}
-									/>
-								)}
-								{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
-									<AppleLogin
-										notificationState={notificationState}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessAppleLogin={handleSuccessFacebook}
-									/>
-								)}
-							</SocialButtons>
-						</ButtonsWrapper>
+									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
+										<AppleLogin
+											notificationState={notificationState}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleLoading={(val: boolean) => setIsFBLoading(val)}
+											handleSuccessAppleLogin={handleSuccessFacebook}
+										/>
+									)}
+								</SocialButtons>
+							</ButtonsWrapper>
+						</>
 					)
 				)}
-
 			</FormSide>
 			<OModal
 				open={willVerifyOtpState}