ordering-ui-react-native 0.21.12 → 0.21.13-release

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

@@ -39,7 +39,11 @@ 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: {
@@ -75,9 +79,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const [isActive, setActiveState] = useState(false)
 	const [isServiceOpen, setIsServiceOpen] = useState(false)
+	const [productQuantityState, setProductQuantityState] = useState(product.quantity.toString())
 	// 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) {
@@ -121,7 +125,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const handleChangeQuantity = (value: string) => {
 		if (!orderState.loading) {
-			setProductQuantity(value)
+			setProductQuantityState(value)
 			if (parseInt(value) === 0) {
 				onDeleteProduct && onDeleteProduct(product)
 			} else {
@@ -158,7 +162,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				>
 					<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,10 +215,15 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 											<RNPickerSelect
 												items={productOptions}
 												onValueChange={handleChangeQuantity}
-												value={productQuantity}
+												value={productQuantityState}
 												style={pickerStyle}
 												useNativeAndroidPickerStyle={false}
 												placeholder={{}}
+												touchableWrapperProps={{
+													style: {
+														width: 40,
+													}
+												}}
 												Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
 												disabled={orderState.loading}
 											/>
@@ -276,21 +285,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 +317,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

@@ -54,4 +54,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};
-`
+`

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

@@ -53,6 +53,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [isPressed, setIsPressed] = useState(false)
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
+  const isGiftCardOrder = !order?.business_id
 
   const styles = StyleSheet.create({
     container: {
@@ -284,17 +285,17 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   ) : (
                     <Price>
                       <OText size={12} lineHeight={18}>
-                        {parsePrice(order?.summary?.total || order?.total)}
+                        {parsePrice(order?.total)}
                       </OText>
                     </Price>
                   )}
                 </>
               )}
-              {!!pastOrders && (
+              {!!pastOrders && !isGiftCardOrder && (
                 <ButtonWrapper>
                   {!hideReviewOrderButton &&
                     allowedOrderStatus.includes(parseInt(order?.status)) &&
-                    !order.review && (
+                    !order.review && order?.cart && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
                         style={styles.reviewButton}>
@@ -303,7 +304,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {!hideReorderButton && typeof order?.id === 'number' && (
+                  {!hideReorderButton && typeof order?.id === 'number' && order?.cart && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}

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

@@ -169,7 +169,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<View style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					onClick={() => handleClickproduct()}
@@ -340,7 +340,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					</Placeholder>
 				</View>
 			)}
-		</InView>
+		</View>
 	);
 }, SingleProductCardPropsAreEqual);
 

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

@@ -49,15 +49,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}