ordering-ui-react-native 0.11.54 → 0.11.58

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

@@ -1,206 +1,325 @@
-import React, { useState, useEffect } from 'react'
-import { OrderReview as ReviewOrderController, useLanguage, useToast, ToastType } from 'ordering-components/native'
+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
+	ReviewOrderContainer,
+	BusinessLogo,
+	FormReviews,
+	Category,
+	Stars,
+	BlockWrap,
+	CommentItem
 } from './styles'
 import { OButton, OIcon, OInput, OText } from '../shared'
-import { TouchableOpacity, StyleSheet,View } from 'react-native';
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
 import NavBar from '../NavBar'
 import Spinner from 'react-native-loading-spinner-overlay'
 
 import { ReviewOrderParams } from '../../types'
-import { useTheme } from 'styled-components/native'
+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
-  } = props
-
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    inputTextArea: {
-      borderColor: theme.colors.secundaryContrast,
-      borderRadius: 10,
-      marginVertical: 20,
-      height: 100,
-      alignItems: 'flex-start'
-    }
-  })
-
-  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 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 {
+		order,
+		stars,
+		handleChangeInput,
+		handleChangeRating,
+		handleSendReview,
+		formState,
+		navigation,
+		orderComments,
+		setStars,
+	} = props
 
-  const onSubmit = () => {
-    if (Object.values(stars).some((value: any) => value === 0)) {
-      setAlertState({
-        open: true,
-        content: Object.values(categories).map((category: any, i: any) => 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 theme = useTheme();
 
-  const getStarArr = (rating: number) => {
-    switch (rating) {
-      case 0:
-        return [0, 0, 0, 0, 0];
-      case 1:
-        return [1, 0, 0, 0, 0];
-      case 2:
-        return [1, 1, 0, 0, 0];
-      case 3:
-        return [1, 1, 1, 0, 0];
-      case 4:
-        return [1, 1, 1, 1, 0];
-      case 5:
-        return [1, 1, 1, 1, 1];
-      default:
-        return [0, 0, 0, 0, 0];
-    }
-  }
+	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))
 
-  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?.canGoBack() && navigation.goBack()
-    }
-  }, [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])
-
-
-  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>
-        )
-    }
+	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);
+		} 
   }
 
-  return (
-    <ReviewOrderContainer>
-      <NavBar
-        title={t('REVIEW_ORDER', 'Review your Order')}
-        titleAlign={'center'}
-        onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-        showCall={false}
-        btnStyle={{ paddingLeft: 0 }}
-        paddingTop={0}
-      />
-      <BusinessLogo>
-        <OIcon
-          url={order?.logo}
-          width={100}
-          height={100}
-        />
-      </BusinessLogo>
-      <View style={{flex: 1, justifyContent: 'flex-end'}}>
-
-      <FormReviews>
-        {Object.values(categories).map((category: any) => (
-          <Category
-            key={category.name}
-          >
-            <OText>{category.show}</OText>
-            <Stars>
-              {getStarArr(stars[category?.name]).map((star, index) => getStar(star, index, category.name))}
-            </Stars>
-          </Category>
-        ))}
-        <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
-              bgColor={theme.colors.inputDisabled}
-            />
-          )}
-        />
-      </FormReviews>
-      <OButton
-        textStyle={{ color: theme.colors.white }}
-        style={{ marginTop: 20 }}
-        text={t('SAVE', 'Save')}
-        imgRightSrc=''
-        onClick={handleSubmit(onSubmit)}
-        />
-        </View>
-      <Spinner visible={formState.loading} />
-    </ReviewOrderContainer>
-  )
+	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} />
+	const reviewOrderProps = {
+		...props,
+		UIComponent: ReviewOrderUI
+	}
+	return <ReviewOrderController {...reviewOrderProps} />
 }

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

@@ -4,22 +4,26 @@ export const ReviewOrderContainer = styled.View`
   width: 100%;
   flex: 1;
 `
-export const ReviewOrderTitle = styled.View``
+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;
-  height: 100%;
 `
 
 export const Category = styled.View`
   padding: 10px;
   border-width: 1px;
-  border-color: ${({ colors }: any) => colors.secundaryContrast};
+  border-color: ${(props: any) => props.theme.colors.secundaryContrast};
   flex-direction: row;
   justify-content: space-between;
   margin-vertical: 5px;
@@ -29,3 +33,14 @@ export const Category = styled.View`
 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;
+`;