ordering-ui-react-native 0.18.2 → 0.18.3-release

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,31 +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,
@@ -71,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={{}}>
@@ -78,87 +92,128 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 					<OText size={24} weight={'600'}>
 						{businessState?.business?.name}
 					</OText>
-					<GrayBackground>
-						<OText size={16} weight="500">
-							{t('BUSINESS_LOCATION', 'Business Location')}
+					{!hideLocation && (
+						<>
+							<GrayBackground>
+								<OText size={16} weight="500">
+									{t('BUSINESS_LOCATION', 'Business Location')}
+								</OText>
+							</GrayBackground>
+							{businessLocation.location && (
+								<WrapBusinessMap style={styles.wrapMapStyle}>
+									<GoogleMap
+										readOnly
+										location={businessLocation.location}
+										markerTitle={businessState?.business?.name}
+										businessZones={businessState?.business?.zones}
+									/>
+								</WrapBusinessMap>
+							)}
+						</>
+					)}
+					{!hideAddress && (
+						<OText size={12} mBottom={10}>
+							{businessState?.business?.address}
 						</OText>
-					</GrayBackground>
-					{businessLocation.location && (
-						<WrapBusinessMap style={styles.wrapMapStyle}>
-							<GoogleMap
-								readOnly
-								location={businessLocation.location}
-								markerTitle={businessState?.business?.name}
-							/>
-						</WrapBusinessMap>
 					)}
-					<OText size={12} mBottom={20}>
-						{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 />
-					<GrayBackground>
-						<OText size={16} weight="500">
-							{t('OPENING_TIME', 'Opening Time')}
-						</OText>
-					</GrayBackground>
-					{businessSchedule && businessSchedule?.length > 0 && (
-						<WrapScheduleBlock>
-							{businessSchedule.map((schedule: any, i: number) => (
-								<ScheduleBlock key={i}>
-									<ScheduleAccordion
-										weekIndex={i}
-										scheduleFormatted={scheduleFormatted}
-										schedule={schedule}
-									/>
-								</ScheduleBlock>
-							))}
-						</WrapScheduleBlock>
+					{!hideSchedule && (
+						<>
+							<GrayBackground>
+								<OText size={16} weight="500">
+									{t('OPENING_TIME', 'Opening Time')}
+								</OText>
+							</GrayBackground>
+							{businessSchedule && businessSchedule?.length > 0 && (
+								<WrapScheduleBlock>
+									{businessSchedule.map((schedule: any, i: number) => (
+										<ScheduleBlock key={i}>
+											<ScheduleAccordion
+												weekIndex={i}
+												timeFormated={timeFormated}
+												schedule={schedule}
+											/>
+										</ScheduleBlock>
+									))}
+								</WrapScheduleBlock>
+							)}
+						</>
 					)}
+
 					{/* {businessState?.business?.gallery?.length > 0 && ( */}
+
 					<>
-						{bVideos().length > 0 && (
+						{!hideVideos && (
 							<>
-								<DivideView />
-								<GrayBackground>
-									<OText size={16} weight="500">
-										{t('VIDEOS', 'Videos')}
-									</OText>
-								</GrayBackground>
-								<MediaWrapper horizontal>
-									{bVideos().map((v: any) => (
-										<WebView
-											key={`vid_id_${v.id}`}
-											style={{ width: 210, height: 127, borderRadius: 7.6 }}
-											javaScriptEnabled={true}
-											domStorageEnabled={true}
-											source={{
-												html: `
-													<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
+								{bVideos().length > 0 && (
+									<>
+										<DivideView />
+										<GrayBackground>
+											<OText size={16} weight="500">
+												{t('VIDEOS', 'Videos')}
+											</OText>
+										</GrayBackground>
+										<MediaWrapper horizontal>
+											{bVideos().map((v: any) => (
+												<WebView
+													key={`vid_id_${v.id}`}
+													style={{ width: 210, height: 127, borderRadius: 7.6 }}
+													javaScriptEnabled={true}
+													domStorageEnabled={true}
+													source={{
+														html: `
+												<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
 												`,
-											}}
-											mediaPlaybackRequiresUserAction={true}
-										/>
-									))}
-								</MediaWrapper>
+													}}
+													mediaPlaybackRequiresUserAction={true}
+												/>
+											))}
+										</MediaWrapper>
+									</>
+								)}
 							</>
 						)}
-						{bImages().length > 0 && (
+
+						{!hideImages && (
 							<>
-								<DivideView />
-								<GrayBackground>
-									<OText size={16} weight="500">
-										{t('IMAGES', 'Images')}
-									</OText>
-								</GrayBackground>
-								<MediaWrapper horizontal>
-									{bImages().map((i: any) => (
-										i.file != null &&
-										<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
-											<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
-											{/* <OText size={12} color={colors.red} style={{position: 'absolute'}}>{i.file}</OText> */}
-										</View>
-									))}
-								</MediaWrapper>
+								{bImages().length > 0 && (
+									<>
+										<DivideView />
+										<GrayBackground>
+											<OText size={16} weight="500">
+												{t('IMAGES', 'Images')}
+											</OText>
+										</GrayBackground>
+										<MediaWrapper horizontal>
+											{bImages().map((i: any) => (
+												i.file != null &&
+												<View key={i.id} style={{ width: 210, height: 127, borderRadius: 7.6, marginEnd: 20, overflow: 'hidden' }}>
+													<OIcon cover url={optimizeImage(i?.file, 'h_150,c_limit')} width={210} height={127} />
+													{/* <OText size={12} color={colors.red} style={{position: 'absolute'}}>{i.file}</OText> */}
+												</View>
+											))}
+										</MediaWrapper>
+									</>
+								)}
 							</>
 						)}
 					</>

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useOrder, useLanguage, useUtils, useConfig } from 'ordering-components/native';
+import { useOrder, useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	BIContainer,
@@ -22,7 +22,11 @@ export const BusinessItemAccordion = (props: any) => {
 		handleClearProducts,
 		handleClickCheckout,
 		checkoutButtonDisabled,
-		isMultiCheckout
+		isMultiCheckout,
+		isFromUpselling,
+		changeActiveState,
+		isActive,
+		isGiftCart
 	} = props
 
 	const [orderState] = useOrder();
@@ -30,19 +34,20 @@ export const BusinessItemAccordion = (props: any) => {
 	const [{ parsePrice }] = useUtils();
 	const [{ configs }] = useConfig()
 	const theme = useTheme();
+	const [events] = useEvent()
 
 	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)
+	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(!isClosed, cart?.uuid)
 		}
 	}, [orderState?.carts, isClosed])
 
@@ -52,44 +57,38 @@ export const BusinessItemAccordion = (props: any) => {
 		return acc = acc
 	}, cart?.subtotal)
 
+	useEffect(() => {
+		if (isActive && !isFromUpselling) {
+			if (cart?.uuid !== viewedCart?.uuid) {
+				setViewedCart(cart)
+				events.emit('cart_viewed', cart)
+			}
+		}
+	}, [isActive, viewedCart])
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
-				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
+				onPress={() => !isClosed ? changeActiveState(!isClosed, cart?.uuid) : isClosed}
 				activeOpacity={1}
 			>
 				<BIInfo>
 					<BIContentInfo>
 						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
-						{/* {orderState?.options?.type === 1 ? (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
-              </View>
-            ) : (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={24}
-                />
-                <OText>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
-              </View>
-            )} */}
 						<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>
 									</TouchableOpacity>
 								</>
 							)}
-							{!isCartPending && !isClosed && (
+							{!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')}
@@ -99,7 +98,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{isBusinessChangeEnabled && props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && !isGiftCart && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity