Fix/34611: Remove old merchant page #35641

DylanDylann · 2024-02-02T08:47:41Z

Details

Fixed Issues

$ #34611
PROPOSAL: #34611 (comment)

Tests

Test case 1: Request Money Flow

Create a new request
While creating a new request click on the merchant field
Verify that the route display /create/request/
After creating request click on merchant field to edit
Verify that the route display /edit/request/

Test case 2: Split Bill Flow

Create a split bill
While creating a new split bill click on the merchant field
Verify that the route display /create/split/
After creating a new split bill click on merchant field to edit
Verify that the route display /edit/split/
Verify that everything works well as before

Verify that no errors appear in the JS console

Offline tests

Same above

QA Steps

Same above

Verify that no errors appear in the JS console

PR Author Checklist

I linked the correct issue in the ### Fixed Issues section above
I wrote clear testing steps that cover the changes made in this PR
- I added steps for local testing in the Tests section
- I added steps for the expected offline behavior in the Offline steps section
- I added steps for Staging and/or Production testing in the QA steps section
- I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
- I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
I included screenshots or videos for tests on all platforms
I ran the tests on all platforms & verified they passed on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
I followed proper code patterns (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  - If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I followed the guidelines as stated in the Review Guidelines
I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
I verified that if a function's arguments changed that all usages have also been updated correctly
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Can't run android because of the error on latest main

Android: mWeb Chrome

c.mp4

iOS: Native

i.mp4

iOS: mWeb Safari

s.mp4

MacOS: Chrome / Safari

w.mp4

MacOS: Desktop

d.mp4

melvin-bot · 2024-02-02T08:47:46Z

@hoangzinh Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

src/components/MoneyRequestConfirmationList.js

src/pages/iou/request/step/IOURequestStepMerchant.js

hoangzinh · 2024-02-05T15:17:41Z

Btw, please fix conflicts as well.

DylanDylann · 2024-02-05T15:40:36Z

@hoangzinh Updated

hoangzinh · 2024-02-06T00:46:34Z

Oops, This PR has some conflicts :(

DylanDylann · 2024-02-06T11:06:13Z

@hoangzinh Resolved conflict. All yours

hoangzinh · 2024-02-06T15:37:34Z

@DylanDylann last thing. For test steps, I think we can split into 2 test cases. Something like this

Test case 1: Request money

Create a new request
2 ....

Test case 2: Split bill

Create a split bill
..

hoangzinh · 2024-02-06T15:40:29Z

@DylanDylann I found a bug when editing a request money, the merchant value is not loaded correctly.

Screen.Recording.2024-02-06.at.22.39.09.mov

src/components/ReportActionItem/MoneyRequestView.tsx

DylanDylann · 2024-02-10T05:56:39Z

@cead22 I updated it, please help to review it again
cc @hoangzinh

cead22 · 2024-02-12T20:54:06Z

@DylanDylann can you update to resolve conflicts and ping again, and I'll review? thanks

DylanDylann · 2024-02-13T02:17:16Z

@cead22 Updated. Please help to review again

cead22 · 2024-02-13T02:47:12Z

src/pages/iou/request/step/IOURequestStepMerchant.js

+ const isEditingSplitBill = iouType === CONST.IOU.TYPE.SPLIT && isEditing;
+ const {merchant} = ReportUtils.getTransactionDetails(isEditingSplitBill && !lodashIsEmpty(splitDraftTransaction) ? splitDraftTransaction : transaction);
+ const isEmptyMerchant = merchant === '' || merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
+ const isMerchantRequired = _.some(transaction.participants, (participant) => Boolean(participant.isPolicyExpenseChat));


Why are we passing participants in transaction, and why do we have isPolicyExpenseChat in participant? Sorry if this is how we've been doing this and I just didn't know, it just seemed odd to me

@cead22 It is old logic

App/src/pages/iou/request/step/IOURequestStepMerchant.js

Line 45 in 1f1867a

const isMerchantRequired = _.some(participants, (participant) => Boolean(participant.isPolicyExpenseChat));

I only change the order of definition

I understand. Do you know why we do it this way, and whether it makes sense to update this?

It seems we only require a merchant field if the participant is a policy expense chat. I think we need to confirm which cases we need to require merchant before updating

I think I understand better now, and transaction isn't a Transaction like in the database, it just a holder of some data, and in this case it sounds like it can be data related to Money Request view state, rather than the underlying Money Request data

So what's the type of transaction here?

The props define it as transactionPropTypes which afaict doesn't have participants

But I see ReportUtils.getTransactionDetails takes OnyxEntry<Transaction> and the Transaction type does have participants

@cead22 Thanks for pointing out that, I will add participant type to transactionPropTypes as a temporary fix because in the future when this component is migrated to typescript, we will use OnyxEntry type

src/pages/iou/request/step/IOURequestStepMerchant.js

cead22 · 2024-02-13T23:05:16Z

Conflicts

DylanDylann · 2024-02-14T03:34:55Z

@cead22 All yours

cead22 · 2024-02-14T04:04:29Z

If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack

@hoangzinh I saw a warning on your android video, is that getting fixed somewhere else?

cead22 · 2024-02-14T04:05:27Z

src/components/transactionPropTypes.js

@@ -67,6 +67,17 @@ export default PropTypes.shape({
 }),
 ),

+ /** Selected participants */
+ participants: PropTypes.arrayOf(


Should this be required? And should the property isPolicyExpenseChat also be required?

@cead22 in the new TS type

App/src/types/onyx/Transaction.ts

Line 136 in cc0e82d

participants?: Participant[];

App/src/types/onyx/IOU.ts

Line 9 in cc0e82d

isPolicyExpenseChat?: boolean;

These fields are not required. participants exists after the user selects participant so why do you think these fields should be required?

What do you think about adding a fallback value for transaction.participant here

const isMerchantRequired = _.some(transaction.participants, (participant) => Boolean(participant.isPolicyExpenseChat));

why do you think these fields should be required?

What you said makes sense, I only thought maybe they could be required since we're using them.

why do you think these fields should be required?

We can, and it would make it more obvious that isPolicyExpenseChat isn't a required prop, but at the same time, the result is the same because participant.isPolicyExpenseChat will be cast to bool even without the explicit cast, so I don't feel strongly either way

src/pages/iou/request/step/IOURequestStepMerchant.js

hoangzinh · 2024-02-14T09:05:38Z

If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack

@hoangzinh I saw a warning on your android video, is that getting fixed somewhere else?

@cead22 Looks like it has been fixed somewhere, I tried to test again on this PR but couldn't reproduce that warning

android.mov

OSBotify · 2024-02-14T19:23:26Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2024-02-15T05:36:22Z

🚀 Deployed to staging by https://github.com/cead22 in version: 1.4.42-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2024-02-19T23:34:30Z

🚀 Deployed to production by https://github.com/chiragsalian in version: 1.4.42-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

remove old merchant page

c4f0a67

DylanDylann requested a review from a team as a code owner February 2, 2024 08:47

melvin-bot bot requested review from hoangzinh and removed request for a team February 2, 2024 08:47

DylanDylann marked this pull request as draft February 2, 2024 08:47

DylanDylann added 4 commits February 2, 2024 16:42

remove old merchant page

731235e

rename function

4a4e854

remove redundant

690554b

merge main

eb26f8b

DylanDylann marked this pull request as ready for review February 2, 2024 15:20

hoangzinh reviewed Feb 5, 2024

View reviewed changes

src/components/MoneyRequestConfirmationList.js Show resolved Hide resolved

src/pages/iou/request/step/IOURequestStepMerchant.js Outdated Show resolved Hide resolved

DylanDylann added 3 commits February 5, 2024 22:26

dry code

0e20d75

merge main

8b94671

fix TS

992a3ca

DylanDylann added 2 commits February 5, 2024 22:47

fix types

4504a50

merge main

227e0dd

brunovjk mentioned this pull request Feb 5, 2024

[$250] Remove MoneyRequestDatePage.js and copy any changes since Nov 27 into IOURequestStepDate.js #34608

Closed

move copy to new file

12c9f48

DylanDylann added 5 commits February 6, 2024 17:44

merge main

60a5de6

merge main

c496c44

update type

6ddb061

merge main

16686ca

migrate to ts

f508fc6

DylanDylann added 2 commits February 10, 2024 09:33

fix remove empty line

f026983

fix typo

403356e

DylanDylann commented Feb 10, 2024

View reviewed changes

src/components/ReportActionItem/MoneyRequestView.tsx Outdated Show resolved Hide resolved

lint fix

13d5d31

merge main

1ac3823

cead22 requested changes Feb 13, 2024

View reviewed changes

DylanDylann added 3 commits February 14, 2024 02:24

merge main

b7e5570

add comment

ce89de5

add type

594d1cb

DylanDylann added 2 commits February 14, 2024 10:21

merge main

c19f26c

merge main

6e24b84

cead22 reviewed Feb 14, 2024

View reviewed changes

DylanDylann added 2 commits February 14, 2024 16:39

add empty line

70fc1c8

fix lint

d55757f

cead22 approved these changes Feb 14, 2024

View reviewed changes

cead22 merged commit e4e86f4 into Expensify:main Feb 14, 2024
16 checks passed

github-actions bot mentioned this pull request Feb 15, 2024

Deploy Checklist: New Expensify 2024-02-15 #36558

Closed

73 tasks

eucool mentioned this pull request Feb 15, 2024

[$500] Expense - No error when saving an empty merchant in created workspace request #36574

Closed

6 tasks

melvin-bot bot mentioned this pull request Feb 19, 2024

[HOLD for payment 2024-02-26] [$250] Remove MoneyRequestMerchantPage.js and copy any changes since Nov 27 into IOURequestStepMerchant.js #34611

Closed

DylanDylann mentioned this pull request Mar 22, 2024

remove MoneyRequestConfirmPage #35461

Merged

50 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix/34611: Remove old merchant page #35641

Fix/34611: Remove old merchant page #35641

DylanDylann commented Feb 2, 2024 •

edited

Loading

melvin-bot bot commented Feb 2, 2024

hoangzinh commented Feb 5, 2024

DylanDylann commented Feb 5, 2024

hoangzinh commented Feb 6, 2024

DylanDylann commented Feb 6, 2024

hoangzinh commented Feb 6, 2024

hoangzinh commented Feb 6, 2024

DylanDylann commented Feb 10, 2024

cead22 commented Feb 12, 2024

DylanDylann commented Feb 13, 2024

cead22 Feb 13, 2024

DylanDylann Feb 13, 2024

cead22 Feb 13, 2024

DylanDylann Feb 13, 2024

cead22 Feb 13, 2024

DylanDylann Feb 13, 2024

cead22 commented Feb 13, 2024

DylanDylann commented Feb 14, 2024

cead22 commented Feb 14, 2024

cead22 Feb 14, 2024

DylanDylann Feb 14, 2024

cead22 Feb 14, 2024

hoangzinh commented Feb 14, 2024

OSBotify commented Feb 14, 2024

OSBotify commented Feb 15, 2024

OSBotify commented Feb 19, 2024

Fix/34611: Remove old merchant page #35641

Fix/34611: Remove old merchant page #35641

Conversation

DylanDylann commented Feb 2, 2024 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Feb 2, 2024

hoangzinh commented Feb 5, 2024

DylanDylann commented Feb 5, 2024

hoangzinh commented Feb 6, 2024

DylanDylann commented Feb 6, 2024

hoangzinh commented Feb 6, 2024

hoangzinh commented Feb 6, 2024

DylanDylann commented Feb 10, 2024

cead22 commented Feb 12, 2024

DylanDylann commented Feb 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cead22 commented Feb 13, 2024

DylanDylann commented Feb 14, 2024

cead22 commented Feb 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoangzinh commented Feb 14, 2024

OSBotify commented Feb 14, 2024

OSBotify commented Feb 15, 2024

OSBotify commented Feb 19, 2024

DylanDylann commented Feb 2, 2024 •

edited

Loading