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} />