ordering-ui-react-native 0.14.78 → 0.14.80-release

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

@@ -1,265 +1,238 @@
-import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
-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 dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import isBetween from 'dayjs/plugin/isBetween';
-
-dayjs.extend(timezone);
-dayjs.extend(isBetween);
-
-import {
-	BusinessContainer,
-	BusinessHeader,
-	BusinessLogo,
-	BusinessInfo,
-	BusinessInfoItem,
-	WrapReviews,
-	WrapBusinessInfo,
-} from './styles';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-const types = ['food', 'laundry', 'alcohol', 'groceries'];
-
-export const BusinessBasicInformation = (
-	props: BusinessBasicInformationParams,
-) => {
-	const { navigation, businessState, isBusinessInfoShow, logo, header } = props;
-	const { business, loading } = businessState;
-
-	const theme = useTheme();
-	const [orderState] = useOrder();
-	const [, t] = useLanguage();
-	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
-	const [openBusinessInformation, setOpenBusinessInformation] = useState(false);
-	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
-	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
-		const _types: any = [];
-		types.forEach(
-			(type) =>
-				business[type] &&
-				_types.push(
-					t(`BUSINESS_TYPE_${type?.replace(/\s/g, '_')?.toUpperCase()}`, type),
-				),
-		);
-		return _types.join(', ');
-	};
-
-	
-	useEffect(() => {
-		if (businessState?.loading) return
-		let timeout: any = null
-		const currentDate = dayjs().tz(businessState?.business?.timezone)
-		let lapse = null
-		if (businessState?.business?.today?.enabled) {
-			lapse = businessState?.business?.today?.lapses?.find((lapse: any) => {
-				const from = currentDate.hour(lapse.open.hour).minute(lapse.open.minute)
-				const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
-				return currentDate.unix() >= from.unix() && currentDate.unix() <= to.unix()
-			})
-		}
-		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)
-		}
-		return () => {
-		  timeout && clearTimeout(timeout)
-		}
-	  }, [businessState?.business])
-
-	return (
-		<BusinessContainer>
-			<BusinessHeader
-				style={
-					isBusinessInfoShow
-						? styles.businesInfoheaderStyle
-						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
-				}
-				source={{
-					uri:
-						header ||
-						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
-				}}>
-				{!isBusinessInfoShow && (
-					<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
-						<OIcon src={theme.images.general.info} width={24} />
-					</WrapBusinessInfo>
-				)}
-			</BusinessHeader>
-			<BusinessInfo style={styles.businessInfo}>
-				<BusinessLogo>
-					{loading ? (
-						<View>
-							<Placeholder Animation={Fade}>
-								<PlaceholderLine height={50} width={20} />
-							</Placeholder>
-						</View>
-					) : (
-						!isBusinessInfoShow && (
-							<OIcon
-								url={
-									logo ||
-									optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
-								}
-								style={styles.businessLogo}
-							/>
-						)
-					)}
-				</BusinessLogo>
-				<BusinessInfoItem>
-					{loading ? (
-						<Placeholder Animation={Fade}>
-							<PlaceholderLine height={30} width={20} />
-						</Placeholder>
-					) : (
-						<OText size={24} weight={'600'}>
-							{business?.name}
-						</OText>
-					)}
-				</BusinessInfoItem>
-				{loading ? (
-					<Placeholder Animation={Fade}>
-						<PlaceholderLine width={10} />
-					</Placeholder>
-				) : (
-					<View style={{ width: '75%' }}>
-						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
-					</View>
-				)}
-				<View>
-					<BusinessInfoItem>
-						{loading && (
-							<Placeholder Animation={Fade}>
-								<View style={{ flexDirection: 'row' }}>
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} />
-								</View>
-							</Placeholder>
-						)}
-						<View style={styles.bullet}>
-							<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-								{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
-							</OText>
-							{orderState?.options?.type === 1 ? (
-								<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-									{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
-								</OText>
-							) : (
-								<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-									{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
-								</OText>
-							)}
-							<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-								{parseDistance(business?.distance || 0) + `  \u2022 `}
-							</OText>
-						</View>
-
-						<View style={styles.reviewStyle}>
-							<OIcon
-								src={theme.images.general.star}
-								width={14}
-								color={theme.colors.textSecondary}
-								style={{ marginTop: -2, marginEnd: 2 }}
-							/>
-							<OText size={12} color={theme.colors.textSecondary}>
-								{business?.reviews?.total}
-							</OText>
-						</View>
-					</BusinessInfoItem>
-				</View>
-				<WrapReviews>
-					{!isBusinessInfoShow && (
-						<>
-							<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)}>
-								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-									{t('REVIEWS', 'Reviews')}
-								</OText>
-							</TouchableOpacity>
-						</>
-					)}
-				</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>
-		</BusinessContainer>
-	);
-};
-
-const styles = StyleSheet.create({
-	businesInfoheaderStyle: {
-		height: 150,
-	},
-	headerStyle: {
-		height: 260,
-	},
-	businessLogo: {
-		width: 72,
-		height: 72,
-		borderRadius: 7.6,
-		justifyContent: 'flex-start',
-		alignItems: 'flex-start',
-	},
-	businessInfo: {
-		paddingHorizontal: 40,
-		paddingTop: 56,
-	},
-	bullet: {
-		flexDirection: 'row',
-		alignItems: 'center',
-	},
-	metadata: {
-		marginRight: 2,
-	},
-	starIcon: {
-		marginHorizontal: 5,
-	},
-	reviewStyle: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	modalTitleSectionStyle: {
-		position: 'absolute',
-		width: '100%',
-		top: 0,
-		zIndex: 100,
-		left: 40
-	},
-});
+import React, { useState } from 'react';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+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 {
+	BusinessContainer,
+	BusinessHeader,
+	BusinessLogo,
+	BusinessInfo,
+	BusinessInfoItem,
+	WrapReviews,
+	WrapBusinessInfo,
+} from './styles';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+const types = ['food', 'laundry', 'alcohol', 'groceries'];
+
+export const BusinessBasicInformation = (
+	props: BusinessBasicInformationParams,
+) => {
+	const { navigation, businessState, isBusinessInfoShow, logo, header, isPreOrder } = props;
+	const { business, loading } = businessState;
+
+	const theme = useTheme();
+	const [orderState] = useOrder();
+	const [, t] = useLanguage();
+	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
+	const [openBusinessInformation, setOpenBusinessInformation] = useState(false);
+	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
+	const getBusinessType = () => {
+		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
+		const _types: any = [];
+		types.forEach(
+			(type) =>
+				business[type] &&
+				_types.push(
+					t(`BUSINESS_TYPE_${type?.replace(/\s/g, '_')?.toUpperCase()}`, type),
+				),
+		);
+		return _types.join(', ');
+	};
+
+	return (
+		<BusinessContainer>
+			<BusinessHeader
+				style={
+					isBusinessInfoShow
+						? styles.businesInfoheaderStyle
+						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
+				}
+				source={{
+					uri:
+						header ||
+						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
+				}}>
+				{!isBusinessInfoShow && (
+					<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
+						<OIcon src={theme.images.general.info} width={24} />
+					</WrapBusinessInfo>
+				)}
+			</BusinessHeader>
+			<BusinessInfo style={styles.businessInfo}>
+				<BusinessLogo>
+					{loading ? (
+						<View>
+							<Placeholder Animation={Fade}>
+								<PlaceholderLine height={50} width={20} />
+							</Placeholder>
+						</View>
+					) : (
+						!isBusinessInfoShow && (
+							<OIcon
+								url={
+									logo ||
+									optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
+								}
+								style={styles.businessLogo}
+							/>
+						)
+					)}
+				</BusinessLogo>
+				<BusinessInfoItem>
+					{loading ? (
+						<Placeholder Animation={Fade}>
+							<PlaceholderLine height={30} width={20} />
+						</Placeholder>
+					) : (
+						<OText size={24} weight={'600'}>
+							{business?.name}
+						</OText>
+					)}
+				</BusinessInfoItem>
+				{loading ? (
+					<Placeholder Animation={Fade}>
+						<PlaceholderLine width={10} />
+					</Placeholder>
+				) : (
+					<View style={{ width: '75%' }}>
+						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
+					</View>
+				)}
+				<View>
+					<BusinessInfoItem>
+						{loading && (
+							<Placeholder Animation={Fade}>
+								<View style={{ flexDirection: 'row' }}>
+									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+									<PlaceholderLine width={13} />
+								</View>
+							</Placeholder>
+						)}
+						<View style={styles.bullet}>
+							<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+								{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
+							</OText>
+							{orderState?.options?.type === 1 ? (
+								<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+									{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
+								</OText>
+							) : (
+								<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+									{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
+								</OText>
+							)}
+							<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+								{parseDistance(business?.distance || 0) + `  \u2022 `}
+							</OText>
+						</View>
+
+						<View style={styles.reviewStyle}>
+							<OIcon
+								src={theme.images.general.star}
+								width={14}
+								color={theme.colors.textSecondary}
+								style={{ marginTop: -2, marginEnd: 2 }}
+							/>
+							<OText size={12} color={theme.colors.textSecondary}>
+								{business?.reviews?.total}
+							</OText>
+						</View>
+					</BusinessInfoItem>
+				</View>
+				<WrapReviews>
+					{!isBusinessInfoShow && (
+						<>
+							{ 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={() => setOpenBusinessReviews(true)}>
+								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+									{t('REVIEWS', 'Reviews')}
+								</OText>
+							</TouchableOpacity>
+						</>
+					)}
+				</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>
+		</BusinessContainer>
+	);
+};
+
+const styles = StyleSheet.create({
+	businesInfoheaderStyle: {
+		height: 150,
+	},
+	headerStyle: {
+		height: 260,
+	},
+	businessLogo: {
+		width: 72,
+		height: 72,
+		borderRadius: 7.6,
+		justifyContent: 'flex-start',
+		alignItems: 'flex-start',
+	},
+	businessInfo: {
+		paddingHorizontal: 40,
+		paddingTop: 56,
+	},
+	bullet: {
+		flexDirection: 'row',
+		alignItems: 'center',
+	},
+	metadata: {
+		marginRight: 2,
+	},
+	starIcon: {
+		marginHorizontal: 5,
+	},
+	reviewStyle: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	modalTitleSectionStyle: {
+		position: 'absolute',
+		width: '100%',
+		top: 0,
+		zIndex: 100,
+		left: 40
+	},
+});

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

@@ -1,43 +1,43 @@
-import styled from 'styled-components/native';
-import { Platform } from 'react-native';
-
-export const BusinessContainer = styled.View`
-  flex-direction: column;
-  padding-bottom: 35px;
-`;
-export const BusinessHeader = styled.ImageBackground`
-  width: 100%;
-  position: relative;
-  max-height: 258px;
-  height: 258px;
-  resize-mode: cover;
-`;
-export const BusinessLogo = styled.View`
-  position: absolute;
-  start: 40px;
-  top: -36px;
-  z-index: 50;
-  box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};
-  elevation: 2;
-  background-color: white;
-  border-radius: 7.6px;
-`;
-export const BusinessInfo = styled.View`
-  justify-content: flex-start;
-  align-items: flex-start;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
-export const BusinessInfoItem = styled.View`
-  flex-direction: row;
-  align-items: center;
-`;
-export const WrapReviews = styled.View`
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-`;
-export const WrapBusinessInfo = styled.TouchableOpacity`
-  position: absolute;
-  top: 16px;
-  end: 39px;
-`;
+import styled from 'styled-components/native';
+import { Platform } from 'react-native';
+
+export const BusinessContainer = styled.View`
+  flex-direction: column;
+  padding-bottom: 35px;
+`;
+export const BusinessHeader = styled.ImageBackground`
+  width: 100%;
+  position: relative;
+  max-height: 258px;
+  height: 258px;
+  resize-mode: cover;
+`;
+export const BusinessLogo = styled.View`
+  position: absolute;
+  start: 40px;
+  top: -36px;
+  z-index: 50;
+  box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};
+  elevation: 2;
+  background-color: white;
+  border-radius: 7.6px;
+`;
+export const BusinessInfo = styled.View`
+  justify-content: flex-start;
+  align-items: flex-start;
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
+`;
+export const BusinessInfoItem = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+export const WrapReviews = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+`;
+export const WrapBusinessInfo = styled.TouchableOpacity`
+  position: absolute;
+  top: 16px;
+  end: 39px;
+`;