ordering-ui-react-native 0.16.35 → 0.16.36-release

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

@@ -1,10 +1,11 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet, View, Keyboard } from 'react-native';
+import { StyleSheet, View, Keyboard, Vibration } from 'react-native';
 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 ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
 	LoginForm as LoginFormController,
@@ -95,14 +96,14 @@ const LoginFormUI = (props: LoginParams) => {
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 	const [tabLayouts, setTabLayouts] = useState<any>({})
 	const tabsRef = useRef<any>(null)
-
+	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 	const theme = useTheme();
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
 
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-  	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -164,6 +165,7 @@ const LoginFormUI = (props: LoginParams) => {
 		if (loginTab === 'otp') {
 			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
 				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
+				Vibration.vibrate()
 				return
 			}
 			if (loginTab === 'otp') {
@@ -176,6 +178,7 @@ const LoginFormUI = (props: LoginParams) => {
 		} else {
 			if (phoneInputData.error) {
 				showToast(ToastType.Error, phoneInputData.error);
+				Vibration.vibrate()
 				return;
 			}
 			handleButtonLoginClick({
@@ -188,6 +191,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleVerifyCodeClick = () => {
 		if (phoneInputData.error) {
 			showToast(ToastType.Error, phoneInputData.error);
+			Vibration.vibrate()
 			return;
 		}
 		if (
@@ -202,6 +206,7 @@ const LoginFormUI = (props: LoginParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
+			Vibration.vibrate()
 			return;
 		}
 		handleSendVerifyCode && handleSendVerifyCode(phoneInputData.phone);
@@ -223,10 +228,12 @@ const LoginFormUI = (props: LoginParams) => {
 		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
 		}
 
@@ -235,7 +242,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha(token)
+		handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
 	const handleChangeOtpType = (type: string) => {
@@ -256,7 +263,7 @@ const LoginFormUI = (props: LoginParams) => {
 		})
 	}
 
-	const handleCategoryScroll = (opc : string) => {
+	const handleCategoryScroll = (opc: string) => {
 		tabsRef.current.scrollTo({
 			x: tabLayouts?.[opc]?.x - 40,
 			animated: true
@@ -272,15 +279,40 @@ const LoginFormUI = (props: LoginParams) => {
 
 	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) {
+			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,
@@ -288,6 +320,7 @@ const LoginFormUI = (props: LoginParams) => {
 						? formState.result?.result
 						: formState.result?.result[0],
 				);
+			formState.result?.result && Vibration.vibrate()
 		}
 	}, [formState]);
 
@@ -299,6 +332,7 @@ const LoginFormUI = (props: LoginParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
+				verifyPhoneState.result?.result && Vibration.vibrate();
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -338,6 +372,10 @@ const LoginFormUI = (props: LoginParams) => {
 		}
 	}, [checkPhoneCodeState])
 
+	useEffect(() => {
+		if (!!Object.values(errors)?.length) Vibration.vibrate()
+	}, [errors])
+
 	return (
 		<Container>
 			<NavBar
@@ -351,15 +389,15 @@ const LoginFormUI = (props: LoginParams) => {
 				titleStyle={{ marginRight: 0, marginLeft: 0 }}
 			/>
 			<FormSide>
-				{((useLoginByEmail && useLoginByCellphone) || useLoginOtp) && (
+				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
 					<LoginWith>
 						<OTabs
-							horizontal 
+							horizontal
 							showsHorizontalScrollIndicator={false}
 							ref={tabsRef}
 						>
 							{useLoginByEmail && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeTab('email')}
 									onLayout={(event: any) => handleOnLayout(event, 'email')}
 								>
@@ -384,7 +422,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginByCellphone && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeTab('cellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
 								>
@@ -409,7 +447,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpEmail && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeOtpType('email')}
 									onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
 								>
@@ -434,7 +472,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpCellphone && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeOtpType('cellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
 								>
@@ -596,35 +634,47 @@ const LoginFormUI = (props: LoginParams) => {
 							</TouchableOpacity>
 						)}
 
-						{enableReCaptcha && (
+						{(enableReCaptcha && recaptchaConfig?.version) && (
 							<>
-								<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)}
-								/>
+								{recaptchaConfig?.version === 'v3' ? (
+									<ReCaptcha
+										url={recaptchaConfig?.baseUrl}
+										siteKey={recaptchaConfig?.siteKey}
+										containerStyle={{ height: 40 }}
+										onExecute={onRecaptchaVerify}
+										reCaptchaType={1}
+									/>
+								) : (
+									<>
+										<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
@@ -643,7 +693,7 @@ const LoginFormUI = (props: LoginParams) => {
 									{t('NEW_ON_PLATFORM', 'New on Ordering?')}
 								</OText>
 								<TouchableOpacity onPress={() => onNavigationRedirect('Signup')}>
-									<OText size={14} mLeft={5} color={theme.colors.skyBlue}>
+									<OText size={14} mLeft={5} color={theme.colors.primary}>
 										{t('CREATE_ACCOUNT', 'Create account')}
 									</OText>
 								</TouchableOpacity>
@@ -682,8 +732,9 @@ const LoginFormUI = (props: LoginParams) => {
 					)}
 
 				{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?.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)) &&
 					(
 						<>
 							<View
@@ -707,11 +758,11 @@ const LoginFormUI = (props: LoginParams) => {
 							<ButtonsWrapper>
 								<SocialButtons>
 									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-										configs?.facebook_id?.value && 
+										configs?.facebook_id?.value &&
 										facebookLoginEnabled && (
 											<FacebookLogin
 												notificationState={notificationState}
-												handleErrors={(err: any) => showToast(ToastType.Error, err)}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
 												handleLoading={(val: boolean) => setIsFBLoading(val)}
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
@@ -720,7 +771,7 @@ const LoginFormUI = (props: LoginParams) => {
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
@@ -728,7 +779,7 @@ const LoginFormUI = (props: LoginParams) => {
 									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessAppleLogin={handleSuccessFacebook}
 										/>
@@ -751,6 +802,12 @@ const LoginFormUI = (props: LoginParams) => {
 						</Placeholder>
 					</SkeletonWrapper>
 				)}
+
+				{enabledPoweredByOrdering && (
+					<OText>
+						Powered By Ordering.co
+					</OText>
+				)}
 			</FormSide>
 			<OModal
 				open={isModalVisible}

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

@@ -0,0 +1,69 @@
+import React, { useRef } from 'react'
+import Lottie from 'lottie-react-native';
+import { TouchableOpacity, Easing, ViewStyle, Animated } from 'react-native';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { useTheme } from 'styled-components';
+
+interface Props {
+    initialValue: number,
+    onClick: any,
+    disableAnimation?: boolean
+    toValue: number,
+    style?: ViewStyle,
+    duration?: number,
+    type: 'favorite', // animation types
+    isActive: boolean,
+    animationType?: ((value : number) => number);
+    useNativeDriver?: boolean,
+    iconProps?: {color?: string, size?: number, style?: ViewStyle} 
+}
+
+export const LottieAnimation = (props: Props) => {
+    const {
+        initialValue,
+        onClick,
+        disableAnimation,
+        toValue,
+        style,
+        duration,
+        type,
+        isActive,
+        useNativeDriver,
+        animationType,
+        iconProps
+    } = props
+    const theme = useTheme()
+    const animationProgress = useRef(new Animated.Value(initialValue))
+    const favoriteArray = ['heart', 'hearto']
+    const icon = type === 'favorite' ? favoriteArray : []
+    const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
+    const onPressLottie = () => {
+        if (!disableAnimation) {
+            Animated.timing(animationProgress.current, {
+                toValue,
+                duration: duration || 5000,
+                easing: animationType || Easing.linear,
+                useNativeDriver: useNativeDriver ?? true
+            }).start();
+        }
+        onClick()
+    }
+
+    return (
+        <TouchableOpacity
+            onPress={onPressLottie}
+            style={style}
+        >
+            <Lottie
+                progress={animationProgress.current}
+                source={animationGif}
+            />
+            <IconAntDesign
+                name={isActive ? icon[0] : icon[1]}
+                color={iconProps?.color || theme.colors.danger5}
+                size={iconProps?.size || 16}
+                style={iconProps?.style}
+            />
+        </TouchableOpacity>
+    )
+}

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

@@ -5,6 +5,7 @@ import { launchImageLibrary } from 'react-native-image-picker'
 import { GiftedChat, Actions, ActionsProps, InputToolbar, Composer, Send, Bubble, MessageImage, InputToolbarProps, ComposerProps } from 'react-native-gifted-chat'
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
@@ -36,7 +37,7 @@ const ORDER_STATUS: any = {
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
 	22: 'ORDER_LOOKING_FOR_DRIVER',
-  	23: 'ORDER_DRIVER_ON_WAY'
+	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
@@ -122,18 +123,17 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
-		  ?
-		  `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
-			filterSpecialStatus.includes(message.change.attribute) ? 
-			`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
-			`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
-		  }`
-		  : message.change.new
 			?
-			`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-			:
-			`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
-	  }
+			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+				`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
+				`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+			}`
+			: message.change.new
+				?
+				`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+				:
+				`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+	}
 
 	useEffect(() => {
 		let newMessages: Array<any> = []
@@ -402,7 +402,9 @@ const MessagesUI = (props: MessagesParams) => {
 			<Wrapper>
 				{!isMeesageListing ? (
 					<Header>
-						<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
+						<TouchableOpacity onPress={onClose} style={{ paddingStart: 10, borderColor: theme.colors.clear }}>
+							<AntDesignIcon name='arrowleft' size={26} />
+						</TouchableOpacity>
 						<View style={{ marginRight: 10, shadowColor: theme.colors.black, shadowOpacity: 0.1, shadowOffset: { width: 0, height: 1 }, shadowRadius: 2 }}>
 							<OIcon
 								url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
@@ -419,10 +421,8 @@ const MessagesUI = (props: MessagesParams) => {
 				) : (
 					<ProfileMessageHeader>
 						<View style={{ ...styles.headerTitle }}>
-							<TouchableOpacity
-								style={styles.headerItem}
-								onPress={onClose}>
-								<OIcon src={theme.images.general.arrow_left} width={16} />
+							<TouchableOpacity onPress={onClose} style={styles.headerItem}>
+								<AntDesignIcon name='arrowleft' size={26} />
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>

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

@@ -28,6 +28,7 @@ import {
 	TimeItem
 } from './styles';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { locale, monthsEnum } from '../../utils';
 
 const MomentOptionUI = (props: MomentOptionParams) => {
 	const {
@@ -258,7 +259,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 						onActionLeft={() => goToBack()}
 						btnStyle={{ paddingLeft: 0 }}
 						paddingTop={0}
-						style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
+						style={{ paddingBottom: 0 }}
 						title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
 						titleAlign={'center'}
 						titleStyle={{ fontSize: 14, marginRight: 0, marginLeft: 0 }}
@@ -281,7 +282,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								style={{ marginEnd: 24 }}
 							/>
 						)}
-						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + delivery time)`}</OText>
+						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${t(moment().format('dddd')?.toLocaleUpperCase(), moment().format('dddd'))}, ${t(monthsEnum[moment().format('MMM')], moment().format('MMM'))}${moment().format(' D, yyyy h:mm A')} + ${t('DELIVERY_TIME', 'delivery time')})`}</OText>
 					</WrapSelectOption>
 					<WrapSelectOption
 						onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
@@ -308,6 +309,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								{selectDate && datesWhitelist[0]?.start !== null && (
 									<CalendarStrip
 										scrollable
+										locale={locale}
 										style={styles.calendar}
 										calendarHeaderContainerStyle={styles.calendarHeaderContainer}
 										calendarHeaderStyle={styles.calendarHeader}
@@ -342,12 +344,12 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 													style={{
 														lineHeight: 24
 													}}
-												>{is12hours ? ( 
-													time.startTime.includes('12') 
+												>{is12hours ? (
+													time.startTime.includes('12')
 														? `${time.startTime}PM`
 														: parseTime(moment(time.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
-													) : time.startTime
-												}</OText>
+												) : time.startTime
+													}</OText>
 											</TimeItem>
 										</TouchableOpacity>
 									))}