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

jaclync · 2023-10-03T08:23:35Z

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:

Why

(More details in pe5pgL-3N5-p2)

As we're seeing a low conversion rate from merchants tapping on the mobile onboarding task in core to actually log in to the app, we plan to have two iterations (pe5pgL-3NO-p2#the-decision) to improve this onboarding experience. For the first iteration, we aim to improve the app installation rate by showing a QR code with text instructions on where to install the app. The link goes to the WCCOM mobile page https://woocommerce.com/mobile with a utm_source=wc_onboarding_mobile_task parameter to track the page visit event (pe5pgL-3NO-p2#comment-3080). As Woo mobile no longer requires Jetpack (the merchant can log in with site credentials and the app generates an application password), we also want to remove the Jetpack setup steps for non-Jetpack sites since we're seeing a low conversion rate (from this analysis last Q4, only 9.6% will install and connect Jetpack pe5sF9-Sm-p2). For WPCOM/Jetpack sites, the CTA to send a magic link email stays the same.

In iteration 2, we plan to provide a QR code with a link to pre-fill the site credentials except for the password for non-Jetpack sites at least. We're also exploring generating an application password and including it in the QR code.

How

A new mobile app installation view MobileAppInstallationInfo was created. It contains a static QR code that points to https://woocommerce.com/mobile/?utm_source=wc_onboarding_mobile_task (I tried a few online services but the file size is bigger than I hoped, please feel free to share a smaller SVG of the same link) and an info text.

The modal state is now simplified into just 3 cases:

The magic link email was just sent: EmailSentPage is shown as before
[Updated] When full Jetpack is available, the MobileAppInstallationInfo component is shown above the existing magic link view
[New] For all other cases, the MobileAppInstallationInfo component is shown as a page MobileAppInstallPage

The QR code is generated by using a new dependency qrcode.react that's also used in Calypso.

How to test the changes in this Pull Request:

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

Jetpack/WPCOM sites

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) --> the modal should include a QR code that goes to https://woocommerce.com/mobile/?utm_source=wc_onboarding_mobile_task. Under the QR code and info text, there should be 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

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) --> the modal should only include a QR code that goes to https://woocommerce.com/mobile/?utm_source=wc_onboarding_mobile_task
Feel free to try scanning the QR code from a mobile device's camera --> it should open the Woo mobile app if it has been installed, or goes to the WCCOM mobile page with links to the App/Play Store

Example screenshots

Jetpack not available	Jetpack connected - magic link available	magic link email sent

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

…nected.

…he installation info page by default.

…nstallation page and Jetpack installed page with style tweaks.

…ck component/page.

github-actions · 2023-10-03T08:57:54Z

Test Results Summary

Commit SHA: 6a3a94e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	1m 20s
E2E Tests	212	0	0	7	0	219	20m 46s

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.

github-actions · 2023-10-04T09:03:49Z

Hi @psealock, @rjchow, @woocommerce/ghidorah

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

jaclync · 2023-10-04T09:05:10Z

Hello @coreymckrill would you have some time to review this PR? Jayson recommended you as the reviewer 😄 If you're busy, I can also ask the Ghidorah team tomorrow.

coreymckrill

👍 Tested the "no Jetpack" version of this on my local machine and the QR code successfully took me to the Woo app on my phone! The code also looks fine to me, but I don't work with React all that often, so I think it would still be wise to have someone from Ghidorah look it over as well.

coreymckrill · 2023-10-04T22:21:48Z

...oocommerce-admin/client/homescreen/mobile-app-modal/components/MobileAppInstallationInfo.tsx

+			<img
+				src={ MobileQRCode }
+				alt={ __( 'Download WooCommerce mobile app', 'woocommerce' ) }
+				width="100"


I wonder if this could be a little bit bigger? It looks pretty small on my desktop display:

Yea great point, the QR code for Jetpack mobile https://apps.wordpress.com/mobile/ is also pretty big (18.3 rem).

I updated the QR code size to 150x150 px in 780c521 (screenshots updated in the PR description).

…ibility.

rjchow

Two minor comments, otherwise PR works as expected! Nice work

rjchow · 2023-10-05T12:01:45Z

...s/woocommerce-admin/client/homescreen/mobile-app-modal/pages/JetpackAlreadyInstalledPage.tsx

