Plans on JP: Checkout Success #18497

ravishanker · 2023-05-24T02:14:41Z

Updates checkout success screen to new design, and removes the old one

Before	After	Dark Mode

To test:

Feature Flag

Launch Jetpack app
Go to App Settings (Tap on Avatar at the top right hand corner on My Site -> Find App Settings)
Tap Debug Settings
Find dashboard_card_free_to_paid_plans under Remote features
Enable the flag, and restart the app (scroll down)

Store sandbox

Connect android emulator/device to sandbox paqN3M-5m-p2
Use sandbox on Jetpack app to test for free with test cards pc8HXX-14D-p2

Success screen

Verify plans card appears as shown above on dashboard
Tap on plans card
Verify it navigates to Register domain screen, and domains show label Free for the first year
Select a domain, and Tap on Select domain button
Verify that it goes to Plans page on the web
Tap on Upgrade button of a Personal or Premium Plan
Verify it takes to checkout screen
Use the test card numbers to purchase
Verify the Success screen is shown as in after image above
Verify the screen in landscape and dark mode as well
Tap on Done button, return to dashboard
If the app is connected to store sandbox, could verify that plans card doesn't show anymore
Otherwise, go to store admin, change to sandbox (if Live), find the site, and verify the plan subscription is added

Note

The url and display for plans page could change based on this Calypso PR

Regression Notes

Potential unintended areas of impact
None
What I did to test those areas of impact (or what existing automated tests I relied on)
Unit tests and manual tests
What automated tests I added (or what prevented me from doing so)
Updated and added unit tests

PR submission checklist:

I have completed the Regression Notes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

Portrait and landscape orientations.
Light and dark modes.
Fonts: Larger, smaller and bold text.
High contrast.
Talkback.
Languages with large words or with letters/accents not frequently used in English.
Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
Large and small screen sizes. (Tablet and smaller phones)
Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

wpmobilebot · 2023-05-24T02:32:53Z

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18497-92cd6cf
	Commit	`92cd6cf`
	Direct Download	`jetpack-prototype-build-pr18497-92cd6cf.apk`

Note: Google Login is not supported on these builds.

wpmobilebot · 2023-05-24T02:51:34Z

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18497-92cd6cf
	Commit	`92cd6cf`
	Direct Download	`wordpress-prototype-build-pr18497-92cd6cf.apk`

Note: Google Login is not supported on these builds.

staskus · 2023-05-24T13:16:10Z

Thanks, @ravishanker, the flow overall works well! 👍

Couple observations:

❓ Pressing the back button from the Checkout view returns to the Plans view. (Update: Returns to Domains view, not Plans view) We haven't explicitly agreed on that in the scope but there's an iOS task to solve this issue cc @guarani
❌ After completing the purchase, the card still appears. Even after logout & login. I checked same happens when accessing the same site on iOS. site.hasFreePlan returns true. However, if I complete the same purchase on iOS sandbox, then site.hasFreePlan returns false and the card disappears 🤔. I wonder what happened differently on Android.

Android flow

test.android.mov

iOS flow (success not yet implemented)

Simulator.Screen.Recording.-.iPhone.14.-.2023-05-24.at.16.28.24.mp4

ravishanker · 2023-05-25T00:33:29Z

👋 @staskus - Thanks for testing

❓ Pressing the back button from the Checkout view returns to the Plans view.

It should or it shouldn't return to plans? Point 3 on that issue is saying it should return to plans view on back press.

❌ After completing the purchase, the card still appears. Even after logout & login. I checked same happens when accessing the same site on iOS. site.hasFreePlan returns true. However, if I complete the same purchase on iOS sandbox, then site.hasFreePlan returns false and the card disappears 🤔. I wonder what happened differently on Android.

Android flow

test.android.mov

iOS flow (success not yet implemented)

Simulator.Screen.Recording.-.iPhone.14.-.2023-05-24.at.16.28.24.mp4

🤔 Looks like site is not refreshing

staskus · 2023-05-25T06:22:09Z

It should or it shouldn't return to plans? Point 3 on that issue is saying it should return to plans view on back press.

@ravishanker, I think I misspoke. On Android, we return from Checkout to Domains view after tapping back. Ideally, it would return to the Plans view.

🤔 Looks like site is not refreshing

I will test again today, it's hard to tell, maybe it was related to the sandbox store and it's not actually an issue.

ravishanker · 2023-05-25T07:13:25Z

🤔 Looks like site is not refreshing

I will test again today, it's hard to tell, maybe it was related to the sandbox store and it's not actually an issue.

I do get a receipt in email when testing upgrades, that upgrade happened. It's not clear, if the actual upgrade happens when using sandbox!

I checked with test accounts on Test Plan pc8eDl-WC-p2, hasFreePlan is returning true for free sites and false for paid ones.

Also, checked using Store Admin, the upgrade doesn't seem to actually happen, it goes through test tables apparently, not actual ones PCYsg-MaN-p2, and PCYsg-IA-p2

staskus · 2023-05-25T07:38:40Z

@ravishanker thanks for the information. I tested again and got the same results for the same site. The card disappears after completing the purchase on iOS and doesn't disappear on Android. On Android, I also get "Verify email" popup after completing the purchase, although I checked the email and I only got the receipt but not a verification email. Not sure if it's a related issue.

Are you getting the same result on Android yourself?

ios.test.again.mp4

android.test.again.mov

