surveysparrow-ionic-plugin 1.0.7-beta.4 → 2.0.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "surveysparrow-ionic-plugin",
-  "version": "1.0.7-beta.4",
+  "version": "2.0.0",
   "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",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -13,8 +14,25 @@
     "ios/Sources",
     "ios/Tests",
     "Package.swift",
-    "SurveysparrowIonicPlugin.podspec"
+    "SurveysparrowIonicPlugin.podspec",
+    "dist/capacitor",
+    "dist/angular-ui",
+    "capacitor",
+    "src"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./dist/esm/index.d.ts"
+    },
+    "./angular-ui": {
+      "import": "./dist/angular-ui/fesm2022/angular-ui.mjs",
+      "types": "./dist/angular-ui/index.d.ts",
+      "esm2022": "./dist/angular-ui/esm2022/angular-ui.mjs",
+      "esm": "./dist/angular-ui/esm2022/angular-ui.mjs",
+      "default": "./dist/angular-ui/fesm2022/angular-ui.mjs"
+    }
+  },
   "author": "Gokulkrishna-Raju",
   "license": "MIT",
   "repository": {
@@ -27,7 +45,9 @@
   "keywords": [
     "capacitor",
     "plugin",
-    "native"
+    "native",
+    "ionic",
+    "angular"
   ],
   "scripts": {
     "verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
@@ -40,13 +60,15 @@
     "prettier": "prettier \"**/*.{css,html,ts,js,java}\" --plugin=prettier-plugin-java",
     "swiftlint": "node-swiftlint",
     "docgen": "docgen --api SurveySparrowIonicPluginPlugin --output-readme README.md --output-json dist/docs.json",
-    "build": "npm run clean && npm run docgen && tsc && rollup -c rollup.config.mjs",
+    "build": "npm run clean && npm run docgen && npx ng-packagr -p src/angular-ui/ng-package.json && tsc && rollup -c rollup.config.mjs",
     "clean": "rimraf ./dist",
     "watch": "tsc --watch",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@angular/common": "^20.3.2",
+    "@angular/compiler": "^20.3.2",
+    "@angular/compiler-cli": "^20.3.2",
     "@angular/core": "^20.3.2",
     "@angular/platform-browser": "^20.3.2",
     "@capacitor/android": "^7.0.0",
@@ -61,6 +83,7 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "axios": "^1.12.2",
     "eslint": "^8.57.0",
+    "ng-packagr": "^18.2.1",
     "prettier": "^3.4.2",
     "prettier-plugin-java": "^2.6.6",
     "rimraf": "^6.0.1",
@@ -87,6 +110,10 @@
     }
   },
   "dependencies": {
+    "@capacitor/device": "^7.0.2",
+    "axios": "^1.12.2",
+    "tslib": "^2.3.0",
+    "uuid": "^13.0.0",
     "@types/node": "^24.5.2"
   }
 }

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

@@ -0,0 +1,2 @@
+export * from './spotcheck.component';
+export * from './spotchecks';

package/src/angular-ui/lib/spotcheck.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { SpotCheckComponent } from './spotchecks/SpotCheckComponent';
+
+@Component({
+  selector: 'SpotCheck',
+  template: `<SpotCheckComponent />`,
+  standalone: true,
+  imports: [SpotCheckComponent],
+})
+export class SpotCheck {}

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

