ordering-ui-react-native 0.14.4 → 0.14.5

package/package.json

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

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

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useCallback } from 'react'
-import { View, TouchableOpacity, StyleSheet, TextStyle, ScrollView, I18nManager, Platform } from 'react-native'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
+import { View, TouchableOpacity, StyleSheet, TextStyle, ScrollView, I18nManager, Platform, KeyboardAvoidingView, Keyboard } from 'react-native'
 import {
   BusinessAndProductList,
   useLanguage,
@@ -36,7 +36,7 @@ import { Cart } from '../Cart'
 import { OrderSummary } from '../OrderSummary'
 import NavBar from '../NavBar'
 import SocialShareFav from '../SocialShare'
-
+import { SafeAreaContainer } from '../../layouts/SafeAreaContainer'
 const PIXELS_TO_SCROLL = 1000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
@@ -112,6 +112,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [categoriesLayout, setCategoriesLayout] = useState<any>({})
   const [productListLayout, setProductListLayout] = useState<any>(null)
   const [selectedCategoryId, setSelectedCategoryId] = useState<any>('cat_all')
+  const [isKeyboardOpen, setIsKeyBoardOpen] = useState(false)
+  const cartRef = useRef<any>()
 
   const scrollViewRef = useRef<any>(null)
 
@@ -187,6 +189,21 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     setCategoryClicked(false);
   }, []);
 
+  useEffect(() => {
+		Keyboard.addListener('keyboardDidShow', () => {
+        setIsKeyBoardOpen(true)
+		})
+
+    Keyboard.addListener('keyboardDidHide', () => [
+      setIsKeyBoardOpen(false)
+    ])
+
+		return () => {
+			Keyboard.removeAllListeners('keyboardDidShow')
+      Keyboard.removeAllListeners('keyboardDidHide')
+		}
+	}, [])
+
   return (
     <>
       <Animated.View style={{ flex: 1, backgroundColor: theme.colors.white, position: 'absolute', width: '100%', top: top, zIndex: 1 }}>
@@ -358,18 +375,36 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         entireModal
         customClose
       >
-        <ScrollView stickyHeaderIndices={[0]} style={{ backgroundColor: 'white' }} contentContainerStyle={{ paddingBottom: 100 }}>
-          <NavBar title={t('CART', 'Cart')} onActionLeft={handleCloseCartModal} leftImg={theme.images.general.close} noBorder btnStyle={{ paddingLeft: 0 }} />
-          <OrderSummary
-            cart={currentCart}
-            isCartPending={currentCart?.status === 2}
-            hasUpSelling={true}
-            isFromCheckout
-            title={t('ITEMS', 'Items')}
-            paddingH={40}
-          />
-        </ScrollView>
-        <FloatingButton btnText={t('CHECKOUT', 'Checkout')} handleClick={() => handleUpsellingPage()} />
+        <SafeAreaContainer>
+          <KeyboardAvoidingView
+            style={{ flex: 1 }}
+            behavior={Platform.OS === 'ios' ? 'height' : 'padding'}
+            enabled={Platform.OS === 'ios'}
+          >
+            <ScrollView 
+              stickyHeaderIndices={[0]} 
+              style={{ backgroundColor: 'white' }} 
+              contentContainerStyle={{ paddingBottom: 100 }}
+              ref={(ref : any) => cartRef.current = ref}
+            >
+              <NavBar title={t('CART', 'Cart')} onActionLeft={handleCloseCartModal} leftImg={theme.images.general.close} noBorder btnStyle={{ paddingLeft: 0 }} />
+              <OrderSummary
+                cart={currentCart}
+                isCartPending={currentCart?.status === 2}
+                hasUpSelling={true}
+                isFromCheckout
+                title={t('ITEMS', 'Items')}
+                paddingH={40}
+                cartRef={cartRef}
+              />
+            </ScrollView>
+            <FloatingButton 
+              style={{bottom: isKeyboardOpen && Platform.OS === 'ios' ? 30 : 0}}
+              btnText={t('CHECKOUT', 'Checkout')} 
+              handleClick={() => handleUpsellingPage()} 
+            />
+          </KeyboardAvoidingView>
+        </SafeAreaContainer>
       </OModal>
     </>
   )

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

@@ -19,7 +19,8 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
     btnText,
     handleButtonClick,
     disabled,
-    isSecondaryBtn
+    isSecondaryBtn,
+    style
   } = props
 
   const theme = useTheme();
