ordering-ui-react-native 0.17.38 → 0.17.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.38",
+  "version": "0.17.39",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -120,7 +120,8 @@
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "toggle-react-native": "^1.1.2",
-    "toggle-switch-react-native": "^3.2.0"
+    "toggle-switch-react-native": "^3.2.0",
+    "lottie-react-native": "4.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",

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

@@ -11,15 +11,14 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
+
 import {
-	Card,
 	BusinessHero,
 	BusinessContent,
-	BusinessCategory,
 	BusinessInfo,
 	Metadata,
 	BusinessState,
@@ -30,8 +29,9 @@ import {
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
-import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation';
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const {
@@ -54,13 +54,19 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
-	const [ { auth }] = useSession()
+	const [{ auth }] = useSession()
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
 	const styles = StyleSheet.create({
+		container: {
+			marginVertical: 20,
+			borderRadius: 7.6,
+			width: '100%',
+			position: 'relative'
+		},
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
 			borderTopRightRadius: 7.6,
@@ -110,7 +116,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 			flexDirection: 'row',
 			alignItems: 'center',
 			justifyContent: 'flex-start',
-		},
+		}
 	});
 
 	const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -152,7 +158,13 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	return (
 		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
-				<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+				<CardAnimation
+					onClick={() => handleBusinessClick(business)}
+					style={[
+						style,
+						styles.container
+					]}
+				>
 					{business?.ribbon?.enabled && (
 						<RibbonBox
 							bgColor={business?.ribbon?.color}
@@ -219,15 +231,15 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 										</OText>
 									</Reviews>
 								)}
-								<TouchableOpacity
-									onPress={handleChangeFavorite}
-								>
-									<IconAntDesign
-										name={business?.favorite ? 'heart' : 'hearto'}
-										color={theme.colors.danger5}
-										size={18}
-									/>
-								</TouchableOpacity>
+								<LottieAnimation
+									type='favorite'
+									onClick={handleChangeFavorite}
+									initialValue={business?.favorite ? 1 : 0}
+									toValue={business?.favorite ? 0 : 1}
+									disableAnimation={!auth}
+									iconProps={{ color: theme.colors.danger5, size: 18 }}
+									isActive={business?.favorite}
+								/>
 							</ReviewAndFavorite>
 						</BusinessInfo>
 						<OText
@@ -266,7 +278,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							)}
 						</Metadata>
 					</BusinessContent>
