Merge pull request #2 from BrightwellPayments/react-native

Styles
BrightwellPayments · Nov 30, 2022 · 1cf11d5 · 1cf11d5
2 parents 68cac16 + 3dac5e3
commit 1cf11d5
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 4 deletions.
diff --git a/samples/react-native/App.js b/samples/react-native/App.js
@@ -12,6 +12,27 @@ const App = () => {
   const styles = {
     fonts: {
       default: { family: 'luminari' }
+    },
+    colors: {
+      primaryShade1: { lightHex: "#FF9800" }, //input line, clickable text, primary button
+      primaryShade2: { lightHex: "#B16B04" }, //Primary button hover
+      secondaryShade1: { lightHex: "#3E3E3E" }, //Secondary button hover
+      secondaryShade2: { lightHex: "#B7B7B8" }, //Primary button disabled
+      secondaryShade3: { lightHex: "#232323" }, //Secondary button border
+      textPrimaryShade1: { lightHex: "#3D4045" }, //Common text
+      textPrimaryShade2: { lightHex: "#55575A" }, //Placeholders
+      textPrimaryShade3: { lightHex: "#47494A" }, //List items, value texts
+      textPrimaryShade4: { lightHex: "#000000" }, //Titles, secondary button text color
+      textPrimaryShade5: { lightHex: "#000000" }, //Primary button text color
+      backgroundColorPrimary: { lightHex: "#F3F0EF" }, //Window color
+      backgroundColorSecondary: { lightHex: "#FFFFFF" }, //Toolbar, cards and bottomsheet
+      backgroundColorTertiary: { lightHex: "#FFF3E0" }, //Search bar background
+      success: { lightHex: "#19AA81" }, //Success messages, success validations, success field values
+      error: { lightHex: "#D53F3F" }, //Error messages, error lines, error fields
+      controlShade1: { lightHex: "#898A8C" }, //Disabled inputs
+      controlShade2: { lightHex: "#DDDDDD" }, //Enabled inputs, search icon color
+      controlAccessoryShade1: { lightHex: "#9CA3AF" }, //Clear input button icon color
+      controlAccessoryShade2: { lightHex: "#1F2937" } //Close button icon color
     }
   }
 
@@ -26,6 +47,16 @@ const App = () => {
     }
   }, []);
 