@@ -0,0 +1,54 @@
+import { InitializeSpotChecksProps, TrackEventProps, TrackScreenProps } from './types';
+import { sendTrackScreenRequest, sendTrackEventRequest } from './api';
+import { getSpotcheckStateService } from './helpers';
+
+export const initializeSpotChecks = ({
+  domainName,
+  targetToken,
+  userDetails = {},
+  variables = {},
+  customProperties = {},
+}: InitializeSpotChecksProps) => {
+  const spotcheckStateService = getSpotcheckStateService();
+  spotcheckStateService.setState({
+    domainName,
+    targetToken,
+    userDetails,
+    variables,
+    customProperties,
+  });
+};
+
+export const trackScreen = async ({ screen, options }: TrackScreenProps) => {
+  try {
+    const response = await sendTrackScreenRequest({ screen, options });
+    if (response.valid) {
+      console.log('Screen Tracking succeeded.');
+    } else {
+      if ('error' in response) {
+        throw new Error(response.error.toString());
+      } else {
+        throw new Error('Tracking failed without an explicit error.');
+      }
+    }
+  } catch (error: any) {
+    console.log(`Screen Tracking Failed. ${error.message}`);
+  }
+};
+
+export const trackEvent = async ({ screen, event }: TrackEventProps) => {
+  try {
+    const response = await sendTrackEventRequest({ screen, event });
+    if (response.valid) {
+      console.log('TrackEvent succeeded.');
+    } else {
+      if ('error' in response) {
+        throw new Error(response.error.toString());
+      } else {
+        throw new Error('Tracking failed without an explicit error.');
+      }
+    }
+  } catch (error: any) {
+    console.log(`Event Tracking Failed. ${error.message}`);
+  }
+};

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

@@ -0,0 +1,7 @@
+.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;
+}

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

