ordering-ui-react-native 0.17.95 → 0.17.96-release

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

@@ -9,8 +9,7 @@ import {
 	I18nManager,
 	SafeAreaView,
 	Platform,
-	Button,
-	Vibration
+	Button
 } from 'react-native';
 import {
 	ProductForm as ProductOptions,
@@ -20,7 +19,8 @@ import {
 	useUtils,
 	ToastType,
 	useToast,
-	useConfig
+	useConfig,
+	useEvent
 } from 'ordering-components/native';
 import uuid from 'react-native-uuid';
 import { useTheme } from 'styled-components/native';
@@ -30,6 +30,7 @@ import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import YoutubePlayer from "react-native-youtube-iframe"
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	WrapHeader,
@@ -54,7 +55,7 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
-import { orderTypeList } from '../../utils';
+import { orderTypeList, vibrateApp } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -81,6 +82,7 @@ export const ProductOptionsUI = (props: any) => {
 
 	const theme = useTheme();
 	const [, { showToast }] = useToast()
+	const [events] = useEvent()
 
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
@@ -135,7 +137,8 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		slide1: {
 			flex: 1,
-			alignItems: 'center'
+			alignItems: 'center',
+			width: '100%',
 		},
 		mainSwiper: {
 			height: 258,
@@ -174,7 +177,7 @@ export const ProductOptionsUI = (props: any) => {
 			marginTop: 10
 		},
 		wrapperNavbar: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 30,
 			paddingTop: 0,
 		}
 	});
