[HOLD for payment 2024-02-05] [$500] Chat - "Start a chat, get 250$" popup blocks recent contacts

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.8.0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in
3. Disable network on your phone
4. Tap on the FAB button
5. Tap on the Start chat button
6. Type in any email address

Expected Result:

I should be albe to see at least one recent contact fully

EDITED:
This is expected - thanks @dannymcclain Here's a quick mock showing the x icon instead of the i icon.

Actual Result:

"Start a chat, get 250$" popup blocks recent contacts

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

Bug6302054_1701794809860.Az_Recorder_20231205_074926.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01eb186a7b7dd5933b
• Upwork Job ID: 1732096883915866112
• Last Price Increase: 2023-12-26

[melvin-bot]

Triggered auto assignment to @slafortune (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01eb186a7b7dd5933b

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 (External)

[chiItepin]

Proposal

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

The "start a chart" referral overlaps a good size of the screen while keyboard is focused on mobile

What is the root cause of that problem?

The "start a chart" referral component is designed to be sticky/fixed positioned, thus, it remains visible at all times regardless of input being focused

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

If the field is being focused, the The "start a chart" referral component would not behave as being sticky/fixed

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[gijoe0295]

Proposal

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

Referral modal blocks view on small screen devices.

What is the root cause of that problem?

The referral block is sticky and too large on small height devices leading to blocking view.

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

Outdated

Responsively adjust the style of referral modal on small screen height determined here.

Things we can adjust in here and here:

• Font size
• Padding
• Margin

Based on the latest discussion, we want to make the referral banner dismissable.

1. Define a state to control the visibility of the banner isReferralCTAVisible (I spotted that the shouldShowReferallModal state here and its setter here seem redundant, we can use them here).
2. Replace the Info icon with Close icon and wrapped it around PressableWithoutFeedback set with onPress to set the visibility state.
3. If we don't want to lose focus on the text input after pressing the close icon, we can add e.preventDefault to onMouseDown of the above Pressable.

Suggested code changes

<PressableWithoutFeedback
    onPress={this.handleReferralModal}
    onMouseDown={(e) => {
        e.preventDefault();
    }}
    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
    accessibilityLabel={this.props.translate('common.close')}
>
    <Icon
        src={Close}
        height={20}
        width={20}
    />
</PressableWithoutFeedback>

What alternative solutions did you explore? (Optional)

Avoid display the referral block as sticky on small height devices. We can show a floating icon just like on TikTok.

[melvin-bot]

📣 @gijoe0295! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[yh-0218]

Proposal

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

The "start a chart" referral overlaps a good size of the screen while keyboard is focused on mobile

What is the root cause of that problem?

The "start a chart" referral component is designed to be sticky/fixed positioned, thus, it remains visible at all times regardless of input being focused

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

1. change icon to X
   

   App/src/components/OptionsSelector/BaseOptionsSelector.js

   Line 646 in 207d4ac

   src={Info}

2. Add new state variable to NewChatPage (need to add others that use OptionsSelector)

const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(true)
const hideShouldShowReferralCTA = () => {
     setShouldShowReferralCTA(false);
}

3. Pass shouldShowReferralCTA, hideShouldShowReferralCTA as param on OptionsSelector
4. Cover icon with PressableWithoutFeedback

 <PressableWithoutFeedback accessibilityRole="button"
        onPress={() => {
                   if (this.props.hideShouldShowReferralCTA) {this.props.hideShouldShowReferralCTA()}
          }}
  >
             <Icon
                    src={Info}
                    height={20}
                    width={20}
             />
</PressableWithoutFeedback>

What alternative solutions did you explore? (Optional)

Screen.Recording.2023-12-14.at.8.26.54.PM.mov

[abdulrahuman5196]

reviewing now

[abdulrahuman5196]

@slafortune What is the expected behaviour here? The popup is currently made to be shown always. For small screen devices it seems to block the view.

What should we do here from design perspective?

[DylanDylann]

Proposal

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

• Chat - "Start a chat, get 250$" popup blocks recent contacts

What is the root cause of that problem?

• This issue occurs in a few mobile devices that have small height: The sticky button overlays the search results.

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

• Based on the above discussion, we will allow the user to dismiss the "Chat a chat ..." banner. Do it by:

1. Create the onyx key shouldDisplayReferralBanner to store the value: should we display the referral or not. Its data is something like:

{
    [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST]: 'true',
    [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT]: 'true',
    [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY]: 'true',
    [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND]: 'true',
    [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE]: 'true',
};

2. Then, create a function toggleReferralBanner: (contentType: string, status: boolean) => void to update the onyx.
3. Then, update the condition to just display the referral banner if the shouldDisplayReferralBanner[this.props.referralContentType] is true in here:
   

   App/src/components/OptionsSelector/BaseOptionsSelector.js

   Line 617 in 776849a

   {this.props.shouldShowReferralCTA && (

4. Finally, update:
   

   App/src/components/OptionsSelector/BaseOptionsSelector.js

   Lines 645 to 649 in 776849a

   	<Icon
   	src={Info}
   	height={20}
   	width={20}
   	/>

   
   to:

  <PressableWithoutFeedback
                                onPress={() => {
                                    toggleReferralBanner(this.props.referralContentType, false);
                                }}
                            >
                                <Icon  // Close Icon here
                                    src={CloseIcon}
                                />
                            </PressableWithoutFeedback>

What alternative solutions did you explore? (Optional)

• Just need to add the state isDissmissedReferralCTA here:
  

  App/src/components/OptionsSelector/BaseOptionsSelector.js

  Line 90 in e17c313

  this.state = {

• Then, update the condition to just display the referral banner if the isDissmissedReferralCTA is false in here:
  

  App/src/components/OptionsSelector/BaseOptionsSelector.js

  Line 617 in 776849a

  {this.props.shouldShowReferralCTA && (

• Finally, update:
  

  App/src/components/OptionsSelector/BaseOptionsSelector.js

  Lines 645 to 649 in 776849a

  	<Icon
  	src={Info}
  	height={20}
  	width={20}
  	/>

  
  to:

  <PressableWithoutFeedback
                                onPress={() => {
                                   this.setState({isDissmissedReferralCTA: true})
                                }}
                            >
                                <Icon  // Close Icon here
                                    src={CloseIcon}
                                />
                            </PressableWithoutFeedback>

[melvin-bot]

@slafortune, @abdulrahuman5196 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[ishpaul777]

Proposal

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

Chat - "Start a chat, get 250$" popup blocks recent contacts

What is the root cause of that problem?

Here the root cause is not specific to code rather the user device height, if device height is small the sticky footer and keyboard takes the most space on screen resulting the search results hide behind the footer.

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

Hiding the footer when the keyboard is open, using the hook seems a good solution, the problem is this creates a problem as keyboard close/open can only be detected on native devices so on mweb chrome/safari useKeyboardState won't work, instead we should check if the this.textInput.isFocused() for consistency among platforms

[melvin-bot]

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

[slafortune]

I'm not sure @abdulrahuman5196 , let's get their 2 cents on this!
@dannymcclain Do you have some direction for us on how popup should act?

[dannymcclain]

Hmm this is a tricky one. @dubielzyk-expensify since you worked on this (I think?) do you have any strong feelings about it? I'm tempted to say we should hide the promo banner when the keyboard is open, but I'm keen on Jon and the @Expensify/design team's thoughts.

[dubielzyk-expensify]

Oh yeah, this isn't great. I like the idea of hiding the banner when the keyboard is open or reduce the spacing/padding (though there might not be much to gain from this).

The problem though with hiding it on input focus is that I think we trigger that by default. So there's a world where users just never see the promo banner.

I think we'll have to adjust the size. Looping in @jamesdeanexpensify

[gijoe0295]

We can adjust the spacing, padding, etc. Or we can have a little (but impressive) gift box icon on the upper right corner (almost like the Question mark icon in Settings page)? That's my proposed alternate solution.

[melvin-bot]

Current assignee @abdulrahuman5196 is eligible for the Internal assigner, not assigning anyone new.

[joelbettner]

Looks good. I assigned @gijoe0295 to this issue. Feel free to start working on the PR.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.32-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Make referral banner dismissible #33925

If no regressions arise, payment will be issued on 2024-02-05. 🎊

For reference, here are some details about the assignees on this issue:

• @abdulrahuman5196 requires payment (Needs manual offer from BZ)
• @gijoe0295 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@abdulrahuman5196] The PR that introduced the bug has been identified. Link to the PR:
• [@abdulrahuman5196] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@abdulrahuman5196] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@abdulrahuman5196] Determine if we should create a regression test for this bug.
• [@abdulrahuman5196] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@slafortune] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

Payment Summary

Upwork Job

• ROLE: @joelbettner paid $(AMOUNT) via Upwork (LINK)
• ROLE: @abdulrahuman5196 paid $(AMOUNT) via Upwork (LINK)
• ROLE: @gijoe0295 paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@slafortune)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1732096883915866112/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[slafortune]

@abdulrahuman5196 can you please complete the checklist?

Offers sent -

ROLE: @abdulrahuman5196 paid $500 via Upwork (LINK)
ROLE: @gijoe0295 paid $500 via Upwork (LINK)

[abdulrahuman5196]

The PR that introduced the bug has been identified. Link to the PR:
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

Not a regression. Feature update.

Determine if we should create a regression test for this bug.

Yes.

If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

1. Press FAB >> Start chat
2. Press close referral banner
3. Verify the banner is closed
4. Verify the text input remains focused
5. Close the RHP
6. Repeat step 1
7. Verify the banner appears again
8. Repeat those steps with Request money and Search page

@slafortune Completed the checklist and accepted the offer.

[slafortune]

👍 Paid Paid and testrail done!