ordering-ui-react-native 0.12.56 → 0.12.60

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

@@ -1,221 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { ReviewDriver as ReviewDriverController, useLanguage, ToastType, useToast } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { useForm, Controller } from 'react-hook-form'
-
-import {
-	ReviewOrderContainer,
-	BusinessLogo,
-	FormReviews,
-	Category,
-	Stars,
-	BlockWrap,
-	CommentItem
-} from './styles'
-import { OButton, OIcon, OInput, OText } from '../shared'
-import { TouchableOpacity, StyleSheet, View } from 'react-native';
-import NavBar from '../NavBar'
-import Spinner from 'react-native-loading-spinner-overlay'
-
-import { ReviewDriverParams } from '../../types'
-import { REVIEW_DRIVER_COMMENTS } from '../../config/constants';
-import TagSelector from '../TagSelector';
-import OBottomStickBar from '../shared/OBottomStickBar';
-import { Container } from '../../..';
-
-export const ReviewDriverUI = (props: ReviewDriverParams) => {
-	const {
-		dirverReviews,
-    order,
-    formState,
-    setDriverReviews,
-    closeReviewDriver,
-    setIsDriverReviewed,
-    handleSendDriverReview,
-		navigation
-	} = props
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		inputTextArea: {
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-			marginVertical: 10,
-			height: 100,
-			alignItems: 'flex-start',
-			paddingVertical: 12,
-			fontSize: 10,
-			marginBottom: 30
-		},
-		progress: {
-			borderRadius: 5,
-			height: 4,
-			backgroundColor: theme.colors.backgroundGray200,
-			marginVertical: 9,
-		},
-		progressLabel: {
-			flexDirection: 'row',
-			justifyContent: 'space-between',
-		},
-	})
-
-	const [, t] = useLanguage()
-	const [, { showToast }] = useToast()
-	const { handleSubmit, control, errors } = useForm()
-	
-	const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
-
-	const [curVal, setReviewVal] = useState(-1);
-	const [curSuggest] = useState(REVIEW_DRIVER_COMMENTS.map(({key, value}) => t(key, value)));
-	const [selectedSuggest, setSelectedSuggest] = useState([]);
-	const [comment, setComment] = useState('');
-
-
-	// const handleChangeReviews = (index) => {
-  //   if (index) setDriverReviews({ ...dirverReviews, qualification: index })
-  // }
-
-  const onSubmit = () => {
-    if (dirverReviews?.qualification === 0) {
-      setAlertState({
-        open: true,
-        content: [`${t('REVIEW_QUALIFICATION_REQUIRED', 'Review qualification is required')}`]
-      })
-      return
-    }
-    setAlertState({ ...alertState, success: true })
-    handleSendDriverReview()
-  }
-
-	const onSuggestUpdate = useCallback((items) => {
-		if (items.length > 0) {
-			let selected: Array<never> = [];
-			items.map(({label, checked}: never) => {
-				if (checked === true) {
-					selected.push(label);
-				}
-			});
-			setSelectedSuggest(selected);
-		}
-	}, []);
-
-	const handleNext = (type: number) => {
-		if (type == 1) handleSubmit(onSubmit)
-		navigation?.navigate('BottomTab', { screen: 'MyOrders' });
-	}
-
-	useEffect(() => {
-		if (formState.error && !formState?.loading) {
-			showToast(ToastType.Error, formState.result)
-		}
-		if (!formState.loading && !formState.error && alertState.success) {
-			showToast(ToastType.Success, t('REVIEW_SUCCESS_CONTENT', 'Thank you, Review successfully submitted!'))
-			setIsDriverReviewed && setIsDriverReviewed(true)
-			handleNext(0);
-		}
-	}, [formState.result])
-
-	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			let stringError = '';
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
-
-	useEffect(() => {
-		if (alertState.open) {
-			alertState.content && showToast(
-				ToastType.Error,
-				alertState.content
-			)
-		}
-	}, [alertState.content])
-
-  useEffect(() => {
-    let _comments = comment || '';
-    if (selectedSuggest.length > 0) {
-      _comments = _comments + ', ' + selectedSuggest.join(', ');
-    }
-    setDriverReviews({ ...dirverReviews, comment: _comments, qualification: 5 })
-  }, [comment, selectedSuggest])
-
-	return (
-		<>
-		<Container>
-			<ReviewOrderContainer>
-				<NavBar
-					title={t('REVIEW_ORDER', 'Review Order')}
-					titleAlign={'center'}
-					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-					showCall={false}
-					btnStyle={{ paddingLeft: 0 }}
-					paddingTop={0}
-					isVertical
-					leftImg={theme.images.general.close}
-					leftImageStyle={{width: 16}}
-				/>
-				<BusinessLogo>
-					<OIcon 
-						url={order?.driver?.photo || theme.images.dummies.driverPhoto} 
-						width={72} height={72} 
-						style={{borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled}} 
-					/>
-					<OText size={14} lineHeight={21}>{order?.driver?.name}</OText>
-				</BusinessLogo>
-				<View style={{ paddingBottom: 0 }}>
-					<BlockWrap>
-						<OText mBottom={16}>{t('COMMENTS', 'Comments')}</OText>
-						<View style={{flexShrink: 1}}>
-							<TagSelector items={curSuggest} activeColor={theme.colors.primary} normalColor={'#E9ECEF'} onUpdated={onSuggestUpdate} />
-						</View>
-					</BlockWrap>
-					<FormReviews>
-						<OText mBottom={10}>{t('DO_YOU_WANT_TO_ADD_SOMETHING', 'Do you want to add something?')}</OText>
-						<Controller
-							control={control}
-							defaultValue=''
-							name='comments'
-							render={({ onChange }: any) => (
-								<OInput
-									name='comments'
-									placeholder={t('COMMENTS', 'Comments')}
-									onChange={(val: string) => {
-										onChange(val)
-										setComment(val)
-									}}
-									style={styles.inputTextArea}
-									multiline
-									inputStyle={{fontSize: 12}}
-								/>
-							)}
-						/>
-					</FormReviews>
-				</View>
-				<Spinner visible={formState.loading} />
-			</ReviewOrderContainer>
-		</Container>
-		<OBottomStickBar 
-			rightBtnStyle={{borderRadius: 7.6, height: 44}} 
-			rightAction={() => handleNext(1)}
-			leftAction={() => handleNext(0)}
-		/>
-		</>
-	)
-}
-
-
-export const ReviewDriver = (props: ReviewDriverParams) => {
-	const reviewDriverProps = {
-		...props,
-		UIComponent: ReviewDriverUI
-	}
-	return <ReviewDriverController {...reviewDriverProps} />
-}

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

