ordering-ui-react-native 0.12.57 → 0.12.61

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

@@ -1,249 +0,0 @@
-import React from 'react';
-import {
-	BusinessReviews as BusinessReviewController,
-	useLanguage,
-	useOrder,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import IconAntDesign from 'react-native-vector-icons/AntDesign';
-import { View, StyleSheet } from 'react-native';
-import { OIcon, OInput, OText } from '../shared';
-import {
-	BusinessReviewsContainer,
-	ScoreView,
-	BusinessReviewContent,
-	WrapCustomerReview,
-	WrapCustomerReviewTotal,
-	StarPointsView,
-	ReviewSearchView,
-	ReviewProgressView,
-	PrincipalWrapView,
-} from './styles';
-import { BusinessReviewsParams } from '../../types';
-import { ProgressBar, TouchableRipple } from 'react-native-paper';
-import moment from 'moment';
-
-const BusinessReviewsUI = (props: BusinessReviewsParams) => {
-	const { businessState, reviewsList } = props;
-	const [, t] = useLanguage();
-	const theme = useTheme();
-	const [orderState] = useOrder();
-
-	const styles = StyleSheet.create({
-		starIcon: {
-			marginRight: 5,
-		},
-		reviewScoreStyle: {
-			flexDirection: 'row',
-			alignItems: 'center',
-			justifyContent: 'center',
-		},
-		wrapTotalScoresStyle: {
-			maxHeight: 80,
-			height: 80,
-			marginBottom: 20,
-		},
-		progress: {
-			borderRadius: 5,
-			height: 4,
-			backgroundColor: theme.colors.backgroundGray200,
-			marginVertical: 9,
-		},
-		progressLabel: {
-			flexDirection: 'row',
-			justifyContent: 'space-between',
-		},
-	});
-
-	const Score = ({ star, text }: any) => (
-		<ScoreView>
-			<View style={styles.reviewScoreStyle}>
-				<IconAntDesign
-					name="star"
-					color={theme.colors.primary}
-					size={16}
-					style={styles.starIcon}
-				/>
-				<OText>{star}</OText>
-			</View>
-			<OText>{text}</OText>
-		</ScoreView>
-	);
-
-	const PrincipalComments = ({ comments }: any) => (
-		<View style={{ flexWrap: 'wrap', flexDirection: 'row', marginTop: 10 }}>
-			{comments.map((txt: string, idx: number) => (
-				<TouchableRipple
-					key={`princ_id_${idx}`}
-					style={{
-						backgroundColor: theme.colors.primaryContrast,
-						paddingHorizontal: 10,
-						paddingVertical: 4,
-						borderRadius: 50,
-						marginEnd: 7,
-						marginBottom: 15,
-					}}>
-					<OText size={10}>{txt}</OText>
-				</TouchableRipple>
-			))}
-		</View>
-	);
-
-	const ReviewItem = ({ comment, created_at, total, customer }: any) => (
-		<View style={{ marginBottom: 30 }}>
-			<View
-				style={{ flexDirection: 'row', marginBottom: 19, alignItems: 'center' }}>
-				<OIcon
-					url={theme.images.dummies.customerPhoto}
-					width={38}
-					height={38}
-					style={{
-						borderRadius: 7.6,
-						borderWidth: 1,
-						borderColor: theme.colors.border,
-						marginEnd: 9,
-					}}
-				/>
-				<View>
-					<OText size={12} color={theme.colors.textNormal} weight={'500'}>
-						{customer?.name || 'Jane Cooper'}
-					</OText>
-					<OText size={10} color={theme.colors.textSecondary}>
-						{moment(created_at).format('MMMM d, yyyy • hh:mm')}
-					</OText>
-				</View>
-			</View>
-			<OText size={10} color={theme.colors.textNormal}>
-				{comment}
-			</OText>
-		</View>
-	);
-
-	return (
-		<BusinessReviewsContainer>
-			<BusinessReviewContent
-				contentContainerStyle={{ paddingHorizontal: 40, paddingVertical: 27 }}>
-				{reviewsList.error ? (
-					<OText size={16}>{t('ERROR_UNKNOWN', 'An error has ocurred')}</OText>
-				) : (
-					<>
-						<StarPointsView>
-							<OIcon
-								src={theme.images.general.star}
-								width={32}
-								style={{ marginEnd: 10, marginBottom: 2, marginStart: -2 }}
-								color={
-									reviewsList?.reviews?.length > 0
-										? theme.colors.primary
-										: theme.colors.disabled
-								}
-							/>
-							<OText size={20} weight={'600'}>{`${businessState?.business?.reviews?.total || 0
-								} (${reviewsList?.reviews?.length || 0} ${t(
-									'REVIEWS',
-									'reviews',
-								)})`}</OText>
-						</StarPointsView>
-
-						<ReviewSearchView>
-							<OInput
-								icon={theme.images.general.search}
-								inputStyle={{ fontSize: 14 }}
-								placeholder={t('SEARCH_REVIEWS', 'Search reviews')}
-								style={{ paddingStart: 0 }}></OInput>
-						</ReviewSearchView>
-						<ReviewProgressView>
-							<OText style={{ marginBottom: 6 }}>
-								{t('REVIEW_ORDER', 'Review order')}
-							</OText>
-							<ProgressBar
-								progress={(businessState?.business?.reviews?.total || 0) / 5}
-								color={theme.colors.textNormal}
-								style={styles.progress}
-							/>
-							<View style={styles.progressLabel}>
-								<OText
-									size={10}
-									color={
-										businessState?.business?.reviews?.total < 1.5
-											? theme.colors.textNormal
-											: theme.colors.backgroundGray400
-									}>
-									{t('REVIEW_TERRIBLE', 'Terrible')}
-								</OText>
-								<OText
-									size={10}
-									color={
-										businessState?.business?.reviews?.total < 2.5
-											? theme.colors.textNormal
-											: theme.colors.backgroundGray400
-									}>
-									{t('REVIEW_BAD', 'Bad')}
-								</OText>
-								<OText
-									size={10}
-									color={
-										businessState?.business?.reviews?.total < 3.5
-											? theme.colors.textNormal
-											: theme.colors.backgroundGray400
-									}>
-									{t('REVIEW_OKAY', 'Okay')}
-								</OText>
-								<OText
-									size={10}
-									color={
-										businessState?.business?.reviews?.total < 4.5
-											? theme.colors.textNormal
-											: theme.colors.backgroundGray400
-									}>
-									{t('REVIEW_GOOD', 'Good')}
-								</OText>
-								<OText
-									size={10}
-									color={
-										businessState?.business?.reviews?.total >= 4.5
-											? theme.colors.textNormal
-											: theme.colors.backgroundGray400
-									}>
-									{t('REVIEW_GREAT', 'Great')}
-								</OText>
-							</View>
-						</ReviewProgressView>
-						<PrincipalWrapView>
-							<OText style={{ marginBottom: 6 }}>
-								{t('PRINCIPAL_COMMENTS', 'Principal comments')}
-							</OText>
-							<PrincipalComments
-								comments={[
-									'It wasn’t tasty',
-									'It doesn’t pack well',
-									'Too slow',
-									'It isn’t worth what it costs',
-								]}
-							/>
-						</PrincipalWrapView>
-
-						{reviewsList?.reviews.map((review: any) => (
-							<ReviewItem
-								key={`review_key_${review.id}`}
-								comment={review?.comment}
-								created_at={review?.created_at}
-							/>
-						))}
-					</>
-				)}
-				{!reviewsList.loading && reviewsList?.reviews.length === 0 && (
-					<OText>{t('REVIEWS_NOT_FOUND', 'Reviews Not Found')}</OText>
-				)}
-			</BusinessReviewContent>
-		</BusinessReviewsContainer>
-	);
-};
-
-export const BusinessReviews = (props: any) => {
-	const BusinessReviewProps = {
-		...props,
-		UIComponent: BusinessReviewsUI,
-	};
-	return <BusinessReviewController {...BusinessReviewProps} />;
-};

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

@@ -1,59 +0,0 @@
-import styled from 'styled-components/native';
-
-export const BusinessReviewsContainer = styled.View`
-  margin-top: 12px;
-`;
-
-export const ScoreView = styled.View`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.lightGray};
-  border-radius: 10px;
-  padding: 10px;
-  width: 170px;
-  margin-right: 15px;
-`;
-export const BusinessReviewContent = styled.ScrollView`
-  display: flex;
-  flex-direction: column;
-  margin-top: 24px;
-`;
-export const WrapCustomerReview = styled.View`
-  padding: 20px 0;
-  border-bottom-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.lightGray};
-`;
-export const WrapCustomerReviewTotal = styled.View`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 10px;
-`;
-export const StarPointsView = styled.View`
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-start;
-	padding-vertical: 4px;
-`;
-export const ReviewSearchView = styled.View`
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-start;
-	padding-top: 10px;
-	padding-bottom: 0px;
-	border-bottom-width: 1px;
-	border-bottom-color: ${(props: any) => props.theme.colors.border};
-	margin-bottom: 12px;
-`;
-export const ReviewProgressView = styled.View`
-	padding-top: 10px;
-	padding-bottom: 0px;
-	margin-bottom: 12px;
-`;
-export const PrincipalWrapView = styled.View`
-	padding-vertical: 17px;
-	margin-bottom: 12px;
-`;

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

@@ -1,127 +0,0 @@
-import React from 'react';
-import {
-	StyleSheet,
-	FlatList,
-	View,
-	ScrollView,
-	TouchableOpacity,
-} from 'react-native';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import {
-	BusinessTypeFilter as BusinessTypeFilterController,
-	useLanguage,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import {
-	BusinessCategoriesTitle,
-	BusinessCategories,
-	Category,
-	BCContainer,
-} from './styles';
-import { OIcon, OText } from '../shared';
-import { BusinessTypeFilterParams } from '../../types';
-
-export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
-	const { typesState, currentTypeSelected, handleChangeBusinessType } = props;
-
-	const [, t] = useLanguage();
-
-	const theme = useTheme();
-
-	const renderTypes = ({ item }: any) => {
-		return (
-			<TouchableOpacity
-				key={item.id}
-				onPress={() => handleChangeBusinessType(item.id)}
-				style={{
-					height: 34,
-					justifyContent: 'center',
-					borderBottomWidth: 1,
-					borderBottomColor: currentTypeSelected === item.id ? theme.colors.textNormal : theme.colors.border,
-				}}>
-				<OText
-					style={{ textAlign: 'center', paddingHorizontal: 5 }}
-					size={currentTypeSelected === item.id ? 14 : 12}
-					weight={currentTypeSelected === item.id ? 'bold' : 'normal'}
-					color={
-						currentTypeSelected === item.id
-							? theme.colors.textNormal
-							: theme.colors.textSecondary
-					}>
-					{t(
-						`BUSINESS_TYPE_${item.name.replace(/\s/g, '_').toUpperCase()}`,
-						item.name,
-					)}
-				</OText>
-			</TouchableOpacity>
-		);
-	};
-
-	return (
-		<BCContainer>
-			{typesState?.loading && (
-				<View>
-					<Placeholder style={{ marginVertical: 10 }} Animation={Fade}>
-						<ScrollView
-							horizontal
-							showsVerticalScrollIndicator={false}
-							showsHorizontalScrollIndicator={false}>
-							{[...Array(4)].map((_, i) => (
-								<View
-									key={i}
-									style={{ width: 80, borderRadius: 10, marginRight: 15 }}>
-									<PlaceholderLine height={80} noMargin />
-								</View>
-							))}
-						</ScrollView>
-					</Placeholder>
-				</View>
-			)}
-			{!typesState?.loading &&
-				!typesState?.error &&
-				typesState?.types &&
-				typesState?.types.length > 0 && (
-					<>
-						<BusinessCategoriesTitle>
-
-						</BusinessCategoriesTitle>
-						<BusinessCategories>
-							<FlatList
-								horizontal
-								showsHorizontalScrollIndicator={false}
-								data={typesState?.types}
-								renderItem={renderTypes}
-								keyExtractor={(type) => type.name}
-							/>
-						</BusinessCategories>
-					</>
-				)}
-		</BCContainer>
-	);
-};
-
-const styles = StyleSheet.create({
-	icons: {
-		padding: 10,
-	},
-	logo: {
-		width: 75,
-		height: 75,
-		marginBottom: 15,
-		borderRadius: 25,
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-});
-
-export const BusinessTypeFilter = (props: BusinessTypeFilterParams) => {
-	const businessTypeFilterProps = {
-		...props,
-		UIComponent: BusinessTypeFilterUI,
-		businessTypes: props.businessTypes,
-		defaultBusinessType: props.defaultBusinessType || null,
-		onChangeBusinessType: props.handleChangeBusinessType,
-	};
-
-	return <BusinessTypeFilterController {...businessTypeFilterProps} />;
-};

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

@@ -1,40 +0,0 @@
-import styled from 'styled-components/native'
-
-export const BCContainer = styled.View`
-  display: flex;
-  width: 100%;
-  justify-content: flex-start;
-  text-align: center;
-`
-
-export const BusinessCategoriesTitle = styled.View`
-  flex: 1;
-`
-
-export const BusinessCategories = styled.View`
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin: 10px 0px;
-  width: 100%;
-`
-export const Category = styled.View`
-  height: 150px;
-  min-width: 90px;
-  margin-right: 15px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`
-
-export const IconContainer = styled.View`
-  border-width: 1px;
-  display: flex;
-  border-color: ${(props: any) => props.theme.colors.backgroundGray};
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  height: 60px;
-`