ordering-ui-react-native 0.15.8 → 0.15.10-release

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -17,17 +17,21 @@ import { SearchBar } from '../SearchBar'
 import { BusinessProductsCategories } from '../BusinessProductsCategories'
 import { BusinessProductsList } from '../BusinessProductsList'
 import { BusinessProductsListingParams } from '../../types'
+import { _retrieveStoreData, _removeStoreData } from '../../providers/StoreUtil';
 import {
 	TopHeader,
 	WrapSearchBar,
 	WrapContent,
-	BusinessProductsListingContainer
+	BusinessProductsListingContainer,
+	FiltProductsContainer,
+	ContainerSafeAreaView,
+	BackgroundGray
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
 import { UpsellingRedirect } from './UpsellingRedirect'
 import Animated from 'react-native-reanimated'
 
-const PIXELS_TO_SCROLL = 1000
+const PIXELS_TO_SCROLL = 2000
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const {
@@ -50,7 +54,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
-	const [orderState] = useOrder()
+	const [orderState, { clearCart }] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, { showToast }] = useToast()
 	const [{ configs }] = useConfig()
@@ -72,6 +76,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			borderWidth: 0,
 			backgroundColor: theme.colors.clear,
 			shadowColor: theme.colors.clear,
+			padding: 40,
 		},
 		searchIcon: {
 			borderWidth: 0,
@@ -90,32 +95,21 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [categoriesLayout, setCategoriesLayout] = useState<any>({})
 	const [productListLayout, setProductListLayout] = useState<any>(null)
 	const [isCategoryClicked, setCategoryClicked] = useState(false)
+	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
-
+	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
+	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
 
 	const onProductClick = (product: any) => {
-		const cartProduct = currentCart?.products?.find((cproduct: any) => cproduct?.id === product?.id)
-		if (cartProduct) {
-			onRedirect('ProductDetails', {
-				businessId:  business.id,
-				isCartProduct: true,
-				productCart: cartProduct,
-				businessSlug: business?.slug,
-				categoryId: cartProduct?.category_id,
-				productId: cartProduct?.id,
-			})
-		} else {
-			onRedirect('ProductDetails', {
-				product: product,
-				businessSlug: business.slug,
-				businessId: business.id,
-			})
-		}
-
+		onRedirect('ProductDetails', {
+			product: product,
+			businessSlug: business.slug,
+			businessId: business.id,
+		})
 	}
 
 	const handleCancel = () => {
@@ -169,18 +163,32 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	const handleTouchDrag = useCallback(() => {
 		setCategoryClicked(false);
-	  }, []);
-	
+	}, []);
+
 	const handleBackNavigation = () => {
 		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
 	}
 
+	const removeCartByReOrder = async () => {
+		const removeCardId = await _retrieveStoreData('remove-cartId')
+		if (currentCart && removeCardId) {
+			clearCart(removeCardId)
+			_removeStoreData('remove-cartId')
+			showToast(ToastType.Info, t('PRODUCT_REMOVED', 'Products removed from cart'))
+		}
+	}
+
+	useEffect(() => {
+		removeCartByReOrder()
+	}, [])
+
 	return (
-		<SafeAreaView
+		<ContainerSafeAreaView
 			style={{ flex: 1 }}
+			isOpenFiltProducts={isOpenFiltProducts}
 		>
 			<Animated.View style={{ position: 'relative' }}>
-				<TopHeader>
+				<TopHeader isIos={Platform.OS === 'ios'}>
 					{!isOpenSearchBar && (
 						<>
 							<View style={{ ...styles.headerItem, flex: 1 }}>
@@ -218,6 +226,46 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					)}
 				</TopHeader>
 			</Animated.View>
+
+			{business?.categories?.length > 0 && isOpenFiltProducts && (
+					<FiltProductsContainer
+						style={{
+							height: Dimensions.get('window').height - filtProductsHeight
+						}}
+					>
+						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
+							<BusinessProductsList
+								categories={[
+									{ id: null, name: t('ALL', 'All') },
+									{ id: 'featured', name: t('FEATURED', 'Featured') },
+									...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+								]}
+								category={categorySelected}
+								categoryState={categoryState}
+								businessId={business.id}
+								errors={errors}
+								onProductClick={onProductClick}
+								handleSearchRedirect={handleSearchRedirect}
+								featured={featuredProducts}
+								searchValue={searchValue}
+								handleClearSearch={handleChangeSearch}
+								errorQuantityProducts={errorQuantityProducts}
+								handleCancelSearch={handleCancel}
+								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
+								setCategoriesLayout={setCategoriesLayout}
+								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
+								isFiltMode
+							/>
+						</View>
+					</FiltProductsContainer>
+			)}
+			{isOpenFiltProducts && (
+				<BackgroundGray />
+			)}
 			<BusinessProductsListingContainer
 				stickyHeaderIndices={[2]}
 				style={styles.mainContainer}
@@ -251,7 +299,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								selectedCategoryId={selectedCategoryId}
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
-              					setCategoryClicked={setCategoryClicked}
+								setCategoryClicked={setCategoryClicked}
+
 							/>
 						)}
 					</>
