ordering-ui-react-native 0.15.36 → 0.15.37-release

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

@@ -1,18 +1,13 @@
-import React, { useState } from 'react';
-import { useLanguage, useUtils } from 'ordering-components/native';
+import React from 'react';
+import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, TouchableOpacity, ScrollView, View } from 'react-native';
-import { OButton, OIcon, OText } from '../shared';
+import { View } from 'react-native';
+import { OButton } from '../shared';
 import {
-	Card,
-	Logo,
-	Information,
-	MyOrderOptions,
-	Status,
 	WrappButton,
 } from './styles';
 import { PreviousOrdersParams } from '../../types';
-import moment from 'moment';
+import { SingleOrderCard } from '../SingleOrderCard';
 
 export const PreviousOrders = (props: PreviousOrdersParams) => {
 	const {
@@ -24,150 +19,28 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 		handleReorder,
 		reorderLoading,
 		orderID,
+		handleUpdateOrderList
 	} = props;
 
 	const theme = useTheme();
 
-
-	const styles = StyleSheet.create({
-		logo: {
-			borderRadius: 10,
-			width: 64,
-			height: 64,
-		},
-		reorderbutton: {
-			height: 23,
-			paddingLeft: 10,
-			paddingRight: 10,
-			borderRadius: 23,
-			shadowOpacity: 0,
-			backgroundColor: theme.colors.primaryContrast,
-			borderWidth: 0,
-		},
-		reorderLoading: {
-			width: 80,
-			height: 40,
-			borderRadius: 10,
-		},
-		reviewButton: {
-			height: 23,
-			maxHeight: 23,
-			backgroundColor: theme.colors.white,
-			alignItems: 'center',
-			justifyContent: 'center',
-			paddingHorizontal: 10,
-			borderRadius: 23,
-			borderWidth: 1,
-			borderColor: theme.colors.primaryContrast,
-		},
-		buttonText: {
-			color: theme.colors.primary,
-			fontSize: 10,
-			marginLeft: 2,
-			marginRight: 2,
-		},
-	});
-
-
 	const [, t] = useLanguage();
-	const [reorderSelected, setReorderSelected] = useState<number | null>(null);
-	const [{ parseDate, optimizeImage }] = useUtils();
-	const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
-
-	const handleClickViewOrder = (uuid: string) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const handleClickOrderReview = (order: any) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('ReviewOrder', {
-				order: {
-					id: order?.id,
-					business_id: order?.business_id,
-					logo: order?.business?.logo,
-					driver: order?.driver,
-					products: order?.products,
-					review: order?.review,
-					user_review: order?.user_review
-				},
-			});
-	};
-
-	const formatDate = (date: string, option?: any) => {
-		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
-	};
 
