ordering-ui-react-native 0.17.70 → 0.17.71

package/package.json

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

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

@@ -138,7 +138,8 @@ const AddressListUI = (props: AddressListParams) => {
 	}, [])
 
 	return (
-		<Container 
+		<Container
+			pt={20}
 			noPadding
 			refreshControl={
 				<RefreshControl
@@ -153,7 +154,10 @@ const AddressListUI = (props: AddressListParams) => {
 					titleAlign={'center'}
 					onActionLeft={goToBack}
 					showCall={false}
-					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+					style={{
+						paddingHorizontal: 40,
+						marginTop: Platform.OS === 'ios' ? 0 : 10
+					}}
 				/>
 			)}
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile || isProfile)) && (
@@ -174,7 +178,7 @@ const AddressListUI = (props: AddressListParams) => {
 								showCall={false}
 								btnStyle={{ paddingLeft: 0 }}
 								paddingTop={0}
-								style={{ marginTop: Platform.OS === 'ios' ? 0 : 40 }}
+								style={{ marginTop: 0 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>

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

@@ -30,7 +30,6 @@ import {
 	WrapSearchBar,
 	WrapContent,
 	FiltProductsContainer,
-	ContainerSafeAreaView,
 	BackgroundGray,
 	ProfessionalFilterWrapper,
 	NearBusiness,
@@ -353,7 +352,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<FiltProductsContainer
 						style={{
 							height: Dimensions.get('window').height - filtProductsHeight,
-							top: Platform.OS === 'ios' ? searchBarHeight + insets.top : searchBarHeight
+							top: Platform.OS === 'ios' ? (searchBarHeight - 10) + insets.top : searchBarHeight
 						}}
 						contentContainerStyle={{ flexGrow: 1 }}
 					>
@@ -515,7 +514,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					)}
 				</IOScrollView>
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
-					<View style={{ marginBottom: Platform.OS === 'ios' ? 20 : 0 }}>
+					<View style={{ marginBottom: 0, zIndex: 20000 }}>
 						<FloatingButton
 							btnText={
 								openUpselling

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

@@ -284,7 +284,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<IconAntDesign name='arrowleft' size={26} />
+						<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
 					</TouchableOpacity>
 				)}
 				<Search>

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

@@ -80,7 +80,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
-	const bgHeader =  orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image 
+	const bgHeader = orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image
 	const styles = StyleSheet.create({
 		container: {
 			marginBottom: 0,
@@ -474,7 +474,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					{!auth && (
 
 						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-							<IconAntDesign name='arrowleft' size={26} />
+							<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
 						</TouchableOpacity>
 					)}
 				</HeaderWrapper>

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+import { Platform } from 'react-native'
 import { FavoriteList } from '../FavoriteList'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
@@ -34,7 +35,9 @@ export const Favorite = (props: any) => {
   }
 
   return (
-    <Container>
+    <Container
+      pdng={Platform.OS === 'ios' ? '20px' : '30px'}
+    >
       <NavBar
         title={t('FAVORITE', 'Favorite')}
         titleAlign={'center'}
@@ -52,9 +55,9 @@ export const Favorite = (props: any) => {
           >
             <OText
               color={menu.key === tabSelected ? theme.colors.textNormal : theme.colors.disabled}
-					    size={14}
-					    weight={menu.key === tabSelected ? '500' : '400'}
-					    style={{ marginBottom: 12 }}
+              size={14}
+              weight={menu.key === tabSelected ? '500' : '400'}
+              style={{ marginBottom: 12 }}
             >
               {menu.name}
             </OText>

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

@@ -18,5 +18,5 @@ export const Tab = styled.TouchableOpacity`
 export const Container = styled.View`
   padding-horizontal: 40px;
   padding-bottom: 20px;
-  padding-top: 30px;
+  padding-top: ${(props: any) => props.pdng};
 `

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

@@ -63,7 +63,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 	return (
 		<Container
 			style={{
-				paddingBottom: Platform.OS === 'ios' ? iosBottom ?? 0 : bottom + 16
+				paddingBottom: Platform.OS === 'ios' ? 20 : bottom + 16
 			}}>
 
 			<View style={styles.infoCont}>

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

@@ -12,7 +12,7 @@ export const Container = styled.View`
   width: 100%;
   justify-content: space-between;
   background-color: #FFF;
-  z-index: 9999;
+  z-index: 20001;
   justify-content: space-between;
 `
 

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

@@ -31,20 +31,20 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
+      pt={10}
       noPadding
       refreshControl={
-				<RefreshControl
-					refreshing={refreshing}
-					onRefresh={() => handleOnRefresh()}
-				/>
-			}
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
     >
       <NavBar
         title={t('HELP', 'Help')}
         titleAlign={'center'}
         onActionLeft={goToBack}
         showCall={false}
-        paddingTop={10}
         btnStyle={{ paddingLeft: 0 }}
       />
       <HelpSubItem
@@ -53,7 +53,7 @@ export const Help = (props: HelpParams) => {
         <OText size={14}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       </HelpSubItem>
       <HelpSubItem
-        onPress={() => onRedirect('HelpAccountAndPayment')}      
+        onPress={() => onRedirect('HelpAccountAndPayment')}
       >
         <OText size={14}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       </HelpSubItem>

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import Lottie from 'lottie-react-native';
 import { TouchableOpacity, Easing, ViewStyle, Animated } from 'react-native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -13,9 +13,9 @@ interface Props {
     duration?: number,
     type: 'favorite', // animation types
     isActive: boolean,
-    animationType?: ((value : number) => number);
+    animationType?: ((value: number) => number);
     useNativeDriver?: boolean,
-    iconProps?: {color?: string, size?: number, style?: ViewStyle} 
+    iconProps?: { color?: string, size?: number, style?: ViewStyle }
 }
 
 export const LottieAnimation = (props: Props) => {
@@ -34,30 +34,39 @@ export const LottieAnimation = (props: Props) => {
     } = 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 hideLottie = () => {
+        setTimeout(() => setIsHide(true), 4500)
+    }
+
     return (
         <TouchableOpacity
             onPress={onPressLottie}
             style={style}
         >
-            <Lottie
-                progress={animationProgress.current}
-                source={animationGif}
-            />
+            {!isHide &&
+                <Lottie
+                    progress={animationProgress.current}
+                    source={animationGif}
+                />
+            }
             <IconAntDesign
                 name={isActive ? icon[0] : icon[1]}
                 color={iconProps?.color || theme.colors.danger5}

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

@@ -253,19 +253,21 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	return (
 		<>
-			<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
-				<View style={{ paddingBottom: 90 }}>
+			<Container
+				style={{
+					paddingLeft: 40,
+					paddingRight: 40
+				}}>
+				<View style={{ paddingBottom: 90, paddingRight: 20 }}>
 					<NavBar
 						onActionLeft={() => goToBack()}
 						btnStyle={{ paddingLeft: 0 }}
-						paddingTop={0}
 						style={{ paddingBottom: 0 }}
 						title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
 						titleAlign={'center'}
 						titleStyle={{ fontSize: 20, marginRight: 0, marginLeft: 0 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 					/>
-
 					<WrapSelectOption
 						onPress={() => _handleAsap()}
 						disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>

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

@@ -70,13 +70,19 @@ const NotificationsUI = (props: any) => {
 	}, [notificationsList])
 
 	return (
-		<Container noPadding>
+		<Container
+			noPadding
+			pt={10}
+		>
 			<NavBar
 				title={t('NOTIFICATIONS', 'Notifications')}
 				titleAlign={'center'}
 				onActionLeft={goToBack}
 				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+				style={{
+					paddingHorizontal: 40,
+					paddingVertical: 0,
+				}}
 			/>
 			{showCustomerPromotions && showNotifications && (
 				<>

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

@@ -297,7 +297,7 @@ export const ProductOptionsUI = (props: any) => {
 		maxProductQuantity === 0 ||
 		Object.keys(errors).length > 0;
 
-	
+
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
 			{options.map(({ id, name, respect_to, suboptions }: any) => (
@@ -484,7 +484,7 @@ export const ProductOptionsUI = (props: any) => {
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
 				<TopActions onPress={() => handleGoBack()}>
-					<IconAntDesign name='arrowleft' size={26} />
+					<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
 				</TopActions>
 			</TopHeader>
 			{!error && (

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

@@ -68,7 +68,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	return (
 		<View>
-			<Container onPress={() => handleSuboptionClick()}>
+			<Container>
 				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 						state?.selected ? (

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

@@ -19,7 +19,7 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
+import { View, StyleSheet, ScrollView, RefreshControl } from 'react-native'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
 
@@ -99,6 +99,7 @@ const PromotionsUI = (props: PromotionParams) => {
   return (
     <Container
       noPadding
+      pt={20}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -111,7 +112,7 @@ const PromotionsUI = (props: PromotionParams) => {
         titleAlign={'center'}
         onActionLeft={() => navigation.goBack()}
         showCall={false}
-        style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
+        style={{ paddingVertical: 0, marginLeft: 20 }}
       />
       <PromotionsContainer>
         <SearchBarContainer>

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

@@ -284,16 +284,18 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
-			<NavBar
-				title={t('ACCOUNT', 'Account')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation.goBack()}
-				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
-			/>
-			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
-				<Container noPadding>
-
+			<Container
+				pt={15}
+				noPadding
+			>
+				<NavBar
+					title={t('ACCOUNT', 'Account')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation.goBack()}
+					showCall={false}
+					style={{ paddingHorizontal: 40 }}
+				/>
+				<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
 					<CenterView style={styles.pagePadding}>
 						<View style={styles.photo}>
 							{user?.photo ? (
@@ -326,8 +328,8 @@ const ProfileUI = (props: ProfileParams) => {
 							setWillVerifyOtpState={setWillVerifyOtpState}
 						/>
 					</View>
-				</Container>
-			</KeyboardAvoidingView>
+				</KeyboardAvoidingView>
+			</Container>
 			<OModal
 				open={isModalVisible}
 				onClose={() => setIsModalVisible(false)}

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

@@ -249,6 +249,7 @@ export interface BusinessProductsListingParams {
 	handleUpdateProducts?: any;
 	professionalSelected?: any;
 	handleChangeProfessionalSelected?: any;
+	onBusinessClick?: any;
 }
 export interface BusinessBasicInformationParams {
 	navigation?: any;