In App Messaging throws this error #1203

Feature Request: Support In-App Messaging #1112

Author: EddyVerbruggen

demo-vue/app/App_Resources/iOS/build.xcconfig

@@ -1,6 +1,6 @@
 // You can add custom settings here
 // for example you can uncomment the following line to force distribution code signing
-// CODE_SIGN_IDENTITY = iPhone Distribution 
+// CODE_SIGN_IDENTITY = iPhone Distribution
 // To build for device with Xcode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html
 // DEVELOPMENT_TEAM = YOUR_TEAM_ID;
 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;

demo-vue/app/components/App.vue

@@ -6,46 +6,42 @@
       <!--<Button @tap="onTapHasPermission" class="btn" text="Has Permission?"></Button>-->
       <!--<Button @tap="onTapScheduleNotification" class="btn" text="Schedule Notification"></Button>-->
       <!--<Button @tap="onTapCancelAll" class="btn" text="Cancel notifications"></Button>-->
-      <Label class="message" :text="message" textWrap="true"></Label>
-      <MLKitTextRecognition width="260"
+      <Label class="message" :text="message" textWrap="true" horizontalAlignment="center"></Label>
+      <!--MLKitTextRecognition width="260"
                             height="340"
                             processEveryNthFrame="5"
                             @scanResult="onTextRecognitionResult">
-      </MLKitTextRecognition>
+      </MLKitTextRecognition-->
 
     </StackLayout>
   </Page>
 </template>
 
 <script>
   const firebase = require("nativescript-plugin-firebase");
