ordering-ui-react-native 0.13.6 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.13.6",
+  "version": "0.14.0",
   "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/index.tsx

@@ -20,6 +20,7 @@ import { Checkout } from './components/Checkout';
 import { CouponControl } from './components/CouponControl';
 import { DriverTips } from './components/DriverTips';
 import { FacebookLogin } from './components/FacebookLogin';
+import { FacebookPixel } from './components/FacebookPixel';
 import { FloatingButton } from './components/FloatingButton';
 import { ForgotPasswordForm } from './components/ForgotPasswordForm';
 import { GoogleMap } from './components/GoogleMap';
@@ -118,6 +119,7 @@ export {
   CouponControl,
   DriverTips,
   FacebookLogin,
+  FacebookPixel,
   FloatingButton,
   ForgotPasswordForm,
   GoogleMap,

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

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

package/themes/instacart/src/components/BusinessBasicInformation/index.tsx

@@ -71,7 +71,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
 		<BusinessContainer>
 			<BusinessHeader
 				style={{...styles.businesInfoheaderStyle}}
-				source={{ uri: header || optimizeImage(businessState?.business?.header, 'h_400,c_limit') }}
+				source={{ uri: header || optimizeImage(businessState?.business?.header, 'h_300,c_limit') }}
 			>
 				<BusinessLogo>
 					{loading ? (
@@ -83,7 +83,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
 					) : (
 						!isBusinessInfoShow && (
 							<OIcon
-								url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
+								url={logo || optimizeImage(businessState?.business?.logo, 'h_100,c_limit')}
 								style={styles.businessLogo}
 								cover
 							/>
@@ -140,13 +140,15 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
 								<OText color={theme.colors.textSecondary} numberOfLines={1} style={{ flexBasis: '85%', marginEnd: 6 }}>
 									{orderState?.options?.address?.address}
 								</OText>
-								<TouchableOpacity
-									onPress={() => auth
-										? onRedirect('AddressList', { isGoBack: true, isFromProductsList: true })
-										: onRedirect('AddressForm', { address: orderState.options?.address })}
-								>
-									<OIcon width={16} src={theme.images.general.pencil} />
-								</TouchableOpacity>
+								{!isBusinessInfoShow && (
+									<TouchableOpacity
+										onPress={() => auth
+											? onRedirect('AddressList', { isGoBack: true, isFromProductsList: true })
+											: onRedirect('AddressForm', { address: orderState.options?.address })}
+									>
+										<OIcon width={16} src={theme.images.general.pencil} />
+									</TouchableOpacity>
+								)}
 							</View>
 							<View style={{ ...styles.infoItem, paddingStart: 12 }}>
 								<OText color={theme.colors.textSecondary} numberOfLines={1} style={{ flexBasis: '85%', paddingEnd: 6 }}>
@@ -154,46 +156,16 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
 										? moment(orderState.options?.moment).format('dddd, MMM.DD.yyyy hh:mm A')
 										: t('ASAP_ABBREVIATION', 'ASAP')}
 								</OText>
-								<TouchableOpacity
-									onPress={() => navigation.navigate('MomentOption')}
-								>
-									<OIcon src={theme.images.general.info} width={16} />
-								</TouchableOpacity>
+								{!isBusinessInfoShow && (
+									<TouchableOpacity
+										onPress={() => navigation.navigate('MomentOption')}
+									>
+										<OIcon src={theme.images.general.info} width={16} />
+									</TouchableOpacity>
+								)}
 							</View>
 							</>
-						}
-						{/* <View style={styles.bullet}>
-							<IconEvilIcons
-								name='clock'
-								color={theme.colors.textSecondary}
-								size={16}
-							/>
-							{orderState?.options?.type === 1 ? (
-								<OText color={theme.colors.textSecondary} style={styles.metadata}>
-									{convertHoursToMinutes(business?.delivery_time)}
-								</OText>
-							) : (
-								<OText color={theme.colors.textSecondary} style={styles.metadata}>
-									{convertHoursToMinutes(business?.pickup_time)}
-								</OText>
-							)}
-						</View>
-						<View style={styles.bullet}>
-							<IconEvilIcons
-								name='location'
-								color={theme.colors.textSecondary}
-								size={16}
-							/>
-							<OText color={theme.colors.textSecondary} style={styles.metadata}>{parseDistance(business?.distance || 0)}</OText>
-						</View>
-						<View style={styles.bullet}>
-							<MaterialComIcon
-								name='truck-delivery'
-								color={theme.colors.textSecondary}
-								size={16}
-							/>
-						</View>
-						<OText color={theme.colors.textSecondary} style={styles.metadata}>{business && parsePrice(business?.delivery_price || 0)}</OText> */}
+						}					
 					</BusinessInfoItem>
 				</View>
 				{showReview && (

package/themes/instacart/src/components/BusinessController/index.tsx

@@ -144,7 +144,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 
 			<BusinessLogo>
 				<OIcon
-					url={optimizeImage(business?.logo, 'h_300,c_limit')}
+					url={optimizeImage(business?.logo, 'h_50,c_limit')}
 					style={styles.businessLogo}
 				/>
 			</BusinessLogo>

package/themes/instacart/src/components/BusinessInformation/styles.tsx

@@ -11,7 +11,6 @@ export const GrayBackground = styled.View`
 `
 export const WrapMainContent = styled.ScrollView`
   flex: 1;
-  margin-top: 40px;
 `
 export const InnerContent = styled.View`
   padding: 30px 20px;

package/themes/instacart/src/components/BusinessProductsList/index.tsx

@@ -4,14 +4,15 @@ import { SingleProductCard } from '../SingleProductCard'
 import { NotFoundSource } from '../NotFoundSource'
 import { BusinessProductsListParams } from '../../types'
 import { OText } from '../shared'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { Platform, View, TouchableOpacity } from 'react-native'
+import { useTheme } from 'styled-components/native'
 import {
   ProductsContainer,
   ErrorMessage,
-  WrapperNotFound
+  WrapperNotFound,
+  ProductsWrapper
 } from './styles'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { Platform, View, TouchableOpacity } from 'react-native'
-import { useTheme } from 'styled-components/native'
 import { ScrollView } from 'react-native-gesture-handler'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
@@ -42,8 +43,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       if (categoryState?.products.length > allProducts.length) {
         setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
       }
+      if (searchValue) {
+        setAllProducts(categoryState?.products.sort((a: any, b: any) => a.id - b.id))
+      }
     }
-  }, [category, categoryState])
+  }, [category, categoryState, searchValue])
 
   return (
     <ProductsContainer>
@@ -67,7 +71,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             >
               <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS == 'ios' ? '600' : 'bold'}} mBottom={10}>{t('FEATURED', 'Featured')}</OText>
             </TouchableOpacity>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <ProductsWrapper>
               {allProducts?.map((product: any, index: number) => product.featured && (
                 <SingleProductCard
                   key={index}
@@ -77,7 +81,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   onProductClick={onProductClick}
                 />
               ))}
-            </ScrollView>
+            </ProductsWrapper>
           </>
         )
       }
@@ -95,7 +99,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     >
                       <OText style={{...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold'}} mBottom={10}>{category.name}</OText>
                     </TouchableOpacity>
-                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                    <ProductsWrapper>
                       {
                         products.map((product: any, index: number) => (
                           <SingleProductCard
@@ -107,7 +111,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                           />
                         ))
                       }
-                    </ScrollView>
+                    </ProductsWrapper>
                   </>
                 )
               }
@@ -118,29 +122,27 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {
         (categoryState.loading || isBusinessLoading) && (
-          <>
+          <Placeholder style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
+            <PlaceholderLine width={50} height={16} style={{ marginBottom: 20 }} />
             {[...Array(categoryState?.pagination?.nextPageItems).keys()].map((item, i) => (
-              <Placeholder key={i} style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
-                <PlaceholderLine width={50} height={20} style={{ marginBottom: 20 }} />
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                  <View style={{flexBasis: '47%'}}>
-                    <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
-                    <Placeholder>
-                        <PlaceholderLine width={60} style={{marginBottom: 12}}/>
-                        <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
-                  <View style={{flexBasis: '47%'}}>
-                    <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
-                    <Placeholder>
-                        <PlaceholderLine width={60} style={{marginBottom: 25}}/>
-                        <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
+              <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <View style={{flexBasis: '47%'}}>
+                  <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
+                  <Placeholder>
+                      <PlaceholderLine width={20} />
+                      <PlaceholderLine width={60} style={{marginBottom: 12}}/>
+                  </Placeholder>
                 </View>
-              </Placeholder>
+                <View style={{flexBasis: '47%'}}>
+                  <PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
+                  <Placeholder>
+                      <PlaceholderLine width={20} />
+                      <PlaceholderLine width={60} style={{marginBottom: 25}}/>
+                  </Placeholder>
+                </View>
+              </View>
             ))}
-          </>
+          </Placeholder>
         )
       }
       {

package/themes/instacart/src/components/BusinessProductsList/styles.tsx

@@ -11,4 +11,9 @@ export const ErrorMessage = styled.View`
 
 export const WrapperNotFound = styled.View`
   height: 500px;
-`
+`
+export const ProductsWrapper = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+`

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

@@ -1,6 +1,5 @@
-import React, { useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, ScrollView } from 'react-native'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import React, { useEffect, useState } from 'react'
+import { View, StyleSheet, ScrollView, Animated, Dimensions } from 'react-native'
 import {
 	BusinessAndProductList,
 	useLanguage,
@@ -28,13 +27,14 @@ import { FloatingButton } from '../FloatingButton'
 import { ProductForm } from '../ProductForm'
 import { UpsellingProducts } from '../UpsellingProducts'
 import { useTheme } from 'styled-components/native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { OrderSummary } from '../OrderSummary'
 import { Cart } from '../Cart'
-import { SingleProductCard } from '../../../../../src/components/SingleProductCard'
+import { SingleProductCard } from '../SingleProductCard'
 import NavBar from '../NavBar'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 
+const { width, height } = Dimensions.get('screen')
+
 const PIXELS_TO_SCROLL = 1000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
@@ -58,6 +58,43 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		updateProductModal
 	} = props
 
+	const styles = StyleSheet.create({
+		mainContainer: {
+			flex: 1,
+			display: categorySelected.id !== null ? 'none' : 'flex'
+		},
+		BackIcon: {
+			paddingRight: 20,
+		},
+		headerItem: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			marginHorizontal: 20,
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			color: '#FFF',
+			backgroundColor: 'rgba(0,0,0,0.3)',
+			borderRadius: 16,
+			paddingHorizontal: 15,
+			marginRight: 15,
+			marginTop: 20
+		},
+		searchIcon: {
+			borderWidth: 0,
+			color: '#FFF',
+			backgroundColor: 'rgba(0,0,0,0.3)',
+			borderRadius: 24,
+			padding: 15,
+			justifyContent: 'center'
+		},
+		productsWrapper: {
+			flexDirection: 'row',
+			flexWrap: 'wrap',
+			alignItems: 'flex-start'
+		}
+	})
+
 	const theme = useTheme()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
@@ -71,7 +108,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [canOpenUpselling, setCanOpenUpselling] = useState(false)
 	const [openCart, setOpenCart] = useState(false)
 
-	const { top, bottom } = useSafeAreaInsets();
+  const [alignment] = useState(new Animated.Value(0))
+  const actionSheetIntropolate = alignment.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-height, 0]
+  })
 
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 
@@ -117,6 +158,22 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		}
 	}
 
