ordering-ui-react-native 0.11.54 → 0.11.58

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

@@ -0,0 +1,275 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { ReviewProduct as ReviewProductController, useLanguage, ToastType, useToast } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { useForm, Controller } from 'react-hook-form'
+
+import {
+	ReviewOrderContainer,
+	BusinessLogo,
+	FormReviews,
+	Category,
+	Stars,
+	BlockWrap,
+	CommentItem,
+	IconBtn,
+	HWrapper
+} 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 { ReviewProductParams } from '../../types'
+import { REVIEW_PRODUCT_COMMENTS } from '../../config/constants';
+import TagSelector from '../TagSelector';
+import OBottomStickBar from '../shared/OBottomStickBar';
+import { Container } from '../../..';
+
+const SingleProduct = (props: any) => {
+	const {
+		handleChangeFormState,
+    formState,
+		product
+	} = props;
+	const {id, name} = product;
+
+	const theme = useTheme();
+	const [, t] = useLanguage();
+	const { control, errors } = useForm()
+
+	const [suggests] = useState(REVIEW_PRODUCT_COMMENTS.map(({key, value}) => t(key, value)));
+	const [comments, setComments] = useState([])
+  const [extraComment, setExtraComment] = useState('')
+	const [isExtra, setShowExtra] = useState(false);
+	const [isLike, setLike] = useState(0);
+	
+	const singleStyle = StyleSheet.create({
+		hWrapper: {
+			flexDirection: 'row',
+			alignItems: 'center'
+		},
+		inputTextArea: {
+			borderColor: theme.colors.border,
+			borderRadius: 7.6,
+			marginVertical: 10,
+			height: 100,
+			alignItems: 'flex-start',
+			paddingVertical: 12,
+			fontSize: 10,
+			marginBottom: 30
+		},
+	})
+
+	const onSuggestUpdate = useCallback((items) => {
+		if (items.length > 0) {
+			let selected: Array<never> = [];
+			items.map(({label, checked}: never) => {
+				if (checked === true) {
+					selected.push(label);
+				}
+			});
+			setComments(selected);
+		}
+	}, []);
+
+	useEffect(() => {
+    if (comments?.length === 0 && !extraComment && formState.changes?.length === 0 && isLike) return
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => (_comments += comment + '. '))
+    }
+    const _comment = _comments + extraComment
+    let found = false
+    const _changes = formState.changes.map((item: any) => {
+      if (item?.id === product?.id) {
+        found = true
+        return {
+          id: product?.id,
+          comment: _comment,
+          qualification: isLike ? 5 : 1
+        }
+      }
+      return item
+    })
+    if (!found) {
+      _changes.push({
+        product_id: product?.id,
+        comment: _comment,
+        qualification: isLike ? 5 : 1
+      })
+    }
+    handleChangeFormState && handleChangeFormState(_changes)
+  }, [comments, extraComment, isLike])
+
+
+	return (
+		<BlockWrap key={id}>
+			<HWrapper style={{justifyContent: 'space-between', marginBottom: 14}}>
+				<OText size={12} lineHeight={18}>{name}</OText>
+				<HWrapper>
+					<IconBtn onPress={() => setLike(5)}>
+						<OIcon src={theme.images.general.thumbs_up} width={16} color={isLike == 5 ? theme.colors.primary : theme.colors.textSecondary} />
+					</IconBtn>
+					<IconBtn onPress={() => setLike(1)}>
+						<OIcon src={theme.images.general.thumbs_up} width={16} color={isLike == 1 ? theme.colors.primary : theme.colors.textSecondary} style={{transform: [{rotate: '180deg'}]}} />
+					</IconBtn>
+				</HWrapper>
+			</HWrapper>
+			<View style={{flexShrink: 1}}>
+				<TagSelector 
+					items={suggests} 
+					activeColor={theme.colors.primary} normalColor={'#E9ECEF'} 
+					onUpdated={onSuggestUpdate}
+				/>
+			</View>
+			<TouchableOpacity onPress={() => setShowExtra(!isExtra)} style={{marginBottom: 16}}>
+				<OText size={10} lineHeight={15} 
+					style={{textDecorationLine: 'underline', alignSelf: 'center'}}
+					color={isExtra ? theme.colors.primary : theme.colors.textSecondary}
+				>
+					{t('ADDITIONAL_COMMENTS', 'Additional comments')}
+				</OText>
+			</TouchableOpacity>
+			{isExtra && 
+				<FormReviews>
+					<OText size={12} lineHeight={18}>{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)
+									setExtraComment(val)
+								}}
+								style={singleStyle.inputTextArea}
+								multiline
+								inputStyle={{fontSize: 12}}
+							/>
+						)}
+					/>
+				</FormReviews>
+			}
+		</BlockWrap>
+	)
+}
+
+export const ReviewProductUI = (props: ReviewProductParams) => {
+	const {
+		order,
+		products,
+    formState,
+    closeReviewProduct,
+    handleSendProductReview,
+    setIsProductReviewed,
+		handleChangeFormState,
+		navigation
+	} = props
+
+	const sorted = products?.map((p: any) => {
+		return {
+			...p,
+			like: 0,
+			showExtra: false,
+			comments: ''
+		}
+	})
+
+	const theme = useTheme();
+
+	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 [allProducts, setAllProducts] = useState(sorted);
+
+	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
+		// }
+    handleSendProductReview()
+		setAlertState({ ...alertState, success: true })
+	}
+
+	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('ReviewDriver', {	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])
+
+	return (
+		<>
+		<Container>
+			<ReviewOrderContainer>
+				<NavBar
+					title={t('REVIEW_PRODUCT', 'Review product')}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					paddingTop={0}
+					isVertical
+					leftImg={theme.images.general.close}
+					leftImageStyle={{width: 16}}
+				/>
+				<View style={{ paddingBottom: 30 }}>
+					{allProducts && allProducts.map((p: any) =>
+						<SingleProduct key={p.id} {...props} product={p} />
+					)}
+				</View>
+				<Spinner visible={formState.loading} />
+			</ReviewOrderContainer>
+		</Container>
+		<OBottomStickBar 
+			rightBtnStyle={{borderRadius: 7.6, height: 44}} 
+			rightAction={handleSubmit(onSubmit)}
+			leftAction={() => navigation?.navigate('ReviewDriver', {	order: order })}
+		/>
+		</>
+	)
+}
+
+
+export const ReviewProduct = (props: ReviewProductParams) => {
+	const reviewProductProps = {
+		...props,
+		UIComponent: ReviewProductUI
+	}
+	return <ReviewProductController {...reviewProductProps} />
+}

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

