Add WLB installment banks in providers in omise-offsite-installment-m…

…ethod.js. Removed unnecesssary files from offsite-installment-form.html. Updated Model/Config/Installment.php. Few other minor improvements.
omise · Sep 13, 2024 · 2d062ea · 2d062ea
1 parent 128bfab
commit 2d062ea
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 84 deletions.
diff --git a/Helper/OmiseHelper.php b/Helper/OmiseHelper.php
@@ -151,7 +151,18 @@ class OmiseHelper extends AbstractHelper
         Installment::UOB_ID => Installment::CODE,
         Installment::MBB_ID => Installment::CODE,
 
-        // offsite installment banking payment
+        // offsite wlb installment banking payment
+        Installment::WLB_BAY_ID => Installment::CODE,
+        Installment::WLB_BBL_ID => Installment::CODE,
+        Installment::WLB_UOB_ID => Installment::CODE,
+        Installment::WLB_FIRST_CHOICE_ID => Installment::CODE,
+        Installment::WLB_KBANK_ID => Installment::CODE,
+        Installment::WLB_KTC_ID => Installment::CODE,
+        Installment::WLB_SCB_ID => Installment::CODE,
+        Installment::WLB_TTB_ID => Installment::CODE,
+        Installment::WLB_UOB_ID => Installment::CODE,
+
+        // offsite mobile banking payment
         Mobilebanking::BAY_ID => Mobilebanking::CODE,
         Mobilebanking::BBL_ID => Mobilebanking::CODE,
         Mobilebanking::KBANK_ID => Mobilebanking::CODE,

diff --git a/Model/Api/Capabilities.php b/Model/Api/Capabilities.php
@@ -99,6 +99,6 @@ public function getTokenizationMethods()
      */
     public function getInstallmentMinLimit()
     {
-        return $this->capabilities['limits']['installment_amount']['min'];
+        return $this->capabilities ? $this->capabilities['limits']['installment_amount']['min'] : 0;
     }
 }
diff --git a/Model/Config/Installment.php b/Model/Config/Installment.php
@@ -32,4 +32,23 @@ class Installment extends Config
     const UOB_ID = "installment_uob";
 
     const MBB_ID = "installment_mbb";
+
+    /**
+     * WLB Installments
+     */
+    const WLB_BAY_ID = "installment_wlb_bay";
+
+    const WLB_BBL_ID = "installment_wlb_bbl";
+
+    const WLB_FIRST_CHOICE_ID = "installment_wlb_first_choice";
+
+    const WLB_KBANK_ID = "installment_wlb_kbank";
+
+    const WLB_KTC_ID = "installment_wlb_ktc";
+
+    const WLB_SCB_ID = "installment_wlb_scb";
+
+    const WLB_TTB_ID = "installment_wlb_ttb";
+
+    const WLB_UOB_ID = "installment_wlb_uob";
 }
diff --git a/Observer/InstallmentDataAssignObserver.php b/Observer/InstallmentDataAssignObserver.php
@@ -1,10 +1,6 @@
 <?php
 namespace Omise\Payment\Observer;
 
