ordering-ui-react-native 0.15.26 → 0.15.28-release

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

@@ -4,9 +4,7 @@ import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
-import { BusinessInformation } from '../BusinessInformation';
-import { BusinessReviews } from '../BusinessReviews';
+import { convertHoursToMinutes, shape } from '../../utils';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -22,10 +20,15 @@ import {
 	BusinessInfoItem,
 	WrapReviews,
 	WrapBusinessInfo,
+	TitleWrapper,
+	RibbonBox
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
 
+let BusinessInformation: null | React.ElementType = null
+let BusinessReviews: null | React.ElementType = null
+
 export const BusinessBasicInformation = (
 	props: BusinessBasicInformationParams,
 ) => {
@@ -38,6 +41,25 @@ export const BusinessBasicInformation = (
 	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
 	const [openBusinessInformation, setOpenBusinessInformation] = useState(false);
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
+	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
+	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
+
+	const handleClickBusinessInformation = () => {
+		if (!businessInformationObtained) {
+			BusinessInformation = require('../BusinessInformation').BusinessInformation
+			setBusinessInformationObtained(true)
+		}
+		setOpenBusinessInformation(true)
+	}
+
+	const handleClickBusinessReviews = () => {
+		if (!businessReviewsObtained) {
+			BusinessReviews = require('../BusinessReviews').BusinessReviews
+			setBusinessReviewsObtainedbtained(true)
+		}
+		setOpenBusinessReviews(true)
+	}
+
 	const getBusinessType = () => {
 		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
 		const _types: any = [];
@@ -51,7 +73,7 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
-	
+
 	useEffect(() => {
 		if (businessState?.loading) return
 		let timeout: any = null
@@ -65,16 +87,16 @@ export const BusinessBasicInformation = (
 			})
 		}
 		if (lapse) {
-		  const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
-		  const timeToClose = (to.unix() - currentDate.unix()) * 1000
-		  timeout = setTimeout(() => {
-			navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
-		  }, timeToClose)
+			const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+			const timeToClose = (to.unix() - currentDate.unix()) * 1000
+			timeout = setTimeout(() => {
+				navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
+			}, timeToClose)
 		}
 		return () => {
-		  timeout && clearTimeout(timeout)
+			timeout && clearTimeout(timeout)
 		}
-	  }, [businessState?.business])
+	}, [businessState?.business])
 
 	return (
 		<BusinessContainer>
@@ -90,7 +112,7 @@ export const BusinessBasicInformation = (
 						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
 				}}>
 				{!isBusinessInfoShow && (
-					<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
+					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
 						<OIcon src={theme.images.general.info} width={24} />
 					</WrapBusinessInfo>
 				)}
