ordering-ui-react-native 0.18.55 → 0.18.56-crash-driver-1

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

@@ -14,7 +14,8 @@ import { OIcon, OText } from '../shared';
 import { Dimensions, StyleSheet, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, lightenDarkenColor, shape, vibrateApp } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	BusinessHero,
@@ -34,14 +35,18 @@ import FastImage from 'react-native-fast-image'
 import { LottieAnimation } from '../LottieAnimation';
 import { CardAnimation } from '../shared/CardAnimation';
 
-export const BusinessControllerUI = (props: BusinessControllerParams) => {
+function BusinessControllerPropsAreEqual(prevProps: any, nextProps: any) {
+	return JSON.stringify(prevProps.business) === JSON.stringify(nextProps.business) &&
+		prevProps.isBusinessOpen === nextProps.isBusinessOpen
+}
+
+export const BusinessControllerUI = React.memo((props: BusinessControllerParams) => {
 	const {
 		business,
 		handleClick,
 		navigation,
 		isBusinessOpen,
 		style,
-		isCustomLayout,
 		businessHeader,
 		businessFeatured,
 		businessLogo,
@@ -75,8 +80,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	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 = isCustomLayout ? 12 : 10
-	const cardHeight = windowHeight * 0.3
+	const textSize = 12
+	const cardHeight = windowHeight * 0.34
 
 	const styles = StyleSheet.create({
 		container: {
@@ -151,6 +156,14 @@ 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)
@@ -176,7 +189,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
+		<View style={{ minHeight: 200 }}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					style={[style, styles.container]}
@@ -205,7 +218,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					<BusinessHero>
 						{!hideBusinessHeader && (
 							<FastImage
-								style={{ height: isCustomLayout ? cardHeight * 0.66 : 120 }}
+								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,
@@ -218,19 +231,23 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								<FontAwesomeIcon name="crown" size={26} color="gold" />
 							</View>
 						)}
-						{(!isCustomLayout) && !hideBusinessOffer && (
-							getBusinessOffer((business?.offers)) &&
-							<OfferBox>
+						{!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>
+								>{t('DISCOUNT', 'Discount')}{' '}{getBusinessOffer((business?.offers))}</OText>
 							</OfferBox>
 						)}
-						<BusinessState>
+						<BusinessState isRibbon={business?.ribbon?.enabled && !!business?.ribbon?.text}>
 							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 								<View style={styles.businessStateView}>
 									<OText
@@ -244,7 +261,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</BusinessState>
 					</BusinessHero>
 					<BusinessContent>
-						<BusinessInfo style={isCustomLayout && { position: 'absolute', bottom: 85, left: 15 }}>
+						<BusinessInfo style={{ position: 'absolute', top: -26, left: 15 }}>
 							{!hideBusinessLogo && (
 								<BusinessLogo style={styles.businessLogo}>
 									<FastImage
@@ -257,38 +274,18 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 									/>
 								</BusinessLogo>
 							)}
-							{!isCustomLayout && (!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>
-							)}
 						</BusinessInfo>
-						<View style={isCustomLayout && { width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, alignItems: 'flex-start' }}>
 							<OText
 								size={textSize + 2}
-								style={{ lineHeight: 18, marginBottom: 6 }}
-								weight={'500'}>
+								style={{ lineHeight: 18, marginBottom: 6, width: '90%' }}
+								weight={'500'}
+								numberOfLines={1}
+								ellipsizeMode='tail'
+							>
 								{business?.name}
 							</OText>
-							{isCustomLayout && (!hideBusinessFavorite || !hideBusinessReviews) && (
+							{(!hideBusinessFavorite || !hideBusinessReviews) && (
 								<ReviewAndFavorite>
 									{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && !hideBusinessReviews && (
 										<Reviews>
@@ -312,7 +309,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</ReviewAndFavorite>
 							)}
 						</View>
-						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3 }} numberOfLines={isCustomLayout ? 1 : 2}>
+						<OText size={textSize} style={{ lineHeight: 15, marginBottom: 3, fontFamily: undefined }} numberOfLines={1}>
 							{business?.address}
 						</OText>
 						<Metadata>
@@ -384,9 +381,9 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					</View>
 				</Placeholder>
 			)}
-		</InView>
+		</View>
 	);
-};
+}, BusinessControllerPropsAreEqual);
 
 export const BusinessController = (props: BusinessControllerParams) => {
 	const BusinessControllerProps = {

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

@@ -8,13 +8,14 @@ export const BusinessHero = styled.View`
 `
 
 export const BusinessContent = styled.View`
-    padding-horizontal: 18px;
-    padding-bottom: 10px;
-    border-bottom-left-radius: 7.6px;
-    border-bottom-right-radius: 7.6px;
-    border-width: 1px;
-    border-color: ${(props: any) => props.theme.colors.border};
-	 overflow: visible;
+  position: relative;
+  padding-horizontal: 18px;
+  padding-bottom: 10px;
+  border-bottom-left-radius: 7.6px;
+  border-bottom-right-radius: 7.6px;
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+	overflow: visible;
 `;
 
 export const BusinessInfo = styled.View`
@@ -34,8 +35,8 @@ 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`
@@ -85,10 +86,9 @@ export const RibbonBox = styled.View`
 export const OfferBox = styled.View`
   position: absolute;
   z-index: 1;
-  top: 20px;
-  right: 10px;
   border-radius: 50px;
-  color: ${(props: any) => props.theme.colors.textThird};
+  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/BusinessInformation/index.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import {
 	BusinessInformation as BusinessInformationController,
-	useLanguage, useUtils
+	useLanguage, useUtils, useConfig,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
@@ -16,37 +16,41 @@ import {
 	DivideView,
 	MediaWrapper,
 } from './styles';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
 import { formatUrlVideo } from '../../utils'
 import { ScheduleAccordion } from '../ScheduleAccordion';
+import moment from 'moment';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
 	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ optimizeImage }] = useUtils();
+	const [{ configs }] = useConfig()
+	const [orientationState] = useDeviceOrientation();
+
+	const [isReadMore, setIsReadMore] = useState(false)
+	const [lengthMore, setLengthMore] = useState(false)
+	const WIDTH_SCREEN = orientationState?.dimensions?.width
 
 	const hideLocation = theme?.business_view?.components?.information?.components?.location?.hidden
 	const hideSchedule = theme?.business_view?.components?.information?.components?.schedule?.hidden
 	const hideVideos = theme?.business_view?.components?.information?.components?.videos?.hidden
 	const hideImages = theme?.business_view?.components?.information?.components?.images?.hidden
 	const hideAddress = theme?.business_view?.components?.information?.components?.address?.hidden
+	const formatTime = configs?.general_hour_format?.value
+
+	const checkTime = (val: number) => (val < 10 ? `0${val}` : val);
+	const timeFormated = (time: any) => {
+		return moment(`1900-01-01 ${checkTime(time.hour)}:${checkTime(time.minute)}`).format(formatTime)
+	}
 
-	const scheduleFormatted = ({
-		hour,
-		minute,
-	}: {
-		hour: number | string;
-		minute: number | string;
-	}) => {
-		const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
-		const zz = hour > 12 ? 'PM' : 'AM';
-		const h = parseInt(`${hour}`);
-		return `${h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}`;
-	};
 	const businessCoordinate = {
 		lat: businessState?.business?.location?.lat,
 		lng: businessState?.business?.location?.lng,
@@ -77,6 +81,10 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 		return iAry;
 	};
 
+	const onTextLayout = useCallback((e: any) => {
+		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
+	}, [])
+
 	return (
 		<BusinessInformationContainer>
 			<WrapMainContent contentContainerStyle={{}}>
@@ -97,16 +105,36 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										readOnly
 										location={businessLocation.location}
 										markerTitle={businessState?.business?.name}
+										businessZones={businessState?.business?.zones}
 									/>
 								</WrapBusinessMap>
 							)}
 						</>
 					)}
 					{!hideAddress && (
-						<OText size={12} mBottom={20}>
+						<OText size={12} mBottom={10}>
 							{businessState?.business?.address}
 						</OText>
 					)}
+					{businessState?.business?.address_notes && (
+						<>
+							<OText
+								size={12}
+								mBottom={10}
+								numberOfLines={isReadMore ? 20 : 3}
+								onTextLayout={onTextLayout}
+							>
+								{businessState?.business?.address_notes}
+							</OText>
+							{lengthMore && (
+								<TouchableOpacity
+									onPress={() => setIsReadMore(!isReadMore)}
+								>
+									<OText size={12} mBottom={20} color={theme.colors.primary}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+								</TouchableOpacity>
+							)}
+						</>
+					)}
 					<DivideView />
 					{!hideSchedule && (
 						<>
@@ -121,7 +149,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										<ScheduleBlock key={i}>
 											<ScheduleAccordion
 												weekIndex={i}
-												scheduleFormatted={scheduleFormatted}
+												timeFormated={timeFormated}
 												schedule={schedule}
 											/>
 										</ScheduleBlock>

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

@@ -17,7 +17,7 @@ export const MediaWrapper = styled.ScrollView`
   height: 127px;
 `
 export const InnerContent = styled.View`
-  padding: 20px 40px;
+  padding: 20px;
 `
 export const WrapScheduleBlock = styled.View`
   margin: 20px 0;
@@ -36,4 +36,4 @@ export const DivideView = styled.View`
 	height: 8px;
 	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
 	margin-horizontal: -40px;
-`;
+`;

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

@@ -23,7 +23,10 @@ export const BusinessItemAccordion = (props: any) => {
 		handleClickCheckout,
 		checkoutButtonDisabled,
 		isMultiCheckout,
-		isFromUpselling
+		isFromUpselling,
+		changeActiveState,
+		isActive,
+		isGiftCart
 	} = props
 
 	const [orderState] = useOrder();
@@ -38,14 +41,13 @@ export const BusinessItemAccordion = (props: any) => {
 	const isProducts = cart?.products?.length
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
-	const [isActive, setActiveState] = useState(!!singleBusiness)
 	const [viewedCart, setViewedCart] = useState<any>(null)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
 		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
 		if (cartsLength === 1) {
-			setActiveState(!isClosed)
+			changeActiveState && changeActiveState(!isClosed, cart?.uuid)
 		}
 	}, [orderState?.carts, isClosed])
 
@@ -68,14 +70,14 @@ export const BusinessItemAccordion = (props: any) => {
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
-				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
+				onPress={() => !isClosed ? changeActiveState && changeActiveState(!isClosed, cart?.uuid) : isClosed}
 				activeOpacity={1}
 			>
 				<BIInfo>
 					<BIContentInfo>
 						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
 						<View style={{ flexDirection: 'row' }}>
-							{props.onNavigationRedirect && !isClosed && (
+							{props.onNavigationRedirect && !isClosed && !isGiftCart && (
 								<>
 									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
 										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
@@ -84,7 +86,9 @@ export const BusinessItemAccordion = (props: any) => {
 							)}
 							{!isCartPending && (
 								<>
-									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									{!isGiftCart && (
+										<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									)}
 									<OAlert
 										title={t('DELETE_CART', 'Delete Cart')}
 										message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
@@ -94,7 +98,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{isBusinessChangeEnabled && props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && !isGiftCart && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity