ordering-ui-react-native 0.12.56 → 0.12.60

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

@@ -1,310 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity, Platform } from 'react-native';
-import { useUtils, useOrder, useLanguage, useSession, useConfig } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { OIcon, OText, OModal } from '../shared';
-import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes, getTypesText } from '../../utils';
-import { BusinessInformation } from '../BusinessInformation';
-import { BusinessReviews } from '../BusinessReviews';
-import {
-	BusinessContainer,
-	BusinessHeader,
-	BusinessLogo,
-	BusinessInfo,
-	BusinessInfoItem,
-	WrapReviews,
-	WrapBusinessInfo,
-	AddressInput,
-	OrderControlContainer,
-	DropOptionButton,
-} from './styles';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-const types = ['food', 'laundry', 'alcohol', 'groceries'];
-
-export const BusinessBasicInformation = (
-	props: BusinessBasicInformationParams,
-) => {
-	const { navigation, businessState, isBusinessInfoShow, logo, header, isMini } = props;
-	const { business, loading } = businessState;
-
-	const theme = useTheme();
-	const [orderState] = useOrder();
-	const [{ auth }] = useSession()
-	const [{ configs }] = useConfig();
-	const [, t] = useLanguage();
-	const [{ parsePrice, parseDistance, optimizeImage, parseDate }] = useUtils();
-	const [openBusinessInformation, setOpenBusinessInformation] = useState(false);
-	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
-	const { top, bottom } = useSafeAreaInsets()
-
-	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || [];
-
-	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>
-			{!isMini && 
-				<BusinessHeader
-					style={
-						isBusinessInfoShow
-							? {...styles.businesInfoheaderStyle, paddingTop: top}
-							: { ...styles.headerStyle, paddingTop: top, backgroundColor: theme.colors.backgroundGray }
-					}
-					source={{
-						uri:
-							header ||
-							optimizeImage(businessState?.business?.header, 'h_400,c_limit'),
-					}}>
-					{!loading && 	
-					<React.Fragment>
-						<AddressInput
-							onPress={() => auth
-								? navigation.navigate('AddressList', { isGoBack: true, isFromProductsList: true })
-								: navigation.navigate('AddressForm', { address: orderState.options?.address })}
-							style={{marginTop: !auth ? 36 : top > 0 ? 0 : 20}}
-							activeOpacity={0.8}
-						>
-							<OIcon src={theme.images.general.pin} width={16} color={theme.colors.textSecondary} />
-							<OText color={theme.colors.textPrimary} numberOfLines={1} lineHeight={20} weight={Platform.OS === 'android' ? 'bold' : '600'} style={{paddingStart: 10, flexBasis: '90%'}}>
-								{orderState?.options?.address?.address}
-							</OText>
-						</AddressInput>
-						<OrderControlContainer>
-							<View style={styles.wrapperOrderOptions}>
-								<DropOptionButton activeOpacity={0.7} onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-									<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderState?.options?.type || 1), 'Delivery')}</OText>
-									<OIcon
-										src={theme.images.general.arrow_down}
-										width={10}
-										style={{ marginStart: 8 }}
-									/>
-								</DropOptionButton>
-								<DropOptionButton
-									onPress={() => navigation.navigate('MomentOption')}>
-									<OText
-										size={12}
-										numberOfLines={1}
-										ellipsizeMode="tail"
-										color={theme.colors.textSecondary}>
-										{orderState.options?.moment
-											? parseDate(orderState.options?.moment, {
-												outputFormat:
-													configs?.format_time?.value === '12'
-														? 'MM/DD hh:mma'
-														: 'MM/DD HH:mm',
-											})
-											: t('ASAP_ABBREVIATION', 'ASAP')}
-									</OText>
-									<OIcon
-										src={theme.images.general.arrow_down}
-										width={10}
-										style={{ marginStart: 8 }}
-									/>
-								</DropOptionButton>
-							</View>
-						</OrderControlContainer>
-					</React.Fragment>
-					}
-				</BusinessHeader>
-			}
-			<BusinessInfo style={styles.businessInfo}>
-				{!isMini && 
-					<BusinessLogo>
-						{loading ? (
-							<View>
-								<Placeholder Animation={Fade}>
-									<PlaceholderLine height={50} width={20} />
-								</Placeholder>
-							</View>
-						) : (
-							!isBusinessInfoShow && (
-								<OIcon
-									url={
-										logo ||
-										optimizeImage(businessState?.business?.logo, 'h_300,c_limit')
-									}
-									style={styles.businessLogo}
-								/>
-							)
-						)}
-					</BusinessLogo>
-				}
-				<BusinessInfoItem>
-					{loading ? (
-						<Placeholder Animation={Fade}>
-							<PlaceholderLine height={30} width={20} />
-						</Placeholder>
-					) : (
-						<>
-							<OText size={24} weight={'bold'}>
-								{business?.name}
-							</OText>
-							{!isBusinessInfoShow && (
-								<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
-									<OIcon src={theme.images.general.info} width={16} color={theme.colors.primary} />
-								</WrapBusinessInfo>
-							)}
-						</>
-					)}
-				</BusinessInfoItem>
-				{loading ? (
-					<Placeholder Animation={Fade}>
-						<PlaceholderLine width={10} />
-					</Placeholder>
-				) : (
-					<View style={{marginVertical: 5}}>
-						{/* <OText color={theme.colors.textNormal}>{getBusinessType()}</OText> */}
-						<OText size={12} lineHeight={18}>{business?.address}</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('MomentOption')}>
-								<OText color={theme.colors.primary} 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.primary} 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,
-		paddingHorizontal: 40
-	},
-	headerStyle: {
-		height: 260,
-		paddingHorizontal: 40
-	},
-	businessLogo: {
-		width: 72,
-		height: 72,
-		borderRadius: 7.6,
-		justifyContent: 'flex-start',
-		alignItems: 'flex-start',
-	},
-	businessInfo: {
-		paddingHorizontal: 40,
-		paddingTop: 46,
-	},
-	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
-	},
-	wrapperOrderOptions: {
-		width: '100%',
-		flexDirection: 'row',
-		justifyContent: 'flex-start',
-		marginBottom: 10,
-		zIndex: 100,
-	},
-});

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

@@ -1,66 +0,0 @@
-import styled from 'styled-components/native';
-
-export const BusinessContainer = styled.View`
-  flex-direction: column;
-`;
-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 #0000001A;
-`;
-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;
-  margin-top: 20px;
-`;
-export const WrapBusinessInfo = styled.TouchableOpacity`
-  padding: 0 7px;
-`;
-export const AddressInput = styled.TouchableOpacity`
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: white;
-  padding-horizontal: 15px;
-  border-radius: 24px;
-  height: 44px;
-  min-height: 44px;
-`
-export const OrderControlContainer = styled.View`
-  width: 100%;
-  z-index: 10;
-  padding-top: 9px;
-  flex: 1;
-`
-
-export const DropOptionButton = styled.TouchableOpacity`
-  background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-  border-radius: 7.6px;
-  font-size: 12px;
-  max-width: 240px;
-  height: 26px;
-  align-items: center;
-  justify-content: center;
-  padding-horizontal: 8px;
-  flex-direction: row;
-  margin-end: 12px;
-`

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

@@ -1,184 +0,0 @@
-import React from 'react';
-import {
-	BusinessController as BusinessSingleCard,
-	useUtils,
-	useOrder,
-	useLanguage,
-} from 'ordering-components/native';
-import { OButton, OIcon, OText } from '../shared';
-import { StyleSheet, View } from 'react-native';
-import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
-import {
-	Card,
-	BusinessHero,
-	BusinessContent,
-	BusinessCategory,
-	BusinessInfo,
-	Metadata,
-	BusinessState,
-	BusinessLogo,
-	Reviews,
-	BusinessInfoInner,
-	LikeBtn,
-	PreOrderBtn,
-} from './styles';
-import { useTheme } from 'styled-components/native';
-
-export const BusinessControllerUI = (props: BusinessControllerParams) => {
-	const { business, handleClick } = props;
-	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
-		useUtils();
-	const [orderState] = useOrder();
-	const [, t] = useLanguage();
-	const theme = useTheme()
-
-	const styles = StyleSheet.create({
-		headerStyle: {
-			borderTopLeftRadius: 7.6,
-			borderTopRightRadius: 7.6,
-		},
-		businessLogo: {
-			backgroundColor: 'white',
-			width: 62,
-			height: 62,
-			borderRadius: 7.6,
-			justifyContent: 'center',
-			alignItems: 'center',
-			marginTop: -32,
-			shadowColor: '#000000',
-			shadowOffset: { width: 0, height: 1 },
-			shadowOpacity: 0.1,
-			shadowRadius: 1
-		},
-		businessStateView: {
-			backgroundColor: '#DEE2E6',
-			borderRadius: 50,
-			height: 20,
-			alignItems: 'center',
-			justifyContent: 'center',
-			paddingHorizontal: 8,
-		},
-		businessStateText: {
-			textAlign: 'center',
-		},
-
-		starIcon: {
-			marginHorizontal: 2,
-			marginTop: -2,
-		},
-		featured: {
-			position: 'absolute',
-			padding: 8,
-			backgroundColor: theme.colors.backgroundDark,
-			opacity: 0.8,
-			borderRadius: 10,
-			left: 20,
-			top: 10,
-		},
-		closed: {
-		},
-		bullet: {
-			flexDirection: 'row',
-			alignItems: 'center',
-			justifyContent: 'flex-start',
-		},
-		startBtn: {
-			height: 26,
-			borderRadius: 7.6,
-			backgroundColor: theme.colors.clear,
-			borderWidth: 1,
-			shadowOpacity: 0,
-			paddingLeft: 0,
-			paddingRight: 0,
-			borderColor: theme.colors.primary,
-			marginTop: 4
-		}
-	});
-
-	const types = ['food', 'laundry', 'alcohol', 'groceries'];
-
-	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(', ');
-	};
-
-	const getOrderTypes = () => {
-		return `Eat In | Drive Thru | Delivery | Curbside | Pickup`;
-	}
-
-	return (
-		<Card activeOpacity={1} onPress={() => handleClick(business)}>
-			<BusinessContent>
-				<BusinessInfo>
-					<BusinessInfoInner>
-						<OText size={12} lineHeight={18} weight={'bold'} mBottom={5}>
-							{business?.name}
-						</OText>
-						<OText size={10} lineHeight={15} color={theme.colors.textThird} mBottom={4}>
-							{business?.address}
-						</OText>
-						<BusinessCategory>
-							<OText size={8} lineHeight={12} color={theme.colors.textSecondary}>{getOrderTypes()}</OText>
-						</BusinessCategory>
-					</BusinessInfoInner>
-					<View style={{alignItems: 'flex-end'}}>
-						{business?.reviews?.total >= 0 && (
-							<Reviews>
-								<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} color={theme.colors.textSecondary} />
-								<OText size={12} style={{ lineHeight: 15 }}>
-									{parseNumber(business?.reviews?.total, { separator: '.' })}
-								</OText>
-								<LikeBtn>
-									<OIcon src={theme.images.general.heart} width={14} />
-								</LikeBtn>
-							</Reviews>
-						)}
-						<OButton 
-							onClick={() => handleClick(business)} 
-							text={t('START_ORDER', 'Start order')} 
-							style={styles.startBtn} 
-							textStyle={{fontSize: 12, color: theme.colors.primary}} 
-						/>
-					</View>
-				</BusinessInfo>
-				
-				<Metadata>
-						<PreOrderBtn onPress={() => handleClick(business)}>
-							<OText
-								color={theme.colors.primary}
-								size={10} lineHeight={15}>
-								{t('PRE_ORDER', 'Preorder')}
-							</OText>
-						</PreOrderBtn>
-					{!business?.open ? (
-						<View style={styles.closed}>
-							<OText size={10} color={theme.colors.red}>
-								{t('CLOSED', 'Closed')}
-							</OText>
-						</View>
-					) : (
-						<View style={styles.bullet}>
-							
-						</View>
-					)}
-				</Metadata>
-			</BusinessContent>
-		</Card>
-	);
-};
-
-export const BusinessController = (props: BusinessControllerParams) => {
-	const BusinessControllerProps = {
-		...props,
-		UIComponent: BusinessControllerUI,
-	};
-
-	return <BusinessSingleCard {...BusinessControllerProps} />;
-};

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

