Added purchase failed panel #13486

spylogsster · 2022-05-26T14:23:49Z

Resolves brave/brave-browser#23028
Resolves brave/brave-browser#22731

connect-api.guardianapp.com is unavailable often for me and I see infinite loading state because the purchase check failed is not handled properly on typescript side

Added purchase failed state handling on typescript side
Added PurchaseFailedPanel view
Shared some styles between PurchaseFailed view and Error view
Improved ContactSupport view to handle response result of ticket submission:
- Added autoclose if success
- Added error message if failed

2022-05-26_17h02_26.mp4

Brave.Browser.Development.-.Settings.-.2.June.2022.mp4

Submitter Checklist:

I confirm that no security/privacy review is needed, or that I have requested one
There is a ticket for my issue
Used Github auto-closing keywords in the PR description above
Wrote a good PR/commit description
Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
Ran git rebase master (if needed)

Reviewer Checklist:

A security review is not needed, or a link to one is included in the PR description
New files have MPL-2.0 license header
Adequate test coverage exists to prevent regressions
Major classes, functions and non-trivial code blocks are well-commented
Changes in component dependencies are properly reflected in gn
Code follows the style guide
Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

Block connect-api.guardianapp.com in Fiddler
Try to setup vpn on clean profile
Should not stuck on infinite loading when checking purchase credentials

spylogsster · 2022-05-26T14:27:48Z

