ordering-ui-react-native 0.17.89 → 0.17.91

package/package.json

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

package/src/components/OrderCreating/index.tsx

@@ -131,7 +131,7 @@ export const OrderCreating = (props: any) => {
           <OText size={14}>{address}</OText>
         </LocationWrapper>
       )}
-      {cart && (
+      {cart && !orderState?.options?.moment && (
         <DeliveryWrapper>
           <DeliveryContentWrapper>
             <SimpleIcon
@@ -175,4 +175,4 @@ export const OrderCreating = (props: any) => {
       )}
     </OrderCreatingContainer>
   )
-}
+}

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

@@ -95,7 +95,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     upper: {
       flex: 1,
       zIndex: 1001,
-      paddingTop: isPage ? 30 : 80,
+      paddingTop: isPage ? 30 : 50,
       marginBottom: 10,
       backgroundColor: theme.colors.backgroundPage
     },
@@ -418,7 +418,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             </Header>
 
             {action === 'accept' && (
-              <View style={{ height: 400, justifyContent: 'center' }}>
+              <View style={{ height: 300, justifyContent: 'center' }}>
                 <Timer onPress={() => openTimerIOnput()}>
                   <OText weight="600" style={{ textAlign: 'center' }} size={55}>
                     {hour}

package/themes/business/src/components/LoginForm/Otp/index.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, Alert } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
@@ -16,11 +16,13 @@ export const Otp = (props: otpParams) => {
         onSubmit,
         handleLoginOtp,
         setAlertState,
-        pinCount
+        pinCount,
+        formState
     } = props
 
     const theme = useTheme();
     const [, t] = useLanguage();
+    const [code, setCode] = useState('')
     const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
         600, willVerifyOtpState)
 
@@ -44,6 +46,30 @@ export const Otp = (props: otpParams) => {
         }
     }, [otpLeftTime])
 
