ordering-ui-react-native 0.16.70 → 0.16.71-release

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

@@ -3,4 +3,11 @@ import styled from 'styled-components/native'
 export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
-`
+`
+
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+`
+

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

@@ -1,7 +1,7 @@
-import React from 'react'
-import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
+import React, { useState } from 'react'
+import { LanguageSelector as LanguageSelectorController, useOrder, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
-import { Platform, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import RNPickerSelect from 'react-native-picker-select'
 import { Container, DummyContainer } from './styles'
@@ -9,9 +9,17 @@ import { LanguageSelectorParams } from '../../types'
 import { OIcon } from '../shared'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
+	const {
+		languagesState,
+		currentLanguage,
+		handleChangeLanguage,
+		iconColor,
+		pickerStyle
+	} = props
 
 	const [orderState] = useOrder()
-
+	const [state] = useLanguage()
+	const [languagePressed, setLanguagePressed] = useState(currentLanguage)
 	const theme = useTheme();
 
 	const _pickerStyle = StyleSheet.create({
@@ -41,14 +49,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 			color: theme.colors.secundaryContrast
 		}
 	})
-
-	const {
-		languagesState,
-		currentLanguage,
-		handleChangeLanguage,
-		iconColor,
-		pickerStyle
-	} = props
+	
+	const changeLanguage = (lang : string) => {
+		setLanguagePressed(lang)
+		handleChangeLanguage(lang)
+	}
 
 	const _languages = languagesState?.languages?.map((language: any) => {
 		return {
@@ -67,14 +72,14 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 				<>
 					{iconColor && <OIcon src={theme.images.general.language} color={iconColor} style={{ marginEnd: 14 }} width={16} />}
 					<RNPickerSelect
-						onValueChange={handleChangeLanguage}
+						onValueChange={changeLanguage}
 						items={_languages || []}
 						value={currentLanguage}
 						style={pickerStyle ? pickerStyle : _pickerStyle}
 						useNativeAndroidPickerStyle={false}
 						placeholder={{}}
 						Icon={() => <View style={pickerStyle ? pickerStyle.icon : _pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.white} style={{ width: '100%' }} /></View>}
-						disabled={orderState.loading}
+						disabled={orderState.loading || state.loading || state?.language?.code !== languagePressed}
 					/>
 				</>
 			) : <DummyContainer />}

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

@@ -6,6 +6,7 @@ import { NotFoundSource } from '../NotFoundSource'
 
 import { ItemWrap } from './styles'
 import { OrdersOptionParams } from '../../types'
+import { getOrderStatus } from '../../utils'
 
 import {
 	Placeholder,
@@ -67,40 +68,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		return moment(dateStr).format('MMMM DD,YYYY - hh:mm a');
 	}
 
-	const getOrderStatus = (s: string) => {
-		const status = parseInt(s)
-		const orderStatus = [
-			{ key: 0, value: t('PENDING', 'Pending') },
-			{ key: 1, value: t('COMPLETED', 'Completed') },
-			{ key: 2, value: t('REJECTED', 'Rejected') },
-			{ key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
-			{ key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
-			{ key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
-			{ key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
-			{ key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
-			{ key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
-			{ key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
-			{ key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
-			{ key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
-			{ key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
-			{ key: 13, value: t('PREORDER', 'PreOrder') },
-			{ key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
-			{ key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
-			{ key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
-			{ key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
-			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
-			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
-			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
-			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
-		]
-
-		const objectStatus = orderStatus.find((o) => o.key === status)
-
-		return objectStatus && objectStatus
-	}
-
 	return (
 		<>
 			{/* {(orders.length > 0) && (

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

@@ -1,91 +1,107 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { formatSeconds } from '../../../utils'
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
 import { OText, OButton } from '../../shared';
-import OTPInputView from '@twotalltotems/react-native-otp-input'
+import OtpInputs from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
 
 export const Otp = (props: otpParams) => {
-    const {
-        willVerifyOtpState,
-        setWillVerifyOtpState,
-        onSubmit,
-        handleLoginOtp,
-        setAlertState,
-        pinCount
-    } = props
+  const {
+    willVerifyOtpState,
+    setWillVerifyOtpState,
+    onSubmit,
+    handleLoginOtp,
+    setAlertState,
+    pinCount
+  } = props
 
-    const theme = useTheme();
-    const [, t] = useLanguage();
-    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
-        600, willVerifyOtpState)
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+    600, willVerifyOtpState)
 
+  const [code, setCode] = useState('')
 
-    const handleOnSubmit = () => {
-        setAlertState({
-            open: true,
-            title: t('CODE_SENT', 'The code has been sent'),
-        })
-        resetOtpLeftTime()
-        onSubmit()
+
+  const handleOnSubmit = () => {
+    setAlertState({
+      open: true,
+      title: t('CODE_SENT', 'The code has been sent'),
+    })
+    resetOtpLeftTime()
+    onSubmit()
+  }
+
+  useEffect(() => {
+    if (otpLeftTime === 0) {
+      setAlertState({
+        open: true,
+        title: t('TIME_IS_UP', 'Time is up'),
+        content: t('PLEASE_RESEND_CODE', 'Please resend code again')
+      })
     }
+  }, [otpLeftTime])
 
-    useEffect(() => {
-        if (otpLeftTime === 0) {
-            setAlertState({
-                open: true,
-                title: t('TIME_IS_UP', 'Time is up'),
-                content: t('PLEASE_RESEND_CODE', 'Please resend code again')
-            })
-        }
-    }, [otpLeftTime])
+  useEffect(() => {
+    if (code?.length === (pinCount || 6)) {
+      handleLoginOtp(code)
+    }
+  }, [code])
 
-    const loginStyle = StyleSheet.create({
-        underlineStyleBase: {
-            width: 45,
-            height: 60,
-            borderWidth: 1,
-            fontSize: 16
-        },
-        underlineStyleHighLighted: {
-            borderColor: theme.colors.primary,
-            color: theme.colors.primary,
-            fontSize: 16
-        },
-    });
+  const loginStyle = StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginVertical: 30
+    },
+    underlineStyleBase: {
+      width: 45,
+      height: 50,
+      borderWidth: 1,
+      fontSize: 16,
+      borderRadius: 8,
+      borderColor: theme.colors.lightGray,
+      textAlign: 'center'
+    },
+    underlineStyleHighLighted: {
+      borderColor: theme.colors.primary,
+      color: theme.colors.primary,
+      fontSize: 16
+    },
+  });
 
-    return (
-        <>
-            <OTPContainer>
-                <OText size={24}>
-                    {formatSeconds(otpLeftTime)}
-                </OText>
-                <OTPInputView
-                    style={{ width: '100%', height: 150 }}
-                    pinCount={pinCount || 6}
-                    codeInputFieldStyle={loginStyle.underlineStyleBase}
-                    codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
-                    onCodeFilled={(code: string) => handleLoginOtp(code)}
-                    selectionColor={theme.colors.primary}
-                />
-                <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
-                    <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
-                        {t('RESEND_CODE', 'Resend code')}
-                    </OText>
-                </TouchableOpacity>
-                <OButton
-                    onClick={() => setWillVerifyOtpState(false)}
-                    bgColor={theme.colors.white}
-                    borderColor={theme.colors.primary}
-                    textStyle={{ color: theme.colors.primary }}
-                    style={{ borderRadius: 8, width: '100%' }}
-                    text={t('CANCEL', 'Cancel')}
-                />
-            </OTPContainer>
-        </>
-    )
+  return (
+    <>
+      <OTPContainer>
+        <OText size={24}>
+          {formatSeconds(otpLeftTime)}
+        </OText>
+        <OtpInputs
+          autofillFromClipboard
+          numberOfInputs={pinCount || 6}
+          style={loginStyle.container}
+          inputStyles={loginStyle.underlineStyleBase}
+          handleChange={setCode}
+        />
+        <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
+          <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
+            {t('RESEND_CODE', 'Resend code')}
+          </OText>
+        </TouchableOpacity>
+        <OButton
+          onClick={() => setWillVerifyOtpState(false)}
+          bgColor={theme.colors.white}
+          borderColor={theme.colors.primary}
+          textStyle={{ color: theme.colors.primary }}
+          style={{ borderRadius: 8, width: '100%' }}
+          text={t('CANCEL', 'Cancel')}
+        />
+      </OTPContainer>
+    </>
+  )
 }

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

@@ -3,5 +3,4 @@ import styled from 'styled-components/native';
 export const OTPContainer = styled.View`
   padding: 20px;
   align-items: center;
-  flex: 1 
 `

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,7 +96,7 @@ 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'
@@ -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) => {
@@ -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
@@ -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
@@ -711,7 +762,7 @@ const LoginFormUI = (props: LoginParams) => {
 										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,78 @@
+import React, { useRef, useState } 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 [isHide, setIsHide] = useState(true)
+    const favoriteArray = ['heart', 'hearto']
+    const icon = type === 'favorite' ? favoriteArray : []
+    const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
+    const onPressLottie = () => {
+        if (!disableAnimation) {
+            setIsHide(false)
+            Animated.timing(animationProgress.current, {
+                toValue,
+                duration: duration || 5000,
+                easing: animationType || Easing.linear,
+                useNativeDriver: useNativeDriver ?? true
+            }).start();
+            hideLottie()
+        }
+        onClick()
+    }
+
+    const hideLottie = () => {
+        setTimeout(() => setIsHide(true), 4500)
+    }
+
+    return (
+        <TouchableOpacity
+            onPress={onPressLottie}
+            style={style}
+        >
+            {!isHide &&
+                <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>
+    )
+}