Simple Payments: gutenberg block UI #28169

simison · 2018-10-30T14:40:23Z

Adds basic UI for Simple payments Gutenberg block.

Screenshots

UI:

UI screaming warnings:

Preview in editor:

End result at the site:

Todo / known issues

Testing instructions

Test in Jetpack

Jurassic Ninja: https://jurassic.ninja/create?jetpack-beta&branch=update/simple-payments-rest-api-meta&gutenpack&gutenberg&calypsobranch=add/gutenpack-simplepayments-ui
Connect Jetpack, purchase "premium" or "business" plan
Create new post in Gutenberg and add "Payment button" block
Open the post and see the button
Open the post in Calypso classic editor and see the button
Open the post in Calypso using this branch and Gutenberg and see the button: https://calypso.live/gutenberg/post?branch=add/gutenpack-simplepayments-ui

Test in Calypso

Apply patch to your sandbox: D19907-code
Open https://calypso.live/gutenberg/post?branch=add/gutenpack-simplepayments-ui
Choose a site with Simple payments enabled (purchase "premium" or "business" plan)

Manual checking

Apply these patches and cross-test the block in different editors:

This PR
Simple payments: allow read+write access to meta fields via REST API jetpack#10402
D19907-code

matticbot · 2018-10-30T14:40:25Z

Test live: https://calypso.live/gutenberg/post?branch=add/gutenpack-simplepayments-ui

thomasguillot · 2018-10-31T09:35:49Z

I recorded a screencast that highlights a few issues I noticed:

https://cloudup.com/cM30s7LEbQd

The allow multiple items doesn't seem to work
The currency seems to be stuck on USD
Prices with a decimal are being truncated (e.g. £0.50 becomes £0.00)
PayPal price doesn't always update

simison · 2018-10-31T13:19:14Z

@roccotripaldi FYI: I tried to register this block using JetpackBlockType but seems like simple-payments isn't a real module and thus the availability check always returns falsy in Jetpack. :-/

import JetpackBlockType from 'gutenberg/extensions/presets/jetpack/utils/jetpack-block-type';

const SimplePaymentsBlock = new JetpackBlockType( 'simple-payments', {
	// ...
} );

SimplePaymentsBlock.register();

client/gutenberg/extensions/simple-payments/edit.jsx

brbrr · 2018-10-31T14:16:02Z

Small alignment nitpick:

client/gutenberg/extensions/simple-payments/product-placeholder.jsx

simison · 2018-11-02T14:55:09Z

This is pretty close to being ready.

It's missing some error states that might be coming from the API but validations at the frontend already work.

It's unclear to me if prices need to be limited to >= 1.00 as currently Simple Payments in Calypso doesn't limit prices like that.

There might be some accessibility improvements we can still do.

The block also loads even for simple plans; a mechanism to stop that happening is still in the works elsewhere.

@brbrr which browser are you using? I couldn't replicate the alignment issue.

simison · 2018-11-02T15:21:58Z

Looks like there's a small bug where currency doesn't get set to default "USD" unless you change it to something else first.

MichaelArestad · 2018-11-02T15:46:18Z

This error message is a bit dramatic. Can we make it say something like:

Please add the name of the product you are selling.

MichaelArestad · 2018-11-02T15:47:19Z

The textarea doesn't have a border, but is resizable. Perhaps we can use Gutenberg's Paragraph block here instead?

MichaelArestad · 2018-11-02T15:50:56Z

Let's make the error message align with the other error messages. I do understand it is just for the price. I think the copy is slightly better here. We will flag this for copy review after a little iteration.

MichaelArestad · 2018-11-02T15:51:59Z

Can the error message go away as soon as I start typing in that field? (and for the others)

thomasguillot · 2018-11-02T15:55:10Z

Can the error message go away as soon as I start typing in that field? (and for the others)

The idea was to trigger the error messages when we unfocus an unfilled block (kind of like a submit button with a form).

Maybe when we refocus and start filling the fields, the message could/should disappear?

Addressed by d0f071d

client/gutenberg/extensions/simple-payments/edit.jsx

sirreal · 2018-11-06T07:36:16Z

client/gutenberg/extensions/simple-payments/editor.js

