ordering-ui-react-native 0.13.6 → 0.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.13.6",
+  "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/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/src/types/react-native-fbsdk/index.d.ts

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