Show APMs on the new Payments menu #34581

oaratovskyi · 2022-09-05T18:49:43Z

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:

The changes in this pull request add the additional payment methods, such as PayPal, AmazonPay, Klarna, and Affirm to the WC Payments welcome page (experiment). If toggled, it allows installation of those extensions alongside with WCPay.

Implemented the following items according to the design (7QOkvxzz1ylS3QBS4zqW8R-fi-10292%3A40323):

Added a new Additional Payment Methods block to the WC Payments welcome page experiment.
Removed the big FAQ block and left only a small row - Get in touch if the user has more questions.
Added a wcpay_extension_installed event on Install button click.

Closes Automattic/woocommerce-payments#4529.

Important: installation of the Affirm plugin is not possible yet, because it is absent in wp.org. There is an ongoing discussion here (pc2DNy-166-p2). For now, it's out of scope (paJDYF-4Ov-p2#comment-13959).

How to test the changes in this Pull Request:

Comment out the following lines and build the zip from this branch.
Create a website using https://jurassic.ninja/specialops/ (include only WC Payments Dev Tools, remove Jetpack that is enabled by default)
Go to WC Payments Dev Tools and unclick the Proxy WPCOM requests checkbox and save (otherwise we'll have issues like can't resolve docker.internal)
Install the WooCommerce plugin from the built zip
Activate it and pass the WooCommerce onboarding (don't Install WCPay - untick Add recommended business features to my site on the step 4)
Choose Storefront theme, since it's the most popular one
Enable the tracking in settings (Woocommerce -> Settings -> Advanced -> WooCommerce.com : Allow usage of WooCommerce to be tracked)
Then visit /wp-admin/admin.php?page=wc-admin&path=%2Fwc-pay-welcome-page
Make sure it looks like at the screenshot below and matches the design
Check the toggles: click on each toggle and observe as the notice above appears and the text changes depending on the enabled plugins. Notice shouldn't appear if all toggles are off.
Tick paypal, amazonpay and klarna, click Install. The extensions should be installed alongside WC Pay.
Approve Jetpack prompt
Complete Stripe KYC, you'll be redirected to payments overview screen. Verify that promotion was applied.
Verify that all the selected plugins were installed
Check that wcadmin_wcpay_extension_installed event was recorded (after 5 mins when tracking event will show up)

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-05T19:19:17Z

Test Results Summary

Commit SHA: 62467e9

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	118	0	0	2	0	120	1m 2s
E2E Tests	185	0	0	2	0	187	13m 53s

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.

- Add valid links to each APM - Add valid link to the marketplace

- Style a notice about APM is enabled - Add noreferrer and target=_blank to external links

…ional-pms-on-payments-welcome

oaratovskyi · 2022-09-13T15:30:41Z

A couple of questions need to be resolved before the review

p1663081329886189-slack-C03PGHYA8TG
pc2DNy-166-p2

dmallory42

Thanks for working on this, @oaratovskyi! It's looking really good. I left a few minor comments, and also messaged you on Slack to ask some questions about testing instructions. When I can test it and you've had a chance to look at the comments I can approve! 🙂

plugins/woocommerce-admin/client/payments-welcome/apms.tsx

plugins/woocommerce-admin/client/payments-welcome/index.tsx

plugins/woocommerce-admin/client/payments-welcome/strings.tsx

…ional-pms-on-payments-welcome

ismaeldcom

Great work! 🙂 I left some nitpicks after reviewing everything. Apart from that, I also want to double-check why I don't see a gap between the new cards. Makes sense to me, because we're not adding it explicitly to the new classes. But I wonder why on your screenshots it looks good 🤔

plugins/woocommerce-admin/client/payments-welcome/style.scss

plugins/woocommerce-admin/client/payments-welcome/apms.tsx

chihsuan · 2022-09-21T08:56:46Z

plugins/woocommerce-admin/client/payments-welcome/strings.tsx

+			return createInterpolateElement(
+				sprintf(
+					__(
+						'Installing <strong>WooCommerce Payments</strong> will automatically activate <strong>%s</strong> %s in your store.',


Can you add a "translators" comment like this? Thanks!

woocommerce/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/card.js

Line 95 in a0c13ab

/* translators: %s = name of the product having stock updated */

Good catch, thank you! Will add that

Fixed in 579b1d6!

plugins/woocommerce-admin/client/payments-welcome/apms.tsx

oaratovskyi · 2022-09-21T10:08:34Z

But I wonder why on your screenshots it looks good 🤔

Because I made them after installing the plugins 😅
It does not have gaps indeed when WCPay is disabled, how could I miss it 😅 🙈
Fixed in f165974

cc @ismaeldcom

…ListProps

oaratovskyi · 2022-09-21T10:40:41Z

@ismaeldcom I've also addressed all the nitpicks, thanks for catching those, now the gaps and links look consistent 🔥

oaratovskyi · 2022-09-21T10:42:03Z

plugins/woocommerce-admin/client/payments-welcome/apms.tsx

+					<List items={ apmsList } />
+				</CardBody>
+				<CardFooter>
+					<ExternalLink href="https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/wallets/?categoryIds=28682&collections=product&page=1">


FYI: This link is provided by Keala in DM when reviewed the functionality

dmallory42

Tested both locally and on a JN site, it's working well - the extensions were all installed and the tracking events were populated correctly - thanks for working on this!

I'll pre-approve it from a functionality POV, I know there were a few minor comments on styling, so once the designs and copy are all approved and the WC team have signed off we can !

oaratovskyi · 2022-09-22T08:33:14Z

Confirmed with Atlas that I am good to go with merging it (my changes don't break the tests)
p1663764252392999-slack-C03CPM3UXDJ

chihsuan

Excellent work! @oaratovskyi Tested well and LGTM. 🚀

github-actions · 2022-09-23T12:36:33Z

Hi @adrianduffell, 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

* Initial commit * Implement APMs toggle button - Add valid links to each APM - Add valid link to the marketplace * Implement APMs toggle button - Add valid links to each APM - Add valid link to the marketplace * Refactor the code to be more explicit * Delete the apm on toggle off if it's local state * Implement FAQ simple block - Style a notice about APM is enabled - Add noreferrer and target=_blank to external links * Add todo comments * FAQ simple styling fix (improve padding) * Fixes after inner review * Add changelog item * Address PR review comments * Remove Affirm as it's not in the store * Style fixes, proper internationalization and put valid link * Styling fixes, translators comment, rename ApmsProps component to ApmListProps * Two more styling fixes * Styling fix * Styling fix * Remove text-decoration: none to match the design

Initial commit

7e66cdf

github-actions bot added the focus: react admin label Sep 5, 2022

oaratovskyi added 8 commits September 6, 2022 16:01

Implement APMs toggle button

9a79f8c

- Add valid links to each APM - Add valid link to the marketplace

Implement APMs toggle button

93bf072

- Add valid links to each APM - Add valid link to the marketplace

Refactor the code to be more explicit

94caad5

Delete the apm on toggle off if it's local state

d9146dd

Implement FAQ simple block

e4ca6c6

- Style a notice about APM is enabled - Add noreferrer and target=_blank to external links

Add todo comments

62cd328

FAQ simple styling fix (improve padding)

672c730

Fixes after inner review

0b7935b

oaratovskyi dismissed a stale review via 0b7935b September 13, 2022 13:19

github-actions bot added the release: highlight Issues that have a high user impact and need to be discussed/paid attention to. label Sep 13, 2022

Merge remote-tracking branch 'origin/trunk' into add/wcpay-4529-addit…

03350b4

…ional-pms-on-payments-welcome

github-actions bot removed the release: highlight Issues that have a high user impact and need to be discussed/paid attention to. label Sep 13, 2022

Add changelog item

52e6766

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Sep 13, 2022

oaratovskyi marked this pull request as ready for review September 13, 2022 14:33

oaratovskyi self-assigned this Sep 13, 2022

oaratovskyi requested review from a team and dmallory42 and removed request for a team September 13, 2022 15:04

dmallory42 reviewed Sep 14, 2022

View reviewed changes

plugins/woocommerce-admin/client/payments-welcome/apms.tsx Outdated Show resolved Hide resolved

plugins/woocommerce-admin/client/payments-welcome/index.tsx Outdated Show resolved Hide resolved

plugins/woocommerce-admin/client/payments-welcome/strings.tsx Outdated Show resolved Hide resolved

Address PR review comments

eabb148

github-actions bot added the release: highlight Issues that have a high user impact and need to be discussed/paid attention to. label Sep 15, 2022

Merge remote-tracking branch 'origin/trunk' into add/wcpay-4529-addit…

f98eb3d

…ional-pms-on-payments-welcome

github-actions bot removed the release: highlight Issues that have a high user impact and need to be discussed/paid attention to. label Sep 20, 2022

Remove Affirm as it's not in the store

c1ef694

oaratovskyi requested a review from a team September 20, 2022 19:45

ismaeldcom reviewed Sep 21, 2022

View reviewed changes

chihsuan reviewed Sep 21, 2022

View reviewed changes

plugins/woocommerce-admin/client/payments-welcome/apms.tsx Show resolved Hide resolved

Style fixes, proper internationalization and put valid link

f165974

oaratovskyi added 5 commits September 21, 2022 13:23

Styling fixes, translators comment, rename ApmsProps component to Apm…

579b1d6

…ListProps

Two more styling fixes

bba2055

Styling fix

76a0313

Styling fix

b9268a1

Remove text-decoration: none to match the design

62467e9

oaratovskyi requested review from chihsuan, dmallory42 and ismaeldcom September 21, 2022 10:40

oaratovskyi commented Sep 21, 2022

View reviewed changes

dmallory42 approved these changes Sep 21, 2022

View reviewed changes

chihsuan approved these changes Sep 22, 2022

View reviewed changes

adrianduffell merged commit 013a5f2 into trunk Sep 23, 2022

adrianduffell deleted the add/wcpay-4529-additional-pms-on-payments-welcome branch September 23, 2022 12:36

github-actions bot added this to the 7.1.0 milestone Sep 23, 2022

github-actions bot mentioned this pull request Nov 10, 2022

Test WooCommerce 7.1 UVLabs/location-picker-at-checkout-for-woocommerce#55

Closed

Show APMs on the new Payments menu #34581

Show APMs on the new Payments menu #34581

Uh oh!

Conversation

oaratovskyi commented Sep 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

Uh oh!

github-actions bot commented Sep 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

oaratovskyi commented Sep 13, 2022

Uh oh!

dmallory42 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ismaeldcom left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chihsuan Sep 21, 2022

Choose a reason for hiding this comment

Uh oh!

oaratovskyi Sep 21, 2022

Choose a reason for hiding this comment

Uh oh!

oaratovskyi Sep 21, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

oaratovskyi commented Sep 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oaratovskyi commented Sep 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oaratovskyi Sep 21, 2022

Choose a reason for hiding this comment

Uh oh!

dmallory42 left a comment

Choose a reason for hiding this comment

Uh oh!

oaratovskyi commented Sep 22, 2022

Uh oh!

chihsuan left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 23, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

oaratovskyi commented Sep 5, 2022 •

edited

Loading

github-actions bot commented Sep 5, 2022 •

edited

Loading

oaratovskyi commented Sep 21, 2022 •

edited

Loading

oaratovskyi commented Sep 21, 2022 •

edited

Loading