-
-  firebase.init({
-    onDynamicLinkCallback: function (result) {
-      console.log("Dynamic Link received: " + result);
-      console.log("Dynamic Link received, url: " + result.url);
-      if (result.url.indexOf("/campaigns/shit") > -1) {
-        // note that you could deeplink/route the user now, but let's just show an alert
-        alert({
-          title: "Campaign button tapped!",
-          message: "You tapped the button in the 'Firebase is the 💩' campaign - well don!",
-          okButtonText: "Yep!"
-        })
-      }
-    }
-  }).then(function () {
-    console.log("Firebase initialized");
-  }).catch(function (error) {
-    console.log("Error initializing Firebase: " + error);
-  });
+  import { inappmessaging } from "nativescript-plugin-firebase/inappmessaging";
 
   export default {
     data() {
       return {
-        message: "Tap a button above.."
+        message: "Fear not, young Skywalker"
       }
     },
 
+    created() {
+      // wire up an 'onMessageClicked' callback
+      inappmessaging.onMessageClicked(message => {
+        console.log(">> inappmessaging onMessageClicked, campaign: " + message.campaignName);
+        this.message = `Campaign ${message.campaignName} clicked`;
+      });
+
+      // 👉 .. and for fun, wire an 'onMessageImpression' callback so when know when the message is shown
+      inappmessaging.onMessageImpression(message => {
+        console.log(">> inappmessaging onMessageImpression, campaign: " + message.campaignName);
+        this.message = `Campaign ${message.campaignName} seen`;
+      });
+    },
+
     methods: {
       onTextRecognitionResult() {
         console.log("onTextRecognitionResult");
@@ -124,8 +120,8 @@
   }
 
   .message {
-    font-size: 14;
-    margin: 16;
+    font-size: 17;
+    margin: 17;
     color: #53ba82;
   }
 

demo-vue/app/main.js

@@ -1,12 +1,25 @@
 import Vue from "nativescript-vue";
 import App from "./components/App";
 
-require("nativescript-plugin-firebase");
+const firebase = require("nativescript-plugin-firebase");
 Vue.registerElement("MLKitTextRecognition", () => require("nativescript-plugin-firebase/mlkit/textrecognition").MLKitTextRecognition);
 
 // Prints Vue logs when --env.production is *NOT* set while building
 Vue.config.silent = (TNS_ENV === "production");
 
+firebase.init({
+  // can be used to catch in-app-messaging dynamic links, but it's not mandatory
+  onDynamicLinkCallback: result => {
+    console.log("Dynamic Link received: " + result);
+    console.log("Dynamic Link received, url: " + result.url);
+    if (result.url.indexOf("/shit") > -1) {
+      // note that you could deeplink/route the user now, but let's just show an alert
+    }
+  }
+})
+    .then(() => console.log("Firebase initialized"))
+    .catch(error => console.log("Error initializing Firebase: " + error));
+
 new Vue({
   render: h => h('frame', [h(App)])
 }).$start();

src/inappmessaging/inappmessaging.android.ts

@@ -0,0 +1,32 @@
+import { OnMessageCallbackData } from "./inappmessaging";
+
+export function onMessageClicked(callback: (data: OnMessageCallbackData) => void): void {
+  const listener = new com.google.firebase.inappmessaging.FirebaseInAppMessagingClickListener({
+    messageClicked: (message: com.google.firebase.inappmessaging.model.InAppMessage, action: com.google.firebase.inappmessaging.model.Action) => {
+      console.log(">> listener, messageClicked");
+      console.log(">> listener, messageClicked, message: " + message);
+      console.log(">> listener, messageClicked, action: " + action);
+      console.log(">> listener, messageClicked, campaign: " + message.getCampaignName());
+      callback({
+        campaignName: message.getCampaignName()
+      })
+    }
+  });
+
+  com.google.firebase.inappmessaging.FirebaseInAppMessaging.getInstance().addClickListener(listener)
+}
+
+export function onMessageImpression(callback: (data: OnMessageCallbackData) => void): void {
+  const listener = new com.google.firebase.inappmessaging.FirebaseInAppMessagingImpressionListener({
+    impressionDetected: (message: com.google.firebase.inappmessaging.model.InAppMessage) => {
+      console.log(">> listener, impressionDetected");
+      console.log(">> listener, impressionDetected, message: " + message);
+      console.log(">> listener, impressionDetected, campaign: " + message.getCampaignName());
+      callback({
+        campaignName: message.getCampaignName()
+      })
+    }
+  });
+
+  com.google.firebase.inappmessaging.FirebaseInAppMessaging.getInstance().addImpressionListener(listener)
+}

src/inappmessaging/inappmessaging.d.ts

@@ -0,0 +1,7 @@
+export interface OnMessageCallbackData {
+  campaignName: string;
+}
+
+export declare function onMessageClicked(callback: (data: OnMessageCallbackData) => void): void;
+
+export declare function onMessageImpression(callback: (data: OnMessageCallbackData) => void): void;

src/inappmessaging/inappmessaging.ios.ts

@@ -0,0 +1,63 @@
+import { OnMessageCallbackData } from "./inappmessaging";
+
+let _firInAppMessagingDisplayDelegate: FIRInAppMessagingDisplayDelegateImpl;
+
+export function onMessageClicked(callback: (data: OnMessageCallbackData) => void): void {
+  ensureDelegate();
+  _firInAppMessagingDisplayDelegate.setOnMessageClickedCallback(callback);
+}
+
+export function onMessageImpression(callback: (data: OnMessageCallbackData) => void): void {
+  ensureDelegate();
+  _firInAppMessagingDisplayDelegate.setOnMessageImpressionCallback(callback);
+}
+
+function ensureDelegate(): void {
+  if (!_firInAppMessagingDisplayDelegate) {
+    FIRInAppMessaging.inAppMessaging().delegate = _firInAppMessagingDisplayDelegate = FIRInAppMessagingDisplayDelegateImpl.new();
+  }
+}
+
+class FIRInAppMessagingDisplayDelegateImpl extends NSObject implements FIRInAppMessagingDisplayDelegate {
+  public static ObjCProtocols = [];
+
+  static new(): FIRInAppMessagingDisplayDelegateImpl {
+    if (FIRInAppMessagingDisplayDelegateImpl.ObjCProtocols.length === 0 && typeof (FIRInAppMessagingDisplayDelegate) !== "undefined") {
+      FIRInAppMessagingDisplayDelegateImpl.ObjCProtocols.push(FIRInAppMessagingDisplayDelegate);
+    }
+    return <FIRInAppMessagingDisplayDelegateImpl>super.new();
+  }
+
+  private onMessageClickedCallback: (data: OnMessageCallbackData) => void;
+  private onMessageImpressionCallback: (data: OnMessageCallbackData) => void;
+
+  public setOnMessageClickedCallback(callback: (data: OnMessageCallbackData) => void): void {
+    this.onMessageClickedCallback = callback;
+  }
+
+  public setOnMessageImpressionCallback(callback: (data: OnMessageCallbackData) => void): void {
+    this.onMessageImpressionCallback = callback;
+  }
+
+  displayErrorForMessageError(inAppMessage: FIRInAppMessagingDisplayMessage, error: NSError): void {
+    console.log("InAppMessaging error: " + error.localizedDescription);
+  }
+
+  impressionDetectedForMessage(inAppMessage: FIRInAppMessagingDisplayMessage): void {
+    console.log("InAppMessaging impression");
+    this.onMessageImpressionCallback && this.onMessageImpressionCallback({
+      campaignName: inAppMessage.campaignInfo.campaignName
+    });
+  }
+
+  messageClicked(inAppMessage: FIRInAppMessagingDisplayMessage): void {
+    console.log("InAppMessaging clicked");
+    this.onMessageClickedCallback && this.onMessageClickedCallback({
+      campaignName: inAppMessage.campaignInfo.campaignName
+    });
+  }
+
+  messageDismissedDismissType(inAppMessage: FIRInAppMessagingDisplayMessage, dismissType: FIRInAppMessagingDismissType): void {
+    console.log("InAppMessaging dismissed");
+  }
+}

src/inappmessaging/index.ts

@@ -0,0 +1,2 @@
+import * as inappmessage from "./inappmessaging";
+export const inappmessaging = inappmessage;

src/index.d.ts

@@ -8,5 +8,6 @@ export * from './crashlytics';
 export * from './performance';
 export * from './storage';
 export * from './messaging';
+export * from './inappmessaging';
 import * as ml from './mlkit';
 export declare const mlkit: typeof ml;

src/platforms/ios/typings/objc!FirebaseFunctions.d.ts

@@ -65,6 +65,8 @@ declare class FIRHTTPSCallable extends NSObject {
 
 	static new(): FIRHTTPSCallable; // inherited from NSObject
 
+	timeoutInterval: number;
+
 	callWithCompletion(completion: (p1: FIRHTTPSCallableResult, p2: NSError) => void): void;
 
 	callWithObjectCompletion(data: any, completion: (p1: FIRHTTPSCallableResult, p2: NSError) => void): void;