@@ -121,9 +143,29 @@ export const BusinessBasicInformation = (
 							<PlaceholderLine height={30} width={20} />
 						</Placeholder>
 					) : (
-						<OText size={24} weight={'600'}>
-							{business?.name}
-						</OText>
+						<TitleWrapper>
+							<OText size={24} weight={'600'}>
+								{business?.name}
+							</OText>
+							{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>
+							)}
+						</TitleWrapper>
 					)}
 				</BusinessInfoItem>
 				{loading ? (
@@ -181,17 +223,17 @@ export const BusinessBasicInformation = (
 				<WrapReviews>
 					{!isBusinessInfoShow && (
 						<>
-							{ isPreOrder && (
+							{isPreOrder && (
 								<>
-								<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-									<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-										{t('PRE_ORDER', 'Preorder')}
-									</OText>
-								</TouchableOpacity>
-								<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+										<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+											{t('PRE_ORDER', 'Preorder')}
+										</OText>
+									</TouchableOpacity>
+									<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 								</>
 							)}
-							<TouchableOpacity onPress={() => setOpenBusinessReviews(true)}>
+							<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
 								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
 									{t('REVIEWS', 'Reviews')}
 								</OText>
@@ -200,28 +242,37 @@ export const BusinessBasicInformation = (
 					)}
 				</WrapReviews>
 			</BusinessInfo>
-			<OModal
-				titleSectionStyle={styles.modalTitleSectionStyle}
-				open={openBusinessInformation}
-				onClose={() => setOpenBusinessInformation(false)}
-				isNotDecoration>
-				<BusinessInformation
-					businessState={businessState}
-					business={business}
-				/>
-			</OModal>
-			<OModal
-				entireModal
-				titleSectionStyle={styles.modalTitleSectionStyle}
-				open={openBusinessReviews}
-				onClose={() => setOpenBusinessReviews(false)}
-				isNotDecoration>
-				<BusinessReviews
-					businessState={businessState}
-					businessId={business.id}
-					reviews={business.reviews?.reviews}
-				/>
-			</OModal>
+			{businessInformationObtained ? (
+				<OModal
+					titleSectionStyle={styles.modalTitleSectionStyle}
+					open={openBusinessInformation}
+					onClose={() => setOpenBusinessInformation(false)}
+					isNotDecoration>
+					{BusinessInformation && (
+						<BusinessInformation
+							businessState={businessState}
+							business={business}
+						/>
+					)}
+				</OModal>
+			) : null}
+			{businessReviewsObtained ? (
+				<OModal
+					entireModal
+					titleSectionStyle={styles.modalTitleSectionStyle}
+					open={openBusinessReviews}
+					onClose={() => setOpenBusinessReviews(false)}
+					isNotDecoration
+				>
+					{BusinessReviews && (
+						<BusinessReviews
+							businessState={businessState}
+							businessId={business.id}
+							reviews={business.reviews?.reviews}
+						/>
+					)}
+				</OModal>
+			) : null}
 		</BusinessContainer>
 	);
 };

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 import { Platform } from 'react-native';
 
 export const BusinessContainer = styled.View`
@@ -41,3 +41,30 @@ export const WrapBusinessInfo = styled.TouchableOpacity`
   top: 16px;
   end: 39px;
 `;
+
+export const TitleWrapper = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const RibbonBox = styled.View`
+  margin-left: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 2px 8px;
+  max-width: 180px;
+  align-self: flex-start;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`

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

@@ -4,11 +4,12 @@ import {
 	useUtils,
 	useOrder,
 	useLanguage,
+	useConfig
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -19,24 +20,33 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-	const { 
-		business, 
-		handleClick, 
-		navigation, 
-		isBusinessOpen, 
-		style
+	const {
+		business,
+		handleClick,
+		navigation,
+		isBusinessOpen,
+		style,
+		businessHeader,
+		businessFeatured,
+		businessLogo,
+		businessReviews,
+		businessDeliveryPrice,
+		businessDeliveryTime,
+		businessPickupTime,
+		businessDistance
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
+	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
-
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -112,22 +122,40 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 
 	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(business?.header, 'h_500,c_limit'),
-							priority: FastImage.priority.normal,
+						uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
+						priority: FastImage.priority.normal,
 					}}
 					resizeMode={FastImage.resizeMode.cover}
 				/>
-				{business?.featured && (
+				{(businessFeatured ?? business?.featured) && (
 					<View style={styles.featured}>
 						<FontAwesomeIcon name="crown" size={26} color="gold" />
 					</View>
 				)}
 				<BusinessState>
-					{!isBusinessOpen && (
+					{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 						<View style={styles.businessStateView}>
 							<OText
 								color={theme.colors.textThird}
@@ -145,17 +173,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						<FastImage
 							style={{ width: 56, height: 56 }}
 							source={{
-									uri: optimizeImage(business?.logo, 'h_150,c_limit'),
-									priority: FastImage.priority.normal,
+								uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+								priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
 					</BusinessLogo>
-					{business?.reviews?.total > 0 && (
+					{(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(business?.reviews?.total, { separator: '.' })}
+								{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
 							</OText>
 						</Reviews>
 					)}
@@ -181,15 +209,17 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</View>
 					) : (
 						<View style={styles.bullet}>
-							<OText size={10} color={theme.colors.textSecondary}>
-								{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(business?.delivery_price) + ' \u2022 '}`}
-							</OText>
+							{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
-									? business?.delivery_time
-									: business?.pickup_time,
+									? (businessDeliveryTime ?? business?.delivery_time)
+									: (businessPickupTime ?? business?.pickup_time),
 							)} \u2022 `}</OText>
-							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(business?.distance)}</OText>
+							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
 						</View>
 					)}
 				</Metadata>

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

@@ -53,3 +53,25 @@ export const Reviews = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 180px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`

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

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,6 +20,7 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
@@ -97,6 +98,24 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
+			{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>
 				<BusinessLogo>
 					<OIcon

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

@@ -4,6 +4,7 @@ export const Card = styled.TouchableOpacity`
   margin-vertical: 4px;
   height: 60px;
   overflow: hidden;
+  position: relative;
 `;
 
 export const BusinessHero = styled.View`
@@ -48,3 +49,25 @@ export const BusinessLogo = styled.View`
 export const Reviews = styled.View`
   flex-direction: row;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 0px;
+  right: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 160px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`