ordering-ui-react-native 0.16.64 → 0.16.67

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
@@ -11,7 +11,7 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
@@ -59,6 +59,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [, t] = useLanguage();
 	const theme = useTheme()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -144,8 +146,25 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
+		fadeIn()
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
 				<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
 					{business?.ribbon?.enabled && (
@@ -167,6 +186,13 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
+					<Animated.View
+						style={[
+							{
+								opacity: fadeAnim
+							}
+						]}
+					>
 						<FastImage
 							style={{ height: 120 }}
 							source={{
@@ -175,6 +201,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
+					</Animated.View>
 						{(businessFeatured ?? business?.featured) && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />

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

@@ -129,7 +129,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               onProductClick={() => onProductClick(product)}
               productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
               handleUpdateProducts={handleUpdateProducts}
-							navigation={navigation}
+              navigation={navigation}
             />
           ))
       }

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CContainer, CheckoutAction, Divider } from './styles';
+import { CContainer, CheckoutAction, Divider, DriverTipsContainer } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -25,6 +25,7 @@ import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
 import { OAlert } from '../../../../../src/components/shared'
 import { PlaceSpot } from '../PlaceSpot'
+import { DriverTips } from '../DriverTips'
 
 const CartUI = (props: any) => {
   const {
@@ -66,6 +67,10 @@ const CartUI = (props: any) => {
   const businessId = business?.business_id ?? null
   const placeSpotTypes = [4]
 
+  const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
+
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
     : parseDate(orderState?.option?.moment, { outputFormat: 'YYYY-MM-DD HH:mm' })
@@ -355,6 +360,32 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
 
+            {isMultiCheckout &&
+              cart &&
+              cart?.valid &&
+              orderState?.options?.type === 1 &&
+              cart?.status !== 2 &&
+              validationFields?.fields?.checkout?.driver_tip?.enabled &&
+              driverTipsOptions && driverTipsOptions?.length > 0 &&
+              (
+								<DriverTipsContainer>
+									<OText size={14} lineHeight={20} color={theme.colors.textNormal}>
+										{t('DRIVER_TIPS', 'Driver Tips')}
+									</OText>
+									<DriverTips
+										uuid={cart?.uuid}
+										businessId={cart?.business_id}
+										driverTipsOptions={driverTipsOptions}
+										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+										isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+										driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+											? cart?.driver_tip
+											: cart?.driver_tip_rate}
+										useOrderContext
+									/>
+								</DriverTipsContainer>
+              )}
+
             <OSTotal>
               <OSTable style={{ marginTop: 15 }}>
                 <OText size={14} lineHeight={21} weight={'600'}>

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

@@ -33,3 +33,7 @@ export const Divider = styled.View`
   margin-top: 5px;
   margin-bottom: 10px;
 `
+
+export const DriverTipsContainer = styled.View`
+  padding: 5px 0;
+`

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -11,7 +11,7 @@ import {
 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 } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Image, Animated } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OText } from '../shared';
@@ -43,6 +43,8 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const [orderingTheme] = useOrderingTheme()
 	const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
 
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
@@ -122,6 +124,14 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductInventory,
 	);
 
+	const fadeIn = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+			useNativeDriver: true
+    }).start();
+  };
+
 	const handleChangeFavorite = () => {
 		if (auth) {
 			handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
@@ -130,8 +140,17 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		}
 	}
 
+	const handleChangeIntersection = () => {
+		setIsIntersectionObserver(true);
+		fadeIn();
+	}
+
+	useEffect(() => {
+		if (!enableIntersection) fadeIn()
+	}, [enableIntersection])
+
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardContainer
 					showAddButton={!hideAddButton}
@@ -204,24 +223,24 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							{product?.images ? (
-								<FastImage
-									style={styles.productStyle}
-									source={{
-										uri: optimizeImage(product?.images, 'h_250,c_limit'),
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
-							) : (
-								<FastImage
-									style={styles.productStyle}
-									source={{
-										uri: Image.resolveAssetSource(theme.images.dummies.product).uri,
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
+							{product?.images && (
+								<Animated.View
+									style={[
+										{
+											// Bind opacity to animated value
+											opacity: fadeAnim
+										}
+									]}
+								>
+									<FastImage
+										style={styles.productStyle}
+										source={{
+											uri: optimizeImage(product?.images, 'h_250,c_limit'),
+											priority: FastImage.priority.normal,
+										}}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								</Animated.View>
 							)}
 						</LogoWrapper>