Feat: Add Billable Toggle UI

src/components/MoneyRequestConfirmationList.js

@@ -5,6 +5,7 @@ import {format} from 'date-fns';
 import _ from 'underscore';
 import {View} from 'react-native';
 import lodashGet from 'lodash/get';
+import Text from './Text';
 import styles from '../styles/styles';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
@@ -29,6 +30,7 @@ import Image from './Image';
 import useLocalize from '../hooks/useLocalize';
 import * as ReceiptUtils from '../libs/ReceiptUtils';
 import categoryPropTypes from './categoryPropTypes';
+import Switch from './Switch';
 import ConfirmedRoute from './ConfirmedRoute';
 import transactionPropTypes from './transactionPropTypes';
 import DistanceRequestUtils from '../libs/DistanceRequestUtils';
@@ -499,6 +501,18 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly}
                         />
                     )}
+                    <View>
+                        <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
+                            <Text color={!props.iouIsBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
+                            <Switch
+                                accessibilityLabel={translate('common.billable')}
+                                isOn={props.iouIsBillable}
+                                onToggle={(val) => {
+                                    props.onToggleBillable(val);
+                                }}
+                            />
+                        </View>
+                    </View>
                 </>
             )}
         </OptionsSelector>

src/languages/en.ts

@@ -233,6 +233,7 @@ export default {
         showMore: 'Show more',
         merchant: 'Merchant',
         category: 'Category',
+        billable: 'Billable',
         receipt: 'Receipt',
         replace: 'Replace',
         distance: 'Distance',

src/languages/es.ts

@@ -232,6 +232,7 @@ export default {
         showMore: 'Mostrar más',
         merchant: 'Comerciante',
         category: 'Categoría',
+        billable: 'Facturable',
         receipt: 'Recibo',
         replace: 'Sustituir',
         distance: 'Distancia',

src/libs/actions/IOU.js

@@ -95,6 +95,7 @@ function resetMoneyRequestInfo(id = '') {
         receiptPath: '',
         receiptSource: '',
         transactionID: '',
+        isBillable: false,
     });
 }
 

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -59,6 +59,7 @@ const defaultProps = {
 };
 
 function MoneyRequestConfirmPage(props) {
+    const [isBillable, setIsBillable] = useState(true);
     const {windowHeight} = useWindowDimensions();
     const prevMoneyRequestId = useRef(props.iou.id);
     const iouType = useRef(lodashGet(props.route, 'params.iouType', ''));
@@ -283,6 +284,8 @@ function MoneyRequestConfirmPage(props) {
                                 iouAmount={props.iou.amount}
                                 iouComment={props.iou.comment}
                                 iouCurrencyCode={props.iou.currency}
+                                iouIsBillable={isBillable}
+                                onToggleBillable={(newValue) => setIsBillable(newValue)}
                                 iouCategory={props.iou.category}
                                 onConfirm={createTransaction}
                                 onSendMoney={sendMoney}