+	useEffect(() => {
+		if (categorySelected.id === null) {
+			Animated.timing(alignment, {
+				toValue: 0,
+				duration: 500,
+				useNativeDriver: false
+			}).start()
+		} else {
+			Animated.timing(alignment, {
+				toValue: 1,
+				duration: 500,
+				useNativeDriver: false
+			}).start()
+		}
+	}, [categorySelected.id])
+
 	return (
 		<>
 			<BusinessProductsListingContainer
@@ -129,7 +186,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				<WrapHeader>
 					{!loading && business?.id && (
 						<>
-							<TopHeader style={{ marginTop: top }}>
+							<TopHeader>
 								<View style={{ ...styles.headerItem, flex: 1 }}>
 									<OButton
 										imgLeftSrc={theme.images.general.arrow_left}
@@ -213,6 +270,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					handleClick={() => onRedirect('CartPage', { cart: currentCart })}
 				/>
 			)}
+
 			<OModal
 				open={!!curProduct || (!!productModal.product && !orderState.loading)}
 				onClose={handleCloseProductModal}
@@ -230,18 +288,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				/>
 			</OModal>
 
-			<OModal
-				open={categorySelected.id !== null}
-				onClose={() => handleChangeCategory({ id: null, name: 'All' })}
-				entireModal
-				customClose
-			>
-				<ScrollView
+			{categorySelected.id !== null && (
+				<Animated.ScrollView
 					contentContainerStyle={{
 						paddingHorizontal: 40,
 						paddingVertical: 20
 					}}
 					onScroll={(e: any) => handleScroll(e)}
+					style={{
+						bottom: actionSheetIntropolate
+					}}
 				>
 					<NavBar
 						title={categorySelected?.name}
@@ -249,7 +305,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						showCall={false}
 						style={{ paddingHorizontal: 0, marginHorizontal: -7 }}
 					/>
-					<View>
+					<View style={styles.productsWrapper}>
 						{categorySelected.id && (
 							categoryState.products?.map((product: any, index: number) => (
 								<SingleProductCard
@@ -265,27 +321,30 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 					{
 						categoryState.loading && (
-						<>
-							{[...Array(10).keys()].map((item, i) => (
-							<Placeholder key={i} style={{ marginBottom: 10 }} Animation={Fade}>
-								<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-									<View
-										style={{ width: 80, height: 80 }}
-									>
-										<PlaceholderLine width={80} height={70} />
+							<Placeholder style={{ padding: 5, marginBottom: 20 }} Animation={Fade}>
+								{[...Array(categoryState?.pagination?.nextPageItems).keys()].map((item, i) => (
+								<View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+									<View style={{flexBasis: '47%'}}>
+									<PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
+									<Placeholder>
+										<PlaceholderLine width={20} />
+										<PlaceholderLine width={60} style={{marginBottom: 12}}/>
+									</Placeholder>
 									</View>
+									<View style={{flexBasis: '47%'}}>
+									<PlaceholderLine width={80} height={100} style={{ marginBottom: 10 }} />
 									<Placeholder>
-										<PlaceholderLine width={60} style={{marginBottom: 30}}/>
 										<PlaceholderLine width={20} />
+										<PlaceholderLine width={60} style={{marginBottom: 25}}/>
 									</Placeholder>
+									</View>
 								</View>
+								))}
 							</Placeholder>
-							))}
-						</>
 						)
 					}
-				</ScrollView>
-			</OModal>
+				</Animated.ScrollView>
+			)}
 
 			{openUpselling && (
 				<UpsellingProducts
@@ -302,37 +361,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	)
 }
 
-const styles = StyleSheet.create({
-	mainContainer: {
-		flex: 1,
-	},
-	BackIcon: {
-		paddingRight: 20,
-	},
-	headerItem: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		marginHorizontal: 20,
-	},
-	btnBackArrow: {
-		borderWidth: 0,
-		color: '#FFF',
-		backgroundColor: 'rgba(0,0,0,0.3)',
-		borderRadius: 16,
-		paddingHorizontal: 15,
-		marginRight: 15,
-		marginTop: 20
-	},
-	searchIcon: {
-		borderWidth: 0,
-		color: '#FFF',
-		backgroundColor: 'rgba(0,0,0,0.3)',
-		borderRadius: 24,
-		padding: 15,
-		justifyContent: 'center'
-	}
-})
-
 export const BusinessProductsListing = (props: BusinessProductsListingParams) => {
 	const businessProductslistingProps = {
 		...props,

package/themes/instacart/src/components/SingleProductCard/index.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import { useLanguage, useConfig, useOrder, useUtils } from 'ordering-components/native'
 import { SingleProductCardParams } from '../../types'
 import {
@@ -23,9 +23,8 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 
   const styles = StyleSheet.create({
     container: {
-      marginBottom: 15,
-      width: (windowWidth - 140) / 2,
-      minHeight: (windowWidth - 140) / 2 + 50
+      width: (windowWidth - 80) / 2,
+      height: (windowWidth - 80) / 2 + 40
     },
     textStyle: {
       flex: 1,
@@ -37,8 +36,8 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       lineHeight: 18
     },
     productStyle: {
-      width: (windowWidth - 200) / 2,
-      height: (windowWidth - 200) / 2,
+      width: (windowWidth - 160) / 2,
+      height: (windowWidth - 160) / 2,
       borderRadius: 3,
 		  marginTop: 5
     },
@@ -70,10 +69,6 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 
   const maxProductQuantity = Math.min(maxCartProductConfig, maxCartProductInventory)
 
-  useEffect(() => {
-    
-  }, [product]);
-
   return (
     <CardContainer style={styles.container}
       onPress={() => onProductClick?.(product)}

package/themes/instacart/src/components/SingleProductCard/styles.tsx

@@ -1,11 +1,11 @@
 import styled from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
-  flex: 1;
+  /* flex-grow: 1; */
   align-items: flex-start;
   padding: 10px;
   position: relative;
-  margin-end: 10px;
+  /* margin-end: 10px; */
   border-radius: 3px;
 `
 export const CardInfo = styled.View`

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/MomentOption/index.tsx

@@ -104,6 +104,9 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	const [toggleTime, setToggleTime] = useState(false);
 	const [selectedTime, setSelectedTime] = useState(timeSelected);
+	const [minDate, setMinDate] = useState(new Date())
+	const [maxDate, setMaxDate] = useState(new Date)
+	const [alert, setAlert] = useState<any>({ show: false })
 
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
@@ -173,6 +176,19 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 			},
 		};
 	};
+
+	useEffect(() => {
+		if (datesList?.length > 0) {
+		  const _datesList = datesList.slice(0, Number(configs?.max_days_preorder?.value || 6))
+		  const minDateParts = _datesList[0].split('-')
+		  const maxDateParts = _datesList[_datesList.length - 1].split('-')
+		  const _minDate = new Date(minDateParts[0], minDateParts[1] - 1, minDateParts[2])
+		  const _maxDate = new Date(maxDateParts[0], maxDateParts[1] - 1, maxDateParts[2])
+		  setMinDate(_minDate)
+		  setMaxDate(_maxDate)
+		}
+	}, [datesList])
+
 	return (
 		<>
 		<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
@@ -309,7 +325,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 									customDayHeaderStyles={customDayHeaderStylesCallback}
 									weekdays={weekDays}
 									selectedStartDate={momento}
-									minDate={moment()}
+									minDate={minDate}
+                					maxDate={maxDate}
 								/>
 							</View>
 						)}

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';