ordering-ui-react-native 0.14.1 → 0.14.5

package/package.json

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

package/src/components/AppleLogin/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
 import { useConfig, useApi, useLanguage } from 'ordering-components/native'
@@ -22,7 +22,7 @@ export const AppleLogin = (props: AppleLoginParams) => {
   const [ordering] = useApi()
   const [, t] = useLanguage()
   const theme = useTheme()
-
+  const [errors, setError] = useState<any>({type: '', message: ''})
   const buttonText = t('LOGIN_WITH_APPLE', 'Login with Apple');
 
   const onAppleButtonPress = async () => {
@@ -45,16 +45,16 @@ export const AppleLogin = (props: AppleLoginParams) => {
           identityToken,
           authorizationCode,
         } = appleAuthRequestResponse
-
-        if (identityToken && authorizationCode) {
+        if (identityToken) {
           console.log('auth code: ', authorizationCode)
-          handleLoginApple(authorizationCode)
+          handleLoginApple(identityToken)
           console.warn(`Apple Authentication Completed, ${user}, ${email}`);
         } else {
           handleErrors && handleErrors(t('ERROR_LOGIN_APPLE', 'Error login with apple'))
         }
 
       } catch (error: any) {
+        setError({ type: 'FROM_APPLE', message: error?.message })
         handleErrors && handleErrors(error.message)
       }
     } else {
@@ -106,6 +106,7 @@ export const AppleLogin = (props: AppleLoginParams) => {
         handleErrors && handleErrors(result || t('ERROR_LOGIN_AUTH_APPLE', 'Error login auth with apple'))
       }
     } catch (error: any) {
+      setError({ type: 'FROM_API', message: error?.message })
       handleLoading && handleLoading(false)
       handleErrors && handleErrors(error?.message)
     }
@@ -120,6 +121,11 @@ export const AppleLogin = (props: AppleLoginParams) => {
 
   return (
     <Container>
+      {!!errors?.message && !!errors?.type && (
+        <OText>
+          {errors?.type} {errors?.message}
+        </OText>
+      )}
       <AppleButton
         onPress={onAppleButtonPress}
       >

package/src/components/Checkout/index.tsx

@@ -55,7 +55,6 @@ import { ActivityIndicator } from 'react-native-paper';
 import WebView from 'react-native-webview';
 import Icon from 'react-native-vector-icons/Feather';
 import { OrderCreating } from '../OrderCreating';
-import { Item } from '../../../themes/uber-eats/src/components/UpsellingProducts/styles';
 
 const mapConfigs = {
   mapZoom: 16,

package/src/components/VerifyPhone/index.tsx

@@ -196,7 +196,7 @@ export const VerifyPhone = (props: any) => {
       <WrappCountdown>
         <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
           <OText
-            size={30}
+            size={28}
             color={timer === '00:00' ? theme.colors.error: theme.colors.success}
           >
             {timer}

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;

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

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, KeyboardAvoidingView } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
-
+import Picker from 'react-native-country-picker-modal';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import {
 	Checkout as CheckoutController,
 	useOrder,
@@ -22,7 +23,6 @@ import { PaymentOptions } from '../PaymentOptions';
 import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
-import { OrderTypeSelector } from '../OrderTypeSelector'
 
 import {
 	ChContainer,
@@ -35,7 +35,9 @@ import {
 	ChErrors,
 	ChBusinessDetails,
 	ChUserDetails,
-	ChCart
+	ChCart,
+	DeliveryOptionsContainer,
+	DeliveryOptionItem
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -74,9 +76,9 @@ const CheckoutUI = (props: any) => {
 		handlePaymethodChange,
 		handlerClickPlaceOrder,
 		onNavigationRedirect,
-		businessLogo,
-		businessName,
-		cartTotal
+		deliveryOptionSelected,
+		instructionsOptions,
+		handleChangeDeliveryOption,
 	} = props
 
 	const theme = useTheme();
@@ -91,9 +93,18 @@ const CheckoutUI = (props: any) => {
 			justifyContent: 'flex-start',
 			paddingLeft: 0,
 		},
+		paddSection: {
+			padding: 20
+		},
 		pagePadding: {
 			paddingLeft: 40,
 			paddingRight: 40
+		},
+		icon: {
+			top: 15,
+			right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
+			position: 'absolute',
+			fontSize: 20
 		}
 	})
 
@@ -109,6 +120,7 @@ const CheckoutUI = (props: any) => {
 	const [userErrors, setUserErrors] = useState<any>([]);
 	const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
+	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -118,6 +130,12 @@ const CheckoutUI = (props: any) => {
 
 	const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
 
+	const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
+		return {
+			value: option?.id, key: option?.id, label: option?.name
+		}
+	})
+
 	const handlePlaceOrder = () => {
 		if (!userErrors.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder()
@@ -131,6 +149,11 @@ const CheckoutUI = (props: any) => {
 		setIsUserDetailsEdit(true)
 	}
 
+	const changeDeliveryOption = (option: any) => {
+		handleChangeDeliveryOption(option)
+		setIsDeliveryOptionModalVisible(false)
+	}
+
 	const checkValidationFields = () => {
 		setUserErrors([])
 		const errors = []
@@ -307,7 +330,56 @@ const CheckoutUI = (props: any) => {
 						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
 					</ChSection>
 
-
+					{!cartState.loading && deliveryOptionSelected !== undefined && options?.type === 1 && (
+						<DeliveryOptionsContainer>
+							<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+							<View
+								style={{
+									backgroundColor: theme.colors.inputDisabled,
+									borderRadius: 7.5,
+									marginBottom: 20,
+									flex: 1
+								}}>
+								<Picker
+									countryCode={undefined}
+									visible={isDeliveryOptionModalVisible}
+									onClose={() => setIsDeliveryOptionModalVisible(false)}
+									withCountryNameButton
+									renderFlagButton={() => (
+										<TouchableOpacity onPress={() => setIsDeliveryOptionModalVisible(true)}>
+											<DeliveryOptionItem backgroundColor={theme?.colors?.inputDisabled}>
+												<OText
+													size={14}
+												>
+													{deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
+												</OText>
+												<MaterialIcons name='keyboard-arrow-down' style={styles.icon} />
+											</DeliveryOptionItem>
+										</TouchableOpacity>
+									)}
+									flatListProps={{
+										keyExtractor: (item: any) => item.value,
+										data: deliveryOptions || [],
+										renderItem: ({ item }: any) => (
+											<TouchableOpacity
+												onPress={() => changeDeliveryOption(item.value)}
+												disabled={
+													deliveryOptionSelected === item.value
+												}
+											>
+												<DeliveryOptionItem backgroundColor={deliveryOptionSelected === item.value ? theme.colors.inputDisabled : 'white'}>
+													<OText>
+														{item.label}
+													</OText>
+												</DeliveryOptionItem>
+											</TouchableOpacity>
+										)
+									}}
+								/>
+							</View>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+						</DeliveryOptionsContainer>
+					)}
 
 					{!cartState.loading && (cart?.status === 2 || cart?.status === 4) && (
 						<ChSection style={{ paddingBottom: 20 }}>
@@ -429,27 +501,27 @@ const CheckoutUI = (props: any) => {
 					)}
 
 					{!cartState.loading && cart && (
-        <ChSection>
-          <ChCart>
-            {cartsWithProducts && cart?.products?.length === 0 ? (
-              <NotFoundSource
-                content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
-                btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
-              />
-            ) : (
-              <>
-                <OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-                  {t('ORDER_SUMMARY', 'Order Summary')}
-                </OText>
-                <OrderSummary
-                  cart={cart}
-                  isCartPending={cart?.status === 2}
-                />
-              </>
-            )}
-          </ChCart>
-        </ChSection>
-      )}
+						<ChSection>
+							<ChCart>
+								{cartsWithProducts && cart?.products?.length === 0 ? (
+									<NotFoundSource
+										content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
+										btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
+									/>
+								) : (
+									<>
+										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
+											{t('ORDER_SUMMARY', 'Order Summary')}
+										</OText>
+										<OrderSummary
+											cart={cart}
+											isCartPending={cart?.status === 2}
+										/>
+									</>
+								)}
+							</ChCart>
+						</ChSection>
+					)}
 
 					{!cartState.loading && cart && (
 						<ChSection style={{ paddingTop: 0, paddingBottom: 20, paddingHorizontal: 20 }}>

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

@@ -87,3 +87,16 @@ export const ChErrors = styled.View`
   align-items: center;
   margin-bottom: 20px;
 `
+
+export const DeliveryOptionsContainer = styled.View`
+  flex: 1;
+  margin-top: 10px;
+`
+
+export const DeliveryOptionItem = styled.View`
+  padding: 15px;
+  justify-content: ${(props : any) => props.center ? 'center' : 'space-between'};
+  align-items: center;
+  flex-direction: row;
+  background-color: ${(props : any) => props?.backgroundColor ?? '#fff'};
+`; 

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

@@ -597,6 +597,22 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </InfoBlock>
               </Customer>
+              {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
+                <View style={{ marginTop: 15 }}>
+                  <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
+                    {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
+                  </OText>
+                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>{order?.delivery_option?.name ?? t('EITHER_WAY', 'Either way')}</OText>
+                </View>
+              )}
+              {order?.comment && (
+                <View style={{ marginTop: 15 }}>
+                  <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
+                    {t('COMMENT', 'Comment')}
+                  </OText>
+                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>{order?.comment}</OText>
+                </View>
+              )}
               {order?.driver && (
                 <>
                   {order?.driver?.location && parseInt(order?.status) === 9 && (
@@ -810,14 +826,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </Table>
               </Total>
-              {order?.comment && (
-                <Table>
-                  <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
-                  <OText style={{ maxWidth: '70%' }}>
-                    {order?.comment}
-                  </OText>
-                </Table>
-              )}
             </OrderBill>
           </OrderContent>
         </>

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

@@ -109,7 +109,7 @@ export const OrderBill = styled.View`
 export const Total = styled.View`
   border-top-width: 1px;
   border-top-color: ${(props: any) => props.theme.colors.border};
-  padding-vertical: 10px
+  padding-vertical: 10px;
 `
 
 export const Map = styled.View`

package/themes/uber-eats/src/components/ProductForm/index.tsx

@@ -85,7 +85,7 @@ export const ProductOptionsUI = (props: any) => {
     comment: {
       borderBottomWidth: 1,
       borderRadius: 0,
-      borderBottomColor: '#DBDCDB',
+      borderColor: theme.colors.lightGray,
       height: 100,
       alignItems: 'flex-start',
       marginHorizontal: 20