ordering-ui-react-native 0.14.38 → 0.14.40-release

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

@@ -32,7 +32,8 @@ import {
 	ProductActions,
 	ExtraOptionWrap,
 	WeightUnitSwitch,
-	WeightUnitItem
+	WeightUnitItem,
+	TopActions
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -211,7 +212,9 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const handleRedirectLogin = () => {
-		navigation.navigate('Login');
+		navigation.navigate('Login', {
+			store_slug:  props.businessSlug
+		});
 	};
 
 	const handleSwitchQtyUnit = (val: string) => {
@@ -288,20 +291,16 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
-  const handleGoBack = navigation?.canGoBack()
-    ? () => navigation.goBack()
-    : () => navigation.navigate('Business', { store: props.businessSlug })
+	const handleGoBack = navigation?.canGoBack()
+		? () => navigation.goBack()
+		: () => navigation.navigate('Business', { store: props.businessSlug })
 
 	return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <TopHeader>
-        <OButton
-          imgLeftSrc={theme.images.general.arrow_left}
-          imgRightSrc={null}
-          style={styles.btnBackArrow}
-          onClick={() => handleGoBack()}
-          imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
-        />
+		<SafeAreaView style={{ flex: 1 }}>
+			<TopHeader>
+				<TopActions onPress={() => handleGoBack()}>
+					<OIcon src={theme.images.general.arrow_left} width={15} />
+				</TopActions>
 			</TopHeader>
 			<ScrollView>
 				{!error && (
@@ -352,15 +351,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>
@@ -384,19 +381,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>
 
@@ -428,12 +424,12 @@ export const ProductOptionsUI = (props: any) => {
 												style={{ flex: 1, marginBottom: 10 }}>
 												{product?.name || productCart.name}
 											</OText>
-											{product?.calories && (
+											{!!product?.calories && (
 												<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
 												</OText>
 											)}
 										</View>
-										{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+										{((!!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'))
@@ -452,14 +448,14 @@ export const ProductOptionsUI = (props: any) => {
 										) : (
 											<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 && (
+												{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>
+													}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 												)}
 											</View>
 										)}
@@ -481,7 +477,7 @@ export const ProductOptionsUI = (props: any) => {
 										key={tag.id}
 										style={styles.productTagWrapper}
 									>
-										{tag?.image ? (
+										{!!tag?.image ? (
 											<OIcon
 												url={optimizeImage(tag?.image, 'h_40,c_limit')}
 												style={styles.productTagImageStyle}
@@ -764,7 +760,7 @@ export const ProductOptionsUI = (props: any) => {
 						</WrapContent>
 					</View>
 				)}
-				{error && error.length > 0 && (
+				{!!error && error.length > 0 && (
 					<NotFoundSource content={error[0]?.message || error[0]} />
 				)}
 			</ScrollView>
@@ -791,7 +787,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}
@@ -815,36 +811,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
@@ -913,7 +911,7 @@ export const ProductOptionsUI = (props: any) => {
 					</View>
 				</ProductActions>
 			)}
-    </SafeAreaView>
+		</SafeAreaView>
 	);
 };
 

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

@@ -5,6 +5,12 @@ 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;

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import {
 	useUtils,
 	useLanguage,
-	ProductOptionSuboption as ProductSubOptionController,
+	ProductOptionSuboption as ProductSubOptionController
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { StyleSheet } from 'react-native'
@@ -137,7 +137,8 @@ const styles = StyleSheet.create({
 export const ProductOptionSubOption = (props: any) => {
 	const productOptionSubOptionProps = {
 		...props,
-		UIComponent: ProductOptionSubOptionUI
+		UIComponent: ProductOptionSubOptionUI,
+		isOrigin: true
 	}
 
 	return (

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}

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