[PW-2390] Add action component on success page if presentToShopper an… (#775)

* [PW-2390] Add action component on success page if presentToShopper and Action result is provided.
* Added a adyenCheckout3101 requireJS variable to use latest component version. This we can use for all new payment method integrations or upgrades.
* Success block loads all values needed for the component
* Success page renders the component
* Layout renders the styles.css file for showing the component with the right styling

* Update view/frontend/templates/checkout/success.phtml
Co-authored-by: Attila Kiss <42297201+cyattilakiss@users.noreply.github.com>

* Update view/frontend/templates/checkout/success.phtml
Co-authored-by: Attila Kiss <42297201+cyattilakiss@users.noreply.github.com>

* Update view/frontend/templates/checkout/success.phtml
Co-authored-by: Attila Kiss <42297201+cyattilakiss@users.noreply.github.com>

* remove empty lines

* remove escapeHTML as it is json causing the JSON.parse to fail

* Update view/frontend/templates/checkout/success.phtml

* Update view/frontend/templates/checkout/success.phtml
Co-authored-by: Attila Kiss <42297201+cyattilakiss@users.noreply.github.com>
Co-authored-by: Attila Kiss <42297201+cyattilakiss@users.noreply.github.com>
Co-authored-by: Ángel Campos <angel.campos@adyen.com>
Co-authored-by: Marcos Garcia <marcos.asgarcia@gmail.com>

Block/Checkout/Success.php

@@ -32,22 +32,28 @@ class Success extends \Magento\Framework\View\Element\Template
     /**
      * @var \Magento\Sales\Model\Order $order
      */
-    protected $_order;
+    protected $order;
 
     /**
      * @var \Magento\Checkout\Model\Session
      */
-    protected $_checkoutSession;
+    protected $checkoutSession;
 
     /**
      * @var \Magento\Checkout\Model\OrderFactory
      */
-    protected $_orderFactory;
+    protected $orderFactory;
+
+
+    /**
+     * @var \Adyen\Payment\Helper\Data
+     */
+    protected $adyenHelper;
 
     /**
-     * @var \Magento\Framework\Pricing\Helper\Data
+     * @var \Magento\Store\Model\StoreManagerInterface
      */
-    public $priceHelper;
+    protected $storeManager;
 
     /**
      * Success constructor.
@@ -63,11 +69,15 @@ class Success extends \Magento\Framework\View\Element\Template
         \Magento\Checkout\Model\Session $checkoutSession,
         \Magento\Sales\Model\OrderFactory $orderFactory,
         \Magento\Framework\Pricing\Helper\Data $priceHelper,
+        \Adyen\Payment\Helper\Data $adyenHelper,
+        \Magento\Store\Model\StoreManagerInterface $storeManager,
         array $data = []
     ) {
-        $this->_checkoutSession = $checkoutSession;
-        $this->_orderFactory = $orderFactory;
+        $this->checkoutSession = $checkoutSession;
+        $this->orderFactory = $orderFactory;
         $this->priceHelper = $priceHelper;
+        $this->adyenHelper = $adyenHelper;
+        $this->storeManager = $storeManager;
         parent::__construct($context, $data);
     }
 
@@ -151,14 +161,55 @@ class Success extends \Magento\Framework\View\Element\Template
         return $result;
     }
 
+    /**
+     * If PresentToShopper resultCode and action has provided render this with the checkout component on the success page
+     * @return bool
+     */
+    public function renderAction()
+    {
+        if (
+            !empty($this->getOrder()->getPayment()->getAdditionalInformation('resultCode')) &&
+            $this->getOrder()->getPayment()->getAdditionalInformation('resultCode') == 'PresentToShopper' &&
+            !empty($this->getOrder()->getPayment()->getAdditionalInformation('action'))
+        ) {
+            return true;
+        }
+        return false;
+    }
+
+    public function getAction()
+    {
+        return json_encode($this->getOrder()->getPayment()->getAdditionalInformation('action'));
+    }
+
+    public function getLocale()
+    {
+        return $this->adyenHelper->getCurrentLocaleCode(
+            $this->storeManager->getStore()->getId()
+        );
+    }
+
+    public function getOriginKey()
+    {
+        return $this->adyenHelper->getOriginKeyForBaseUrl();
+    }
+
+    public function getEnvironment()
+    {
+        return $this->adyenHelper->getCheckoutEnvironment(
+            $this->storeManager->getStore()->getId()
+        );
+    }
+
+
     /**
      * @return \Magento\Sales\Model\Order
      */
     public function getOrder()
     {
-        if ($this->_order == null) {
-            $this->_order = $this->_orderFactory->create()->load($this->_checkoutSession->getLastOrderId());
+        if ($this->order == null) {
+            $this->order = $this->orderFactory->create()->load($this->checkoutSession->getLastOrderId());
         }
-        return $this->_order;
+        return $this->order;
     }
 }

view/frontend/layout/checkout_onepage_success.xml

@@ -22,10 +22,15 @@
  * Author: Adyen <magento@adyen.com>
  */
 -->
-<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
-<body>
-    <referenceContainer name="order.success.additional.info">
-        <block class="Adyen\Payment\Block\Checkout\Success" name="onepage.success.adyen_payment" template="checkout/success.phtml" cacheable="false"/>
-    </referenceContainer>
-</body>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Adyen_Payment::css/styles.css"/>
+    </head>
+    <body>
+        <referenceContainer name="order.success.additional.info">
+            <block class="Adyen\Payment\Block\Checkout\Success" name="onepage.success.adyen_payment"
+                   template="checkout/success.phtml" cacheable="false"/>
+        </referenceContainer>
+    </body>
 </page>

view/frontend/requirejs-config.js

@@ -14,7 +14,8 @@ var config = {
     },
     map: {
         '*': {
-            'adyenCheckout':  'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.4.0/adyen.js'
+            'adyenCheckout':  'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.4.0/adyen.js',
+            'adyenCheckout3101': 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.10.1/adyen.js'
         }
     }
 };

