Store creation M2: checkout flow #8216

jaclync · 2022-11-25T03:42:37Z

Part of #8108
⚠️ Please only review this PR when #8205 is ready to merge without critical suggestions ⚠️

Description

We decided to go with a different checkout flow from what we originally planned in p1669122130164769/1668764715.771189-slack-C045CUK1Y3U. After the Yosemite layer changes #8205, this PR replaces the current MockInAppPurchases with a new WebPurchasesForWPComPlans for web checkout when the storeCreationM2WithInAppPurchasesEnabled feature flag is disabled. WebPurchasesForWPComPlans conforms to InAppPurchasesForWPComPlansProtocol, loads the eCommerce monthly plan and creates a cart through PaymentStore. After a cart with the eCommerce plan is created, StoreCreationCoordinator then shows an authenticated webview to check out with the new WebCheckoutViewModel. After a success purchase URL is detected, the coordinator navigates to the in-progress screen to wait for the site to become a Jetpack site and then eventually navigates to the success screen.

Testing instructions

Please feel free to mention any improvements or issues when testing the flow!

Log in if needed
Go to the Menu tab, and tap Switch store
On the store picker, tap + Add a store
Tap Create a new store --> an in-progress modal should be shown briefly, then dismissed. the store name form is then presented
Enter some store name and tap Continue when ready --> the store name should be used for the initial domain query in the next screen
Search for another domain if you like, and select one domain to Continue --> a free Simple site should be created, and a store summary screen is shown with the store name and site slug
Tap Continue to payment --> the eCommerce plan should be shown in the currency of the WPCOM account
Tap Create Store for */month --> an in-progress screen should be shown about creating the store. after the site becomes available as a Jetpack site in the /me/sites response (about 30s-1m), the success screen should be shown
Tap Manage My Store to continue to the new site in the app --> the new site should be an Atomic site with WC activated, where you can add a product successfully

Screenshots

Example screencast in p1669190357377079/1668764715.771189-slack-C045CUK1Y3U

I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

…d `WebCheckoutViewModel` for `StoreCreationCoordinator` to show the webview.

…ator.purchasesManager`.

…e ID since the latter usually results in an error banner.

…heckout.

…th `StoreCreationCoordinator`.

…CheckoutViewModel`.

…e on CI so that fetching products returns after `waitUntil` timeout.

wpmobilebot · 2022-11-25T03:59:01Z

You can test the changes from this Pull Request by:

Clicking here or scanning the QR code below to access App Center
Then installing the build number pr8216-a83219e on your iPhone

If you need access to App Center, please ask a maintainer to add you.

itsmeichigo

The purchase succeeded for me, and code looks good ✅
I notice a few non-blocking issues - please feel free to address them in a future PR:

On the information screen for the purchase plan, the pricing label is clipped off into 2 lines. Maybe we should prioritize the width of the label over the image's?

When my store is created, the summary screen can't seem to load my page in the preview:

I didn't test this flow from the switch store screen endpoint, but from the empty store picker instead (since my test account didn't have any store). After the purchase succeeded, I got navigated to the home screen, and the new store was not listed on the switch store screen:

itsmeichigo · 2022-11-28T04:09:03Z

WooCommerce/Classes/Authentication/Store Creation/Plan/WebCheckoutViewModel.swift

+    }
+
+    func handleDismissal() {
+        // no-op: dismissal is handled in the close button in the navigation bar.


This method is to add any tracks needed when the view is dismissed, not about implementing the dismissal 😅 Sorry if the name is misleading.

itsmeichigo · 2022-11-28T04:18:05Z

WooCommerce/Classes/Authentication/Store Creation/StoreCreationCoordinator.swift

        Task { @MainActor in
-            if let iapManager {
-                self.iapManager = iapManager
+            if let purchasesManager {
+                self.purchasesManager = purchasesManager
            }
        }


❓ Just curious - why does this have to be called async?

It's because the IAP implementation InAppPurchasesForWPComPlansManager is a MainActor, and thus this purchasesManager property has to also be MainActor. Because the property is a MainActor, setting/mutating it requires it to be from a MainActor context. We could make the StoreCreationCoordinator initializer to be MainActor, but that introduces a lot of changes upstream so I thought it's easier to set it this way.

Without the Task/MainActor context, an error is thrown:

Main actor-isolated property 'purchasesManager' can not be mutated from a non-isolated context

jaclync · 2022-11-28T08:53:30Z

Thanks for sharing these observations!

On the information screen for the purchase plan, the pricing label is clipped off into 2 lines. Maybe we should prioritize the width of the label over the image's?

The design was updated to split the pricing info into two lines in HyVloP5FipZzyPVenH2euI-fi-2369%3A102723&t=DpwmzfbPkivo7ZcX-0 after I saw the same issue, especially with the previous $69.99 price. I'm going to work on the design changes on this screen (there's another one) as in #8108 in a separate PR later.

When my store is created, the summary screen can't seem to load my page in the preview:

Yea I also noticed the same issue a few times (and the preview was never loaded), I plan to look into this separately as a subtask in #8118 since it's not reproducible every time. Maybe I'll show a spinner while loading the URL.

I didn't test this flow from the switch store screen endpoint, but from the empty store picker instead (since my test account didn't have any store). After the purchase succeeded, I got navigated to the home screen, and the new store was not listed on the switch store screen:

