ordering-ui-react-native 0.12.57 → 0.12.58

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

@@ -1,275 +0,0 @@
-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/franchises/src/components/ReviewProduct/styles.tsx

@@ -1,53 +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 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/franchises/src/components/SearchBar/index.tsx

@@ -1,139 +0,0 @@
-import React, { useState } from 'react'
-import { StyleSheet, View, TouchableOpacity } from 'react-native'
-import { OInput, OButton } from '../shared'
-import { useLanguage } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import Icon from 'react-native-vector-icons/Feather'
-import { useEffect } from 'hoist-non-react-statics/node_modules/@types/react';
-
-export const SearchBar = (props: any) => {
-	const {
-		placeholder,
-		onSearch,
-		onCancel,
-		onHandleFilter,
-		lazyLoad,
-		isCancelButtonShow,
-		isCancelXButtonShow,
-		noBorderShow,
-		borderStyle,
-		height,
-		inputStyle,
-		inputWrapStyle,
-		showFilter
-	} = props
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		container: {
-			flex: 1,
-			flexDirection: 'row',
-			alignItems: 'center',
-			justifyContent: 'space-between',
-			padding: 1,
-			maxHeight: 47,
-			height: 47,
-			borderBottomColor: theme.colors.border,
-			borderBottomWidth: 1,
-		},
-		borderStyle: {
-			borderColor: theme.colors.primary,
-			borderWidth: 1,
-			borderRadius: 7.6,
-		},
-		inputStyle: {
-			backgroundColor: theme.colors.clear,
-			minHeight: 44,
-			paddingTop: 0,
-			borderRadius: 0,
-		},
-		buttonStyle: {
-			maxHeight: 40,
-			paddingRight: 5,
-			backgroundColor: 'red'
-		},
-		actionWrap: {
-			flexDirection: 'row', 
-			position: 'absolute', 
-			end: -14
-		},
-		iconBtn: {
-			minWidth: 30,
-			minHeight: 26
-		}
-	})
-
-
-	const [, t] = useLanguage()
-	const [searchValue, setSearchValue] = useState('');
-
-	const handleClear = () => {
-		onSearch('')
-		setSearchValue('')
-	}
-
-	let timeout: null | any = null
-	const onChangeSearch = (e: any) => {
-		setSearchValue(e)
-		if (!lazyLoad) {
-			onSearch(e)
-		} else {
-			clearTimeout(timeout)
-			timeout = setTimeout(function () {
-				onSearch(e)
-			}, 750)
-		}
-	}
-
-	return (
-		<View style={{...styles.container, height: height }}>
-			<OInput
-				value={searchValue}
-				onChange={onChangeSearch}
-				style={{...styles.inputStyle, ...inputWrapStyle}}
-				placeholder={placeholder}
-				icon={theme.images.general.search}
-				iconStyle={{ width: 17 }}
-				returnKeyType='done'
-				inputStyle={inputStyle}
-			/>
-			{isCancelButtonShow && (
-				<OButton
-					imgRightSrc=''
-					text={t('CANCEL', 'Cancel')}
-					bgColor='transparent'
-					borderColor={theme.colors.lightGray}
-					style={styles.buttonStyle}
-					onClick={onCancel || handleClear}
-				/>
-			)}
-			<View style={styles.actionWrap}>
-				{isCancelXButtonShow && searchValue.length > 0 && (
-					<TouchableOpacity
-						onPress={onCancel || handleClear}
-						style={styles.iconBtn}
-					>
-						<Icon
-							name='x-circle'
-							color={theme.colors.disabled}
-							size={16}
-						/>
-					</TouchableOpacity>
-				)}
-				{showFilter && onHandleFilter && (
-					<TouchableOpacity
-						onPress={onHandleFilter}
-						style={styles.iconBtn}
-					>
-						<Icon
-							name='filter'
-							color={theme.colors.disabled}
-							size={16}
-						/>
-					</TouchableOpacity>
-				)}
-			</View>
-		</View>
-	)
-}