Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement new Rewards onboarding ("giftbox") #30308

Closed
3 tasks done
Miyayes opened this issue May 12, 2023 · 9 comments · Fixed by brave/brave-core#18717
Closed
3 tasks done

Implement new Rewards onboarding ("giftbox") #30308

Miyayes opened this issue May 12, 2023 · 9 comments · Fixed by brave/brave-core#18717

Comments

@Miyayes
Copy link
Collaborator

Miyayes commented May 12, 2023

Description

Designs: https://www.figma.com/file/VIkvO8TBQXVBnvKn4w8iYu/BR-onboarding?type=design&node-id=0-1

Tasks

@mkarolin
Copy link
Contributor

Test Plan

Existing profile with Rewards enabled

  1. Open Brave with an existing profile already with Rewards already enabled.
  2. Open NTP and verify that the rewards widget shows the balance and not the Onboarding slide.

New profile

  1. Open Brave with a new profile
  2. Open NTP and verify that the rewards widget shows the onboarding slide.
  3. Verify that clicking the button opens the Rewards panel on the country selection slide.
  4. Click outside the panel to close it
  5. Navigate to brave://rewards and verify that the page shows the onboarding UI.
  6. Verify that clicking the button opens the Rewards panel on the country selection slide.
  7. Click outside the panel to close it
  8. Click on the rewards icon to open the rewards panel
  9. Verify that panel opens with the onboarding slide
  10. Click "Start ..." button
  11. Select country
  12. Click "Continue"
  13. Click "Done"
  14. Verify that the rewards tour is opened in a new tab

Also, verify any links that show on any of the slides.

Existing pre-rewards 2.5 profile with Rewards not yet enabled

  1. Open Brave with an existing pre-rewards 2.5 profile with Rewards not yet enabled
  2. Open NTP and verify that the rewards widget show the country selection slide
  3. Click "Continue" and verify that the rewards panel opens on the country selection slide
  4. Click outside the panel to close it
  5. Click on the rewards icon to open the rewards panel
  6. Verify that the rewards panel opens on the country selection slide

@GeetaSarvadnya
Copy link

GeetaSarvadnya commented Jul 7, 2023

Verification PASSED on

