ordering-ui-react-native 0.17.80 → 0.17.81

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Vibration } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -156,6 +156,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				code: isProductAddedToCart?.code,
 				quantity: productQuantity + 1
 			}
+			Vibration.vibrate()
 			const cartData = currentCart?.business_id ? currentCart : { business_id: business.id }
 			if (isProductAddedToCart) {
 				await updateProduct(updateCurrentProduct, cartData, isQuickAddProduct)

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

@@ -308,7 +308,7 @@ const CheckoutUI = (props: any) => {
 						titleAlign={'center'}
 						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 						showCall={false}
-						btnStyle={{ paddingLeft: 0 }}
+						btnStyle={{ paddingLeft: 0, paddingTop: Platform.OS == 'ios' ? 0 : 2 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
 					/>
@@ -578,7 +578,7 @@ const CheckoutUI = (props: any) => {
 									cart={cart}
 									isDisabled={cart?.status === 2}
 									businessId={!isGiftCardCart ? businessDetails?.business?.id : -1}
-                					isLoading={!isGiftCardCart ? businessDetails.loading : false}
+									isLoading={!isGiftCardCart ? businessDetails.loading : false}
 									paymethods={businessDetails?.business?.paymethods}
 									onPaymentChange={handlePaymethodChange}
 									errorCash={errorCash}

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

@@ -36,7 +36,7 @@ export const Favorite = (props: any) => {
 
   return (
     <Container
-      pdng={Platform.OS === 'ios' ? '20px' : '30px'}
+      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
     >
       <NavBar
         title={t('FAVORITE', 'Favorite')}

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RefreshControl } from 'react-native'
+import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
@@ -31,7 +31,7 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
-      pt={10}
+      pt={Platform.OS === 'ios' ? 20 : 10}
       noPadding
       refreshControl={
         <RefreshControl

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

@@ -3,7 +3,7 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
 import NavBar from '../NavBar'
 import {
   Content,
@@ -37,7 +37,7 @@ export const HelpGuide = (props: HelpGuideParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <Container>
+    <Container pdng={Platform.OS === 'ios' ? '10px' : '0px'}>
       <NavBar
         title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
         onActionLeft={goToBack}

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

@@ -8,4 +8,5 @@ export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
     margin: 10px 0;
+    padding-top: ${(props: any) => props.pdng}
 `

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

@@ -51,6 +51,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import NavBar from '../NavBar';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -166,6 +167,11 @@ export const ProductOptionsUI = (props: any) => {
 			justifyContent: 'space-between',
 			width: '100%',
 			marginTop: 10
+		},
+		wrapperNavbar: {
+			paddingVertical: 0,
+			paddingHorizontal: 40,
+			marginVertical: 2
 		}
 	});
 
@@ -208,7 +214,7 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-        Vibration.vibrate()
+		Vibration.vibrate()
 		if (!productCart.quantity) {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_REQUIRED', 'The quantity field is required').replace('_attribute_', t('PRODUCT_POTIONS_QUANTITY', 'Quantity')))
 			return
@@ -483,14 +489,17 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [])
 
-
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
-			<TopHeader>
-				<TopActions onPress={() => handleGoBack()}>
-					<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-				</TopActions>
-			</TopHeader>
+			<View style={styles.wrapperNavbar}>
+				<NavBar
+					onActionLeft={() => handleGoBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0, paddingTop: Platform.OS == 'ios' ? 0 : 2 }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+				/>
+			</View>
 			{!error && (
 				<ScrollView
 					ref={scrollViewRef}

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

@@ -32,7 +32,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		setIsScrollAvailable
 	} = props
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 
 	const theme = useTheme();

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, TouchableOpacity } from 'react-native'
+import { View, TouchableOpacity, Platform } from 'react-native'
 import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { SessionsParams } from '../../types'
@@ -12,7 +12,8 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import {
   SessionsWrapper,
   SessionItem,
-  DurationWrapper
+  DurationWrapper,
+  Container
 } from './styles'
 
 export const SessionsUI = (props: SessionsParams) => {
@@ -27,7 +28,7 @@ export const SessionsUI = (props: SessionsParams) => {
   const [, t] = useLanguage()
   const [{ user }] = useSession()
   const [{ parseDate }] = useUtils()
-	const theme = useTheme()
+  const theme = useTheme()
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -61,7 +62,9 @@ export const SessionsUI = (props: SessionsParams) => {
   }
 
   return (
-    <>
+    <Container
+      pdng={Platform.OS === 'ios' ? '10px' : '0'}
+    >
       <NavBar
         title={t('SESSIONS', 'Sessions')}
         titleAlign={'center'}
@@ -77,11 +80,11 @@ export const SessionsUI = (props: SessionsParams) => {
               <SessionItem key={i}>
                 <Placeholder Animation={Fade}>
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <View style={{ flex: 1}}>
+                    <View style={{ flex: 1 }}>
                       <PlaceholderLine width={40} />
                       <PlaceholderLine width={40} />
                     </View>
-                    <PlaceholderLine width={5}/>
+                    <PlaceholderLine width={5} />
                   </View>
                 </Placeholder>
               </SessionItem>
@@ -120,7 +123,7 @@ export const SessionsUI = (props: SessionsParams) => {
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
               </SessionsWrapper>
-             ) : (
+            ) : (
               <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
             )
           )}
@@ -147,7 +150,7 @@ export const SessionsUI = (props: SessionsParams) => {
         onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
         onClose={() => setConfirm({ ...confirm, open: false, title: null })}
       />
-    </>
+    </Container>
   )
 }
 

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

@@ -13,3 +13,7 @@ export const SessionItem = styled.View`
 export const DurationWrapper = styled.View`
   /* flex-direction: row; */
 `
+
+export const Container = styled.View`
+  padding-top: ${(props: any) => props.pdng};
+`

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

@@ -84,9 +84,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       marginRight: 2,
     },
     reorderLoading: {
-      width: 80,
-      height: 40,
-      borderRadius: 10,
+      height: 23,
+      paddingLeft: 20,
+      paddingRight: 20,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 0,
     },
     reorderbutton: {
       height: 23,
@@ -183,8 +187,6 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const handleOriginalReorder = () => {
     setConfirm({ ...confirm, open: false, title: null })
-    setReorderSelected(order?.id);
-    handleReorder && handleReorder(order?.id);
   }
 
   return (

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

@@ -21,7 +21,6 @@ import {
 import { OrderSummary } from '../OrderSummary';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const {
@@ -166,17 +165,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const UpsellingContent = () => {
 		return (
 			<>
-				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
-					<OButton
-						imgRightSrc={null}
-						style={styles.btnBackArrow}
-						onClick={() => onGoBack()}
-						icon={AntDesignIcon}
-						iconProps={{
-							name: 'arrowleft',
-							size: 26
-						}}
-					/>
+				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 14 }}>
+					<TouchableOpacity onPress={() => onGoBack()} style={styles.btnBackArrow}>
+						<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+					</TouchableOpacity>
 				</View>
 				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
 					{productsList.length > 0 &&

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

@@ -278,7 +278,9 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
-			<Container>
+			<Container
+				pdng={Platform.OS === 'ios' ? '20px' : '10px'}
+			>
 				<NavBar
 					title={t('ACCOUNT', 'Account')}
 					titleAlign={'center'}

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

@@ -12,7 +12,7 @@ export const UserData = styled.View`
 export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
-	  paddingTop: 20px;
+	  padding-top: ${(props: any) => props.pdng};
     margin-bottom: 40px;
 `