@@ -0,0 +1,27 @@
+<div [ngStyle]="componentStyles.wrapperStyles" class="safe-area">
+  <div [ngStyle]="componentStyles.styles">
+    <div style="position: relative; height: 100%;">
+      <spotcheck-close-button />
+  
+      <WebViewComponent
+        *ngIf="state.classicUrl && state.classicUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'classic'"
+        [url]="state.classicUrl"
+        [webviewType]="'classic'"
+        [isMiniCard]="state.spotChecksMode === 'miniCard'"
+      />
+  
+      <WebViewComponent
+        *ngIf="state.chatUrl && state.chatUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'chat'"
+        [url]="state.chatUrl"
+        [webviewType]="'chat'"
+        [isMiniCard]="state.spotChecksMode === 'miniCard'"
+      />
+
+      <div *ngIf="state.spotChecksMode === 'miniCard' && state.avatarEnabled">
+        <div style="position: absolute; bottom: -66px; left: 16px; z-index: 100001;">
+          <img [src]="avatarUrl" style="width: 56px; height: 56px; border-radius: 50px; background-color: white;"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,295 @@
+import {
+  OnInit,
+  Component,
+  Input,
+  OnDestroy,
+  ViewChild,
+  ElementRef,
+  AfterViewInit,
+  HostListener,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { closeSpotCheck, closeSpotCheckAndHandleSurveyEnd, getSpotcheckComponentCssStyles, handleSurveyEnd, ischatSurvey } from './helpers';
+import { SpotcheckState } from './types';
+import { getSpotcheckStateService } from './helpers';
+import { SpotcheckStateService } from './SpotcheckStateService';
+import axios from 'axios';
+
+@Component({
+  selector: 'WebViewComponent',
+  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;"
+        #iframeRef
+        [src]="safeUrl"
+        style="width: 100%; height: 100%; display: block; border-radius: {{isMiniCard ? 12 : 0}}px;"
+        frameborder="0"
+      >
+      </iframe>
+    </div>
+  `,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class WebViewComponent implements OnInit, AfterViewInit {
+  @Input() url: string = '';
+  @Input() webviewType: 'classic' | 'chat' = 'classic';
+  @Input() isMiniCard: boolean = false;
+
+  safeUrl: SafeResourceUrl | null = null;
+  @ViewChild('iframeRef') iframe!: ElementRef<HTMLIFrameElement>;
+
+  constructor(private sanitizer: DomSanitizer) {}
+  ngOnInit() {
+    if (this.url) {
+      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
+    }
+  }
+
+  ngAfterViewInit() {
+    const stateService = getSpotcheckStateService();
+    const webViewRef = this.iframe.nativeElement;
+
+    if (this.webviewType === 'classic') {
+      stateService.setState({
+        classicWebViewRef: webViewRef,
+        isClassicLoading: false,
+      });
+    } else {
+      stateService.setState({
+        chatWebViewRef: webViewRef,
+        isChatLoading: false,
+      });
+    }
+    this.setupIframeLoadListener();
+  }
+
+  private setupIframeLoadListener() {
+    const iframe = this.iframe.nativeElement;
+    iframe.addEventListener('load', () => {
+      const stateService = getSpotcheckStateService();
+      if (this.webviewType === 'classic') {
+        stateService.setState({ isClassicLoading: false });
+      } else {
+        stateService.setState({ isChatLoading: false });
+      }
+    });
+  }
+
+  @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;
+
+      case 'resizeWindow':
+        if (data.size) {
+          stateService.setState({
+            currentQuestionHeight: data.size.height,
+          });
+        } else if (data.isCloseButtonEnabled) {
+          stateService.setState({
+            isCloseButtonEnabled: data.isCloseButtonEnabled,
+          });
+        }
+        break;
+
+      case 'surveyCompleted':
+        closeSpotCheckAndHandleSurveyEnd();
+        // spotchecksListener.emitSurveyCompleted(data.response);
+        break;
+
+      case 'surveyLoadStarted':
+        // spotchecksListener.emitSurveyLoadStarted(data.surveyDetails);
+        break;
+
+      default:
+        break;
+    }
+  }
+}
+
+@Component({
+  selector: 'close-svg',
+  template: `
+    <svg
+      [attr.width]="size"
+      [attr.height]="size"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="https://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6665 10.667L21.3332 21.3337M21.3332 10.667L10.6665 21.3337"
+        [attr.stroke]="stroke"
+        [attr.stroke-width]="strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class CloseSVGComponent {
+  @Input() size: number = 32;
+  @Input() stroke: string = '#919191';
+  @Input() strokeWidth: number = 1.5;
+}
+
+@Component({
+  selector: 'spotcheck-close-button',
+  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;"/>
+      </div>
+      <div style="position: absolute; top: 16px; right: 16px; z-index: 100001; cursor: pointer;" (click)="onClick()" *ngIf="isVisible && !isMiniCard">
+        <close-svg [size]="size" [stroke]="stroke" [strokeWidth]="strokeWidth"/>
+      </div>
+  `,
+  standalone: true,
+  imports: [CommonModule, 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() {
+    this.stateService = getSpotcheckStateService();
+    this.state = this.stateService.getState();
+    this.updateComponentState();
+
+    this.stateSubscription = this.stateService.state$.subscribe(
+      (newState: SpotcheckState) => {
+        this.state = newState;
+        this.updateComponentState();
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (this.stateSubscription) {
+      this.stateSubscription.unsubscribe();
+    }
+  }
+
+  private updateComponentState(): void {
+    this.isVisible =
+      this.state.isCloseButtonEnabled &&
+      ((this.state.currentQuestionHeight > 0 && !this.state.isFullScreenMode) ||
+        (this.state.isFullScreenMode &&
+          ((!this.state.isClassicLoading &&
+            this.state.spotCheckType === 'classic') ||
+            (!this.state.isChatLoading &&
+              this.state.spotCheckType === 'chat'))));
+    this.isMiniCard = this.state.spotChecksMode === 'miniCard';
+    this.stroke = this.isMiniCard ? 'black' : this.state.closeButtonStyle?.['ctaButton'] || 'black';
+  }
+
+  onClick = async () => {
+    await closeSpotCheck();
+    handleSurveyEnd();
+  };
+}
+
+
+@Component({
+  selector: 'SpotCheckComponent',
+  templateUrl: './SpotCheckComponent.html',
+  styleUrls: ['./SpotCheckComponent.css'],
+  standalone: true,
+  imports: [CommonModule, WebViewComponent, CloseButtonComponent],
+})
+export class SpotCheckComponent implements OnInit, OnDestroy {
+  state: SpotcheckState;
+  private spotcheckStateService: SpotcheckStateService;
+  private stateSubscription: Subscription;
+  componentStyles: any = {};
+  avatarUrl: string = '';
+
+  constructor() {
+    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";
+      }
+    );
+  }
+
+  ngOnInit(): void {
+    this.initializeComponent();
+  }
+
+  ngOnDestroy(): void {
+    if (this.stateSubscription) {
+      this.stateSubscription.unsubscribe();
+    }
+  }
+
+  private updateComponentStyles(): void {
+    this.componentStyles = getSpotcheckComponentCssStyles(this.state);
+  }
+
+  initializeComponent = async () => {
+    try {
+      const domainName = this.state.domainName;
+      const targetToken = this.state.targetToken;
+      const response = await axios.get(
+        `https://${domainName}/api/internal/spotcheck/widget/${targetToken}/init`
+      );
+      const data = response.data;
+
+      if (data.filteredSpotChecks && data.filteredSpotChecks.length > 0) {
+        let classicIframe = false;
+        let chatIframe = false;
+
+        data.filteredSpotChecks.forEach((spotcheck: any) => {
+          if (
+            spotcheck.appearance.mode === 'fullScreen' &&
+            ischatSurvey(spotcheck?.survey?.surveyType)
+          ) {
+            chatIframe = true;
+          } else {
+            classicIframe = true;
+          }
+        });
+
+        const newClassicUrl = classicIframe
+          ? `https://${domainName}/eui-template/classic`
+          : '';
+        const newChatUrl = chatIframe
+          ? `https://${domainName}/eui-template/chat`
+          : '';
+
+        this.spotcheckStateService.setState({
+          filteredSpotChecks: data.filteredSpotChecks,
+          classicUrl: newClassicUrl,
+          chatUrl: newChatUrl,
+        });
+      }
+    } catch (error) {
+      console.log('Error initializing widget:', JSON.stringify(error));
+    }
+  };
+}

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