Brave | 1.57.1 Chromium: 115.0.5790.56 (Official Build) beta (64-bit)
-- | --
Revision | ebcfb87c1393f36955cfa2f6451a1767e3dc3ee5-refs/branch-heads/5790@{#1193}
OS | Windows 10 Version 22H2 (Build 19045.3086)

Existing user

Existing user_non connected state
  1. Clean profile 1.53.94
  2. Enable rewards
  3. Don't connect to a custodian
  4. Upgrade the profile to 1.5.x
  5. Open a NTP and ensured that the Connect custodian is shown on the NTP same as 1.53.x
1.53.94 1.57.1
image image
Existing user_connected state
  1. Clean profile 1.53.94
  2. Enable rewrads and connect a custodian
  3. Upgrade the profile to 1.5.x
  4. Open NTP and verified that the rewards widget shows the balance
1.53.94 1.57.1
image image

New user

Onboarding via NTP_Light theme and Dark theme
  • Confirmed that Rewrads NTP widget shows the onborading slide
  • Confirmed that click on Start using rewrads opens up the country selection slide
  • Confirmed that clicking anywhere outside the slide closes the slide
  • Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  • Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on How does Brave Rewards work link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page

Light theme

Example Example Example Example Example
image image image image image

Dark theme

Example Example Example Example Example
image image image image image
Onboarding via brave://rewards_Light and Dark theme
  • Confirmed that brave://rewrads page shows the onborading slide
  • Confirmed that Learn more link is shown in the brave rewards onborading slide
  • Confirmed that click on Learn more link opens up the rewards tourhttps://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on Start using rewrads opens up the country selection slide
  • Confirmed that clicking anywhere outside the slide closes the slide
  • Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  • Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on How does Brave Rewards work link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page

Light theme

Example Example Example Example
image image image image

Dark theme

Example Example Example Example
image image image image
Onboarding via a Site_Light and Dark theme
  • Open a site and tap on the BR panel and confirmed that the onborading slide is shown
  • Confirmed that How does it work? link is shown in the brave rewards onborading slide
  • Confirmed that click on How does it work? link opens up the rewards tourhttps://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on Start using rewrads opens up the country selection slide
  • Confirmed that clicking anywhere outside the slide closes the slide
  • Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  • Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on How does Brave Rewards work link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page

Light theme

Example Example Example Example
image image image image

Dark theme

Example Example Example Example
image image image image
Onboarding via a Inline tip_Light and Dark theme
  1. Clean profile 1.57.x
  2. Open twitter.com or reddit.com or github.com
  3. Tap on the inline tip button
  4. Confirm that the onborading slide is shown on the BR panel
  5. Confirmed that How does it work? link is shown in the brave rewards onborading slide
  6. Confirmed that click on Start using rewrads opens up the country selection slide
  7. Confirmed that clicking anywhere outside the slide closes the slide
  8. Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  9. Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  10. Confirmed that click on How does Brave Rewards work link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
Light theme Dark theme
image image

Existing pre-rewards 2.5 profile with Rewards enabled

Install 1.45.100 (no geo declare version) and enable rewrads and upgrade the profile to 1.57.x
  1. Install 1.45.100 beta build
  2. Enable rewards
  3. Upgrade the profile to 1.57.x
  4. Open a NTP and ensured that the Select your country slide is shown in the rewards NTP widget
  5. Click on Continue
  6. Confirm that Select your country slide is opened
  7. Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  8. Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  9. Confirmed that click on How does Brave Rewards work? link in the Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
1.45.100 1.57.x 1.57.x 1.57.x 1.57.x
image image image image image

Rewards Tour

Rewards tour_click on "How does it work?" via NTP
  1. Clean profile 1.5.x
  2. Open an NTP
  3. Confirm that the "How does it work?" link is shown in the rewards widget onborading slide
  4. Confirm that click on "How does it work?" link opens up the Rewards tour https://brave.com/rewards-tour/ in an new tab page
  5. Confirm that How it works onboarding slide is opened with 4 steps, by default 1st step slide in an expanded view
  6. Confirm that click on Next opens up the next slide
  7. Confirm that content of 1st and 2nd and 4th step slide is matching with the Figma spec
  8. Confirmed that the content of the 3rd step slide is NOT matching with the Figma spec, which is expected as per Chris comments in Implement new Rewards onboarding ("giftbox") #30308 (comment)
  9. Confirm that user can expand the each step by clicking on the header
How it works link Step 1 Step 2 Step 3 Step 4
image image image image image
Rewards tour_click on "How does Brave Rewards work" via Woohoo! You’re all set slide
  1. Clean profile 1.57.x
  2. Click on Start using Rewards via BR panel or NTP or brave://rewrads page
  3. Contiune till Woohoo! You’re all set slide
  4. Confirm that click on "How does Brave Rewards work" link opens up the Rewards tour https://brave.com/rewards-tour/ in an new tab page
  5. Confirm that How it works onboarding slide is opened with 4 steps, by default 1st step slide in an expanded view
  6. Confirm that click on Next opens up the next slide
  7. Confirm that content of 1st and 2nd and 4th step slide is matching with the Figma spec
  8. Confirmed that the content of the 3rd step slide is NOT matching with the Figma spec, which is expected as per Chris comments in Implement new Rewards onboarding ("giftbox") #30308 (comment)
  9. Confirm that user can expand the each step by clicking on the header
How does Brave Rewards works link Step 1 Step 2 Step 3 Step 4
image image image image image
Rewards tour_click on "Done" via Woohoo! You’re all set slide
  1. Clean profile 1.57.x
  2. Click on Start using Rewards via BR panel or NTP or brave://rewrads page
  3. Contiune till Woohoo! You’re all set slide
  4. Confirm that click on "Done" button opens up the Rewards tour https://brave.com/rewards-tour/ in an new tab page
  5. Confirm that How it works onboarding slide is opened with 4 steps, by default 1st step slide in an expanded view
  6. Confirm that click on Next opens up the next slide
  7. Confirm that content of 1st and 2nd and 4th step slide is matching with the Figma spec
  8. Confirmed that the content of the 3rd step slide is NOT matching with the Figma spec, which is expected as per Chris comments in Implement new Rewards onboarding ("giftbox") #30308 (comment)
  9. Confirm that user can expand the each step by clicking on the header
How does Brave Rewards works link Step 1 Step 2 Step 3 Step 4
image image image image image
Rewards tour_click on "How does it work?" via BR panel
  1. Clean profile 1.57.x
  2. Click on Start using Rewards via BR panel
  3. Confirm that the "How does it work?" link is shown in the BR panel onborading slide
  4. Confirm that click on "How does it work?" link opens up the Rewards tour https://brave.com/rewards-tour/ in an new tab page
  5. Confirm that How it works onboarding slide is opened with 4 steps, by default 1st step slide in an expanded view
  6. Confirm that click on Next opens up the next slide
  7. Confirm that content of 1st and 2nd and 4th step slide is matching with the Figma spec
  8. Confirmed that the content of the 3rd step slide is NOT matching with the Figma spec, which is expected as per Chris comments in Implement new Rewards onboarding ("giftbox") #30308 (comment)
  9. Confirm that user can expand the each step by clicking on the header
How it works link Step 1 Step 2 Step 3 Step 4
image image image image image
Rewards tour_click on "Learn more" via brave://rewards page
  1. Clean profile 1.57.x
  2. Open brave://rewards page
  3. Confirm that the "Learn more" link is shown in the brave://rewards onborading slide
  4. Confirm that click on "Learn more" link opens up the Rewards tour https://brave.com/rewards-tour/ in an new tab page
  5. Confirm that How it works onboarding slide is opened with 4 steps, by default 1st step slide in an expanded view
  6. Confirm that click on Next opens up the next slide
  7. Confirm that content of 1st and 2nd and 4th step slide is matching with the Figma spec
  8. Confirmed that the content of the 3rd step slide is NOT matching with the Figma spec, which is expected as per Chris comments in Implement new Rewards onboarding ("giftbox") #30308 (comment)
  9. Confirm that user can expand the each step by clicking on the header
Learn more Step 1 Step 2 Step 3 Step 4
image image image image image

@GeetaSarvadnya GeetaSarvadnya added the QA/In-Progress Indicates that QA is currently in progress for that particular issue label Jul 7, 2023
@GeetaSarvadnya
Copy link

GeetaSarvadnya commented Jul 11, 2023

@mkarolin Need few clarifications on the rewards onboarding tour.

  1. Content of the onboarding tour in 3rd step is not as per the spec. Is this known/expected change?
1.57.6 Spec
image image
  1. Click on Done (in the Woohoo! You’re all set! slide), How does Brave Rewards work or How does it work? opens up the rewards tour in a new tab page even though the page is already opened - Is this expeted?

  2. I don't see any difference between the 1.45.x and 1.53.x Existing pre-rewards 2.5 profile with Rewards not yet enabled I am not sure why this test is suggested in Implement new Rewards onboarding ("giftbox") #30308 (comment)

1.45.110 1.53.94
image image

cc: @Miyayes @LaurenWags

@Miyayes
Copy link
Collaborator Author

Miyayes commented Jul 11, 2023

@GeetaSarvadnya On 1) Regarding content on brave.com/rewards-tour, you can skip checking that. You can just make sure it loads properly and nothing obvious is wrong :) The actual text / images are being slightly edited.