@@ -279,8 +328,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								errorQuantityProducts={errorQuantityProducts}
 								handleCancelSearch={handleCancel}
 								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setCategoriesLayout={setCategoriesLayout}
 								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
+								onClickCategory={handleChangeCategory}
 							/>
 						</WrapContent>
 					</>
@@ -310,16 +363,18 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
 				<FloatingButton
 					btnText={
-						currentCart?.subtotal >= currentCart?.minimum
-							? t('VIEW_ORDER', 'View Order')
-							: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
+						openUpselling
+							? t('LOADING', 'Loading')
+							: currentCart?.subtotal >= currentCart?.minimum
+								? t('VIEW_ORDER', 'View Order')
+								: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
 					}
-					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
+					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
 					btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
 					btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-					btnLeftValue={currentCart?.products?.length}
+					btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
 					btnRightValue={parsePrice(currentCart?.total)}
-					disabled={currentCart?.subtotal < currentCart?.minimum}
+					disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
 					handleClick={() => setOpenUpselling(true)}
 				/>
 			)}
@@ -329,16 +384,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					business={currentCart?.business}
 					cartProducts={currentCart?.products}
 					cart={currentCart}
-          			setOpenUpselling={setOpenUpselling}
+					setOpenUpselling={setOpenUpselling}
 					handleUpsellingPage={handleUpsellingPage}
 					handleCloseUpsellingPage={handleCloseUpsellingPage}
 					openUpselling={openUpselling}
 					canOpenUpselling={canOpenUpselling}
 					setCanOpenUpselling={setCanOpenUpselling}
-          			onRedirect={onRedirect}
+					onRedirect={onRedirect}
 				/>
 			)}
-		</SafeAreaView>
+		</ContainerSafeAreaView>
 	)
 }
 

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

@@ -1,5 +1,8 @@
 import styled, { css } from 'styled-components/native'
 
+export const ContainerSafeAreaView = styled.SafeAreaView`
+`
+
 export const WrapHeader = styled.View`
   position: relative;
 `
@@ -11,6 +14,7 @@ export const TopHeader = styled.View`
   z-index: 1;
   height: 60px;
   min-height: 60px;
+  margin-top: ${(props : any) => props.isIos ? '0' : '40px'};
 `
 export const AddressInput = styled.TouchableOpacity`
   flex: 1;
@@ -33,3 +37,21 @@ export const BusinessProductsListingContainer = styled.ScrollView`
     margin-bottom: 50px;
   `}
 `
+
+export const FiltProductsContainer = styled.ScrollView`
+  position: absolute;
+  width: 100%;
+  z-index: 2000;
+  top: ${(props : any) => props.isIos ? '40px': '80px'};
+  margin-top: 20px;
+`
+
+export const BackgroundGray = styled.View`
+  flex: 1;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  position: absolute; 
+  margin-top: 100px; 
+  z-index: 100;
+  width: 100%;
+`

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

