ordering-ui-react-native 0.13.3 → 0.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.13.3",
+  "version": "0.13.7",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -75,7 +75,7 @@
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",
     "react-native-fast-image": "^8.3.3",
-    "react-native-fbsdk": "^3.0.0",
+    "react-native-fbsdk-next": "^7.0.1",
     "react-native-geocoding": "^0.5.0",
     "react-native-gesture-handler": "^1.8.0",
     "react-native-gifted-chat": "^0.16.3",

package/src/DeliveryApp.tsx

@@ -21,6 +21,7 @@ import { ThemeProvider } from './context/Theme';
 import settings from './config.json';
 import theme from './theme.json';
 import AppContainer from './AppContainer';
+import { FacebookPixel } from './components/FacebookPixel';
 
 Sentry.init({
   environment: Platform.OS === 'ios' ? 'ios' : 'android',
@@ -169,6 +170,7 @@ const DeliveryApp = () => {
   return (
     <ThemeProvider theme={theme}>
       <OrderingProvider settings={settings} Alert={Alert}>
+        <FacebookPixel />
         <AppContainer />
         <Toast />
         <Analytics />

package/src/components/FacebookLogin/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { AccessToken, LoginManager } from 'react-native-fbsdk';
+import { AccessToken, LoginManager } from 'react-native-fbsdk-next';
 import { useLanguage, useSession, useApi } from 'ordering-components/native';
 
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -49,7 +49,7 @@ export const FacebookLogin = (props: any) => {
         handleErrors && handleErrors(response.content.result)
         logoutWithFacebook()
       }
-    } catch (err) {
+    } catch (err : any) {
       handleLoading && handleLoading(false)
       handleErrors && handleErrors(err.message)
     }

package/src/components/FacebookPixel/index.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { useEvent, useConfig } from 'ordering-components/native'
+import { AppEventsLogger } from "react-native-fbsdk-next"
+
+export const FacebookPixel = (props : any) => {
+  const {
+    children
+  } = props
+
+  const [configs] = useConfig()
+  const [events] = useEvent()
+
+  const handleLoginUser = () => {
+    AppEventsLogger.logEvent(AppEventsLogger.AppEvents.CompletedRegistration, {
+      [AppEventsLogger.AppEventParams.RegistrationMethod]: "login",
+      ["currency"]: "email"
+    })
+  }
+  
+  const handleProductAdded = (product : any) => {
+    AppEventsLogger.logEvent(AppEventsLogger.AppEvents.AddedToCart, product?.total ?? product?.price , {
+      [AppEventsLogger.AppEventParams.Description]: product?.name,
+      [AppEventsLogger.AppEventParams.Currency]: configs?.stripe_currency?.value ?? 'USD',
+      [AppEventsLogger.AppEventParams.ContentID]: product?.id,
+      [AppEventsLogger.AppEventParams.ContentType]: "product",
+      ["fb_quantity"]: product?.quantity,
+    })
+  }
+
+  const handleProductEdited = (product : any) => {
+    AppEventsLogger.logEvent(AppEventsLogger.AppEvents.CustomizeProduct, product?.total ?? product?.price , {
+      [AppEventsLogger.AppEventParams.Description]: product?.name,
+      [AppEventsLogger.AppEventParams.Currency]: configs?.stripe_currency?.value ?? 'USD',
+      [AppEventsLogger.AppEventParams.ContentID]: product?.id,
+      [AppEventsLogger.AppEventParams.ContentType]: "product",
+      ["fb_quantity"]: product?.quantity,
+    })
+  }
+
+  const handleSignupUser = () => {
+    AppEventsLogger.logEvent(AppEventsLogger.AppEvents.CompletedRegistration, {
+      [AppEventsLogger.AppEventParams.RegistrationMethod]: "signup",
+      ["currency"]: "email"
+    })
+  }
+
+  const handlePaymentInfo = (payment : any) => {
+    AppEventsLogger.logEvent(AppEventsLogger.AppEvents.AddedPaymentInfo, {
+      [AppEventsLogger.AppEventParams.ContentType]: payment?.gateway,
+      [AppEventsLogger.AppEventParams.ContentID]: payment?.id
+    })
+  }
+
+  const handleOrderPlaced = (order : any) => {
+    AppEventsLogger.logPurchase(order.total, configs?.stripe_currency?.value ?? 'USD', { param: "value", id: order.id });
+  }
+
+  useEffect(() => {
+    events.on('userLogin', handleLoginUser)
+    events.on('product_added', handleProductAdded)
+    events.on('product_edited', handleProductEdited)
+    events.on('order_placed', handleOrderPlaced)
+    events.on('singup_user', handleSignupUser)
+    events.on('add_payment_option', handlePaymentInfo)
+
+    return () => {
+      events.off('userLogin', handleLoginUser)
+      events.off('product_added', handleProductAdded)
+      events.off('product_edited', handleProductEdited)
+      events.off('order_placed', handleOrderPlaced)
+      events.off('singup_user', handleSignupUser)
+      events.off('add_payment_option', handlePaymentInfo)
+    }
+  }, [])
+
+  return (
+    <>
+      {children}
+    </>
+  )
+};

package/src/components/LoginForm/index.tsx

@@ -374,13 +374,13 @@ const LoginFormUI = (props: LoginParams) => {
               <SocialButtons>
                 {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
                   configs?.facebook_id?.value && (
-                    <FacebookLogin
-                      notificationState={notificationState}
-                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                      handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
-                      handleSuccessFacebookLogin={handleSuccessFacebook}
-                    />
-                  )}
+                  <FacebookLogin
+                    notificationState={notificationState}
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                )}
                 {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
                   <GoogleLogin
                     notificationState={notificationState}

package/src/types/react-native-fbsdk-next/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-fbsdk-next';

package/themes/kiosk/src/components/CategoriesMenu/index.tsx

@@ -162,7 +162,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                       ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.145 :orientationState?.dimensions?.width * 0.16
                       : orientationState?.dimensions?.width * 0.20
                   }}
-                  titleStyle={{marginTop: Platform.OS === 'ios' ? 10 : 0}}
+                  titleStyle={{marginTop: Platform.OS === 'ios' ? orientationState?.orientation === LANDSCAPE ? orientationState?.dimensions.height * 0.05 : orientationState?.dimensions.width * 0.05 : 0}}
                   onPress={() => {
                     resetInactivityTimeout()
                     if (isDrawer) {

package/themes/kiosk/src/components/LanguageSelector/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { TouchableOpacity, View, StyleSheet } from 'react-native'
-import { LanguageSelector as LanguageSelectorController, useLanguage } from 'ordering-components/native'
+import { LanguageSelector as LanguageSelectorController } from 'ordering-components/native'
 import CountryPicker, { Flag } from 'react-native-country-picker-modal'
 
 import { Container, LanguageItem } from './styles'
@@ -17,9 +17,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     handleChangeLanguage,
   } = props
 
-	const theme = useTheme()
-  const [{loading}] = useLanguage()
-  const [isLoading, setIsLoading] = useState(true)
+  const theme = useTheme()
   const styles = StyleSheet.create({
     closeIcon: {
       width: 48, marginLeft: 32
@@ -28,15 +26,6 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
       marginLeft: 40
     }
   })
-  useEffect(() => {
-    if (!isLoading) return
-    const loadingLanguage = setTimeout(() =>{
-      setIsLoading(false)
-    }, 1000);
-    return () => {
-      clearTimeout(loadingLanguage);
-    }
-  }, [])
 
   const _languages = languagesState?.languages?.map((language: any) => {
     return {
@@ -59,7 +48,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
 	return (
 		<>
-		{ isLoading ? 
+		{ languagesState.loading ? 
 		(<Container>
 			<Placeholder  style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
 				<PlaceholderLine height={15}/>
@@ -78,7 +67,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 							renderFlagButton={() => (
 								<TouchableOpacity
 									onPress={() => setCountryModalVisible(true)}
-									disabled={loading}
+									disabled={languagesState.loading}
 								>
 									<LanguageItem>
 											<Flag
@@ -102,7 +91,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 											handleChangeLanguage(item.value);
 											setCountryModalVisible(false);
 										}}
-										disabled={loading}
+										disabled={languagesState.loading}
 									>
 										<LanguageItem>
 											<View style={styles.flagsContainer} />

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

@@ -365,9 +365,9 @@ export const ProductOptionsUI = (props: any) => {
           </Animated.View>
         </Animated.View>
 
-        {!isFromCheckout && (
+        {/* {!isFromCheckout && (
           <Spinner visible={loading} />
-        )}
+        )} */}
         {!loading && !error && product && (
           <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}> 
             <WrapContent isDrawer={isDrawer}>

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

@@ -14,7 +14,6 @@ import {
 	LoadMore
 } from './styles';
 import { View, StyleSheet } from 'react-native';
-import { getGoogleMapImage } from '../../utils';
 
 import { ActiveOrdersParams } from '../../types';
 import moment from 'moment';
@@ -41,7 +40,7 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 	};
 
 	const handleClickCard = (uuid: string) => {
-		if (isMessageView ) {
+		if (isMessageView) {
 			handleClickOrder(uuid)
 			return
 		}
@@ -132,18 +131,8 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 			<ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
 				{orders.length > 0 &&
 					orders.map((order: any, index: any) => (
-						<Order key={order?.id || order?.uuid} order={order} index={index} />
+						<Order key={index} order={order} index={index} />
 					))}
-				{pagination?.totalPages && pagination?.currentPage < pagination?.totalPages && (
-					<LoadMore>
-						<OButton
-							textStyle={{ color: '#fff' }}
-							text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-							onClick={loadMoreOrders}
-							style={styles.loadMoreButton}
-						/>
-					</LoadMore>
-				)}
 			</ActiveOrdersContainer>
 			<View
 				style={{

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

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components/native';
+import { View, StyleSheet, Platform, I18nManager } from 'react-native';
+
+import { OrdersOption } from '../OrdersOption'
+import { OText } from '../shared'
+import { ScrollView } from 'react-native-gesture-handler';
+
+const PIXELS_TO_SCROLL = 1000;
+
+export const MyOrders = (props: any) => {
+  const [, t] = useLanguage();
+  const [loadMore, setLoadMore] = useState(false)
+
+  const [ordersLength, setOrdersLength] = useState({
+    activeOrdersLength: 0,
+    previousOrdersLength: 0,
+  });
+
+  const handleScroll = ({ nativeEvent }: any) => {
+		const y = nativeEvent.contentOffset.y
+		const height = nativeEvent.contentSize.height
+
+    if (y + PIXELS_TO_SCROLL > height ) {
+      setLoadMore(true)
+    }
+	}
+
+  return (
+    <ScrollView onScroll={(e: any) => handleScroll(e)}>
+      <OText
+        size={20}
+        mBottom={15}
+        style={{ marginTop: 25, paddingHorizontal: 40 }}>
+        {t('MY_ORDERS', 'My Orders')}
+      </OText>
+      <View style={{ paddingLeft: 40, paddingRight: 40 }}>
+        <OrdersOption
+          {...props}
+          activeOrders
+          ordersLength={ordersLength}
+          setOrdersLength={setOrdersLength}
+          loadMoreStatus={loadMore}
+          setLoadMoreStatus={setLoadMore}
+        />
+      </View>
+      <View style={{ paddingLeft: 40, paddingRight: 40 }}>
+        <OrdersOption
+          {...props}
+          ordersLength={ordersLength}
+          setOrdersLength={setOrdersLength}
+        />
+      </View>
+    </ScrollView>
+  )
+}

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

@@ -0,0 +1,6 @@
+import styled, { css } from 'styled-components/native'
+
+export const Wrapper = styled.View`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.white};
+`

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
@@ -15,7 +15,8 @@ import {
 	PlaceholderLine,
 	Fade
 } from "rn-placeholder";
-import { View } from 'react-native'
+
+import { View, ScrollView } from 'react-native'
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const {
@@ -28,8 +29,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		customArray,
 		onNavigationRedirect,
 		orderStatus,
+		loadMoreStatus,
 		loadMoreOrders,
-		loadOrders
+		loadOrders,
 	} = props
 
 	const theme = useTheme();
@@ -98,10 +100,17 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}
 
 	useFocusEffect(
-	  React.useCallback(() => {
-	    loadOrders()
-	  }, [navigation])
-	)
+		React.useCallback(() => {
+		  loadOrders()
+		}, [navigation])
+	  )
+
+	useEffect(() => {
+		const hasMore = pagination?.totalPages && pagination?.currentPage !== pagination?.totalPages
+		if (loadMoreStatus && hasMore && !loading) {
+			loadMoreOrders()
+		}
+	}, [loadMoreStatus, loading, pagination])
 
 	return (
 		<>
@@ -127,7 +136,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			)}
 			{loading && (
 				<>
-					{activeOrders ? (
+					{!activeOrders ? (
 						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>
 							<View style={{ width: '100%', flexDirection: 'row' }}>
 								<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 35 }} />
@@ -171,7 +180,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 					<ActiveOrders
 						orders={orders.filter((order: any) => orderStatus.includes(order.status))}
 						pagination={pagination}
-						loadMoreOrders={loadMoreOrders}
 						reorderLoading={reorderLoading}
 						customArray={customArray}
 						getOrderStatus={getOrderStatus}
@@ -201,11 +209,6 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 			? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21]
 			: [1, 2, 5, 6, 10, 11, 12, 16, 17],
 		useDefualtSessionManager: true,
-		paginationSettings: {
-			initialPage: 1,
-			pageSize: 10,
-			controlType: 'infinity'
-		}
 	}
 
 	return <OrderList {...MyOrdersProps} />

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

@@ -253,7 +253,7 @@ export interface OrdersOptionParams {
 	pagination?: any,
 	titleContent?: string,
 	customArray?: Array<any>,
-	loadMoreOrders?: () => {},
+	loadMoreOrders?: any,
 	onNavigationRedirect?: any,
 	orderStatus?: any,
 	navigation?: any,
@@ -263,7 +263,8 @@ export interface OrdersOptionParams {
 	setOrdersLength?: ({ activeOrdersLength, previousOrdersLength }: { activeOrdersLength: number, previousOrdersLength: number }) => void,
 	ordersLength: { activeOrdersLength: number, previousOrdersLength: number },
 	setSelectedOrderId?: any,
-	setOpenMessges?: any
+	setOpenMessges?: any,
+	loadMoreStatus?: boolean
 }
 export interface ActiveOrdersParams {
 	orders?: any,

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

@@ -239,9 +239,9 @@ const CartUI = (props: any) => {
               </OSTotal>
               {cart?.status !== 2 && (
                 <OSTable>
-                  <View style={{ width: '100%', marginTop: 20 }}>
+                  <View style={{ flex: 1, marginTop: 20, paddingBottom: 20 }}>
                     <OText>{t('COMMENTS', 'Comments')}</OText>
-                    <View style={{ flex: 1, width: '100%' }}>
+                    <View style={{ flex: 1 }}>
                       <OInput
                         value={cart?.comment}
                         placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}

package/themes/uber-eats/src/components/Cart/styles.tsx

@@ -6,7 +6,7 @@ export const CContainer = styled.View`
 
 export const CartContent = styled.View`
   ${((props: any) => props.isBusinessCart && css`
-    margin-bottom: 45px;
+    margin-bottom: 65px;
   `)}
 `
 

package/themes/uber-eats/src/components/shared/OBottomPopup.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, ScrollView, Text } from 'react-native'
+import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, ScrollView, Text, Platform } from 'react-native'
 import { OText } from '../shared'
 import Icon from 'react-native-vector-icons/Feather'
-import { useTheme } from 'styled-components/native'
+import styled,{ useTheme } from 'styled-components/native'
 
 const deviceHeight = Dimensions.get('window').height
 
@@ -24,6 +24,11 @@ const OBottomPopup = (props: Props) => {
 
   const theme = useTheme()
 
+  const KeyboardView = styled.KeyboardAvoidingView`
+    flex-grow: 1;
+    flex-shrink: 1;
+  `;
+
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -79,26 +84,31 @@ const OBottomPopup = (props: Props) => {
           <View style={styles.touchableOutsideStyle} />
         </TouchableWithoutFeedback>
         <View style={styles.bottomContainer}>
-          <ScrollView showsVerticalScrollIndicator={false}>
-            {customHeaderShow ? (
-              <View style={styles.customHeaderStyle}>
-                <OText size={16} numberOfLines={1} style={styles.customTitleStyle}>
+          <KeyboardView
+            enabled
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          >
+            <ScrollView showsVerticalScrollIndicator={false} >
+              {customHeaderShow ? (
+                <View style={styles.customHeaderStyle}>
+                  <OText size={16} numberOfLines={1} style={styles.customTitleStyle}>
+                    {title}
+                  </OText>
+                  <Icon
+                    name='x'
+                    size={30}
+                    style={styles.closeBtnStyle}
+                    onPress={onClose}
+                  />
+                </View>
+              ) : (
+                <Text style={styles.titleStyle}>
                   {title}
-                </OText>
-                <Icon
-                  name='x'
-                  size={30}
-                  style={styles.closeBtnStyle}
-                  onPress={onClose}
-                />
-              </View>
-            ) : (
-              <Text style={styles.titleStyle}>
-                {title}
-              </Text>
-            )}
-            {children}
-          </ScrollView>
+                </Text>
+              )}
+              {children}
+            </ScrollView>
+          </KeyboardView>
         </View>
       </View>
     </Modal>

package/src/types/react-native-fbsdk/index.d.ts

@@ -1 +0,0 @@
-declare module 'react-native-fbsdk';