@Miyayes
Copy link
Collaborator Author

Miyayes commented Jul 11, 2023

Click on Done (in the Woohoo! You’re all set! slide), How does Brave Rewards work or How does it work? opens up the rewards tour in a new tab page even though the page is already opened - Is this expeted? @GeetaSarvadnya

The brave.com/rewards-tour should only appear after the user is done onboarding (presses "Done", or presses "How does it work?" on the last slide of onboarding). If it opens twice, that is not expected cc: @mkarolin.

However, if you navigated to brave.com/rewards-tour manually yourself, and then also went through onboarding, then it's expected that it opens another new tab with brave.com/rewards-tour, even if you already had a tab open with brave.com/rewards-tour (since there is no detection based on which tabs you already have open).

@mkarolin
Copy link
Contributor

@GeetaSarvadnya regarding 2, what @Miyayes said, if you already have the tour tab opened (manually or from a previous test run) we don't check if there's one already open and we'll open a new one if you go through the onboarding and click Done or "How does it work?" link again.

Regarding 3, I didn't word it correctly. It's pre-rewards 2.5 profile where you joined rewards already, but haven't declared the locale.

@GeetaSarvadnya GeetaSarvadnya added QA Pass-Win64 and removed QA/In-Progress Indicates that QA is currently in progress for that particular issue labels Jul 12, 2023
@LaurenWags LaurenWags added the QA/In-Progress Indicates that QA is currently in progress for that particular issue label Jul 18, 2023
@LaurenWags
Copy link
Member

