ordering-ui-react-native 0.18.39 → 0.18.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.39",
+  "version": "0.18.40",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/DriverMap/index.tsx

@@ -453,7 +453,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 {order?.delivery_datetime_utc
                   ? parseDate(order?.delivery_datetime_utc)
                   : parseDate(order?.delivery_datetime, { utc: false })}
-                {` - ${order?.paymethod?.name}`}
+                {` - ${t(order?.paymethod?.name?.replace(/\s+/g, '_')?.toUpperCase(), order?.paymethod?.name)}`}
               </OText>
               <OText weight="bold">
                 {t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking, Pressable, Image } from 'react-native';
 import FastImage from 'react-native-fast-image'
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -45,6 +45,7 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
+	const [imageRealSize, setImageRealSize] = useState({ width: 16, height: 9, loading: true })
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 	const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
@@ -61,7 +62,7 @@ export const BusinessBasicInformation = (
 			height: 150,
 		},
 		headerStyle: {
-			height: isChewLayout ? 170 : 260,
+			aspectRatio: imageRealSize?.width / imageRealSize?.height
 		},
 		logoStyle: {
 			width: 72,
@@ -195,6 +196,20 @@ export const BusinessBasicInformation = (
 		}
 	}, [businessState?.business])
 
+	useEffect(() => {
+		const bannerImage = header || businessState?.business?.header
+		if (!bannerImage) {
+			setImageRealSize({ width: 16, height: 9, loading: false })
+			return
+		}
+		Image.getSize(bannerImage, (width: number, height: number) => {
+			setImageRealSize({ width: width, height: height, loading: false });
+		  }, (error: any) => {
+			setImageRealSize({ ...imageRealSize, loading: false });
+			console.log(error);
+		  });
+	}, [header, businessState?.business?.header])
+
 	const SocialIcons = () => {
 		return (
 			<>
@@ -283,7 +298,7 @@ export const BusinessBasicInformation = (
 							? styles.businesInfoheaderStyle
 							: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
 					}
-					{...(!loading && {
+					{...(!loading && !imageRealSize?.loading && {
 						source: (header || businessState?.business?.header || typeof theme?.images?.dummies?.businessHeader === 'string') ? {
 							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header || theme?.images?.dummies?.businessHeader
 						} : theme?.images?.dummies?.businessHeader

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

@@ -8,9 +8,6 @@ export const BusinessContainer = styled.View`
 export const BusinessHeader = styled.ImageBackground`
   width: 100%;
   position: relative;
-  max-height: 258px;
-  height: 258px;
-  resize-mode: cover;
 `;
 export const BusinessLogo = styled.View`
   position: absolute;

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

@@ -95,6 +95,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     },
     searchInput: {
       fontSize: 12,
+      height: 44
     },
     productsContainer: {
       marginTop: 20
@@ -249,7 +250,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: isChewLayout ? 20 : 40,
+        paddingHorizontal: hideBrowse && !isChewLayout ? 40 : 20,
       }}>
         {hideBrowse && !isChewLayout && (
           <OButton
@@ -275,6 +276,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           />
         )}
         <HeaderTitle ph={20} text={t('SEARCH', 'Search')} />
+        <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
       </View>
       <BContainer
         style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
@@ -287,7 +289,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
             onSearch={(val: string) => handleChangeTermValue(val)}
             value={termValue}
-            iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
           />
         </SearchWrapper>
         <OText size={12} lineHeight={20} color={theme.colors.textThird} mLeft={5}>

package/themes/original/src/components/BusinessProductsListing/UpsellingRedirect.tsx

@@ -13,7 +13,7 @@ const UpsellingRedirectUI = (props: any) => {
     if (!upsellingProducts.loading) {
       if (upsellingProducts?.products?.length) {
         onRedirect &&
-          onRedirect('UpsellingPage', props)
+          onRedirect('UpsellingPage', {...props, products: upsellingProducts?.products })
       } else {
         handleUpsellingPage && handleUpsellingPage()
       }

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

@@ -139,6 +139,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const [searchBarHeight, setSearchBarHeight] = useState(60)
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [viewedCategory, setViewedCategory] = useState<any>(null)
+  const [showTitle, setShowTitle] = useState(false)
 
   const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
   const isQuickAddProduct = configs?.add_product_with_one_click?.value === '1'
@@ -244,6 +245,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const handlePageScroll = useCallback(({ nativeEvent }: any) => {
     const scrollOffset = nativeEvent.contentOffset.y
+    setShowTitle(scrollOffset > 30)
+
     if (businessState?.business?.lazy_load_products_recommended) {
       const height = nativeEvent.contentSize.height
       const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
@@ -398,6 +401,17 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                     />
                   </TopActions>
                 )}
+                {showTitle && (
+                  <OText
+                    size={16}
+                    style={{ flex: 1, textAlign: 'center' }}
+                    weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                    numberOfLines={2}
+                    ellipsizeMode='tail'
+                  >
+                    {business?.name}
+                  </OText>
+                )}
                 {!errorQuantityProducts && (
                   <View style={{ ...styles.headerItem }}>
                     <TouchableOpacity

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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { useLanguage, useConfig } from 'ordering-components/native';
+import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CCContainer, CCNotCarts, CCList, CheckoutAction } from './styles';
+import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
 
 import { Cart } from '../Cart';
 import { OButton, OText } from '../shared';
@@ -19,12 +19,18 @@ export const CartContent = (props: any) => {
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ configs }] = useConfig()
+	const [{ parsePrice }] = useUtils();
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
 
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
 	const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
 
+	const totalCartsPrice = cartsAvailable?.length && cartsAvailable.reduce((total: any, cart: any) => { return total + cart?.total }, 0)
+	const totalCartsFee = cartsAvailable?.length && cartsAvailable
+		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
+		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
+
 	const handleCheckoutRedirect = () => {
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
@@ -80,6 +86,9 @@ export const CartContent = (props: any) => {
 										isMultiCheckout={isMultiCheckout}
 										hideUpselling
 										businessConfigs={cart?.business?.configs}
+										hideCouponInput={configs?.multi_business_checkout_coupon_input_style?.value === 'group'}
+                    hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
+										hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
 									/>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
 								</>
@@ -87,18 +96,51 @@ export const CartContent = (props: any) => {
 						</CCList>
 					))}
 					{isMultiCheckout && (
-						<CheckoutAction style={{ marginTop: 0 }}>
-							<OButton
-								text={t('CHECKOUT', 'Checkout')}
-								bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
-								isDisabled={!cartsAvailable.length}
-								borderColor={theme.colors.primary}
-								imgRightSrc={null}
-								textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-								onClick={() => handleCheckoutRedirect()}
-								style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-							/>
-						</CheckoutAction>
+						<>
+							{!!cartsAvailable.length && (
+								<ChCartsTotal>
+									{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
+                      </OText>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {parsePrice(totalCartsFee)}
+                      </OText>
+                    </View>
+                  )}
+                  {cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
+                    configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {t('DRIVER_TIP', 'Driver tip')}
+                      </OText>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+                      </OText>
+                    </View>
+                  )}
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+                      {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+                    </OText>
+                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+                  </View>
+								</ChCartsTotal>
+							)}
+							<CheckoutAction style={{ marginTop: 0 }}>
+								<OButton
+									text={t('CHECKOUT', 'Checkout')}
+									bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
+									isDisabled={!cartsAvailable.length}
+									borderColor={theme.colors.primary}
+									imgRightSrc={null}
+									textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+									onClick={() => handleCheckoutRedirect()}
+									style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+								/>
+							</CheckoutAction>
+						</>
 					)}
 				</>
 			)}

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

@@ -23,3 +23,7 @@ export const CheckoutAction = styled.View`
   margin-top: 10px;
   margin-bottom: 10px;
 `
+
+export const ChCartsTotal = styled.View`
+  margin-bottom: 16px;
+`

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

@@ -115,11 +115,12 @@ const MultiCheckoutUI = (props: any) => {
     }
   }
 
-  const loyaltyRewardValue = creditPointPlanOnBusiness?.accumulation_rate
-    ? Math.round(
-      openCarts.reduce((sum: any, cart: any) => sum + cart?.subtotal + getIncludedTaxes(cart), 0) /
-      creditPointPlanOnBusiness?.accumulation_rate
-    ) : 0
+  const subtotalAmount = openCarts.reduce((sum: any, cart: any) => sum + (cart?.subtotal + getIncludedTaxes(cart)), 0) *
+    creditPointPlanOnBusiness?.accumulation_rate
+
+  const loyaltyRewardValue = (creditPointPlanOnBusiness?.accumulation_rate
+    ? (Math.trunc(subtotalAmount * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2)
+    : 0)
 
   const handleMomentClick = () => {
     if (isPreOrder) {

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

@@ -75,7 +75,7 @@ const OrderSummaryUI = (props: any) => {
 
   const getIncludedTaxes = () => {
     if (cart?.taxes === null || !cart?.taxes) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
+      return cart?.business?.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
         return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
@@ -83,7 +83,9 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
-  const loyaltyRewardValue = Math.round((cart?.subtotal + getIncludedTaxes()) / loyaltyRewardRate)
+  const loyaltyRewardValue = ((
+    Math.trunc(((cart?.subtotal + getIncludedTaxes()) * loyaltyRewardRate) * 100) / 100
+  ).toFixed(configs.format_number_decimal_length?.value ?? 2), 10)
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)

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

@@ -205,6 +205,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 	const [viewedProduct, setViewedProduct] = useState<any>(null)
+	const [showTitle, setShowTitle] = useState(false)
 
 	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
   const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
@@ -362,7 +363,7 @@ export const ProductOptionsUI = (props: any) => {
 	);
 
 	const handleScroll = ({ nativeEvent: { contentOffset, layoutMeasurement } }: any) => {
-
+		setShowTitle(contentOffset.y > 30)
 		const _topOption = Object.keys(optionLayout).find(((option: any) => Math.abs(contentOffset?.y - layoutMeasurement?.height - optionLayout[option]?.y) < 20))
 		if (_topOption) {
 			const _topOptionId = Number(_topOption.replace('id:', ''))
@@ -526,12 +527,24 @@ export const ProductOptionsUI = (props: any) => {
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<View style={styles.wrapperNavbar}>
-				<NavBar
-					onActionLeft={() => handleGoBack()}
-					showCall={false}
-					btnStyle={{ paddingLeft: 0 }}
-					paddingTop={4}
-				/>
+				<TopHeader>
+					<>
+						<TopActions onPress={() => handleGoBack()}>
+							<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+						</TopActions>
+						{showTitle && (
+							<OText
+								size={16}
+								style={{ flex: 1, textAlign: 'center' }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+							>
+								{product?.name}
+							</OText>
+						)}
+					</>
+				</TopHeader>
 			</View>
 			{!error && (
 				<ScrollView

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
@@ -11,6 +11,7 @@ import { OIcon, OText, OButton } from '../shared';
 import { SingleOrderCardParams } from '../../types';
 import { OAlert } from '../../../../../src/components/shared'
 import { OrderEta } from '../OrderDetails/OrderEta'
+import { useIsFocused } from '@react-navigation/native';
 import {
   InnerContainer,
   Logo,
@@ -44,6 +45,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [, t] = useLanguage();
   const [{ carts }] = useOrder()
   const theme = useTheme();
+  const isFocused = useIsFocused();
 
   const [reorderSelected, setReorderSelected] = useState<number | null>(null);
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
@@ -198,6 +200,10 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const hideFavorite = theme?.orders?.components?.favorite?.hidden
   const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
 
+  useEffect(() => {
+    if (isFocused) setReorderSelected(null)
+  }, [isFocused])
+
   return (
     <>
       <CardAnimation

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

@@ -288,7 +288,11 @@ const ProfileUI = (props: ProfileParams) => {
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
 				/>
-				<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					enabled={Platform.OS === 'ios' ? true : false}
+					style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}
+				>
 					<CenterView>
 						<View style={styles.photo}>
 							{user?.photo ? (

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

@@ -63,12 +63,12 @@ export const WalletTransactions = (props: any) => {
           (transactionsList?.error ||
             !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
         (
-          <NotFoundSource
-            content={transactionsList?.error
+          <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>
+            {transactionsList?.error
               ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
               : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
             }
-          />
+          </OText>
         )}
       </View>
     </Container>

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

@@ -213,9 +213,9 @@ const WalletsUI = (props: any) => {
                   <LoyaltyContent>
                     <LoyaltyWrapp>
                       <OText size={20}>
-                        {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
+                        {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}`}
                       </OText>
-                      {/* {loyaltyLevel.image ? (
+                      {loyaltyLevel.image ? (
                         <FastImage
                           style={styles.logoStyle}
                           source={{
@@ -230,7 +230,7 @@ const WalletsUI = (props: any) => {
                           source={theme.images.dummies.loyaltyLevel}
                           resizeMode='contain'
                         />
-                      )} */}
+                      )}
                       <OText
                         size={22}
                         weight='bold'