Update mobile app onboarding modal to be two steps #40613

jaclync · 2023-10-05T08:46:12Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes https://github.com/woocommerce/woomobile-private/issues/315

Example screenshots

login-link-non-jetpack-site.mov

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

TC1

Prerequisite: the site has the the full Jetpack plugin (WPCOM sites have Jetpack by default), and hasn't completed all onboarding tasks. The connected WPCOM user is not linked to an A8C email (magic links don't work for A8C emails)

Apply the PR changes to the site's WC plugin
Go to the site wp-admin
Go to the WooCommerce homescreen with the onboarding tasks, and tap on Get the free WooCommerce mobile app under Things to do next (wp-admin/admin.php?page=wc-admin&mobileAppModal=true)
Check that the modal now includes a two steps control
Check that the step 1 modal includes a QR code that goes to https://woocommerce.com/mobile/?utm_source=wc_onboarding_mobile_task.
Click on App is installed button
Check that step 2 contains a CTA to send a magic link email
Tap Send the sign-in link --> an email should be sent, and the modal should show that the email has been sent as in the screenshot

TC2

Non-Jetpack sites
Prerequisite: the site doesn't have the Jetpack plugin

Apply the PR changes to the site's WC plugin
Go to the site wp-admin
Go to the WooCommerce homescreen with the onboarding tasks, and tap on Get the free WooCommerce mobile app under Things to do next (wp-admin/admin.php?page=wc-admin&mobileAppModal=true)
Check that the modal should include a QR code that goes to https://woocommerce.com/mobile/?utm_source=wc_onboarding_mobile_task
Click on App is installed button
Check that a new QR is displayed that goes to woocommerce://app-login?siteUrl=[your url]&username=[your user name]

Changelog entry

Automatically create a changelog entry from the details below.

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Comment

… used in Calypso.

…ep to install the app.

github-actions · 2023-10-05T09:24:06Z

Test Results Summary

Commit SHA: 21094a9

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 58s
E2E Tests	212	0	0	4	0	216	21m 55s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

…ing-task-iteration-2 * wcios/mobile-onboarding-task: Fit mobile app modal height to content with a max height that's taller than the default modal guide. Replace mobile static QR code SVG with `QRCodeSVG`. Add `qrcode.react` for a React component that displays a QR code also used in Calypso.

…ing-task-iteration-2

github-actions · 2023-10-11T21:28:03Z

Hi @rjchow,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

ThomazFB · 2023-10-11T21:29:53Z

@rjchow @coreymckrill This is the follow-up of the previous PR regarding the onboarding banner. It's a bigger one but quite important to achieve our objectives with the app login flow. So I'm requesting the review from you both since you folks reviewed the last one. Thank you in advance 🙏

rjchow

Left some feedback!

rjchow · 2023-10-13T15:10:44Z

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/components/MobileAppLoginInfo.tsx

