smartmessage-react-native 2.11.2

package/readme.md

@@ -0,0 +1,494 @@
+# Smart Message Engage React Native SDK
+> Last Update: `08.05.2025`
+> Last Version: `v2.0.11`
+## Installation
+ npm install react-native-smartmessage
+
+# Android Specific Install
+`{YOUR_PORJECT}/android/app/build.gradle`
+```groovy
+...
+dependencies {
+    ...
+   implementation 'io.github.smartmessagesdk:smartmessage-sdk:<latest-version>'
+}
+...
+```
+
+---
+# 🔥 Firebase Project
+We need `google-services.json` file. 
+###### follow the links
+https://firebase.google.com/docs/android/setup
+https://support.google.com/firebase/answer/7015592
+
+after downloading `google-services.json` file, move to `{YOUR_APP}/android/app/google-services.json`
+
+`{YOUR_PROJECT}/android/build.gradle`
+
+```groovy
+buildscript {
+    ...
+    dependencies {
+        ...
+        classpath 'com.github.kezong:fat-aar:1.3.6' // add this line
+        classpath 'com.google.gms:google-services:4.3.10' // add this line
+    }
+}
+```
+
+`{YOUR_PROJECT}/android/app/build.gradle`
+(add to the bottom line of dependencies definitions)
+```groovy
+...
+apply plugin: 'com.google.gms.google-services' // add this line
+```
+
+---
+# 📝 SmartMessage config file
+you can access this file from SmartMessage panel
+`{YOUR_PROJECT}/android/app/src/main/assets/sme-config.json`
+
+⚠️ The config file should contain  hashed value containing Basic Auth credentials. For Example: 
+```javascript
+{
+    ...
+    "credential": "6d6847e878d7076bd6057b4618eec0c79bfc3c93fa661feb4f63d1413b08a3d50e147384eeff624df7d210db0cb4343db67a6923c980a646c7ecffea6b8736819fe75998f3b080c2ba11ba301ae81457f5dd5844bf9d0ffae50223601d82bcdc",
+    ...
+}
+```
+
+---
+
+# 🤝 SDK Initilization
+Add this line to `onCreate` method of `Application` subclass
+#### Like this
+```java
+...
+import tr.com.odc.smartmessage.SmartMessage; // add this line
+
+public class MainApplication extends Application {
+    @Override
+    public void onCreate() {
+        super.onCreate();
+        SmartMessage.getInstance().init(this); // add this line
+        //..
+    }
+}
+```
+
+# 💂‍♂️ ProGuard Rule
+If you're using `shrinkResources` and `minifyEnabled`, you should add the proguard rule.
+```java
+-keep class tr.com.odc.smartmessage.** { *; }
+```
+
+## 🔔  Notification Icon
+The drawable folders can contain the file `sme_ic_notification.png`
+[Check this doc for more information](http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/#dimensions)
+If this drawable file is missing, the app’s default launcher icon will show.
+
+## 🔔  Notification Sound
+If you want to use a different sound than the default notification sound of the device.
+`{YOUR_PROJECT}/android/app/src/main/res/raw` folder can contain the file `sme_sound.wav` 
+If this sound file is missing, the device's default notification sound will play.
+
+---
+# 🖌  Dialog Designs
+We have provided a flexible design structure for you. You should keep the xml Layout files we shared with you in the relevant place.
+`You can change these designs as you wish but you should not change the classes and ids`
+
+##### `{YOUR_PROJECT}`/android/app/src/main/res/layout
+- sme_0_basic_layout.xml 
+- sme_1_image_layout.xml 
+- sme_2_14_html_dialog_layout.xml
+- sme_3_gif_layout.xml
+- sme_4_video_layout.xml
+- sme_5_audio_layout.xml
+- sme_6_carousel_basic_layout.xml
+- sme_7_carousel_rotary_layout.xml
+- sme_8_carousel_coverflow_layout.xml
+- sme_9_slider_layout.xml
+- sme_10_small_dialog_layout.xml
+- sme_10_small_dialog_button.xml
+- sme_11_medium_dialog_layout.xml
+- sme_12_fullscreen_dialog_layout.xml
+- sme_13_interactive_dialog_layout.xml
+- sme_audio_player.xml
+- sme_common_button.xml
+- sme_common_header.xml
+- sme_common_title_and_message.xml
+- sme_slide_layout.xml
+- sme_audio_player.xml
+
+
+##### `{YOUR_PROJECT}`/android/app/src/main/res/anim
+> It is the enter and exit animations of the dialogs of the SDK opened in the application. It enters from right to left. Exits left to right. You can change it as you wish.
+- sme_enter_anim.xml
+- sme_exit_anim.xml
+ 
+
+##### `{YOUR_PROJECT}`/android/app/src/main/res/drawable
+- sme_ic_play_audio.png
+- sme_ic_stop_audio.png
+- sme_ic_back_arrow.png
+
+
+# Deep Link
+
+```xml
+<activity
+  android:name=".MainActivity"
+  ... 
+  >
+     <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+    </intent-filter>
+    <intent-filter> <!-- add this line -->
+        <action android:name="android.intent.action.VIEW" />  <!-- add this line -->
+        <category android:name="android.intent.category.DEFAULT" /> <!-- add this line -->
+        <category android:name="android.intent.category.BROWSABLE" /> <!-- add this line -->
+        <data android:scheme="YOUR_SCHEME" /> <!-- add this line -->
+    </intent-filter><!-- add this line -->
+</activity>
+```
+
+```javascript
+import { Linking } from 'react-native';
+
+const handleDeeplink = (url) => {
+    if (url === 'YOUR_SCHEME://campaigns') {
+        // ex: navigationRef.current.navigate('Campaigns')
+    }
+}
+
+React.useEffect(() => {
+    // Handle the deeplink that launches the application.
+    Linking.getInitialURL().then((url) => {
+        handleDeeplink(url)
+    }).catch((error) => {
+        // handle error
+    })
+    
+    // Handle the deeplink while the application is running.
+    let unsubscribe = Linking.addEventListener('url', ({ url }) => {
+        handleDeeplink(url)
+    });
+
+    return unsubscribe
+}, [])
+    
+```
+
+
+# 🔎 How do I distinguish it from other SDKs?
+It is important that you inherit from the SMEMessagingService class.
+```java
+public class MyFirebaseService extends SMEMessagingService {
+
+    @Override
+    public void onNewToken(String token) {
+        super.onNewToken(token);
+    }
+
+    @Override
+    public void onMessageReceived(RemoteMessage remoteMessage) {
+        super.onMessageReceived(remoteMessage);
+        // sdk does its own vendor check
+
+        String vendor = remoteMessage.getData().get("vendor");
+        // check vendor field
+        if (!vendor.equals(SmartMessage.VENDOR)) {
+            // your codes
+        }
+    }
+}
+```
+
+
+
+# iOS Specific Install
+---
+> It is very similar to the native iOS SDK document. There are a few minor differences.
+- Open `{PROJECT_PATH}/ios/{PROJECT_NAME}.xcworkspace` folder with Xcode.
+- Create the SmartMessageSdk folder and move the Config.plist file into it.
+- Create an empty swift file to create a Swift bridge in the Objective-C project. After creating the empty swift file, Xcode will ask you if you want to enable bridging. Accept that request.
+![](https://i.hizliresim.com/D8ts2B.png)
+You can edit it from Target > Build Settings> Swift Compiler - General
+![](https://i.hizliresim.com/92ZIVq.png)
+Target > Signing & Capabilities> + Capability
+![](https://i.hizliresim.com/Jx90Q3.png)
+Set app group name in `SmartMessageSdk > Config.plist > appGroupName`
+![](https://i.hizliresim.com/KDIjgo.png)
+
+# Notification Content Extension
+#### `step 1`
+`select Notification Content Extension`
+![](https://i.hizliresim.com/OaZjVZ.png)
+#### `step 2`
+![](https://i.hizliresim.com/cx9SXg.png)
+#### `step 3`
+![](https://i.hizliresim.com/50p4Ck.png)
+#### `step 4`
+#### ⚠️ Create an empty swift file to create a Swift bridge in the Objective-C project. After creating the empty swift file, Xcode will ask you if you want to enable bridging. Accept that request.
+![](https://i.hizliresim.com/dv13jag.png)
+#### `step 5`
+![](https://i.hizliresim.com/3qqg2x.png)
+
+# Notification Service Extension
+#### `step 1`
+`select Notification Service Extension`
+![](https://i.hizliresim.com/OaZjVZ.png)
+#### `step 2`
+![](https://i.hizliresim.com/0EIZM5.png)
+#### `step 3`
+![](https://i.hizliresim.com/cb3L26.png)
+#### `step 4`
+##### ⚠️ Create an empty swift file to create a Swift bridge in the Objective-C project. After creating the empty swift file, Xcode will ask you if you want to enable bridging. Accept that request.
+![](https://i.hizliresim.com/dv13jag.png)
+#### `step 5`
+![](https://i.hizliresim.com/C2fGvj.png)
+
+#### Add search paths to `podfile > target 'TARGET_NAME'` for extensions and run `pod install`
+```ruby
+target 'BaseNotificationExtension' do
+  inherit! :search_paths
+end
+
+target 'BaseServiceExtension' do
+  inherit! :search_paths
+end
+```
+
+### AppDelegate.m
+`didRegisterForRemoteNotificationsWithDeviceToken` will be triggered when you get permission from the user to send push notifications. The SDK will register to the server.
+
+```objc
+// ...
+#import <RNSmartMessage/RNSmartMessage.h>  // add this line
+// ...
+- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
+{
+  [RNSmartMessage initializeSdk:deviceToken];  // add this line
+}
+// ...
+```
+
+### NotificationService.m 
+```objc
+#import <RNSmartMessage/RNSmartMessage.h>  // add this line
+
+self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title]; // remove this line
+
+// add this lines
+[RNSmartMessage configureNotificationService:request
+                contentHandler:self.contentHandler
+                bestAttemptContent:self.bestAttemptContent];
+```
+
+### NotificationViewController.m 
+```objc
+#import <RNSmartMessage/RNSmartMessage.h> // add this line
+
+@property IBOutlet UILabel *label; // remove this line
+
+self.label.text = notification.request.content.body; // remove this line
+
+// add this lines
+[RNSmartMessage handleNotification:self
+                baseView:self.view
+                userInfo:notification.request.content.userInfo
+                isNotificationWillPresent:false];
+```
+
+![](https://i.hizliresim.com/XL9gCH.png)
+
+#### Notification Content Extension > Info.plist
+###### `Replace this part`
+```plist
+<key>NSExtensionAttributes</key>
+<dict>
+	<key>UNNotificationExtensionCategory</key>
+	<string>myNotificationCategory</string>
+	<key>UNNotificationExtensionInitialContentSizeRatio</key>
+	<real>1</real>
+</dict>
+```
+###### `with this part`
+```plist
+<key>NSExtensionAttributes</key>
+<dict>
+	<key>UNNotificationExtensionCategory</key>
+	<string>smBaseNotification</string>
+	<key>UNNotificationExtensionInitialContentSizeRatio</key>
+	<real>1</real>
+	<key>UNNotificationExtensionDefaultContentHidden</key>
+	<true/>
+	<key>UNNotificationExtensionUserInteractionEnabled</key>
+	<true/>
+</dict>
+```
+
+# Deep Link
+Let's configure the native iOS app to open based on the `smerndemo://` URI scheme.
+
+You'll need to link `RCTLinking` to your project by following the steps described here. To be able to listen to incoming app links, you'll need to add the following lines to `APP_NAME/ios/APP_NAME/AppDelegate.m`
+
+```objc
+// Add the header at the top of the file:
+#import <React/RCTLinkingManager.h>
+
+// Add this above `@end`:
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+```
+
+```bash
+npx uri-scheme add smerndemo --ios
+```
+
+```javascript
+import { Linking } from 'react-native';
+
+const handleDeeplink = (url) => {
+    if (url === 'smerndemo://campaigns') {
+        // ex: navigationRef.current.navigate('Campaigns')
+    }
+}
+
+React.useEffect(() => {
+    // Handle the deeplink that launches the application.
+    Linking.getInitialURL().then((url) => {
+        handleDeeplink(url)
+    }).catch((error) => {
+        // handle error
+    })
+    
+    // Handle the deeplink while the application is running.
+    let unsubscribe = Linking.addEventListener('url', ({ url }) => {
+        handleDeeplink(url)
+    });
+
+    return unsubscribe
+}, [])
+    
+```
+
+# Usage in React Native
+---
+```javascript
+import SmartMessage from 'react-native-smartmessage';
+```
+#### User Info
+```js
+// GETTER
+SmartMessage.getUserInfo().then((userInfo: UserInfo) => {
+    // handle userInfo
+    setCurrentUserInfo(userInfo)
+}).catch((error) => {
+    // handle error
+});
+
+SmartMessage.getMemberFields((memberFields: {FIELDNAME:string}[])=>{
+//  returns [
+//      {"FIELDNAME":"YOUR_FIELD_NAME_1"},
+//      {"FIELDNAME":"YOUR_FIELD_NAME_2"},
+//  ]
+});
+
+
+// SETTER
+SmartMessage.setUserInfo({
+    ...userInfo, 
+    name: 'John',
+    surname: 'Doe',
+    email: 'john.doe@example.com',
+    lang: 'tr',
+    gender: '1', // or 0
+    tags: ['tag1', 'tag2', 'tag3'].join(','),
+    rcv_not: true,
+    mobile: '08502213900',
+    birthdate: '04.02.2020',
+    username: 'johndoe',
+    id: 'customer_id_123',
+    memberfields: [
+        { fieldName: 'YOUR_FIELD_NAME_1', fieldValue: 'VALUE_1' },
+        { fieldName: 'YOUR_FIELD_NAME_2', fieldValue: 'VALUE_2' },
+        //...
+    ]
+}).then(() => {
+    // handle success
+}).catch((error) => {
+    // handle error
+});
+        
+```
+
+#### Device Info
+Device information is automatically sent to the server by the SDK.
+```javascript
+// GETTER
+SmartMessage.getDeviceInfo().then((deviceInfo: DeviceInfo) => {
+    // handle deviceInfo
+}).catch((err) => {
+    // handle error
+});
+```
+
+# Login & Logout
+```js
+SmartMessage.reportLoggedIn()
+SmartMessage.reportLoggedOut()
+```
+
+# Analytics
+```js
+SmartMessage.reportAnalytic(KEYWORD)
+```
+
+# Events
+```js
+// MESSAGE_ID can be null
+SmartMessage.reportEvent(MESSAGE_ID, EVENT_TYPE, EVENT_NAME, DATA)
+```
+
+# 📬 Inbox
+```js
+SmartMessage.getMessageList({
+    page_index: 1,
+    page_size: 20,
+    start_date: moment().subtract(1, 'months').format('DD.MM.yyyy HH:mm:ss'),
+    end_date: moment().format('DD.MM.yyyy HH:mm:ss'),
+    expired_push: true,
+    status: ['0', '1', '2'],
+    push_type: ['0', '1'],
+}).then((messageListResponse: MessageListResponse) => {
+    // handle response
+}).catch((error) => {
+    // handle error
+});
+```
+
+If you want to open the notification from the inbox, you can use the `displayMessageContent` method. The SDK will automatically give feedback to server.
+```js
+SmartMessage.displayMessageContent(MessageContent)
+```
+
+---
+
+# ✅ Status Feedback
+DELIVERED(0), VIEW(1), OPEN(2), DELETE(3) status feedback is available.
+
+| Status | Action  | When does it happen? |
+| ------- | --- | ---- |
+| DELIVERED	| SmartMessage.reportMessageDelivered(NOTIFICATION_ID); | When the notification reaches the phone, it is automatically called by the SDK. | 
+| VIEW | SmartMessage.reportMessageView(NOTIFICATION_ID); | When notification is displayed within the application via SDK it is automatically called by the SDK. |
+| OPEN | SmartMessage.reportMessageOpen(NOTIFICATION_ID); | When the notification is clicked from the notification panel it is automatically called by the SDK. |
+| DELETE |	SmartMessage.reportMessageDeleted(NOTIFICATION_ID);  | When it is swiped and deleted from the notification panel it is automatically called by the SDK |
+
+