@@ -203,9 +206,19 @@ export const ProductOptionsUI = (props: any) => {
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
+	const [viewedProduct, setViewedProduct] = useState<any>(null)
+	const [showTitle, setShowTitle] = useState(false)
 
 	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
-  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+	const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -222,7 +235,7 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-		Vibration.vibrate()
+		vibrateApp()
 		if (!productCart.quantity) {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_REQUIRED', 'The quantity field is required').replace('_attribute_', t('PRODUCT_POTIONS_QUANTITY', 'Quantity')))
 			return
@@ -359,12 +372,8 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
-	const handleScroll = ({ nativeEvent: { contentOffset, layoutMeasurement } }: any) => {
-
-		const _topOption = Object.keys(optionLayout).find(((option: any) => Math.abs(contentOffset?.y - layoutMeasurement?.height - optionLayout[option]?.y) < 20))
-		if (_topOption) {
-			const _topOptionId = Number(_topOption.replace('id:', ''))
-		}
+	const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+		setShowTitle(contentOffset.y > 30)
 	}
 
 	const handleGoBack = navigation?.canGoBack()
@@ -481,9 +490,9 @@ export const ProductOptionsUI = (props: any) => {
 								: t('LOGIN_SIGNUP', 'Login / Sign Up')
 						}
 						imgRightSrc=""
-						textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+						textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
 						style={{
-							height: 44,
+							height: 42,
 							borderColor: theme.colors.primary,
 							backgroundColor: theme.colors.white,
 							paddingLeft: 0,
@@ -495,10 +504,10 @@ export const ProductOptionsUI = (props: any) => {
 					<TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
 						{actionStatus?.loading ? (
 							<Placeholder Animation={Fade}>
-								<PlaceholderLine width={60} height={20} />
+								<PlaceholderLine height={20} />
 							</Placeholder>
 						) : (
-							<OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+							<OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('AS_GUEST_USER', 'As guest user')}</OText>
 						)}
 					</TouchableOpacity>
 				)}
@@ -515,21 +524,43 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		if (!product?.id || product?.id === viewedProduct?.id) return
+		setViewedProduct(product)
+		events.emit('product_viewed', product)
+	}, [product?.id, viewedProduct])
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<View style={styles.wrapperNavbar}>
-				<NavBar
-					onActionLeft={() => handleGoBack()}
-					showCall={false}
-					btnStyle={{ paddingLeft: 0 }}
-					paddingTop={4}
-				/>
+				<TopHeader>
+					<>
+						<TopActions onPress={() => handleGoBack()}>
+							<IconAntDesign
+								name='arrowleft'
+								size={26}
+							/>
+						</TopActions>
+						{showTitle && (
+							<OText
+								size={16}
+								style={{ flex: 1, textAlign: 'center' }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+							>
+								{product?.name}
+							</OText>
+						)}
+					</>
+				</TopHeader>
 			</View>
 			{!error && (
 				<ScrollView
 					ref={scrollViewRef}
 					contentContainerStyle={{ paddingBottom: 80 }}
 					stickyHeaderIndices={[2]}
+					scrollEventThrottle={100}
 					onScroll={handleScroll}
 				>
 					<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
@@ -657,7 +688,7 @@ export const ProductOptionsUI = (props: any) => {
 						)}
 					</WrapHeader>
 					<ProductSummary
-						ph={isChewLayout ? 20 : 40}
+						ph={isChewLayout ? 20 : 30}
 						onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}
 					>
 						<ProductTitle>
@@ -727,6 +758,7 @@ export const ProductOptionsUI = (props: any) => {
 						</ProductDescription>
 						<ScrollView
 							horizontal
+							scrollEventThrottle={100}
 							showsHorizontalScrollIndicator={false}
 							contentContainerStyle={{ paddingBottom: 30 }}
 						>
@@ -754,12 +786,13 @@ export const ProductOptionsUI = (props: any) => {
 					{(!loading && product) && (
 						<ExtraOptionWrap
 							horizontal
+							scrollEventThrottle={100}
 							showsHorizontalScrollIndicator={false}
 							style={{
 								marginBottom: 20,
 								borderBottomWidth: 1,
 								borderBottomColor: theme.colors.border,
-								marginHorizontal: isChewLayout ? 20 : 30,
+								marginHorizontal: 20,
 								backgroundColor: theme.colors.backgroundPage,
 							}}
 						>
@@ -833,7 +866,7 @@ export const ProductOptionsUI = (props: any) => {
 						</>
 					) : (
 						<ProductEditions
-							style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+							style={{ paddingHorizontal: isChewLayout ? 20 : 30 }}
 							onLayout={(event: any) => {
 								setEditionsLayoutY(event.nativeEvent.layout?.y)
 							}}
@@ -880,12 +913,7 @@ export const ProductOptionsUI = (props: any) => {
 																}}>
 																{option?.suboptions?.sort((a: any, b: any) => a.rank - b.rank).map(
 																	(suboption: any) => {
-																		const currentState =
-																			productCart.options[
-																				`id:${option.id}`
-																			]?.suboptions[
-																			`id:${suboption.id}`
-																			] || {};
+																		const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {};
 																		const balance =
 																			productCart.options[
 																				`id:${option.id}`
@@ -900,6 +928,7 @@ export const ProductOptionsUI = (props: any) => {
 																				balance={balance}
 																				option={option}
 																				suboption={suboption}
+																				image={suboption.image}
 																				state={currentState}
 																				disabled={
 																					isSoldOut ||

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

@@ -8,8 +8,8 @@ export const WrapHeader = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
-  padding-horizontal: 30px;
-  width: 100px;
+  min-width: 30px;
+  padding-right: 15px;
 `;
 
 export const TopHeader = styled.View`
@@ -70,7 +70,7 @@ export const ProductActions = styled.View`
   position: absolute;
   bottom: 0px;
   padding-top: ${(props: any) => props.ios ? '20px' : '0'};
-  padding-horizontal: 40px;
+  padding-horizontal: 30px;
   padding-vertical: 20px;
   width: 100%;
   flex-direction: ${(props: any) => props.isColumn ? 'column' : 'row'};

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

@@ -77,6 +77,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	const [isServiceOpen, setIsServiceOpen] = useState(false)
 	// const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
 	// const [setRotate, setRotateState] = useState({ angle: new Animated.Value(0) })
+	const [productQuantity, setProductQuantity] = useState(product.quantity.toString())
 
 	const productInfo = () => {
 		if (isCartProduct) {
@@ -107,19 +108,20 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	/* const toggleAccordion = () => {
 		if ((!product?.valid_menu && isCartProduct)) return
 		if (isActive) {
-		  Animated.timing(setHeight.height, {
+			Animated.timing(setHeight.height, {
 			 toValue: 100,
 			 duration: 500,
 			 easing: Easing.linear,
 			 useNativeDriver: false,
-		  }).start()
+			}).start()
 		} else {
-		  setHeightState({height: new Animated.Value(0)})
+			setHeightState({height: new Animated.Value(0)})
 		}
 	 }*/
 
 	const handleChangeQuantity = (value: string) => {
 		if (!orderState.loading) {
+			setProductQuantity(value)
 			if (parseInt(value) === 0) {
 				onDeleteProduct && onDeleteProduct(product)
 			} else {
@@ -134,7 +136,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	}
 
 	/*useEffect(() => {
-	  toggleAccordion()
+		toggleAccordion()
 	}, [isActive])*/
 
 	const productOptions = getProductMax && [...Array(getProductMax(product) + 1),].map((_: any, opt: number) => {
@@ -209,7 +211,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 											<RNPickerSelect
 												items={productOptions}
 												onValueChange={handleChangeQuantity}
-												value={product.quantity.toString()}
+												value={productQuantity}
 												style={pickerStyle}
 												useNativeAndroidPickerStyle={false}
 												placeholder={{}}
@@ -287,7 +289,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 							)}
 							{productInfo().options.length > 0 && (
 								<ProductOptionsList>
-									{productInfo().options.map((option: any, i: number) => (
+									{productInfo().options.sort((a: any, b: any) => a.rank - b.rank).map((option: any, i: number) => (
 										<ProductOption key={option.id + i}>
 											<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
 											{option.suboptions.map((suboption: any) => (

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

@@ -7,6 +7,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import FastImage from 'react-native-fast-image';
 
 import {
 	Container,
@@ -14,7 +15,8 @@ import {
 	QuantityControl,
 	Checkbox,
 	PositionControl,
-	Circle
+	Circle,
+	Logo
 } from './styles'
 import { OIcon, OText } from '../shared'
 
@@ -29,7 +31,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		setIsScrollAvailable
+		setIsScrollAvailable,
+		image
 	} = props
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -37,12 +40,23 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
-	const [{ parsePrice }] = useUtils()
+	const [{ parsePrice, optimizeImage }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
-	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-	const iconsSize = isChewLayout ? 20 : 16
+	const iconsSize = 20
+
+	const styles = StyleSheet.create({
+		icon: {
+			borderRadius: 7.6,
+			width: 60,
+			height: 60
+		},
+		logo: {
+			borderRadius: 10,
+			marginLeft: 3,
+		},
+	});
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
@@ -68,7 +82,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	return (
 		<View>
-			<Container>
+			<Container onPress={!(option?.with_half_option || option?.allow_suboption_quantity) ? () => handleSuboptionClick() : null}>
 				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 						state?.selected ? (
@@ -83,12 +97,24 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
 						)
 					)}
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
+					{image && (
+						<Logo style={styles.logo}>
+							<FastImage
+								style={styles.icon}
+								source={{
+									uri: optimizeImage(image, 'h_100,c_limit'),
+									priority: FastImage.priority.normal,
+								}}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						</Logo>
+					)}
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
 						{suboption?.name}
 					</OText>
 				</IconControl>
-				<QuantityControl>
-					{option?.allow_suboption_quantity && state?.selected && (
+				{option?.allow_suboption_quantity && state?.selected && (
+					<QuantityControl>
 						<>
 							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
 								<IconAntDesign
@@ -97,7 +123,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
-							<OText size={12} mLeft={5} mRight={5}>
+							<OText size={12}>
 								{state.quantity}
 							</OText>
 							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
@@ -108,16 +134,17 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								/>
 							</Checkbox>
 						</>
-					)}
-				</QuantityControl>
-				<PositionControl>
-					{option?.with_half_option && state?.selected && (
+					</QuantityControl>
+				)}
+				{option?.with_half_option && state?.selected && (
+					<PositionControl>
 						<>
 							<Circle disabled={disabled} onPress={() => changePosition('left')}>
 								<OIcon
 									src={theme.images.general.half_l}
 									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 									style={styles.inverse}
 								/>
 							</Circle>
@@ -125,21 +152,23 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.half_f}
 									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 							<Circle disabled={disabled} onPress={() => changePosition('right')}>
 								<OIcon
 									src={theme.images.general.half_r}
 									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 						</>
-					)}
-				</PositionControl>
+					</PositionControl>
+				)}
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ width: 70, maxWidth: 70 }}>
 						+ {parsePrice(price)}
 					</OText>
 				)}

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

@@ -4,35 +4,36 @@ export const Container = styled.TouchableOpacity`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
   width: 100%;
 `
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  width: 45%;
+  padding: 10px 0 10px 10px;
+  width: 50%;
   align-items: center;
 `
 
 export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  margin-horizontal: 5px;
-  flex: 1;
-  width: 60px;
+  justify-content: space-between;
+  width: 62px;
 `
 
 export const PositionControl = styled.View`
   flex-direction: row;
   align-items: center;
-  margin-right: 5px;
-  flex: 1;
 `
 
 export const Checkbox = styled.TouchableOpacity`
 `
 
 export const Circle = styled.TouchableOpacity`
-  margin: 0 1px;
+  margin: 0 1.5px;
 `
+
+export const Logo = styled.View`
+  height: 65px;
+  width: 65px;
+`;

package/themes/original/src/components/ProfessionalFilter/SingleProfessionalCard/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import {
+  useSession,
+  useUtils,
+  SingleProfessionalCard as SingleProfessionalCardController
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import { OIcon, OText } from '../../shared'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+
+const SingleProfessionalCardUI = (props) => {
+  const {
+    professional,
+    handleFavoriteProfessional,
+    active,
+    handleProfessionalClick
+  } = props
+
+  const theme = useTheme()
+  const [{ auth }] = useSession()
+  const [{ optimizeImage }] = useUtils()
+
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteProfessional && handleFavoriteProfessional(!professional?.favorite)
+    }
+  }
+
+  const styles = StyleSheet.create({
+    professionalItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 7.6,
+      padding: 11,
+      borderWidth: 1,
+      marginRight: 12,
+      minHeight: 64
+    },
+		photoStyle: {
+			width: 42,
+			height: 42,
+			borderRadius: 7.6
+		},
+    favoriteIconStyle: {
+			width: 16,
+			height: 16,
+		},
+  })
+
+  return (
+    <TouchableOpacity
+      onPress={() => handleProfessionalClick(professional)}
+    >
+      <View
+        style={{
+          ...styles.professionalItem,
+          borderColor: active
+            ? theme.colors.primary
+            : theme.colors.border 
+        }}
+      >
+        {professional?.photo ? (
+          <FastImage
+            style={styles.photoStyle}
+            source={{
+              uri: optimizeImage(professional?.photo, 'h_250,c_limit'),
+              priority: FastImage.priority.normal,
+            }}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+        ) : (
+          <OIcon
+            src={theme?.images?.general?.user}
+            cover={false}
+            style={styles.photoStyle}
+          />
+        )}
+        <View style={{ marginLeft: 12 }}>
+          <OText
+            size={12}
+            weight={'400'}
+          >
+            {professional?.name} {professional?.lastname}
+          </OText>
+
+          <TouchableOpacity
+            onPress={() => handleChangeFavorite()}
+          >
+            {professional?.favorite
+              ? <IconAntDesign name='heart' size={16} color={theme.colors.danger5} />
+              : <IconAntDesign name='hearto' size={16} color={theme.colors.danger5} />
+            }
+          </TouchableOpacity>
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export const SingleProfessionalCard = (props) => {
+  const singleProfessionalCardProps = {
+    ...props,
+    UIComponent: SingleProfessionalCardUI
+  }
+  return <SingleProfessionalCardController {...singleProfessionalCardProps} />
+}