Simple Payment Widget: Manage Products from the Customizer #9699

rodrigoi · 2018-06-06T18:39:28Z

Changes proposed in this Pull Request:

Adds a form to manage Simple Payment Buttons from the customizer interface.

-	-
Add New
Edit
Delete

Cosed	Open

Testing instructions:

Pre-requisites:

apply this branch on a Jetpack site with an active Business Plan subscription and a Theme with at least one widget area
have at least one previously created Simple Payment Button
open the Customizer on your Jetpack Business Site
go to Widgets and select a Widget Area
click on Add Widget
search on the widget panel for Simple Payment
select the Simple Payment widget

at this point, a widget with defaulting to the first SP button should be added to the customizer sidebar.
All actions are atomic and effectively add or modify the existing products. Making a change on a product on the customizer without publishing affects products published on posts and pages. But changes on which product is shown on the widget only persist after being Published by the user.

To create a new product, you'll need to:

click on Add New
fill the form. Using an image is optional, but it should open the media library if clicked.

The widget preview on the customizer should clear out, and display the entered values as they are typed on the form.

click Save

the form should close, and the new SP button should be added to the drop down list. The customizer preview should show the new SP button.

click Cancel

the form should clear and close, and the previously selected SP button should appear on the customizer preview.

To edit and existing product, you'll need to:

Select the desired product from the drop down list
click on Edit Selected

The form should load the product properties, and the widget preview on the customizer should show the correct product, and update the values as they are edited on the form.

click Save

the form should close, preserving the changes on the customizer preview window and the selected item on the product drop down list.

click Cancel

the form should clear and close, and the previously selected SP button should appear on the customizer preview.

To delete an existing product, you'll need to:

Select the desired product from the drop down list.
click on Edit Selected

The form should load the product properties, and the widget preview on the customizer should show the correct product.

click Delete

After confirming the action, the selected product should disappear from the product drop down list. The first product on the list should be selected, and the customizer preview should reflect this change.

gwwar · 2018-06-06T19:33:42Z

modules/widgets/simple-payments.php

