ordering-ui-react-native 0.14.30 → 0.14.32-release

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;
 `

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

@@ -4,9 +4,10 @@ import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
 	useLanguage,
+  useOrder
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
-import { OText, OIcon, OModal, OBottomPopup, OButton } from '../shared'
+import { OText, OIcon, OBottomPopup, OButton } from '../shared'
 import { UpsellingProductsParams } from '../../types'
 import {
 	Container,
@@ -14,11 +15,9 @@ import {
 	Item,
 	Details,
 	AddButton,
-	CloseUpselling,
 	TopBar,
 	TopActions
 } from './styles'
-import { ProductForm } from '../ProductForm';
 import { OrderSummary } from '../OrderSummary';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -28,18 +27,18 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		isCustomMode,
 		upsellingProducts,
 		business,
-		cart,
 		handleUpsellingPage,
 		handleCloseUpsellingPage,
 		openUpselling,
 		canOpenUpselling,
 		setCanOpenUpselling,
-		isFromCart
+		isFromCart,
+		onNavigationRedirect,
+		onGoBack
 	} = props
 
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		imageStyle: {
 			width: 73,
@@ -66,14 +65,25 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	})
 
-	const [actualProduct, setActualProduct] = useState<any>(null)
 	const [modalIsOpen, setModalIsOpen] = useState(false)
+	const [{ carts }] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, t] = useLanguage()
 	const { bottom } = useSafeAreaInsets()
 
+	const cart = carts?.[`businessId:${props.businessId}`] ?? {}
+	const cartProducts = cart?.products?.length
+		? cart?.products.map((product: any) => product.id)
+		: []
+
+  	const productsList = !upsellingProducts.loading && !upsellingProducts.error
+      ? upsellingProducts?.products?.length
+      	? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
+      	: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
+      : []
+
 	useEffect(() => {
-		if (!isCustomMode) {
+		if (!isCustomMode && !props.products) {
 			if (!upsellingProducts.loading) {
 				if (upsellingProducts?.products?.length && !isFromCart) {
 					setCanOpenUpselling && setCanOpenUpselling(true)
@@ -81,25 +91,19 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 					handleUpsellingPage && handleUpsellingPage()
 				}
 			}
-			// if ((!upsellingProducts?.products?.length && !upsellingProducts.loading && !canOpenUpselling && openUpselling) ||
-			// 	(!upsellingProducts?.products?.length && !upsellingProducts.loading && openUpselling)) {
-			// 	handleUpsellingPage && handleUpsellingPage()
-			// }
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
 	useEffect(() => {
-		if (!cart?.validate && cart?.products?.length == 0) handleCloseUpsellingPage()
+		Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
 	}, [cart])
 
 	const handleFormProduct = (product: any) => {
-		setActualProduct(product)
-		setModalIsOpen(true)
-	}
-
-	const handleSaveProduct = () => {
-		setActualProduct(null)
-		setModalIsOpen(false)
+    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+      product: product,
+      businessId: product?.api?.businessId,
+      businessSlug: business.slug,
+		})
 	}
 
 	const UpsellingLayout = () => {
@@ -114,7 +118,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 						!upsellingProducts.loading && (
 							<>
 								{
-									!upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
+									!upsellingProducts.error ? productsList.map((product: any) => (
 										<Item key={product.id}>
 											<View style={{ flexBasis: '57%' }}>
 												<Details>
@@ -125,7 +129,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 													<OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
 												</AddButton>
 											</View>
-											<View style={{}}>
+											<View>
 												<OIcon url={product.images} style={styles.imageStyle} />
 											</View>
 										</Item>
@@ -143,75 +147,73 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		)
 	}
 
+  const UpsellingContent = () => {
+    return (
+      <>
+        <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
+          <TopActions onPress={() => onGoBack()}>
+            <OIcon src={theme.images.general.arrow_left} width={15} />
+          </TopActions>
+          <TopActions style={styles.cancelBtn} onPress={() => handleUpsellingPage()}>
+            <OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
+          </TopActions>
+        </TopBar>
+        <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+          {productsList.length > 0 &&
+            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+              <UpsellingLayout />
+            </View>
+          }
+          <View style={{ paddingHorizontal: 40 }}>
+            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+            <OrderSummary
+              cart={cart}
+              isCartPending={cart?.status === 2}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          </View>
+        </ScrollView>
+        <View
+          style={{
+            alignItems: 'center',
+            bottom: props.isPage ? 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
+          }}
+        >
+          <OButton
+            imgRightSrc=''
+            text={t('CHECKOUT', 'Checkout')}
+            style={{...styles.closeUpsellingButton}}
+            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            onClick={() => handleUpsellingPage()}
+          />
+        </View>
+      </>
+    )
+  }
+
 	return (
 		<>
 			{isCustomMode ? (
 				<UpsellingLayout />
 			) : (
 				<>
-					{!canOpenUpselling ? null : (
-						<>
-							{!modalIsOpen && (
-								<OBottomPopup
-									title={''}
-									open={openUpselling}
-									onClose={() => handleUpsellingPage()}
-									isStatusBar
-								>
-									<TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-										<TopActions onPress={() => handleCloseUpsellingPage()}>
-											<OIcon src={theme.images.general.arrow_left} width={15} />
-										</TopActions>
-										<TopActions style={styles.cancelBtn} onPress={() => handleCloseUpsellingPage()}>
-											<OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
-										</TopActions>
-									</TopBar>
-									<ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
-										{upsellingProducts?.products?.length > 0 &&
-											<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-												<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-												<UpsellingLayout />
-											</View>
-										}
-										<View style={{ paddingHorizontal: 40 }}>
-											<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-											<OrderSummary
-												cart={cart}
-												isCartPending={cart?.status === 2}
-											/>
-										</View>
-									</ScrollView>
-									<View style={{alignItems: 'center', bottom: Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125}}>
-										<OButton
-											imgRightSrc=''
-											text={t('CHECKOUT', 'Checkout')}
-											style={{...styles.closeUpsellingButton}}
-											textStyle={{ color: theme.colors.white, fontSize: 14 }}
-											onClick={() => handleUpsellingPage()}
-										/>
-									</View>
-								</OBottomPopup>
-							)}
-						</>
-					)}
+          {props.isPage ? (
+            <UpsellingContent />
+          ) : (
+            canOpenUpselling && !modalIsOpen && (
+              <OBottomPopup
+                title={''}
+                open={openUpselling}
+                onClose={() => handleUpsellingPage()}
+                isStatusBar
+              >
+                <UpsellingContent />
+              </OBottomPopup>
+            )
+          )}
 				</>
 			)}
-			<OModal
-				open={modalIsOpen}
-				onClose={() => setModalIsOpen(false)}
-				entireModal
-				customClose
-			>
-				{actualProduct && (
-					<ProductForm
-						product={actualProduct}
-						businessId={actualProduct?.api?.businessId}
-						businessSlug={business.slug}
-						onSave={() => handleSaveProduct()}
-						onClose={() => setModalIsOpen(false)}
-					/>
-				)}
-			</OModal>
 		</>
 	)
 }

package/themes/original/src/types/index.tsx

@@ -221,7 +221,7 @@ export interface SingleProductCardParams {
 	product: any;
 	isSoldOut: boolean;
 	onProductClick: any;
-	productAddedToCart?: any
+	productAddedToCartLength: number
 }
 export interface BusinessInformationParams {
 	navigation?: any,
@@ -253,6 +253,7 @@ export interface NotFoundSourceParams {
 }
 export interface OrdersOptionParams {
 	orderList?: any,
+	franchiseId?: any,
 	activeOrders?: boolean,
 	pagination?: any,
 	titleContent?: string,
@@ -438,6 +439,10 @@ export interface UpsellingProductsParams {
 	cart?: any;
 	handleCloseUpsellingPage: () => void;
 	isFromCart?: boolean;
+	isPage?: boolean;
+	products?: any;
+	onNavigationRedirect?: any;
+	onGoBack?: any;
 }
 
 export interface GoogleMapsParams {
@@ -478,4 +483,5 @@ export interface HelpAccountAndPaymentParams {
   
 export interface MessageListingParams {
 	navigation: any;
+	franchiseId?: any;
 }

package/themes/uber-eats/src/components/ProductForm/index.tsx

@@ -29,7 +29,7 @@ import {
   WrapperArrowIcon
 
 } from './styles'
-import { OButton, OInput, OText } from '../shared'
+import { OButton, OInput, OText, OIcon } from '../shared'
 import { ProductOptionSubOption } from '../ProductOptionSubOption'
 import { NotFoundSource } from '../NotFoundSource'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
@@ -119,10 +119,24 @@ export const ProductOptionsUI = (props: any) => {
       backgroundColor: theme.colors.lightGray,
       padding: 2,
       borderRadius: 20
+    },
+    productTagWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    productTagImageStyle: {
+      width: 32,
+      height: 32,
+      borderRadius: 8,
+      resizeMode: 'cover'
+    },
+    productTagNameStyle: {
+      paddingHorizontal: 6,
+      marginRight: 5
     }
   })
 
-  const [{ parsePrice }] = useUtils()
+  const [{ optimizeImage, parsePrice }] = useUtils()
   const [, t] = useLanguage()
   const [orderState] = useOrder()
   const [{ auth }] = useSession()
@@ -242,6 +256,33 @@ export const ProductOptionsUI = (props: any) => {
                     <OText color={theme.colors.gray} style={{ textAlign: 'left', marginBottom: 10 }}>{product?.description || productCart?.description}</OText>
                   </ProductDescription>
                 )}
+                <View style={{ marginHorizontal: 30 }}>
+                  <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerStyle={{ paddingBottom: 20 }}
+                  >
+                    {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 size={14} style={styles.productTagNameStyle}>{tag.name}</OText>
+                      </View>
+                    ))}
+                  </ScrollView>
+                </View>
                 {loading && !product ? (
                   <>
                     {[...Array(2)].map((item, i) => (