@@ -90,33 +90,12 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 		</View>
 	);
 
-	const ReviewItem = ({ comment, created_at, total, customer }: any) => (
+	const ReviewItem = ({ comment, created_at, total }: any) => (
 		<View style={{ marginBottom: 30 }}>
-			<View
-				style={{ flexDirection: 'row', marginBottom: 19, alignItems: 'center' }}>
-				<OIcon
-					url={theme.images.dummies.customerPhoto}
-					width={38}
-					height={38}
-					style={{
-						borderRadius: 7.6,
-						borderWidth: 1,
-						borderColor: theme.colors.border,
-						marginEnd: 9,
-					}}
-				/>
-				<View>
-					<OText size={12} color={theme.colors.textNormal} weight={'500'}>
-						{customer?.name || 'Jane Cooper'}
-					</OText>
-					<OText size={10} color={theme.colors.textSecondary}>
-						{moment(created_at).format('MMMM d, yyyy • hh:mm')}
-					</OText>
-				</View>
-			</View>
-			<OText size={10} color={theme.colors.textNormal}>
-				{comment}
+			<OText size={12} color={theme.colors.textSecondary}>
+				{moment(created_at).format('MMMM d, yyyy • hh:mm')}
 			</OText>
+			<OText size={12} color={theme.colors.textNormal}>{comment}</OText>
 		</View>
 	);
 

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

@@ -61,7 +61,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleChangeSearch,
 		businessId
 	} = props;
-
 	const theme = useTheme();
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
@@ -120,7 +119,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
-
+	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 	const timerId = useRef<any>(false)
 	// const panResponder = useRef(
 	// 	PanResponder.create({
@@ -166,25 +165,22 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		return R * c
 	}
 
-	useEffect(() => {
-		if (businessesList.businesses.length > 0) {
-			const fb = businessesList.businesses.filter((b) => b.featured == true);
-			const ary = [];
-			while (fb.length > 0) {
-				ary.push(fb.splice(0, 2));
-			}
-			setFeaturedBusinesses(ary);
-		}
-	}, [businessesList.businesses]);
-
 	const resetInactivityTimeout = () => {
 		clearTimeout(timerId.current)
 		timerId.current = setInterval(() => {
 			getBusinesses(true)
-		}, 300000)
+		}, 120000)
 	}
 
 	useEffect(() => {
+		if (!businessesList?.loading) {
+			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
+			const ary = [];
+			while (fb.length > 0) {
+				ary.push(fb.splice(0, 2));
+			}
+			setFeaturedBusinesses(ary);
+		}
 		resetInactivityTimeout()
 	}, [businessesList.loading])
 
@@ -207,27 +203,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		})
 	}, [orderState?.options?.address?.location])
 