@@ -58,12 +59,13 @@ export const JetpackAlreadyInstalledPage: React.FC<
 	return (
 		<ModalContentLayoutWithTitle>
 			<>
+				<MobileAppInstallationInfo />


I think you'll have to adjust the layout to fit the extra height

Hmm the screenshot seems to not have been uploaded, could you try uploading this again? 🤔

That's so weird that it linked to this PR.. 😵

There's a scrollbar, indicating that the content has overflowed

Good point! I updated the styles in 6a3a94e so that this specific modal height fits to its content with a max height of 663px from my testing. Any other suggestions/improvements are welcome!

magic link available magic link unavailable

rjchow · 2023-10-05T12:04:53Z

...mmerce-admin/client/homescreen/mobile-app-modal/illustrations/woo-mobile-download-qrcode.svg

The SVG is somewhat sizeable but most of it should compress away over the wire. I think it would be good to also switch this over to the qrcode library when you work on the next iteration with dynamically generated QRs for the application password 😃

Originally I added the qrcode.react library in the next draft PR #40613, but I agree it's better to just start using the library also to minimize the diffs. Added in 1e454cf and 9a30b9a

… used in Calypso.

…r than the default modal guide.

jaclync · 2023-10-06T06:22:31Z

Thanks for the feedback & testing @rjchow! I updated the PR and responded to your suggestions, and it's ready for another look 🙂

rjchow

Looking great! 🚀

jaclync · 2023-10-06T09:14:39Z

@rjchow @coreymckrill is it possible for any of you to help merge this PR? 🙏 I don't think I'm authorized to merge.

ThomazFB · 2023-10-09T22:11:26Z

Howdy @rjchow and @coreymckrill 👋 Sorry for the repeated ping, but are any of you available to merge this PR? I understand it's ready for merging, correct? It seems we from Woo Mobile don't have the credentials to merge PRs from this repo 😰 Thank you in advance!

coreymckrill · 2023-10-09T22:58:42Z

Sorry, I should have made my review a "comment" instead of "approve". I think this still needs a pass from someone on Ghidorah first, since it involves React components that I'm not familiar with. @rjchow @psealock

coreymckrill · 2023-10-09T22:59:30Z

Oops, just saw that @rjchow did actually leave a review. I can merge.

ThomazFB · 2023-10-09T23:01:15Z

Thank you, @coreymckrill 🙇

rjchow · 2023-10-10T01:06:12Z

Sorry I saw this when I was out over the weekend and forgot to make a note to come back to it! Thanks @coreymckrill !

There's a QA review process in place for this repo but I reckon this is a low impact change as its not one of the critical flows and additionally it's a change that simplifies the code/flow.

jaclync added 5 commits October 3, 2023 16:13

Show mobile app installation QR code when the site is not Jetpack con…

0d62b35

…nected.

Simplify modal state by removing wrong user connected case and show t…

5b57f07

…he installation info page by default.

Extract mobile installation view to a component, and show it in the i…

367d6ef

…nstallation page and Jetpack installed page with style tweaks.

Remove redundant case when Jetpack is not installed/connected.

6e7a54e

Rename app installation views to be consistent with the similar Jetpa…

e4900d7

…ck component/page.

jaclync added 2 commits October 4, 2023 14:41

Remove unused import.

fbd0ce2

Add changelog.

1235376

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

jaclync marked this pull request as ready for review October 4, 2023 08:56

jaclync requested a review from coreymckrill October 4, 2023 09:03

coreymckrill approved these changes Oct 4, 2023

View reviewed changes

coreymckrill requested review from a team, psealock and rjchow October 4, 2023 22:24

Increase the QR code dimension from 100x100 to 150x150 for better vis…

780c521

…ibility.

rjchow reviewed Oct 5, 2023

View reviewed changes

jaclync added 3 commits October 6, 2023 09:34

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

1e454cf

… used in Calypso.

Replace mobile static QR code SVG with QRCodeSVG.

9a30b9a

Fit mobile app modal height to content with a max height that's talle…

6a3a94e

…r than the default modal guide.

rjchow approved these changes Oct 6, 2023

View reviewed changes

jaclync added the needs: internal testing Indicates if the PR requires further testing conducted by Solaris label Oct 6, 2023

coreymckrill merged commit 914a1df into trunk Oct 9, 2023
31 checks passed

coreymckrill deleted the wcios/mobile-onboarding-task branch October 9, 2023 23:00

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

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

nigeljamesstevenson added release: highlight Issues that have a high user impact and need to be discussed/paid attention to. and removed needs: analysis Indicates if the PR requires a PR testing scrub session. labels Oct 10, 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 focus on app installation #40559

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

jaclync commented Oct 3, 2023 •

edited

github-actions bot commented Oct 3, 2023 •

edited

github-actions bot commented Oct 4, 2023 •

edited

jaclync commented Oct 4, 2023

coreymckrill left a comment

coreymckrill Oct 4, 2023

jaclync Oct 5, 2023

rjchow left a comment

rjchow Oct 5, 2023

jaclync Oct 6, 2023

rjchow Oct 6, 2023

jaclync Oct 6, 2023

rjchow Oct 5, 2023

jaclync Oct 6, 2023

jaclync commented Oct 6, 2023

rjchow left a comment

jaclync commented Oct 6, 2023

ThomazFB commented Oct 9, 2023

coreymckrill commented Oct 9, 2023

coreymckrill commented Oct 9, 2023

ThomazFB commented Oct 9, 2023

rjchow commented Oct 10, 2023

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

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

Conversation

jaclync commented Oct 3, 2023 • edited

Submission Review Guidelines:

Changes proposed in this Pull Request:

Why

How

How to test the changes in this Pull Request:

Jetpack/WPCOM sites

Non-Jetpack sites

Example screenshots

Changelog entry

Significance

Type

Message

Comment

github-actions bot commented Oct 3, 2023 • edited

Test Results Summary

github-actions bot commented Oct 4, 2023 • edited

jaclync commented Oct 4, 2023

coreymckrill left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

Choose a reason for hiding this comment

jaclync commented Oct 6, 2023

rjchow left a comment

Choose a reason for hiding this comment

jaclync commented Oct 6, 2023

ThomazFB commented Oct 9, 2023

coreymckrill commented Oct 9, 2023

coreymckrill commented Oct 9, 2023

ThomazFB commented Oct 9, 2023

rjchow commented Oct 10, 2023

jaclync commented Oct 3, 2023 •

edited

github-actions bot commented Oct 3, 2023 •

edited

github-actions bot commented Oct 4, 2023 •

edited