ordering-ui-react-native 0.16.75-release → 0.16.76-release

package/package.json

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

package/themes/original/index.tsx

@@ -97,6 +97,7 @@ import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { WalletTransactionItem } from './src/components/WalletTransactionItem';
 import { Promotions } from './src/components/Promotions'
 import { MultiCart } from './src/components/MultiCart'
+import { PageBanner } from './src/components/PageBanner'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
@@ -260,6 +261,7 @@ export {
 	UserFormDetailsUI,
 	WalletTransactionItem,
 	Promotions,
+	PageBanner,
 	MyOrders,
   MultiCart,
 	ORDER_TYPES,

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

@@ -41,6 +41,7 @@ import Animated from 'react-native-reanimated'
 import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
+import { PageBanner } from '../PageBanner'
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -414,7 +415,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           <BackgroundGray isIos={Platform.OS === 'ios'} />
         )}
         <IOScrollView
-          stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 2]}
+          stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
           style={{
             ...styles.mainContainer,
             marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
@@ -451,6 +452,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               />
             </ProfessionalFilterWrapper>
           )}
+          <PageBanner position='app_business_page' navigation={navigation} />
           <View
             style={{
               height: 8,
@@ -591,7 +593,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           professionalList={business?.professionals}
           professionalSelected={professionalSelected}
           handleChangeProfessional={handleChangeProfessionalSelected}
-          handleChangeProfessional={handleChangeProfessionalSelected}
           handleUpdateProfessionals={handleUpdateProfessionals}
           onSave={() => setOpenService(false)}
           onClose={() => setOpenService(false)}

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -18,8 +18,7 @@ import {
 	useSession,
 	useOrder,
 	useConfig,
-	useUtils,
-	useOrderingTheme
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
@@ -53,6 +52,7 @@ import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { PageBanner } from '../../../PageBanner'
 import { CitiesControl } from '../../../CitiesControl'
 
 const PIXELS_TO_SCROLL = 2000;
@@ -73,13 +73,25 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		logosLayout
 	} = props;
 	const theme = useTheme();
-	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
+
+	const [, t] = useLanguage();
+	const [{ user, auth }] = useSession();
+	const [orderState, { changeCityFilter }] = useOrder();
+	const [{ configs }] = useConfig();
+	const [{ parseDate }] = useUtils();
+
 	const appState = useRef(AppState.currentState)
-  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const [refreshing] = useState(false);
-	const bgHeader = orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image
+	const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2) ?? true
+	const hideHero = theme?.business_listing_view?.components?.business_hero?.hidden
+	const hidePreviousOrders = theme?.business_listing_view?.components?.previous_orders_block?.hidden
+	const hideHighestBusiness = theme?.business_listing_view?.components?.highest_rated_business_block?.hidden
+	const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
+	const bgHeader = theme?.business_listing_view?.components?.business_hero?.components?.image
+	const bgHeaderHeight = theme?.business_listing_view?.components?.business_hero?.components?.style?.height
+
 	const styles = StyleSheet.create({
 		container: {
 			marginBottom: 0,
@@ -143,19 +155,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		},
 	});
 
-
-	const [, t] = useLanguage();
-	const [{ user, auth }] = useSession();
-	const [orderState, { changeCityFilter }] = useOrder();
-	const [{ configs }] = useConfig();
-	const [{ parseDate }] = useUtils();
-
 	const { top } = useSafeAreaInsets();
 
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 	const [businessTypes, setBusinessTypes] = useState(null)
-	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options.value)
+	const [orderTypeValue, setOrderTypeValue] = useState(orderState?.options?.value)
 	const [isOpenCities, setIsOpenCities] = useState(false)
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
@@ -465,18 +470,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				)}
 			</View>
 			{!isChewLayout ? (
-				<HeaderWrapper
-					source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
-					style={{ paddingTop: top + 20 }}
-					resizeMode='cover'
-				>
-					{!auth && (
-
-						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-							<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
-						</TouchableOpacity>
+				<>
+					{!hideHero ? (
+						<HeaderWrapper
+							source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
+							style={{ paddingTop: top + 20 }}
+							resizeMode='cover'
+							bgHeaderHeight={bgHeaderHeight}
+						>
+							{!auth && (
+								<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+								</TouchableOpacity>
+							)}
+						</HeaderWrapper>
+					) : (
+						<>
+							{!auth && (
+								<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
+									<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+								</TouchableOpacity>
+							)}
+						</>
 					)}
-				</HeaderWrapper>
+				</>
 			) : (
 				<OrderTypesContainer>
 					<OrderTypeSelector
@@ -501,10 +518,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</TouchableOpacity>
 				</View>
 			)}
-			<OrderProgress
-				{...props}
-				isFocused={isFocused}
-			/>
+			{!hidePreviousOrders && (
+				<OrderProgress
+					{...props}
+					isFocused={isFocused}
+				/>
+			)}
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
@@ -537,7 +556,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</FeaturedWrapper>
 				)
 			}
