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

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,
@@ -244,6 +245,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 +263,7 @@ const SignupFormUI = (props: SignupParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
+			Vibration.vibrate()
 			return;
 		}
 		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
@@ -329,6 +332,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 +340,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 +353,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 +401,7 @@ const SignupFormUI = (props: SignupParams) => {
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
+			Vibration.vibrate()
 		}
 	}, [errors])
 
@@ -398,6 +430,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;
 			}
@@ -438,7 +471,6 @@ const SignupFormUI = (props: SignupParams) => {
 				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 				showCall={false}
 				btnStyle={{ paddingLeft: 0 }}
-				style={{ flexDirection: 'column', alignItems: 'flex-start' }}
 				titleWrapStyle={{ paddingHorizontal: 0 }}
 				titleStyle={{ marginLeft: 0, marginRight: 0 }}
 			/>
@@ -610,7 +642,6 @@ const SignupFormUI = (props: SignupParams) => {
 											}
 										})}
 										forwardRef={phoneRef}
-										defaultCode={formState?.country_code ?? formState?.country_phone_code ?? null}
 										changeCountry={(val: any) => setPhoneInputData({
 											...phoneInputData,
 											phone: {
@@ -627,36 +658,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 +893,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?.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}

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

@@ -8,12 +8,10 @@ import {
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OButton } from '../shared';
-import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { SingleOrderCardParams } from '../../types';
 import { OAlert } from '../../../../../src/components/shared'
 
 import {
-  Container,
   InnerContainer,
   Logo,
   CardInfoWrapper,
@@ -21,8 +19,11 @@ import {
   ButtonWrapper,
   ContentFooter,
   UnreadMessageCounter,
-  Price
+  Price,
+  MultiLogosContainer
 } from './styles';
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation';
 
 const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const {
@@ -46,15 +47,26 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const [reorderSelected, setReorderSelected] = useState<number | null>(null);
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+  const [isPressed, setIsPressed] = useState(false)
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
 
   const styles = StyleSheet.create({
+    container: {
+      borderRadius: 7.6,
+      marginBottom: 10,
+      paddingVertical: 5,
+    },
     logo: {
       borderRadius: 8,
       width: 64,
       height: 64
     },
+    minilogo: {
+      borderRadius: 8,
+      width: 40,
+      height: 40
+    },
     logoWrapper: {
       overflow: 'hidden',
       backgroundColor: 'white',
@@ -72,9 +84,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       marginRight: 2,
     },
     reorderLoading: {
-      width: 80,
-      height: 40,
-      borderRadius: 10,
+      height: 23,
+      paddingLeft: 20,
+      paddingRight: 20,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 0,
     },
     reorderbutton: {
       height: 23,
@@ -100,6 +116,14 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
     infoText: {
       flexDirection: 'row',
       alignItems: 'center'
+    },
+    cardAnimation: {
+      elevation: isPressed ? 2 : 0,
+      shadowColor: '#888',
+      shadowOffset: { width: 0, height: isPressed ? 2 : 0 },
+      shadowRadius: 18,
+      shadowOpacity: isPressed ? 0.8 : 0,
+      borderRadius: 12,
     }
   });
 
@@ -127,11 +151,12 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           order: {
             id: order?.id,
             business_id: order?.business_id,
-            logo: order?.business?.logo,
+            logo: order?.business?.length > 1 ? order?.business?.map?.((business: any) => business?.logo) : order?.business?.logo,
             driver: order?.driver,
             products: order?.products,
             review: order?.review,
-            user_review: order?.user_review
+            user_review: order?.user_review,
+            business: order?.business
           },
         });
       return
@@ -144,9 +169,16 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       onNavigationRedirect('OrderDetails', { orderId: order?.uuid });
   };
 
-  const handleClickViewOrder = (uuid: string) => {
-    onNavigationRedirect &&
-      onNavigationRedirect('OrderDetails', { orderId: uuid });
+  const handleClickViewOrder = (order: any) => {
+    if (isMessageView) {
+      handleClickOrder(order?.uuid)
+      return
+    }
+    if (order?.cart_group_id) {
+      onNavigationRedirect?.('MultiOrdersDetails', { orderId: order?.cart_group_id });
+    } else {
+      onNavigationRedirect?.('OrderDetails', { orderId: order?.uuid });
+    }
   };
 
   const handleChangeFavorite = () => {
@@ -155,32 +187,65 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const handleOriginalReorder = () => {
     setConfirm({ ...confirm, open: false, title: null })
-    setReorderSelected(order?.id);
-    handleReorder && handleReorder(order?.id);
   }
 
+  const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
+  const hideDate = theme?.orders?.components?.date?.hidden
+  const hideBusinessName = theme?.orders?.components?.business_name?.hidden
+  const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
+  const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
+  const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
+  const hideFavorite = theme?.orders?.components?.favorite?.hidden
+  const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
+
   return (
     <>
-      <Container
-        onPress={() => handleClickViewOrder(order?.uuid)}
-        activeOpacity={0.7}
+      <CardAnimation
+        onClick={() => handleClickViewOrder(order)}
+        style={[styles.container]}
       >
         <InnerContainer>
-          {!!order.business?.logo && (
-            <Logo style={styles.logoWrapper}>
-              <OIcon
-                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                style={styles.logo}
-              />
-            </Logo>
+          {!hideBusinessLogo && (!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
+            <>
+              {order?.business?.length > 1 ? (
+                <MultiLogosContainer>
+                  {order?.business?.map((business: any, i: number) => i < 2 && (
+                    <Logo
+                      isMulti
+                      key={business?.id}
+                      style={styles.logoWrapper}
+                    >
+                      <OIcon
+                        url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                        src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                        style={styles.minilogo}
+                      />
+                    </Logo>
+                  ))}
+                  {order?.business?.length > 1 && (order?.business?.length - 2) > 0 && (
+                    <OText mRight={3}> + {order?.business?.length - 2}</OText>
+                  )}
+                </MultiLogosContainer>
+              ) : (
+                <Logo style={styles.logoWrapper}>
+                  <OIcon
+                    url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+                    src={optimizeImage(!order.business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                    style={styles.logo}
+                  />
+                </Logo>
+              )}
+            </>
           )}
           <CardInfoWrapper>
             <ContentHeader>
-              <View style={{ flex: 1 }}>
-                <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-                  {order.business?.name}
-                </OText>
-              </View>
+              {(order?.business?.length > 1 && !hideOrderNumber) || (!order?.business?.length && !hideBusinessName) && (
+                <View style={{ flex: 1 }}>
+                  <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+                    {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
+                  </OText>
+                </View>
+              )}
               {!!!pastOrders && (
                 <>
                   {isMessageView ? (
@@ -204,7 +269,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
               )}
               {!!pastOrders && (
                 <ButtonWrapper>
-                  {allowedOrderStatus.includes(parseInt(order?.status)) &&
+                  {!hideReviewOrderButton &&
+                    allowedOrderStatus.includes(parseInt(order?.status)) &&
                     !order.review && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
@@ -214,7 +280,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {order.cart && (
+                  {order.cart && !hideReorderButton && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}
@@ -234,7 +300,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
             <ContentFooter>
               <View style={{ flex: 1 }}>
                 <View style={styles.infoText}>
-                  {!!!pastOrders && (
+                  {(!!!pastOrders || order?.business?.length > 1) && !hideOrderNumber && (
                     <>
                       <OText
                         size={10}
@@ -244,7 +310,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {t('ORDER_NO', 'Order No') + '.'}
+                        {order?.business?.length > 1 ? order?.business?.length : (t('ORDER_NO', 'Order No') + '.')}
                       </OText>
                       <OText
                         size={10}
@@ -253,41 +319,50 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order.id + ` \u2022 `}
+                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : order.id + ` \u2022 `}
                       </OText>
                     </>
                   )}
+                  {!hideDate && (
+                    <OText
+                      size={10}
+                      lineHeight={15}
+                      color={theme.colors.textSecondary}
+                      style={{ marginVertical: 3 }}
+                      numberOfLines={1}>
+                      {
+                        pastOrders
+                          ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
+                          : order?.eta_time + 'min'
+                      }
+                    </OText>
+                  )}
+                </View>
+                {!hideOrderStatus && (
                   <OText
+                    color={theme.colors.primary}
                     size={10}
                     lineHeight={15}
-                    color={theme.colors.textSecondary}
-                    style={{ marginVertical: 3 }}
                     numberOfLines={1}>
-                    {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
+                    {getOrderStatus(order.status)?.value}
                   </OText>
-                </View>
-                <OText
-                  color={theme.colors.primary}
-                  size={10}
-                  lineHeight={15}
-                  numberOfLines={1}>
-                  {getOrderStatus(order.status)?.value}
-                </OText>
+                )}
               </View>
-              <TouchableOpacity
-                onPress={handleChangeFavorite}
-                style={{ marginTop: 5 }}
-              >
-                <IconAntDesign
-                  name={order?.favorite ? 'heart' : 'hearto'}
-                  color={theme.colors.danger5}
-                  size={16}
+              {!isMessageView && !order?.business?.length && !hideFavorite && (
+                <LottieAnimation
+                  type='favorite'
+                  onClick={handleChangeFavorite}
+                  initialValue={order?.favorite ? 0.75 : 0}
+                  toValue={order?.favorite ? 0 : 0.75}
+                  style={{ marginBottom: 5 }}
+                  iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
+                  isActive={order?.favorite}
                 />
-              </TouchableOpacity>
+              )}
             </ContentFooter>
           </CardInfoWrapper>
         </InnerContainer>
-      </Container>
+      </CardAnimation>
       <OAlert
         open={confirm.open}
         title={confirm.title}

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

@@ -1,11 +1,4 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.TouchableOpacity`
-  border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-  margin-bottom: 10px;
-  padding-vertical: 5px;
-`
+import styled, { css } from 'styled-components/native'
 
 export const InnerContainer = styled.View`
   flex-direction: row;
@@ -15,6 +8,9 @@ export const InnerContainer = styled.View`
 export const Logo = styled.View`
 	border-radius: 7.6px;
   margin-right: 12px;
+  ${({ isMulti } : any) => isMulti && css`
+      margin-right: 5px;
+    `}
 `
 
 export const CardInfoWrapper = styled.View`
@@ -52,3 +48,9 @@ export const Price = styled.View`
   margin-left: 10px;
   width: 30%;
 `
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+`