components/brave_vpn/resources/panel/components/contact-support/index.tsx

 import getPanelBrowserAPI, * as BraveVPN from '../../api/panel_browser_api'
 import { CaratStrongLeftIcon } from 'brave-ui/components/icons'

 interface Props {
-  onCloseContactSupport: React.MouseEventHandler<HTMLButtonElement>


this is used outside only by empty callbacks to setup flags, seems not necessary to pass React.MouseEventHandler @petemill ? and I added auto closing of this panel to be more user friendly when request is success

brave-builds · 2022-05-26T15:08:57Z

A Storybook has been deployed to preview UI for the latest push

brave-builds · 2022-05-27T09:04:29Z

A Storybook has been deployed to preview UI for the latest push

petemill

Nice work and cleanup, but some small changes I think

petemill · 2022-06-02T04:16:47Z

components/brave_vpn/resources/panel/components/styles/style.ts

@@ -0,0 +1,54 @@
+import styled from 'styled-components'


Since this is the only file in this directory, how about we avoid the name repetition and just put components/styles.ts instead of components/styles/styles.ts?

Or perhaps a better idea, since these aren't really styles but are components, call them something like components/general.ts?

petemill · 2022-06-02T04:19:50Z

components/resources/brave_vpn_strings.grdp

  <message name="IDS_BRAVE_VPN_LOADING" desc="Label to show below loader icon">
    One moment while loading…
  </message>
-
+  <message name="IDS_BRAVE_VPN_PURCHASE_FAILED " desc="Label to show when purchase status failed">
+    Unable to check the status of your purchase, probably a network problem.


How about "Unable to check the status of your purchase. This could be caused by a network problem."

petemill · 2022-06-02T04:33:13Z

components/brave_vpn/resources/panel/components/purchase-failed-panel/index.tsx

+            {getLocale('braveVpnContactSupport')}
+        </S.ButtonText>
+        }
+        {isContactSupportVisible &&


I think it looks a little strange to put the support contact form underneath the error. Perhaps we do it like the existing contact form instance, and just replace the UI here (if (isContactSupportVisible) return <ContactSupport ...>).

good idea, thanks,

Brave.Browser.Development.-.Settings.-.2.June.2022.mp4

petemill · 2022-06-02T04:33:37Z

components/brave_vpn/resources/panel/components/purchase-failed-panel/index.tsx

+function PurchaseFailedPanel () {
+  const [isContactSupportVisible, setContactSupportVisible] = React.useState(false)
+  const closeContactSupport = () => {
+    console.log('isContactSupportVisible', isContactSupportVisible)


nit: remove logging

brave-builds · 2022-06-02T11:33:41Z

A Storybook has been deployed to preview UI for the latest push

brave-builds · 2022-06-02T12:37:58Z

A Storybook has been deployed to preview UI for the latest push

bsclifton

I wasn't able to figure out how to block in Fiddler, so I just made hostname non-routable using hostfile. Works great! Before we release, we'll want to review all the strings - I don't think these error states were captured in Figma. Code changes look great too! 😄👍

brave-builds · 2022-06-03T10:58:06Z

A Storybook has been deployed to preview UI for the latest push

brave-builds · 2022-06-03T16:10:48Z

A Storybook has been deployed to preview UI for the latest push

petemill

nice

spylogsster requested review from petemill, bsclifton and nullhook May 26, 2022 14:23

github-actions bot added the CI/storybook-url Deploy storybook and provide a unique URL for each build label May 26, 2022

github-actions bot assigned spylogsster May 26, 2022

spylogsster commented May 26, 2022

View reviewed changes

spylogsster mentioned this pull request May 26, 2022

Contact technical support form doesn't dismiss after submission brave/brave-browser#22731

Closed

spylogsster added this to the 1.41.x - Nightly milestone May 27, 2022

spylogsster force-pushed the brave-23028 branch from 906163d to e231ca5 Compare May 27, 2022 08:30

petemill requested changes Jun 2, 2022

View reviewed changes

spylogsster force-pushed the brave-23028 branch from e231ca5 to 1ed9f3e Compare June 2, 2022 10:35

bsclifton approved these changes Jun 3, 2022

View reviewed changes

spylogsster force-pushed the brave-23028 branch from e77c9d1 to 93311a9 Compare June 3, 2022 10:25

spylogsster added 2 commits June 3, 2022 18:44

Added purchase failed panel

f6e3012

Move styles to general.ts and replace UI for contact support form

96de8f2

spylogsster force-pushed the brave-23028 branch from 93311a9 to 96de8f2 Compare June 3, 2022 15:44

petemill approved these changes Jun 3, 2022

View reviewed changes

spylogsster merged commit 339367e into master Jun 3, 2022

spylogsster deleted the brave-23028 branch June 3, 2022 19:43

stephendonner mentioned this pull request Jun 7, 2022

Improve UI for VPN connection errors brave/brave-browser#23028

Closed

spylogsster mentioned this pull request Jun 21, 2022

Hook up Privacy Policy link in Contact technical support form brave/brave-browser#22713

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added purchase failed panel #13486

Added purchase failed panel #13486

spylogsster commented May 26, 2022 •

edited

Loading

spylogsster May 26, 2022 •

edited

Loading

brave-builds commented May 26, 2022

brave-builds commented May 27, 2022

petemill left a comment

petemill Jun 2, 2022

spylogsster Jun 2, 2022

petemill Jun 2, 2022

spylogsster Jun 2, 2022

petemill Jun 2, 2022

spylogsster Jun 2, 2022 •

edited

Loading

petemill Jun 2, 2022

spylogsster Jun 2, 2022

brave-builds commented Jun 2, 2022

brave-builds commented Jun 2, 2022

bsclifton left a comment

brave-builds commented Jun 3, 2022

brave-builds commented Jun 3, 2022

petemill left a comment

Added purchase failed panel #13486

Added purchase failed panel #13486

Conversation

spylogsster commented May 26, 2022 • edited Loading

Submitter Checklist:

Reviewer Checklist:

After-merge Checklist:

Test Plan:

spylogsster May 26, 2022 • edited Loading

Choose a reason for hiding this comment

brave-builds commented May 26, 2022

brave-builds commented May 27, 2022

petemill left a comment

Choose a reason for hiding this comment

petemill Jun 2, 2022

Choose a reason for hiding this comment

spylogsster Jun 2, 2022

Choose a reason for hiding this comment

petemill Jun 2, 2022

Choose a reason for hiding this comment

spylogsster Jun 2, 2022

Choose a reason for hiding this comment

petemill Jun 2, 2022

Choose a reason for hiding this comment

spylogsster Jun 2, 2022 • edited Loading

Choose a reason for hiding this comment

petemill Jun 2, 2022

Choose a reason for hiding this comment

spylogsster Jun 2, 2022

Choose a reason for hiding this comment

brave-builds commented Jun 2, 2022

brave-builds commented Jun 2, 2022

bsclifton left a comment

Choose a reason for hiding this comment

brave-builds commented Jun 3, 2022

brave-builds commented Jun 3, 2022

petemill left a comment

Choose a reason for hiding this comment

spylogsster commented May 26, 2022 •

edited

Loading

spylogsster May 26, 2022 •

edited

Loading

spylogsster Jun 2, 2022 •

edited

Loading