@@ -39,7 +40,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
   const { bottom } = useSafeAreaInsets();
 
   return (
-    <Container isIos={Platform.OS === 'ios'} style={{ paddingBottom: bottom + 10 }}>
+    <Container isIos={Platform.OS === 'ios'} style={{ ...style, paddingBottom: bottom + 10 }}>
       <Button
         style={[isSecondaryBtn ? styles.secodaryBtn : styles.primaryBtn]}
         onPress={handleButtonClick}

package/themes/doordash/src/components/Messages/index.tsx

@@ -272,7 +272,8 @@ const MessagesUI = (props: MessagesParams) => {
       {...props}
       containerStyle={{
         padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
-        flexDirection: 'column-reverse'
+        flexDirection: 'column-reverse',
+        marginBottom: Platform.OS === 'ios' && isKeyboardShow ? 500 : 0
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
       renderAccessory={() => renderAccessory()}

package/themes/doordash/src/components/OrderSummary/index.tsx

@@ -41,7 +41,8 @@ const OrderSummaryUI = (props: any) => {
     paddingH,
     isMini,
     commentState,
-    handleChangeComment
+    handleChangeComment,
+    cartRef
   } = props;
 
   const theme = useTheme();
@@ -256,6 +257,7 @@ const OrderSummaryUI = (props: any) => {
                         }}
                         multiline
                         inputStyle={{color: theme.colors.textPrimary}}
+                        onFocus={() => cartRef?.current?.scrollToEnd?.()}
                       />
                       {commentState?.loading && (
                         <View style={{ position: 'absolute', right: 20 }}>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import {
 	ProductForm as ProductOptions,
 	useSession,
@@ -8,7 +8,7 @@ import {
 } from 'ordering-components/native'
 import { ProductIngredient } from '../ProductIngredient'
 import { ProductOption } from '../ProductOption'
-import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform, KeyboardAvoidingView } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform, KeyboardAvoidingView, Keyboard } from 'react-native'
 import {
 	ProductHeader,
 	WrapHeader,
@@ -107,9 +107,9 @@ export const ProductOptionsUI = (props: any) => {
 	const [orderState] = useOrder()
 	const [{ auth }] = useSession()
 	const { product, loading, error } = productObject
-
 	const { bottom } = useSafeAreaInsets();
-
+	const [commentY, setCommentY] = useState(0)
+	const productFormRef = useRef<any>()
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white
 		if (errors[`id:${id}`]) {
@@ -136,13 +136,25 @@ export const ProductOptionsUI = (props: any) => {
 
 	const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
 
+	useEffect(() => {
+		Keyboard.addListener('keyboardDidShow', () => {
+			if (commentY > 100) {
+				productFormRef?.current?.scrollTo?.({ x: 0, y: commentY + 300, animated: true })
+			}
+		})
+
+		return () => {
+			Keyboard.removeAllListeners('keyboardDidShow')
+		}
+	}, [productFormRef?.current, commentY])
+
 	return (
 		<KeyboardAvoidingView
 			style={{ flex: 1 }}
 			behavior={Platform.OS ? 'padding' : 'height'}
 			enabled={Platform.OS === 'ios'}
 		>
-			<ScrollView style={styles.mainContainer}>
+			<ScrollView style={styles.mainContainer} ref={(ref) => productFormRef.current = ref}>
 				{!error && (
 					<View style={{ paddingBottom: 80 }}>
 						<WrapHeader>
@@ -275,7 +287,7 @@ export const ProductOptionsUI = (props: any) => {
 											</React.Fragment>
 										)
 									}))}
-									<ProductComment>
+									<ProductComment onLayout={(e: any) => setCommentY(e.nativeEvent.layout.y + e.nativeEvent.layout.height)}>
 										<SectionTitle>
 											<OText style={theme.labels.middle as TextStyle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
 										</SectionTitle>

package/themes/doordash/src/components/shared/OInput.tsx

@@ -99,6 +99,7 @@ const OInput = (props: Props): React.ReactElement => {
         returnKeyType={props.returnKeyType}
         onSubmitEditing={props.onSubmitEditing}
         blurOnSubmit={props.blurOnSubmit}
+        onFocus={props.onFocus}
         ref={props.forwardRef}
         style={{padding: 0, ...props.inputStyle}}
       />

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

@@ -365,6 +365,7 @@ export interface FloatingButtonParams {
   btnLeftValueShow?: boolean;
   btnRightValueShow?: boolean;
   handleClick?: any;
+  style?: ViewStyle
 }
 export interface MomentOptionParams {
   navigation: any;