Remove angularJS dependency in prestashop and use same standalone PHP component

[blockonomics]

Copy https://github.com/blockonomics/woocommerce-plugin/pull/276

Few things to think about:

• Any roadblocks in prestashop to remove angularJS ?
• How do we plan to reuse the standalone PHP component ? Can we refactor to a separate common github (with possibly different branches for wordpress/prestashop). Copying complete code from wordpress into prestashop nullifies the meaning of a component. Discuss with @DarrenWestwood and @thisisayush about this. Would probably require research into prestashop module vs wordpress module architecture to achieve common ground

[anktd]

Alright.

[anktd]

Removing AngularJS and using the checkout.js from https://github.com/blockonomics/woocommerce-plugin/pull/276 @DarrenWestwood @thisisayush There are some minor things we need to look at:

• HTML structure of checkout page is similar except 2 extra divs in woocommerce plugin which are not present in current checkout page of Prestashop: (i) Spinner Div is not present in PS checkout which make this line and this line in checkout.js not required here. (ii) Similarly, Display Error div is also not present in PS checkout, which makes this line and this line in checkout.js not required here.

Do we add these component since we want our checkout.js to be uniform across platform? Or we simply comment these in javascript for now, since we are looking to properly handle errors anyway - https://github.com/blockonomics/woocommerce-plugin/issues/279

• In PS, we are passing $crypto['code'] as caps in payment.tpl , so this is causing error in the websocket url construction for btc in checkout.js We can do something like this to address it this.data.crypto.code.toLowerCase() == 'btc' (if it doesn't cause problem in wordpress) or we write this condition another way.

• Lastly, the finish_order_url is named $redirect_link in PS checkout. For this, we can do something like data-finish_order_url="{$redirect_link|escape:'htmlall':'UTF-8'}" in payment.tpl or simply rename this in PS to finish_order_url itself.

[DarrenWestwood]

HTML structure of checkout page is similar except 2 extra divs

Both of these can be included in the Prestashop module as these form part of the checkout and should only affect the frontend.

In PS, we are passing $crypto['code'] as caps in payment.tpl

Is there a reason we are using caps in Prestashop? We should try resolve this in PS rather than changing the checkout JS.

Lastly, the finish_order_url is named $redirect_link

Using data-finish_order_url="{$redirect_link|escape:'htmlall':'UTF-8'}" is correct for simple integration. We can rename to finish_order_url to match woocommerce in a separate PR to avoid unnecessary overhead to the PR.

Let's not make changes until the woocommerce release has been finalized.

[DarrenWestwood]

Copying complete code from wordpress into prestashop nullifies the meaning of a component.

We can create a separate github repository to contain the checkout php, js, and css. Some limitations include:

• Localization differs for each integration (We can perhaps create some form of generator to generate the checkout php for each integration)
• Prestashop uses .tpl template which accesses variables using {$var}, as opposed to std php echo <?php echo $var; ?> (The above mentioned generator may solve this issue as well)
• Error string differs per integration as Test Setup instructions differ.

[anktd]

In PS, we are passing $crypto['code'] as caps in payment.tpl

Is there a reason we are using caps in Prestashop?

Yes, we are doing it to display the $crypto['code'] in checkout page as shown below

So, we can just remove these lines so that it isn't passed in caps to payment.tpl and in our smarty template, just do <li>{$crypto.code|upper|escape:'htmlall':'UTF-8'}</li>