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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "surveysparrow-ionic-plugin",
-  "version": "2.0.2-beta.1",
+  "version": "2.0.2-beta.2",
   "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({
@@ -22,8 +25,7 @@ import axios from 'axios';
   template: `
     <div style="overflow: hidden; height: 100%; border-radius: {{isMiniCard ? 12 : 0}}px; padding-left: {{isMiniCard ? 12 : 0}}px; padding-right: {{isMiniCard ? 12 : 0}}px; box-sizing: border-box;">
       <iframe
-        allow="camera; microphone; geolocation; display-capture; autoplay; clipboard-read; clipboard-write; fullscreen"
-        allowfullscreen
+        allow="camera; microphone; geolocation; display-capture; autoplay; clipboard-read; clipboard-write;"
         #iframeRef
         [src]="safeUrl"
         style="width: 100%; height: 100%; display: block; border-radius: {{isMiniCard ? 12 : 0}}px;"
@@ -43,7 +45,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,102 +77,57 @@ 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 });
-      }
-    });
-  }
-
-  private injectNativeBridgeAdapters(iframe: HTMLIFrameElement) {
-    if (iframe && iframe.contentWindow) {
-      try {
-        const iframeWindow = iframe.contentWindow as any;
-        
-        if (!iframeWindow.SsAndroidSdk) {
-          iframeWindow.SsAndroidSdk = {
-            shareData: function() {},
-            sendPartialSubmissionData: function() {}
-          };
-        }
-
-        if (!iframeWindow.Android) {
-          iframeWindow.Android = {
-            onMessageReceive: function() {}
-          };
-        }
-
-        if (!iframeWindow.webkit) {
-          iframeWindow.webkit = {
-            messageHandlers: {
-              surveyResponse: {
-                postMessage: function() {}
-              },
-              spotCheckData: {
-                postMessage: function() {}
-              },
-              flutterSpotCheckData: {
-                postMessage: function() {}
-              }
-            }
-          };
-        }
-
-        if (!iframeWindow.flutterSpotCheckData) {
-          iframeWindow.flutterSpotCheckData = {
-            postMessage: function() {}
-          };
+      this.ngZone.run(() => {
+        const stateService = getSpotcheckStateService();
+        if (this.webviewType === 'classic') {
+          stateService.setState({ isClassicLoading: false });
+        } else {
+          stateService.setState({ isChatLoading: false });
         }
-      } 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;
-
-      case 'surveyCompleted':
-        closeSpotCheckAndHandleSurveyEnd();
-        // spotchecksListener.emitSurveyCompleted(data.response);
-        break;
-
-      case 'surveyLoadStarted':
-        // spotchecksListener.emitSurveyLoadStarted(data.surveyDetails);
-        break;
-
-      case 'classicLoadEvent':
-        stateService.setState({ isClassicLoadEventReceived: true });
-        break;
+          break;
 
-      case 'chatLoadEvent':
-        stateService.setState({ isChatLoadEventReceived: true });
-        break;
+        case 'surveyLoadStarted':
+          getSpotCheckEventListener().emit('surveyLoadStarted', data.surveyDetails);
+          break;
 
-      default:
-        break;
-    }
+        default:
+          break;
+      }
+      this.cdr.detectChanges();
+    });
   }
 }
 
@@ -223,15 +184,21 @@ export class CloseButtonComponent implements OnDestroy {
   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 +225,9 @@ export class CloseButtonComponent implements OnDestroy {
   onClick = async () => {
     await closeSpotCheck();
     handleSurveyEnd();
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
   };
 }
 
@@ -276,16 +246,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 +284,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/SpotcheckStateService.ts

@@ -31,8 +31,6 @@ export class SpotcheckStateService {
     traceId: '',
     isClassicLoading: true,
     isChatLoading: true,
-    isClassicLoadEventReceived: false,
-    isChatLoadEventReceived: false,
     classicUrl: '',
     chatUrl: '',
     classicWebViewRef: null,

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',
       },
@@ -158,7 +158,7 @@ export const sendTrackScreenRequest = async ({
         }
       }
 
-      throw new Error(responseJson?.reason?.toString() ?? 'Spotcheck conditions not met');
+      throw new Error(responseJson?.reason.toString());
     } else {
       throw new Error(`Received status code ${response.status}`);
     }
@@ -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',
                   },
@@ -265,7 +265,7 @@ export const sendTrackEventRequest = async ({ screen, event }: TrackEventProps)
                     }
                   }
 
-                  throw new Error(responseJson?.reason?.toString() ?? 'Event conditions not met');
+                  throw new Error(responseJson?.reason.toString());
                 } else {
                   throw new Error(`Received status code ${response.status}`);
                 }

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

@@ -3,9 +3,9 @@ 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;
 
 export const getSpotcheckStateService = (): SpotcheckStateService => {
   if (!globalSpotcheckStateService) {
@@ -31,8 +31,7 @@ export const ischatSurvey = (type: String) => {
 
 export const getOS = async () => {
   const info = await Device.getInfo();
-  globalOS = info.operatingSystem;
-  return globalOS;
+  return info.operatingSystem;
 };
 
 export const setAppearance = async (
@@ -122,13 +121,13 @@ export const setAppearance = async (
       spotcheckStateService.setState(updatedState);
 
       try {
-        const response = await axios.get(fullSpotcheckURL);
-        const themeInfo = response.data?.config?.generatedCSS;
+        const response = await axios.get<any>(fullSpotcheckURL);
+        const themeInfo = response.data.config.generatedCSS;
         const theme_payload = { type: 'THEME_UPDATE_SPOTCHECK', themeInfo };
         state = spotcheckStateService.getState();
 
         let webViewRef = chat ? state.chatWebViewRef : state.classicWebViewRef;
-        let isLoading = chat ? state.isChatLoading || !state.isChatLoadEventReceived : state.isClassicLoading || !state.isClassicLoadEventReceived;
+        let isLoading = chat ? state.isChatLoading : state.isClassicLoading;
 
         const resetStateData = {
           type: 'RESET_STATE',
@@ -179,12 +178,9 @@ export const setAppearance = async (
                   isClassicLoading,
                   chatWebViewRef,
                   classicWebViewRef,
-                  isClassicLoadEventReceived,
-                  isChatLoadEventReceived,
                 } = currentState;
 
-                
-                if ((!isChatLoading && chat && isChatLoadEventReceived) || (!isClassicLoading && !chat && isClassicLoadEventReceived)) {
+                if ((!isChatLoading && chat) || (!isClassicLoading && !chat)) {
                   unsubscribe.unsubscribe();
                   const activeWebViewRef = chat
                     ? chatWebViewRef
@@ -209,8 +205,8 @@ export const setAppearance = async (
                 ? currentState.chatWebViewRef
                 : currentState.classicWebViewRef;
               const updatedIsLoading = chat
-                ? currentState.isChatLoading || !currentState.isChatLoadEventReceived
-                : currentState.isClassicLoading || !currentState.isClassicLoadEventReceived;
+                ? currentState.isChatLoading
+                : currentState.isClassicLoading;
 
               if (updatedWebViewRef) {
                 if (!updatedIsLoading) {
@@ -261,8 +257,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) {
@@ -323,8 +321,6 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
       height: '100%',
     };
   }
-
-  let marginBottom =  globalOS !== 'ios' ? 18 : 0;
   
   if (state.isVisible && state.isMounted) {
 
@@ -332,9 +328,6 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
     if(state.spotChecksMode === 'miniCard') {
       if(state.avatarEnabled) {
         height = height - 56;
-        if(state.spotcheckPosition === 'bottom') {
-          marginBottom += 56;
-        }
       }
       if(state.isCloseButtonEnabled) {
         height = height - 40;
@@ -342,7 +335,7 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
     }
 
     switch (state.spotcheckPosition) {
-      case 'bottom':  
+      case 'bottom':
         styles = {
           display: 'flex',
           height: height+'px',
@@ -391,7 +384,7 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
       top: '0', 
       left: '0', 
       backgroundColor: 'rgba(0, 0, 0, 0.3)', 
-      zIndex: '100001',
+      zIndex: '99999999',
       display: 'none',
       flexDirection: 'column',
       ...wrapperStyles
@@ -400,13 +393,11 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
       display: 'none',
       flexDirection: 'column',
       paddingTop: extraPaddingForMiniCardCloseButtonIfTopPosition+'px',
-      marginBottom: marginBottom+'px',
       ...styles,
     }
   };
 };
 
 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,

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

@@ -23,8 +23,6 @@ export interface SpotcheckState {
   traceId: string;
   isClassicLoading: boolean;
   isChatLoading: boolean;
-  isClassicLoadEventReceived: boolean;
-  isChatLoadEventReceived: boolean;
   classicUrl: string;
   chatUrl: string;
   classicWebViewRef: any | null;