Merge pull request #118 from xendit/TPI-6365/magento-add-payment-chan…

…nel-icons Add payment channel icons
xendit · Feb 23, 2022 · c5929c9 · c5929c9
2 parents 8fee159 + 1260230
commit c5929c9
Show file tree

Hide file tree

Showing 134 changed files with 2,383 additions and 103 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,8 @@ Features:
   - Bank Transfer - BJB
   - Bank Transfer - BSI
 
+- Add payment icons
+
 Improvements:
 - Fix truncate decimal amount on refunding for Credit card
 - Hide/Show the payment setting based on the currency

diff --git a/Xendit/M2Invoice/Helper/Data.php b/Xendit/M2Invoice/Helper/Data.php
@@ -22,6 +22,7 @@
 use Magento\Sales\Model\Service\InvoiceService;
 use Magento\Store\Model\ScopeInterface;
 use Magento\Store\Model\StoreManagerInterface;
+use Magento\Framework\View\Asset\Repository as AssetRepository;
 use Xendit\M2Invoice\Model\Payment\Xendit;
 
 /**
@@ -307,6 +308,11 @@ class Data extends AbstractHelper
      */
     protected $orderNotifier;
 
+    /**
+     * @var AssetRepository
+     */
+    protected $assetRepository;
+
     /**
      * Data constructor.
      * @param Context $context
@@ -323,6 +329,7 @@ class Data extends AbstractHelper
      * @param InvoiceService $invoiceService
      * @param DbTransaction $dbTransaction
      * @param OrderNotifier $orderNotifier
+     * @param AssetRepository $assetRepository
      */
     public function __construct(
         Context $context,
@@ -338,7 +345,8 @@ public function __construct(
         ScopeConfigInterface $scopeConfig,
         InvoiceService $invoiceService,
         DbTransaction $dbTransaction,
-        OrderNotifier $orderNotifier
+        OrderNotifier $orderNotifier,
+        AssetRepository $assetRepository
     ) {
         $this->storeManager = $storeManager;
         $this->xendit = $xendit;
@@ -353,6 +361,7 @@ public function __construct(
         $this->invoiceService = $invoiceService;
         $this->dbTransaction = $dbTransaction;
         $this->orderNotifier = $orderNotifier;
+        $this->assetRepository = $assetRepository;
 
         parent::__construct($context);
     }
@@ -1799,6 +1808,50 @@ public function getPaymentMaxOrderAmount($code)
         return $this->scopeConfig->getValue("payment/$code/max_order_total", ScopeInterface::SCOPE_STORE);
     }
 
+    /**
+     * Get payment image
+     *
+     * @param string $code
+     * @return false|string|void
+     */
+    public function getPaymentImage(string $code)
+    {
+        try{
+            $paymentIcon = $this->assetRepository->createAsset('Xendit_M2Invoice::images/methods/' . $code . '.svg');
+            if($paymentIcon && $paymentIcon->getSourceFile()){
+                return $paymentIcon->geturl();
+            }
+        }catch(\Exception $e){
+            return false;
+        }
+    }
+
+    /**
+     * Get Credit & debit images
+     *
+     * @param string $code
+     * @return array|false[]|string[]|void|void[]
+     */
+    public function getCreditCardImages(string $code)
+    {
+        $cardImages = $this->scopeConfig->getValue("payment/$code/images", ScopeInterface::SCOPE_STORE);
+        if(!empty($cardImages)){
+            return array_filter(
+                array_map(function($cardImage){
+                    try {
+                        $cardIcon = $this->assetRepository->createAsset('Xendit_M2Invoice::images/methods/cards/' . $cardImage . '.svg');
+                        if ($cardIcon && $cardIcon->getSourceFile()) {
+                            return $cardIcon->geturl();
+                        }
+                    }catch(\Exception $e){
+                        return false;
+                    }
+                }, explode(",", $cardImages) ?? []) , function($item){
+                    return !!$item;
+            });
+        }
+    }
+
     /**
      * @param string $payment
      * @param string $currency

diff --git a/Xendit/M2Invoice/Model/Adminhtml/Source/CardImages.php b/Xendit/M2Invoice/Model/Adminhtml/Source/CardImages.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Xendit\M2Invoice\Model\Adminhtml\Source;
+
+use Magento\Framework\Option\ArrayInterface;
+
+/**
+ * Class CardImages
+ * @package Xendit\M2Invoice\Model\Adminhtml\Source
+ */
+class CardImages implements ArrayInterface
+{
+    /**
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        return [
+            ['value' => 'VI', 'label' => __('Visa')],
+            ['value' => 'MC', 'label' => __('Mastercard')],
+            ['value' => 'AE', 'label' => __('AMEX')],
+            ['value' => 'JCB', 'label' => __('JCB')],
+        ];
+    }
+}
diff --git a/Xendit/M2Invoice/Model/Ui/ConfigProvider.php b/Xendit/M2Invoice/Model/Ui/ConfigProvider.php
diff --git a/Xendit/M2Invoice/etc/adminhtml/credit_card/cc.xml b/Xendit/M2Invoice/etc/adminhtml/credit_card/cc.xml
@@ -25,5 +25,11 @@
             <frontend_class>validate-zero-or-greater</frontend_class>
             <config_path>payment/cc/max_order_total</config_path>
         </field>
+        <field id="images" translate="label" type="multiselect" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+            <label>Images</label>
+            <source_model>Xendit\M2Invoice\Model\Adminhtml\Source\CardImages</source_model>
+            <config_path>payment/cc/images</config_path>
+            <can_be_empty>0</can_be_empty>
+        </field>
     </group>
 </include>
diff --git a/Xendit/M2Invoice/etc/adminhtml/credit_card/cc_subscription.xml b/Xendit/M2Invoice/etc/adminhtml/credit_card/cc_subscription.xml
@@ -40,5 +40,11 @@
             </comment>
             <config_path>payment/cc_subscription/interval_count</config_path>
         </field>
+        <field id="images" translate="label" type="multiselect" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+            <label>Images</label>
+            <source_model>Xendit\M2Invoice\Model\Adminhtml\Source\CardImages</source_model>
+            <config_path>payment/cc_subscription/images</config_path>
+            <can_be_empty>0</can_be_empty>
+        </field>
     </group>
 </include>
diff --git a/Xendit/M2Invoice/etc/adminhtml/system.xml b/Xendit/M2Invoice/etc/adminhtml/system.xml
@@ -85,7 +85,7 @@
                             });
 
                             dynamicShow();
-                            shouldEnableSpecificMethod();
+<!--                            shouldEnableSpecificMethod();-->
                             specificSelection.prop('size', 6);
 
                             var externalIdPrefix = jQuery("input[id*='xendit_external_id_prefix']");

diff --git a/Xendit/M2Invoice/etc/config.xml b/Xendit/M2Invoice/etc/config.xml
@@ -142,7 +142,7 @@
                 <min_order_total>1</min_order_total>
                 <max_order_total>50000000000</max_order_total>
                 <order_status>pending_payment</order_status><!-- set default order -->
-                <cctypes>VI,MC,AE,JCB</cctypes>
+                <images>VI,MC,AE,JCB</images>
                 <sort_order>9</sort_order>
             </cc>
             <cc_subscription>
@@ -156,7 +156,7 @@
                 <interval>MONTH</interval>
                 <interval_count>1</interval_count>
                 <order_status>pending_payment</order_status><!-- set default order -->
-                <cctypes>VI,MC,AE,JCB</cctypes>
+                <images>VI,MC,AE,JCB</images>
                 <sort_order>10</sort_order>
             </cc_subscription>
             <dana>

diff --git a/Xendit/M2Invoice/view/frontend/layout/multishipping_checkout_billing.xml b/Xendit/M2Invoice/view/frontend/layout/multishipping_checkout_billing.xml
@@ -1,6 +1,9 @@
 <?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Xendit_M2Invoice::css/xendit.css" />
+    </head>
     <body>
         <referenceBlock name="checkout_billing">
             <arguments>

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/alfamart.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/alfamart.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/bcava.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/bcava.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend("<img class='xendit-payment-icon' src="+window.checkoutConfig.payment[paymentMethodData.method].image+">");
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/billease.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/billease.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/bjbva.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/bjbva.phtml
@@ -18,10 +18,16 @@
                     component: 'Xendit_M2Invoice/js/view/payment/method-renderer/multishipping/bjbva',
                     name: 'payment_method_bjbva',
                     method: paymentMethodData.method,
-                    item: paymentMethodData
+                    item: paymentMethodData,
+                    image:  paymentMethodData.method.image,
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/bniva.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/bniva.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/briva.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/briva.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/bsiva.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/bsiva.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/cc.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/cc.phtml
@@ -22,6 +22,13 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image.length > 0) {
+                $(window.checkoutConfig.payment[paymentMethodData.method].image.reverse()).each(function(key, value){
+                    $("label[for=p_method_"+paymentMethodData.method+"]")
+                        .prepend('<img class="xendit-payment-icon" src="'+value+'">');
+                });
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/cc_subscription.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/cc_subscription.phtml
@@ -22,8 +22,15 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image.length > 0) {
+                $(window.checkoutConfig.payment[paymentMethodData.method].image.reverse()).each(function(key, value){
+                    $("label[for=p_method_"+paymentMethodData.method+"]")
+                        .prepend('<img class="xendit-payment-icon" src="'+value+'">');
+                });
+            }
+
             $('body').trigger('contentUpdated');
         })
     })
 </script>
-<!-- ko template: getTemplate() --><!-- /ko -->
+<!-- ko template: getTemplate() --><!-- /ko -->
diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/cebuana.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/cebuana.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/dana.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/dana.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/dd_bpi.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/dd_bpi.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/dd_bri.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/dd_bri.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/dd_ubp.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/dd_ubp.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/dp_ecpay_loan.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/dp_ecpay_loan.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })

diff --git a/Xendit/M2Invoice/view/frontend/templates/multishipping/dp_mlhuillier.phtml b/Xendit/M2Invoice/view/frontend/templates/multishipping/dp_mlhuillier.phtml
@@ -22,6 +22,11 @@
                 }
             ]);
 
+            if(window.checkoutConfig.payment[paymentMethodData.method].image != ""){
+                $("label[for=p_method_"+paymentMethodData.method+"]")
+                    .prepend('<img class="xendit-payment-icon" src="'+window.checkoutConfig.payment[paymentMethodData.method].image+'" />');
+            }
+
             $('body').trigger('contentUpdated');
         })
     })