+}: {
+	loginUrl: string | undefined;
+} ) => {
+	// TODO: update the minimum app version


...ns/woocommerce-admin/client/homescreen/mobile-app-modal/components/MobileAppLoginStepper.tsx

rjchow · 2023-10-13T15:31:45Z

...ns/woocommerce-admin/client/homescreen/mobile-app-modal/components/MobileAppLoginStepper.tsx

+			} else {
+				const siteUrl: string = getAdminSetting( 'siteUrl' );
+				const username = getAdminSetting( 'currentUserData' ).username;
+				const loginUrl = `woocommerce://app-login?siteUrl=${ encodeURIComponent(


This was implemented a bit differently than I had imagined, I was thinking that we could add some code to wc core that can generate the application password, which would be triggered by the user opening this task.

When this modal opens, the QR should already include the application password so that there's no further need for any credentials to be provided by the user.

Furthermore, I was thinking that there should be a deeplink that immediately brings the user to install woocommerce mobile app if they don't already have it, and then when it is installed the app should also have the application password forwarded to it. This would lead to a true seamless experience

Are these part of the future roadmap?

Hi @rjchow 👋

This was implemented a bit differently than I had imagined, I was thinking that we could add some code to wc core that can generate the application password, which would be triggered by the user opening this task.

This is iteration 2 of the improvements. We have on our radar iteration 3 https://github.com/woocommerce/woocommerce/pull/40628/files, which will include the application password and is closer to what we already discussed.

Furthermore, I was thinking that there should be a deeplink that immediately brings the user to install woocommerce mobile app if they don't already have it, and then when it is installed the app should also have the application password forwarded to it. This would lead to a true seamless experience

💯 agree with you! We are still looking at how to support deferred deep links in the app, but I agree this is the way to go

Ok great to know that! Thanks!

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/style.scss

rjchow · 2023-10-13T15:40:58Z

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/components/MobileAppLoginInfo.tsx

+					<QRCodeSVG value={ loginUrl } size={ 140 } />
+					<p>
+						{ __(
+							'The app version needs to be 15.7 or above to sign in with this link.',


I realised that I can't test this flow because the latest version I can install is 15.6

I realised that I can't test this flow because the latest version I can install is 15.6

@rjchow Can you try installing the apps from these PR? :

If you own an iOS device: [Onboarding Deep Link] Add login deep link track events woocommerce-ios#10892 (comment)

If you own an Android device: App login deep link track events woocommerce-android#9920 (comment)

If you need any help, please ping me. I'll be more than happy to support you.

I went on with it for a bit then realised that I need to install app center device profile on my personal phone so I noped outta there 😅 I'll take it that it works!

atorresveiga · 2023-10-16T14:42:59Z

#40613 (comment)

😬

Fixed here a4c3834

#40613 (comment)

The height needs to be adjusted so that we don't have a scrollbar, I feel the vertical scrolling on this gives it an unpolished feel

Fixed here 2d1dec8

#40613 (comment)

if you have variant="primary" on the button props you won't have to handle the colouring - the color will automatically match the theme for the WP installation

Fixed here 6f9f49a

Thanks for your review @rjchow! I fixed all the issues. I think we are ready for a second round 😄

rjchow

Nice work, pre-emptively approving! If you need me to merge it just ping me

rjchow · 2023-10-17T13:02:28Z

...ns/woocommerce-admin/client/homescreen/mobile-app-modal/components/MobileAppLoginStepper.tsx

+			} else {
+				const siteUrl: string = getAdminSetting( 'siteUrl' );
+				const username = getAdminSetting( 'currentUserData' ).username;
+				const loginUrl = `woocommerce://app-login?siteUrl=${ encodeURIComponent(


Ok great to know that! Thanks!

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/style.scss

rjchow · 2023-10-17T13:03:58Z

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/components/MobileAppLoginInfo.tsx

+					<QRCodeSVG value={ loginUrl } size={ 140 } />
+					<p>
+						{ __(
+							'The app version needs to be 15.7 or above to sign in with this link.',


I went on with it for a bit then realised that I need to install app center device profile on my personal phone so I noped outta there 😅 I'll take it that it works!

…tyle.scss Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>

atorresveiga · 2023-10-17T14:38:11Z

Thanks for your review @rjchow!! 🙏

If you need me to merge it just ping me

Yes, that would be great. We have no permission to merge to trunk.
Could you or @coreymckrill help us merge this PR?
Thanks in advance!

rjchow · 2023-10-18T07:22:36Z

This isn't one of the critical flows so I'm merging this without additional QA review

jaclync added 8 commits October 5, 2023 10:58

Add qrcode.react for a React component that displays a QR code also…

e6aa2cf

… used in Calypso.

Replace mobile static QR code SVG with QRCodeSVG.

7cd10a0

Mobile app onboarding: update to show a 2-step flow with the first st…

86b5564

…ep to install the app.

Handle cases when the login URL is unavailable and app version is lower.

44aedbd

Add a comment about updating the min app version for the login link.

e4aeeac

Track button click events.

b8e5a83

Update app installed button styles.

021fc35

Update the second step view when Jetpack is installed.

5bf349a

jaclync mentioned this pull request Oct 6, 2023

Update mobile app onboarding modal to focus on app installation #40559

Merged

11 tasks

jaclync added 4 commits October 6, 2023 13:47

Design tweaks.

9614122

Remove unused isRetryingMagicLinkSend prop.

be01fff

Encode login link parameter values.

ce02fb1

Base automatically changed from wcios/mobile-onboarding-task to trunk October 9, 2023 23:00

Alejo added 3 commits October 11, 2023 09:55

Merge remote-tracking branch 'origin/trunk' into wcios/mobile-onboard…

b0a071f

…ing-task-iteration-2

update app version

0305a55

update app version

b669a75

atorresveiga marked this pull request as ready for review October 11, 2023 16:00

atorresveiga changed the title ~~[WIP] Update mobile app onboarding modal to be two steps~~ Update mobile app onboarding modal to be two steps Oct 11, 2023

Alejo added 2 commits October 11, 2023 12:30

fixing lint warning

8802732

add changelog

4242bb4

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Oct 11, 2023

ThomazFB requested review from rjchow and coreymckrill October 11, 2023 21:27

rjchow reviewed Oct 13, 2023

View reviewed changes

Alejo added 2 commits October 16, 2023 08:27

remove unnecessary todo comment

a4c3834

use primary component style

6f9f49a

Alejo added 2 commits October 16, 2023 08:29

increase the modal size to fit the content

2d1dec8

fix lint warning

4354ea4

rjchow approved these changes Oct 17, 2023

View reviewed changes

Update plugins/woocommerce-admin/client/homescreen/mobile-app-modal/s…

21094a9

…tyle.scss Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>

rjchow merged commit 2c557f6 into trunk Oct 18, 2023
26 checks passed

rjchow deleted the wcios/mobile-onboarding-task-iteration-2 branch October 18, 2023 07:22

github-actions bot added this to the 8.3.0 milestone Oct 18, 2023

github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Oct 18, 2023

nigeljamesstevenson added needs: internal testing Indicates if the PR requires further testing conducted by Solaris status: analysis complete Indicates if a PR has been analysed by Solaris and removed needs: analysis Indicates if the PR requires a PR testing scrub session. labels Oct 18, 2023

jaclync mentioned this pull request Feb 1, 2024

Clear out "failed to load resource" error from the WooCommerce > Home screen #44009

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update mobile app onboarding modal to be two steps #40613

Update mobile app onboarding modal to be two steps #40613

jaclync commented Oct 5, 2023 •

edited by atorresveiga

github-actions bot commented Oct 5, 2023 •

edited

github-actions bot commented Oct 11, 2023 •

edited

ThomazFB commented Oct 11, 2023

rjchow left a comment

rjchow Oct 13, 2023

rjchow Oct 13, 2023

atorresveiga Oct 13, 2023

rjchow Oct 17, 2023

rjchow Oct 13, 2023

atorresveiga Oct 16, 2023 •

edited

rjchow Oct 17, 2023

atorresveiga commented Oct 16, 2023

rjchow left a comment

rjchow Oct 17, 2023

rjchow Oct 17, 2023

atorresveiga commented Oct 17, 2023

rjchow commented Oct 18, 2023

Update mobile app onboarding modal to be two steps #40613

Update mobile app onboarding modal to be two steps #40613

Conversation

jaclync commented Oct 5, 2023 • edited by atorresveiga

Submission Review Guidelines:

Changes proposed in this Pull Request:

Example screenshots

How to test the changes in this Pull Request:

Changelog entry

Significance

Type

Message

Comment

github-actions bot commented Oct 5, 2023 • edited

Test Results Summary

github-actions bot commented Oct 11, 2023 • edited

ThomazFB commented Oct 11, 2023

rjchow left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atorresveiga Oct 16, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atorresveiga commented Oct 16, 2023

rjchow left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atorresveiga commented Oct 17, 2023

rjchow commented Oct 18, 2023

jaclync commented Oct 5, 2023 •

edited by atorresveiga

github-actions bot commented Oct 5, 2023 •

edited

github-actions bot commented Oct 11, 2023 •

edited

atorresveiga Oct 16, 2023 •

edited