ordering-ui-react-native 0.15.20 → 0.15.21-release

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

@@ -5,7 +5,7 @@ import {
   useLanguage,
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
-  useConfig,
+  useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -28,6 +28,7 @@ import {
   OrderDriver,
   Map,
   Divider,
+  OrderAction
 } from './styles';
 import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -39,7 +40,7 @@ import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { Placeholder, PlaceholderLine } from 'rn-placeholder';
-
+import NavBar from '../NavBar'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -48,6 +49,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     readMessages,
     isFromCheckout,
     driverLocation,
+    onNavigationRedirect,
+    reorderState,
+    handleReorder
   } = props;
 
   const theme = useTheme();
@@ -76,18 +80,19 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       justifyContent: 'flex-start',
       paddingLeft: 0,
       height: 30,
-      width: 40,
+      width: 30,
+      marginTop: Platform.OS === 'ios' ? 0 : 30
     },
   });
 
   const [, t] = useLanguage();
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
   const [{ configs }] = useConfig();
-
   const [isReviewed, setIsReviewed] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
 
-  const { order } = props.order;
+  const { order, businessData } = props.order;
+  const mapValidStatuses = [9, 19, 23]
 
   const walletName: any = {
     cash: {
@@ -310,8 +315,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         business: type === 'business',
         driver: type === 'driver',
         onClose: () => navigation?.canGoBack()
-        ? navigation.goBack()
-        : navigation.navigate('BottomTab', { screen: 'MyOrders' }),
+          ? navigation.goBack()
+          : navigation.navigate('BottomTab', { screen: 'MyOrders' }),
       }
     )
   }
@@ -356,6 +361,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     )
   }
 
+
+  useEffect(() => {
+    if (reorderState?.error) {
+      navigation.navigate('Business', { store: businessData?.slug })
+    }
+    if (!reorderState?.error && reorderState?.result?.uuid) {
+      onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+    }
+  }, [reorderState])
+
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
     return () => {
@@ -384,6 +399,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',
     },
   ];
