ordering-ui-react-native 0.21.21 → 0.21.22-release

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { View, Animated, StyleSheet, Platform, TouchableOpacity } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { View, Animated, StyleSheet, TouchableOpacity } from 'react-native'
 import { useUtils, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -39,29 +39,42 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	} = props
 
 	const theme = useTheme();
+	const hideProductImage = isFromCheckout
+		? theme?.checkout?.components?.cart?.components?.product?.components?.image?.hidden
+		: theme?.confirmation?.components?.cart?.components?.products?.components?.photo?.hidden
 
+	const hideProductCommentHide = isFromCheckout && theme?.checkout?.components?.cart?.components?.product?.components?.comments?.hidden
 
 	const pickerStyle = StyleSheet.create({
 		inputAndroid: {
-			width: 34,
+			width: 45,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,
-			height: 20,
-			padding: 0,
-			color: theme.colors.textNormal
+			height: 30,
+			color: theme.colors.textNormal,
+			backgroundColor: theme.colors.backgroundGray100,
+			paddingVertical: 8,
+			paddingRight: 10,
+			paddingLeft: 0,
+			borderRadius: 7.6,
 		},
 		inputIOS: {
-			width: 34,
+			width: 45,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,
+			backgroundColor: theme.colors.backgroundGray100,
+			paddingVertical: 8,
+			paddingRight: 15,
+			paddingLeft: 0,
+			borderRadius: 7.6,
 		},
 		icon: {
 			position: 'absolute',
 			zIndex: 1,
-			top: -4,
-			end: -4,
+			top: 0,
+			end: 8,
 		},
 		placeholder: {
 			color: theme.colors.secundaryContrast
@@ -75,9 +88,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const [isActive, setActiveState] = useState(false)
 	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 [productQuantityState, setProductQuantityState] = useState<any>(product.quantity.toString())
 
 	const productInfo = () => {
 		if (isCartProduct) {
@@ -105,23 +116,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		setIsServiceOpen(true)
 	}
 
-	/* const toggleAccordion = () => {
-		if ((!product?.valid_menu && isCartProduct)) return
-		if (isActive) {
-			Animated.timing(setHeight.height, {
-			 toValue: 100,
-			 duration: 500,
-			 easing: Easing.linear,
-			 useNativeDriver: false,
-			}).start()
-		} else {
-			setHeightState({height: new Animated.Value(0)})
-		}
-	 }*/
-
 	const handleChangeQuantity = (value: string) => {
 		if (!orderState.loading) {
-			setProductQuantity(value)
+			setProductQuantityState(value)
 			if (parseInt(value) === 0) {
 				onDeleteProduct && onDeleteProduct(product)
 			} else {
@@ -135,10 +132,6 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		return `${quantity} x ${name} ${pos} +${price}`
 	}
 
-	/*useEffect(() => {
-		toggleAccordion()
-	}, [isActive])*/
-
 	const productOptions = getProductMax && [...Array(getProductMax(product) + 1),].map((_: any, opt: number) => {
 		return {
 			label: opt === 0 ? t('REMOVE', 'Remove') : opt.toString(),
@@ -146,19 +139,27 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		}
 	})
 
+	useEffect(() => {
+		if (product.quantity.toString() === productQuantityState || productQuantityState) {
+			setProductQuantityState(null)
+		}
+	}, [product.quantity])
+
 	return (
 		<>
 			<AccordionSection>
 				<Accordion
-					isValid={product?.valid ?? true}
-					onPress={() => (!product?.valid_menu && isCartProduct)
-						? {}
-						: setActiveState(!isActive)}
 					activeOpacity={1}
+					isValid={product?.valid ?? true}
+					onPress={
+						(!product?.valid_menu && isCartProduct) ||
+						!(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || !!product.comment)
+						? null : () => setActiveState(!isActive)
+					}
 				>
 					<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
 						<ContentInfo>
-							{(product?.images || theme?.images?.dummies?.product) && (
+							{(product?.images || theme?.images?.dummies?.product) && !hideProductImage && (
 								<ProductImage>
 									{isFromCheckout ? (
 										product?.images ? (
@@ -211,11 +212,20 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 											<RNPickerSelect
 												items={productOptions}
 												onValueChange={handleChangeQuantity}
-												value={productQuantity}
+												value={productQuantityState ?? product.quantity.toString()}
 												style={pickerStyle}
 												useNativeAndroidPickerStyle={false}
 												placeholder={{}}
-												Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
+												touchableWrapperProps={{ style: { width: 45 } }}
+												Icon={() => (
+													<View style={pickerStyle.icon}>
+														<OIcon
+															src={theme.images.general.arrow_down}
+															color={theme.colors.textNormal}
+															width={8}
+														/>
+													</View>
+												)}
 												disabled={orderState.loading}
 											/>
 										</ProductInfo>
@@ -276,21 +286,21 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 						)}
 				</Accordion>
 
-				<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 40 }}>
+				<View style={{ display: isActive ? 'flex' : 'none', paddingStart: isFromCheckout ? 100 : 40, marginTop: isFromCheckout ? -80 : -30 }}>
 					<Animated.View>
 						<AccordionContent>
 							{productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
 								<ProductOptionsList>
 									<OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
-									{productInfo().ingredients.map((ingredient: any) => !ingredient.selected && (
-										<OText size={10} color={theme.colors.textThird} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
+									{productInfo().ingredients.map((ingredient: any, i) => !ingredient.selected && (
+										<OText size={10} color={theme.colors.textThird} key={ingredient.id + i} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
 									))}
 								</ProductOptionsList>
 							)}
 							{productInfo().options.length > 0 && (
 								<ProductOptionsList>
-									{productInfo().options.sort((a: any, b: any) => a.rank - b.rank).map((option: any, i: number) => (
-										<ProductOption key={option.id + i}>
+									{productInfo().options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => (
+										<ProductOption key={option.id}>
 											<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
 											{option.suboptions.map((suboption: any) => (
 												<ProductSubOption key={suboption.id}>
@@ -308,7 +318,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 									))}
 								</ProductOptionsList>
 							)}
-							{!!product.comment && (
+							{!!product.comment && !hideProductCommentHide && (
 								<ProductComment>
 									<OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
 									<OText size={10} color={theme.colors.textThird}>{product.comment}</OText>

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

@@ -17,9 +17,6 @@ export const Accordion = styled.TouchableOpacity`
 
 export const ProductInfo = styled.View`
 	margin-horizontal: 7px;
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-	padding: 4px 12px 4px 0px;
-	border-radius: 7.6px;
 `
 
 export const ProductQuantity = styled.View`
@@ -54,4 +51,6 @@ export const ProductSubOption = styled.View`
   margin-left: 0px;
 `
 
-export const ProductComment = styled.View``
+export const ProductComment = styled.View`
+margin-left: 20px;
+`

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,9 +15,12 @@ import {
 	QuantityControl,
 	Checkbox,
 	PositionControl,
-	Circle
+	Circle,
+	Logo
 } from './styles'
 import { OIcon, OText } from '../shared'
+import { InView } from 'react-native-intersection-observer'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder';
 
 export const ProductOptionSubOptionUI = (props: any) => {
 	const {
@@ -29,7 +33,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		setIsScrollAvailable
+		setIsScrollAvailable,
+		image,
+		enableIntersection
 	} = 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 +43,25 @@ 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 [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 
 	const iconsSize = 20
 
+	const styles = StyleSheet.create({
+		icon: {
+			borderRadius: 7.6,
+			width: 60,
+			height: 60
+		},
+		logo: {
+			borderRadius: 10,
+			marginLeft: 3,
+		},
+	});
+
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
@@ -52,6 +71,10 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		}
 	}
 
+	const handleChangeInterSection = (inView: boolean) => {
+		setIsIntersectionObserver(inView)
+	}
+
 	useEffect(() => {
 		if (balance === option?.max && state?.selected && isDirty) {
 			setIsDirty(false)
@@ -66,92 +89,110 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	}, [balance])
 
 	return (
-		<View>
-			<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 ? (
-							<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
-						) : (
-							<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
-						)
-					) : (
-						state?.selected ? (
-							<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+		<InView onChange={(inView: boolean) => handleChangeInterSection(inView)} triggerOnce={true}>
+			{isIntersectionObserver ? (
+				<Container onPress={!((option?.with_half_option || option?.allow_suboption_quantity) && state?.selected) ? () => handleSuboptionClick() : null}>
+					<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
+						{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
+							state?.selected ? (
+								<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
+							) : (
+								<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
+							)
 						) : (
-							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
-						)
-					)}
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
-						{suboption?.name}
-					</OText>
-				</IconControl>
-				{option?.allow_suboption_quantity && state?.selected && (
-					<QuantityControl>
-						<>
-							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-								<IconAntDesign
-									name='minuscircleo'
-									size={iconsSize}
-									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-								/>
-							</Checkbox>
-							<OText size={12}>
-								{state.quantity}
-							</OText>
-							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-								<IconAntDesign
-									name='pluscircleo'
-									size={iconsSize}
-									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
-								/>
-							</Checkbox>
-						</>
-					</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={20}
-									height={20}
-									style={styles.inverse}
+							state?.selected ? (
+								<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+							) : (
+								<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
+							)
+						)}
+						{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}
 								/>
-							</Circle>
-							<Circle disabled={disabled} onPress={() => changePosition('whole')}>
-								<OIcon
-									src={theme.images.general.half_f}
-									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-									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={20}
-									height={20}
-								/>
-							</Circle>
-						</>
-					</PositionControl>
-				)}
-				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{width: 70, maxWidth: 70}}>
-						+ {parsePrice(price)}
-					</OText>
-				)}
-			</Container>
+							</Logo>
+						)}
+						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
+							{suboption?.name}
+						</OText>
+					</IconControl>
+					{option?.allow_suboption_quantity && state?.selected && (
+						<QuantityControl>
+							<>
+								<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+									<IconAntDesign
+										name='minuscircleo'
+										size={iconsSize}
+										color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
+									/>
+								</Checkbox>
+								<OText size={12}>
+									{state.quantity}
+								</OText>
+								<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+									<IconAntDesign
+										name='pluscircleo'
+										size={iconsSize}
+										color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+									/>
+								</Checkbox>
+							</>
+						</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={20}
+										height={20}
+										style={styles.inverse}
+									/>
+								</Circle>
+								<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+									<OIcon
+										src={theme.images.general.half_f}
+										color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
+										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={20}
+										height={20}
+									/>
+								</Circle>
+							</>
+						</PositionControl>
+					)}
+					{price > 0 && (
+						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ width: 70, maxWidth: 70 }}>
+							+ {parsePrice(price)}
+						</OText>
+					)}
+				</Container>
+			) : (
+				<Placeholder>
+					<PlaceholderLine height={25} />
+				</Placeholder>
+			)}
 			{showMessage && (
 				<OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>
 					{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}
 				</OText>
 			)}
-		</View>
+		</InView>
 	)
 }
 

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

@@ -10,7 +10,7 @@ export const Container = styled.TouchableOpacity`
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
   padding: 10px 0 10px 10px;
-  width: 35%;
+  width: 50%;
   align-items: center;
 `
 
@@ -32,3 +32,8 @@ export const Checkbox = styled.TouchableOpacity`
 export const Circle = styled.TouchableOpacity`
   margin: 0 1.5px;
 `
+
+export const Logo = styled.View`
+  height: 65px;
+  width: 65px;
+`;

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

@@ -12,7 +12,7 @@ export const ProfessionalPhoto = styled.ImageBackground`
 
 export const InfoWrapper = styled.View`
   margin-vertical: 30px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const Divider = styled.View`
@@ -22,7 +22,7 @@ export const Divider = styled.View`
 `
 
 export const ScheduleWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `
 
@@ -43,4 +43,4 @@ export const CalendarWrapper = styled.View`
   border-color: ${(props: any) => props.theme.colors.backgroundGray200};
   border-radius: 7.6px;
   padding: 15px;
-`
+`

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

@@ -19,7 +19,7 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView, RefreshControl } from 'react-native'
+import { View, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-native'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
 
@@ -98,8 +98,6 @@ const PromotionsUI = (props: PromotionParams) => {
 
   return (
     <Container
-      noPadding
-      pt={20}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -112,7 +110,9 @@ const PromotionsUI = (props: PromotionParams) => {
         titleAlign={'center'}
         onActionLeft={() => navigation.goBack()}
         showCall={false}
-        style={{ paddingVertical: 0, marginLeft: 20 }}
+        paddingTop={Platform.OS === 'ios' ? 20 : 10}
+        style={{ paddingVertical: 0 }}
+        btnStyle={{ paddingLeft: 0 }}
       />
       <PromotionsContainer>
         <SearchBarContainer>

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

@@ -2,8 +2,6 @@ import styled, { css } from 'styled-components/native'
 
 export const PromotionsContainer = styled.View`
   width: 100%;
-  padding-left: 40px;
-	padding-right: 40px;
 `
 
 export const WrapperSingleOffer = styled.View`

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewDriverContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewOrderContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const ReviewProductsContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 20px;
   margin-bottom: 100px;
 `
 

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

@@ -116,7 +116,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       marginHorizontal: 0
     },
     professionalList: {
-      paddingHorizontal: 40,
+      paddingHorizontal: 20,
       paddingVertical: 30,
     }
   })
@@ -602,7 +602,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       <PlaceholderLine width={60} 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}>{t('AS_GUEST_USER', 'As guest user')}</OText>
                   )}
                 </TouchableOpacity>
               )}

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

@@ -11,7 +11,7 @@ export const ProfessionalPhoto = styled.ImageBackground`
 `;
 
 export const InfoWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-vertical: 30px;
 `
 
@@ -22,7 +22,7 @@ export const Divider = styled.View`
 `
 
 export const ProfessionalWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
 `
 
@@ -41,10 +41,10 @@ export const ButtonWrapper = styled.View`
   align-items: center;
   flex-direction: row;
   padding-vertical: 13px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   margin-top: 30px;
   margin-bottom: 40px;
   width: 100%;
   border-top-width: 1px;
   border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
-`
+`