fix: pix logo in checkout and success page

Block/Payment/Pix.php

@@ -16,6 +16,7 @@
 use Magento\Framework\View\Element\Template;
 use Magento\Framework\View\Element\Template\Context;
 use Magento\Checkout\Model\Session as CheckoutSession;
+use Magento\Framework\View\Asset\Repository;
 use Magento\Sales\Api\Data\OrderInterface as Order;
 use Magento\Sales\Api\Data\OrderPaymentInterface as Payment;
 use Pagarme\Pagarme\Helper\Payment\Pix as PixHelper;
@@ -38,14 +39,27 @@ class Pix extends Template
     private $pixHelper;
 
     /**
-     * Link constructor.
+     * @var Repository
+     */
+    private $assetRepository;
+
+    /**
+     * Pix constructor
+     *
      * @param Context $context
      * @param CheckoutSession $checkoutSession
+     * @param PixHelper $pixHelper
+     * @param Repository $assetRepository
      */
-    public function __construct(Context $context, CheckoutSession $checkoutSession, PixHelper $pixHelper)
-    {
+    public function __construct(
+        Context $context,
+        CheckoutSession $checkoutSession,
+        PixHelper $pixHelper,
+        Repository $assetRepository
+    ) {
         $this->checkoutSession = $checkoutSession;
         $this->pixHelper = $pixHelper;
+        $this->assetRepository = $assetRepository;
         parent::__construct($context, []);
     }
 
@@ -87,6 +101,14 @@ public function showPixInformation()
         return !empty($this->getPixInfo());
     }
 
+    /**
+     * @return string
+     */
+    public function getLogoSrc()
+    {
+        return $this->assetRepository->getUrl(PixHelper::LOGO_URL);
+    }
+
     /**
      * @return string
      */

Helper/Payment/Pix.php

@@ -9,6 +9,8 @@
 
 class Pix
 {
+    const LOGO_URL = "Pagarme_Pagarme::images/logo-pix.svg";
+
     private $qrCodeUrl;
     private $qrCode;
 

Model/Ui/Pix/ConfigProvider.php

@@ -3,8 +3,10 @@
 namespace Pagarme\Pagarme\Model\Ui\Pix;
 
 use Magento\Checkout\Model\ConfigProviderInterface;
+use Magento\Framework\View\Asset\Repository;
 use Pagarme\Core\Kernel\ValueObjects\Configuration\PixConfig;
 use Pagarme\Pagarme\Concrete\Magento2CoreSetup as MPSetup;
+use Pagarme\Pagarme\Helper\Payment\Pix as PixHelper;
 
 final class ConfigProvider implements ConfigProviderInterface
 {
@@ -15,10 +17,16 @@ final class ConfigProvider implements ConfigProviderInterface
      */
     private $pixConfig;
 
-    public function __construct()
+    /**
+     * @var Repository
+     */
+    private $assetRepository;
+
+    public function __construct(Repository $assetRepository)
     {
         MPSetup::bootstrap();
         $moduleConfig = MPSetup::getModuleConfiguration();
+        $this->assetRepository = $assetRepository;
         if (!empty($moduleConfig->getPixConfig())) {
             $this->pixConfig = $moduleConfig->getPixConfig();
         }
@@ -31,6 +39,7 @@ public function getConfig()
                 self::CODE => [
                     'active' => $this->pixConfig->isEnabled(),
                     'title' => $this->pixConfig->getTitle(),
+                    'logo' => $this->assetRepository->getUrl(PixHelper::LOGO_URL)
                 ]
             ]
         ];

view/frontend/templates/payment/pix.phtml

@@ -8,8 +8,8 @@ if ($block->showPixInformation()):
     <div class="pix-wrapper">
         <div class="pix-logo-wrapper">
             <img
-                width="150"
-                src="https://cdn.mundipagg.com/assets/images/site/illustrations/pix-bc-logo-2.png"
+                class="pagarme-pix-logo"
+                src="<?= $block->getLogoSrc(); ?>"
                 alt="pix logo"
             />
         </div>

view/frontend/web/css/pagarme_style.css

@@ -36,3 +36,7 @@
 .field .control .cc_owner {
     width: 225px;
 }
+
+.pagarme-pix-logo {
+    width: 120px;
+}

view/frontend/web/css/pagarme_success_page.css

@@ -63,3 +63,7 @@
     padding: 10px 15px;
     margin-top: 10px;
 }
+
+.pagarme-pix-logo {
+    width: 120px;
+}

view/frontend/web/js/view/payment/pix.js

@@ -37,6 +37,9 @@ define(
             getModel: function () {
                 return 'pix';
             },
+            getLogoSrc: function() {
+                return window.checkoutConfig.payment.pagarme_pix.logo;
+            },
 
             getData: function () {
                 var paymentMethod = PagarmeCore.paymentMethod[this.getModel()];

view/frontend/web/template/payment/pix-form.html

@@ -12,7 +12,7 @@
     </div>
 </div>
 
-<img src="https://cdn.mundipagg.com/assets/images/site/illustrations/pix-bc-logo-2.png" width="200" />
+<img class="pagarme-pix-logo" data-bind="attr:{src: getLogoSrc()}" />
 
 <div class="checkout-text-block">
     <span><!-- ko i18n: getText()--><!-- /ko --></span>