-		formattedPrice: {
-			type: 'string',
-			default: '',
-		},
 		multiple: {
 			type: 'number',


Related: Automattic/jetpack#10402 (comment)

I'd like to isolate API concerns from component logic. Indicating this is a number is confusing, I'm happy to add toApi/fromApi as necessary.

client/gutenberg/extensions/simple-payments/editor.js

Maintain .js extension so diff is clearer.

This was causing a warning. defaultValue is for uncontrolled components. With the Gutenberg default attribute value, the currency should be correctly defined.

sirreal

I tested this on a Jetpack site with Automattic/jetpack#10402 and it's working nicely.

I want to confirm Simple Payments in the classic editor continue to work as expected with the default changes, then let's ship and iterate!

Intended as comment, not approval.

sirreal

Simple payments continue to work as expected.

Let's wait for e2e and 🚢 🚢 🚢

simison · 2018-11-06T15:31:59Z

Small alignment nitpick:

Seems to be caused by styles leaking in from Calypso-Gutenberg, opened an issue: #28309

simison added Simple Payments [Goal] Gutenberg Working towards full integration with Gutenberg labels Oct 30, 2018

simison self-assigned this Oct 30, 2018

simison mentioned this pull request Oct 30, 2018

Gutenberg: Simple payment read/save/update #28065

Merged

simison added the [Status] In Progress label Oct 30, 2018

simison force-pushed the add/gutenpack-simplepayments-ui branch 2 times, most recently from b3882eb to 53eecd6 Compare October 30, 2018 23:19

simison force-pushed the add/gutenpack-simplepayments-ui branch from 53eecd6 to 3873de1 Compare October 31, 2018 13:12

brbrr reviewed Oct 31, 2018

View reviewed changes

client/gutenberg/extensions/simple-payments/edit.jsx Outdated Show resolved Hide resolved

simison requested review from rodrigoi, a team and thomasguillot November 1, 2018 22:06

simison added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Nov 1, 2018

rodrigoi reviewed Nov 1, 2018

View reviewed changes

client/gutenberg/extensions/simple-payments/product-placeholder.jsx Outdated Show resolved Hide resolved

simison force-pushed the add/gutenpack-simplepayments-ui branch from 41082c9 to c0fe79e Compare November 2, 2018 14:40

thomasguillot closed this Nov 2, 2018

thomasguillot reopened this Nov 2, 2018

sirreal reviewed Nov 6, 2018

View reviewed changes

client/gutenberg/extensions/simple-payments/editor.js Show resolved Hide resolved

sirreal added 8 commits November 6, 2018 09:55

Add USD default

7bbe18a

Remove braces around string literals

4a9f9fc

Fix eslint-disable comment

22ba4cf

Share simple-payments default currency

6ea6425

Validate in saveProduct, validate currency value

0e934f2

Use null errors over empty string

3ede10f

Use finally to unset isSavingProduct

7b79fec

Drop async, use class method

039d927

sirreal force-pushed the add/gutenpack-simplepayments-ui branch from 11d63cf to 039d927 Compare November 6, 2018 10:37

sirreal added 6 commits November 6, 2018 11:42

Use setState callback

029ea0e

Rely on default currency

a2611f1

Revert js -> jsx rename

9178b98

Maintain .js extension so diff is clearer.

fixup! Add block to jetpack preset, remove flag in Calypso

ae54214

Add comment about syncing currencies with Jetpack

74af169

Use value not defaultValue

be3fa0d

This was causing a warning. defaultValue is for uncontrolled components. With the Gutenberg default attribute value, the currency should be correctly defined.

sirreal previously approved these changes Nov 6, 2018

View reviewed changes

sirreal approved these changes Nov 6, 2018

View reviewed changes

simison merged commit 8ed68be into master Nov 6, 2018

simison deleted the add/gutenpack-simplepayments-ui branch November 6, 2018 13:13

matticbot removed the [Status] Ready to Merge label Nov 6, 2018

jeherve mentioned this pull request Nov 7, 2018

Gutenberg: add blocks to Jetpack Automattic/jetpack#10326

Closed

22 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simple Payments: gutenberg block UI #28169

Simple Payments: gutenberg block UI #28169

simison commented Oct 30, 2018 •

edited by sirreal

Loading

matticbot commented Oct 30, 2018 •

edited by simison

Loading

thomasguillot commented Oct 31, 2018

simison commented Oct 31, 2018 •

edited

Loading

brbrr commented Oct 31, 2018

simison commented Nov 2, 2018 •

edited

Loading

simison commented Nov 2, 2018

MichaelArestad commented Nov 2, 2018

MichaelArestad commented Nov 2, 2018

MichaelArestad commented Nov 2, 2018

MichaelArestad commented Nov 2, 2018

thomasguillot commented Nov 2, 2018

sirreal Nov 6, 2018

sirreal left a comment

sirreal left a comment •

edited

Loading

simison commented Nov 6, 2018 •

edited

Loading

Simple Payments: gutenberg block UI #28169

Simple Payments: gutenberg block UI #28169

Conversation

simison commented Oct 30, 2018 • edited by sirreal Loading

Screenshots

UI:

UI screaming warnings:

Preview in editor:

End result at the site:

Todo / known issues

Testing instructions

Test in Jetpack

Test in Calypso

Manual checking

matticbot commented Oct 30, 2018 • edited by simison Loading

thomasguillot commented Oct 31, 2018

simison commented Oct 31, 2018 • edited Loading

brbrr commented Oct 31, 2018

simison commented Nov 2, 2018 • edited Loading

simison commented Nov 2, 2018

MichaelArestad commented Nov 2, 2018

MichaelArestad commented Nov 2, 2018

MichaelArestad commented Nov 2, 2018

MichaelArestad commented Nov 2, 2018

thomasguillot commented Nov 2, 2018

sirreal Nov 6, 2018

Choose a reason for hiding this comment

sirreal left a comment

Choose a reason for hiding this comment

sirreal left a comment • edited Loading

Choose a reason for hiding this comment

simison commented Nov 6, 2018 • edited Loading

simison commented Oct 30, 2018 •

edited by sirreal

Loading

matticbot commented Oct 30, 2018 •

edited by simison

Loading

simison commented Oct 31, 2018 •

edited

Loading

simison commented Nov 2, 2018 •

edited

Loading

sirreal left a comment •

edited

Loading

simison commented Nov 6, 2018 •

edited

Loading