[HOLD for payment 2024-08-14] [$250] Chat - Duplicate Sound When Submitting an Expense

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.8-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): abebemiherat@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to FAB > Submit Expense
2. Add an amount and choose a workspace
3. Add a merchant and submit the expense
4. The issue also occurs when assigning a task

Expected Result:

Only one sound should play when submitting an expense, similar to when sending an attachment

Actual Result:

A duplicate sound plays when submitting an expense. This issue also occurs when assigning tasks, resulting in inconsistency compared to the single sound that plays when sending an attachment

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6545530_1721241182355.Screen_Recording_2024-07-17_at_11.05.32_AM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e3eb1202c9315790
• Upwork Job ID: 1815440697580737333
• Last Price Increase: 2024-07-29
• Automatic offers:
• FitseTLT | Contributor | 103325592

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@mallenexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[FitseTLT]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Chat - Duplicate Sound When Submitting an Expense

What is the root cause of that problem?

We are calling playSound twice here

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Lines 351 to 352 in 7ba66a1

	playSound(SOUNDS.DONE);

and here

App/src/components/MoneyRequestConfirmationList.tsx

Lines 702 to 705 in 7ba66a1

	if (shouldPlaySound) {
	playSound(SOUNDS.DONE);
	}
	setDidConfirm(true);

What changes do you think we should make in order to solve the problem?

we don't need to pass !gpsRequired in IOURequestStepConfirmation when gpsRequired is false playSound will be executed in createTransaction

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Lines 351 to 352 in 7ba66a1

	playSound(SOUNDS.DONE);

so we should pass false for shouldPlaySound here

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Lines 624 to 625 in 7ba66a1

	shouldPlaySound={!gpsRequired}
	/>

                        shouldPlaySound={false}

What alternative solutions did you explore? (Optional)

[dominictb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• A duplicate sound plays when submitting an expense.

What is the root cause of that problem?

• When creating an expense, we call playSound in two places:
  

  App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

  Line 351 in f392cd3

  playSound(SOUNDS.DONE);

  
  and
  

  App/src/components/MoneyRequestConfirmationList.tsx

  Line 703 in f392cd3

  playSound(SOUNDS.DONE);

What changes do you think we should make in order to solve the problem?

• The expense creation flow has complex logic, and using conditions to call playSound might cause regressions. For instance, playSound is triggered when !gpsRequired is true, which could lead to unexpected behaviors
  

  App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

  Line 624 in f392cd3

  shouldPlaySound={!gpsRequired}

• Though the creating expense logic is complicated, there is the fact that it always leads to the call to one of the IOU actions:
  

  App/src/libs/actions/IOU.ts

  Line 3456 in f392cd3

  function requestMoney(

  
  

  App/src/libs/actions/IOU.ts

  Line 3597 in f392cd3

  function sendInvoice(

  
  

  App/src/libs/actions/IOU.ts

  Line 2327 in f392cd3

  function createDistanceRequest(

  
  ...

• Based on that fact, we can handle the playSound logic in the above iou functions like we did in here:
  

  App/src/libs/actions/Task.ts

  Lines 405 to 406 in f392cd3

  	playSound(SOUNDS.SUCCESS);
  	API.write(WRITE_COMMANDS.COMPLETE_TASK, parameters, {optimisticData, successData, failureData});

1. We should update this to:

            playSound(SOUNDS.DONE);

and the similar iou function such as create distance request, create track expense, ...

2. Remove

   App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

   Line 351 in f392cd3

   playSound(SOUNDS.DONE);

   
   and
   

   App/src/components/MoneyRequestConfirmationList.tsx

   Line 703 in f392cd3

   playSound(SOUNDS.DONE);

What alternative solutions did you explore? (Optional)

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[mallenexpensify]

Sweet, you were assigned Shawn. This has to do with sound/sonic branding so I'd like your eyes.
I tested 3 times, 3 different ways and I think I got three different responses.

1. Double sound, possibly because there's the expense and then the followup comment

2. 1 sound

3. Either one sound or two sounds that were back-to-back super quickly.

[shawnborton]

Yeah, I don't have much to add here other than it seems like this is a bug and we should only be playing one sound when you submit an expense.

[shawnborton]

Double sound, possibly because there's the expense and then the followup comment

This might be expected then, but I would think you would first hear a "send" sound because you sent an expense, and then you hear the "receive" sound because you received a message from Concierge.

[FitseTLT]

@shawnborton I can assure you this is a bug as the sounds played are executed on the same request flow code. MoneyRequestConfirmationList already handles the playing of the sound according to its shouldPlaySound prop but IOURequestStepConfirmation already has the code to play sound but it passes true for shouldPlaySound so both components play the sound that's how the duplicate sound occurs. But for SplitBillDetailsPage because it doesn't play the sound and the sound is handled with MoneyRequestConfirmationList there is no duplicate sound in that case; that how the inconsistency arose.

[shawnborton]

Sounds good - let's definitely fix it then!