-	useEffect(() => {
-		const onFocusApp = (nextAppState: any) => {
-			if (
-				appState.current.match(/inactive|background/) &&
-				nextAppState === "active"
-			) {
-				getBusinesses(true);
-			}
-			appState.current = nextAppState;
-			setAppStateVisible(appState.current);
-		}
-
-		AppState.addEventListener("change", onFocusApp);
-		return () => {
-			AppState.removeEventListener('change', onFocusApp);
-		};
-	}, [])
-
 	useFocusEffect(
 		useCallback(() => {
-			getBusinesses(true)
 			resetInactivityTimeout()
 			return () => clearTimeout(timerId.current)
 		}, [navigation])
@@ -288,25 +265,27 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								style={{ marginStart: 8 }}
 							/>
 						</WrapMomentOption>
-						<WrapMomentOption
-							onPress={() => handleMomentClick()}>
-							<OText
-								size={12}
-								numberOfLines={1}
-								ellipsizeMode="tail"
-								color={theme.colors.textSecondary}>
-								{orderState.options?.momentß
-									? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-									: t('ASAP_ABBREVIATION', 'ASAP')}
-							</OText>
-							{isPreorderEnabled && (
-								<OIcon
-									src={theme.images.general.arrow_down}
-									width={10}
-									style={{ marginStart: 8 }}
-								/>
-							)}
-						</WrapMomentOption>
+						{isPreOrderSetting && (
+							<WrapMomentOption
+								onPress={() => handleMomentClick()}>
+								<OText
+									size={12}
+									numberOfLines={1}
+									ellipsizeMode="tail"
+									color={theme.colors.textSecondary}>
+									{orderState.options?.momentß
+										? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
+										: t('ASAP_ABBREVIATION', 'ASAP')}
+								</OText>
+								{isPreorderEnabled && (
+									<OIcon
+										src={theme.images.general.arrow_down}
+										width={10}
+										style={{ marginStart: 8 }}
+									/>
+								)}
+							</WrapMomentOption>
+						)}
 
 						{!businessId && (
 							<SearchBar
@@ -338,7 +317,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
-						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled
@@ -401,6 +380,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							handleCustomClick={handleBusinessClick}
 							orderType={orderState?.options?.type}
 							navigation={navigation}
+							businessHeader={business?.header}
+							businessFeatured={business?.featured}
+							businessLogo={business?.logo}
+							businessReviews={business?.reviews}
+							businessDeliveryPrice={business?.delivery_price}
+							businessDeliveryTime={business?.delivery_time}
+							businessPickupTime={business?.pickup_time}
+							businessDistance={business?.distance}
 						/>
 					)
 				)}

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

@@ -24,6 +24,7 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
 import { OAlert } from '../../../../../src/components/shared'
+import { PlaceSpot } from '../PlaceSpot'
 
 const CartUI = (props: any) => {
   const {
@@ -54,12 +55,14 @@ const CartUI = (props: any) => {
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+  const [openPlaceModal, setOpenPlaceModal] = useState(false)
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
 
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
+  const placeSpotTypes = [3, 4]
 
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
@@ -353,6 +356,24 @@ const CartUI = (props: any) => {
                 </OText>
               </OSTable>
             </OSTotal>
+            {placeSpotTypes.includes(orderState?.options?.type) && (
+              <OSTable style={{ marginTop: 15 }}>
+                <OText size={14} lineHeight={21} weight={'600'}>
+                  {t('SPOT', 'Spot')}: {cart?.place?.name || t('NO_SELECTED', 'No selected')}
+                </OText>
+                <TouchableOpacity onPress={() => setOpenPlaceModal(true)}>
+                  <OText
+                    size={14}
+                    lineHeight={21}
+                    weight={'600'}
+                    color={theme.colors.primary}
+                    style={{ textDecorationLine: 'underline' }}
+                  >
+                    {t('EDIT', 'Edit')}
+                  </OText>
+                </TouchableOpacity>
+              </OSTable>
+            )}
             {cart?.status !== 2 && (
               <OSTable>
                 <View style={{ width: '100%', marginTop: 20 }}>
@@ -425,8 +446,6 @@ const CartUI = (props: any) => {
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
-        title={`${openTaxModal.data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
         <TaxInformation
           type={openTaxModal.type}
@@ -434,14 +453,26 @@ const CartUI = (props: any) => {
           products={cart?.products}
         />
       </OModal>
-        <OAlert
-          open={confirm.open}
-          title={confirm.title}
-          content={confirm.content}
-          onAccept={confirm.handleOnAccept}
-          onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-          onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      <OModal
+        open={openPlaceModal}
+        title={t('CHOOSE_YOUR_SPOT', 'Choose your spot')}
+        onClose={() => setOpenPlaceModal(false)}
+        entireModal
+      >
+        <PlaceSpot
+          cart={cart}
+          isOpenPlaceSpot={openPlaceModal}
+          setOpenPlaceModal={setOpenPlaceModal}
         />
+      </OModal>
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
     </CContainer>
   )
 }

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

@@ -22,9 +22,9 @@ export const CartContent = (props: any) => {
 		<CCContainer>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
-					<OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
+					{/* <OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
 						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText>
+					</OText> */}
 					{carts.map((cart: any, i: number) => (
 						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (