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

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

@@ -0,0 +1,286 @@
+import { generateTraceId, getOS, setAppearance } from './helpers';
+import { getStoredUUID, setUUID } from './storage';
+import { TrackScreenProps, UserDetails, Variables, CustomProperties, TrackEventProps } from './types';
+import { getSpotcheckStateService } from './helpers';
+import axios from 'axios';
+
+export const sendTrackScreenRequest = async ({
+  screen,
+  options,
+}: TrackScreenProps) => {
+  try {
+    const spotcheckStateService = getSpotcheckStateService();
+    const oldState = spotcheckStateService.getState();
+    let variables = { ...oldState.variables } as Variables;
+    let customProperties = { ...oldState.customProperties } as CustomProperties;
+    let userDetails = { ...oldState.userDetails } as UserDetails;    
+
+    if (options && options.variables && Object.keys(options.variables).length > 0) {
+      variables = { ...variables, ...options.variables };
+    }
+    if (options && options.customProperties && Object.keys(options.customProperties).length > 0) {
+      customProperties = { ...customProperties, ...options.customProperties };
+    }
+    if (options && options.userDetails && Object.keys(options.userDetails).length > 0) {
+      userDetails = { ...userDetails, ...options.userDetails };
+    }
+
+    let traceId = oldState.traceId;
+    if (!traceId) {
+      traceId = generateTraceId();
+    }
+
+    if (!userDetails.uuid && !userDetails.email && !userDetails.mobile) {
+      const uuid = getStoredUUID();
+      if (uuid) {
+        userDetails.uuid = uuid;
+      }
+    }
+
+    spotcheckStateService.setState({
+      traceId,
+      screenwiseUserDetails: {
+        [screen]: userDetails
+      },
+    });
+
+    const state = spotcheckStateService.getState();
+    let { isSpotPassed, isChecksPassed } = state;
+    const payload = {
+      screenName: screen,
+      variables: variables,
+      userDetails: userDetails,
+      visitor: {
+        deviceType: 'MOBILE',
+        operatingSystem: await getOS(),
+        screenResolution: {
+          height: window.innerHeight,
+          width: window.innerWidth,
+        },
+        currentDate: new Date().toISOString(),
+        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      },
+      traceId: state.traceId,
+      customProperties: customProperties,
+    };
+
+    const url = `https://${state.domainName}/api/internal/spotcheck/widget/${state.targetToken}/properties?isSpotCheck=true`;
+    const response = await axios.post(url, payload, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if(response.status === 200) {
+      const responseJson = response.data;
+
+      if (responseJson.uuid) {
+        setUUID(responseJson.uuid);
+      }
+
+      if (responseJson?.show) {
+        if (responseJson?.show) {
+          const appearance_response = await setAppearance(
+            responseJson,
+            screen,
+            state.domainName,
+            traceId,
+            variables
+          );
+          if (appearance_response) {
+            isSpotPassed = true;
+            spotcheckStateService.setState({ isSpotPassed });
+            return { valid: true };
+          }
+        } else {
+          throw new Error('');
+        }
+      }
+    
+      if (!isSpotPassed && responseJson?.checkPassed) {
+        if (responseJson.checkCondition) {
+          const checkCondition = responseJson.checkCondition;
+          spotcheckStateService.setState({ afterDelay: checkCondition.afterDelay || 0 });
+          if (checkCondition.customEvent) {
+            spotcheckStateService.setState({ customEventsSpotChecks: [responseJson] });
+            throw new Error('');
+          }
+        }
+
+        const appearance_response = await setAppearance(
+          responseJson,
+          screen,
+          state.domainName,
+          traceId,
+          variables
+        );
+        if (appearance_response) {
+          isChecksPassed = true;
+          spotcheckStateService.setState({ isChecksPassed });
+          return { valid: true };
+        }
+      }
+
+      if (!isSpotPassed && !isChecksPassed && responseJson?.multiShow != null) {
+        if (responseJson.multiShow) {
+          spotcheckStateService.setState({ customEventsSpotChecks: responseJson.resultantSpotCheck });
+
+          let selectedSpotCheck = {};
+          let minDelay: number = Number.POSITIVE_INFINITY;
+
+          for (const spotcheck of responseJson.resultantSpotCheck) {
+            const checks = spotcheck?.checks || {};
+            if (Object.keys(checks).length === 0) {
+              minDelay = 0;
+              selectedSpotCheck = spotcheck;
+            } else if (checks.afterDelay != null) {
+              const delay = parseFloat(checks.afterDelay);
+              if (minDelay > delay) {
+                minDelay = delay;
+                selectedSpotCheck = spotcheck;
+              }
+            }
+          }
+
+          if (Object.keys(selectedSpotCheck).length > 0) {
+            spotcheckStateService.setState({ afterDelay: minDelay });
+            const appearance_response = await setAppearance(
+              selectedSpotCheck,
+              screen,
+              state.domainName,
+              traceId,
+              variables
+            );
+            if (appearance_response) {
+              return { valid: true };
+            }
+          }
+        }
+      }
+
+      throw new Error(responseJson?.reason.toString());
+    } else {
+      throw new Error(`Received status code ${response.status}`);
+    }
+  } catch (error: any) {
+    return { valid: false, error: error.message };
+  }
+};
+
+
+export const sendTrackEventRequest = async ({ screen, event }: TrackEventProps) => {
+  try {
+    const intMax = Number.POSITIVE_INFINITY;
+    const state = getSpotcheckStateService().getState();
+    let selectedSpotCheckID = intMax;
+    let { isSpotPassed } = state;
+    if (state.customEventsSpotChecks.length > 0) {
+      const eventKeys = Object.keys(event);
+      for (const spotCheck of state.customEventsSpotChecks) {
+        const checks = spotCheck?.['checks'] ?? spotCheck?.['checkCondition'];
+
+        if (checks) {
+          const customEvent = checks?.customEvent;
+
+          if (eventKeys.includes(customEvent?.eventName)) {
+            selectedSpotCheckID =
+              spotCheck?.['id'] ?? spotCheck?.['spotCheckId'] ?? intMax;
+
+            if (selectedSpotCheckID !== intMax) {
+              const payload = {
+                screenName: screen,
+                variables: state.variables,
+                userDetails: state.screenwiseUserDetails[screen] || {},
+                visitor: {
+                  deviceType: 'MOBILE',
+                  operatingSystem: await getOS(),
+                  screenResolution: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                  },
+                  currentDate: new Date().toISOString(),
+                  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                },
+                spotCheckId: selectedSpotCheckID,
+                eventTrigger: {
+                  customEvent: event,
+                },
+                traceId: state.traceId,
+                customProperties: state.customProperties,
+              };
+
+              const url = `https://${state.domainName}/api/internal/spotcheck/widget/${state.targetToken}/eventTrigger?isSpotCheck=true`;
+
+              try {
+                const response = await axios.post(url, payload, {
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                });
+
+                if (response.status === 200) {
+                  const responseJson = response.data;
+                  if (responseJson?.show != null) {
+                    if (responseJson?.show) {
+                      const appearance_response = await setAppearance(
+                        responseJson,
+                        screen,
+                        state.domainName,
+                        state.traceId,
+                        state.variables
+                      );
+
+                      if (appearance_response) {
+                        getSpotcheckStateService().setState({ isSpotPassed: true });
+                        isSpotPassed = true;
+                        return { valid: true };
+                      }
+                    }
+                  }
+
+                  if (!isSpotPassed && responseJson?.eventShow) {
+                    if (responseJson?.checkCondition != null) {
+                      const checkCondition = responseJson?.checkCondition;
+                      getSpotcheckStateService().setState({
+                        afterDelay: checkCondition?.afterDelay ?? 0,
+                      });
+
+                      if (checkCondition?.customEvent != null) {
+                        getSpotcheckStateService().setState({
+                          afterDelay: checkCondition?.customEvent?.delayInSeconds ?? 0,
+                        });
+                      }
+                    }
+
+                    const appearance_response = await setAppearance(
+                      responseJson,
+                      screen,
+                      state.domainName,
+                      state.traceId,
+                      state.variables
+                    );
+
+                    if (appearance_response) {
+                      return { valid: true };
+                    }
+                  }
+
+                  throw new Error(responseJson?.reason.toString());
+                } else {
+                  throw new Error(`Received status code ${response.status}`);
+                }
+              } catch (error: any) {
+                throw new Error(error.message);
+              }
+            }
+          }
+        }
+      }
+      throw new Error('');
+    } else {
+      throw new Error('');
+    }
+  } catch (error: any) {
+    return { valid: false, error: error.message };
+  }
+};

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