@@ -1,46 +0,0 @@
-import styled from 'styled-components/native'
-
-export const ReviewOrderContainer = styled.View`
-  width: 100%;
-  flex: 1;
-`
-export const ReviewOrderTitle = styled.View`
-
-`
-
-export const BusinessLogo = styled.View`
-  margin-vertical: 5px;
-  align-items: center;
-  box-shadow: 0 1px 2px #ddd;
-  border-radius: 7.6px;
-  margin-bottom: 20px;
-`
-
-export const FormReviews = styled.View`
-  flex: 1;
-`
-
-export const Category = styled.View`
-  padding: 10px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.secundaryContrast};
-  flex-direction: row;
-  justify-content: space-between;
-  margin-vertical: 5px;
-  border-radius: 10px;
-`
-
-export const Stars = styled.View`
-  flex-direction: row;
-`
-
-export const BlockWrap = styled.View`
-  margin-vertical: 16px;
-  padding-bottom: 20px;
-`;
-
-export const CommentItem = styled.TouchableOpacity`
-  padding: 3px 10px;
-  border-radius: 20px;
-  min-height: 24px;
-`;

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

@@ -1,325 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { OrderReview as ReviewOrderController, useLanguage, ToastType, useToast } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { useForm, Controller } from 'react-hook-form'
-
-import {
-	ReviewOrderContainer,
-	BusinessLogo,
-	FormReviews,
-	Category,
-	Stars,
-	BlockWrap,
-	CommentItem
-} from './styles'
-import { OButton, OIcon, OInput, OText } from '../shared'
-import { TouchableOpacity, StyleSheet, View } from 'react-native';
-import NavBar from '../NavBar'
-import Spinner from 'react-native-loading-spinner-overlay'
-
-import { ReviewOrderParams } from '../../types'
-import { ProgressBar } from 'react-native-paper';
-import { REVIEW_ORDER_COMMENTS } from '../../config/constants';
-import TagSelector from '../TagSelector';
-import OBottomStickBar from '../shared/OBottomStickBar';
-import { Container } from '../../..';
-
-export const ReviewOrderUI = (props: ReviewOrderParams) => {
-	const {
-		order,
-		stars,
-		handleChangeInput,
-		handleChangeRating,
-		handleSendReview,
-		formState,
-		navigation,
-		orderComments,
-		setStars
-	} = props
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		inputTextArea: {
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-			marginVertical: 10,
-			height: 100,
-			alignItems: 'flex-start',
-			paddingVertical: 12,
-			fontSize: 10,
-			marginBottom: 30
-		},
-		progress: {
-			borderRadius: 5,
-			height: 4,
-			backgroundColor: theme.colors.backgroundGray200,
-			marginVertical: 9,
-		},
-		progressLabel: {
-			flexDirection: 'row',
-			justifyContent: 'space-between',
-		},
-	})
-
-	const [, t] = useLanguage()
-	const [, { showToast }] = useToast()
-	const { handleSubmit, control, errors } = useForm()
-	
-	const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
-
-	const [curVal, setReviewVal] = useState(-1);
-	const [curSuggest, setSuggest] = useState(orderComments?.map(({key, value}: any) => t(key, value)) || REVIEW_ORDER_COMMENTS?.map(({key, value}) => t(key, value)));
-	const [selectedSuggest, setSelectedSuggest] = useState([]);
-	const [comment, setComment] = useState('');
-
-	const categories = {
-		quality: { name: 'quality', show: t('QUALITY', 'Quality of Product') },
-		punctuality: { name: 'punctiality', show: t('PUNCTUALITY', 'Punctuality') },
-		service: { name: 'service', show: t('SERVICE', 'Service') },
-		packaging: { name: 'packaging', show: t('PRODUCT_PACKAGING', 'Product Packaging') }
-	}
-
-	const scores = [
-		{
-			val: 0.5,
-			color: theme.colors.strength_1,
-			text: t('REVIEW_TERRIBLE', 'Terrible')
-		},
-		{
-			val: 1.5,
-			color: theme.colors.strength_2,
-			text: t('REVIEW_BAD', 'Bad')
-		},
-		{
-			val: 2.5,
-			color: theme.colors.strength_3,
-			text: t('REVIEW_OKAY', 'Okay')
-		},
-		{
-			val: 3.7,
-			color: theme.colors.strength_4,
-			text: t('REVIEW_GOOD', 'Good')
-		},
-		{
-			val: 5,
-			color: theme.colors.strength_5,
-			text: t('REVIEW_GREAT', 'Great')
-		},
-	]
-
-	const getProgColor = () => {
-		return scores.find(({val}) => val == curVal)?.color || theme.colors.textNormal;
-	}
-
-	const onSubmit = () => {
-		if (Object.values(stars).some(value => value === 0)) {
-			setAlertState({
-				open: true,
-				content: Object.values(categories).map((category, i) => stars[category.name] === 0 ? `- ${t('CATEGORY_ATLEAST_ONE', `${category.show} must be at least one point`).replace('CATEGORY', category.name.toUpperCase())} ${i !== 3 && '\n'}` : ' ')
-			})
-			return
-		}
-		handleSendReview()
-		setAlertState({ ...alertState, success: true })
-	}
-
-
-	const timer = (ms: number) => new Promise(res => setTimeout(res, ms))
-
-	const setStar = async (val: number) => { // We need to wrap the loop into an async function for this to work
-		setReviewVal(val);
-		const cats = Object.values(categories);
-		for (var i = 0; i < cats.length; i++) {
-			handleChangeRating({ target: { name: cats[i].name, value: val } });
-			// console.log(`Index: ${i} ---- Value: ${val} --- Category: ${cats[i].name}`);
-			await timer(1000);
-		}
-	}
-
-	const handleChangeStars = async (val: number) => {
-    if (val) {
-			setStars({ 
-				...stars, 
-				quality: parseInt(val.toString()), 
-				punctiality: parseInt(val.toString()), 
-				service: parseInt(val.toString()), 
-				packaging: parseInt(val.toString())
-			})
-			setReviewVal(val);
-			// await setStar(val);
-		} 
-  }
-
-	const onSuggestUpdate = useCallback((items) => {
-		if (items.length > 0) {
-			let selected: Array<never> = [];
-			items.map(({label, checked}: never) => {
-				if (checked === true) {
-					selected.push(label);
-				}
-			});
-			setSelectedSuggest(selected);
-		}
-	}, []);
-
-	/**
-	 * 
-	 * @param type next type as 0: skip,1: continue
-	 */
-	const handleNext = (type: number) => {
-		if (type === 1)	handleSubmit(onSubmit);
-		navigation?.navigate('ReviewProduct', {	order: order });
-	}
-
-	useEffect(() => {
-		if (formState.error && !formState?.loading) {
-			showToast(ToastType.Error, formState.result)
-		}
-		if (!formState.loading && !formState.error && alertState.success) {
-			showToast(ToastType.Success, t('REVIEW_SUCCESS_CONTENT', 'Thank you, Review successfully submitted!'))
-			navigation?.navigate('ReviewProduct', {	order: order });
-		}
-	}, [formState.result])
-
-	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			let stringError = '';
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
-
-	useEffect(() => {
-		if (alertState.open) {
-			alertState.content && showToast(
-				ToastType.Error,
-				alertState.content
-			)
-		}
-	}, [alertState.content])
-	
-	useEffect(() => {
-		setStars({ 
-			...stars, 
-			quality: 0, 
-			punctiality: 0, 
-			service: 0, 
-			packaging: 0
-		})
-	}, [])
-
-
-	const getStar = (star: number, index: number, category: string) => {
-		switch (star) {
-			case 0:
-				return (
-					<TouchableOpacity key={index} onPress={() => handleChangeRating({ target: { name: category, value: index + 1 } })}>
-						<MaterialCommunityIcon name='star-outline' size={24} color={theme.colors.backgroundDark} />
-					</TouchableOpacity>
-				)
-			case 1:
-				return (
-					<TouchableOpacity key={index} onPress={() => handleChangeRating({ target: { name: category, value: index + 1 } })}>
-						<MaterialCommunityIcon name='star' size={24} color={theme.colors.primary} />
-					</TouchableOpacity>
-				)
-		}
-	}
-
-	return (
-		<>
-		<Container>
-			<ReviewOrderContainer>
-				<NavBar
-					title={t('REVIEW_ORDER', 'Review Order')}
-					titleAlign={'center'}
-					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-					showCall={false}
-					btnStyle={{ paddingLeft: 0 }}
-					paddingTop={0}
-					isVertical
-					leftImg={theme.images.general.close}
-					leftImageStyle={{width: 16}}
-				/>
-				<BusinessLogo>
-					<OIcon url={order?.logo} width={72} height={72} style={{borderRadius: 7.6}} />
-				</BusinessLogo>
-				<View style={{ paddingBottom: 30 }}>
-					<BlockWrap>
-						<OText mBottom={10}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
-						<ProgressBar
-							progress={curVal / 5}
-							color={getProgColor()}
-							style={styles.progress}
-						/>
-						<View style={styles.progressLabel}>
-							{scores.map(({ val, text, color }, idx) => 
-								<TouchableOpacity key={idx} onPress={() => handleChangeStars(val)}>
-									<OText
-										size={10}
-										color={
-											curVal === val
-												? color
-												: theme.colors.backgroundGray400
-										}>
-										{text}
-									</OText>
-								</TouchableOpacity>
-							)}
-						</View>
-					</BlockWrap>
-					<BlockWrap>
-						<OText mBottom={16}>{t('COMMENTS', 'Comments')}</OText>
-						<View style={{flexShrink: 1}}>
-							<TagSelector items={curSuggest} activeColor={theme.colors.primary} normalColor={'#E9ECEF'} onUpdated={onSuggestUpdate} />
-						</View>
-					</BlockWrap>
-					<FormReviews>
-						<OText mBottom={10}>{t('DO_YOU_WANT_TO_ADD_SOMETHING', 'Do you want to add something?')}</OText>
-						<Controller
-							control={control}
-							defaultValue=''
-							name='comments'
-							render={({ onChange }: any) => (
-								<OInput
-									name='comments'
-									placeholder={t('COMMENTS', 'Comments')}
-									onChange={(val: string) => {
-										onChange(val)
-										handleChangeInput(val)
-									}}
-									style={styles.inputTextArea}
-									multiline
-									inputStyle={{fontSize: 12}}
-								/>
-							)}
-						/>
-					</FormReviews>
-				</View>
-				<Spinner visible={formState.loading} />
-			</ReviewOrderContainer>
-		</Container>
-		<OBottomStickBar 
-			rightBtnStyle={{borderRadius: 7.6, height: 44}} 
-			rightAction={() => handleNext(0)}
-			leftAction={() => handleNext(1)}
-		/>
-		</>
-	)
-}
-
-
-export const ReviewOrder = (props: ReviewOrderParams) => {
-	const reviewOrderProps = {
-		...props,
-		UIComponent: ReviewOrderUI
-	}
-	return <ReviewOrderController {...reviewOrderProps} />
-}

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

@@ -1,46 +0,0 @@
-import styled from 'styled-components/native'
-
-export const ReviewOrderContainer = styled.View`
-  width: 100%;
-  flex: 1;
-`
-export const ReviewOrderTitle = styled.View`
-
-`
-
-export const BusinessLogo = styled.View`
-  margin-vertical: 5px;
-  align-items: center;
-  box-shadow: 0 1px 2px #ddd;
-  border-radius: 7.6px;
-  margin-bottom: 20px;
-`
-
-export const FormReviews = styled.View`
-  flex: 1;
-`
-
-export const Category = styled.View`
-  padding: 10px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.secundaryContrast};
-  flex-direction: row;
-  justify-content: space-between;
-  margin-vertical: 5px;
-  border-radius: 10px;
-`
-
-export const Stars = styled.View`
-  flex-direction: row;
-`
-
-export const BlockWrap = styled.View`
-  margin-vertical: 16px;
-  padding-bottom: 20px;
-`;
-
-export const CommentItem = styled.TouchableOpacity`
-  padding: 3px 10px;
-  border-radius: 20px;
-  min-height: 24px;
-`;