ordering-ui-react-native 0.17.52 → 0.17.53-release

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

@@ -11,10 +11,11 @@ import {
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	BusinessHero,
@@ -25,7 +26,8 @@ import {
 	BusinessLogo,
 	Reviews,
 	RibbonBox,
-	ReviewAndFavorite
+	ReviewAndFavorite,
+	OfferBox
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
@@ -49,8 +51,10 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessPickupTime,
 		businessDistance,
 		handleFavoriteBusiness,
-		enableIntersection
+		enableIntersection,
+		getBusinessOffer
 	} = props;
+
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
@@ -58,14 +62,29 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const windowHeight = Dimensions.get('window').height
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
+	const hideBusinessLogo = theme?.business_listing_view?.components?.business?.components?.logo?.hidden
+	const hideBusinessFee = theme?.business_listing_view?.components?.business?.components?.fee?.hidden
+	const hideBusinessTime = theme?.business_listing_view?.components?.business?.components?.time?.hidden
+	const hideBusinessDistance = theme?.business_listing_view?.components?.business?.components?.distance?.hidden
+	const hideBusinessReviews = theme?.business_listing_view?.components?.business?.components?.reviews?.hidden
+	const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
+	const hideBusinessOffer = theme?.business_listing_view?.components?.business?.components?.offer?.hidden
+	const hideBusinessHeader = theme?.business_listing_view?.components?.business?.components?.header?.hidden
+	const hideBusinessFavoriteBadge = theme?.business_listing_view?.components?.business?.components?.featured_badge?.hidden
+
+	const textSize = 12
+	const cardHeight = windowHeight * 0.3
+
 	const styles = StyleSheet.create({
 		container: {
 			marginVertical: 20,
 			borderRadius: 7.6,
 			width: '100%',
-			position: 'relative'
+			position: 'relative',
+			height: cardHeight
 		},
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -132,7 +151,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		return _types.join(', ');
 	};
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleBusinessClick = (selectedBusiness: any) => {
+		vibrateApp()
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
 			if (configState?.configs?.preorder_status_enabled?.value === '1') {
@@ -159,22 +187,21 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
 				<CardAnimation
+					style={[style, styles.container]}
 					onClick={() => handleBusinessClick(business)}
-					style={[
-						style,
-						styles.container
-					]}
 				>
 					{business?.ribbon?.enabled && (
 						<RibbonBox
 							bgColor={business?.ribbon?.color}
+							colorText={lightenDarkenColor(business?.ribbon?.color)}
+							borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 						>
 							<OText
 								size={10}
 								weight={'400'}
-								color={theme.colors.white}
+								color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 								numberOfLines={2}
 								ellipsizeMode='tail'
 								lineHeight={13}
@@ -184,20 +211,38 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
-						<FastImage
-							style={{ height: 120 }}
-							source={(businessHeader || business?.header) ? {
-								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
-								priority: FastImage.priority.normal,
-							} : theme.images.dummies.businessHeader}
-							resizeMode={FastImage.resizeMode.cover}
-						/>
-						{(businessFeatured ?? business?.featured) && (
+						{!hideBusinessHeader && (
+							<FastImage
+								style={{ height: cardHeight * 0.66 }}
+								source={(businessHeader || business?.header || typeof theme.images.dummies.businessHeader === 'string') ? {
+									uri: optimizeImage(businessHeader || business?.header || theme.images.dummies.businessHeader, 'h_500,c_limit'),
+									priority: FastImage.priority.normal,
+								} : theme.images.dummies.businessHeader}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						)}
+						{(businessFeatured ?? business?.featured) && !hideBusinessFavoriteBadge && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />
 							</View>
 						)}
-						<BusinessState>
+						{!hideBusinessOffer && (
+							getBusinessOffer((business?.offers)) &&
+							<OfferBox
+								isClosed={!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1')}
+								isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}
+							>
+								<OText
+									size={10}
+									weight={'400'}
+									color={theme.colors.textThird}
+									numberOfLines={2}
+									ellipsizeMode='tail'
+									lineHeight={13}
+								>{getBusinessOffer((business?.offers)) || parsePrice(0)}</OText>
+							</OfferBox>
+						)}
+						<BusinessState isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}>
 							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 								<View style={styles.businessStateView}>
 									<OText
@@ -211,49 +256,54 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo>
-							<BusinessLogo style={styles.businessLogo}>
-								<FastImage
-									style={{ width: 56, height: 56 }}
-									source={(businessLogo || business?.logo) ? {
-										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
-										priority: FastImage.priority.normal,
-									} : theme.images.dummies.businessLogo}
-									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>
-								)}
-								<LottieAnimation
-									type='favorite'
-									onClick={handleChangeFavorite}
-									initialValue={business?.favorite ? 0.75 : 0}
-									toValue={business?.favorite ? 0 : 0.75}
-									disableAnimation={!auth}
-									iconProps={{ color: theme.colors.danger5, size: 18 }}
-									isActive={business?.favorite}
-								/>
-							</ReviewAndFavorite>
+						<BusinessInfo style={{ position: 'absolute', bottom: 85, left: 15 }}>
+							{!hideBusinessLogo && (
+								<BusinessLogo style={styles.businessLogo}>
+									<FastImage
+										style={{ width: 56, height: 56 }}
+										source={(businessLogo || business?.logo || typeof theme.images.dummies.businessLogo === 'string') ? {
+											uri: optimizeImage(businessLogo || business?.logo || theme.images.dummies.businessLogo, 'h_150,c_limit'),
+											priority: FastImage.priority.normal,
+										} : theme.images.dummies.businessLogo}
+										resizeMode={FastImage.resizeMode.cover}
+									/>
+								</BusinessLogo>
+							)}
 						</BusinessInfo>
-						<OText
-							size={12}
-							style={{ lineHeight: 18, marginBottom: 6 }}
-							weight={'500'}>
-							{business?.name}
-						</OText>
-						<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+							<OText
+								size={textSize + 2}
+								style={{ lineHeight: 18, marginBottom: 6 }}
+								weight={'500'}>
+								{business?.name}
+							</OText>
+							{(!hideBusinessFavorite || !hideBusinessReviews) && (
+								<ReviewAndFavorite>
+									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && !hideBusinessReviews && (
+										<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>
+									)}
+									{!hideBusinessFavorite && (
+										<LottieAnimation
+											type='favorite'
+											onClick={handleChangeFavorite}
+											initialValue={business?.favorite ? 0.5 : 0}
+											toValue={business?.favorite ? 0 : 0.5}
+											disableAnimation={!auth}
+											iconProps={{ color: theme.colors.danger5, size: 18 }}
+											isActive={business?.favorite}
+										/>
+									)}
+								</ReviewAndFavorite>
+							)}
+						</View>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={1}>
 							{business?.address}
 						</OText>
-						{/* <BusinessCategory>
-          <OText>{getBusinessType()}</OText>
-        </BusinessCategory> */}
 						<Metadata>
 							{!isBusinessOpen ? (
 								<View style={styles.closed}>
@@ -263,17 +313,21 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</View>
 							) : (
 								<View style={styles.bullet}>
-									{orderState?.options?.type === 1 && (
-										<OText size={10} color={theme.colors.textSecondary}>
+									{orderState?.options?.type === 1 && !hideBusinessFee && (
+										<OText size={textSize} 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>
+									{!hideBusinessTime && (
+										<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+											orderState?.options?.type === 1
+												? (businessDeliveryTime ?? business?.delivery_time)
+												: (businessPickupTime ?? business?.pickup_time),
+										)} \u2022 `}</OText>
+									)}
+									{!hideBusinessDistance && (
+										<OText size={textSize} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+									)}
 								</View>
 							)}
 						</Metadata>

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

@@ -9,7 +9,7 @@ export const BusinessHero = styled.View`
 
 export const BusinessContent = styled.View`
     padding-horizontal: 18px;
-    padding-bottom: 18px;
+    padding-bottom: 10px;
     border-bottom-left-radius: 7.6px;
     border-bottom-right-radius: 7.6px;
     border-width: 1px;
@@ -34,12 +34,12 @@ export const Metadata = styled.View`
 
 export const BusinessState = styled.View`
   position: absolute;
-	top: 13px;
-	end: 18px;
+  top: ${(props: any) => props.isRibbon ? '32px' : '15px'};
+	right: 15px;
 `
 
 export const BusinessLogo = styled.View`
-   
+
 `
 
 export const ReviewAndFavorite = styled.View`
@@ -72,4 +72,23 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
+`
+
+export const OfferBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  border-radius: 50px;
+  top: ${(props: any) => props.isRibbon ? '32px' : '15px'};
+  right: ${(props: any) => props.isClosed ? '110px' : '15px'};
+  background: ${(props: any) => props.theme.colors.inputBorderColor};
+  padding: 3px 8px;
+  max-width: 180px;
 `

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
@@ -6,33 +7,29 @@ import {
 	useLanguage,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText } from '../shared';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import FastImage from 'react-native-fast-image'
+
+import { OText } from '../shared';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
 	BusinessContent,
-	BusinessCategory,
 	BusinessInfo,
 	Metadata,
-	BusinessState,
 	BusinessLogo,
-	Reviews,
 	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 	const { business, handleClick, isBusinessOpen } = props;
-	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
-		useUtils();
+
+	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
-
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 25,
@@ -79,35 +76,28 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			justifyContent: 'flex-start',
 			width: '100%',
 		},
+		productStyle: {
+			height: 40,
+			width: 40
+		}
 	});
 
-	const types = ['food', 'laundry', 'alcohol', 'groceries'];
-
 	const { width } = useWindowDimensions();
 
-	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
-		const _types: any = [];
-		types.forEach((type) => {
-			if (business[type]) {
-				_types.push(t(type.toUpperCase(), type));
-			}
-		});
-		return _types.join(', ');
-	};
-
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
 			{business?.ribbon?.enabled && (
 				<RibbonBox
 					bgColor={business?.ribbon?.color}
+					colorText={lightenDarkenColor(business?.ribbon?.color)}
+					borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 				>
 					<OText
 						size={10}
 						weight={'400'}
-						color={theme.colors.white}
+						color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 						numberOfLines={2}
 						ellipsizeMode='tail'
 						lineHeight={13}
@@ -118,10 +108,13 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			)}
 			<BusinessHero>
 				<BusinessLogo>
-					<OIcon
-						url={optimizeImage(business?.logo, 'h_100,c_limit')}
-						width={40}
-						height={40}
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(business?.logo, 'h_100,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
 					/>
 				</BusinessLogo>
 				<BusinessContent style={{ width: width * 0.6 }}>
@@ -129,23 +122,7 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 						<OText size={12} ellipsizeMode={'tail'} numberOfLines={2}>
 							{business?.name}
 						</OText>
-						{/* {business?.reviews?.total > 0 && (
-              <Reviews>
-                <IconAntDesign
-                  name="star"
-                  color={theme.colors.primary}
-                  size={16}
-                  style={styles.starIcon}
-                />
-                <OText>
-                  {parseNumber(business?.reviews?.total, { separator: '.' })}
-                </OText>
-              </Reviews>
-            )} */}
 					</BusinessInfo>
-					{/* <BusinessCategory>
-            <OText>{getBusinessType()}</OText>
-          </BusinessCategory> */}
 					<Metadata>
 						{!isBusinessOpen ? (
 							<View style={styles.closed}>
@@ -155,7 +132,6 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 							</View>
 						) : (
 							<View style={styles.bullet}>
-								{/* <MaterialComIcon name="alarm" size={16} /> */}
 								<OText size={10} color={theme.colors.textSecondary}>
 									{t('DELIVERY_FEE', 'Delivery Fee')}
 								</OText>
@@ -184,15 +160,6 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 						)}
 					</Metadata>
 				</BusinessContent>
-				{/* <BusinessState>
-          {!business?.open && (
-            <View style={styles.businessStateView}>
-              <OText color={theme.colors.white} size={20} style={styles.businessStateText}>
-                {t('PREORDER', 'PREORDER')}
-              </OText>
-            </View>
-          )}
-        </BusinessState> */}
 			</BusinessHero>
 		</Card>
 	);

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

@@ -70,4 +70,12 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `