Add: mobile app welcome modal and magic link #34637

rjchow · 2022-09-12T08:16:02Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Figma Design: G9vi4e286yjdzyIdg8hBb1-fi-2002%3A142047
Project Thread: pdibGW-LI-p2

How to test the changes in this Pull Request:

There are two general flows in this feature:

First one which guides the user in installing JetPack and connecting their WordPress.com account
Second one detects that the user already meets the above requirements and can directly proceed to sending a magic link

To test this PR, you will first need to set up a WooCommerce environment which can be reached by Jetpack and complete a full Jetpack installation.

Jurassic ninja will suffice, or using ngrok or some other form of tunnelling if you are running it locally.

Guided Jetpack Installation flow

Start with a WooCommerce install that does not have Jetpack installed, and do not include it if you complete the onboarding profiler. Completing the onboarding profiler is optional and should not affect the flow.
Find and click on the "Get the WooCommerce App" entry under the "Help" panel on the home screen
You should see the modal appear, and it should allow you to install and connect jetpack
The Jetpack installation flow should bring you out of the site to connect your WordPress.com account, and then return you back to the modal when it is complete.
When you have returned to the homescreen you should be on step 2 with the correct email address shown
It should allow you to click on the 'Send magic link' button, and you should receive a magic link login in your email inbox
Clicking on the 'send another link' button should bring you back to the previous screen with the stepper.

NVIDIA_Share_lIDHVbIGE0.mp4

Jetpack already fulfilled flow

Start with a WooCommerce install that already has Jetpack installed, or complete the onboarding profiler and install it as part of the flow. Alternatively use the same setup as the previous flow, as it already has Jetpack installed and connected
Find and click on the "Get the WooCommerce App" entry under the "Help" panel on the home screen
You should see the modal appear, and it should allow you to click on the 'Send magic link' button.
You should receive a magic link login in your email inbox
Clicking on the 'send another link' button should bring you back to the previous screen without the stepper

firefox_FDTrGTjUeQ.mp4

Other testing notes:

Jetpack can have a variety of partial installations, such as a plugin that is installed but not activated, or a plugin that is installed and activate but not connected to a WordPress.com account.

These flows should be tested if possible, they can be created by simply exiting the Jetpack installation flow at various points without completing.

These partial flows should result in the dialog showing the first flow with the guided Jetpack installation, and completing the setup.

It might also be worth testing this feature with non-admin users.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully run tests with your changes locally?
Have you created a changelog file for each project being changed, ie pnpm changelog add --filter=<project>?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

github-actions · 2022-09-12T08:45:38Z

Test Results Summary

Commit SHA: 0e6fe2a

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	118	0	0	2	0	120	0m 40s
E2E Tests	185	1	0	1	0	187	17m 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.

...ocommerce-admin/client/homescreen/mobile-app-modal/components/JetpackInstallationStepper.tsx

plugins/woocommerce/src/Admin/API/MobileAppMagicLink.php

...ins/woocommerce-admin/client/homescreen/mobile-app-modal/layouts/ModalIllustrationLayout.tsx

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

ilyasfoo

Note: This isn't a full review yet, I'm sending earlier so they can be addressed first.

Nitpicky, but the email part isn't centered vertically:

The design looks tad different after I'm connected & refreshed the page (i.e: The stepper numbers on the side, the step #1 for connected user), I'm not sure if this is intentional?

It seems when successfully sending an email, there was no toast message saying "Magic link sent!"
Tracks were not implemented, but I think it's better to create an issue and implement as a follow-up

rjchow · 2022-09-13T03:58:35Z

@ilyasfoo

Addressed! Forgot to subtract the padding from the parent when I put in the numbers - it should match the design now
This is according to the design, it took a bit of mental gymnastics to figure out how to structure the code to have two different return destinations 😅 I figured Jarek was considering the continuity and consistency for the user since it's a bit of a round trip. And at the same time to minimize the clicks / visual noise for someone who's already done it before
Yup I left that out for now, I'll add it in another PR if there's time before the code freeze
Tracks will be added soon!

ilyasfoo · 2022-09-13T05:21:25Z

@rjchow Thanks for addressing!

Actually, I can't see the difference, it's still slightly skewed towards bottom (I visualise center as the red crossair):

Ah, gotcha!
Alright 👍
I'll make an issue soon to detail on the track names and props

ilyasfoo · 2022-09-13T07:43:32Z

@rjchow Tracks issue has been created 76-gh-woocommerce/team-ghidorah

Add backend and demo flow added jetpack installation and activation logic Added resolver for jetpack connection data Add request for magic link Switch to XMLRPC for magic link request Instead of dealing with the OAuth request, which requires a client ID and a public "secret", which can take a page from the Jetpack playbook for requesting the magic login email. This changeset is lifted almost entirely from here: https://github.com/Automattic/jetpack/blob/ea3bde0e92c6953578745d6cd026f62ecf35b17b/projects/plugins/jetpack/_inc/lib/class.core-rest-api-endpoints.php#L4074-L4105 Note the only difference from the Jetpack version is that we're adding an `app` parameter to the request and specifying `woocommerce`. This won't actually do anything until some changes get made on the wpcom side to accommodate this new parameter (I'm still working on that). Once those changes are in place, though, the email that gets sent will be Woo-branded and may even be able to include a QR code. add: moved feature to woo mobile app welcome page wip wip wip wip

chihsuan · 2022-09-14T06:45:51Z

@rjchow I couldn't get the email on my JN site with the error Sorry, there was an error trying to request for a magic link. Anything I missed? 🤔

Screen.Recording.2022-09-14.at.14.14.38.mov

And I also found some small design mismatches, but I think it's okay if you want to update them in a follow-up PR.

chihsuan · 2022-09-14T06:55:13Z

@rjchow I couldn't get the email on my JN site with the error Sorry, there was an error trying to request for a magic link. Anything I missed? 🤔

I just printed out the error message.

[14-Sep-2022 06:53:29 UTC] Jetpack: [unauthorized_user] User is not able to use login link via email.

rjchow · 2022-09-14T08:10:57Z

@chihsuan Thanks for the re-review!

Some of the font differences are because the font-family itself is different so I picked values which looked closer to the design instead of the exact same ones.

I think the sparkle icon depends on your OS actually, it's a copy paste from the Figma and it's an emoji 🤣

Things I missed:

Link to Jetpack
Bold Sign into app text
Bold email
Stepper outline (actually I assumed it would be difficult to change this but now I'm thinking I can override it with CSS)
If it's ok, I will address these in a follow up?

chihsuan · 2022-09-14T08:23:08Z

@chihsuan Thanks for the re-review!

Some of the font differences are because the font-family itself is different so I picked values which looked closer to the design instead of the exact same ones.

I think the sparkle icon depends on your OS actually, it's a copy paste from the Figma and it's an emoji 🤣

Things I missed:

Link to Jetpack

Bold Sign into app text

Bold email

Stepper outline (actually I assumed it would be difficult to change this but now I'm thinking I can override it with CSS)
If it's ok, I will address these in a follow up?

Sounds good!

chihsuan

@rjchow Thanks for working on this. Excellent work! 🚀

jarekmorawski · 2022-09-14T10:35:52Z

Everything looks good! I do agree that the send email part should be centered vertically in the white space. In the Figma file, I duplicated the bottom part (Didn't get it?) and put it above the illustration and heading part with 0% opacity. This way, I didn't have to calculate the exact margins and padding, so maybe we could do something similar here? 🤔

Other than that, is it expected for Jetpack to install this long? It took almost 30 seconds to display the connection screen in your video. If that's how it always is, I think we should add one more sentence at the end of the step description. I marked it in bold below.

To get started, install Jetpack—our free tool required to sync your store with the WooCommerce mobile app. It may take up to 30 seconds.

github-actions · 2022-09-15T03:30:55Z

New hook, template, or database changes in this PR

Template changes:

file: /plugins/woocommerce/templates/emails/email-mobile-messaging.php
- WARNING: This template may require a version bump!

github-actions · 2022-09-15T03:58:59Z

Hi @rjchow, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

Add the release: add testing instructions label

github-actions bot added focus: react admin package: @woocommerce/components issues related to @woocommerce/components package: @woocommerce/data issues related to @woocommerce/data plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Sep 12, 2022

rjchow requested a review from a team September 12, 2022 08:36

rjchow marked this pull request as ready for review September 12, 2022 08:41