@@ -13,6 +13,33 @@
 	 * Display a Simple Payment Button as a Widget.
 	 */
 	class Jetpack_Simple_Payments_Widget extends WP_Widget {
+		private static $currencie_symbols = array(


Typo here.

Also, how will we keep this in sync? Is this also hardcoded in the SP endpoint?

Okay so we're probably basing this off of https://github.com/Automattic/wp-calypso/blob/f2494ca3b040fb7f87f9f5b0e49975a237d27150/client/components/tinymce/plugins/simple-payments/dialog/form.jsx#L41-L67 ?

For a start let's also link back to https://developer.paypal.com/docs/integration/direct/rest/currency-codes/

I'd also be surprised if WordPress didn't already have a currency to symbol mapping someplace.

This may be easier to maintain as an endpoint, but we can leave that for a future update.

For WordPress.com we have a static function on the store that provides currencies, but there's no similar class on Jetpack 🙁

Typo fixed and docs link added on 66c5e61.

gwwar · 2018-06-06T20:00:19Z

modules/widgets/simple-payments.php

@@ -28,29 +55,108 @@ function __construct() {
 				)
 			);

+			if ( is_customize_preview() ) {
+				add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_styles_and_scripts' ) );


👍 verified that these only load related assets in the customizer

gwwar · 2018-06-06T20:01:53Z

modules/widgets/simple-payments.php

 		/**
 		 * Return an associative array of default values.
 		 *
 		 * These values are used in new widgets.
 		 *
 		 * @return array Default values for the widget options.
 		 */
-		public function defaults() {


Curious about the change here. Was this originally a poor choice, and nothing actually needed access to this instance method?

I wouldn't say poor choice, more like automatic writing.

gwwar · 2018-06-06T20:04:16Z

have at least one previously created Simple Payment Button

Feels like we can open another issue to work on getting around this limitation. @rodrigoi would you like to write this one up, or should I?

gwwar · 2018-06-06T20:19:40Z

Some high level stuff, feel free to break out into additional issues if they're too large:

We'll want to get a flow out for someone starting from 0 Simple Payments
🤔 We're missing validation on both the customizer client and API endpoints. I'm able to create completely empty simple payment buttons (without any info)
Let's get some design feedback on the editing/adding workflows. For example could we hide the dropdown + top action buttons when creating a new payment?
I'm guessing the edit flows still need someone to work on them? (Feel free to create an issue) Right now I can click the button, but no fields are populated.

gwwar · 2018-06-06T20:31:21Z

For reference this is part of Automattic/wp-calypso#24617

gwwar · 2018-06-12T20:50:12Z

The joys of branching, let's get this rebased when you have time. 😄

… form

…idget Customizer

…e a product.

* Widgets: Adds support for Simple Payment Buttons as Widgets * Simple Payments Widget: Add style overrides (#9580) Override the media query and ensure that Simple Payments widgets are always displayed as a single column. * Widgets: Only render the Simple Payments widget if its button exists (#9673) In the frontend, only show the widget if the Simple Payments shortcode is parsed successfully. In the customizer, show the widget regardless, so that it can be modified via the pencil icon. * Simple Payment Widget: Manage Products from the Customizer (#9699) * Customizer: Simple Payments Widget breaks when starting without products (#9809) * Widgets: Hide Simple Payments create and edit buttons in widgets.php (#9811) * Widgets: Record events for the Simple Payments widget (#9803) * Widgets: Add Plan Check to the Simple Payments Widget (#9824) * Customizer: keep Simple Payments Widget Customizer in sync between instances (#9814) * Customizer: improves price validation on the Simple Payments Widget Customizer * Customizer: improves the behaviour of the action buttons on the Simple Payments Widget Customizer

rodrigoi added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. Simple Payments DO NOT MERGE don't merge it! labels Jun 6, 2018

rodrigoi added this to the 6.3 milestone Jun 6, 2018

rodrigoi self-assigned this Jun 6, 2018

rodrigoi requested a review from a team June 6, 2018 18:39

rodrigoi requested a review from a team as a code owner June 6, 2018 18:39

matticbot added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it DO NOT MERGE don't merge it! Simple Payments Touches WP.com Files labels Jun 6, 2018

rodrigoi force-pushed the add/simple-payments-widget-create-new branch from 45fbe1e to b3478f5 Compare June 6, 2018 19:00

matticbot added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it DO NOT MERGE don't merge it! Simple Payments Touches WP.com Files labels Jun 6, 2018

gwwar reviewed Jun 6, 2018

View reviewed changes

This was referenced Jun 6, 2018

Customizer: Simple Payments Widget do not show options when the user has no existing buttons. Automattic/wp-calypso#25327

Closed

Customizer: Add validations to the Create New/Edit Simple Payment Button form. Automattic/wp-calypso#25328

Closed

rodrigoi removed the DO NOT MERGE don't merge it! label Jun 8, 2018

Widgets: allows users to create a new SP button from the customizer

a9a294d

Rodrigo Iloro added 8 commits June 13, 2018 04:03

Widgets: simple payments support selective refresh for the create new…

55c8c27

… form

Widgets: fixes select image change for selective refresh

449fece

Widgets: fixes JS lint error for Simple Payments widget

7476cb6

Widgets: resolve merge conflicts

1b6e708

Customizer: fixes typo on currencies variable name

1f3b3c9

Customizer: removes commented code from the Simple Payments Widget

2231a71

Customizer: adds Edit and Delete capabilities to the Simple Payment W…

d9fd020

…idget Customizer

Customizer: fixes merge conflicts

d787932

rodrigoi force-pushed the add/simple-payments-widget-create-new branch from 0cf560f to d787932 Compare June 13, 2018 07:12

rodrigoi changed the title ~~Simple Payment Widget: create new Payment Button~~ Simple Payment Widget: Manage Products from the Customizer Jun 13, 2018

Customizer: adds confirmation warning when the user attempts to delet…

259d501

…e a product.

rodrigoi merged commit 89ab826 into feature/widgets/simple-payment-widget Jun 15, 2018

matticbot added the [Status] Needs Changelog label Jun 15, 2018

rodrigoi deleted the add/simple-payments-widget-create-new branch June 15, 2018 21:02

rodrigoi added a commit that referenced this pull request Jun 18, 2018

Simple Payment Widget: Manage Products from the Customizer (#9699)

a763851

rodrigoi added a commit that referenced this pull request Jun 22, 2018

Simple Payment Widget: Manage Products from the Customizer (#9699)

f9a214c

Copons pushed a commit that referenced this pull request Jun 25, 2018

Simple Payment Widget: Manage Products from the Customizer (#9699)

9daad6e

Copons pushed a commit that referenced this pull request Jun 25, 2018

Simple Payment Widget: Manage Products from the Customizer (#9699)

51f51c9

oskosk removed the [Status] Needs Changelog label Jun 26, 2018

rodrigoi added a commit that referenced this pull request Jun 26, 2018

Simple Payment Widget: Manage Products from the Customizer (#9699)

a7564ef

kraftbj removed the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Sep 29, 2021

jeherve added the [Feature] Pay with PayPal aka Simple Payments label Aug 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simple Payment Widget: Manage Products from the Customizer #9699

Simple Payment Widget: Manage Products from the Customizer #9699

rodrigoi commented Jun 6, 2018 •

edited

Loading

gwwar Jun 6, 2018

gwwar Jun 6, 2018

rodrigoi Jun 7, 2018

gwwar Jun 6, 2018

gwwar Jun 6, 2018

rodrigoi Jun 7, 2018

gwwar commented Jun 6, 2018

gwwar commented Jun 6, 2018

gwwar commented Jun 6, 2018

gwwar commented Jun 12, 2018

Simple Payment Widget: Manage Products from the Customizer #9699

Simple Payment Widget: Manage Products from the Customizer #9699

Conversation

rodrigoi commented Jun 6, 2018 • edited Loading

Changes proposed in this Pull Request:

Testing instructions:

gwwar Jun 6, 2018

Choose a reason for hiding this comment

gwwar Jun 6, 2018

Choose a reason for hiding this comment

rodrigoi Jun 7, 2018

Choose a reason for hiding this comment

gwwar Jun 6, 2018

Choose a reason for hiding this comment

gwwar Jun 6, 2018

Choose a reason for hiding this comment

rodrigoi Jun 7, 2018

Choose a reason for hiding this comment

gwwar commented Jun 6, 2018

gwwar commented Jun 6, 2018

gwwar commented Jun 6, 2018

gwwar commented Jun 12, 2018

rodrigoi commented Jun 6, 2018 •

edited

Loading