Support Google fonts other than Poppins

assets/javascripts/card-form-customization.js

@@ -58,6 +58,28 @@ function getDesignFormValues() {
   return formValues;
 }
 
+function handleFontChange() {
+  const fontName = document.getElementById('omise_sf_font_name');
+
+  if (fontName.value === OMISE_CUSTOM_FONT_OTHER) {
+    document.getElementById('omise_sf_custom_font_name').style.display = null
+  }
+
+  fontName.addEventListener('change', (event) => {
+    const customFontName = document.getElementById('omise_sf_custom_font_name');
+    const inputCustomFont = customFontName.querySelector('input')
+
+    if (event.target.value === OMISE_CUSTOM_FONT_OTHER) {
+      customFontName.style.display = null;
+      inputCustomFont.required = true;
+    } else {
+      customFontName.style.display = 'none';
+      inputCustomFont.value = '';
+      inputCustomFont.required = false;
+    }
+  });
+}
+
 function initOmiseCardForm() {
   const customCardFormTheme = CARD_FORM_THEME ?? 'light';
   document.querySelector('.omise-modal .content').style.background =
@@ -91,3 +113,4 @@ document.getElementById('omise-modal').addEventListener('click', (event) => {
 
 setDesignFormValues();
 handleColorInputChanges();
+handleFontChange();

assets/javascripts/omise-embedded-card.js

@@ -25,6 +25,14 @@ function showOmiseEmbeddedCardForm({
   }
   element.style.height = iframeElementHeight + 'px'
 
+  let fontName = font.name
+  const isCustomFontSet = font.name.toLowerCase().trim() === OMISE_CUSTOM_FONT_OTHER.toLowerCase()
+  const isCustomFontEmpty = font.custom_name.trim() === ''
+
+  if (isCustomFontSet && !isCustomFontEmpty) {
+    fontName = font.custom_name.trim()
+  }
+
   OmiseCard.configure({
     publicKey: publicKey,
     element,
@@ -34,7 +42,7 @@ function showOmiseEmbeddedCardForm({
     customCardFormHideRememberCard: hideRememberCard ?? false,
     customCardFormBrandIcons: brandIcons ?? null,
     style: {
-      fontFamily: font.name,
+      fontFamily: fontName,
       fontSize: font.size,
       input: {
         height: input.height,

composer.json

@@ -5,7 +5,8 @@
     "license": "MIT",
     "require-dev": {
         "phpunit/phpunit": "^5.7 || ^9.5",
-        "mockery/mockery": "^1.6"
+        "mockery/mockery": "^1.6",
+        "brain/monkey": "^2.6"
     },
     "scripts": {
         "test": "vendor/bin/phpunit --testdox --colors"

includes/admin/class-omise-page-card-form-customization.php

@@ -27,6 +27,7 @@ private function get_light_theme()
 			'font' => [
 				'name' => 'Poppins',
 				'size' => 16,
+				'custom_name' => ''
 			],
 			'input' => [
 				'height' => '44px',
@@ -51,6 +52,7 @@ private function get_dark_theme()
 			'font' => [
 				'name' => 'Poppins',
 				'size' => 16,
+				'custom_name' => ''
 			],
 			'input' => [
 				'height' => '44px',
@@ -110,6 +112,7 @@ protected function save($data)
 				$options[$componentKey][$key] = sanitize_text_field($data[$componentKey][$key]);
 			}
 		}
+
 		update_option(self::PAGE_NAME, $options);
 		$this->add_message('message', "Update has been saved!");
 	}

includes/admin/views/omise-page-card-form-customization.php

@@ -4,6 +4,7 @@
   $cardFormTheme = $omiseCardGateway->get_option('card_form_theme');
   $cardIcons = $omiseCardGateway->get_card_icons();
   $publicKey = Omise()->settings()->public_key();
+  $customFontOther = 'Other';
 ?>
 
 <link rel="stylesheet" href="<?php echo $assetUrl . '/css/card-form-customization.css'; ?>">
@@ -24,11 +25,18 @@
       <tr>
         <td class="text-bold" style="width: 250px;">Font Name</td>
         <td>
-          <select class="select-input" name="font[name]">
+          <select id="omise_sf_font_name" class="select-input" name="font[name]">
             <option value="Poppins">Poppins</option>
-            <option value="Circular" selected>Circular</option>
+            <option value="<?php echo $customFontOther ?>"><?php echo $customFontOther ?></option>
           </select>
-          <div class="description">Match font used in form with your selected font</div>
+        </td>
+      </tr>
+
+      <tr id="omise_sf_custom_font_name" style="display: none;">
+        <td class="text-bold" style="width: 250px;"></td>
+        <td>
+          <input type="text" class="select-input" placeholder="Font Name" name="font[custom_name]" />
+          <div class="description">Specify other font name (note: only Google Fonts supported)</div>
         </td>
       </tr>
 
@@ -189,6 +197,7 @@
   window.DEFAULT_FORM_DESIGN = JSON.parse(`<?php echo json_encode($formDesign) ?>`);
   window.CARD_BRAND_ICONS = JSON.parse(`<?php echo json_encode($cardIcons) ?>`);
   window.LOCALE = `<?php echo get_locale(); ?>`;
+  window.OMISE_CUSTOM_FONT_OTHER = `<?php echo $customFontOther ?>`;
 </script>
 <script src="<?php echo $assetUrl . '/javascripts/omise-embedded-card.js'; ?>"></script>
 <script src="<?php echo $assetUrl . '/javascripts/card-form-customization.js'; ?>"></script>

includes/admin/views/omise-page-settings.php

@@ -139,7 +139,7 @@
 								<?php
 									echo sprintf(
 										wp_kses(
-											__( 'Unless dynamic webhooks are enabled, you must add the URL below as a new endpoint on your <a href="%s">Opn Payments dashboard</a> (HTTPS only).', 'omise' ),
+											__( 'Unless dynamic webhooks are enabled, you must add the URL above as a new endpoint on your <a href="%s">Opn Payments dashboard</a> (HTTPS only).', 'omise' ),
 											[
 												'a' => ['href' => []],
 											],

includes/gateway/class-omise-payment-creditcard.php

@@ -15,7 +15,7 @@ public function __construct()
 		$this->has_fields         = true;
 		$this->method_title       = __( 'Opn Payments Credit / Debit Card', 'omise' );
 		$this->method_description = wp_kses(
-			__( 'Accept payment through <strong>Credit / Debit Card</strong> via Opn Payments payment gateway.', 'omise' ),
+			__( 'Accept payment through <strong>Credit / Debit Card</strong> via Opn Payments.', 'omise' ),
 			array(
 				'strong' => array()
 			)
@@ -148,7 +148,7 @@ function init_form_fields() {
 					'css'         => Omise_Card_Image::get_css(),
 					'default'     => Omise_Card_Image::get_amex_default_display(),
 					'description' => wp_kses(
-						__( 'This only controls the icons displayed on the checkout page.<br />It is not related to card processing on Omise payment gateway.', 'omise' ),
+						__( 'This only controls the icons displayed on the checkout page.<br />It is not related to card processing on Opn Payments.', 'omise' ),
 						array( 'br' => array() )
 					)
 				)

languages/omise-ja.po

@@ -127,7 +127,7 @@ msgid "Opn Payments Credit / Debit Card"
 msgstr "Opn Payments クレジットカード ／ デビットカード"
 
 #: includes/gateway/class-omise-payment-creditcard.php:23
-msgid "Accept payment through <strong>Credit / Debit Card</strong> via Opn Payments payment gateway."
+msgid "Accept payment through <strong>Credit / Debit Card</strong> via Opn Payments."
 msgstr "Opn Payments決済ゲートウェイを経由して<strong>クレジットカード／デビットカード</strong>決済を受け付けます。"
 
 #: includes/gateway/class-omise-payment-creditcard.php:58
@@ -175,7 +175,7 @@ msgid "Supported card icons"
 msgstr "ご利用可能ブランド"
 
 #: includes/gateway/class-omise-payment-creditcard.php:134
-msgid "This only controls the icons displayed on the checkout page.<br />It is not related to card processing on Opn Payments payment gateway."
+msgid "This only controls the icons displayed on the checkout page.<br />It is not related to card processing on Opn Payments."
 msgstr "ご提供可能なカードブランドのアイコンを決済画面に表示できます。<br/>本項目の選択内容は、カード処理システムには影響いたしません。"
 
 #: includes/gateway/class-omise-payment-creditcard.php:191

languages/omise.pot

@@ -126,7 +126,7 @@ msgid "Opn Payments Credit / Debit Card"
 msgstr "Opn Payments クレジットカード ／ デビットカード"
 
 #: includes/gateway/class-omise-payment-creditcard.php:23
-msgid "Accept payment through <strong>Credit / Debit Card</strong> via Opn Payments payment gateway."
+msgid "Accept payment through <strong>Credit / Debit Card</strong> via Opn Payments."
 msgstr "Opn Payments決済ゲートウェイを経由して<strong>クレジットカード／デビットカード</strong>決済を受け付けます。"
 
 #: includes/gateway/class-omise-payment-creditcard.php:58
@@ -174,7 +174,7 @@ msgid "Supported card icons"
 msgstr "ご利用可能ブランド"
 
 #: includes/gateway/class-omise-payment-creditcard.php:134
-msgid "This only controls the icons displayed on the checkout page.<br />It is not related to card processing on Opn Payments payment gateway."
+msgid "This only controls the icons displayed on the checkout page.<br />It is not related to card processing on Opn Payments."
 msgstr "ご提供可能なカードブランドのアイコンを決済画面に表示できます。<br/>本項目の選択内容は、カード処理システムには影響いたしません。"
 
 #: includes/gateway/class-omise-payment-creditcard.php:191

templates/myaccount/my-card.php

@@ -56,5 +56,6 @@ class='button delete_card'
 		window.FORM_DESIGN = JSON.parse(`<?php echo json_encode($viewData['formDesign']) ?>`);
 		window.CARD_BRAND_ICONS = JSON.parse(`<?php echo json_encode($viewData['cardIcons']) ?>`);
 		window.LOCALE = `<?php echo get_locale(); ?>`;
+		window.OMISE_CUSTOM_FONT_OTHER = 'Other';
 	</script>
 <?php endif; ?>

templates/payment/form.php

@@ -60,5 +60,6 @@
 		window.FORM_DESIGN = JSON.parse(`<?php echo json_encode($viewData['form_design']) ?>`);
 		window.LOCALE = `<?php echo get_locale(); ?>`;
 		window.HIDE_REMEMBER_CARD = `<?php echo $hideRememberCard ?>` == 'yes' ? true : false;
+		window.OMISE_CUSTOM_FONT_OTHER = 'Other';
 	</script>
 <?php endif; ?>

tests/unit/includes/admin/class-omise-page-card-form-customization-test.php

@@ -0,0 +1,113 @@
+<?php
+
+use PHPUnit\Framework\TestCase;
+
+/**
+ * @runTestsInSeparateProcesses
+ */
+class Omise_Page_Card_From_Customization_Test extends TestCase
+{
+    public function setUp(): void
+    {
+        // mocking WP built-in functions
+        if (!function_exists('get_option')) {
+            function get_option() {}
+        }
+
+        Mockery::mock('alias:Omise_Admin_Page');
+        require_once __DIR__ . '/../../../../includes/admin/class-omise-page-card-form-customization.php';
+    }
+
+    public function tearDown(): void
+    {
+        Mockery::close();
+    }
+
+    /**
+     * @test
+     */
+    public function testGetLightTheme()
+    {
+        $expected = [
+			'font' => [
+				'name' => 'Poppins',
+				'size' => 16,
+				'custom_name' => ''
+			],
+			'input' => [
+				'height' => '44px',
+				'border_radius' => '4px',
+				'border_color' => '#ced3de',
+				'active_border_color' => '#1451cc',
+				'background_color' => '#ffffff',
+				'label_color' => '#212121',
+				'text_color' => '#212121',
+				'placeholder_color' => '#98a1b2',
+			],
+			'checkbox' => [
+				'text_color' => '#1c2433',
+				'theme_color' => '#1451cc',
+			]
+		];
+
+        $obj = Omise_Page_Card_From_Customization::get_instance();
+
+        // calling private method
+        $themeValues = $this->invokeMethod($obj, 'get_light_theme', []);
+
+        $this->assertEqualsCanonicalizing($expected, $themeValues);
+    }
+
+    /**
+     * @test
+     */
+    public function testGetDarkTheme()
+    {
+        $expected = [
+			'font' => [
+				'name' => 'Poppins',
+				'size' => 16,
+				'custom_name' => ''
+			],
+			'input' => [
+				'height' => '44px',
+				'border_radius' => '4px',
+				'border_color' => '#475266',
+				'active_border_color' => '#475266',
+				'background_color' => '#131926',
+				'label_color' => '#E6EAF2',
+				'text_color' => '#ffffff',
+				'placeholder_color' => '#DBDBDB',
+			],
+			'checkbox' => [
+				'text_color' => '#E6EAF2',
+				'theme_color' => '#1451CC',
+			]
+		];
+
+        $obj = Omise_Page_Card_From_Customization::get_instance();
+
+        // calling private method
+        $themeValues = $this->invokeMethod($obj, 'get_dark_theme', []);
+
+        $this->assertEqualsCanonicalizing($expected, $themeValues);
+    }
+
+    /**
+     * Call protected/private method of a class.
+     *
+     * @param object $object    Instantiated object that we will run method on.
+     * @param string $methodName Method name to call
+     * @param array  $parameters Array of parameters to pass into method.
+     *
+     * @return mixed Method return.
+     */
+    public function invokeMethod($object, $methodName, array $parameters = [])
+    {
+        $reflection = new \ReflectionClass(get_class($object));
+        $method = $reflection->getMethod($methodName);
+        $method->setAccessible(true);
+
+        return $method->invokeArgs($object, $parameters);
+    }
+}

tests/unit/includes/gateway/abstract-omise-payment-base-card-test.php

@@ -42,6 +42,14 @@ public function returnThis()
         };
     }
 
+    /**
+     * close mockery after tests are done
+     */
+    public function tearDown(): void
+    {
+        Mockery::close();
+    }
+
     public function getOrderMock($expectedAmount, $expectedCurrency)
     {
         // Create a mock of the $order object

tests/unit/includes/gateway/abstract-omise-payment-offline-test.php

@@ -8,6 +8,5 @@ public function setUp(): void
     {
         parent::setUp();
         Mockery::mock('alias:Omise_Payment')->makePartial();
-        require_once __DIR__ . '/../../../../includes/gateway/abstract-omise-payment-offline.php';
     }
 }

tests/unit/includes/gateway/bootstrap-test-setup.php

@@ -1,21 +1,28 @@
 <?php
 
 use PHPUnit\Framework\TestCase;
+use Brain;
 
 abstract class Bootstrap_Test_Setup extends TestCase
 {
     public $sourceType;
 
     public function setUp(): void
     {
-        // mocking WP built-in functions
-        if (!function_exists('wp_kses')) {
-            function wp_kses() {}
-        }
+        Brain\Monkey\setUp();
+        Brain\Monkey\Functions\stubs( [
+            'wp_kses' => null,
+			'add_action' => null,
+		] );
+    }
 
-        if (!function_exists('add_action')) {
-            function add_action() {}
-        }
+    /**
+     * close mockery after tests are done
+     */
+    public function tearDown(): void
+    {
+        Brain\Monkey\tearDown();
+        Mockery::close();
     }
 
     public function getOrderMock($expectedAmount, $expectedCurrency)
@@ -52,14 +59,6 @@ public function getOrderMock($expectedAmount, $expectedCurrency)
         return $orderMock;
     }
 
-    /**
-     * close mockery after tests are done
-     */
-    public function tearDown(): void
-    {
-        Mockery::close();
-    }
-
     /**
      * @runInSeparateProcess
      */