Checkout: abstracting Brazil/Ebank form fields #24095

ramonjd · 2018-04-12T05:41:21Z

This PR extracts extra fields required for Ebanx payments in Brazil from the credit card fields component, in order that we may use them in other payment-related forms such as bank transfer/redirect.

Along with the fields, I'm also moving clientside field validation for checkout/credit card fields into lib/checkout so that we can extend the rule to include the paypal/redirect panels and so on.

There is no new functionality.

For a background see: pxLjZ-4BN-p2

Screenshot

Testing

Set your currency to 'BRL'
Add something to your cart and head to checkout
At the payment step, select 'Brazil' as your country
Without entering any data, attempt to submit
Fill in credit card information (use a dummy card no#) and Ebanx fields (a valid tax code is 111.444.777-35)

Expectations

At 3: You should see the Ebanx extra fields
At 4: The fields should show validation messages
At 5: Valid form data should permit payment attempt

matticbot · 2018-04-12T05:41:23Z

Test live: https://calypso.live/?branch=update/abstract-ebanx-fields

yoavf · 2018-04-12T08:14:27Z

Works well, but I've noticed a small visual regression with the state/postal code fields.

Before:

After:

ramonjd · 2018-04-13T02:53:27Z

Thanks for catching that @yoavf

I didn't pull the existing css over to the new component. Now looks like this:

Mobile

Desktop

ramonjd · 2018-04-13T05:15:44Z

Just realized, after looking how to introduce validation to the redirect payment box, that I need to abstract the ebanx validation rules as well.

More to come on this PR... :)

yoavf

This works well, but I think we need to go a little bit deeper and cleanup some of the intermediate code, maybe in a way combine some of shouldRenderAdditionalEbanxFields, isEbanxEnabledForCountry and ebanxFieldRules. Let me know if that doesn't make sense :)

yoavf · 2018-04-15T08:14:40Z

client/lib/checkout/validation.js

+ */
+function paymentFieldRules( paymentDetails, paymentType ) {
+	switch ( paymentType ) {
+		case 'tef':


Let's simplify this for now and remove the 'tef' rule. We can add it to #23830 later.

yoavf · 2018-04-15T08:17:34Z

client/lib/checkout/test/validation.js

+ * Internal dependencies
+ */
+import { validatePaymentDetails, getCreditCardType } from '../validation';
+import { isEbanxEnabledForCountry, isValidCPF } from 'lib/checkout/ebanx';


Now that it's in lib/checkout this function should be renamed. The actual meaning right now is "Should ebanx be used for credit-card processing in this country"

Bit of a mouthful, but the least prolix I could come up with was: isEbanxCreditCardProcessingEnabledForCountry

ramonjd · 2018-04-16T01:58:15Z

This works well, but I think we need to go a little bit deeper and cleanup some of the intermediate code, maybe in a way combine some of shouldRenderAdditionalEbanxFields, isEbanxEnabledForCountry and ebanxFieldRules.

Thanks for testing. I agree, Ebanx is now peppered about the shop.

By 'combine' do you mean in the same module, or aggregate some of the logic into higher-order functions?

ramonjd · 2018-04-16T04:11:11Z

I've pulled together the common Ebanx methods, and genericized the <EbanxPaymentFields /> in e83f842294bbdbeef04d05487ef89634b8e93e6e.

Let me know if you see any further areas that could be cleaned up.

Returning a fragment to enable testing in enzyme

…o we can use the validation lib for other payment handlers Updated paths and tests

…bledForCountry` to reflect usage and change in directory structure Removed switch condition `tef` until #23830 Added extra text for `paymentFieldRules()`

Genericizing <EbanxPaymentFields /> to handle multiple possible ebanx fields Updated tests and README

yoavf

Thanks 👍 Looks great now, and much saner.
Tested manually, and ran locally the relevant e2e tests (which is the reason for all the rebased/forced pushes - sorry about that).

ramonjd added [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. Payment Methods labels Apr 12, 2018

ramonjd self-assigned this Apr 12, 2018

ramonjd requested review from a team April 12, 2018 06:49

ramonjd force-pushed the update/abstract-ebanx-fields branch 2 times, most recently from 29848c9 to 0a14521 Compare April 12, 2018 06:52

ramonjd added the [Status] In Progress label Apr 13, 2018

yoavf reviewed Apr 15, 2018

View reviewed changes

ramonjd force-pushed the update/abstract-ebanx-fields branch from 9dce9e8 to 21a9274 Compare April 16, 2018 01:52

yoavf added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 16, 2018

yoavf force-pushed the update/abstract-ebanx-fields branch from d104bb7 to 1aaa846 Compare April 16, 2018 10:23

ramonjd added 6 commits April 16, 2018 13:42

initial commit

0c3474f

Adding test

e5bf236

Returning a fragment to enable testing in enzyme

Migrating cc state field styles over to checkout scss

5c9815a

Moving credit card and general payment validation to lib/checkout s…

c939586

…o we can use the validation lib for other payment handlers Updated paths and tests

Renamed isEbanxEnabledForCountry to `isEbanxCreditCardProcessingEna…

b29a8ac

…bledForCountry` to reflect usage and change in directory structure Removed switch condition `tef` until #23830 Added extra text for `paymentFieldRules()`

Aggregating ebanx methods

e6541c9

Genericizing <EbanxPaymentFields /> to handle multiple possible ebanx fields Updated tests and README

yoavf force-pushed the update/abstract-ebanx-fields branch from 1aaa846 to e6541c9 Compare April 16, 2018 10:42

yoavf added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 16, 2018

yoavf approved these changes Apr 16, 2018

View reviewed changes

yoavf added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 16, 2018

ramonjd merged commit 032cfc6 into master Apr 17, 2018

ramonjd deleted the update/abstract-ebanx-fields branch April 17, 2018 06:34

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

ramonjd mentioned this pull request Apr 18, 2018

Checkout: Add postal code field to Ebanx fields #24294

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: abstracting Brazil/Ebank form fields #24095

Checkout: abstracting Brazil/Ebank form fields #24095

ramonjd commented Apr 12, 2018 •

edited

Loading

matticbot commented Apr 12, 2018

yoavf commented Apr 12, 2018

ramonjd commented Apr 13, 2018

ramonjd commented Apr 13, 2018 •

edited

Loading

yoavf left a comment

yoavf Apr 15, 2018

yoavf Apr 15, 2018

ramonjd Apr 16, 2018

ramonjd commented Apr 16, 2018 •

edited

Loading

ramonjd commented Apr 16, 2018

yoavf left a comment

Checkout: abstracting Brazil/Ebank form fields #24095

Checkout: abstracting Brazil/Ebank form fields #24095

Conversation

ramonjd commented Apr 12, 2018 • edited Loading

Screenshot

Testing

Expectations

matticbot commented Apr 12, 2018

yoavf commented Apr 12, 2018

ramonjd commented Apr 13, 2018

ramonjd commented Apr 13, 2018 • edited Loading

yoavf left a comment

Choose a reason for hiding this comment

yoavf Apr 15, 2018

Choose a reason for hiding this comment

yoavf Apr 15, 2018

Choose a reason for hiding this comment

ramonjd Apr 16, 2018

Choose a reason for hiding this comment

ramonjd commented Apr 16, 2018 • edited Loading

ramonjd commented Apr 16, 2018

yoavf left a comment

Choose a reason for hiding this comment

ramonjd commented Apr 12, 2018 •

edited

Loading

ramonjd commented Apr 13, 2018 •

edited

Loading

ramonjd commented Apr 16, 2018 •

edited

Loading