Add an option for distance requests

src/CONST.js

@@ -274,6 +274,7 @@ const CONST = {
         TASKS: 'tasks',
         THREADS: 'threads',
         SCAN_RECEIPTS: 'scanReceipts',
+        DISTANCE_REQUESTS: 'distanceRequests',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',
@@ -2567,6 +2568,7 @@ const CONST = {
         RECEIPT_TAB_ID: 'ReceiptTab',
         MANUAL: 'manual',
         SCAN: 'scan',
+        DISTANCE: 'distance',
     },
 };
 

src/ROUTES.js

@@ -87,6 +87,7 @@ export default {
     MONEY_REQUEST_DESCRIPTION: ':iouType/new/description/:reportID?',
     MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
     MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',
+    MONEY_REQUEST_DISTANCE_TAB: ':iouType/new/:reportID?/distance',
     IOU_SEND_ADD_BANK_ACCOUNT: `${IOU_SEND}/add-bank-account`,
     IOU_SEND_ADD_DEBIT_CARD: `${IOU_SEND}/add-debit-card`,
     IOU_SEND_ENABLE_PAYMENTS: `${IOU_SEND}/enable-payments`,

src/components/DistanceRequest.js

@@ -0,0 +1,40 @@
+import React, {useEffect} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import Text from './Text';
+import * as IOU from '../libs/actions/IOU';
+import styles from '../styles/styles';
+import ONYXKEYS from '../ONYXKEYS';
+
+const propTypes = {
+    /** The transactionID of this request */
+    transactionID: PropTypes.string,
+};
+
+const defaultProps = {
+    transactionID: '',
+};
+
+function DistanceRequest(props) {
+    useEffect(() => {
+        if (props.transactionID) {
+            return;
+        }
+        IOU.createEmptyTransaction();
+    }, [props.transactionID]);
+
+    return (
+        <View style={[styles.flex1, styles.flexColumn, styles.w100, styles.alignItemsCenter, styles.mt4]}>
+            <Text>Distance Request</Text>
+            <Text>transactionID: {props.transactionID}</Text>
+        </View>
+    );
+}
+
+DistanceRequest.displayName = 'DistanceRequest';
+DistanceRequest.propTypes = propTypes;
+DistanceRequest.defaultProps = defaultProps;
+export default withOnyx({
+    transactionID: {key: ONYXKEYS.IOU, selector: (iou) => (iou && iou.transactionID) || ''},
+})(DistanceRequest);

src/components/Icon/Expensicons.js

@@ -15,6 +15,7 @@ import Bug from '../../../assets/images/bug.svg';
 import Building from '../../../assets/images/building.svg';
 import Calendar from '../../../assets/images/calendar.svg';
 import Camera from '../../../assets/images/camera.svg';
+import Car from '../../../assets/images/car.svg';
 import Cash from '../../../assets/images/cash.svg';
 import ChatBubble from '../../../assets/images/chatbubble.svg';
 import Checkmark from '../../../assets/images/checkmark.svg';
@@ -136,6 +137,7 @@ export {
     Building,
     Calendar,
     Camera,
+    Car,
     Cash,
     ChatBubble,
     Checkmark,

src/components/TabSelector/TabSelector.js

@@ -27,7 +27,16 @@ const defaultProps = {
     onTabPress: () => {},
 };
 
-const getIcon = (route) => (route === CONST.TAB.MANUAL ? Expensicons.Pencil : Expensicons.Receipt);
+const getIcon = (route) => {
+    switch (route) {
+        case CONST.TAB.SCAN:
+            return Expensicons.Receipt;
+        case CONST.TAB.DISTANCE:
+            return Expensicons.Car;
+        default:
+            return Expensicons.Pencil;
+    }
+};
 
 function TabSelector({state, navigation, onTabPress}) {
     const {translate} = useLocalize();

src/languages/en.js

@@ -349,6 +349,7 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Scan',
+        distance: 'Distance',
     },
     receipt: {
         upload: 'Upload receipt',

src/languages/es.js

@@ -348,6 +348,7 @@ export default {
     tabSelector: {
         manual: 'Manual',
         scan: 'Escanear',
+        distance: 'Distancia',
     },
     receipt: {
         upload: 'Subir recibo',

src/libs/Navigation/linkingConfig.js

@@ -302,6 +302,10 @@ export default {
                                         path: ROUTES.MONEY_REQUEST_SCAN_TAB,
                                         exact: true,
                                     },
+                                    distance: {
+                                        path: ROUTES.MONEY_REQUEST_DISTANCE_TAB,
+                                        exact: true,
+                                    },
                                 },
                             },
                             Money_Request_Amount: ROUTES.MONEY_REQUEST_AMOUNT,

src/libs/Permissions.js

@@ -94,6 +94,14 @@ function canUseScanReceipts(betas) {
     return _.contains(betas, CONST.BETAS.SCAN_RECEIPTS) || canUseAllBetas(betas);
 }
 
+/**
+ * @param {Array<String>} betas
+ * @returns {Boolean}
+ */
+function canUseDistanceRequests(betas) {
+    return _.contains(betas, CONST.BETAS.DISTANCE_REQUESTS) || canUseAllBetas(betas);
+}
+
 export default {
     canUseChronos,
     canUsePayWithExpensify,
@@ -105,4 +113,5 @@ export default {
     canUsePolicyExpenseChat,
     canUseTasks,
     canUseScanReceipts,
+    canUseDistanceRequests,
 };

src/libs/actions/IOU.js

@@ -20,6 +20,7 @@ import TransactionUtils from '../TransactionUtils';
 import * as ErrorUtils from '../ErrorUtils';
 import * as UserUtils from '../UserUtils';
 import * as Report from './Report';
+import * as NumberUtils from '../NumberUtils';
 
 let allReports;
 Onyx.connect({
@@ -1509,6 +1510,12 @@ function setMoneyRequestReceipt(receiptPath, receiptSource) {
     Onyx.merge(ONYXKEYS.IOU, {receiptPath, receiptSource});
 }
 
+function createEmptyTransaction() {
+    const transactionID = NumberUtils.rand64();
+    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {});
+    Onyx.merge(ONYXKEYS.IOU, {transactionID});
+}
+
 /**
  * Navigates to the next IOU page based on where the IOU request was started
  *
@@ -1562,5 +1569,6 @@ export {
     setMoneyRequestDescription,
     setMoneyRequestParticipants,
     setMoneyRequestReceipt,
+    createEmptyTransaction,
     navigateToNextPage,
 };

src/pages/iou/MoneyRequestSelectorPage.js

@@ -16,6 +16,7 @@ import styles from '../../styles/styles';
 import MoneyRequestAmount from './steps/MoneyRequestAmount';
 import ReceiptSelector from './ReceiptSelector';
 import * as IOU from '../../libs/actions/IOU';
+import DistanceRequest from '../../components/DistanceRequest';
 import DragAndDropProvider from '../../components/DragAndDrop/Provider';
 import usePermissions from '../../hooks/usePermissions';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
@@ -62,7 +63,7 @@ function MoneyRequestSelectorPage(props) {
     const iouType = lodashGet(props.route, 'params.iouType', '');
     const reportID = lodashGet(props.route, 'params.reportID', '');
     const {translate} = useLocalize();
-    const {canUseScanReceipts} = usePermissions();
+    const {canUseScanReceipts, canUseDistanceRequests} = usePermissions();
 
     const title = {
         [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST]: translate('iou.requestMoney'),
@@ -85,7 +86,7 @@ function MoneyRequestSelectorPage(props) {
                                 title={title[iouType]}
                                 onBackButtonPress={Navigation.dismissModal}
                             />
-                            {canUseScanReceipts && iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? (
+                            {(canUseScanReceipts || canUseDistanceRequests) && iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? (
                                 <OnyxTabNavigator
                                     id={CONST.TAB.RECEIPT_TAB_ID}
                                     tabBar={({state, navigation}) => (
@@ -101,11 +102,19 @@ function MoneyRequestSelectorPage(props) {
                                         component={MoneyRequestAmount}
                                         initialParams={{reportID, iouType}}
                                     />
-                                    <TopTab.Screen
-                                        name={CONST.TAB.SCAN}
-                                        component={ReceiptSelector}
-                                        initialParams={{reportID, iouType}}
-                                    />
+                                    {canUseScanReceipts && (
+                                        <TopTab.Screen
+                                            name={CONST.TAB.SCAN}
+                                            component={ReceiptSelector}
+                                            initialParams={{reportID, iouType}}
+                                        />
+                                    )}
+                                    {canUseDistanceRequests && (
+                                        <TopTab.Screen
+                                            name={CONST.TAB.DISTANCE}
+                                            component={DistanceRequest}
+                                        />
+                                    )}
                                 </OnyxTabNavigator>
                             ) : (
                                 <MoneyRequestAmount route={props.route} />