Phase 1: Upgrade JS Checkout to Modular (Part 1/2)

[thisisayush]

References #283

Part 1 of JS Modular Checkout:

• Updates to use General Components instead of custom classes, unless necessary.
• Uses the new Modular UI Design
• Font Icons Added

Screenshots:

Lite Mode

JS Checkout

No-JS Checkout

Strorefront

JS Checkout

No-JS Checkout

Asrta

JS Checkout

No JS Checkout

Hestia

JS Checkout

No JS Checkout

Part 2: Make Refresh via AJAX

To be Done

[shivaenigma]

Note that now we have an additional complexity of changing bitcoin to bitcoin cash in case of BCH checkout What I recommended is to completely remove the bitcoin row and move the 6000USD to the Order# row https://nimb.ws/twfA9Z This will give more vertical space and things will look compact. Feel free to think about this

[thisisayush]

@shivaenigma Right now it's not hardcoded, a styling is applied to the "name" of the crypto chosen: https://github.com/blockonomics/woocommerce-plugin/pull/293/files#diff-8d81ebce00651fad5f0a421bc7d60d514e8ca6bd12cc9fc434ab5e46dab827ecR52

[blockonomics]

What I recommended is to completely remove the bitcoin row and move the 6000USD to the Order# row https://nimb.ws/twfA9Z This will give more vertical space and things will look compact. Feel free to think about this

@thisisayush let us do this. I will this will make the UI more compact and look better

[thisisayush]

How it looks with Moving the Order ID and Amount in the same row. One thing to look for: Handling large order IDs as mentioned by @DarrenWestwood

[DarrenWestwood]

Full pull request with all changes: https://github.com/blockonomics/woocommerce-plugin/pull/301