view/frontend/templates/checkout/success.phtml

@@ -25,7 +25,28 @@
  * @var \Adyen\Payment\Block\Checkout\Success $block
  */
 ?>
-<?php if ($block->isBoletoPayment()): ?>
+<?php if ($block->renderAction()): ?>
+    <script type="text/javascript">
+        require([
+            'jquery',
+            'adyenCheckout3101'
+        ], function ($, AdyenCheckout) {
+            var action = JSON.parse('<?= /* @noEscape */ $block->getAction(); ?>');
+            var checkoutComponent = new AdyenCheckout({
+                locale: '<?= $block->escapeHtml($block->getLocale()); ?>',
+                environment: '<?= $block->escapeHtml($block->getEnvironment()); ?>',
+                originKey: '<?= $block->escapeHtml($block->getOriginKey()); ?>'
+            });
+            try {
+                checkoutComponent.createFromAction(action).mount('#ActionContainer');
+            } catch(err) {
+                // Action component cannot be created
+            }
+        });
+    </script>
+    <div id="ActionContainer"></div>
+<?php else: ?>
+    <?php if ($block->isBoletoPayment()): ?>
     <?php
     $boletoData = $block->getBoletoData();
     ?>
@@ -37,21 +58,22 @@
     </p>
 <?php endif; ?>
 
-<?php if (!empty($block->getBankTransferData())): ?>
+    <?php if (!empty($block->getBankTransferData())): ?>
     <?php
     $banktranferData = $block->getBankTransferData();
     $order = $block->getOrder();
     ?>
     <h2><?= $block->escapeHtml(__('Pay using Bank transfer')); ?></h2>
     <p><?= $block->escapeHtml(
-        __('Please transfer the amount using the reference below to the following bank account')
+            __('Please transfer the amount using the reference below to the following bank account')
         ); ?></p>
     <table>
         <tbody>
         <?php if (!empty($order->getGrandTotal())): ?>
             <tr>
                 <th scope="row"><?= $block->escapeHtml(__('Amount')); ?></th>
-                <td><?= /* @noEscape */ $order->formatPrice($order->getGrandTotal()); ?></td>
+                <td><?= /* @noEscape */
+                    $order->formatPrice($order->getGrandTotal()); ?></td>
             </tr>
         <?php endif; ?>
 
@@ -97,10 +119,10 @@
     ?>
     <h2><?= $block->escapeHtml(__('Pay using Multibanco')); ?></h2>
     <p><?= $block->escapeHtml(
-        __(
-            'Please pay with the provided Multibanco reference and entity before payment deadline in order to ' .
-            'complete our payment'
-        )
+            __(
+                'Please pay with the provided Multibanco reference and entity before payment deadline in order to ' .
+                'complete our payment'
+            )
         ); ?></p>
     <table>
         <tbody>
@@ -122,7 +144,8 @@
         <?php if (!empty($multibancoData['totalAmount'])): ?>
             <tr>
                 <th scope="row"><?= $block->escapeHtml(__('Amount')); ?></th>
-                <td><?= /* @noEscape */ $block->priceHelper->currency($multibancoData['totalAmount']['value']);?>
+                <td><?= /* @noEscape */
+                    $block->priceHelper->currency($multibancoData['totalAmount']['value']); ?>
                 </td>
             </tr>
         <?php endif; ?>
@@ -135,4 +158,5 @@
         <?php endif; ?>
         </tbody>
     </table>
+    <?php endif; ?>
 <?php endif; ?>