+    useEffect(() => {
+        if (!formState?.loading && formState?.result?.error) {
+            Alert.alert(
+                t('ERROR', 'Error'),
+                typeof formState.result?.result === 'string'
+                  ? formState.result?.result
+                  : formState.result?.result[0],
+                [
+                    {
+                        text: t('ACCEPT', 'Accept'),
+                        onPress: () => {},
+                        style: 'cancel'
+                    },
+                ],
+                { cancelable: false }
+            )
+
+            if (code.length === (pinCount || 6)) {
+                setCode('')
+            }
+
+        }
+    }, [formState])
+
     const loginStyle = StyleSheet.create({
         underlineStyleBase: {
             width: 45,
@@ -72,6 +98,8 @@ export const Otp = (props: otpParams) => {
                     onCodeFilled={(code: string) => handleLoginOtp(code)}
                     selectionColor={theme.colors.primary}
                     editable
+                    code={code}
+                    onCodeChanged={(code: string) => setCode(code)}
                 />
                 <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
                     <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>

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

@@ -280,7 +280,6 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const handleLoginOtp = (code: string) => {
 		handleButtonLoginClick({ code })
-		setWillVerifyOtpState(false)
 	}
 
 	const closeAlert = () => {
@@ -329,27 +328,17 @@ const LoginFormUI = (props: LoginParams) => {
         showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
         return
       }
-      formState?.result?.result &&
-        showToast(
-          ToastType.Error,
-          loginTab === 'email' && typeof formState.result?.result === 'string'
-            ? getTraduction(formState.result?.result)
-            : loginTab === 'email' &&
-              typeof formState.result?.result !== 'string'
-              ? getTraduction(formState.result?.result[0])
-              : loginTab === 'cellphone' &&
-                typeof formState.result?.result === 'string'
-                ? getTraduction(formState.result?.result).replace(
-                  t('USER', 'user').toLowerCase(),
-                  t('PHONE_NUMER', 'Phone number'),
-                )
-                : getTraduction(formState.result?.result[0]).replace(
-                  t('USER', 'user').toLowerCase(),
-                  t('PHONE_NUMER', 'Phone number'),
-                ),
-        );
+      formState.result?.result && showToast(
+        ToastType.Error,
+        typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
+      )
       setSubmitted(false)
     }
+    if (!formState?.loading && !formState?.result?.error) {
+      setWillVerifyOtpState(false)
+    }
   }, [formState]);
 
   useEffect(() => {
@@ -929,6 +918,7 @@ const LoginFormUI = (props: LoginParams) => {
 					handleLoginOtp={handleLoginOtp}
 					onSubmit={handleLogin}
 					setAlertState={setAlertState}
+          formState={formState}
 				/>
 			</OModal>
 			<Alert

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

@@ -36,7 +36,8 @@ export interface otpParams {
 	setWillVerifyOtpState: (val : boolean) => void,
 	onSubmit: () => void,
 	handleLoginOtp: (code : string) => void,
-	setAlertState: any
+	setAlertState: any,
+  formState?: any
 }
 export interface ProfileParams {
   navigation?: any;

package/themes/kiosk/src/components/LoginForm/index.tsx

@@ -116,10 +116,6 @@ const LoginFormUI = (props: LoginParams) => {
     }
 
     if (values?.project_name) {
-      setOrdering({
-        ...ordering,
-        project: values?.project_name
-      })
       _setStoreData('project_name', values?.project_name)
       setFormsStateValues({
         ...formsStateValues,

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

@@ -240,13 +240,16 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
         <SearchBar
           lazyLoad
           {...(isChewLayout && { height: 55 })}
-          inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
+          inputStyle={{ ...styles.searchInput }}
+          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}>
+        {t('TYPE_AT_LEAST_3_CHARACTERS', 'Type at least 3 characters')}
+      </OText>
       {
         noResults && (
           <View>
@@ -273,11 +276,13 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
         />
       )}
 
-      <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
-        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
-          {t('BUSINESSES', 'Businesses')}
-        </OText>
-      </OptionTitle>
+      {businessesSearchList.businesses?.length > 0 && (
+        <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
+          <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
+            {t('BUSINESSES', 'Businesses')}
+          </OText>
+        </OptionTitle>
+      )}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
           <View

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

@@ -315,9 +315,11 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                    </TouchableOpacity>
+                    {!offer?.type && (
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -352,6 +354,12 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
+            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && cart?.delivery_price_with_discount >= 0 && !hideDeliveryFee && (
+              <OSTable>
+                <OText size={12} lineHeight={18}>{t('DELIVERY_FEE_AFTER_DISCOUNT', 'Delivery Fee After Discount')}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
+              </OSTable>
+            )}
             {cart?.driver_tip > 0 && !hideDriverTip && (
               <OSTable>
                 <OText size={12} lineHeight={18}>
@@ -401,12 +409,13 @@ const CartUI = (props: any) => {
                     uuid={cart?.uuid}
                     businessId={cart?.business_id}
                     driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
-                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    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 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
                       ? cart?.driver_tip
                       : cart?.driver_tip_rate}
                     useOrderContext
+                    cart={cart}
                   />
                 </DriverTipsContainer>
               )}

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

@@ -558,12 +558,13 @@ const CheckoutUI = (props: any) => {
 										uuid={cartUuid}
 										businessId={cart?.business_id}
 										driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
-										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+										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 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+										driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
 											? cart?.driver_tip
 											: cart?.driver_tip_rate}
 										useOrderContext
+										cart={cart}
 									/>
 								</ChDriverTips>
 							</ChSection>

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

@@ -23,16 +23,19 @@ const DriverTipsUI = (props: any) => {
 		driverTip,
 		driverTipsOptions,
 		optionSelected,
-		isFixedPrice,
+		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((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/MyOrders/index.tsx

@@ -147,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/OrdersOption/PreviousProductsOrdered/index.tsx

@@ -26,7 +26,7 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
   const ProductList = ({ style }: any) => {
     return (
       <>
-        {products?.map((product: any) => (
+        {products?.filter((product : any) => product?.business?.available)?.map((product: any) => (
             <SingleProductCard
               key={product?.id}
               isProductId

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

@@ -3,7 +3,6 @@ import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
 import { OText, OButton } from '../shared'
-import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 import { PreviousBusinessOrdered } from './PreviousBusinessOrdered'
@@ -73,22 +72,22 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	useEffect(() => {
 		if (loading || error) return
 		const ordersReduced = _orders.map((order: any) => order?.cart_group_id
-      ? _orders
-        .filter((_order: any) => _order?.cart_group_id === order?.cart_group_id)
-        .map((_o: any, _: any, _ordersList: any) => {
-          const obj = {
-            ..._o,
-            id: _ordersList.map(o => o.id),
-            review: _o.review,
-            user_review: _o.user_review,
-            total: _ordersList.reduce((acc: any, o: any) => acc + o.summary.total, 0),
-            business: _ordersList.map((o: any) => o.business),
-            business_id: _ordersList.map((o: any) => o.business_id),
-            products: _ordersList.map((o: any) => o.products)
-          }
-          return obj
-        }).find((o: any) => o)
-      : order)
+			? _orders
+				.filter((_order: any) => _order?.cart_group_id === order?.cart_group_id)
+				.map((_o: any, _: any, _ordersList: any) => {
+					const obj = {
+						..._o,
+						id: _ordersList.map(o => o.id),
+						review: _o.review,
+						user_review: _o.user_review,
+						total: _ordersList.reduce((acc: any, o: any) => acc + o.summary.total, 0),
+						business: _ordersList.map((o: any) => o.business),
+						business_id: _ordersList.map((o: any) => o.business_id),
+						products: _ordersList.map((o: any) => o.products)
+					}
+					return obj
+				}).find((o: any) => o)
+			: order)
 		const orders = ordersReduced?.filter((order: any) => {
 			if (!order?.cart_group_id) return true
 			const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
@@ -193,7 +192,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 				</NoOrdersWrapper>
 			)}
-			{(ordersLength?.activeOrdersLength > 0 || ordersLength?.previousOrdersLength > 0) && (
+			{((ordersLength?.activeOrdersLength > 0 && activeOrders) || (ordersLength?.previousOrdersLength > 0 && !activeOrders)) && (
 				<>
 					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
 						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
@@ -206,17 +205,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 							</OText>
 						</OptionTitle>
 					)}
-
-					{!(ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) &&
-						!loading &&
-						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
-						(
-							<NotFoundSource
-								content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-								image={imageFails}
-								conditioned
-							/>
-						)}
 				</>
 			)}
 			{isBusiness && !!businessesSearchList && businesses?.loading && (

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

@@ -16,4 +16,5 @@ export const DurationWrapper = styled.View`
 
 export const Container = styled.View`
   padding-top: ${(props: any) => props.pdng};
+  margin-bottom: 50px;
 `