+  const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l: string) => l.replace(/[^-.0-9]/g, ''))
+  const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
+      ...location,
+      lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+      lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+    } : location)
 
   useEffect(() => {
     if (driverLocation) {
@@ -448,27 +469,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       {order && Object.keys(order).length > 0 && (
         <>
           <Header>
-            <OButton
-              imgLeftSrc={theme.images.general.arrow_left}
-              imgRightSrc={null}
-              style={styles.btnBackArrow}
-              onClick={() => handleArrowBack()}
-              imgLeftStyle={{ tintColor: theme.colors.disabled }}
+            <NavBar
+              title={`${t('ORDER', 'Order')} #${order?.id}`}
+              titleAlign={'center'}
+              onActionLeft={handleArrowBack}
+              showCall={false}
+              btnStyle={{ paddingLeft: 0 }}
+              style={{ marginTop: Platform.OS === 'ios' ? 0 : 20 }}
+              titleWrapStyle={{ paddingHorizontal: 0 }}
+              titleStyle={{ marginRight: 0, marginLeft: 0 }}
+              subTitle={<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+                {order?.delivery_datetime_utc
+                  ? parseDate(order?.delivery_datetime_utc)
+                  : parseDate(order?.delivery_datetime, { utc: false })}
+              </OText>}
             />
             <OrderInfo>
               <OrderData>
-                <OText
-                  size={20}
-                  lineHeight={30}
-                  weight={'600'}
-                  color={theme.colors.textNormal}>
-                  {t('ORDER', 'Order')} #{order?.id}
-                </OText>
-                <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </OText>
                 {
                   (
                     parseInt(order?.status) === 1 ||
@@ -659,11 +676,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               )}
               {order?.driver && (
                 <>
-                  {order?.driver?.location && parseInt(order?.status) === 9 && (
+                  {order?.driver?.location && mapValidStatuses.includes(parseInt(order?.status)) && (
                     <Map>
-                      <GoogleMap
-                        location={order?.driver?.location}
-                        locations={locations}
+                     <GoogleMap
+                        location={typeof order?.driver?.location?.location === 'string'
+                        ? {
+                            lat: parseFloat(driverLocationString[0]),
+                            lng: parseFloat(driverLocationString[1]),
+                          } : driverLocation ?? order?.driver?.location
+                        }
+                        locations={parsedLocations}
                         readOnly
                       />
                     </Map>
@@ -737,16 +759,37 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   'Once business accepts your order, we will send you an email, thank you!',
                 )}
               </OText>
-              <OButton
-                text={t('YOUR_ORDERS', 'Your Orders')}
-                textStyle={{ fontSize: 14, color: theme.colors.primary }}
-                imgRightSrc={null}
-                borderColor={theme.colors.primary}
-                bgColor={theme.colors.clear}
-                style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
-                parentStyle={{ marginTop: 29, width: '50%' }}
-                onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
-              />
+              <OrderAction>
+                <OButton
+                  text={t('YOUR_ORDERS', 'Your Orders')}
+                  textStyle={{ fontSize: 14, color: theme.colors.primary }}
+                  imgRightSrc={null}
+                  borderColor={theme.colors.primary}
+                  bgColor={theme.colors.clear}
+                  style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
+                  parentStyle={{ marginTop: 29, marginEnd: 15 }}
+                  onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
+                />
+                {(
+                  parseInt(order?.status) === 1 ||
+                  parseInt(order?.status) === 2 ||
+                  parseInt(order?.status) === 5 ||
+                  parseInt(order?.status) === 6 ||
+                  parseInt(order?.status) === 10 ||
+                  parseInt(order?.status) === 11 ||
+                  parseInt(order?.status) === 12
+                ) && (
+                    <OButton
+                      text={order.id === reorderState?.loading ? t('LOADING', 'Loading..') : t('REORDER', 'Reorder')}
+                      textStyle={{ fontSize: 14, color: theme.colors.primary }}
+                      imgRightSrc={null}
+                      borderColor='transparent'
+                      bgColor={theme.colors.primary + 10}
+                      style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginTop: 29 }}
+                      onClick={() => handleReorder && handleReorder(order.id)}
+                    />
+                  )}
+              </OrderAction>
             </HeaderInfo>
             <OrderProducts>
               {order?.products?.length &&
@@ -856,7 +899,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <OSRow>
                       <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
@@ -983,8 +1026,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
-        title={`${openTaxModal.data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
         <TaxInformation
           type={openTaxModal.type}

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

@@ -5,7 +5,6 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 
@@ -125,3 +124,6 @@ export const Divider = styled.View`
   margin-top: 5px;
   margin-bottom: 5px;
 `
+export const OrderAction = styled.View`
+  flex-direction: row;
+`

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

@@ -98,7 +98,7 @@ const OrderProgressUI = (props: any) => {
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90 },
       { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95 },
       { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35 },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY  || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
     ]
 
     const objectStatus = orderStatus.find((o) => o.key === status)
@@ -131,7 +131,7 @@ const OrderProgressUI = (props: any) => {
 
   useEffect(() => {
     if (isFocused) {
-      loadOrders()
+      loadOrders(false, false, false, true)
     }
   }, [isFocused])
 
@@ -188,7 +188,7 @@ const OrderProgressUI = (props: any) => {
               <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
             </ProgressContentWrapper>
             <ProgressTextWrapper>
-              <OText size={12}>{getOrderStatus(lastOrder.status)?.value}</OText>
+              <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
               <TimeWrapper>
                 <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
                 <OText size={11}>
@@ -218,7 +218,7 @@ export const OrderProgress = (props: any) => {
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
-    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,

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

@@ -20,6 +20,7 @@ export const ProgressTextWrapper = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
 `
 
 export const OrderInfoWrapper = styled.View`

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

@@ -112,7 +112,7 @@ const OrderSummaryUI = (props: any) => {
       {cart?.products?.length > 0 && (
         <>
           <OSProductList>
-            {cart?.products.map((product: any) => (
+            {cart?.products?.map((product: any) => (
               <ProductItemAccordion
                 key={product.code}
                 product={product}
@@ -202,7 +202,7 @@ const OrderSummaryUI = (props: any) => {
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />

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

@@ -19,7 +19,8 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		typeSelected,
 		defaultValue,
 		configTypes,
-		orderTypes
+		orderTypes,
+		setOrderTypeValue
 	} = props
 
 	const theme = useTheme();
@@ -39,6 +40,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 
 	const handleChangeOrderTypeCallback = (orderType: number) => {
 		if (!orderState.loading) {
+			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
 			goToBack();
 		}
@@ -51,7 +53,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 				btnStyle={{ paddingLeft: 0 }}
 				paddingTop={0}
 				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOUR_ORDER_TYPE', 'How will your order type?')}
+				title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 				titleAlign={'center'}
 				titleStyle={{ fontSize: 14 }}
 			/>

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

@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
-import { OText, OButton } from '../shared'
+import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 
-import { OptionTitle, NoOrdersWrapper } from './styles'
+import { OptionTitle } from './styles'
 import { OrdersOptionParams } from '../../types'
 
 import {
@@ -33,7 +33,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadMoreOrders,
 		loadOrders,
 		setOrdersLength,
-		ordersLength
+		ordersLength,
+		refreshOrders,
+		setRefreshOrders
 	} = props
 
 	const theme = useTheme();
@@ -95,7 +97,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
 			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
 			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
+      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
 		]
 
 		const objectStatus = orderStatus.find((o) => o.key === status)
@@ -105,9 +107,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-			loadOrders()
+			loadOrders(false, false, false, true)
 		}, [navigation])
-	)
+	  )
 
 	useEffect(() => {
 		const hasMore = pagination?.totalPages && pagination?.currentPage !== pagination?.totalPages
@@ -128,23 +130,16 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		}
 	}, [orders, activeOrders])
 
+	useEffect(() => {
+		if(refreshOrders){
+			loadOrders(false, false, false, true)
+			setRefreshOrders && setRefreshOrders(false)
+		}
+	}, [refreshOrders])
+
 	return (
 		<>
-			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
-				<NoOrdersWrapper>
-					<OText size={14} numberOfLines={1}>
-						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
-					</OText>
-					<OButton
-						text={t('ORDER_NOW', 'Order now')}
-						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
-						textStyle={{ color: 'white', fontSize: 14 }}
-						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
-					/>
-
-				</NoOrdersWrapper>
-			)}
-			{(ordersLength.activeOrdersLength > 0 || ordersLength.previousOrdersLength > 0) && (
+			{(orders.length > 0) && (
 				<>
 					<OptionTitle>
 						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
@@ -155,18 +150,15 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 									: t('PAST', 'Past'))}
 						</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
-							/>
-						)}
 				</>
 			)}
+			{!loading && orders.length === 0 && (
+				<NotFoundSource
+					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+					image={imageFails}
+					conditioned
+				/>
+			)}
 			{loading && (
 				<>
 					{!activeOrders ? (
@@ -239,8 +231,8 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 		...props,
 		UIComponent: OrdersOptionUI,
 		orderStatus: props.preOrders ? [13] : props.activeOrders
-			? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21, 22, 23]
-			: [1, 2, 5, 6, 10, 11, 12, 16, 17],
+			? [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+			: [1, 2, 5, 6, 10, 11, 12, 15, 16, 17],
 		useDefualtSessionManager: true,
 	}
 

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

@@ -3,9 +3,3 @@ import styled from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 `
-
-export const NoOrdersWrapper = styled.View`
-	flex-direction: column;
-	align-items: center;
-	margin-top: 50px;
-`

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

@@ -20,6 +20,7 @@ import { OText } from '../shared'
 
 const PaymentOptionWalletUI = (props: any) => {
   const {
+    businessConfigs,
     businessId,
     walletsState,
     selectWallet,
@@ -37,6 +38,9 @@ const PaymentOptionWalletUI = (props: any) => {
   const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
   const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
 
+  const isBusinessWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
+  const isBusinessWalletPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
+
   const styles = StyleSheet.create({
     checkBoxStyle: {
       width: 25,
@@ -53,11 +57,11 @@ const PaymentOptionWalletUI = (props: any) => {
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
-      isActive: isWalletCashEnabled
+      isActive: isWalletCashEnabled && isBusinessWalletCashEnabled
     },
     credit_point: {
       name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
-      isActive: isWalletPointsEnabled
+      isActive: isWalletPointsEnabled && isBusinessWalletPointsEnabled
     }
   }
 
@@ -96,17 +100,19 @@ const PaymentOptionWalletUI = (props: any) => {
             <Container
               key={wallet.id}
               isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+              onPress={() => handleOnChange(idx, wallet)}
+              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
             >
               <SectionLeft>
                 <CheckBox
                   value={checkedState[idx]}
-                  onValueChange={() => handleOnChange(idx, wallet)}
-                  disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0 }
+                  disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
                   boxType={'square'}
                   tintColors={{
                     true: theme.colors.primary,
                     false: theme.colors.disabled
                   }}
+                  onChange={() => handleOnChange(idx, wallet)}
                   tintColor={theme.colors.disabled}
                   onCheckColor={theme.colors.primary}
                   onTintColor={theme.colors.primary}

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
-export const Container = styled.View`
+export const Container = styled.TouchableOpacity`
   width: 100%;
   display: flex;
   padding: 20px 0;

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

@@ -32,8 +32,6 @@ import {
 import { getIconCard, flatArray } from '../../utils';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
-const methodsPay = ['google_pay', 'apple_pay']
-const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 // const stripeRedirectOptions = [
 //   { name: 'Bancontact', value: 'bancontact' },
 //   { name: 'Alipay', value: 'alipay' },
@@ -56,8 +54,7 @@ const PaymentOptionsUI = (props: any) => {
 		handlePaymethodClick,
 		handlePaymethodDataChange,
 		isOpenMethod,
-		handlePaymentMethodClickCustom,
-		handlePlaceOrder
+		handlePaymentMethodClickCustom
 	} = props
 
 	const theme = useTheme();
@@ -125,16 +122,12 @@ const PaymentOptionsUI = (props: any) => {
 
 	useEffect(() => {
 		if (props.paySelected && props.paySelected?.data) {
-			setPaymethodData && setPaymethodData(props.paySelected?.data)
+			requestAnimationFrame(() => {
+				setPaymethodData && setPaymethodData(props.paySelected?.data)
+			})
 		}
 	}, [props.paySelected])
 
-	useEffect(() => {
-		if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-		  handlePlaceOrder()
-		}
-	}, [paymethodData, paymethodSelected])
-
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<TouchableOpacity
@@ -163,7 +156,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [32]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>
@@ -296,11 +289,11 @@ const PaymentOptionsUI = (props: any) => {
 				</KeyboardAvoidingView>
 			</OModal>
 
-			{/* Stripe direct, Google pay, Apple pay */}
+			{/* Stripe direct */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
+				open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
 				onClose={() => handlePaymethodClick(null)}
 			>
 				<KeyboardAvoidingView
@@ -309,13 +302,10 @@ const PaymentOptionsUI = (props: any) => {
 					enabled={Platform.OS === 'ios' ? true : false}
 				>
 					<StripeElementsForm
-						cart={cart}
-						paymethod={isOpenMethod?.paymethod?.gateway}
-						methodsPay={methodsPay}
 						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
+						publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
 						handleSource={handlePaymethodDataChange}
-						onCancel={() => handlePaymethodClick(null)}
+						onCancel={() => handlePaymethodClick(false)}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>

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

@@ -85,7 +85,11 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 				order: {
 					id: order?.id,
 					business_id: order?.business_id,
-					logo: order.business?.logo,
+					logo: order?.business?.logo,
+					driver: order?.driver,
+					products: order?.products,
+					review: order?.review,
+					user_review: order?.user_review
 				},
 			});
 	};
@@ -139,18 +143,20 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 							</OText>
 						</Information>
 						<Status>
-							<OButton
-								text={t('REORDER', 'Reorder')}
-								imgRightSrc={''}
-								textStyle={styles.buttonText}
-								style={
-									reorderLoading && order.id === reorderSelected
-										? styles.reorderLoading
-										: styles.reorderbutton
-								}
-								onClick={() => handleReorderClick(order.id)}
-								isLoading={reorderLoading && order.id === reorderSelected}
-							/>
+							{order.cart && (
+								<OButton
+									text={t('REORDER', 'Reorder')}
+									imgRightSrc={''}
+									textStyle={styles.buttonText}
+									style={
+										reorderLoading && order.id === reorderSelected
+											? styles.reorderLoading
+											: styles.reorderbutton
+									}
+									onClick={() => handleReorderClick(order.id)}
+									isLoading={reorderLoading && order.id === reorderSelected}
+								/>
+							)}
 							{allowedOrderStatus.includes(parseInt(order?.status)) &&
 								!order.review && (
 									<TouchableOpacity