ordering-ui-react-native 0.14.41 → 0.14.42-release

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

@@ -5,28 +5,35 @@ export const Container = styled.View`
   align-items: center;
   justify-content: space-between;
   padding: 10px;
+  width: 100%;
 `
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  flex: 1;
+  width: 45%;
   align-items: center;
 `
 
 export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
+  justify-content: flex-start;
   margin-horizontal: 5px;
+  flex: 1;
+  width: 60px;
+
 `
 
 export const PositionControl = styled.View`
   flex-direction: row;
   align-items: center;
   margin-right: 5px;
+  flex: 1;
 `
 
 export const Checkbox = styled.TouchableOpacity`
 `
 
 export const Circle = styled.TouchableOpacity`
+  margin: 0 1px;
 `

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

@@ -7,7 +7,7 @@ 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'
@@ -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
 		}
 	});
 
@@ -97,13 +104,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
 			]}
 			onPress={() => onProductClick?.(product)}>
-				{productAddedToCartLength > 0 && (
-					<QuantityContainer style={[styles.quantityContainer, {
-						transform: [{ translateX: 10 }, { translateY: -10 }],
-					}]}>
-						<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</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}
@@ -113,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}>{product?.price ? parsePrice(product?.price) : ''}</OText>
+					{product?.offer_price !== null && product?.in_offer && (
+						<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+					)}
+				</PricesContainer>
 				<OText
 					size={10}
 					numberOfLines={2}
@@ -125,14 +135,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			<FastImage
-				style={styles.productStyle}
-				source={{
-					uri: optimizeImage(product?.images, 'h_75,c_limit'),
-					priority: FastImage.priority.normal,
-				}}
-				resizeMode={FastImage.resizeMode.cover}
-			/>
+			{product?.images ? (
+				<FastImage
+					style={styles.productStyle}
+					source={{
+						uri: optimizeImage(product?.images, 'h_75,c_limit'),
+						priority: FastImage.priority.normal,
+					}}
+					resizeMode={FastImage.resizeMode.cover}
+				/>
+			) : (
+				<OIcon
+					src={theme?.images?.dummies?.product}
+					style={styles.productStyle}
+				/>
+			)}
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>

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

@@ -27,3 +27,7 @@ export const QuantityContainer = styled.View`
   align-items: center;
   justify-content: center;
 `
+export const PricesContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+`

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

@@ -37,19 +37,33 @@ const StripeElementsFormUI = (props: any) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 
-	const billingDetails = {
-		name: `${user.name} ${user.lastname}`,
-		email: user.email,
-		addressLine1: user.address
-	};
+  let billingDetails: any = {}
+
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
+
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
+
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
 	const createPayMethod = async () => {
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			setCreatePmLoading(true)
-			const { paymentMethod } = await createPaymentMethod({
-				type: 'Card',
-				billingDetails,
-			});
+			const { paymentMethod } = await createPaymentMethod(params);
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({
@@ -79,11 +93,12 @@ const StripeElementsFormUI = (props: any) => {
 			createPayMethod();
 			return
 		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
-			const { setupIntent, error } = await confirmSetupIntent(requirements, {
-				type: 'Card',
-				billingDetails,
-			});
+			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
 			if (setupIntent?.status === 'Succeeded') {
 				stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);

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

@@ -1,51 +1,83 @@
-import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components/native'
+import React, { Mixin } from 'react'
+import { useLanguage } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { TaxInformationContainer, ProductContainer } from './styles'
 import { OText } from '../shared'
 
 interface taxInformationParams {
-  data: { name: string, description?: string, rate: string | number, type: number, fixed?: number, percentage?: number, id: number },
-  products: Array<any>
+  data: {
+    name: string,
+    description?: string,
+    rate: string | number,
+    type: number,
+    fixed?: number,
+    percentage?: number,
+    id: number,
+    discounts?: any
+  } | null,
+  products: Array<any>,
+  type: string
 }
 
 export const TaxInformation = (props: taxInformationParams) => {
   const {
     data,
-    products
+    products,
+    type
   } = props
 
   const [, t] = useLanguage()
-  const [{ parsePrice }] = useUtils()
 
-  const isTax = typeof data?.rate === 'number'
-  const TaxFeeString = isTax ? 'tax' : 'fee'
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
 
+  const getFilterValidation = (product: any) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find((offer : any) => offer?.name === data?.name)
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
   return (
     <TaxInformationContainer>
-      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {`${data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
-      </OText>
-      {data?.description && (
+      {!!data?.description ? (
+        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
+        </OText>
+      ) : (
         <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
-          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
         </OText>
       )}
-      <OText>{t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:</OText>
-      <ProductContainer>
-        {
-          products.filter((product: any) => isTax ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null) : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))).map(product => (
-            <SingleProductCard
-              key={product.id}
-              product={product}
-              isSoldOut={false}
-              businessId={product?.business_id}
-            />
-          ))
-        }
-      </ProductContainer>
+      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+        <>
+          <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
+          <ProductContainer>
+            {
+              products.filter((product: any) => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                  isSoldOut={false}
+                  businessId={product?.business_id}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
     </TaxInformationContainer>
   )
 }

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

@@ -33,8 +33,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		canOpenUpselling,
 		setCanOpenUpselling,
 		isFromCart,
-    onNavigationRedirect,
-    onGoBack
+		onNavigationRedirect,
+		onGoBack
 	} = props
 
 	const theme = useTheme();
@@ -70,17 +70,18 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const [{ parsePrice }] = useUtils()
 	const [, t] = useLanguage()
 	const { bottom } = useSafeAreaInsets()
+	const [isCheckout, setIsCheckout] = useState(false)
 
-  const cart = carts?.[`businessId:${props.businessId}`] ?? {}
-  const cartProducts = cart?.products?.length
-    ? cart?.products.map((product: any) => product.id)
-    : []
+	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)) ?? []
-    : []
+  	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 && !props.products) {
@@ -94,6 +95,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
+	useEffect(() => {
+		isCheckout && Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
+	}, [cart, isCheckout])
+
 	const handleFormProduct = (product: any) => {
     onNavigationRedirect && onNavigationRedirect('ProductDetails', {
       product: product,
@@ -155,12 +160,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
           </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
@@ -169,6 +168,12 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
               onNavigationRedirect={onNavigationRedirect}
             />
           </View>
+		  {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>
+          }
         </ScrollView>
         <View
           style={{
@@ -181,7 +186,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
             text={t('CHECKOUT', 'Checkout')}
             style={{...styles.closeUpsellingButton}}
             textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => handleUpsellingPage()}
+            onClick={() => {
+				handleUpsellingPage()
+				setIsCheckout(true)
+			}}
           />
         </View>
       </>

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

@@ -253,6 +253,7 @@ export interface NotFoundSourceParams {
 }
 export interface OrdersOptionParams {
 	orderList?: any,
+	franchiseId?: any,
 	activeOrders?: boolean,
 	pagination?: any,
 	titleContent?: string,
@@ -482,4 +483,5 @@ export interface HelpAccountAndPaymentParams {
   
 export interface MessageListingParams {
 	navigation: any;
+	franchiseId?: any;
 }