@itsmeichigo can you share more info about the steps - which CTA on the prologue screen, did you create an account or log in with an existing account? after the purchase succeeded, did you see the loading screen Creating your store --> success screen? if you reached the success screen, what action did you take? since purchases are blocked for me with new accounts due to automatic fraud detection (probably many frauds from my region or nearby), I need to ask the fraud team to unblock my test accounts to test with an empty stores picker 😅

itsmeichigo · 2022-11-28T10:18:17Z

can you share more info about the steps - which CTA on the prologue screen, did you create an account or log in with an existing account? after the purchase succeeded, did you see the loading screen Creating your store --> success screen? if you reached the success screen, what action did you take?

These are the steps that I followed:

I have an account with no stores (only simple WP.com sites)
Log in with that account and reach the store picker screen.
Tap the Add a store and select Create new store.
Proceed with the store creation flow and payment, then see the loading screen for a few seconds.
The success screen is displayed -> select Manage my store and reach the home screen.
Open the store picker, there's still no store in the list.

I tried reproducing this issue with the same account, but I got stuck forever on the loading screen Creating your store. I tried with another account with a few stores and couldn't reproduce the issue. Let's keep an eye on the issue to see if it happens again.

* trunk: (337 commits) Bump version number Use the correct stats order Bump version number Update metadata translations Update app translations – `Localizable.strings` Update release toolkit to 6.0 Remove fastlane/Pluginfile and move its contents to Gemfile Fix failing UI tests from expecting a display name on the store picker that was changed to email. Replace the disabled native jetpack setup experiment with a new cloned experiment. Fix a failing test case in `StorePickerCoordinatorTests` now that store creation isn't launched automatically. Remove unused code. Fix popover issue in tablet for store picker action menu. Update unit tests for UI related variables Store picker: also show the action button for store creation configuration. Add 16px horizontal padding to account header content. Update action button color to accent color. Update UI/UX on the empty store picker screen based on the latest design. Add unit tests for error handling Clean temporary code Link product card to main view model ... # Conflicts: # WooCommerce/WooCommerceTests/Authentication/Store Creation/StoreCreationCoordinatorTests.swift

peril-woocommerce · 2022-11-29T03:14:10Z

	Warnings
⚠️	PR has more than 500 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

jaclync · 2022-11-29T03:26:58Z

These are the steps that I followed:

I have an account with no stores (only simple WP.com sites)

Log in with that account and reach the store picker screen.

Tap the Add a store and select Create new store.

Proceed with the store creation flow and payment, then see the loading screen for a few seconds.

The success screen is displayed -> select Manage my store and reach the home screen.

Open the store picker, there's still no store in the list.

Thanks for sharing the steps! I originally thought the empty store picker was shown during the store creation flow after the checkout step, it sounds like it was from opening the store picker after the app was logged in to the new store.

Do you have the site ID of the store that you don't see in the store picker? I've seen a few times where the newly created site's Jetpack properties are set, but not options/woocommerce_is_active (asking Jetpack team in p1669597269761459/1667224844.942809-slack-CDLH4C1UZ). If you get a chance to check the WPCOM me/sites API response for this account (either in the app > Settings > Wormholy or just a manual API request), you can check if options/woocommerce_is_active of your site is false. In the store picker in the logged-in state, only sites with woocommerce_is_active=true are shown:

woocommerce-ios/WooCommerce/Classes/Authentication/Epilogue/StorePickerViewModel.swift

Lines 213 to 214 in 199cb52

    
           case .switchingStores: 
        
               return NSPredicate(format: "isWooCommerceActive == YES")

I tried reproducing this issue with the same account, but I got stuck forever on the loading screen Creating your store. I tried with another account with a few stores and couldn't reproduce the issue. Let's keep an eye on the issue to see if it happens again.

