surveysparrow-ionic-plugin 2.0.2-beta.1 → 2.0.2-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "surveysparrow-ionic-plugin",
-  "version": "2.0.2-beta.1",
+  "version": "2.0.2-beta.3",
   "description": "SurveySparrow SDK enables you to collect feedback from your mobile app. Embed the Classic, Chat & NPS surveys in your ionic application seamlessly with few lines of code.",
   "type": "module",
   "main": "dist/plugin.cjs.js",

package/src/angular-ui/lib/spotchecks/SpotCheckComponent.ts

@@ -7,6 +7,8 @@ import {
   ElementRef,
   AfterViewInit,
   HostListener,
+  NgZone,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Subscription } from 'rxjs';
@@ -15,6 +17,7 @@ import { closeSpotCheck, closeSpotCheckAndHandleSurveyEnd, getSpotcheckComponent
 import { SpotcheckState } from './types';
 import { getSpotcheckStateService } from './helpers';
 import { SpotcheckStateService } from './SpotcheckStateService';
+import { getSpotCheckEventListener } from './SpotCheckEventListener';
 import axios from 'axios';
 
 @Component({
@@ -43,7 +46,11 @@ export class WebViewComponent implements OnInit, AfterViewInit {
   safeUrl: SafeResourceUrl | null = null;
   @ViewChild('iframeRef') iframe!: ElementRef<HTMLIFrameElement>;
 
-  constructor(private sanitizer: DomSanitizer) {}
+  constructor(
+    private sanitizer: DomSanitizer,
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) { }
   ngOnInit() {
     if (this.url) {
       this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
@@ -71,13 +78,15 @@ export class WebViewComponent implements OnInit, AfterViewInit {
   private setupIframeLoadListener() {
     const iframe = this.iframe.nativeElement;
     iframe.addEventListener('load', () => {
-      this.injectNativeBridgeAdapters(iframe);
-      const stateService = getSpotcheckStateService();
-      if (this.webviewType === 'classic') {
-        stateService.setState({ isClassicLoading: false });
-      } else {
-        stateService.setState({ isChatLoading: false });
-      }
+      this.ngZone.run(() => {
+        this.injectNativeBridgeAdapters(iframe);
+        const stateService = getSpotcheckStateService();
+        if (this.webviewType === 'classic') {
+          stateService.setState({ isClassicLoading: false });
+        } else {
+          stateService.setState({ isChatLoading: false });
+        }
+      });
     });
   }
 
@@ -85,17 +94,17 @@ export class WebViewComponent implements OnInit, AfterViewInit {
     if (iframe && iframe.contentWindow) {
       try {
         const iframeWindow = iframe.contentWindow as any;
-        
+
         if (!iframeWindow.SsAndroidSdk) {
           iframeWindow.SsAndroidSdk = {
-            shareData: function() {},
-            sendPartialSubmissionData: function() {}
+            shareData: function () { },
+            sendPartialSubmissionData: function () { }
           };
         }
 
         if (!iframeWindow.Android) {
           iframeWindow.Android = {
-            onMessageReceive: function() {}
+            onMessageReceive: function () { }
           };
         }
 
@@ -103,13 +112,13 @@ export class WebViewComponent implements OnInit, AfterViewInit {
           iframeWindow.webkit = {
             messageHandlers: {
               surveyResponse: {
-                postMessage: function() {}
+                postMessage: function () { }
               },
               spotCheckData: {
-                postMessage: function() {}
+                postMessage: function () { }
               },
               flutterSpotCheckData: {
-                postMessage: function() {}
+                postMessage: function () { }
               }
             }
           };
@@ -117,56 +126,62 @@ export class WebViewComponent implements OnInit, AfterViewInit {
 
         if (!iframeWindow.flutterSpotCheckData) {
           iframeWindow.flutterSpotCheckData = {
-            postMessage: function() {}
+            postMessage: function () { }
           };
         }
-      } catch (error) {}
+      } catch (error) { }
     }
   }
 
   @HostListener('window:message', ['$event'])
   onMessage(event: MessageEvent) {
-    const stateService = getSpotcheckStateService();
-    const { data } = event;
-    switch (data.type) {
-      case 'slideInFrame':
-        if (data.mounted) {
-          stateService.setState({ isMounted: true });
-        }
-        break;
+    this.ngZone.run(() => {
+      const stateService = getSpotcheckStateService();
+      const { data } = event;
+      switch (data.type) {
+        case 'slideInFrame':
+          if (data.mounted) {
+            stateService.setState({ isMounted: true });
+          }
+          break;
+
+        case 'resizeWindow':
+          if (data.size) {
+            stateService.setState({
+              currentQuestionHeight: data.size.height,
+            });
+          } else if (data.isCloseButtonEnabled) {
+            stateService.setState({
+              isCloseButtonEnabled: data.isCloseButtonEnabled,
+            });
+          }
+          break;
 
-      case 'resizeWindow':
-        if (data.size) {
-          stateService.setState({
-            currentQuestionHeight: data.size.height,
-          });
-        } else if (data.isCloseButtonEnabled) {
-          stateService.setState({
-            isCloseButtonEnabled: data.isCloseButtonEnabled,
+        case 'surveyCompleted':
+          closeSpotCheckAndHandleSurveyEnd().then(() => {
+            getSpotCheckEventListener().emit('surveyCompleted', data.response);
+            this.cdr.detectChanges();
           });
-        }
-        break;
+          break;
 
-      case 'surveyCompleted':
-        closeSpotCheckAndHandleSurveyEnd();
-        // spotchecksListener.emitSurveyCompleted(data.response);
-        break;
+        case 'surveyLoadStarted':
+          getSpotCheckEventListener().emit('surveyLoadStarted', data.surveyDetails);
+          break;
 
-      case 'surveyLoadStarted':
-        // spotchecksListener.emitSurveyLoadStarted(data.surveyDetails);
-        break;
 
-      case 'classicLoadEvent':
-        stateService.setState({ isClassicLoadEventReceived: true });
-        break;
+        case 'classicLoadEvent':
+          stateService.setState({ isClassicLoadEventReceived: true });
+          break;
 
-      case 'chatLoadEvent':
-        stateService.setState({ isChatLoadEventReceived: true });
-        break;
+        case 'chatLoadEvent':
+          stateService.setState({ isChatLoadEventReceived: true });
+          break;
 
-      default:
-        break;
-    }
+        default:
+          break;
+      }
+      this.cdr.detectChanges();
+    });
   }
 }
 
@@ -214,24 +229,30 @@ export class CloseSVGComponent {
 export class CloseButtonComponent implements OnDestroy {
   @Input() size: number = 30;
   @Input() strokeWidth: number = 1.2;
-  
+
   state: SpotcheckState;
   private stateService: SpotcheckStateService;
   private stateSubscription!: Subscription;
-  
+
   isVisible: boolean = false;
   isMiniCard: boolean = false;
   stroke: string = 'black';
-  
-  constructor() {
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {
     this.stateService = getSpotcheckStateService();
     this.state = this.stateService.getState();
     this.updateComponentState();
 
     this.stateSubscription = this.stateService.state$.subscribe(
       (newState: SpotcheckState) => {
-        this.state = newState;
-        this.updateComponentState();
+        this.ngZone.run(() => {
+          this.state = newState;
+          this.updateComponentState();
+          this.cdr.detectChanges();
+        });
       }
     );
   }
@@ -258,6 +279,9 @@ export class CloseButtonComponent implements OnDestroy {
   onClick = async () => {
     await closeSpotCheck();
     handleSurveyEnd();
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
   };
 }
 
@@ -276,16 +300,22 @@ export class SpotCheckComponent implements OnInit, OnDestroy {
   componentStyles: any = {};
   avatarUrl: string = '';
 
-  constructor() {
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {
     this.spotcheckStateService = getSpotcheckStateService();
     this.state = this.spotcheckStateService.getState();
     this.updateComponentStyles();
 
     this.stateSubscription = this.spotcheckStateService.state$.subscribe(
       (newState: SpotcheckState) => {
-        this.state = newState;
-        this.updateComponentStyles();
-        this.avatarUrl = this.state.avatarUrl || "https://static.surveysparrow.com/application/images/profile.png";
+        this.ngZone.run(() => {
+          this.state = newState;
+          this.updateComponentStyles();
+          this.avatarUrl = this.state.avatarUrl || "https://static.surveysparrow.com/application/images/profile.png";
+          this.cdr.detectChanges();
+        });
       }
     );
   }
@@ -308,9 +338,11 @@ export class SpotCheckComponent implements OnInit, OnDestroy {
     try {
       const domainName = this.state.domainName;
       const targetToken = this.state.targetToken;
-      const response = await axios.get(
+
+      const response = await axios.get<any>(
         `https://${domainName}/api/internal/spotcheck/widget/${targetToken}/init`
       );
+
       const data = response.data;
 
       if (data.filteredSpotChecks && data.filteredSpotChecks.length > 0) {

package/src/angular-ui/lib/spotchecks/SpotCheckEventListener.ts

@@ -0,0 +1,50 @@
+import { Subject } from 'rxjs';
+import type { Subscription } from 'rxjs';
+
+export type SpotCheckEventType =
+  | 'surveyCompleted'
+  | 'surveyDismissed'
+  | 'surveyLoadStarted';
+
+export interface SpotCheckEvent {
+  type: SpotCheckEventType;
+  data?: any;
+}
+
+type EventCallback = (data?: any) => void;
+
+class SpotCheckEventListenerService {
+  private eventSubject = new Subject<SpotCheckEvent>();
+  private event$ = this.eventSubject.asObservable();
+
+  emit(type: SpotCheckEventType, data?: any): void {
+    this.eventSubject.next({ type, data });
+  }
+
+  addListener(
+    eventType: SpotCheckEventType,
+    callback: EventCallback
+  ): Subscription {
+    return this.event$.subscribe((event: SpotCheckEvent) => {
+      if (event.type === eventType) {
+        callback(event.data);
+      }
+    });
+  }
+}
+
+let globalInstance: SpotCheckEventListenerService;
+
+export const getSpotCheckEventListener = (): SpotCheckEventListenerService => {
+  if (!globalInstance) {
+    globalInstance = new SpotCheckEventListenerService();
+  }
+  return globalInstance;
+};
+
+export const addSpotCheckListener = (
+  eventType: SpotCheckEventType,
+  callback: EventCallback
+): Subscription => {
+  return getSpotCheckEventListener().addListener(eventType, callback);
+};

package/src/angular-ui/lib/spotchecks/api.ts

@@ -65,7 +65,7 @@ export const sendTrackScreenRequest = async ({
     };
 
     const url = `https://${state.domainName}/api/internal/spotcheck/widget/${state.targetToken}/properties?isSpotCheck=true&sdk=IONIC`;
-    const response = await axios.post(url, payload, {
+    const response = await axios.post<any>(url, payload, {
       headers: {
         'Content-Type': 'application/json',
       },
@@ -212,7 +212,7 @@ export const sendTrackEventRequest = async ({ screen, event }: TrackEventProps)
               const url = `https://${state.domainName}/api/internal/spotcheck/widget/${state.targetToken}/eventTrigger?isSpotCheck=true`;
 
               try {
-                const response = await axios.post(url, payload, {
+                const response = await axios.post<any>(url, payload, {
                   headers: {
                     'Content-Type': 'application/json',
                   },

package/src/angular-ui/lib/spotchecks/helpers.ts

@@ -3,6 +3,7 @@ import { Device } from '@capacitor/device';
 import { SpotcheckState } from './types';
 import axios from 'axios';
 import { SpotcheckStateService } from './SpotcheckStateService';
+import { getSpotCheckEventListener } from './SpotCheckEventListener';
 
 let globalSpotcheckStateService: SpotcheckStateService;
 let globalOS: string | null = null;
@@ -122,7 +123,7 @@ export const setAppearance = async (
       spotcheckStateService.setState(updatedState);
 
       try {
-        const response = await axios.get(fullSpotcheckURL);
+        const response = await axios.get<any>(fullSpotcheckURL);
         const themeInfo = response.data?.config?.generatedCSS;
         const theme_payload = { type: 'THEME_UPDATE_SPOTCHECK', themeInfo };
         state = spotcheckStateService.getState();
@@ -261,8 +262,10 @@ export const closeSpotCheck = async () => {
         body: JSON.stringify(payload),
       }
     );
-
-    if (response.status != 200) {
+    if(response.status == 200) {
+      getSpotCheckEventListener().emit('surveyDismissed');
+    }
+    else{
       console.log(`Error: ${response.status}`);
     }
   } catch (error) {
@@ -407,6 +410,5 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
 };
 
 export const closeSpotCheckAndHandleSurveyEnd = async () => {
-  await closeSpotCheck();
   handleSurveyEnd();
 };

package/src/angular-ui/lib/spotchecks/index.ts

@@ -1,4 +1,7 @@
 export { initializeSpotChecks, trackScreen, trackEvent } from './SpotCheck';
+export {
+  addSpotCheckListener,
+} from './SpotCheckEventListener';
 export type {
   UserDetails,
   Variables,