-				</Card>
+				</CardAnimation>
 			) : (
 				<Placeholder
 					Animation={Fade}

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

@@ -1,12 +1,5 @@
 import styled, { css } from 'styled-components/native';
 
-export const Card = styled.TouchableOpacity`
-  margin-vertical: 20px;
-  border-radius: 7.6px;
-  width: 100%;
-  position: relative;
-`
-
 export const BusinessHero = styled.View`
   position: relative;
   border-top-right-radius: 7.6px;

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

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

package/themes/original/src/components/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,
@@ -23,6 +21,8 @@ import {
   UnreadMessageCounter,
   Price
 } from './styles';
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation';
 
 const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const {
@@ -46,10 +46,16 @@ 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,
@@ -100,6 +106,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,
     }
   });
 
@@ -165,9 +179,9 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   return (
     <>
-      <Container
-        onPress={() => handleClickViewOrder(order?.uuid)}
-        activeOpacity={0.7}
+      <CardAnimation
+        onClick={() => handleClickViewOrder(order?.uuid)}
+        style={[styles.container]}
       >
         <InnerContainer>
           {(!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
@@ -280,21 +294,20 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                 </OText>
               </View>
               {!isMessageView && (
-                <TouchableOpacity
-                  onPress={handleChangeFavorite}
-                  style={{ marginTop: 5 }}
-                >
-                  <IconAntDesign
-                    name={order?.favorite ? 'heart' : 'hearto'}
-                    color={theme.colors.danger5}
-                    size={16}
-                  />
-                </TouchableOpacity>
+                <LottieAnimation
+                  type='favorite'
+                  onClick={handleChangeFavorite}
+                  initialValue={order?.favorite ? 1 : 0}
+                  toValue={order?.favorite ? 0 : 1}
+                  style={{ marginBottom: 5 }}
+                  iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
+                  isActive={order?.favorite}
+                />
               )}
             </ContentFooter>
           </CardInfoWrapper>
         </InnerContainer>
-      </Container>
+      </CardAnimation>
       <OAlert
         open={confirm.open}
         title={confirm.title}

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

@@ -1,12 +1,5 @@
 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;
-`
-
 export const InnerContainer = styled.View`
   flex-direction: row;
   width: 100%;

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

@@ -11,14 +11,15 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet, View, TouchableOpacity, Image, Animated } from 'react-native';
+import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
+import { StyleSheet, View } from 'react-native';
 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 IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { shape } from '../../utils';
+import { LottieAnimation } from '../LottieAnimation';
+import { CardAnimation } from '../shared/CardAnimation'
 
 function SingleProductCardPropsAreEqual(prevProps: any, nextProps: any) {
 	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) &&
@@ -47,10 +48,16 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
-			borderRadius: 7.6,
 			borderColor: theme.colors.border,
 			marginBottom: 25,
-			minHeight: hideAddButton ? 100 : 165
+			minHeight: hideAddButton ? 100 : 165,
+			flex: 1,
+			flexDirection: hideAddButton ? 'row' : 'column',
+			justifyContent: 'space-between',
+			alignItems: 'center',
+			padding: 12,
+			borderRadius: 10,
+			position: 'relative'
 		},
 		titleWrapper: {
 			flexDirection: 'row',
@@ -150,14 +157,13 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	return (
 		<InView style={{ minHeight: hideAddButton ? 125 : 190 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
-				<CardContainer
-					showAddButton={!hideAddButton}
+				<CardAnimation
+					onClick={() => handleClickproduct()}
 					style={[
 						styles.container,
 						(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
-						(style && { ...style }),
+						(style && { ...style })
 					]}
-					onPress={() => handleClickproduct()}
 				>
 					<View style={{ flexDirection: 'row' }}>
 						{productAddedToCartLength > 0 && (
@@ -178,15 +184,15 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									{product?.name}
 								</OText>
 								{!isPreviously && (
-									<TouchableOpacity
-										onPress={handleChangeFavorite}
-									>
-										<IconAntDesign
-											name={product?.favorite ? 'heart' : 'hearto'}
-											color={theme.colors.danger5}
-											size={18}
-										/>
-									</TouchableOpacity>
+									<LottieAnimation
+										type='favorite'
+										onClick={handleChangeFavorite}
+										initialValue={product?.favorite ? 1 : 0}
+										toValue={product?.favorite ? 0 : 1}
+										disableAnimation={!auth}
+										iconProps={{ color: theme.colors.danger5, size: 18 }}
+										isActive={product?.favorite}
+									/>
 								)}
 							</View>
 							<PricesContainer>
@@ -236,20 +242,20 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</RibbonBox>
 							)}
 							{product?.images ? (
-                <FastImage
-                  style={styles.productStyle}
-                  source={{
-                    uri: optimizeImage(product?.images, 'h_250,c_limit'),
-                    priority: FastImage.priority.normal,
-                  }}
-                  resizeMode={FastImage.resizeMode.cover}
-                />
-              ) : (
-                <OIcon
-                  src={theme?.images?.dummies?.product}
-                  style={styles.productStyle}
-                />
-              )}
+								<FastImage
+									style={styles.productStyle}
+									source={{
+										uri: optimizeImage(product?.images, 'h_250,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							) : (
+								<OIcon
+									src={theme?.images?.dummies?.product}
+									style={styles.productStyle}
+								/>
+							)}
 						</LogoWrapper>
 
 						{(isSoldOut || maxProductQuantity <= 0) && (
@@ -275,7 +281,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							text={t('ADD', 'Add')}
 						/>
 					)}
-				</CardContainer>
+				</CardAnimation>
 			) : (
 				<View style={{ marginBottom: 28, padding: 12, height: hideAddButton ? 125 : 165 }}>
 					<Placeholder style={{ padding: 5 }} Animation={Fade}>

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

@@ -1,14 +1,5 @@
 import styled, { css } from 'styled-components/native'
 
-export const CardContainer = styled.TouchableOpacity`
-  flex: 1;
-  flex-direction: ${(props : any) => props.showAddButton ? 'column' : 'row'};
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  border-radius: 10px;
-  position: relative;
-`
 export const CardInfo = styled.View`
   padding-start: 3px;
   flex: 1;

package/themes/original/src/components/shared/CardAnimation.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { StyleSheet, ViewStyle } from 'react-native'
+import styled from 'styled-components/native'
+
+const CardContainerTouchable = styled.TouchableOpacity``
+
+interface Props {
+    children: React.ReactChildren | Element,
+    style?: Array<ViewStyle> | any,
+    onClick: any
+}
+
+export const CardAnimation = (props : Props) => {
+    const {
+        children,
+        onClick,
+        style
+    } = props
+    const [isPressed, setIsPressed] = useState(false)
+    const styles = StyleSheet.create({
+        cardAnimation: {
+            elevation: isPressed ? 2 : 0,
+            shadowColor: '#888',
+            shadowOffset: { width: 0, height: isPressed ? 2 : 0 },
+            shadowRadius: 18,
+            shadowOpacity: isPressed ? 0.8 : 0,
+            borderRadius: 12,
+        }
+    })
+
+    const styleProvided = style || []
+    return (
+        <CardContainerTouchable
+            onPress={onClick}
+            activeOpacity={0.8}
+            delayPressIn={20}
+            onPressIn={() => setIsPressed(true)}
+            onPressOut={() => setIsPressed(false)}
+            style={[
+                ...styleProvided,
+                styles.cardAnimation
+            ]}
+        >
+            {children}
+        </CardContainerTouchable>
+    )
+}