ordering-ui-react-native 0.18.21 → 0.18.23

package/package.json

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

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

@@ -271,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}
@@ -302,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/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/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/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/Promotions/styles.tsx

@@ -9,6 +9,7 @@ export const PromotionsContainer = styled.View`
 export const WrapperSingleOffer = styled.View`
   flex-direction: column;
   width: 100%;
+  margin-bottom: 30px;
 `
 
 export const SingleOfferContainer = styled.View`
@@ -16,12 +17,12 @@ export const SingleOfferContainer = styled.View`
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `
 
 export const OfferInformation = styled.View`
   justify-content: space-between;
-  max-width: 70%;
+  max-width: 80%;
 `
 
 export const SearchBarContainer = styled.View`

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

@@ -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}

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,