Merge pull request #29358 from Expensify/vit-dontAllowEditingDateAndM…

…erchantOnSendMoney

[CP Staging] Fix couple of bugs in the Send money flow

(cherry picked from commit e3adc6c)

src/components/MoneyRequestConfirmationList.js

@@ -193,6 +193,7 @@ function MoneyRequestConfirmationList(props) {
     const {translate, toLocaleDigit} = useLocalize();
 
     const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
+    const isTypeSend = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND;
 
     const {unit, rate, currency} = props.mileageRate;
     const distance = lodashGet(transaction, 'routes.route0.distance', 0);
@@ -208,7 +209,13 @@ function MoneyRequestConfirmationList(props) {
 
     // A flag and a toggler for showing the rest of the form fields
     const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false);
-    const shouldShowAllFields = props.isDistanceRequest || shouldExpandFields || !shouldShowSmartScanFields;
+
+    // Do not hide fields in case of send money request
+    const shouldShowAllFields = props.isDistanceRequest || shouldExpandFields || !shouldShowSmartScanFields || isTypeSend;
+
+    // In Send Money flow, we don't allow the Merchant or Date to be edited.
+    const shouldShowDate = shouldShowAllFields && !isTypeSend;
+    const shouldShowMerchant = shouldShowAllFields && !isTypeSend;
 
     // Fetches the first tag list of the policy
     const policyTag = PolicyUtils.getTag(props.policyTags);
@@ -434,6 +441,7 @@ function MoneyRequestConfirmationList(props) {
 
         const button = shouldShowSettlementButton ? (
             <SettlementButton
+                pressOnEnter
                 isDisabled={shouldDisableButton}
                 onPress={confirm}
                 enablePaymentsRoute={ROUTES.IOU_SEND_ENABLE_PAYMENTS}
@@ -549,7 +557,7 @@ function MoneyRequestConfirmationList(props) {
             )}
             {shouldShowAllFields && (
                 <>
-                    {shouldShowSmartScanFields && (
+                    {shouldShowDate && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
                             title={props.iouCreated || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
@@ -571,7 +579,7 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                         />
                     )}
-                    {shouldShowSmartScanFields && (
+                    {shouldShowMerchant && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
                             title={props.iouMerchant}

src/components/SettlementButton.js

@@ -20,6 +20,9 @@ const propTypes = {
     /** Callback to execute when this button is pressed. Receives a single payment type argument. */
     onPress: PropTypes.func.isRequired,
 
+    /** Call the onPress function on main button when Enter key is pressed */
+    pressOnEnter: PropTypes.bool,
+
     /** Settlement currency type */
     currency: PropTypes.string,
 
@@ -75,6 +78,7 @@ const propTypes = {
 const defaultProps = {
     isLoading: false,
     isDisabled: false,
+    pressOnEnter: false,
     addBankAccountRoute: '',
     addDebitCardRoute: '',
     currency: CONST.CURRENCY.USD,
@@ -111,6 +115,7 @@ function SettlementButton({
     formattedAmount,
     nvp_lastPaymentMethod,
     onPress,
+    pressOnEnter,
     policyID,
     shouldShowPaymentOptions,
     style,
@@ -209,6 +214,7 @@ function SettlementButton({
                     isDisabled={isDisabled}
                     isLoading={isLoading}
                     onPress={(event, iouPaymentType) => selectPaymentType(event, iouPaymentType, triggerKYCFlow)}
+                    pressOnEnter={pressOnEnter}
                     options={paymentButtonOptions}
                     style={style}
                     buttonSize={buttonSize}

src/libs/ReportUtils.js

@@ -2118,6 +2118,7 @@ function buildOptimisticIOUReport(payeeAccountID, payerAccountID, total, chatRep
         reportID: generateReportID(),
         state: CONST.REPORT.STATE.SUBMITTED,
         stateNum: isSendingMoney ? CONST.REPORT.STATE_NUM.SUBMITTED : CONST.REPORT.STATE_NUM.PROCESSING,
+        statusNum: isSendingMoney ? CONST.REPORT.STATUS.REIMBURSED : CONST.REPORT.STATE_NUM.PROCESSING,
         total,
 
         // We don't translate reportName because the server response is always in English

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -304,6 +304,10 @@ function MoneyRequestConfirmPage(props) {
             return props.translate('iou.split');
         }
 
+        if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SEND) {
+            return props.translate('common.send');
+        }
+
         return props.translate('tabSelector.manual');
     };
 

src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

@@ -50,6 +50,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
     const iouType = useRef(lodashGet(route, 'params.iouType', ''));
     const reportID = useRef(lodashGet(route, 'params.reportID', ''));
     const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType.current, selectedTab);
+    const isSendRequest = iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SEND;
     const isScanRequest = MoneyRequestUtils.isScanRequest(selectedTab);
     const isSplitRequest = iou.id === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT;
     const [headerTitle, setHeaderTitle] = useState();
@@ -60,8 +61,13 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
             return;
         }
 
+        if (isSendRequest) {
+            setHeaderTitle(translate('common.send'));
+            return;
+        }
+
         setHeaderTitle(_.isEmpty(iou.participants) ? translate('tabSelector.manual') : translate('iou.split'));
-    }, [iou.participants, isDistanceRequest, translate]);
+    }, [iou.participants, isDistanceRequest, isSendRequest, translate]);
 
     const navigateToConfirmationStep = (moneyRequestType) => {
         IOU.setMoneyRequestId(moneyRequestType);

src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

@@ -240,7 +240,7 @@ function MoneyRequestParticipantsSelector({
     // the app from crashing on native when you try to do this, we'll going to hide the button if you have a workspace and other participants
     const hasPolicyExpenseChatParticipant = _.some(participants, (participant) => participant.isPolicyExpenseChat);
     const shouldShowConfirmButton = !(participants.length > 1 && hasPolicyExpenseChatParticipant);
-    const isAllowedToSplit = !isDistanceRequest;
+    const isAllowedToSplit = !isDistanceRequest && iouType !== CONST.IOU.MONEY_REQUEST_TYPE.SEND;
 
     return (
         <View style={[styles.flex1, styles.w100, participants.length > 0 ? safeAreaPaddingBottomStyle : {}]}>