ordering-ui-react-native 0.16.9 → 0.16.10-release

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

@@ -1,13 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
 	useOrder,
 	useLanguage,
-	useConfig
+	useConfig,
+	useToast,
+	useSession,
+	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
+import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
 import {
@@ -20,10 +25,12 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
-	RibbonBox
+	RibbonBox,
+	ReviewAndFavorite
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
@@ -40,13 +47,19 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryPrice,
 		businessDeliveryTime,
 		businessPickupTime,
-		businessDistance
+		businessDistance,
+		handleFavoriteBusiness,
+		enableIntersection
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
+	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
+	const [ { auth }] = useSession()
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
+
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -116,115 +129,185 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const handleBusinessClick = (selectedBusiness: any) => {
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
-			navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+			if (configState?.configs?.preorder_status_enabled?.value === '1') {
+				navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+				return
+			}
+			showToast(ToastType.Info, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment'));
+		}
+	}
+
+	const handleChangeFavorite = () => {
+		if (auth) {
+			handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+		} else {
+			navigation && navigation.navigate('Login');
 		}
 	}
 
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
+	}
+
 	return (
-		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
-			{business?.ribbon?.enabled && (
-				<RibbonBox
-					bgColor={business?.ribbon?.color}
-					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
-					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
-				>
-					<OText
-						size={10}
-						weight={'400'}
-						color={theme.colors.white}
-						numberOfLines={2}
-						ellipsizeMode='tail'
-						lineHeight={13}
-					>
-						{business?.ribbon?.text}
-					</OText>
-				</RibbonBox>
-			)}
-			<BusinessHero>
-				<FastImage
-					style={{ height: 120 }}
-					source={{
-						uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-				{(businessFeatured ?? business?.featured) && (
-					<View style={styles.featured}>
-						<FontAwesomeIcon name="crown" size={26} color="gold" />
-					</View>
-				)}
-				<BusinessState>
-					{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
-						<View style={styles.businessStateView}>
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
+			{isIntersectionObserver ? (
+				<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+					{business?.ribbon?.enabled && (
+						<RibbonBox
+							bgColor={business?.ribbon?.color}
+							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+						>
 							<OText
-								color={theme.colors.textThird}
 								size={10}
-								style={styles.businessStateText}>
-								{t('PREORDER', 'PREORDER')}
+								weight={'400'}
+								color={theme.colors.white}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+								lineHeight={13}
+							>
+								{business?.ribbon?.text}
 							</OText>
-						</View>
+						</RibbonBox>
 					)}
-				</BusinessState>
-			</BusinessHero>
-			<BusinessContent>
-				<BusinessInfo>
-					<BusinessLogo style={styles.businessLogo}>
+					<BusinessHero>
 						<FastImage
-							style={{ width: 56, height: 56 }}
+							style={{ height: 120 }}
 							source={{
-								uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
 								priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
-					</BusinessLogo>
-					{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-						<Reviews>
-							<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
-							<OText size={10} style={{ lineHeight: 15 }}>
-								{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-							</OText>
-						</Reviews>
-					)}
-				</BusinessInfo>
-				<OText
-					size={12}
-					style={{ lineHeight: 18, marginBottom: 6 }}
-					weight={'500'}>
-					{business?.name}
-				</OText>
-				<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
-					{business?.address}
-				</OText>
-				{/* <BusinessCategory>
+						{(businessFeatured ?? business?.featured) && (
+							<View style={styles.featured}>
+								<FontAwesomeIcon name="crown" size={26} color="gold" />
+							</View>
+						)}
+						<BusinessState>
+							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
+								<View style={styles.businessStateView}>
+									<OText
+										color={theme.colors.textThird}
+										size={10}
+										style={styles.businessStateText}>
+										{t('PREORDER', 'PREORDER')}
+									</OText>
+								</View>
+							)}
+						</BusinessState>
+					</BusinessHero>
+					<BusinessContent>
+						<BusinessInfo>
+							<BusinessLogo style={styles.businessLogo}>
+								<FastImage
+									style={{ width: 56, height: 56 }}
+									source={{
+										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							</BusinessLogo>
+							<ReviewAndFavorite>
+								{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+									<Reviews>
+										<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+										<OText size={10} style={{ lineHeight: 15 }}>
+											{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+										</OText>
+									</Reviews>
+								)}
+								<TouchableOpacity
+									onPress={handleChangeFavorite}
+								>
+									<IconAntDesign
+										name={business?.favorite ? 'heart' : 'hearto'}
+										color={theme.colors.danger5}
+										size={18}
+									/>
+								</TouchableOpacity>
+							</ReviewAndFavorite>
+						</BusinessInfo>
+						<OText
+							size={12}
+							style={{ lineHeight: 18, marginBottom: 6 }}
+							weight={'500'}>
+							{business?.name}
+						</OText>
+						<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+							{business?.address}
+						</OText>
+						{/* <BusinessCategory>
           <OText>{getBusinessType()}</OText>
         </BusinessCategory> */}
-				<Metadata>
-					{!isBusinessOpen ? (
-						<View style={styles.closed}>
-							<OText size={10} color={theme.colors.red}>
-								{t('CLOSED', 'Closed')}
-							</OText>
-						</View>
-					) : (
-						<View style={styles.bullet}>
-							{orderState?.options?.type === 1 && (
-								<OText size={10} color={theme.colors.textSecondary}>
-									{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
-								</OText>
+						<Metadata>
+							{!isBusinessOpen ? (
+								<View style={styles.closed}>
+									<OText size={10} color={theme.colors.red}>
+										{t('CLOSED', 'Closed')}
+									</OText>
+								</View>
+							) : (
+								<View style={styles.bullet}>
+									{orderState?.options?.type === 1 && (
+										<OText size={10} color={theme.colors.textSecondary}>
+											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+										</OText>
+									)}
+									<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+										orderState?.options?.type === 1
+											? (businessDeliveryTime ?? business?.delivery_time)
+											: (businessPickupTime ?? business?.pickup_time),
+									)} \u2022 `}</OText>
+									<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+								</View>
 							)}
-							<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-								orderState?.options?.type === 1
-									? (businessDeliveryTime ?? business?.delivery_time)
-									: (businessPickupTime ?? business?.pickup_time),
-							)} \u2022 `}</OText>
-							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+						</Metadata>
+					</BusinessContent>
+				</Card>
+			) : (
+				<Placeholder
+					Animation={Fade}
+					style={{ marginBottom: 20 }}>
+					<View style={{ width: '100%' }}>
+						<PlaceholderLine
+							height={200}
+							style={{ marginBottom: 20, borderRadius: 25 }}
+						/>
+						<View style={{ paddingHorizontal: 10 }}>
+							<View
+								style={{
+									flexDirection: 'row',
+									justifyContent: 'space-between',
+								}}>
+								<PlaceholderLine
+									height={25}
+									width={40}
+									style={{ marginBottom: 10 }}
+								/>
+								<PlaceholderLine
+									height={25}
+									width={20}
+									style={{ marginBottom: 10 }}
+								/>
+							</View>
+							<PlaceholderLine
+								height={20}
+								width={30}
+								style={{ marginBottom: 10 }}
+							/>
+							<PlaceholderLine
+								height={20}
+								width={80}
+								style={{ marginBottom: 10 }}
+							/>
 						</View>
-					)}
-				</Metadata>
-			</BusinessContent>
-		</Card>
+					</View>
+				</Placeholder>
+			)}
+		</InView>
 	);
 };
 

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

@@ -49,6 +49,11 @@ export const BusinessLogo = styled.View`
    
 `
 
+export const ReviewAndFavorite = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
 export const Reviews = styled.View`
   flex-direction: row;
   align-items: center;

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils } from 'ordering-components/native';
+import { useOrder, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	BIContainer,
@@ -21,30 +21,33 @@ export const BusinessItemAccordion = (props: any) => {
 		singleBusiness,
 		handleClearProducts,
 		handleClickCheckout,
-		checkoutButtonDisabled
+		checkoutButtonDisabled,
+		isMultiCheckout
 	} = props
 
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const [{ parsePrice }] = useUtils();
+	const [{ configs }] = useConfig()
 	const theme = useTheme();
 
 	const isCartPending = cart?.status === 2
 	const isClosed = !cart?.valid_schedule
 	const isProducts = cart?.products?.length
+	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const [isActive, setActiveState] = useState(!!singleBusiness)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
 		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
-		if ((cartsLength === 1) && !isClosed) {
-			setActiveState(true)
+		if (cartsLength === 1) {
+			setActiveState(!isClosed)
 		}
-	}, [orderState?.carts])
+	}, [orderState?.carts, isClosed])
 
 	return (
-		<BIContainer isClosed={isClosed} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
+		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
 				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
@@ -90,7 +93,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity
@@ -139,14 +142,14 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && (
+			{!isActive && !isClosed && !!isProducts && !isMultiCheckout && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
 					{cart?.valid_products && (
 						<OButton
 							onClick={handleClickCheckout}
 							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-							style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 							text={t('CHECKOUT', 'Checkout')}
 							bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
 							borderColor={theme.colors.primary}

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

@@ -7,7 +7,9 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-  min-height: 120px;
+  ${(props: any) => !props.isMultiCheckout && css`
+    min-height: 120px;
+  `}
   ${(props: any) => props.isClosed && css`
 	  opacity: 0.5;
     min-height: 60px;

package/themes/original/src/components/BusinessListingSearch/BusinessControllerSkeletons/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+
+export const BusinessControllerSkeletons = ({ paginationProps }: any) => {
+  return (
+    <>
+      {[
+        ...Array(
+          paginationProps.nextPageItems
+            ? paginationProps.nextPageItems
+            : 3,
+        ).keys(),
+      ].map((item, i) => (
+        <Placeholder
+          Animation={Fade}
+          key={i}
+          style={{ width: 320, marginRight: 20, marginTop: 20 }}>
+          <View style={{ width: 320 }}>
+            <PlaceholderLine
+              height={155}
+              style={{ marginBottom: 20, borderRadius: 25 }}
+            />
+            <View style={{ paddingHorizontal: 10 }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}>
+                <PlaceholderLine
+                  height={25}
+                  width={40}
+                  style={{ marginBottom: 10 }}
+                />
+                <PlaceholderLine
+                  height={25}
+                  width={20}
+                  style={{ marginBottom: 10 }}
+                />
+              </View>
+              <PlaceholderLine
+                height={20}
+                width={30}
+                style={{ marginBottom: 10 }}
+              />
+              <PlaceholderLine
+                height={20}
+                width={80}
+                style={{ marginBottom: 0 }}
+              />
+            </View>
+          </View>
+        </Placeholder>
+      ))}
+    </>
+  )
+}

package/themes/original/src/components/BusinessListingSearch/MaxSectionItem/index.tsx

@@ -0,0 +1,59 @@
+import { useLanguage, useUtils } from 'ordering-components/native'
+import React from 'react'
+import { View, TouchableOpacity, StyleSheet } from 'react-native'
+import { OText } from '../../shared'
+
+import { ProgressContentWrapper, ProgressBar } from './styles'
+
+export const MaxSectionItem = (props: any) => {
+    const {
+        filters,
+        handleChangeFilters,
+        title,
+        options,
+        filter
+    } = props
+
+    const [, t] = useLanguage()
+    const [{ parsePrice }] = useUtils();
+
+    const styles = StyleSheet.create({
+        maxContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        }
+    });
+
+    const parseValue = (option: number) => {
+        return filter === 'max_distance'
+            ? `${option / 1000} ${t('KM', 'Km')}`
+            : filter === 'max_eta'
+                ? `${option} ${t('MIN', 'min')}`
+                : parsePrice(option)
+    }
+    return (
+        <View style={{ marginBottom: 20 }}>
+            <OText weight='bold' mBottom={10} size={16}>
+                {title}
+            </OText>
+            <ProgressContentWrapper>
+                <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
+            </ProgressContentWrapper>
+            <View style={styles.maxContainer}>
+                {options.map((option: any, i: number) => (
+                    <TouchableOpacity
+                        onPress={() => handleChangeFilters(filter, option)}
+                        key={option}
+                    >
+                        <OText
+                            size={12}
+                            weight={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter])) ? 'bold' : '500'}
+                        >
+                            {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
+                        </OText>
+                    </TouchableOpacity>
+                ))}
+            </View>
+        </View>
+    )
+}

package/themes/original/src/components/BusinessListingSearch/MaxSectionItem/styles.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components/native';
+
+export const ProgressBar = styled.View`
+  height: 4px;
+  background: ${(props: any) => props.theme.colors.textNormal};
+`
+
+export const ProgressContentWrapper = styled.View`
+  height: 4px;
+  background: #F8F9FA;
+  margin-bottom: 10px;
+  flex: 1;
+`