+  useEffect(() => {
+    eventEmitter.addListener("SDK_CLOSED", () => {
+      console.log("SDK CLOSED");
+    })
+
+    return function cleanup () {
+      eventEmitter.removeAllListeners("SDK_CLOSED");
+    }
+  }, []);
+
   useEffect(() => {
     eventEmitter.addListener("READYREMIT_TRANSFER_SUBMITTED", (request) => {
       // TODO: Fetch a transferId from your server
@@ -44,4 +75,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;
diff --git a/...eact-native/android/app/src/main/java/com/readyremitreactnativesample/ReadyRemitModule.kt b/...eact-native/android/app/src/main/java/com/readyremitreactnativesample/ReadyRemitModule.kt
@@ -13,6 +13,7 @@ class ReadyRemitModule(reactContext: ReactApplicationContext) : ReactContextBase
     private val REQUEST_CODE = 10
     private val READYREMIT_AUTH_TOKEN_REQUESTED = "READYREMIT_AUTH_TOKEN_REQUESTED"
     private val READYREMIT_TRANSFER_SUBMITTED = "READYREMIT_TRANSFER_SUBMITTED"
+    private val READYREMIT_SDK_CLOSED = "READYREMIT_SDK_CLOSED"
     private lateinit var _onAuthCallback: ReadyRemitAuthCallback
     private lateinit var _onTransferCallback: ReadyRemitTransferCallback
     private var waitForTransfer : Job? = null
@@ -28,12 +29,22 @@ class ReadyRemitModule(reactContext: ReactApplicationContext) : ReactContextBase
                 .useEnvironment(if(environment == "PRODUCTION") Environment.PRODUCTION else Environment.SANDBOX)
                 .useAuthProvider { callback -> requestReadyRemitAccessToken(callback) }
                 .useTransferSubmitProvider  { request, callback -> submitReadyRemitTransfer(request, callback) }
-                .useDefaultTheme(R.style.Base_Theme_ReadyRemit_Light)
+                .useDefaultTheme(R.style.Theme_Custom)
                 .useLanguage(language)
                 .build()
         )
 
-        ReadyRemit.remitFrom(currentActivity!!, REQUEST_CODE, R.style.Base_Theme_ReadyRemit_Light, language)
+        ReadyRemit.remitFrom(currentActivity!!, REQUEST_CODE, R.style.Theme_Custom, language)
+
+        ReadyRemit.setEventListener { event ->
+            when (event) {
+                SDKClosed -> {
+                    reactApplicationContext
+                        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+                        .emit(READYREMIT_SDK_CLOSED, null)
+                }
+            }
+        }
     }
 
     @ReactMethod

diff --git a/samples/react-native/android/app/src/main/res/values/theme.custom.xml b/samples/react-native/android/app/src/main/res/values/theme.custom.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Theme.Custom" parent="Theme.ReadyRemit.Light">
+        <item name="rrmColorPrimaryShade1">#FF9800</item> //input line, clickable text
+        <item name="rrmColorPrimaryShade2">#B16B04</item> //Primary button hover
+        <item name="rrmColorPrimaryShade3">#F6AD42</item> //Primary button rippler
+
+        <item name="rrmButtonPrimary">#FF9800</item> //Primary button enabled
+
+        <item name="rrmColorSecondaryShade1">#3E3E3E</item> //Secondary button hover
+        <item name="rrmColorSecondaryShade2">#B7B7B8</item> //Primary button disabled
+        <item name="rrmColorSecondaryShade3">#232323</item> //Secondary button border
+
+        <item name="rrmErrorColor">#D53F3F</item> //Error messages, error lines, error fields
+        <item name="rrmSuccessColor">#19AA81</item> //Success messages, success validations, success field values
+
+        <item name="rrmBackgroundColorPrimary">#F3F0EF</item> //Window color
+        <item name="rrmBackgroundColorSecondary">#FFF3E0</item> //Toolbar, cards and bottomsheet
+
+        <item name="rrmTextColorPrimaryShade1">#3D4045</item> //Common text
+        <item name="rrmTextColorPrimaryShade2">#55575A</item> //Placeholders
+        <item name="rrmTextColorPrimaryShade3">#47494A</item> //List items, value texts
+        <item name="rrmTextColorPrimaryShade4">#000000</item> //Titles, secondary button text color
+        <item name="rrmTextColorPrimaryShade5">#000000</item> //Primary button text color
+
+        <item name="rrmControlColorShade1">#898A8C</item> //Disabled inputs
+        <item name="rrmControlColorShade2">#DDDDDD</item> //Enabled inputs, search icon color
+
+        <item name="rrmAccessoryColorShade1">#9CA3AF</item> //Clear input button icon color
+        <item name="rrmAccessoryColorShade2">#1F2937</item> //Close button icon color
+    </style>
+</resources>
diff --git a/samples/react-native/ios/RCTReadyRemitModule.m b/samples/react-native/ios/RCTReadyRemitModule.m
@@ -14,7 +14,7 @@ @implementation RCTReadyRemitModule
 
 - (NSArray<NSString *> *)supportedEvents
 {
-  return @[@"READYREMIT_AUTH_TOKEN_REQUESTED", @"READYREMIT_TRANSFER_SUBMITTED"];
+  return @[@"READYREMIT_AUTH_TOKEN_REQUESTED", @"READYREMIT_TRANSFER_SUBMITTED", @"SDK_CLOSED"];
 }
 
 // Ripped from https://stackoverflow.com/a/12397366
@@ -135,4 +135,8 @@ - (void) onSubmitTransferWithTransferRequest:(TransferRequest *)transferRequest
   [self sendEventWithName:@"READYREMIT_TRANSFER_SUBMITTED" body:[transferRequest toJSON]];
 }
 
+- (void) onSDKClose {
+     [self sendEventWithName:@"SDK_CLOSED" body:@{ }];
+}
+
 @end