ordering-ui-react-native 0.15.11 → 0.15.13-release

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;
+`

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

@@ -97,28 +97,18 @@ const MessagesUI = (props: MessagesParams) => {
 	}
 
 	const handleImagePicker = () => {
-		launchImageLibrary({ mediaType: 'photo', maxHeight: 300, maxWidth: 300, includeBase64: true }, (response: any) => {
-			if (response.didCancel) {
-				console.log('User cancelled image picker');
-			} else if (response.errorMessage) {
-				console.log('ImagePicker Error: ', response.errorMessage);
+		launchImageLibrary({ mediaType: 'photo', maxHeight: 2048, maxWidth: 2048, includeBase64: true }, (response: any) => {
+			if (response?.didCancel) {
+				showToast(ToastType.Error, t('IMAGE_CANCELLED', 'User cancelled image picker'));
+			} else if (response?.errorMessage) {
 				showToast(ToastType.Error, response.errorMessage);
 			} else {
-				if (Platform.OS === 'ios') {
-					if (response.uri) {
-						const url = `data:${response.type};base64,${response.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+				if (response?.assets?.length > 0) {
+					const image = response?.assets[0]
+					const url = `data:${image.type};base64,${image.base64}`
+					setImage && setImage(url);
 				} else {
-					if (response?.assets?.length > 0) {
-						const image = response?.assets[0]
-						const url = `data:${image.type};base64,${image.base64}`
-						setImage && setImage(url);
-					} else {
-						showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
-					}
+					showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
 				}
 			}
 		});
@@ -237,7 +227,7 @@ const MessagesUI = (props: MessagesParams) => {
 						{image && (
 							<TouchableOpacity
 								style={{ position: 'absolute', top: -5, right: -5, borderColor: theme.colors.backgroundDark, backgroundColor: theme.colors.white, borderRadius: 25 }}
-								onPress={() => removeImage()}
+								onPress={removeImage}
 							>
 								<MaterialCommunityIcon name='close-circle-outline' color={theme.colors.backgroundDark} size={24} />
 							</TouchableOpacity>
@@ -342,30 +332,34 @@ const MessagesUI = (props: MessagesParams) => {
 		)
 	)
 
-	const renderSend = (props: any) => (
-		<Send
-			{...props}
-			disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-			alwaysShowSend
-			containerStyle={styles.containerSend}
-		>
-			<OIconButton
-				onClick={onSubmit}
-				style={{
-					height: 44,
-					width: 44,
-					borderRadius: 7.6,
-					opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
-					borderColor: theme.colors.primary,
-					backgroundColor: theme.colors.primary,
-				}}
-				iconStyle={{ marginTop: 3, marginRight: 2 }}
-				icon={theme.images.general.enter}
-				disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-				disabledColor={theme.colors.white}
-			/>
-		</Send>
-	)
+	const renderSend = (props: any) => {
+		const isDisabled = (sendMessage?.loading || (message === '' && !image) || messages?.loading)
+		return (
+			<Send
+				{...props}
+				disabled={isDisabled}
+				alwaysShowSend
+				containerStyle={styles.containerSend}
+			>
+				<OIconButton
+					onClick={onSubmit}
+					style={{
+						height: 44,
+						width: 44,
+						borderRadius: 7.6,
+						opacity: isDisabled ? 0.2 : 1,
+						borderColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+						backgroundColor: isDisabled ? theme.colors.secondary : theme.colors.primary,
+					}}
+					iconStyle={{ marginTop: 3, marginRight: 2 }}
+					icon={theme.images.general.enter}
+					iconColor={isDisabled ? '#000' : '#fff'}
+					disabled={isDisabled}
+					disabledColor={theme.colors.secondary}
+				/>
+			</Send>
+		)
+	}
 
 	const renderBubble = (props: any) => (
 		<Bubble
@@ -545,9 +539,20 @@ const styles = StyleSheet.create({
 })
 
 export const Messages = (props: MessagesParams) => {
+	const [allMessages, setAllMessages] = useState(props.messages)
+
+	useEffect(() => {
+		setAllMessages(props.messages)
+	}, [props.messages])
+
 	const MessagesProps = {
 		...props,
-		UIComponent: MessagesUI
+		UIComponent: MessagesUI,
+		messages: allMessages,
+		setMessages: (values: any) => {
+			props.setMessages && props.setMessages(values)
+			setAllMessages(values)
+		}
 	}
 	return <MessagesController {...MessagesProps} />
 }

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

@@ -1,7 +1,5 @@
-
 import styled, { css } from 'styled-components/native'
 
-
 export const Wrapper = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -39,4 +37,4 @@ export const MessageTypeItem = styled.View`
   ${({ active }: any) => active && css`
     background-color: ${(props: any) => props.theme.colors.whiteGray};
   `}
-`
+`

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

@@ -4,6 +4,7 @@ import CalendarStrip from 'react-native-calendar-strip'
 import {
 	useLanguage,
 	useConfig,
+	useUtils,
 	useOrder,
 	MomentOption as MomentOptionController,
 } from 'ordering-components/native';
@@ -132,6 +133,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
+	const [{ parseTime }] = useUtils()
 	const [orderState] = useOrder();
 	const [optionSelected, setOptionSelected] = useState({
 		isAsap: false,
@@ -143,6 +145,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 	});
 	const { bottom } = useSafeAreaInsets();
 
+	const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
 	const [selectedTime, setSelectedTime] = useState(null);
 	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
 	const [selectDate, setSelectedDate] = useState<any>(null)
@@ -338,7 +342,12 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 													style={{
 														lineHeight: 24
 													}}
-												>{time.startTime}</OText>
+												>{is12hours ? ( 
+													time.startTime.includes('12') 
+														? `${time.startTime}PM`
+														: parseTime(moment(time.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+													) : time.startTime
+												}</OText>
 											</TimeItem>
 										</TouchableOpacity>
 									))}

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

@@ -18,7 +18,7 @@ export const OrderTimeWrapper = styled.View`
 
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
-  max-height: 160px;
+  max-height: 210px;
 `
 
 export const TimeContentWrapper = styled.View`