@@ -1,64 +0,0 @@
-import styled, { css } from 'styled-components/native';
-
-export const Card = styled.TouchableOpacity`
-  margin-vertical: 20px;
-  border-radius: 7.6px;
-  flex: 1;
-  width: 100%;
-`;
-
-export const BusinessHero = styled.ImageBackground`
-  height: 122px;
-  resize-mode: cover;
-  border-radius: 7.6px;
-  flex-direction: row;
-  position: relative;
-`;
-
-export const BusinessContent = styled.View`
-	  overflow: visible;
-`;
-
-export const BusinessInfo = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-  margin-bottom: 9px;
-  flex-shrink: 1;
-`;
-
-export const BusinessInfoInner = styled.View`
-  flex: 1; 
-`
-
-export const BusinessCategory = styled.View`
-`;
-
-export const Metadata = styled.View`
-  flex-direction: row;
-`;
-
-export const BusinessState = styled.View`
-    position: absolute;
-	 top: 13px;
-	 end: 18px;
-`
-
-export const BusinessLogo = styled.View`
-   
-`
-
-export const Reviews = styled.View`
-  flex-direction: row;
-  align-items: center;
-`
-
-export const LikeBtn = styled.TouchableOpacity`
-  padding-horizontal: 4px;
-  margin-end: -4px;
-`;
-
-export const PreOrderBtn = styled.TouchableOpacity`
-  margin-end: 12px;
-`;