@@ -0,0 +1,53 @@
+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 HWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+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;
+`;
+export const IconBtn = styled.TouchableOpacity`
+  padding-horizontal: 7px;
+`;

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

@@ -27,17 +27,17 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
     textStyle: {
       flex: 1,
     },
-    soldOutBackgroundStyle: {
-      backgroundColor: '#B8B8B8',
-    },
     soldOutTextStyle : {
-      textTransform: 'uppercase'
+      textTransform: 'capitalize',
+      color: 'white',
+      fontSize: 12,
+      lineHeight: 18
     },
     productStyle: {
       width: 100,
       height: 100,
       borderRadius: 3,
-		marginTop: 5
+		  marginTop: 5
     },
 	 addBtn: {
 		 position: 'absolute',
@@ -72,13 +72,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
   }, [product]);
 
   return (
-    <CardContainer style={[styles.container, (isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle]}
+    <CardContainer style={styles.container}
       onPress={() => onProductClick(product)}
 		activeOpacity={0.8}
     >
       <OIcon
         url={optimizeImage(product?.images, 'h_200,c_limit')}
-        style={styles.productStyle}
+        style={{...styles.productStyle, opacity: (isSoldOut || maxProductQuantity <= 0) ? 0.4 : 1}}
       />
       <CardInfo>
         <OText color={theme.colors.textPrimary} style={{...theme.labels.normal, marginTop: 9}}>{parsePrice(product?.price)}</OText>
@@ -92,7 +92,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 
       {(isSoldOut || maxProductQuantity <= 0) && (
         <SoldOut>
-          <OText size={10} weight='bold' style={styles.soldOutTextStyle}>{t('SOLD_OUT', 'SOLD OUT')}</OText>
+          <OText size={10} style={styles.soldOutTextStyle}>{t('SOLD_OUT', 'SOLD OUT')}</OText>
         </SoldOut>
       )}
     </CardContainer>

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

@@ -17,9 +17,8 @@ export const CardInfo = styled.View`
 `
 export const SoldOut = styled.View`
   position: absolute;
