ordering-ui-react-native 0.14.29 → 0.14.31-release

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

@@ -7,6 +7,7 @@ import {
   PaymentOptionWallet as PaymentOptionWalletController,
   useLanguage,
   useUtils,
+  useOrder
 } from 'ordering-components/native'
 
 import {
@@ -18,7 +19,7 @@ import { OText } from '../shared'
 
 const PaymentOptionWalletUI = (props: any) => {
   const {
-    cart,
+    businessId,
     walletsState,
     selectWallet,
     deletetWalletSelected
@@ -26,8 +27,11 @@ const PaymentOptionWalletUI = (props: any) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const [{ carts }] = useOrder()
   const [{ parsePrice }] = useUtils()
 
+  const cart = carts?.[`businessId:${businessId}`] ?? {}
+
   const styles = StyleSheet.create({
     checkBoxStyle: {
       width: 25,
@@ -65,10 +69,10 @@ const PaymentOptionWalletUI = (props: any) => {
   };
 
   useEffect(() => {
-    if (!walletsState.loading) {
+    if (!walletsState.loading && walletsState.result?.length) {
       setCheckedState(
-        walletsState.result.map((wallet: any) => {
-          return !!cart?.wallets?.find((w: any) => w.id === wallet.id)
+        walletsState.result?.map((wallet: any) => {
+          return !!cart?.payment_events?.find((w: any) => w.wallet_id === wallet.id)
         })
       )
     }
@@ -101,7 +105,7 @@ const PaymentOptionWalletUI = (props: any) => {
                   onTintColor={theme.colors.primary}
                   style={Platform.OS === 'ios' && styles.checkBoxStyle}
                 />
-                <View style={{ alignItems: 'baseline' }}>
+                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
                   <View>
                     <OText
                       style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
@@ -114,7 +118,7 @@ const PaymentOptionWalletUI = (props: any) => {
               </View>
               </SectionLeft>
 
-              <View style={{maxWidth: '40%', alignItems: 'flex-end' }}>
+              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
                 {wallet.type === 'cash' && (
                   <OText>
                     {parsePrice(wallet?.balance)}

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

@@ -17,6 +17,7 @@ export const Container = styled.View`
 `
 
 export const SectionLeft = styled.View`
+  margin-left: 20px;
   max-width: 55%;
   display: flex;
   flex-direction: row;

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

@@ -16,10 +16,9 @@ import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry, I18nManager } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView } from 'react-native';
 
 import {
-	ProductHeader,
 	WrapHeader,
 	TopHeader,
 	WrapContent,
@@ -33,16 +32,15 @@ import {
 	ProductActions,
 	ExtraOptionWrap,
 	WeightUnitSwitch,
-	WeightUnitItem
+	WeightUnitItem,
+	TopActions
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useState } from 'react';
-import { useWindowDimensions } from 'react-native';
 
 const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
@@ -63,8 +61,6 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeSuboptionState,
 		handleChangeCommentState,
 		productObject,
-		onClose,
-		isFromCheckout,
 	} = props;
 
 	const theme = useTheme();
@@ -97,7 +93,7 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		btnBackArrow: {
 			borderWidth: 0,
-			backgroundColor: 'rgba(0,0,0,0.3)',
+			backgroundColor: '#FFF',
 			borderRadius: 24,
 			marginRight: 15,
 		},
@@ -135,6 +131,20 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		unitItem: {
 			fontSize: 12
+		},
+		productTagWrapper: {
+			flexDirection: 'row',
+			alignItems: 'center'
+		},
+		productTagImageStyle: {
+			width: 32,
+			height: 32,
+			borderRadius: 8,
+			resizeMode: 'cover'
+		},
+		productTagNameStyle: {
+			paddingHorizontal: 6,
+			marginRight: 5
 		}
 	});
 
@@ -146,15 +156,13 @@ export const ProductOptionsUI = (props: any) => {
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
 
-	const { top, bottom } = useSafeAreaInsets();
-	const { height } = useWindowDimensions();
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
 	const [qtyBy, setQtyBy] = useState({
 		weight_unit: false,
 		pieces: true
 	})
-	const [pricePerWeightUnit, setPricePerWeightUnit] = useState(null)
+	const [pricePerWeightUnit, setPricePerWeightUnit] = useState<any>(null)
 
 	const swiperRef: any = useRef(null)
 
@@ -173,10 +181,8 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-		console.log('----- click handle ------')
 		const isErrors = Object.values(errors).length > 0;
 		if (!isErrors) {
-			console.log('----- save handle ------')
 			handleSave && handleSave();
 			return;
 		}
@@ -206,7 +212,6 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const handleRedirectLogin = () => {
-		onClose();
 		navigation.navigate('Login');
 	};
 
@@ -284,14 +289,16 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
+	const handleGoBack = navigation?.canGoBack()
+		? () => navigation.goBack()
+		: () => navigation.navigate('Business', { store: props.businessSlug })
+
 	return (
-		<>
+		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
-				<TouchableOpacity
-					style={styles.headerItem}
-					onPress={onClose}>
-					<OIcon src={theme.images.general.close} width={16} />
-				</TouchableOpacity>
+				<TopActions onPress={() => handleGoBack()}>
+					<OIcon src={theme.images.general.arrow_left} width={15} />
+				</TopActions>
 			</TopHeader>
 			<ScrollView>
 				{!error && (
@@ -342,15 +349,13 @@ export const ProductOptionsUI = (props: any) => {
 												style={styles.slide1}
 												key={i}
 											>
-												<Grayscale amount={isSoldOut ? 1 : 0}>
-													<FastImage
-														style={{ height: '100%' }}
-														source={{
-															uri: optimizeImage(img, 'h_258,c_limit'),
-															priority: FastImage.priority.normal,
-														}}
-													/>
-												</Grayscale>
+												<FastImage
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+													source={{
+														uri: optimizeImage(img, 'h_258,c_limit'),
+														priority: FastImage.priority.normal,
+													}}
+												/>
 											</View>
 										))}
 									</Swiper>
@@ -374,19 +379,18 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<Grayscale amount={isSoldOut ? 1 : 0}>
-														<OIcon
-															url={img}
-															style={{
-																borderColor: theme.colors.lightGray,
-																borderRadius: 8,
-																minHeight: '100%'
-															}}
-															width={56}
-															height={56}
-															cover
-														/>
-													</Grayscale>
+													<OIcon
+														url={img}
+														style={{
+															borderColor: theme.colors.lightGray,
+															borderRadius: 8,
+															minHeight: '100%',
+															opacity: isSoldOut ? 0.5 : 1
+														}}
+														width={56}
+														height={56}
+														cover
+													/>
 												</View>
 											</TouchableOpacity>
 
@@ -410,14 +414,20 @@ export const ProductOptionsUI = (props: any) => {
 									</Placeholder>
 								) : (
 									<>
-										<OText
-											size={20}
-											lineHeight={30}
-											weight={'600'}
-											style={{ flex: 1, marginBottom: 5 }}>
-											{product?.name || productCart.name}
-										</OText>
-										{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+										<View style={{ flexDirection: 'row' }}>
+											<OText
+												size={20}
+												lineHeight={30}
+												weight={'600'}
+												style={{ flex: 1, marginBottom: 10 }}>
+												{product?.name || productCart.name}
+											</OText>
+											{!!product?.calories && (
+												<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+												</OText>
+											)}
+										</View>
+										{((!!product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (!!product?.estimated_person)) && (
 											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
 												{
 													((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
@@ -432,11 +442,20 @@ export const ProductOptionsUI = (props: any) => {
 											</OText>
 										)}
 										{isHaveWeight ? (
-											<OText size={16} lineHeight={24} color={theme.colors.textNormal}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
+											<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
 										) : (
-											<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-												{productCart.price ? parsePrice(productCart.price) : ''}
-											</OText>
+											<View style={{ flexDirection: 'row', marginBottom: 10 }}>
+												<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+												{product?.offer_price !== null && product?.in_offer && (
+													<OText style={{
+														fontSize: 14,
+														color: '#808080',
+														textDecorationLine: 'line-through',
+														marginLeft: 7,
+														marginRight: 7
+													}}>{parsePrice(product?.offer_price)}</OText>
+												)}
+											</View>
 										)}
 									</>
 								)}
@@ -446,6 +465,31 @@ export const ProductOptionsUI = (props: any) => {
 									{product?.description || productCart?.description}
 								</OText>
 							</ProductDescription>
+							<ScrollView
+								horizontal
+								showsHorizontalScrollIndicator={false}
+								contentContainerStyle={{ paddingBottom: 30 }}
+							>
+								{product?.tags?.map((tag: any) => (
+									<View
+										key={tag.id}
+										style={styles.productTagWrapper}
+									>
+										{!!tag?.image ? (
+											<OIcon
+												url={optimizeImage(tag?.image, 'h_40,c_limit')}
+												style={styles.productTagImageStyle}
+											/>
+										) : (
+											<OIcon
+												src={theme.images?.dummies?.product}
+												style={styles.productTagImageStyle}
+											/>
+										)}
+										<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
+									</View>
+								))}
+							</ScrollView>
 							{loading && !product ? (
 								<>
 									{[...Array(2)].map((item, i) => (
@@ -714,16 +758,12 @@ export const ProductOptionsUI = (props: any) => {
 						</WrapContent>
 					</View>
 				)}
-				{error && error.length > 0 && (
+				{!!error && error.length > 0 && (
 					<NotFoundSource content={error[0]?.message || error[0]} />
 				)}
 			</ScrollView>
 			{!loading && !error && product && (
-				<ProductActions
-					style={{
-						paddingBottom: Platform.OS === 'ios' ? bottom + 30 : bottom + 80
-					}}
-				>
+				<ProductActions>
 					<OText size={16} lineHeight={24} weight={'600'}>
 						{productCart.total ? parsePrice(productCart?.total) : ''}
 					</OText>
@@ -745,7 +785,7 @@ export const ProductOptionsUI = (props: any) => {
 							<OText
 								size={12}
 								lineHeight={18}
-								style={{ minWidth: 29, textAlign: 'center' }}
+								style={{ minWidth: 40, textAlign: 'center' }}
 							>
 								{qtyBy?.pieces && productCart.quantity}
 								{qtyBy?.weight_unit && productCart.quantity * product?.weight}
@@ -769,36 +809,38 @@ export const ProductOptionsUI = (props: any) => {
 									}
 								/>
 							</TouchableOpacity>
-							<WeightUnitSwitch>
-								<TouchableOpacity
-									onPress={() => handleSwitchQtyUnit('pieces')}
-								>
-									<WeightUnitItem active={qtyBy?.pieces}>
-										<OText
-											size={12}
-											lineHeight={18}
-											color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
-										>
-											{t('PIECES', 'pieces')}
-										</OText>
-									</WeightUnitItem>
-								</TouchableOpacity>
-								<View style={{ alignItems: 'flex-start' }}>
+							{isHaveWeight && (
+								<WeightUnitSwitch>
 									<TouchableOpacity
-										onPress={() => handleSwitchQtyUnit('weight_unit')}
+										onPress={() => handleSwitchQtyUnit('pieces')}
 									>
-										<WeightUnitItem active={qtyBy?.weight_unit}>
+										<WeightUnitItem active={qtyBy?.pieces}>
 											<OText
 												size={12}
 												lineHeight={18}
-												color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
+												color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
 											>
-												{product?.weight_unit}
+												{t('PIECES', 'pcs')}
 											</OText>
 										</WeightUnitItem>
 									</TouchableOpacity>
-								</View>
-							</WeightUnitSwitch>
+									<View style={{ alignItems: 'flex-start' }}>
+										<TouchableOpacity
+											onPress={() => handleSwitchQtyUnit('weight_unit')}
+										>
+											<WeightUnitItem active={qtyBy?.weight_unit}>
+												<OText
+													size={12}
+													lineHeight={18}
+													color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
+												>
+													{product?.weight_unit}
+												</OText>
+											</WeightUnitItem>
+										</TouchableOpacity>
+									</View>
+								</WeightUnitSwitch>
+							)}
 						</View>
 					)}
 					<View
@@ -867,7 +909,7 @@ export const ProductOptionsUI = (props: any) => {
 					</View>
 				</ProductActions>
 			)}
-		</>
+		</SafeAreaView>
 	);
 };
 

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

@@ -5,13 +5,20 @@ export const WrapHeader = styled.View`
   z-index: 1;
 `
 
+export const TopActions = styled.TouchableOpacity`
+	height: 44px;
+	justify-content: center;
+  padding-horizontal: 30px;
+`;
+
 export const TopHeader = styled.View`
   width: 100%;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   z-index: 1;
-  padding-horizontal: 40px;
+  height: 60px;
+  min-height: 60px;
 `
 
 export const ProductHeader = styled.ImageBackground`
@@ -37,7 +44,7 @@ export const ProductTitle = styled.View`
 `
 
 export const ProductDescription = styled.View`
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 `
 
 export const ProductEditions = styled.View`
@@ -89,4 +96,4 @@ export const WeightUnitItem = styled.View`
   ${({ active }: any) => active && css`
     background-color: ${(props: any) => props.theme.colors.primary}20;
   `}
-`
+`

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

@@ -212,8 +212,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				</View>
 				{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
 					(!product?.valid_menu && isCartProduct && !isCartPending)) && (
-						<View style={{ alignItems: 'flex-end', width: '100%' }}>
-							<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', bottom: 20 }}>
+						<View style={{ alignItems: 'flex-end', width: '100%', }}>
+							<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
 								{t('NOT_AVAILABLE', 'Not available')}
 							</OText>
 						</View>

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

@@ -7,13 +7,13 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer } from './styles';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
 import { StyleSheet } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
-	const { businessId, product, isSoldOut, onProductClick, productAddedToCart } = props;
+	const { businessId, product, isSoldOut, onProductClick, productAddedToCartLength } = props;
 
 	const theme = useTheme();
 
@@ -51,6 +51,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			textAlign: 'center',
 			borderRadius: 25,
 			alignItems: 'center'
+		},
+		regularPriceStyle: {
+			fontSize: 12,
+			color: '#808080',
+			textDecorationLine: 'line-through',
+			marginLeft: 7,
+			marginRight: 7
 		}
 	});
 
@@ -90,7 +97,6 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
-
 	return (
 		<CardContainer
 			style={[
@@ -98,13 +104,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
 			]}
 			onPress={() => onProductClick?.(product)}>
-				{productAddedToCart && productAddedToCart?.quantity > 0 && (
-					<QuantityContainer style={[styles.quantityContainer, {
-						transform: [{ translateX: 10 }, { translateY: -10 }],
-					}]}>
-						<OText color={theme.colors.white}>{productAddedToCart?.quantity}</OText>
-					</QuantityContainer>
-				)}
+			{productAddedToCartLength > 0 && (
+				<QuantityContainer style={[styles.quantityContainer, {
+					transform: [{ translateX: 10 }, { translateY: -10 }],
+				}]}>
+					<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
+				</QuantityContainer>
+			)}
 			<CardInfo>
 				<OText
 					size={12}
@@ -114,9 +120,12 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					style={styles.line18}>
 					{product?.name}
 				</OText>
-				<OText size={12} weight={'400'} style={styles.line18} color={theme.colors.textNormal}>
-					{parsePrice(product?.price)}
-				</OText>
+				<PricesContainer>
+					<OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
+					{product?.offer_price !== null && product?.in_offer && (
+						<OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
+					)}
+				</PricesContainer>
 				<OText
 					size={10}
 					numberOfLines={2}

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

@@ -24,4 +24,10 @@ export const SoldOut = styled.View`
 
 export const QuantityContainer = styled.View`
   background: ${({ theme } : any) => theme.colors.primary};
+  align-items: center;
+  justify-content: center;
+`
+export const PricesContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
 `