🚧🧠🌴 Fix Braintree 3DS in Dev portal (and much more)

[josemigallas]

Related:

• 🧠 🌴 Cleanup a bit braintree customer form data #3167
• 🧠 🌴 Extract form validation #3176
• 🧠🌴 Remove dependency from braintree-web CDN #3206

What this PR does / why we need it:

THREESCALE-8967: Adding Braintree SCA card fails

We load braintree-web SDK from node_modules AND as a cdn. Besides, the whole braintree flow is implemented in a convoluted way and it's hard to maintain.

First, this PR cleans up the pack used in developer portal that renders a React component which uses braintree-web imported from node_modules.

Second, it removes the dependency from braintre-web CDN by moving the script from admin portal's view into a pack and importing the SDK from node_nodules.

TODO:

• 3D secure flow not working at the moment

verification

• Admin portal: http://provider-admin.lvh.me:3000/p/admin/account/braintree_blue/edit
• Dev portal: http://provider.lvh.me:3000/admin/account/braintree_blue/edit

Testing credit cards:

with 3DS disabled	4111111111111111
3DS successful with no challenge	4000000000001000
3DS successful with challenge	4000000000001091
3DS unsuccessful with challenge	4000000000001109

NOTE: both forms: payment details (admin portal) and credit card details (dev portal), are basically the same. They share the same logic and have the same fields. However, one is renders via formtastic in a slim template (edit.html.slim) whereas the other is a React component (BraintreeForm.tsx). The only problem is mainly the differences between class names. Example:

Admin portal (PF4 style)

<li class="string input required stringish" id="customer_first_name_input">
  <label for="customer_first_name" class="label">First name<abbr title="required">*</abbr></label>
  <input id="customer_first_name" type="text" value="Pepe" name="customer[first_name]">
</li>

Dev portal (dev portal style)

<li class="string optional form-group" id="customer_first_name_input">
  <label class="col-md-4 control-label" for="customer_first_name">First name *</label>
  <input required="" class="col-md-6 form-control" id="customer_first_name" name="customer[first_name]" value="Pepe">
</li>

This to me looks like repetition and we should be able to use React in both (or none..) but it goes out of scope of this PR.

[akostadinov]

Can't really review but looks much better than before.

[akostadinov]

does this come from automatically now?

[josemigallas]

Now it comes from https://github.com/3scale/porta/pull/3079/files#diff-e5280eb9a5ca2994755960970425ea7ff092eef504a1a954682533ea1d1cc75c and it's the same as in the Dev portal form.
This was copy-pasted from a Braintree docs example.

[jlledom]

May you explain this? I don't understand it. AIUI this won't return a Promise b/c the only call in the function is preceded by an await. Besides, there's no return keyword. What does act() do?

[josemigallas]

async / await is syntactic sugar for wrapping something with a promise. Not returning means the method returns undefined. But if method awaits something inside, then it has to be marked as async and it will wrap this undefined inside a Promise, therefore it will return Promise<void>. In this scenario, a return statement is redundant.

Does that make sense?

[jlledom]

Yes, but still don't understand the code. What does act() do? and why calling setTimeout?

[josemigallas]

Anything that triggers a change in the component has to be wrapped around act.

setTimeout is used to add a delay to the promise so that it doesn't resolve immediately.

[jlledom]

I don't feel able to review all the TS code, so I cloned the branch and tried to make it work locally. Everything seems to work fine for me, so approved.