peril-wordpress-mobile · 2023-05-25T23:57:23Z

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone

Generated by 🚫 dangerJS

Add a new activity result request code to avoid conflict with existing domain purchase

ravishanker · 2023-05-26T05:01:13Z

@ravishanker thanks for the information. I tested again and got the same results for the same site. The card disappears after completing the purchase on iOS and doesn't disappear on Android. On Android, I also get "Verify email" popup after completing the purchase, although I checked the email and I only got the receipt but not a verification email. Not sure if it's a related issue.

Are you getting the same result on Android yourself?

It doesn't disappear too if not pointing to the sandbox. It has to do with store Sandbox vs Live discrepancy! The transaction is created on sandbox, while dashboard site is live source.

From the FG: Testing the Store PCYsg-IA-p2

Note that while your store is sandboxed, all of the APIs will be backed by test tables instead of production tables. That means that all subscriptions, including plans, are completely separate. If you purchase something on production, you won’t see your purchase while sandboxed (and vice versa).

I've checked on the store admin, the subscription is being added successfully on store sandbox.

The email is not related to plans purchase, it's just a conflict with the plugin installation feature, fixed it now.

By any chance is your iOS simulator/device pointing to sandbox, while android emulator/device doesn't?

How to connect android emulator/device to sandbox paqN3M-5m-p2

AjeshRPai

Hey @ravishanker

The code changes looks good to me 👍🏼

Approving and merging the PR 🚀

staskus · 2023-05-30T05:20:53Z

By any chance is your iOS simulator/device pointing to sandbox, while android emulator/device doesn't?

@ravishanker, thanks for the answers! It does point to the sandbox, otherwise, the payment wouldn't go through with the testing cards. After I make a purchase on Android, it does appear on SA but the API still tells that the user is on a free plan. It's strange to me that that doesn't happen on iOS. Not sure what could be the difference, since we both finish the purchase on the same web view 🤔

staskus · 2023-05-30T09:18:12Z

I tested further and it seems to be related to the sandbox store configuration rather than anything else.

On iOS, I observe the same behavior if I kill and relaunch the app after the purchase.

ravishanker added 6 commits May 23, 2023 16:34

Update strings.xml

22f1e68

Create plans_purchase_success_fragment.xml

efca9c2

Update DomainRegistrationResultFragment.kt

5a66c0b

Landscape and dark mode

7d41835

Remove unused

9636dfa

Merge branch 'trunk' into Plans-on-JP-Success-Screen

c054b08

ravishanker added [Type] Task WP.com Plans labels May 24, 2023

ravishanker added this to the 22.5 milestone May 24, 2023

ravishanker requested a review from staskus May 24, 2023 02:14

ravishanker self-assigned this May 24, 2023

adjust button bottom margins

aea70e4

ravishanker requested a review from AjeshRPai May 25, 2023 07:42

Update icon

4903e48

Refactor use a different request code

92cd6cf

Add a new activity result request code to avoid conflict with existing domain purchase

ravishanker requested review from irfano and removed request for irfano May 28, 2023 23:46

AjeshRPai approved these changes May 29, 2023

View reviewed changes

AjeshRPai merged commit 5ca4b38 into trunk May 29, 2023

AjeshRPai deleted the Plans-on-JP-Success-Screen branch May 29, 2023 05:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plans on JP: Checkout Success #18497

Plans on JP: Checkout Success #18497

ravishanker commented May 24, 2023 •

edited

Loading

wpmobilebot commented May 24, 2023 •

edited

Loading

wpmobilebot commented May 24, 2023 •

edited

Loading

staskus commented May 24, 2023 •

edited

Loading

ravishanker commented May 25, 2023 •

edited

Loading

Android flow

iOS flow (success not yet implemented)

staskus commented May 25, 2023

ravishanker commented May 25, 2023

staskus commented May 25, 2023

peril-wordpress-mobile bot commented May 25, 2023 •

edited

Loading

ravishanker commented May 26, 2023 •

edited

Loading

AjeshRPai left a comment

staskus commented May 30, 2023

staskus commented May 30, 2023

Plans on JP: Checkout Success #18497

Plans on JP: Checkout Success #18497

Conversation

ravishanker commented May 24, 2023 • edited Loading

Regression Notes

wpmobilebot commented May 24, 2023 • edited Loading

wpmobilebot commented May 24, 2023 • edited Loading

staskus commented May 24, 2023 • edited Loading

Android flow

iOS flow (success not yet implemented)

ravishanker commented May 25, 2023 • edited Loading

Android flow

iOS flow (success not yet implemented)

staskus commented May 25, 2023

ravishanker commented May 25, 2023

staskus commented May 25, 2023

peril-wordpress-mobile bot commented May 25, 2023 • edited Loading

ravishanker commented May 26, 2023 • edited Loading

AjeshRPai left a comment

Choose a reason for hiding this comment

staskus commented May 30, 2023

staskus commented May 30, 2023

ravishanker commented May 24, 2023 •

edited

Loading

wpmobilebot commented May 24, 2023 •

edited

Loading

wpmobilebot commented May 24, 2023 •

edited

Loading

staskus commented May 24, 2023 •

edited

Loading

ravishanker commented May 25, 2023 •

edited

Loading

peril-wordpress-mobile bot commented May 25, 2023 •

edited

Loading

ravishanker commented May 26, 2023 •

edited

Loading