I've also seen once or twice where the site's jetpack and jetpack_connection properties never became true, which is the condition that is considered a success that leads to the next step. If you can share the site ID, I can also ask the Jetpack team.

I'm going to merge the PR shortly to make it easier for other followup changes, next time if you see anything odd after the purchase step you can share the site ID with me! 🙏

…ebug log.

…stead of seconds.

jaclync added 7 commits November 25, 2022 09:25

Create WebPurchasesForWPComPlans for web checkout implementation an…

87b45a2

…d `WebCheckoutViewModel` for `StoreCreationCoordinator` to show the webview.

Rename StoreCreationCoordinator.iapManager to `StoreCreationCoordin…

cdc57a0

…ator.purchasesManager`.

Use site slug in the store creation web checkout URL instead of a sit…

2fdc8c1

…e ID since the latter usually results in an error banner.

Show a different error message on an error purchasing a plan in web c…

3686ffa

…heckout.

Update the web purchase error message to mention a potential error case.

cf8cac5

Add unit tests for WebPurchasesForWPComPlans and its integration wi…

5f68a79

…th `StoreCreationCoordinator`.

Move store creation test classes to a folder. Add unit tests for `Web…

3f95795

…CheckoutViewModel`.

jaclync added type: enhancement A request for an enhancement. status: feature-flagged Behind a feature flag. Milestone is not strongly held. labels Nov 25, 2022

jaclync added this to the 11.5 milestone Nov 25, 2022

jaclync requested review from itsmeichigo and selanthiraiyan November 25, 2022 03:42

jaclync added 2 commits November 25, 2022 11:43

WebPurchasesForWPComPlansTests: update comments.

a834671

StoreCreationCoordinatorTests: update the timeout of a flaky test cas…

8c846b3

…e on CI so that fetching products returns after `waitUntil` timeout.

jaclync mentioned this pull request Nov 27, 2022

Store creation M2: store summary -> WPCOM plan #8108

Closed

8 tasks

itsmeichigo self-assigned this Nov 28, 2022

Base automatically changed from feat/8108-web-checkout-yosemite to trunk November 28, 2022 04:24

itsmeichigo approved these changes Nov 28, 2022

View reviewed changes

jaclync added 2 commits November 29, 2022 10:42

Animate navigation to store picker with store creation configuration.

61e6d2c

jaclync enabled auto-merge November 29, 2022 03:27

jaclync added 2 commits November 29, 2022 12:46

Try increasing fetchProductsDuration to fix the flaky test with a d…

9faa5f0

…ebug log.

Update MockInAppPurchases fetchProductsDuration to nanoseconds in…

a83219e

…stead of seconds.

jaclync merged commit 8e84778 into trunk Nov 29, 2022

jaclync deleted the feat/8108-web-checkout branch November 29, 2022 06:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Store creation M2: checkout flow #8216

Store creation M2: checkout flow #8216

Uh oh!

jaclync commented Nov 25, 2022

Uh oh!

wpmobilebot commented Nov 25, 2022 •

edited

Loading

Uh oh!

itsmeichigo left a comment

Uh oh!

itsmeichigo Nov 28, 2022

Uh oh!

itsmeichigo Nov 28, 2022

Uh oh!

jaclync Nov 29, 2022

Uh oh!

jaclync commented Nov 28, 2022

Uh oh!

itsmeichigo commented Nov 28, 2022 •

edited

Loading

Uh oh!

peril-woocommerce bot commented Nov 29, 2022

Uh oh!

jaclync commented Nov 29, 2022 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Store creation M2: checkout flow #8216

Store creation M2: checkout flow #8216

Uh oh!

Conversation

jaclync commented Nov 25, 2022

Description

Testing instructions

Screenshots

Uh oh!

wpmobilebot commented Nov 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

itsmeichigo left a comment

Choose a reason for hiding this comment

Uh oh!

itsmeichigo Nov 28, 2022

Choose a reason for hiding this comment

Uh oh!

itsmeichigo Nov 28, 2022

Choose a reason for hiding this comment

Uh oh!

jaclync Nov 29, 2022

Choose a reason for hiding this comment

Uh oh!

jaclync commented Nov 28, 2022

Uh oh!

itsmeichigo commented Nov 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

peril-woocommerce bot commented Nov 29, 2022

Uh oh!

jaclync commented Nov 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wpmobilebot commented Nov 25, 2022 •

edited

Loading

itsmeichigo commented Nov 28, 2022 •

edited

Loading

jaclync commented Nov 29, 2022 •

edited

Loading