ordering-ui-react-native 0.15.2 → 0.15.4-release

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

@@ -1,8 +1,8 @@
-import React from 'react';
+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';
@@ -18,116 +18,131 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
   const {
     businessesList,
     onBusinessClick,
-    navigation
+    navigation,
+    isLoading,
+    getBusinesses
   } = props;
 
   const [, t] = useLanguage()
-	const [orderState] = useOrder();
+  const [orderState] = useOrder()
 
   const windowWidth = Dimensions.get('window').width;
 
+  useEffect(() => {
+    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/LoginForm/index.tsx

@@ -4,6 +4,7 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Recaptcha from 'react-native-recaptcha-that-works'
 
 import {
 	LoginForm as LoginFormController,
@@ -18,7 +19,6 @@ import { FacebookLogin } from '../FacebookLogin';
 import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
 import { OModal } from '../../../../../src/components/shared';
 
-
 import {
 	Container,
 	ButtonsWrapper,
@@ -32,6 +32,7 @@ import {
 	LineSeparator,
 	SkeletonWrapper,
 	TabBtn,
+  RecaptchaButton
 } from './styles';
 
 import NavBar from '../NavBar';
@@ -60,14 +61,16 @@ const LoginFormUI = (props: LoginParams) => {
 		handleSendVerifyCode,
 		handleCheckPhoneCode,
 		onNavigationRedirect,
-		notificationState
+		notificationState,
+		handleReCaptcha,
+		enableReCaptcha
 	} = props;
 
 	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
 	const [, { login }] = useSession();
-	const { control, handleSubmit, errors } = useForm();
+	const { control, handleSubmit, errors, reset, register, setValue } = useForm();
 	const [passwordSee, setPasswordSee] = useState(false);
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
 	const [isModalVisible, setIsModalVisible] = useState(false);
@@ -79,6 +82,8 @@ const LoginFormUI = (props: LoginParams) => {
 			cellphone: null,
 		},
 	});
+	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
 	const theme = useTheme();
 
@@ -91,7 +96,7 @@ const LoginFormUI = (props: LoginParams) => {
 		inputStyle: {
 			marginBottom: 28,
 			borderWidth: 1,
-			borderColor: theme.colors.border,
+			// borderColor: theme.colors.border,
 			borderRadius: 7.6,
 		},
 		line: {
@@ -100,10 +105,15 @@ const LoginFormUI = (props: LoginParams) => {
 			flexGrow: 1,
 			marginBottom: 7,
 		},
+		recaptchaIcon: {
+		width: 100,
+		height: 100,
+		}
 	});
 
 	const emailRef = useRef<any>({});
 	const passwordRef = useRef<any>({});
+  	const recaptchaRef = useRef<any>({});
 
 	const handleChangeTab = (val: string) => {
 		props.handleChangeTab(val);
@@ -156,6 +166,33 @@ const LoginFormUI = (props: LoginParams) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
+  	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 &&
@@ -189,33 +226,21 @@ const LoginFormUI = (props: LoginParams) => {
 	}, [verifyPhoneState]);
 
 	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			let stringError = '';
-			if (phoneInputData.error) {
-				list.unshift({ message: phoneInputData.error });
-			}
-			if (
-				loginTab === 'cellphone' &&
-				!phoneInputData.error &&
-				!phoneInputData.phone.country_phone_code &&
-				!phoneInputData.phone.cellphone
-			) {
-				list.unshift({
-					message: t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Mobile phone is required.',
-					),
-				});
-			}
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
+		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
+		else setValue('cellphone', '')
+	}, [phoneInputData?.phone?.cellphone])
+
+	useEffect(() => {
+    register('cellphone', {
+      required: loginTab === 'cellphone'
+        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+        : null
+    })
+  }, [register])
+
+	useEffect(() => {
+    reset()
+  }, [loginTab])
 
 	return (
 		<Container>
@@ -284,43 +309,58 @@ const LoginFormUI = (props: LoginParams) => {
 				{(useLoginByCellphone || useLoginByEmail) && (
 					<FormInput>
 						{useLoginByEmail && loginTab === 'email' && (
-							<Controller
-								control={control}
-								render={({ onChange, value }: any) => (
-									<OInput
-										placeholder={t('EMAIL', 'Email')}
-										style={loginStyle.inputStyle}
-										icon={theme.images.general.email}
-										onChange={(e: any) => {
-											handleChangeInputEmail(e, onChange);
-										}}
-										value={value}
-										autoCapitalize="none"
-										autoCorrect={false}
-										type="email-address"
-										autoCompleteType="email"
-										returnKeyType="next"
-										onSubmitEditing={() => passwordRef.current?.focus()}
-										blurOnSubmit={false}
-										forwardRef={emailRef}
-									/>
+							<>
+								{errors?.email && (
+									<OText
+										size={14}
+										color={theme.colors.danger5}
+										weight={'normal'}>
+										{errors?.email?.message}{errors?.email?.type === 'required' && '*'}
+									</OText>
 								)}
-								name="email"
-								rules={{
-									required: t(
-										'VALIDATION_ERROR_EMAIL_REQUIRED',
-										'The field Email is required',
-									).replace('_attribute_', t('EMAIL', 'Email')),
-									pattern: {
-										value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-										message: t(
-											'INVALID_ERROR_EMAIL',
-											'Invalid email address',
-										).replace('_attribute_', t('EMAIL', 'Email')),
-									},
-								}}
-								defaultValue=""
-							/>
+								<Controller
+									control={control}
+									render={({ onChange, value }: any) => (
+										<OInput
+											placeholder={t('EMAIL', 'Email')}
+											style={loginStyle.inputStyle}
+											icon={theme.images.general.email}
+											onChange={(e: any) => {
+												handleChangeInputEmail(e, onChange);
+											}}
+											value={value}
+											autoCapitalize="none"
+											autoCorrect={false}
+											type="email-address"
+											autoCompleteType="email"
+											returnKeyType="next"
+											onSubmitEditing={() => passwordRef.current?.focus()}
+											blurOnSubmit={false}
+											forwardRef={emailRef}
+											borderColor={errors?.email ? theme.colors.danger5 : theme.colors.border}
+										/>
+									)}
+									name="email"
+									rules={{
+										required: {
+											value: true,
+											message: 	t(
+											'VALIDATION_ERROR_EMAIL_REQUIRED',
+											'The field Email is required',
+										).replace('_attribute_', t('EMAIL', 'Email'))
+										},
+										pattern: {
+											value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+											message: t(
+												'INVALID_ERROR_EMAIL',
+												'Invalid email address',
+											).replace('_attribute_', t('EMAIL', 'Email')),
+										}
+									}}
+									defaultValue=""
+								/>
+							</>
+
 						)}
 						{useLoginByCellphone && loginTab === 'cellphone' && (
 							<View style={{ marginBottom: 28 }}>
@@ -331,10 +371,18 @@ const LoginFormUI = (props: LoginParams) => {
 										returnKeyType: 'next',
 										onSubmitEditing: () => passwordRef?.current?.focus?.(),
 									}}
+									isStartValidation={errors?.cellphone}
 								/>
 							</View>
 						)}
-
+						{errors?.password && (
+							<OText
+								size={14}
+								color={theme.colors.danger5}
+								weight={'normal'}>
+								{errors?.password?.message}{errors?.password?.type === 'required' && '*'}
+							</OText>
+						)}
 						<Controller
 							control={control}
 							render={({ onChange, value }: any) => (
@@ -366,14 +414,18 @@ const LoginFormUI = (props: LoginParams) => {
 									returnKeyType="done"
 									onSubmitEditing={handleSubmit(onSubmit)}
 									blurOnSubmit
+									borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
 								/>
 							)}
 							name="password"
 							rules={{
-								required: t(
+								required: {
+									value: true,
+									message: t(
 									'VALIDATION_ERROR_PASSWORD_REQUIRED',
 									'The field Password is required',
-								).replace('_attribute_', t('PASSWORD', 'Password')),
+								).replace('_attribute_', t('PASSWORD', 'Password'))
+								}
 							}}
 							defaultValue=""
 						/>
@@ -384,6 +436,39 @@ const LoginFormUI = (props: LoginParams) => {
 								</OText>
 							</TouchableOpacity>
 						)}
+
+						{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={() => setRecaptchaVerified(false)}
+								/>
+							</>
+						)}
+
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={loginButtonText}
@@ -544,6 +629,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
 	const loginProps = {
 		...props,
+    isRecaptchaEnable: true,
 		UIComponent: LoginFormUI,
 	};
 	return <LoginFormController {...loginProps} />;

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

@@ -36,7 +36,7 @@ export const LoginWith = styled.View`
   width: 100%;
   align-items: flex-start;
   border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.border}
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
 `;
 
 export const FormInput = styled.View`
@@ -80,3 +80,8 @@ export const LineSeparator = styled.View`
 export const SkeletonWrapper = styled.View`
   width: 90%;
 `
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`