-	const handleReorderClick = (id: number) => {
-		setReorderSelected(id);
-		handleReorder(id);
-	};
+  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
 	return (
 		<View style={{ marginBottom: 30 }}>
-			{orders.map((order: any) => (
-				<TouchableOpacity
-					onPress={() => handleClickViewOrder(order?.uuid)}
-					activeOpacity={0.7}
-					style={{ flexDirection: 'row' }}
-					key={order.id}>
-					<Card>
-						{!!order.business?.logo && (
-							<Logo>
-								<OIcon
-									url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-									style={styles.logo}
-								/>
-							</Logo>
-						)}
-						<Information>
-							<OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-								{order.business?.name}
-							</OText>
-							<OText
-								size={10}
-								lineHeight={15}
-								color={theme.colors.textSecondary}
-								style={{ marginVertical: 3 }}
-								numberOfLines={1}>
-								{order?.delivery_datetime_utc
-									? formatDate(order?.delivery_datetime_utc)
-									: formatDate(order?.delivery_datetime, { utc: false })}
-							</OText>
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								numberOfLines={1}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-						</Information>
-						<Status>
-							<OButton
-								text={t('REORDER', 'Reorder')}
-								imgRightSrc={''}
-								textStyle={styles.buttonText}
-								style={
-									reorderLoading && order.id === reorderSelected
-										? styles.reorderLoading
-										: styles.reorderbutton
-								}
-								onClick={() => handleReorderClick(order.id)}
-								isLoading={reorderLoading && order.id === reorderSelected}
-							/>
-							{allowedOrderStatus.includes(parseInt(order?.status)) &&
-								!order.review && (
-									<TouchableOpacity
-										onPress={() => handleClickOrderReview(order)}
-										style={styles.reviewButton}>
-										<OText size={10} color={theme.colors.primary} numberOfLines={1}>
-											{t('REVIEW', 'Review')}
-										</OText>
-									</TouchableOpacity>
-								)}
-						</Status>
-					</Card>
-				</TouchableOpacity>
+			{orders.map((order: any, i: number) => (
+				<SingleOrderCard
+					key={i}
+					order={order}
+					reorderLoading={reorderLoading}
+					handleReorder={handleReorder}
+					onNavigationRedirect={onNavigationRedirect}
+					getOrderStatus={getOrderStatus}
+					pastOrders={pastOrders.includes(order?.status)}
+					handleUpdateOrderList={handleUpdateOrderList}
+				/>
 			))}
 			{pagination.totalPages && pagination.currentPage < pagination.totalPages && (
 				<WrappButton>

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

@@ -46,7 +46,6 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useState } from 'react';
-
 const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
 
@@ -176,6 +175,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [optionLayout, setOptionLayout] = useState<any>({})
 	const [headerRefHeight, setHeaderRefHeight] = useState(0)
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
+	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -279,39 +279,6 @@ export const ProductOptionsUI = (props: any) => {
 		setOptionLayout(_optionLayout)
 	}
 
-	useEffect(() => {
-		const imageList: any = []
-		const videoList: any = []
-		product?.images && imageList.push(product.images)
-		if (product?.gallery && product?.gallery.length > 0) {
-			for (const img of product?.gallery) {
-				if (img?.file) {
-					imageList.push(img?.file)
-				}
-				if (img?.video) {
-					const keys = img?.video.split('/')
-					let _videoId = keys[keys.length - 1]
-					if (_videoId.includes('watch')) {
-						const __url = _videoId.split('=')[1]
-						_videoId = __url
-					}
-					if (_videoId.includes('?')) {
-						const __url = _videoId.split('?')[0]
-						_videoId = __url
-					}
-					videoList.push(_videoId)
-				}
-			}
-		}
-		const gallery = imageList.concat(videoList)
-		setGallery(gallery)
-
-		if (product?.weight && product?.weight_unit) {
-			setIsHaveWeight(true)
-			setPricePerWeightUnit(product?.price / product?.weight)
-		}
-	}, [product])
-
 	const saveErrors =
 		orderState.loading ||
 		maxProductQuantity === 0 ||
@@ -319,28 +286,9 @@ export const ProductOptionsUI = (props: any) => {
 
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
-			{product?.ingredients.length > 0 && (
-				<TouchableOpacity
-					key={`eopt_all_00`}
-					onPress={() => setSelectedOpt(-1)}
-					style={[
-						styles.extraItem,
-						{
-							borderBottomColor:
-								selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
-						},
-					]}>
-					<OText
-						color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-						size={selOpt == -1 ? 14 : 12}
-						weight={selOpt == -1 ? '600' : 'normal'}>
-						{t('INGREDIENTS', 'Ingredients')}
-					</OText>
-				</TouchableOpacity>
-			)}
-			{options.map(({ id, name, respect_to }: any) => (
+			{options.map(({ id, name, respect_to, suboptions }: any) => (
 				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && (
+					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
 							onPress={() => setSelectedOpt(id)}
@@ -370,6 +318,54 @@ export const ProductOptionsUI = (props: any) => {
 		? () => navigation.goBack()
 		: () => navigation.navigate('Business', { store: props.businessSlug })
 
+	useEffect(() => {
+		if (isScrollAvailable) {
+			setIsScrollAvailable(null)
+			scrollDown(isScrollAvailable)
+		}
+	}, [errors])
+
+	useEffect(() => {
+		const imageList: any = []
+		const videoList: any = []
+		product?.images && imageList.push(product.images)
+		if (product?.gallery && product?.gallery.length > 0) {
+			for (const img of product?.gallery) {
+				if (img?.file) {
+					imageList.push(img?.file)
+				}
+				if (img?.video) {
+					const keys = img?.video.split('/')
+					let _videoId = keys[keys.length - 1]
+
+					if (_videoId.includes('watch')) {
+						const __url = _videoId.split('=')[1]
+						_videoId = __url
+					} else if (_videoId.includes('?')) {
+						const __url = _videoId.split('?')[0]
+						_videoId = __url
+					}
+
+					if (_videoId.search(/&/i) >= 0) {
+						_videoId = _videoId.split('&')[0]
+					} else if (_videoId.search(/\?/i) >= 0) {
+						_videoId = _videoId.split('?')[0]
+					}
+					if ((_videoId.length === 11)) {
+						videoList.push(_videoId)
+					}
+				}
+			}
+		}
+		const gallery = imageList.concat(videoList)
+		setGallery(gallery)
+
+		if (product?.weight && product?.weight_unit) {
+			setIsHaveWeight(true)
+			setPricePerWeightUnit(product?.price / product?.weight)
+		}
+	}, [product])
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
@@ -658,6 +654,25 @@ export const ProductOptionsUI = (props: any) => {
 												{t('ALL', 'All')}
 											</OText>
 										</TouchableOpacity>
+										{product?.ingredients.length > 0 && (
+											<TouchableOpacity
+												key={`eopt_all_00`}
+												onPress={() => setSelectedOpt(-1)}
+												style={[
+													styles.extraItem,
+													{
+														borderBottomColor:
+															selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
+													},
+												]}>
+												<OText
+													color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
+													size={selOpt == -1 ? 14 : 12}
+													weight={selOpt == -1 ? '600' : 'normal'}>
+													{t('INGREDIENTS', 'Ingredients')}
+												</OText>
+											</TouchableOpacity>
+										)}
 										{product?.extras.map((extra: any) =>
 											<ExtraOptions key={extra.id} options={extra.options} />
 										)}
@@ -687,8 +702,8 @@ export const ProductOptionsUI = (props: any) => {
 													</WrapperIngredients>
 												</View>
 											)}
-											{product?.extras.map((extra: any) =>
-												extra.options.map((option: any) => {
+											{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
+												extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 													const currentState =
 														productCart.options[`id:${option.id}`] || {};
 													return (
@@ -704,7 +719,7 @@ export const ProductOptionsUI = (props: any) => {
 																				backgroundColor: isError(option.id),
 																				borderRadius: 7.6
 																			}}>
-																			{option.suboptions.map(
+																			{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																				(suboption: any) => {
 																					const currentState =
 																						productCart.options[
@@ -731,7 +746,7 @@ export const ProductOptionsUI = (props: any) => {
 																								isSoldOut ||
 																								maxProductQuantity <= 0
 																							}
-																							scrollDown={scrollDown}
+																							setIsScrollAvailable={setIsScrollAvailable}
 																							error={errors[`id:${option.id}`]}
 																						/>
 																					);
@@ -772,7 +787,7 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													{product?.extras.map((extra: any) =>
-														extra.options.map((option: any) => {
+														extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 															if (
 																option.id == selOpt ||
 																(hasRespected(
@@ -797,7 +812,7 @@ export const ProductOptionsUI = (props: any) => {
 																								option.id,
 																							),
 																						}}>
-																						{option.suboptions.map(
+																						{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																							(suboption: any) => {
 																								const currentState =
 																									productCart.options[

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

@@ -49,7 +49,6 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
 `
 
 export const SectionTitle = styled.View`

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

@@ -40,7 +40,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const pickerStyle = StyleSheet.create({
 		inputAndroid: {
-			width: 27,
+			width: 34,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,
@@ -49,7 +49,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 			color: theme.colors.textNormal
 		},
 		inputIOS: {
-			width: 27,
+			width: 34,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,

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

@@ -28,36 +28,40 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		error,
-		scrollDown
+		setIsScrollAvailable
 	} = props
 
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
+	
 	const theme = useTheme();
-
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
+	const [isDirty, setIsDirty] = useState(false)
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
-
-		if (balance === option?.max - 1 && !state.selected) {
-			scrollDown(option?.id)
-		}
+		setIsDirty(true)
 
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}
 	}
 
+	useEffect(() => {
+		if (balance === option?.max && state?.selected && isDirty) {
+			setIsDirty(false)
+			setIsScrollAvailable(option?.id)
+		}
+	}, [state?.selected])
+
 	useEffect(() => {
 		if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))) {
 			setShowMessage(false)
 		}
 	}, [balance])
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
-	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 	return (
 		<View>
 			<Container onPress={() => handleSuboptionClick()}>
@@ -130,9 +134,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 						</>
 					)}
 				</PositionControl>
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-					+ {parsePrice(price)}
-				</OText>
+				{price > 0 && (
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+						+ {parsePrice(price)}
+					</OText>
+				)}
 			</Container>
 			{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>