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

package/dist/angular-ui/fesm2022/angular-ui.mjs

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import { v4 } from 'uuid';
 import { Device } from '@capacitor/device';
 import axios from 'axios';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import * as i1 from '@angular/platform-browser';
 
 class SpotcheckStateService {
@@ -34,8 +34,6 @@ class SpotcheckStateService {
         traceId: '',
         isClassicLoading: true,
         isChatLoading: true,
-        isClassicLoadEventReceived: false,
-        isChatLoadEventReceived: false,
         classicUrl: '',
         chatUrl: '',
         classicWebViewRef: null,
@@ -72,8 +70,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
+class SpotCheckEventListenerService {
+    eventSubject = new Subject();
+    event$ = this.eventSubject.asObservable();
+    emit(type, data) {
+        this.eventSubject.next({ type, data });
+    }
+    addListener(eventType, callback) {
+        return this.event$.subscribe((event) => {
+            if (event.type === eventType) {
+                callback(event.data);
+            }
+        });
+    }
+}
+let globalInstance;
+const getSpotCheckEventListener = () => {
+    if (!globalInstance) {
+        globalInstance = new SpotCheckEventListenerService();
+    }
+    return globalInstance;
+};
+const addSpotCheckListener = (eventType, callback) => {
+    return getSpotCheckEventListener().addListener(eventType, callback);
+};
+
 let globalSpotcheckStateService;
-let globalOS = null;
 const getSpotcheckStateService = () => {
     if (!globalSpotcheckStateService) {
         globalSpotcheckStateService = new SpotcheckStateService();
@@ -93,8 +115,7 @@ const ischatSurvey = (type) => {
 };
 const getOS = async () => {
     const info = await Device.getInfo();
-    globalOS = info.operatingSystem;
-    return globalOS;
+    return info.operatingSystem;
 };
 const setAppearance = async (responseJson, screen, domainName, traceId, variables) => {
     try {
@@ -150,11 +171,11 @@ const setAppearance = async (responseJson, screen, domainName, traceId, variable
             spotcheckStateService.setState(updatedState);
             try {
                 const response = await axios.get(fullSpotcheckURL);
-                const themeInfo = response.data?.config?.generatedCSS;
+                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',
                     state: {
@@ -197,8 +218,8 @@ const setAppearance = async (responseJson, screen, domainName, traceId, variable
                     else {
                         // todo: recheck this
                         const unsubscribe = spotcheckStateService.state$.subscribe((currentState) => {
-                            const { isChatLoading, isClassicLoading, chatWebViewRef, classicWebViewRef, isClassicLoadEventReceived, isChatLoadEventReceived, } = currentState;
-                            if ((!isChatLoading && chat && isChatLoadEventReceived) || (!isClassicLoading && !chat && isClassicLoadEventReceived)) {
+                            const { isChatLoading, isClassicLoading, chatWebViewRef, classicWebViewRef, } = currentState;
+                            if ((!isChatLoading && chat) || (!isClassicLoading && !chat)) {
                                 unsubscribe.unsubscribe();
                                 const activeWebViewRef = chat
                                     ? chatWebViewRef
@@ -221,8 +242,8 @@ const setAppearance = async (responseJson, screen, domainName, traceId, variable
                             ? currentState.chatWebViewRef
                             : currentState.classicWebViewRef;
                         const updatedIsLoading = chat
-                            ? currentState.isChatLoading || !currentState.isChatLoadEventReceived
-                            : currentState.isClassicLoading || !currentState.isClassicLoadEventReceived;
+                            ? currentState.isChatLoading
+                            : currentState.isClassicLoading;
                         if (updatedWebViewRef) {
                             if (!updatedIsLoading) {
                                 unsubscribeWebView.unsubscribe();
@@ -268,7 +289,10 @@ const closeSpotCheck = async () => {
             },
             body: JSON.stringify(payload),
         });
-        if (response.status != 200) {
+        if (response.status == 200) {
+            getSpotCheckEventListener().emit('surveyDismissed');
+        }
+        else {
             console.log(`Error: ${response.status}`);
         }
     }
@@ -324,15 +348,11 @@ const getSpotcheckComponentCssStyles = (state) => {
             height: '100%',
         };
     }
-    let marginBottom = globalOS !== 'ios' ? 18 : 0;
     if (state.isVisible && state.isMounted) {
         let height = Math.min(state.currentQuestionHeight, (state.maxHeight * window.innerHeight));
         if (state.spotChecksMode === 'miniCard') {
             if (state.avatarEnabled) {
                 height = height - 56;
-                if (state.spotcheckPosition === 'bottom') {
-                    marginBottom += 56;
-                }
             }
             if (state.isCloseButtonEnabled) {
                 height = height - 40;
@@ -384,7 +404,7 @@ const getSpotcheckComponentCssStyles = (state) => {
             top: '0',
             left: '0',
             backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            zIndex: '100001',
+            zIndex: '99999999',
             display: 'none',
             flexDirection: 'column',
             ...wrapperStyles
@@ -393,25 +413,27 @@ const getSpotcheckComponentCssStyles = (state) => {
             display: 'none',
             flexDirection: 'column',
             paddingTop: extraPaddingForMiniCardCloseButtonIfTopPosition + 'px',
-            marginBottom: marginBottom + 'px',
             ...styles,
         }
     };
 };
 const closeSpotCheckAndHandleSurveyEnd = async () => {
-    await closeSpotCheck();
     handleSurveyEnd();
 };
 
 class WebViewComponent {
     sanitizer;
+    ngZone;
+    cdr;
     url = '';
     webviewType = 'classic';
     isMiniCard = false;
     safeUrl = null;
     iframe;
-    constructor(sanitizer) {
+    constructor(sanitizer, ngZone, cdr) {
         this.sanitizer = sanitizer;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
     }
     ngOnInit() {
         if (this.url) {
@@ -438,99 +460,59 @@ class WebViewComponent {
     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 });
-            }
-        });
-    }
-    injectNativeBridgeAdapters(iframe) {
-        if (iframe && iframe.contentWindow) {
-            try {
-                const iframeWindow = iframe.contentWindow;
-                if (!iframeWindow.SsAndroidSdk) {
-                    iframeWindow.SsAndroidSdk = {
-                        shareData: function () { },
-                        sendPartialSubmissionData: function () { }
-                    };
-                }
-                if (!iframeWindow.Android) {
-                    iframeWindow.Android = {
-                        onMessageReceive: function () { }
-                    };
+            this.ngZone.run(() => {
+                const stateService = getSpotcheckStateService();
+                if (this.webviewType === 'classic') {
+                    stateService.setState({ isClassicLoading: false });
                 }
-                if (!iframeWindow.webkit) {
-                    iframeWindow.webkit = {
-                        messageHandlers: {
-                            surveyResponse: {
-                                postMessage: function () { }
-                            },
-                            spotCheckData: {
-                                postMessage: function () { }
-                            },
-                            flutterSpotCheckData: {
-                                postMessage: function () { }
-                            }
-                        }
-                    };
-                }
-                if (!iframeWindow.flutterSpotCheckData) {
-                    iframeWindow.flutterSpotCheckData = {
-                        postMessage: function () { }
-                    };
+                else {
+                    stateService.setState({ isChatLoading: false });
                 }
-            }
-            catch (error) { }
-        }
+            });
+        });
     }
     onMessage(event) {
-        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,
+        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 '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;
-            case 'chatLoadEvent':
-                stateService.setState({ isChatLoadEventReceived: true });
-                break;
-            default:
-                break;
-        }
+                    break;
+                case 'surveyLoadStarted':
+                    getSpotCheckEventListener().emit('surveyLoadStarted', data.surveyDetails);
+                    break;
+                default:
+                    break;
+            }
+            this.cdr.detectChanges();
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WebViewComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WebViewComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: WebViewComponent, isStandalone: true, selector: "WebViewComponent", inputs: { url: "url", webviewType: "webviewType", isMiniCard: "isMiniCard" }, host: { listeners: { "window:message": "onMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframeRef"], descendants: true }], ngImport: i0, 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;"
@@ -547,8 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     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;"
@@ -560,7 +541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     standalone: true,
                     imports: [CommonModule],
                 }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { url: [{
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { url: [{
                 type: Input
             }], webviewType: [{
                 type: Input
@@ -628,6 +609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 type: Input
             }] } });
 class CloseButtonComponent {
+    ngZone;
+    cdr;
     size = 30;
     strokeWidth = 1.2;
     state;
@@ -636,13 +619,18 @@ class CloseButtonComponent {
     isVisible = false;
     isMiniCard = false;
     stroke = 'black';
-    constructor() {
+    constructor(ngZone, cdr) {
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.stateService = getSpotcheckStateService();
         this.state = this.stateService.getState();
         this.updateComponentState();
         this.stateSubscription = this.stateService.state$.subscribe((newState) => {
-            this.state = newState;
-            this.updateComponentState();
+            this.ngZone.run(() => {
+                this.state = newState;
+                this.updateComponentState();
+                this.cdr.detectChanges();
+            });
         });
     }
     ngOnDestroy() {
@@ -665,8 +653,11 @@ class CloseButtonComponent {
     onClick = async () => {
         await closeSpotCheck();
         handleSurveyEnd();
+        this.ngZone.run(() => {
+            this.cdr.detectChanges();
+        });
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CloseButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: CloseButtonComponent, isStandalone: true, selector: "spotcheck-close-button", inputs: { size: "size", strokeWidth: "strokeWidth" }, ngImport: i0, template: `
       <div style="position: absolute; top: -36px; right: 16px; z-index: 100001; cursor: pointer; background-color: white; border-radius: 50px;" (click)="onClick()" *ngIf="isVisible && isMiniCard">
         <close-svg [size]="size" [stroke]="stroke" [strokeWidth]="strokeWidth" style="display: flex; align-items: center; justify-content: center;"/>
@@ -691,25 +682,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     standalone: true,
                     imports: [CommonModule, CloseSVGComponent],
                 }]
-        }], ctorParameters: () => [], propDecorators: { size: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { size: [{
                 type: Input
             }], strokeWidth: [{
                 type: Input
             }] } });
 class SpotCheckComponent {
+    ngZone;
+    cdr;
     state;
     spotcheckStateService;
     stateSubscription;
     componentStyles = {};
     avatarUrl = '';
-    constructor() {
+    constructor(ngZone, cdr) {
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.spotcheckStateService = getSpotcheckStateService();
         this.state = this.spotcheckStateService.getState();
         this.updateComponentStyles();
         this.stateSubscription = this.spotcheckStateService.state$.subscribe((newState) => {
-            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();
+            });
         });
     }
     ngOnInit() {
@@ -758,13 +756,13 @@ class SpotCheckComponent {
             console.log('Error initializing widget:', JSON.stringify(error));
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotCheckComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: SpotCheckComponent, isStandalone: true, selector: "SpotCheckComponent", ngImport: i0, template: "<div [ngStyle]=\"componentStyles.wrapperStyles\" class=\"safe-area\">\n  <div [ngStyle]=\"componentStyles.styles\">\n    <div style=\"position: relative; height: 100%;\">\n      <spotcheck-close-button />\n  \n      <WebViewComponent\n        *ngIf=\"state.classicUrl && state.classicUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'classic'\"\n        [url]=\"state.classicUrl\"\n        [webviewType]=\"'classic'\"\n        [isMiniCard]=\"state.spotChecksMode === 'miniCard'\"\n      />\n  \n      <WebViewComponent\n        *ngIf=\"state.chatUrl && state.chatUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'chat'\"\n        [url]=\"state.chatUrl\"\n        [webviewType]=\"'chat'\"\n        [isMiniCard]=\"state.spotChecksMode === 'miniCard'\"\n      />\n\n      <div *ngIf=\"state.spotChecksMode === 'miniCard' && state.avatarEnabled\">\n        <div style=\"position: absolute; bottom: -66px; left: 16px; z-index: 100001;\">\n          <img [src]=\"avatarUrl\" style=\"width: 56px; height: 56px; border-radius: 50px; background-color: white;\"/>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".safe-area{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WebViewComponent, selector: "WebViewComponent", inputs: ["url", "webviewType", "isMiniCard"] }, { kind: "component", type: CloseButtonComponent, selector: "spotcheck-close-button", inputs: ["size", "strokeWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotCheckComponent, decorators: [{
             type: Component,
             args: [{ selector: 'SpotCheckComponent', standalone: true, imports: [CommonModule, WebViewComponent, CloseButtonComponent], template: "<div [ngStyle]=\"componentStyles.wrapperStyles\" class=\"safe-area\">\n  <div [ngStyle]=\"componentStyles.styles\">\n    <div style=\"position: relative; height: 100%;\">\n      <spotcheck-close-button />\n  \n      <WebViewComponent\n        *ngIf=\"state.classicUrl && state.classicUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'classic'\"\n        [url]=\"state.classicUrl\"\n        [webviewType]=\"'classic'\"\n        [isMiniCard]=\"state.spotChecksMode === 'miniCard'\"\n      />\n  \n      <WebViewComponent\n        *ngIf=\"state.chatUrl && state.chatUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'chat'\"\n        [url]=\"state.chatUrl\"\n        [webviewType]=\"'chat'\"\n        [isMiniCard]=\"state.spotChecksMode === 'miniCard'\"\n      />\n\n      <div *ngIf=\"state.spotChecksMode === 'miniCard' && state.avatarEnabled\">\n        <div style=\"position: absolute; bottom: -66px; left: 16px; z-index: 100001;\">\n          <img [src]=\"avatarUrl\" style=\"width: 56px; height: 56px; border-radius: 50px; background-color: white;\"/>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".safe-area{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);box-sizing:border-box}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }] });
 
 class SpotCheck {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotCheck, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -906,7 +904,7 @@ const sendTrackScreenRequest = async ({ screen, options, }) => {
                     }
                 }
             }
-            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}`);
@@ -989,7 +987,7 @@ const sendTrackEventRequest = async ({ screen, event }) => {
                                             return { valid: true };
                                         }
                                     }
-                                    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}`);
@@ -1066,5 +1064,5 @@ const trackEvent = async ({ screen, event }) => {
  * Generated bundle index. Do not edit.
  */
 
-export { SpotCheck, initializeSpotChecks, trackEvent, trackScreen };
+export { SpotCheck, addSpotCheckListener, initializeSpotChecks, trackEvent, trackScreen };
 //# sourceMappingURL=angular-ui.mjs.map