-  background: ${(props: any) => props.theme.colors.lightGray} 0% 0% no-repeat padding-box;
-  border-radius: 23px;
-  padding: 5px 10px;
-  top: 7px;
-  right: 6px;
+  background: ${(props: any) => props.theme.colors.black} 0% 0% no-repeat padding-box;
+  padding: 3px 9px;
+  top: 91px;
+  left: 10px;
 `

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

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
+import { useTheme } from 'styled-components/native';
+// import { TouchableOpacity } from 'react-native-gesture-handler';
+
+interface TProps {
+	items: Array<string>;
+	onUpdated?: (items: Array<TItem>) => void;
+	activeColor?: string;
+	normalColor?: string; 
+}
+
+interface TItem {
+	id: number;
+	label: string;
+	checked: boolean;
+}
+
+const TagSelector = (props: TProps) => {
+	const { items, onUpdated, activeColor, normalColor } = props;
+	const theme = useTheme();
+	const [tags, setTags] = useState<TItem[]>([]);
+
+	const onCheck = (tag: TItem, remove?: boolean) => {
+		let temp = [...tags];
+		temp[tag.id].checked = remove ? !temp[tag.id].checked : true;
+		setTags(temp);
+	}
+	
+	useEffect(() => {
+		const tagItems = items.map((str, idx) => 
+			{
+				return {
+					id: idx,
+					label: str,
+					checked: false,
+				}	
+			}
+		)
+		setTags(tagItems);
+	}, [items]);
+
+	useEffect(() => {
+		if (onUpdated) onUpdated(tags);
+	}, [tags]);
+
+	return (
+		<View style={tcStyles.wrapper}>
+			{tags.map((t, idx) => 
+				<TouchableOpacity key={idx} activeOpacity={0.8} onPress={() => onCheck(t)} 
+					style={{...tcStyles.item, backgroundColor: t.checked === true ? activeColor || 'blue' : normalColor || '#eee'}}>
+					<Text style={{fontSize: 10, color: t.checked ? 'white' : 'black'}}>{t.label}</Text>
+					{t.checked &&
+						<TouchableOpacity onPress={() => onCheck(t, true)} style={tcStyles.remove}>
+							<Image source={theme.images.general.close} style={tcStyles.removeIcon} />
+						</TouchableOpacity>
+					}
+				</TouchableOpacity>
+			)}
+		</View>
+	)
+}
+
+const tcStyles = StyleSheet.create({
+	wrapper: {
+		flexDirection: 'row',
+		flexShrink: 1,
+		flexWrap: 'wrap'
+	},
+	item: {
+		borderRadius: 20,
+		paddingHorizontal: 12,
+		paddingVertical: 5,
+		marginEnd: 10,
+		backgroundColor: '#EEE',
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between',
+		marginBottom: 14,
+		minHeight: 24
+	},
+	remove: {
+		padding: 2,
+		marginStart: 12,
+	},
+	removeIcon: {
+		width: 7,
+		height: 7,
+		resizeMode: 'contain',
+		tintColor: 'white'
+	},
+});
+
+export default TagSelector;

package/themes/instacart/src/components/shared/OBottomStickBar.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled, { useTheme } from 'styled-components/native';
+import { OButton, OText } from '.';
+import { useLanguage } from 'ordering-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ViewStyle } from 'react-native';
+
+const BWrap = styled.View`
+	position: absolute;
+	min-height: 69px;
+	background-color: white;
+	width: 100%;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding-horizontal: 40px;
+	padding-vertical: 12px;
+	border-top-width: 1px;
+	border-top-color: ${(props: any) => props.theme.colors.border};
+`;
+
+const TxtButton = styled.TouchableOpacity`
+
+`;
+
+interface Props {
+	rightText?: string;
+	rightAction?: any;
+	leftText?: string;
+	leftAction?: any;
+	customLeftView?: any;
+	customRightView?: any;
+	rightBtnStyle?: ViewStyle;
+}
+
+const OBottomStickBar = (props: Props) => {
+	const [, t] = useLanguage();
+	const { rightText, rightAction, customRightView, leftText, leftAction, customLeftView, rightBtnStyle } = props;
+	const { bottom } = useSafeAreaInsets();
+	const theme = useTheme();
+
+	return (
+		<BWrap style={{bottom: 0, paddingBottom: bottom}}>
+			{customLeftView ? customLeftView : 
+				<TxtButton onPress={leftAction ? leftAction : () => {}}>
+					<OText size={16} weight={'bold'} color={theme.colors.textSecondary}>{leftText || t('SKIP', 'Skip')}</OText>
+				</TxtButton>
+			}
+			{customRightView ? customRightView :
+				<OButton 
+					onClick={rightAction ? rightAction : () => {}}
+					text={rightText || t('CONTINUE', 'Continue')} textStyle={{fontSize: 14, color: 'white', marginEnd: 32}} 
+					style={{paddingStart: 10, paddingEnd: 10, ...rightBtnStyle}}
+					imgRightSrc={theme.images.general.arrow_left}
+					imgRightStyle={{tintColor: 'white', transform: [{ rotate: '180deg' }]}}
+				/>
+			}
+		</BWrap>
+	)
+}
+
+export default OBottomStickBar;

package/themes/instacart/src/config/constants.tsx

@@ -2,4 +2,28 @@ export const USER_TYPE = {
 	BUSINESS: 'business',
 	CUSTOMER: 'customer',
 	DRIVER: 'driver'
-}
+}
+
+export const REVIEW_ORDER_COMMENTS = [
+	{ key: 'IT_WASNT_TASTY', value: 'It wasn\'t tasty' },
+	{ key: 'IT_DOESNT_PACK_WELL', value: 'It doesn\'t pack well' },
+	{ key: 'IT_ISNT_WORTH_WHAT_IT_COASTS', value: 'It isn\'t worth what it coasts' },
+	{ key: 'TO_SLOW', value: 'To slow' },
+	{ key: 'SUSTAINABLE_PACKAGING_WASNT_USED', value: 'Sustainable packaging wasn\'t used' },
+	{ key: 'THEY_DID_NOT_FOLLOW_THE_ORDER_NOTES', value: 'They didn\'t follow the order notes' }
+]
+
+export const REVIEW_PRODUCT_COMMENTS = [
+	{ key: 'IT_WASNT_TASTY', value: 'It wasn\'t tasty'},
+	{ key: 'SMALL_PORTION', value: 'Small portion'},
+	{ key: 'WET_OR_LEAKY', value: 'Wet or leaky'},
+	{ key: 'SLOPPY_PRESENTATION', value: 'Sloppy presentation'},
+	{ key: 'COLD_OR_MELTED', value: 'Cold or melted'}
+]
+
+export const REVIEW_DRIVER_COMMENTS = [
+	{ key: 'FAST_AND_EFFICIENT', value: 'Fast and efficient'},
+	{ key: 'DELIVERY_PERFECT', value: 'Delivery perfect'},
+	{ key: 'EXCELLENT_COMMUNICATION', value: 'Excellent communication'},
+	{ key: 'CORDIAL_SERVICE', value: 'Cordial service'},
+]

package/themes/instacart/src/types/index.tsx

@@ -296,13 +296,36 @@ export interface ProductItemAccordionParams {
 	isExpanded?: boolean,
 }
 export interface ReviewOrderParams {
-	order?: { orderId: number, businessId: number, logo: string },
+	order?: { orderId: number, businessId: number, logo: string, products: Array<{id: number, name: string}> },
 	stars?: any,
 	handleChangeInput?: any,
 	handleChangeRating?: any,
 	handleSendReview?: any,
 	formState?: any,
-	navigation?: any
+	navigation?: any,
+	route?: any,
+	orderComments?: any,
+	setStars?: any
+}
+export interface ReviewProductParams {
+	order?: any,
+	products?: Array<{id: number, name: string}>,
+	formState?: any,
+	navigation?: any,
+	handleChangeFormState?: any,
+	closeReviewProduct?: any,
+	handleSendProductReview?: any,
+	setIsProductReviewed?: any
+}
+export interface ReviewDriverParams {
+	dirverReviews?: any,
+	order?: any,
+	formState?: any,
+	setDriverReviews?: any,
+	closeReviewDriver?: any,
+	setIsDriverReviewed?: any,
+	handleSendDriverReview?: any,
+	navigation?: any,
 }
 export interface MessagesParams {
 	type?: string,

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

@@ -90,6 +90,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 			height: 50,
 			maxHeight: 50,
 			minHeight: 50,
+			flex: 1,
 		},
 		textAreaStyles: {
 			borderColor: theme.colors.border,
@@ -495,7 +496,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 	}, [orderState.loading]);
 
 	return (
-		<ScrollView>
+		<ScrollView
+			keyboardShouldPersistTaps='always'
+			listViewDisplayed={false}
+		>
 			<NavBar
 				title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
 				titleAlign={'center'}
@@ -504,7 +508,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				paddingTop={20}
 				btnStyle={{ paddingLeft: 40 }}
 				titleStyle={{ fontSize: 14 }}
-				titleWrapStyle={{ flexBasis: '75%' }}
+				titleWrapStyle={{ paddingHorizontal: 0 }}
 			/>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
 				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>

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

@@ -60,8 +60,9 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 
 	return (
 		<Container
-			isIos={Platform.OS === 'ios'}
-			style={{ paddingBottom: bottom + 16 }}>
+			style={{
+				paddingBottom: Platform.OS === 'ios' ? 0 : bottom + 16
+			}}>
 
 			<View style={styles.infoCont}>
 				<OText color={theme.colors.textNormal} size={16} lineHeight={24} weight={'600'} mRight={20}>

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

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/native'
+import styled from 'styled-components/native'
 
 export const Container = styled.View`
   position: absolute;
@@ -21,6 +21,6 @@ export const Button = styled.TouchableOpacity`
   align-items: center;
   border-radius: 7.6px;
   height: 44px;
-  max-height; 44px;
+  max-height: 44px;
   padding-horizontal: 20px;
 `