@@ -0,0 +1,401 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Device } from '@capacitor/device';
+import { SpotcheckState } from './types';
+import axios from 'axios';
+import { SpotcheckStateService } from './SpotcheckStateService';
+
+let globalSpotcheckStateService: SpotcheckStateService;
+
+export const getSpotcheckStateService = (): SpotcheckStateService => {
+  if (!globalSpotcheckStateService) {
+    globalSpotcheckStateService = new SpotcheckStateService();
+  }
+  return globalSpotcheckStateService;
+};
+
+export function generateTraceId() {
+  const uuidString = uuidv4();
+  const timestamp = Date.now();
+  return `${uuidString}-${timestamp}`;
+}
+
+export const ischatSurvey = (type: String) => {
+  return (
+    type === 'Conversational' ||
+    type === 'CESChat' ||
+    type === 'NPSChat' ||
+    type === 'CSATChat'
+  );
+};
+
+export const getOS = async () => {
+  const info = await Device.getInfo();
+  return info.operatingSystem;
+};
+
+export const setAppearance = async (
+  responseJson: any,
+  screen: string,
+  domainName: string,
+  traceId: string,
+  variables: Record<string, any>
+) => {
+  try {
+    const spotcheckStateService = getSpotcheckStateService();
+    let state = spotcheckStateService.getState();
+
+    if (responseJson) {
+      const currentSpotcheck = state.filteredSpotChecks.find(
+        (spotcheck) =>
+          spotcheck['id'] === responseJson?.spotCheckId ||
+          spotcheck['id'] === responseJson?.id
+      );
+
+      const appearance = responseJson?.appearance;
+      let chat = false;
+
+      let updatedState: Partial<SpotcheckState> = {};
+
+      if (appearance) {
+        const {
+          position,
+          closeButton,
+          colors,
+          cardProperties,
+          mode,
+          bannerImage,
+        } = appearance;
+        const { maxHeight } = cardProperties || {};
+
+        updatedState = {
+          spotcheckPosition:
+            position === 'top_full' || position === 'center_top'
+              ? 'top'
+              : position === 'center_center'
+              ? 'center'
+              : 'bottom',
+          isCloseButtonEnabled: closeButton ?? true,
+          closeButtonStyle: colors?.overrides ?? {},
+          maxHeight: maxHeight ? parseFloat(maxHeight) / 100 : 0,
+          spotCheckType:
+            ischatSurvey(currentSpotcheck?.['survey']?.surveyType) &&
+            mode === 'fullScreen'
+              ? 'chat'
+              : 'classic',
+          isFullScreenMode: mode === 'fullScreen',
+          isBannerImageOn: bannerImage?.enabled ?? false,
+          spotChecksMode: mode,
+          avatarEnabled: appearance?.avatar?.enabled ?? false,
+          avatarUrl: appearance?.avatar?.avatarUrl ?? '',
+        };
+
+        chat = updatedState.spotCheckType === 'chat';
+      }
+
+      const spotCheckId = responseJson?.spotCheckId ?? 0;
+      const spotCheckContactId =
+        responseJson?.spotCheckContactId ??
+        responseJson?.spotCheckContact?.id ??
+        0;
+      const triggerToken = responseJson?.triggerToken ?? '';
+
+      updatedState = {
+        ...updatedState,
+        spotcheckID: spotCheckId,
+        spotcheckContactID: spotCheckContactId,
+        triggerToken,
+      };
+
+      const baseSpotcheckURL = `https://${domainName}/s/spotcheck/${triggerToken}/${
+        chat ? 'config' : 'bootstrap'
+      }?spotcheckContactId=${spotCheckContactId}&traceId=${traceId}&spotcheckUrl=${screen}`;
+
+      let fullSpotcheckURL = baseSpotcheckURL;
+
+      Object.entries(variables).forEach(([key, value]) => {
+        fullSpotcheckURL += `&${key}=${value}`;
+      });
+
+      updatedState.spotcheckURL = fullSpotcheckURL;
+      spotcheckStateService.setState(updatedState);
+
+      try {
+        const response = await axios.get(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.isClassicLoading;
+
+        const resetStateData = {
+          type: 'RESET_STATE',
+          state: {
+            ...(response.data || {}),
+            skip: true,
+            spotCheckAppearance: {
+              ...(appearance || {}),
+              targetType: 'MOBILE',
+            },
+            spotcheckUrl: screen,
+            traceId,
+            elementBuilderParams: {
+              ...(variables || {}),
+            },
+          },
+        };
+
+        const sendMessageToIframe = (iframe: HTMLIFrameElement, data: any) => {
+          if (iframe && iframe.contentWindow) {
+            try {
+              iframe.contentWindow.postMessage(data, '*');
+            } catch (error) {
+              console.error('❌ Failed to send message to iframe:', error);
+            }
+          }
+        };
+
+        const communicateWithWebView = async (iframe: HTMLIFrameElement) => {
+          await new Promise(resolve => setTimeout(() => {
+            sendMessageToIframe(iframe, resetStateData);
+            sendMessageToIframe(iframe, theme_payload);
+            resolve(true);
+          }, 2000));
+        };
+
+        if (webViewRef) {
+          if (isLoading === false) {
+            communicateWithWebView(webViewRef);
+            start();
+            return true;
+          } else {
+            // todo: recheck this
+            const unsubscribe = spotcheckStateService.state$.subscribe(
+              (currentState) => {
+                const {
+                  isChatLoading,
+                  isClassicLoading,
+                  chatWebViewRef,
+                  classicWebViewRef,
+                } = currentState;
+
+                if ((!isChatLoading && chat) || (!isClassicLoading && !chat)) {
+                  unsubscribe.unsubscribe();
+                  const activeWebViewRef = chat
+                    ? chatWebViewRef
+                    : classicWebViewRef;
+                  if (activeWebViewRef) {
+                    communicateWithWebView(activeWebViewRef);
+                    start();
+                  } else {
+                    console.warn(
+                      '⚠️ Active WebView ref is null after loading completed'
+                    );
+                  }
+                }
+              }
+            );
+            return true;
+          }
+        } else {
+          const unsubscribeWebView = spotcheckStateService.state$.subscribe(
+            (currentState) => {
+              const updatedWebViewRef = chat
+                ? currentState.chatWebViewRef
+                : currentState.classicWebViewRef;
+              const updatedIsLoading = chat
+                ? currentState.isChatLoading
+                : currentState.isClassicLoading;
+
+              if (updatedWebViewRef) {
+                if (!updatedIsLoading) {
+                  unsubscribeWebView.unsubscribe();
+                  communicateWithWebView(updatedWebViewRef);
+                  start();
+                } else {
+                  console.log('⏳ WebView ref available but still loading...');
+                }
+              }
+            }
+          );
+          return true;
+        }
+      } catch (error: any) {
+        throw new Error(error.message);
+      }
+    }
+    throw new Error('Something went wrong');
+  } catch (error: any) {
+    throw new Error(error.message);
+  }
+};
+
+export const start = () => {
+  const state = getSpotcheckStateService().getState();
+  setTimeout(() => {
+    getSpotcheckStateService().setState({ isVisible: true });
+  }, state.afterDelay * 1000);
+};
+
+export const closeSpotCheck = async () => {
+  try {
+    const stateService = getSpotcheckStateService();
+    const state = stateService.getState();
+    const payload = {
+      traceId: state.traceId,
+      triggerToken: state.triggerToken,
+    };
+
+    const response = await fetch(
+      `https://${state.domainName}/api/internal/spotcheck/dismiss/${state.spotcheckContactID}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      }
+    );
+
+    if (response.status != 200) {
+      console.log(`Error: ${response.status}`);
+    }
+  } catch (error) {
+    console.log('Error parsing JSON:', error);
+  }
+};
+
+export const handleSurveyEnd = () => {
+  const stateService = getSpotcheckStateService();
+  const state = stateService.getState();
+  const webViewRef =
+    state.spotCheckType === 'chat'
+      ? state.chatWebViewRef
+      : state.classicWebViewRef;
+
+  webViewRef?.current?.injectJavaScript(`
+      (function() {
+        window.dispatchEvent(new MessageEvent('message', {
+          data: ${JSON.stringify({ type: 'UNMOUNT_APP' })}
+        }));
+      })();
+    `);
+
+  const updatedState: Partial<SpotcheckState> = {
+    isVisible: false,
+    isCloseButtonEnabled: false,
+    isFullScreenMode: false,
+    spotcheckID: 0,
+    currentQuestionHeight: 0,
+    closeButtonStyle: {},
+    spotcheckContactID: 0,
+    spotcheckURL: '',
+    spotcheckPosition: 'bottom',
+    isMounted: false,
+    spotCheckType: '',
+    screenHeight: 0,
+    keyBoardHeight: 0,
+    textPosition: 0,
+    spotChecksMode: '',
+    avatarEnabled: false,
+    avatarUrl: '',
+  };
+
+  stateService.setState(updatedState);
+};
+
+export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => { 
+  let styles = {}
+  let wrapperStyles = {}
+  let extraPaddingForMiniCardCloseButtonIfTopPosition = 0;
+  if (state.isFullScreenMode && state.isVisible) {
+    wrapperStyles = {
+      display: 'flex',
+      height: '100%',
+    };
+    styles = {
+      display: 'flex',
+      height: '100%',
+    };
+  }
+  
+  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.isCloseButtonEnabled) {
+        height = height - 40;
+      }
+    }
+
+    switch (state.spotcheckPosition) {
+      case 'bottom':
+        styles = {
+          display: 'flex',
+          height: height+'px',
+        };
+        wrapperStyles = {
+          display: 'flex',
+          justifyContent: 'flex-end',
+        };
+        break;
+        
+        case 'top':
+          styles = {
+            display: 'flex',
+            height: height+'px',
+          };
+          wrapperStyles = {
+            display: 'flex',
+            justifyContent: 'flex-start',
+          };
+          if(state.spotChecksMode === 'miniCard' && state.isCloseButtonEnabled) {
+            extraPaddingForMiniCardCloseButtonIfTopPosition = 30;
+          }
+        break;
+          
+        case 'center':
+          styles = {
+            display: 'flex',
+            height: height+'px',
+          };
+          wrapperStyles = {
+            display: 'flex',
+            justifyContent: 'center',
+          };
+        break;
+        
+      default:
+        break;
+    }
+  }
+  
+  return {
+    wrapperStyles: {
+      position: 'fixed', 
+      width: '100%', 
+      height: '100%', 
+      top: '0', 
+      left: '0', 
+      backgroundColor: 'rgba(0, 0, 0, 0.3)', 
+      zIndex: '99999999',
+      display: 'none',
+      flexDirection: 'column',
+      ...wrapperStyles
+    },
+    styles: {
+      display: 'none',
+      flexDirection: 'column',
+      paddingTop: extraPaddingForMiniCardCloseButtonIfTopPosition+'px',
+      ...styles,
+    }
+  };
+};
+
+export const closeSpotCheckAndHandleSurveyEnd = async () => {
+  await closeSpotCheck();
+  handleSurveyEnd();
+};

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

@@ -0,0 +1,9 @@
+export { initializeSpotChecks, trackScreen, trackEvent } from './SpotCheck';
+export type {
+  UserDetails,
+  Variables,
+  CustomProperties,
+  TrackScreenProps,
+  TrackEventProps,
+  InitializeSpotChecksProps,
+} from './types';

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

@@ -0,0 +1,7 @@
+export const getStoredUUID = () => {
+    return localStorage.getItem('SurveySparrowUUID') || null;
+}
+
+export const setUUID = (uuid: string) => {
+    localStorage.setItem('SurveySparrowUUID', uuid);
+}