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

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,15 @@ 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()
-	}, [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 +114,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 +125,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 +143,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) => (