-			{!isChewLayout && (
+			{!isChewLayout && !hideHighestBusiness && (
 				<>
 					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 					{
@@ -552,9 +571,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					}
 				</>
 			)}
+
+			<PageBanner position='app_business_listing' navigation={navigation} />
+
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
-				{!businessId && (
+				{!businessId && !isAllCategoriesHidden && (
 					<BusinessTypeFilter
 						images={props.images}
 						businessTypes={props.businessTypes}

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

@@ -100,17 +100,18 @@ const CartUI = (props: any) => {
     }
   }
 
-  const handleUpsellingPage = () => {
+  const handleUpsellingPage = (individualCart : any) => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
     const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
-    if (cartsAvailable.length === 1) {
+    if (cartsAvailable.length === 1 || !isMultiCheckout) {
+      const cart = isMultiCheckout ? cartsAvailable[0] : individualCart
       onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
-        cartUuid: cartsAvailable[0]?.uuid,
-        businessLogo: cartsAvailable[0]?.business?.logo,
-        businessName: cartsAvailable[0]?.business?.name,
-        cartTotal: cartsAvailable[0]?.total
+        cartUuid: cart?.uuid,
+        businessLogo: cart?.business?.logo,
+        businessName: cart?.business?.name,
+        cartTotal: cart?.total
       })
     } else {
       const groupKeys: any = {}

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

@@ -0,0 +1,146 @@
+import React, { useRef } from 'react'
+import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
+import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import Carousel from 'react-native-snap-carousel'
+import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useTheme } from 'styled-components/native';
+import { PageBannerWrapper } from './styles'
+
+const PageBannerUI = (props: any) => {
+  const {
+    pageBannerState,
+    navigation
+  } = props
+
+	const theme = useTheme();
+	const [{ optimizeImage }] = useUtils();
+  const carouselRef = useRef(null)
+
+  const windowWidth = Dimensions.get('window').width;
+
+  const styles = StyleSheet.create({
+    mainSwiper: {
+			height: 300,
+		},
+    swiperButton: {
+      position: 'absolute',
+      zIndex: 100,
+			alignItems: 'center',
+			justifyContent: 'center',
+			width: 32,
+			height: 32,
+			borderRadius: 16,
+			backgroundColor: 'rgba(208,208,208,0.5)'
+		},
+    sliderWrapper: {
+      width: '100%',
+      height: 300
+    }
+  })
+
+  const onRedirect = (route: string, params?: any) => {
+		navigation.navigate(route, params)
+	}
+
+  const handleGoToPage = (action: any) => {
+    if (!action?.url) return
+    let slug
+    if (action.type === 'business') {
+      slug = action.url.split('store/')[1]
+      onRedirect('Business', {
+        store: slug
+      })
+    }
+    if (action.type === 'product') {
+      slug = action.url.split('store/')[1]?.split('?')[0]
+      onRedirect('ProductDetails', {
+				businessSlug: slug,
+				businessId: action.business_id,
+        categoryId: action.category_id,
+        productId: action.product_id
+			})
+    }
+  }
+
+  const renderItem = ({ item, index }) => {
+    return (
+      <TouchableOpacity
+        onPress={() => handleGoToPage(item.action)}
+      >
+        <View style={styles.sliderWrapper}>
+          <FastImage
+            style={{ height: '100%', width: '100%' }}
+            resizeMode='cover'
+            source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
+          />
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <>
+      {pageBannerState.loading ? (
+        <PageBannerWrapper>
+          <Placeholder
+            Animation={Fade}
+          >
+            <PlaceholderLine
+							height={300}
+							style={{ marginBottom: 20, borderRadius: 8 }}
+						/>
+          </Placeholder>
+        </PageBannerWrapper>
+      ) : (
+        <>
+          {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
+            <PageBannerWrapper>
+              <TouchableOpacity
+                style={[styles.swiperButton, { left: 25 }]}
+                onPress={() => carouselRef.current.snapToPrev()}
+              >
+                <IconAntDesign
+                  name="caretleft"
+                  color={theme.colors.white}
+                  size={13}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.swiperButton, { right: 25 }]}
+                onPress={() => carouselRef.current.snapToNext()}
+              >
+                <IconAntDesign
+                  name="caretright"
+                  color={theme.colors.white}
+                  size={13}
+                />
+              </TouchableOpacity>
+              <Carousel
+                ref={carouselRef}
+                loop={pageBannerState.banner?.items.length > 1}
+                data={pageBannerState.banner?.items}
+                renderItem={renderItem}
+                sliderWidth={windowWidth - 80}
+                itemWidth={windowWidth - 80}
+                inactiveSlideScale={1}
+                pagingEnabled
+                removeClippedSubviews={false}
+                inactiveSlideOpacity={1}
+              />
+            </PageBannerWrapper>
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+export const PageBanner = (props: any) => {
+  const pageBannerProps = {
+    ...props,
+    UIComponent: PageBannerUI
+  }
+  return <PageBannerController {...pageBannerProps} />
+}

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const PageBannerWrapper = styled.View`
+  margin-horizontal: 40px;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-vertical: 30px;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+`

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

@@ -584,7 +584,7 @@ export interface UpsellingProductsParams {
 	business?: any;
 	businessId?: number;
 	cartProducts?: Array<any>;
-	handleUpsellingPage: () => void;
+	handleUpsellingPage: (cart ?: any) => void;
 	openUpselling: boolean;
 	canOpenUpselling?: boolean;
 	setCanOpenUpselling?: (value: any) => void;