ordering-ui-react-native 0.17.39 → 0.17.40-release

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { View, StyleSheet, ScrollView } from 'react-native';
 import {
 	PaymentOptionStripe,
@@ -18,13 +18,15 @@ import {
 	OSItemActions,
 } from '../PaymentOptionStripe/styles';
 
-const StripeCardsListUI = (props: any) => {
+export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
 		cardSelected,
 		cardsList,
 		handleCardClick,
+		setAddCardOpen,
+		gateway
 	} = props;
 
 	const theme = useTheme();
@@ -32,11 +34,19 @@ const StripeCardsListUI = (props: any) => {
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
 
+	const paymethodsWithoutSaveCards = ['credomatic']
+
 	const handleCardSelected = (card: any) => {
 		handleCardClick(card);
 		onSelectCard(card);
 	}
 
+	useEffect(() => {
+		if (!cardsList && !cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+			setAddCardOpen(true)
+		}
+	}, [cardsList?.loading])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
@@ -128,7 +138,7 @@ const styles = StyleSheet.create({
 	},
 	cardsList: {
 		width: '100%',
-		maxHeight: 130
+		maxHeight: 150
 	},
 })
 

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

@@ -28,7 +28,12 @@ const StripeElementsFormUI = (props: any) => {
 		onCancel,
 		cart,
 		merchantId,
-		businessIds
+		businessIds,
+		setMethodPaySupported,
+		placeByMethodPay,
+		methodPaySupported,
+		setPlaceByMethodPay,
+		cartTotal
 	} = props;
 
 	const theme = useTheme();
@@ -62,24 +67,24 @@ const StripeElementsFormUI = (props: any) => {
 
 	if (user?.address) {
 		billingDetails.address = {
-      line1: user?.address
-    }
+			line1: user?.address
+		}
 	}
 
 	const createPayMethod = async () => {
 		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+			params.paymentMethodData.billingDetails = { ...billingDetails, token: card?.last4 }
 		}
 		try {
 			setCreatePmLoading(true)
 			const { paymentMethod, error } = await createPaymentMethod(params);
 
-      if (error) {
-        setErrors(error?.message);
-        setCreatePmLoading(false)
-        return
-      }
+			if (error) {
+				setErrors(error?.message);
+				setCreatePmLoading(false)
+				return
+			}
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({
@@ -102,7 +107,7 @@ const StripeElementsFormUI = (props: any) => {
 			setErrors(error?.message || error?.toString());
 		}
 	}
-	
+
 	const handleSaveCard = async () => {
 		setErrors('');
 		if (!requirements) {
@@ -111,7 +116,7 @@ const StripeElementsFormUI = (props: any) => {
 		}
 		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+			params.paymentMethodData.billingDetails = { ...billingDetails, token: card?.last4 }
 		}
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
@@ -119,8 +124,8 @@ const StripeElementsFormUI = (props: any) => {
 			if (setupIntent?.status === 'Succeeded') {
 				if (businessIds) {
 					businessIds.forEach((_businessId: any, index: any) => {
-					  const _isNewCard = index === 0
-					  stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
+						const _isNewCard = index === 0
+						stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
 					})
 				} else {
 					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
@@ -172,12 +177,12 @@ const StripeElementsFormUI = (props: any) => {
 	}, []);
 
 	return (
-		<View style={{ ...styles.container, height: height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
+		<View style={{ ...styles.container, height: methodsPay?.includes(paymethod) ? 'auto' : height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
 					<StripeProvider
 						publishableKey={publicKey}
-						merchantIdentifier={`merchant.${merchantId}`}
+						merchantIdentifier={merchantId}
 						urlScheme={merchantId}
 					>
 						{methodsPay?.includes(paymethod) ? (
@@ -185,9 +190,14 @@ const StripeElementsFormUI = (props: any) => {
 								handleSource={handleSource}
 								onCancel={onCancel}
 								cart={cart}
+								cartTotal={cartTotal}
 								setErrors={setErrors}
 								paymethod={paymethod}
 								devMode={publicKey?.includes('test')}
+								setMethodPaySupported={setMethodPaySupported}
+								placeByMethodPay={placeByMethodPay}
+								methodPaySupported={methodPaySupported}
+								setPlaceByMethodPay={setPlaceByMethodPay}
 							/>
 						) : (
 							<CardField
@@ -195,6 +205,9 @@ const StripeElementsFormUI = (props: any) => {
 								cardStyle={{
 									backgroundColor: '#FFFFFF',
 									textColor: '#000000',
+									borderWidth: 1,
+									borderRadius: 8,
+									borderColor: theme.colors.border
 								}}
 								style={{
 									width: '100%',

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

@@ -1,252 +1,266 @@
 import React, { useState, useEffect } from 'react'
 import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
 import {
-	UpsellingPage as UpsellingPageController,
-	useUtils,
-	useLanguage,
-	useOrder
+  UpsellingPage as UpsellingPageController,
+  useUtils,
+  useLanguage,
+  useOrder,
+  useConfig
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OBottomPopup, OButton } from '../shared'
 import { UpsellingProductsParams } from '../../types'
 import {
-	Container,
-	UpsellingContainer,
-	Item,
-	Details,
-	AddButton,
-	TopBar,
-	TopActions
+  Container,
+  UpsellingContainer,
+  Item,
+  Details,
+  AddButton,
+  CartList,
+  CartDivider
 } from './styles'
 import { OrderSummary } from '../OrderSummary';
+import { Cart } from '../Cart';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
-	const {
-		isCustomMode,
-		upsellingProducts,
-		business,
-		handleUpsellingPage,
-		handleCloseUpsellingPage,
-		openUpselling,
-		canOpenUpselling,
-		setCanOpenUpselling,
-		isFromCart,
-		onNavigationRedirect,
-		onGoBack
-	} = props
+  const {
+    isCustomMode,
+    upsellingProducts,
+    business,
+    handleUpsellingPage,
+    openUpselling,
+    canOpenUpselling,
+    setCanOpenUpselling,
+    isFromCart,
+    onNavigationRedirect,
+    onGoBack
+  } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
 
-	const styles = StyleSheet.create({
-		imageStyle: {
-			width: 73,
-			height: 73,
-			resizeMode: 'cover',
-			borderRadius: 7.6,
-		},
-		closeUpsellingButton: {
-			borderRadius: 7.6,
-			borderColor: theme.colors.primary,
-			backgroundColor: theme.colors.primary,
-			borderWidth: 1,
-			alignSelf: 'center',
-			height: 44,
-			shadowOpacity: 0,
-			width: '80%',
-		},
-		cancelBtn: {
-			paddingHorizontal: 18,
-			borderWidth: 1,
-			borderRadius: 7.6,
-			borderColor: theme.colors.textSecondary,
-			height: 38
-		},
-		headerItem: {
-			flexDirection: 'row',
-			alignItems: 'center',
-			marginVertical: 2,
-			marginHorizontal: 20,
-		},
-		btnBackArrow: {
-			borderWidth: 0,
-			width: 26,
-			height: 26,
-			backgroundColor: theme.colors.clear,
-			borderColor: theme.colors.clear,
-			shadowColor: theme.colors.clear,
-			paddingLeft: 0,
-			paddingRight: 0,
-			marginLeft: 20,
-			marginBottom: 10
-		},
-	})
+  const styles = StyleSheet.create({
+    imageStyle: {
+      width: 73,
+      height: 73,
+      resizeMode: 'cover',
+      borderRadius: 7.6,
+    },
+    closeUpsellingButton: {
+      borderRadius: 7.6,
+      borderColor: theme.colors.primary,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 1,
+      alignSelf: 'center',
+      height: 44,
+      shadowOpacity: 0,
+      width: '80%',
+    },
+    cancelBtn: {
+      paddingHorizontal: 18,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      borderColor: theme.colors.textSecondary,
+      height: 38
+    },
+    headerItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginVertical: 2,
+      marginHorizontal: 20,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 26,
+      height: 26,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginLeft: 20,
+      marginBottom: 10
+    },
+  })
 
-	const [modalIsOpen, setModalIsOpen] = useState(false)
-	const [{ carts }] = useOrder()
-	const [{ parsePrice }] = useUtils()
-	const [, t] = useLanguage()
-	const { bottom } = useSafeAreaInsets()
-	const [isCheckout, setIsCheckout] = useState(false)
+  const [{ carts }] = useOrder()
+  const [{ parsePrice }] = useUtils()
+  const [{ configs }] = useConfig()
+  const [, t] = useLanguage()
+  const { bottom } = useSafeAreaInsets()
+  const [isCartsLoading, setIsCartsLoading] = useState(false)
 
-	const cart = carts?.[`businessId:${props.businessId}`] ?? {}
-	const cartProducts = cart?.products?.length
-		? cart?.products.map((product: any) => product.id)
-		: []
+  const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const showCartList = isChewLayout
+  const commentDelayTime = isChewLayout ? 500 : null
 
-	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)) ?? []
-		: []
+  const cart = carts?.[`businessId:${props.businessId}`] ?? {}
+  const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
+  const cartProducts = cart?.products?.length
+    ? cart?.products.map((product: any) => product.id)
+    : []
 
-	useEffect(() => {
-		if (!isCustomMode && !props.products) {
-			if (!upsellingProducts.loading) {
-				if (upsellingProducts?.products?.length && !isFromCart) {
-					setCanOpenUpselling && setCanOpenUpselling(true)
-				} else {
-					handleUpsellingPage && handleUpsellingPage()
-				}
-			}
-		}
-	}, [upsellingProducts.loading, upsellingProducts?.products.length])
+  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)) ?? []
+    : []
 
-	const handleFormProduct = (product: any) => {
-		onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-			product: product,
-			businessId: product?.api?.businessId,
-			businessSlug: business.slug,
-		})
-	}
+  useEffect(() => {
+    if (!isCustomMode && !props.products) {
+      if (!upsellingProducts.loading) {
+        if (upsellingProducts?.products?.length && !isFromCart) {
+          setCanOpenUpselling && setCanOpenUpselling(true)
+        } else {
+          handleUpsellingPage && handleUpsellingPage(cart)
+        }
+      }
+    }
+  }, [upsellingProducts.loading, upsellingProducts?.products.length])
 
-	const UpsellingLayout = () => {
-		return (
-			<Container>
-				<UpsellingContainer
-					horizontal
-					showsHorizontalScrollIndicator={false}
-					contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
-				>
-					{
-						!upsellingProducts.loading && (
-							<>
-								{
-									!upsellingProducts.error ? productsList.map((product: any, i: number) => (
-										<Item key={`${product.id}_${i}`}>
-											<View style={{ flexBasis: '57%' }}>
-												<Details>
-													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
-													<OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
-												</Details>
-												<AddButton onPress={() => handleFormProduct(product)}>
-													<OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
-												</AddButton>
-											</View>
-											<View>
-												<OIcon url={product.images} style={styles.imageStyle} />
-											</View>
-										</Item>
-									)) : (
-										<OText>
-											{upsellingProducts.message}
-										</OText>
-									)
-								}
-							</>
-						)
-					}
-				</UpsellingContainer>
-			</Container>
-		)
-	}
+  const handleFormProduct = (product: any) => {
+    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+      product: product,
+      businessId: product?.api?.businessId,
+      businessSlug: business.slug,
+    })
+  }
 
-	const UpsellingContent = () => {
-		return (
-			<>
-				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
-					<OButton
-						imgRightSrc={null}
-						style={styles.btnBackArrow}
-						onClick={() => onGoBack()}
-						icon={AntDesignIcon}
-						iconProps={{
-							name: 'arrowleft',
-							size: 26
-						}}
-					/>
-				</View>
-				<ScrollView style={{ marginTop: 10, 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 ? Platform.OS === 'ios' ? 0 : 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()
-							setIsCheckout(true)
-						}}
-					/>
-				</View>
-			</>
-		)
-	}
+  const UpsellingLayout = () => {
+    return (
+      <Container>
+        <UpsellingContainer
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
+        >
+          {
+            !upsellingProducts.loading && (
+              <>
+                {
+                  !upsellingProducts.error ? productsList.map((product: any, i: number) => (
+                    <Item key={`${product.id}_${i}`}>
+                      <View style={{ flexBasis: '57%' }}>
+                        <Details>
+                          <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
+                          <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
+                        </Details>
+                        <AddButton onPress={() => handleFormProduct(product)}>
+                          <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
+                        </AddButton>
+                      </View>
+                      <View>
+                        <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
+                      </View>
+                    </Item>
+                  )) : (
+                    <OText>
+                      {upsellingProducts.message}
+                    </OText>
+                  )
+                }
+              </>
+            )
+          }
+        </UpsellingContainer>
+      </Container>
+    )
+  }
 
-	return (
-		<>
-			{isCustomMode ? (
-				<UpsellingLayout />
-			) : (
-				<>
-					{props.isPage ? (
-						<UpsellingContent />
-					) : (
-						canOpenUpselling && !modalIsOpen && (
-							<OBottomPopup
-								title={''}
-								open={openUpselling}
-								onClose={() => handleUpsellingPage()}
-								isStatusBar
-							>
-								<UpsellingContent />
-							</OBottomPopup>
-						)
-					)}
-				</>
-			)}
-		</>
-	)
+  const UpsellingContent = () => {
+    return (
+      <>
+        <View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 14 }}>
+          <TouchableOpacity onPress={() => onGoBack()} style={styles.btnBackArrow}>
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+          </TouchableOpacity>
+        </View>
+        <ScrollView style={{ marginTop: 10, 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}
+              commentDelayTime={commentDelayTime}
+              isCartPending={cart?.status === 2}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          </View>
+          {showCartList && cartList.map((cart: any, i: number) => (
+            <CartList key={i}>
+              <Cart
+                isFromUpselling
+                cart={cart}
+                cartuuid={cart.uuid}
+                hideUpselling
+                singleBusiness={props.singleBusiness}
+                isFranchiseApp={props.isFranchiseApp}
+                isCartsLoading={isCartsLoading}
+                setIsCartsLoading={setIsCartsLoading}
+                isMultiCheckout={isMultiCheckout}
+                onNavigationRedirect={props.onNavigationRedirect}
+              />
+              <CartDivider />
+            </CartList>
+          ))}
+        </ScrollView>
+        <View
+          style={{
+            alignItems: 'center',
+            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 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(cart)}
+          />
+        </View>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {isCustomMode ? (
+        <UpsellingLayout />
+      ) : (
+        <>
+          {props.isPage ? (
+            <UpsellingContent />
+          ) : (
+            canOpenUpselling && (
+              <OBottomPopup
+                title={''}
+                open={openUpselling}
+                onClose={() => handleUpsellingPage(cart)}
+                isStatusBar
+              >
+                <UpsellingContent />
+              </OBottomPopup>
+            )
+          )}
+        </>
+      )}
+    </>
+  )
 }
 
 export const UpsellingProducts = (props: UpsellingProductsParams) => {
-	const upsellingProductsProps = {
-		...props,
-		UIComponent: UpsellingProductsUI
-	}
-	return (
-		<UpsellingPageController {...upsellingProductsProps} />
-	)
+  const upsellingProductsProps = {
+    ...props,
+    UIComponent: UpsellingProductsUI
+  }
+  return (
+    <UpsellingPageController {...upsellingProductsProps} />
+  )
 }

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

@@ -47,4 +47,15 @@ export const TopBar = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 44px;
 	justify-content: center;
-`;
+`;
+
+export const CartList = styled.ScrollView`
+  padding: 10px 40px;
+  overflow: visible;
+`
+
+export const CartDivider = styled.View`
+  height: 8px;
+  background-color:  ${(props: any) => props.theme.colors.backgroundGray100};
+  margin: 20px -40px 0;
+`