US1762599 - [Android] React Native Demo Components Refactor and Props (…

…#87) * US1762588: Add Support for fonts via styling, minor refactorings * US1762588: Revert pod local version * US1762588: rebuild pod files to point to remote AccessCheckoutSDK * US1782181: change app to display error in a div rather as an alert * US1762599: add support for fontSize, placeholderColor & borderColor * US1762599: update textColor support; add support for font; update unit tests * US1762599: run format task * US1762599: update access-checkout-android 3.0.0 to latest jar * US1762599: add customType to AccessCheckoutTextInputManager to allow color to be parsed correctly from demo-app Co-authored-by: abaeza-wp <153538325+abaeza-wp@users.noreply.github.com> Co-authored-by: Olivier Chalet <olivier.chalet@fisglobal.com>
Worldpay · Jan 23, 2024 · 3c5056e · 3c5056e
1 parent 441e163
commit 3c5056e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/...c/main/java/com/worldpay/access/checkout/reactnative/ui/AccessCheckoutTextInputManager.kt b/...c/main/java/com/worldpay/access/checkout/reactnative/ui/AccessCheckoutTextInputManager.kt
@@ -1,7 +1,9 @@
 package com.worldpay.access.checkout.reactnative.ui
 
+import android.graphics.Typeface
 import android.view.Gravity
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewProps
@@ -25,20 +27,34 @@ class AccessCheckoutTextInputManager(private val callerContext: ReactApplication
         // the default paddings gravity and background added by Android
         accessCheckoutEditText.background = null
         accessCheckoutEditText.textSize = 14f
-        accessCheckoutEditText.setPadding(0,0,0,0);
-        accessCheckoutEditText.gravity = Gravity.CENTER;
+        accessCheckoutEditText.setPadding(0, 0, 0, 0)
+        accessCheckoutEditText.gravity = Gravity.CENTER
 
-        return accessCheckoutEditText;
+        return accessCheckoutEditText
     }
 
     /**
      * Properties
      */
-    @ReactProp(name = ViewProps.COLOR)
+    @ReactProp(name = ViewProps.COLOR, customType = "Color")
     fun setRTCTextColor(accessCheckoutEditText: AccessCheckoutEditText, color: Int) {
         accessCheckoutEditText.setTextColor(color)
     }
 
+    @ReactProp(name = "font")
+    fun setRTCFont(accessCheckoutEditText: AccessCheckoutEditText, font: ReadableMap) {
+        if (font.hasKey(ViewProps.FONT_SIZE)) {
+            val fontSize = font.getDouble(ViewProps.FONT_SIZE)
+            accessCheckoutEditText.textSize = fontSize.toFloat()
+        }
+
+        if (font.hasKey(ViewProps.FONT_FAMILY)) {
+            val fontSize = font.getString(ViewProps.FONT_FAMILY)
+            val typeface = Typeface.create(fontSize, Typeface.NORMAL)
+            accessCheckoutEditText.typeface = typeface
+        }
+    }
+
     @ReactProp(name = "placeholder")
     fun setRTCPlaceholder(accessCheckoutEditText: AccessCheckoutEditText, placeholder: String) {
         accessCheckoutEditText.setHint(placeholder)

diff --git a/...st/java/com/worldpay/access/checkout/reactnative/ui/AccessCheckoutTextInputManagerTest.kt b/...st/java/com/worldpay/access/checkout/reactnative/ui/AccessCheckoutTextInputManagerTest.kt
@@ -2,8 +2,9 @@ package com.worldpay.access.checkout.reactnative.ui
 
 import android.content.Context
 import android.graphics.Color
+import android.graphics.Typeface
 import androidx.test.core.app.ApplicationProvider
-import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.*
 import com.worldpay.access.checkout.ui.AccessCheckoutEditText
 import org.assertj.core.api.AssertionsForClassTypes.assertThat
 import org.junit.Test
@@ -45,6 +46,19 @@ internal class AccessCheckoutTextInputManagerTest {
         verify(accessCheckoutEditTextMock).isEnabled = true
     }
 
+    @Test
+    fun `setRTCFont() should call textSize and typeface on AccessEditText`() {
+        val fontMap = JavaOnlyMap()
+        fontMap.putDouble("fontSize", 12.1)
+        fontMap.putString("fontFamily", "sans-serif")
+
+        val typeface = Typeface.create("sans-serif", Typeface.NORMAL)
+
+        manager.setRTCFont(accessCheckoutEditTextMock, fontMap)
+
+        verify(accessCheckoutEditTextMock).textSize = 12.1F
+        verify(accessCheckoutEditTextMock).typeface = typeface
+    }
 
     private fun reactApplicationContext(): ReactApplicationContext {
         val applicationContext: Context = ApplicationProvider.getApplicationContext()

diff --git a/demo-app/e2e/cardFlow.e2e.js b/demo-app/e2e/cardFlow.e2e.js
@@ -1,9 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { device, expect } = require('detox');
 const { expect: jestExpect } = require('expect');
-const {
-  sessionRegEx,
-} = require('./helpers/RegularExpressions');
+const { sessionRegEx } = require('./helpers/RegularExpressions');
 const { CardFlowPO } = require('./page-objects/CardFlowPO');
 const { CardFlowStatesPO } = require('./page-objects/CardFlowStatesPO');
 /* eslint-enable @typescript-eslint/no-var-requires */