-use Magento\Framework\Event\Observer;
-use Magento\Payment\Observer\AbstractDataAssignObserver;
-use Magento\Quote\Api\Data\PaymentInterface;
-
 class InstallmentDataAssignObserver extends OffsiteDataAssignObserver
 {
     /**

diff --git a/view/frontend/web/js/view/payment/method-renderer/omise-offsite-installment-method.js b/view/frontend/web/js/view/payment/method-renderer/omise-offsite-installment-method.js
@@ -24,7 +24,6 @@ define(
         selectPaymentMethodAction
     ) {
         'use strict';
-        const CAPTION = $.mage.__('Choose number of monthly payments');
         const providers = [
             {
                 id: "installment_ktc",
@@ -89,7 +88,64 @@ define(
                 logo: 'ttb',
                 active: true
             },
-        ]
+
+            {
+                id: "installment_wlb_ktc",
+                title: $.mage.__('Krungthai Card'),
+                code: 'ktc',
+                logo: 'ktc',
+                active: true
+            },
+            {
+                id: "installment_wlb_first_choice",
+                title: $.mage.__('First Choice'),
+                code: 'first_choice',
+                logo: 'fc',
+                active: true
+            },
+            {
+                id: "installment_wlb_kbank",
+                title: $.mage.__('Kasikorn Bank'),
+                code: 'kbank',
+                logo: 'kbank',
+                active: true
+            },
+            {
+                id: "installment_wlb_bbl",
+                title: $.mage.__('Bangkok Bank'),
+                code: 'bbl',
+                logo: 'bbl',
+                active: true
+            },
+            {
+                id: "installment_wlb_bay",
+                title: $.mage.__('Krungsri'),
+                code: 'bay',
+                logo: 'bay',
+                active: true
+            },
+            {
+                id: "installment_wlb_scb",
+                title: $.mage.__('Siam Commercial Bank'),
+                code: 'scb',
+                logo: 'scb',
+                active: true
+            },
+            {
+                id: "installment_wlb_uob",
+                title: $.mage.__('United Overseas Bank'),
+                code: 'uob',
+                logo: 'uob',
+                active: true
+            },
+            {
+                id: "installment_wlb_ttb",
+                title: $.mage.__('TMBThanachart Bank'),
+                code: 'ttb',
+                logo: 'ttb',
+                active: true
+            },
+        ];
 
         function convertToCents(dollarAmount) {
             return Math.round(parseFloat(dollarAmount) * 100);
@@ -165,22 +221,13 @@ define(
             },
 
             applyOmiseJsToElement: function (self, element) {
-                const iframeHeightMatching = {
-                    '40px': 258,
-                    '44px': 270,
-                    '48px': 282,
-                    '52px': 295,
-                }
-
                 const localeMatching = {
                     en_US: 'en',
                     ja_JP: 'ja',
                     th_TH: 'th'
                 }
 
-                const { theme, locale, formDesign } = window.checkoutConfig.payment.omise_cc
-                const { font, input, checkbox } = formDesign
-                let iframeElementHeight = iframeHeightMatching[input.height]
+                const { locale } = window.checkoutConfig.payment.omise_cc
                 element.style.height = 500 + 'px';
 
                 OmiseCard.configure({
@@ -294,15 +341,6 @@ define(
                 return $.mage.__('Minimum order value is %amount').replace('%amount', this.getFormattedAmount(this.getInstallmentMinLimit()));
             },
 
-            /**
-             * Get formatted message about installment caption
-             *
-             * @return {string}
-             */
-            getCaptionText: function () {
-                return CAPTION
-            },
-
             /**
              * Get Installment minimum
              * this function respects info from: https://www.omise.co/installment-payment

diff --git a/view/frontend/web/template/payment/offsite-installment-form.html b/view/frontend/web/template/payment/offsite-installment-form.html
@@ -1,13 +1,13 @@
 <div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}, visible: isActive()">
     <div class="payment-method-title field choice">
         <input type="radio" name="payment[method]" class="radio" data-bind="attr: {
-               'id': getCode()
-               },
-               value: getCode(),
-               checked: isChecked,
-               click: selectPaymentMethod,
-               visible: isRadioButtonVisible(),
-               enable: isActive() && !orderValueTooLow()" />
+            'id': getCode()
+            },
+            value: getCode(),
+            checked: isChecked,
+            click: selectPaymentMethod,
+            visible: isRadioButtonVisible(),
+            enable: isActive() && !orderValueTooLow()" />
         <label data-bind="attr: {'for': getCode()}" class="label">
             <span data-bind="text: getTitle()"></span>
         </label>
@@ -49,50 +49,6 @@
         <!-- /ko -->
 
         <!-- ko if: providers().length -->
-        <!-- <div class="omise-banking-fee-warn" data-bind="i18n: 'Choose your installment terms'"></div>
-        <form class="form" data-bind="attr: {
-              id: getCode() + 'Form',
-              }">
-
-            <fieldset data-bind="attr: {class: 'fieldset payment items ' + getCode(), id: 'payment_form_' + getCode()}">
-                <ul class="form-list" data-bind="foreach: providers">
-                    <li class="items" data-bind="visible: active">
-                        <input type="radio" name="offsite" data-bind=" 
-                                        attr: { 
-                                            id: $parent.getCode() + '_' + code 
-                                            , value: id 
-                                        },
-                                        checked: $parent.omiseOffsite,
-                                        click: function(data, event) { 
-                                            $parent.resetTerms();
-                                            return true;
-                                        };" />
-                        <label data-bind="
-                                attr:{
-                                    'for': 'omise_offsite_installment_'+logo
-                                }">
-                            <div class="omise-logo-wrapper" data-bind="css: logo">
-                                <img data-bind="css: logo" />
-                            </div>
-                            <div class="omise-banking-text-wrapper">
-                                <span class="title" data-bind="i18n: title"></span>
-                            </div>
-                        </label>
-                        <select style="margin-top:10px" data-bind="options: $parent.getInstallmentTerms(code),
-                                                      optionsText: function (item) {
-                                                          return item.label
-                                                      },
-                                                      optionsValue: function (item) {
-                                                        return item.key
-                                                      },
-                                                      valueAllowUnset:true,
-                                                      value: $parent.getObservableTerm(id),
-                                                      visible: $parent.omiseOffsite() === id,
-                                                      optionsCaption: $parent.getCaptionText()"></select>
-                    </li>
-                </ul>
-            </fieldset>
-        </form> -->
         <input type="hidden"
                    name="payment[omise_token]"
                    data-bind="attr: {
@@ -101,12 +57,13 @@
                    },
                    value: omiseInstallmentToken"/>
         <input type="hidden"
-                   name="payment[omise_source]"
-                   data-bind="attr: {
-                   'id': getCode() + 'InstallmentSource',
-                   'data-container': getCode() + '-cc-source',
-                   },
-                   value: omiseInstallmentSource"/>
+            name="payment[omise_source]"
+            data-bind="attr: {
+            'id': getCode() + 'InstallmentSource',
+            'data-container': getCode() + '-cc-source',
+            },
+            value: omiseInstallmentSource"
+        />
         <div class="omise-installment-form" data-bind="omiseInstallmentForm: true"></div>
         <div class="checkout-agreements-block">
             <!-- ko foreach: $parent.getRegion('before-place-order') -->