ordering-ui-react-native 0.16.64-release → 0.16.65-release

package/package.json

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

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

@@ -46,7 +46,7 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 
 	const styles = StyleSheet.create({

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

@@ -76,7 +76,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
   ]
 
-  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const priceList = [
     { level: '1', content: '$' },

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

@@ -81,7 +81,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const isFocused = useIsFocused();
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 	const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
 

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -76,7 +76,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
 	const bgHeader = orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image

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

@@ -382,7 +382,7 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
 
-            {isMultiCheckout &&
+            {!isMultiCheckout &&
               cart &&
               cart?.valid &&
               orderState?.options?.type === 1 &&

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

@@ -20,7 +20,7 @@ export const CartContent = (props: any) => {
 	const [{ configs }] = useConfig()
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
 
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
 	const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
 

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

@@ -153,7 +153,7 @@ const CheckoutUI = (props: any) => {
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
 	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {

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

@@ -22,17 +22,20 @@ const DriverTipsUI = (props: any) => {
 	const {
 		driverTip,
 		driverTipsOptions,
-		optionSelected,
-		isFixedPrice,
+		isMulti,
+		cart,
 		isDriverTipUseCustom,
-		handlerChangeOption
+		handlerChangeOption,
+		isFixedPrice
 	} = props;
 
 	const [{ parsePrice }] = useUtils();
+	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
-
-	const theme = useTheme();
+	const [customTip, setCustomTip] = useState((!isMulti && isDriverTipUseCustom && !driverTipsOptions.includes(driverTip)) ?? false)
+	const currentTip = customTip ? parseFloat(driverTip || 0) > 0 : (!customTip && !driverTipsOptions.includes(driverTip) && parseFloat(driverTip || 0)) > 0
+	const [value, setvalue] = useState('');
 
 	const style = StyleSheet.create({
 		semicircle: {
@@ -48,53 +51,59 @@ const DriverTipsUI = (props: any) => {
 		}
 	})
 
-	const [value, setvalue] = useState('');
-
-	const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
+	const placeholderCurrency = !isFixedPrice ? `0%` : (configs?.currency_position?.value || 'left') === 'left'
 		? `${configs?.format_number_currency?.value}0`
 		: `0${configs?.format_number_currency?.value}`
 
 	const handleChangeDriverTip = (val: any) => {
 		const tip = Number(val)
 		if ((isNaN(tip) || tip < 0)) {
-		  setvalue(value)
-		  return
+			setvalue(value)
+			return
 		}
 		setvalue(val)
 	}
-	
+
 	return (
 		<DTContainer>
 			<DTLabel>
 				{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
 			</DTLabel>
 			<DTWrapperTips>
-				{!isDriverTipUseCustom && driverTipsOptions.map((option: any, i: number) => (
+				{driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
-						onPress={() => handlerChangeOption(option)}
+						onPress={() => {
+							handlerChangeOption(option)
+							setCustomTip(false)
+						}}
 					>
 						<DTCard
 							style={style.semicircle}
-							isActive={option === optionSelected}
+							isActive={(option === driverTip && !customTip)}
 						>
-							<OText size={12} numberOfLines={2} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+							<OText size={12} numberOfLines={2} color={(option === driverTip && !customTip) ? '#FFF' : theme.colors.textSecondary}>
 								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 							</OText>
 						</DTCard>
 					</TouchableOpacity>
 				))}
+				{isDriverTipUseCustom && (
+					<TouchableOpacity
+						onPress={() => setCustomTip(true)}
+					>
+						<DTCard
+							style={style.semicircle}
+							isActive={customTip}
+						>
+							<OText size={12} numberOfLines={2} color={customTip ? '#FFF' : theme.colors.textSecondary}>
+								{t('CUSTOM_TIP', 'Custom')}
+							</OText>
+						</DTCard>
+					</TouchableOpacity>
+				)}
 			</DTWrapperTips>
-			{(!isDriverTipUseCustom && !driverTipsOptions.includes(driverTip) && driverTip > 0) && (
-				<OText
-					color={theme.colors.error}
-					size={16}
-					style={{ marginTop: 10, textAlign: 'center' }}
-				>
-					{t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
-				</OText>
-			)}
-			{isDriverTipUseCustom && (
+			{customTip && (
 				<DTForm>
 					<DTWrapperInput>
 						<OInput
@@ -120,17 +129,18 @@ const DriverTipsUI = (props: any) => {
 							}}
 						/>
 					</DTWrapperInput>
-					{parseFloat(driverTip || 0) > 0 && (
-						<OText
-							color={theme.colors.error}
-							size={16}
-							style={{ marginTop: 10, textAlign: 'center' }}
-						>
-							{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}: {parsePrice(driverTip)}
-						</OText>
-					)}
 				</DTForm>
 			)}
+			{currentTip && (
+				<OText
+					color={theme.colors.primary}
+					size={16}
+					style={{ marginTop: 10, textAlign: 'center' }}
+				>
+					{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPrice &&
+						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+				</OText>
+			)}
 		</DTContainer>
 	)
 }

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

@@ -61,7 +61,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
       case 'paypal':
         return theme.images.general.paypal
       case 'stripe':
-        return theme.images.general.stripe
+        return theme.images.general.creditCard
       case 'stripe_direct':
         return theme.images.general.stripecc
       case 'stripe_connect':
@@ -83,7 +83,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
           isActive={paymethodSelected?.id === item.id}
         >
           <OIcon
-            src={getPayIcon(item.paymethod?.gateway)}
+            src={getPayIcon(item?.gateway ?? item.paymethod?.gateway)}
             width={20}
             height={20}
             color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}

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

@@ -21,6 +21,8 @@ import { AddressDetails } from '../AddressDetails'
 import { MultiCartsPaymethodsAndWallets } from '../MultiCartsPaymethodsAndWallets'
 import { Cart } from '../Cart'
 import { FloatingButton } from '../FloatingButton'
+import { DriverTips } from '../DriverTips'
+import { DriverTipsContainer } from '../Cart/styles'
 
 import {
   ChContainer,
@@ -78,8 +80,12 @@ const MultiCheckoutUI = (props: any) => {
 
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
+  const isMultiDriverTips = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data)
   const walletCarts = (Object.values(carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
+  const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
 
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
@@ -227,6 +233,35 @@ const MultiCheckoutUI = (props: any) => {
             <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
           </ChSection>
 
+          {
+            isMultiDriverTips &&
+            options?.type === 1 &&
+            validationFields?.fields?.checkout?.driver_tip?.enabled &&
+            openCarts.every((cart: any) => cart.business_id && cart.status !== 2) &&
+            driverTipsOptions && driverTipsOptions?.length > 0 &&
+          (
+            <ChSection>
+              <DriverTipsContainer>
+                <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
+                  {t('DRIVER_TIPS', 'Driver Tips')}
+                </OText>
+                <DriverTips
+                  isMulti
+                  carts={openCarts}
+                  businessIds={openCarts.map((cart: any) => cart.business_id)}
+                  driverTipsOptions={driverTipsOptions}
+                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                    ? openCarts[0]?.driver_tip
+                    : openCarts[0]?.driver_tip_rate}
+                  useOrderContext
+                />
+              </DriverTipsContainer>
+              <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+            </ChSection>
+          )}
+
           <ChSection>
             <ChCarts>
               <CartsHeader>

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

@@ -3,7 +3,6 @@ import { useLanguage, useUtils, useToast, ToastType, MultiOrdersDetails as Multi
 import { View, StyleSheet, BackHandler, TouchableOpacity } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { OText, OButton } from '../shared'
-import { Container } from '../../layouts/Container'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
 import { SingleOrderCard } from './SingleOrderCard'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
@@ -45,6 +44,12 @@ export const MultiOrdersDetailsUI = (props: any) => {
   const [, t] = useLanguage()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
   const [, { showToast }] = useToast();
+  const [{ configs }] = useConfig()
+
+  const isTaxIncludedOnPrice = orders.every((_order: any) => _order.taxes?.length ? _order.taxes?.every((_tax: any) => _tax.type === 1) : true)
+  const progressBarStyle = configs.multi_business_checkout_progress_bar_style?.value
+  const showBarInOrder = ['group', 'both']
+  const showBarInIndividual = ['individual', 'both']
 
   const walletName: any = {
     cash: {
@@ -197,23 +202,27 @@ export const MultiOrdersDetailsUI = (props: any) => {
             </Row>
           ))}
           <BorderLine />
-          <Row>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {t('TOTAL_BEFORE_TAX', 'Total before tax')}:
-            </OText>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {parsePrice(ordersSummary?.subtotal)}
-            </OText>
-          </Row>
-          <Row>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
-            </OText>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {parsePrice(ordersSummary?.tax)}
-            </OText>
-          </Row>
-          <BorderLine />
+          {!isTaxIncludedOnPrice && (
+            <>
+              <Row>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {t('TOTAL_BEFORE_TAX', 'Total before tax')}:
+                </OText>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {parsePrice(ordersSummary?.subtotal)}
+                </OText>
+              </Row>
+              <Row>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
+                </OText>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {parsePrice(ordersSummary?.tax)}
+                </OText>
+              </Row>
+              <BorderLine />
+            </>
+          )}
           <Row style={{ marginTop: 10 }}>
             <OText size={14} lineHeight={18} weight={'500'} color={theme.colors.textNormal}>
               {t('PAYMENT_TOTAL', 'Payment total')}:

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

@@ -30,14 +30,17 @@ export const MyOrders = (props: any) => {
 
   const notOrderOptions = ['business', 'products']
   const allEmpty = (ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) || ((isEmptyBusinesses || businessOrderIds?.length === 0) && hideOrders)
+
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const showNavbar = theme?.bar_menu?.components?.orders?.hidden
+  const hideOrdersTheme = theme?.bar_menu?.components?.orders?.hidden
+  const hideProductsTab = theme?.orders?.components?.products_tab?.hidden
+  const hideBusinessTab = theme?.orders?.components?.business_tab?.hidden
   const MyOrdersMenu = [
-    { key: 'orders', value: t('ORDERS', 'Orders') },
-    { key: 'business', value: t('BUSINESS', 'Business') },
-    { key: 'products', value: t('PRODUCTS', 'Products') }
+    { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false },
+    { key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
+    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
   ]
-  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
-  const showNavbar = theme?.bar_menu?.components?.orders?.hidden
-
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   const handleOnRefresh = () => {
@@ -87,7 +90,7 @@ export const MyOrders = (props: any) => {
           },
           ...props.titleStyle
         }}>
-          {!props.hideBackBtn && !isChewLayout && (
+          {!props.hideBackBtn && (!isChewLayout || (isChewLayout && hideOrdersTheme)) && (
             <OButton
               imgLeftStyle={{ width: 18 }}
               imgRightSrc={null}
@@ -99,7 +102,8 @@ export const MyOrders = (props: any) => {
                 borderColor: '#FFF',
                 shadowColor: '#FFF',
                 paddingLeft: 0,
-                paddingRight: 0
+                paddingRight: 0,
+                marginTop: 30,
               }}
               onClick={goToBack}
               icon={AntDesignIcon}
@@ -109,7 +113,7 @@ export const MyOrders = (props: any) => {
               }}
             />
           )}
-          <HeaderTitle ph={0} text={t('MY_ORDERS', 'My Orders')} />
+          <HeaderTitle ph={10} text={t('MY_ORDERS', 'My Orders')} />
         </View>
       )}
       {!hideOrders && !isChewLayout && !showNavbar && (
@@ -123,7 +127,7 @@ export const MyOrders = (props: any) => {
           showsHorizontalScrollIndicator={false}
           scrollEventThrottle={16}
         >
-          {MyOrdersMenu.filter(option => !hideOrders || option.key !== 'orders').map(option => (
+          {MyOrdersMenu.filter(option => (!hideOrders || option.key !== 'orders') && !option.disabled).map(option => (
             <Tab
               key={option.key}
               onPress={() => setSelectedOption(option.key)}
@@ -143,18 +147,16 @@ export const MyOrders = (props: any) => {
       )}
       {selectedOption === 'orders' && (
         <>
-          {ordersLength?.activeOrdersLength !== 0 && (
-            <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
-              <OrdersOption
-                {...props}
-                activeOrders
-                ordersLength={ordersLength}
-                setOrdersLength={setOrdersLength}
-                setRefreshOrders={setRefreshOrders}
-                refreshOrders={refreshOrders}
-              />
-            </View>
-          )}
+          <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <OrdersOption
+              {...props}
+              activeOrders
+              ordersLength={ordersLength}
+              setOrdersLength={setOrdersLength}
+              setRefreshOrders={setRefreshOrders}
+              refreshOrders={refreshOrders}
+            />
+          </View>
           <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
             <OrdersOption
               {...props}

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

@@ -77,7 +77,7 @@ export const ProductOptionsUI = (props: any) => {
 	const theme = useTheme();
 	const [, { showToast }] = useToast()
 
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
 	const styles = StyleSheet.create({
 		mainContainer: {

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

@@ -41,7 +41,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const iconsSize = isChewLayout ? 20 : 16
 
 	const handleSuboptionClick = () => {

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

@@ -44,7 +44,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
 	const textSize = isChewLayout ? 12 : 10
 

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

@@ -49,7 +49,7 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const theme = useTheme();
 
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
 	const langPickerStyle = StyleSheet.create({
 		inputAndroid: {

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

@@ -62,7 +62,7 @@ const WalletsUI = (props: any) => {
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
-  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)