LaurenWags commented Jul 18, 2023

Verified with

Brave | 1.57.18 Chromium: 115.0.5790.98 (Official Build) beta (x86_64)
-- | --
Revision | d515871a6c6df7d2843e755c8b7dda9b744f26d6
OS | macOS Version 13.4.1 (a) (Build 22F770820b)

Existing user

Existing user_non connected state - PASSED
  1. Clean profile 1.56.9
  2. Enable rewards
  3. Don't connect to a custodian
  4. Upgrade the profile to 1.57.x
  5. Open a NTP and ensured that the Connect custodian is shown on the NTP same as 1.53.x
1.56.9 1.57.18
1 2
3 4
Existing user_connected state - PASSED
  1. Clean profile 1.56.9
  2. Enable rewards and connect a custodian
  3. Upgrade the profile to 1.57.x
  4. Open NTP and verified that the rewards widget shows the balance
1.56.9 1.57.18
1 2
3 4
Existing grandfathered_unverified state - PASSED
  1. Clean profile 1.56.9 that is in the grandfathered unverified state (with some vBAT)
  2. Upgrade the profile to 1.57.x
  3. Open NTP and verified that the rewards widget shows the balance
1.56.9 1.57.18
1 2
3 4

New user

Onboarding via NTP_Light theme and Dark theme - PASSED
  • Confirmed that Rewards NTP widget shows the onboarding slide
  • Confirmed that clicking on How does it work? link on the onboarding slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that clicking on Start using rewards opens up the country selection slide
  • Confirmed that clicking anywhere outside the slide closes the slide
  • Confirmed that after selecting country from the Select your country slide and confirming your choice by selecting the Continue button, the Woohoo! You’re all set! slide is displayed
  • Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on How does Brave Rewards work? link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page

Light theme

Example Example Example Example Example
1 2 3 4 5

Dark theme

Example Example Example Example Example
1 2 3 4 5
Onboarding via brave://rewards_Light and Dark theme - PASSED
  • Confirmed that brave://rewrads page shows the onboarding slide
  • Confirmed that Learn more link is shown in the brave rewards onboarding slide
  • Confirmed that click on Learn more link opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on Start using rewards opens up the country selection slide
  • Confirmed that clicking anywhere outside the slide closes the slide
  • Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  • Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on How does Brave Rewards work? link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page

Light theme

Example Example Example Example
1 2 3 4

Dark theme

Example Example Example Example
1 2 3 4
Onboarding via a Site_Light and Dark theme - PASSED
  • Open a site and tap on the BR panel and confirmed that the onboarding slide is shown
  • Confirmed that How does it work? link is shown in the brave rewards onboarding slide
  • Confirmed that click on How does it work? link opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on Start using rewards opens up the country selection slide
  • Confirmed that clicking anywhere outside the slide closes the slide
  • Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  • Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on How does Brave Rewards work link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page

Light theme

Example Example Example Example
1 2 3 4

Dark theme

Example Example Example Example
1 2 3 4
Onboarding via a Inline tip_Light and Dark theme - PASSED
  1. Clean profile 1.57.x
  2. Open twitter.com or reddit.com or github.com
  3. Tap on the inline tip button
  4. Confirm that the onboarding slide is shown on the BR panel
  5. Confirmed that How does it work? link is shown in the brave rewards onboarding slide
  6. Confirmed that click on Start using rewards opens up the country selection slide
  7. Confirmed that clicking anywhere outside the slide closes the slide
  8. Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  9. Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  10. Confirmed that click on How does Brave Rewards work link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
Light theme Dark theme
1 2

Existing pre-rewards 2.5 profile with Rewards enabled