@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { SpotcheckState } from './types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SpotcheckStateService {
+  private initialState: SpotcheckState = {
+    isVisible: false,
+    spotcheckPosition: 'bottom',
+    spotcheckURL: '',
+    spotcheckID: 0,
+    spotcheckContactID: 0,
+    afterDelay: 0.0,
+    maxHeight: 0.5,
+    currentQuestionHeight: 0,
+    isFullScreenMode: false,
+    isBannerImageOn: false,
+    triggerToken: '',
+    closeButtonStyle: {},
+    isCloseButtonEnabled: false,
+    isSpotPassed: false,
+    isChecksPassed: false,
+    customEventsSpotChecks: [],
+    targetToken: '',
+    domainName: '',
+    userDetails: {},
+    variables: {},
+    customProperties: {},
+    traceId: '',
+    isClassicLoading: true,
+    isChatLoading: true,
+    classicUrl: '',
+    chatUrl: '',
+    classicWebViewRef: null,
+    chatWebViewRef: null,
+    filteredSpotChecks: [],
+    spotCheckType: '',
+    isMounted: false,
+    textPosition: 0,
+    screenHeight: 0,
+    keyBoardHeight: 0,
+    spotChecksMode: '',
+    avatarEnabled: false,
+    avatarUrl: '',
+    screenwiseUserDetails: {}
+  };
+  
+  private spotcheckState = new BehaviorSubject<SpotcheckState>(this.initialState);
+  state$ = this.spotcheckState.asObservable();
+
+  setState(state: Partial<SpotcheckState>) {
+    this.spotcheckState.next({ ...this.spotcheckState.value, ...state });
+  }
+  
+  clearState() {
+    this.spotcheckState.next(this.initialState);
+  }
+
+  getState() {
+    return this.spotcheckState.getValue();
+  }
+}