ordering-ui-react-native 0.18.20 → 0.18.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.20",
+  "version": "0.18.22",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -522,7 +522,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             style={{ borderRadius: 7, height: 45 }}
             parentStyle={{ width: '100%' }}
             textStyle={{ color: '#FFF', fontSize: 18 }}
-            isDisabled={!rejectReason && showTextArea}
+            isDisabled={showTextArea && !comments}
             onClick={() => handleAcceptOrReject()}
           />
         </View>

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

@@ -5,7 +5,7 @@ import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
@@ -351,13 +351,15 @@ export const BusinessBasicInformation = (
 									{business?.ribbon?.enabled && (
 										<RibbonBox
 											bgColor={business?.ribbon?.color}
+											colorText={lightenDarkenColor(business?.ribbon?.color)}
+											borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 											isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 											isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 										>
 											<OText
 												size={10}
 												weight={'400'}
-												color={theme.colors.white}
+												color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 												numberOfLines={2}
 												ellipsizeMode='tail'
 												lineHeight={13}

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

@@ -64,6 +64,14 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const SocialListWrapper = styled.ScrollView`

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

@@ -14,7 +14,7 @@ import { OIcon, OText } from '../shared';
 import { Dimensions, StyleSheet, Vibration, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 
 import {
 	BusinessHero,
@@ -185,13 +185,15 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					{business?.ribbon?.enabled && (
 						<RibbonBox
 							bgColor={business?.ribbon?.color}
+							colorText={lightenDarkenColor(business?.ribbon?.color)}
+							borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 						>
 							<OText
 								size={10}
 								weight={'400'}
-								color={theme.colors.white}
+								color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 								numberOfLines={2}
 								ellipsizeMode='tail'
 								lineHeight={13}
@@ -207,7 +209,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								source={(businessHeader || business?.header || typeof theme.images.dummies.businessHeader === 'string') ? {
 									uri: optimizeImage(businessHeader || business?.header || theme.images.dummies.businessHeader, 'h_500,c_limit'),
 									priority: FastImage.priority.normal,
-								} : theme.images.dummies.businessHeader}								
+								} : theme.images.dummies.businessHeader}
 								resizeMode={FastImage.resizeMode.cover}
 							/>
 						)}
@@ -269,8 +271,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 										<LottieAnimation
 											type='favorite'
 											onClick={handleChangeFavorite}
-											initialValue={business?.favorite ? 0.75 : 0}
-											toValue={business?.favorite ? 0 : 0.75}
+											initialValue={business?.favorite ? 0.5 : 0}
+											toValue={business?.favorite ? 0 : 0.5}
 											disableAnimation={!auth}
 											iconProps={{ color: theme.colors.danger5, size: 18 }}
 											isActive={business?.favorite}
@@ -300,8 +302,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 										<LottieAnimation
 											type='favorite'
 											onClick={handleChangeFavorite}
-											initialValue={business?.favorite ? 0.75 : 0}
-											toValue={business?.favorite ? 0 : 0.75}
+											initialValue={business?.favorite ? 0.5 : 0}
+											toValue={business?.favorite ? 0 : 0.5}
 											disableAnimation={!auth}
 											iconProps={{ color: theme.colors.danger5, size: 18 }}
 											isActive={business?.favorite}

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

@@ -72,6 +72,14 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const OfferBox = styled.View`

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

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -101,13 +101,15 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			{business?.ribbon?.enabled && (
 				<RibbonBox
 					bgColor={business?.ribbon?.color}
+					colorText={lightenDarkenColor(business?.ribbon?.color)}
+					borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 				>
 					<OText
 						size={10}
 						weight={'400'}
-						color={theme.colors.white}
+						color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 						numberOfLines={2}
 						ellipsizeMode='tail'
 						lineHeight={13}

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

@@ -70,4 +70,12 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `

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

@@ -275,7 +275,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           }}
         />
       )}
-
       {businessesSearchList.businesses?.length > 0 && (
         <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
           <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
@@ -372,7 +371,11 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   onProductClick={(product: any) => onProductClick(business, category?.id, product?.id, product)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
-                  style={{ width: screenWidth - 80, maxWidth: screenWidth - 80, marginRight: 20 }}
+                  style={{
+                    width: screenWidth - (category?.products?.length > 1 ? 120 : 80),
+                    maxWidth: screenWidth - (category?.products?.length > 1 ? 120 : 80),
+                    marginRight: 20
+                  }}
                 />
               )))}
 

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

@@ -9,7 +9,7 @@ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { shape } from '../../utils'
+import { lightenDarkenColor, shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
 import { OrderItAgain } from '../OrderItAgain'
 import { SubcategoriesComponentMemoized } from './SubcategoriesComponent';
@@ -186,13 +186,15 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {category?.ribbon?.enabled && (
                     <RibbonBox
                       bgColor={category?.ribbon?.color}
+                      colorText={lightenDarkenColor(category?.ribbon?.color)}
+                      borderRibbon={lightenDarkenColor(category?.ribbon?.color)}
                       isRoundRect={category?.ribbon?.shape === shape?.rectangleRound}
                       isCapsule={category?.ribbon?.shape === shape?.capsuleShape}
                     >
                       <OText
                         size={10}
                         weight={'400'}
-                        color={theme.colors.white}
+                        color={lightenDarkenColor(category?.ribbon?.color) ? theme.colors.black : theme.colors.white}
                         numberOfLines={2}
                         ellipsizeMode='tail'
                         lineHeight={13}

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

@@ -30,6 +30,14 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const SubCategoriesContainer = styled.View`

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -585,7 +585,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						setBusinessTypes={setBusinessTypes}
 					/>
 				)}
-				{!businessesList.loading && businessesList.businesses.length === 0 && (
+				{!businessesList.loading && businessesList.businesses.length === 0 && businessesList?.fetched && (
 					<NotFoundSource
 						content={t(
 							'NOT_FOUND_BUSINESSES',
@@ -618,7 +618,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						/>
 					)
 				)}
-				{businessesList.loading && (
+				{(businessesList.loading || !businessesList?.fetched) && (
 					<>
 						{[
 							...Array(

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

@@ -7,6 +7,7 @@ import { CCContainer, CCNotCarts, CCList, CheckoutAction } from './styles';
 import { Cart } from '../Cart';
 import { OButton, OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
+import { NotFoundSource } from '../NotFoundSource';
 
 export const CartContent = (props: any) => {
 	const {
@@ -103,21 +104,12 @@ export const CartContent = (props: any) => {
 			)}
 			{(!carts || carts?.length === 0) && (
 				<CCNotCarts>
-					<OText size={24} style={{ textAlign: 'center' }}>
-						{t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
-					</OText>
-					<OButton
-						text={t('START_SHOPPING', 'Start shopping')}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{
-							color: theme.colors.white,
-							fontSize: 14,
-							paddingRight: 0
-						}}
-						style={{ height: 35, marginVertical: 20, borderRadius: 8 }}
-						imgRightSrc={null}
-						onClick={() => onNavigationRedirect('BusinessList')}
+					<NotFoundSource
+						hideImage
+						btnStyle={{ borderRadius: 8 }}
+						content={t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
+						btnTitle={t('START_SHOPPING', 'Start shopping')}
+						onClickButton={() => onNavigationRedirect('BusinessList')}
 					/>
 				</CCNotCarts>
 			)}

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

@@ -5,13 +5,9 @@ export const CCContainer = styled.View`
 `
 
 export const CCNotCarts = styled.View`
-  height: 300px;
-  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 80%;
-  margin: auto;
+	align-items: center;
+	margin-top: 40px;
 `
 
 export const CCList = styled.ScrollView`

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

@@ -822,6 +822,7 @@ const CheckoutUI = (props: any) => {
 									setIsOpen(false)
 									handlePlaceOrder(null, true)
 								}}
+								setIsOpen={setIsOpen}
 							/>
 						</View>
 					</OModal>

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

@@ -222,7 +222,7 @@ const LoginFormUI = (props: LoginParams) => {
 	};
 
 	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+		onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
 	const handleOpenRecaptcha = () => {

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

@@ -5,74 +5,93 @@ 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 }
+  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 {
+    initialValue,
+    onClick,
+    disableAnimation,
+    toValue,
+    style,
+    duration,
+    type,
+    isActive,
+    useNativeDriver,
+    animationType,
+    iconProps
+  } = props
+
+  const theme = useTheme()
+  const animationProgress = useRef(new Animated.Value(initialValue))
+  const favRef = useRef<Lottie>(null)
+  const [isHide, setIsHide] = useState(true)
 
-    const hideLottie = () => {
-        setTimeout(() => setIsHide(true), 4500)
+  const favoriteArray = ['heart', 'hearto']
+  const icon = type === 'favorite' ? favoriteArray : []
+  const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
+
+  const onPressLottie = () => {
+    if (!disableAnimation) {
+      if (type === 'favorite') {
+        favRef.current?.play()
+      } else {
+        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}
+  return (
+    <TouchableOpacity
+      onPress={onPressLottie}
+      style={style}
+    >
+      {type === 'favorite' ? (
+        <Lottie
+          ref={favRef}
+          progress={initialValue}
+          style={{ width: 20, height: 20 }}
+          source={animationGif}
+        />
+      ) : (
+        <>
+          {!isHide &&
+            <Lottie
+              progress={animationProgress.current}
+              source={animationGif}
             />
-        </TouchableOpacity>
-    )
+          }
+          <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/NotFoundSource/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { View } from 'react-native'
-import { OButton, OIcon, OText } from '../shared'
+import { OButton, OText } from '../shared'
 import { NotFoundSourceParams } from '../../types'
 import { useTheme } from 'styled-components/native';
+import Foundation from 'react-native-vector-icons/Foundation'
 import {
 	NotFound,
 	NotFoundImage
@@ -10,34 +11,37 @@ import {
 
 export const NotFoundSource = (props: NotFoundSourceParams) => {
 	const {
-		image,
+		hideImage,
 		content,
 		btnTitle,
+		btnStyle,
 		conditioned,
 		onClickButton
 	} = props
 
 	const theme = useTheme();
 
-	const errorImage = image || theme.images.general.notFound
-	const isUrl = typeof errorImage === 'string' && errorImage.includes('http')
-
 	return (
 		<NotFound>
-			{errorImage && (
+			{!hideImage && (
 				<NotFoundImage>
-					<OIcon url={isUrl && errorImage} src={!isUrl && errorImage} width={260} height={220} />
+					<Foundation
+						name='page-search'
+						color={theme.colors.primary}
+						size={60}
+						style={{ marginBottom: 10 }}
+					/>
 				</NotFoundImage>
 			)}
-			{content && conditioned && !errorImage && <OText color={theme.colors.disabled} size={18} style={{ textAlign: 'center' }}>{content}</OText>}
-			{content && !conditioned && <OText color={theme.colors.disabled} size={18} style={{ textAlign: 'center' }}>{content}</OText>}
+			{content && conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
+			{content && !conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
 			{!onClickButton && props.children && (
 				props.children
 			)}
 			{onClickButton && (
 				<View style={{ marginTop: 10, width: '100%' }}>
 					<OButton
-						style={{ width: '100%', height: 50 }}
+						style={{ width: '100%', height: 50, ...btnStyle }}
 						bgColor={theme.colors.primary}
 						borderColor={theme.colors.primary}
 						onClick={() => onClickButton()}

package/themes/original/src/components/OrdersOption/PreviousProductsOrdered/index.tsx

@@ -23,21 +23,21 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
     },
   });
 
-  const ProductList = ({ style }: any) => {
+  const ProductList = () => {
     return (
       <>
         {products?.filter((product : any) => product?.business?.available)?.map((product: any) => (
-            <SingleProductCard
-              key={product?.id}
-              isProductId
-              isSoldOut={(product.inventoried && !product.quantity)}
-              product={product}
-              businessId={product?.business?.id}
-              onProductClick={onProductClick}
-              style={style}
-              productAddedToCartLength={0}
-              handleUpdateProducts={handleUpdateProducts}
-            />
+          <SingleProductCard
+            key={product?.id}
+            isProductId
+            isSoldOut={(product.inventoried && !product.quantity)}
+            product={product}
+            businessId={product?.business?.id}
+            onProductClick={onProductClick}
+            style={{ width: windowWidth - (products?.length > 1 ? 120 : 80), marginRight: 20 }}
+            productAddedToCartLength={0}
+            handleUpdateProducts={handleUpdateProducts}
+          />
         ))}
       </>
     )
@@ -45,7 +45,7 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
-        <ProductList style={{ width: windowWidth - 80, marginRight: 20 }} />
+        <ProductList />
       ) : (
         <ListWrapper isBusinessesSearchList={isBusinessesSearchList}>
           <ProductList />

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

@@ -10,6 +10,7 @@ import { PreviousProductsOrdered } from './PreviousProductsOrdered'
 import { OptionTitle, NoOrdersWrapper } from './styles'
 import { OrdersOptionParams } from '../../types'
 import { _setStoreData } from '../../providers/StoreUtil';
+import { NotFoundSource } from '../NotFoundSource';
 import {
 	Placeholder,
 	PlaceholderLine,
@@ -180,16 +181,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		<>
 			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
 				<NoOrdersWrapper>
-					<OText size={14} numberOfLines={1}>
-						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
-					</OText>
-					<OButton
-						text={t('ORDER_NOW', 'Order now')}
-						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
-						textStyle={{ color: 'white', fontSize: 14 }}
-						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
+					<NotFoundSource
+						hideImage
+						btnStyle={{ borderRadius: 8 }}
+						content={t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
+						btnTitle={t('ORDER_NOW', 'Order now')}
+						onClickButton={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
 					/>
-
 				</NoOrdersWrapper>
 			)}
 			{((ordersLength?.activeOrdersLength > 0 && activeOrders) || (ordersLength?.previousOrdersLength > 0 && !activeOrders)) && (

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

@@ -10,5 +10,5 @@ export const OptionTitle = styled.View`
 export const NoOrdersWrapper = styled.View`
 	flex-direction: column;
 	align-items: center;
-	margin-top: 50px;
+	margin-top: 60px;
 `

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

@@ -323,7 +323,7 @@ const SignupFormUI = (props: SignupParams) => {
 	};
 
 	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+		onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
 	const handleOpenTermsUrl = async (url: any) => {

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

@@ -352,8 +352,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                 <LottieAnimation
                   type='favorite'
                   onClick={handleChangeFavorite}
-                  initialValue={order?.favorite ? 0.75 : 0}
-                  toValue={order?.favorite ? 0 : 0.75}
+                  initialValue={order?.favorite ? 0.5 : 0}
+                  toValue={order?.favorite ? 0 : 0.5}
                   style={{ marginBottom: 5 }}
                   iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
                   isActive={order?.favorite}

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

@@ -17,7 +17,7 @@ import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OText } from '../shared';
 import FastImage from 'react-native-fast-image'
-import { shape } from '../../utils';
+import { lightenDarkenColor, shape } from '../../utils';
 import { LottieAnimation } from '../LottieAnimation';
 import { CardAnimation } from '../shared/CardAnimation'
 
@@ -109,7 +109,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		},
 		productTagsStyle: {
 			width: 30,
-    		height: 30,
+			height: 30,
 			marginRight: 5
 		}
 	});
@@ -201,8 +201,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									<LottieAnimation
 										type='favorite'
 										onClick={handleChangeFavorite}
-										initialValue={product?.favorite ? 0.75 : 0}
-										toValue={product?.favorite ? 0 : 0.75}
+										initialValue={product?.favorite ? 0.5 : 0}
+										toValue={product?.favorite ? 0 : 0.5}
 										disableAnimation={!auth}
 										iconProps={{ color: theme.colors.danger5, size: 18 }}
 										isActive={product?.favorite}
@@ -222,7 +222,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 										showsHorizontalScrollIndicator={false}
 										horizontal
 										style={{ marginLeft: 10 }}
-										contentContainerStyle={{flexGrow: 1}}
+										contentContainerStyle={{ flexGrow: 1 }}
 									>
 										{product?.tags.map((tag: any, i: any) => (
 											<TouchableWithoutFeedback key={i}>
@@ -266,13 +266,15 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={product?.ribbon?.color}
+									colorText={lightenDarkenColor(product?.ribbon?.color)}
+									borderRibbon={lightenDarkenColor(product?.ribbon?.color)}
 									isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
 									isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
 								>
 									<OText
 										size={textSize}
 										weight={'400'}
-										color={theme.colors.white}
+										color={lightenDarkenColor(product?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 										numberOfLines={2}
 										ellipsizeMode='tail'
 										lineHeight={13}

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

@@ -18,7 +18,7 @@ export const QuantityContainer = styled.View`
   background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
-  ${({businessSingleId} : any) => businessSingleId ? css`
+  ${({ businessSingleId }: any) => businessSingleId ? css`
     left: 0;
   ` : css`
     right: 0;
@@ -66,4 +66,12 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `

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

@@ -34,7 +34,8 @@ const UserDetailsUI = (props: any) => {
 		isCheckout,
 		handleSendVerifyCode,
 		verifyPhoneState,
-		setFormState
+		setFormState,
+		setIsOpen
 	} = props
 
 	const theme = useTheme();
@@ -209,6 +210,7 @@ const UserDetailsUI = (props: any) => {
 							isCheckout={isCheckout}
 							setWillVerifyOtpState={setWillVerifyOtpState}
 							setIsSubmit={setIsSubmit}
+							setIsOpen={setIsOpen}
 						/>
 					)}
 				</UDContainer>

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

@@ -30,7 +30,8 @@ export const UserFormDetailsUI = (props: any) => {
 		hideUpdateButton,
 		setWillVerifyOtpState,
 		handlePlaceOrderAsGuest,
-		isCheckout
+		isCheckout,
+		setIsOpen
 	} = props;
 
 	const theme = useTheme();
@@ -221,10 +222,7 @@ export const UserFormDetailsUI = (props: any) => {
 			formState.result?.result &&
 				showToast(ToastType.Error, formState.result?.result[0]);
 			if (isCheckout) {
-				setAlertState({
-					open: true,
-					content: formState.result?.result[0]
-				})
+				setIsOpen && setIsOpen(false)
 				cleanFormState && cleanFormState({ changes: {} })
 			}
 		}
@@ -476,13 +474,7 @@ export const UserFormDetailsUI = (props: any) => {
 					/>
 				</ScrollView>
 			</OModal>
-			<Alert
-				open={alertState.open}
-				title=''
-				content={[alertState.content]}
-				onAccept={() => setAlertState({ open: false, content: '' })}
-				onClose={() => setAlertState({ open: false, content: '' })}
-			/>
+			
 		</>
 	);
 };

package/themes/original/src/types/index.tsx

@@ -353,6 +353,8 @@ export interface NotFoundSourceParams {
 	conditioned?: boolean,
 	onClickButton?: any,
 	children?: any
+	hideImage?: any
+	btnStyle?: any
 }
 export interface OrdersOptionParams {
 	orderList?: any,

package/themes/original/src/utils/index.tsx

@@ -564,8 +564,46 @@ export const getOrderStatus = (s: string) => {
       image: theme.images.order.status8
     }
   ];
-  
+
   const objectStatus = orderStatus.find((o) => o.key === status);
 
   return objectStatus && objectStatus;
 }
+
+/**
+ * Function to get brightness of color.
+ */
+export const lightenDarkenColor = (color: any) => {
+
+  let r, g, b, hsp
+  if (!color) return
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/)
+
+    r = color[1]
+    g = color[2]
+    b = color[3]
+  } else {
+    // If RGB --> Convert it to HEX
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'))
+
+    r = color >> 16
+    g = color >> 8 & 255
+    b = color & 255
+  }
+
+  // HSP (Highly Sensitive Poo) equation
+  hsp = Math.sqrt(
+    0.299 * (r * r) +
+    0.587 * (g * g) +
+    0.114 * (b * b)
+  )
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 197) {
+    return true //is light color
+  } else {
+    return false
+  }
+}