Install 1.45.100 (no geo declare version) and enable rewards and upgrade the profile to 1.57.x - PASSED
  1. Install 1.45.100 beta build
  2. Enable rewards (you should not have geo declaration)
  3. Navigate to brave://rewards-internals, confirm geo/country field is not listed on this page
  4. Upgrade the profile to 1.57.x
  5. Navigate to brave://rewards-internals, see that geo/country field is now displayed but "Not set"
  6. Open a NTP and ensured that the Select your country slide is shown in the rewards NTP widget
  7. Click on Continue
  8. Confirm that Select your country slide is opened
  9. Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  10. Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  11. Navigate back to brave://rewards-internals and refresh to confirm your selected country/geo is now displayed on this page
Step 2 Step 3 Step 5 Step 6 Step 8 Step 9 Step 9 Step 11
2 3 5 6 8 9 10 11

Rewards Tour

Per #30308 (comment), just spot checked the tour itself and did not compare to Figma. Generally confirmed able to navigate through the tour page, https://brave.com/rewards-tour/, images displayed, etc.

@LaurenWags LaurenWags added QA Pass-macOS and removed QA/In-Progress Indicates that QA is currently in progress for that particular issue labels Jul 21, 2023
@LaurenWags
Copy link
Member

@brave/qa-team we should run through the following reduced cases on Linux (from #30308 (comment)):

Existing user

  • Existing user_non connected state
  • Existing user_connected state
  • Existing grandfathered_unverified state

New user

  • Onboarding via NTP_Light theme OR Dark theme (don't need both themes, just one)
  • Onboarding via a Site_Light OR Dark theme (check whichever color wasn't used in above case)

Can generally skip checking Rewards Tour per #30308 (comment)

@LaurenWags
Copy link
Member

LaurenWags commented Jul 31, 2023

Verified with

Brave	1.57.34 Chromium: 115.0.5790.114 (Official Build) beta (64-bit) 
Revision	053d4a655f3b76858472b8715b5f320c674848cd
OS	Linux

Existing user

Existing user_non connected state - PASSED
  1. Clean profile 1.56.14
  2. Enable rewards
  3. Don't connect to a custodian
  4. Upgrade the profile to 1.57.x
  5. Open a NTP and ensured that the Connect custodian is shown on the NTP same as 1.53.x
1.56.14 1.57.34
1 2
3 4
Existing user_connected state - PASSED
  1. Clean profile 1.56.14
  2. Enable rewards and connect a custodian
  3. Upgrade the profile to 1.57.x
  4. Open NTP and verified that the rewards widget shows the balance
1.56.14 1.57.34
1 2
3 4
Existing grandfathered_unverified state - PASSED
  1. Clean profile 1.56.14 that is in the grandfathered unverified state (with or without some vBAT)
  2. Upgrade the profile to 1.57.x
  3. Open NTP and verified that the rewards widget shows the balance
1.56.14 1.57.34
1 2
3 4

New user

Onboarding via NTP (Light theme) - PASSED
  • Confirmed that Rewards NTP widget shows the onboarding slide
  • Confirmed that clicking on How does it work? link on the onboarding slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that clicking on Start using rewards opens up the country selection slide
  • Confirmed that clicking anywhere outside the slide closes the slide
  • Confirmed that after selecting country from the Select your country slide and confirming your choice by selecting the Continue button, the Woohoo! You’re all set! slide is displayed
  • Confirmed that click on Done in Woohoo! You’re all set! slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page

Light theme

Example Example Example Example Example
1 2 3 4 5
Onboarding via a Site (Dark theme) - PASSED
  • Open a site and tap on the BR panel and confirmed that the onboarding slide is shown
  • Confirmed that How does it work? link is shown in the brave rewards onboarding slide
  • Confirmed that click on How does it work? link opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page
  • Confirmed that click on Start using rewards opens up the country selection slide
  • Confirmed that clicking anywhere outside the slide closes the slide
  • Confirmed that after selecting country from the Select your country slide, the Woohoo! You’re all set! slide is displayed
  • Confirmed that click on How does Brave Rewards work link in the all set slide opens up the rewards tour https://brave.com/rewards-tour/ in a new tab page

Dark theme

Example Example Example Example
1 2 3 4

@LaurenWags LaurenWags added QA/In-Progress Indicates that QA is currently in progress for that particular issue and removed QA/In-Progress Indicates that QA is currently in progress for that particular issue labels Jul 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants