chayns-api 1.0.8 → 1.0.10-beta.1

package/dist/esm/hooks/useCurrentPage.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
 
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useCurrentPage = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.currentPage);

package/dist/esm/hooks/useCustomData.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
 
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useCustomData = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.customData);

package/dist/esm/hooks/useDevice.js

@@ -1,6 +1,6 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useDevice = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.device);

package/dist/esm/hooks/useDialogState.js

@@ -0,0 +1,24 @@
+import { useContextSelector } from "use-context-selector";
+import { ChaynsContext, ChaynsFunctionsContext } from "../components/ChaynsContext";
+
+/**
+ * @category Hooks
+ */
+export const useDialogState = () => {
+  const closeDialog = useContextSelector(ChaynsFunctionsContext, v => v === null || v === void 0 ? void 0 : v.closeDialog);
+  const isClosingRequested = useContextSelector(ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.dialog).isClosingRequested);
+  return {
+    closeDialog,
+    isClosingRequested
+  };
+};
+
+/**
+ * @category Hooks
+ */
+export const useDialogData = () => {
+  const inputData = useContextSelector(ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.dialog).dialogInput);
+  return {
+    inputData
+  };
+};

package/dist/esm/hooks/useEnvironment.js

@@ -1,6 +1,6 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useEnvironment = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.environment);

package/dist/esm/hooks/useFunctions.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from "use-context-selector";
 import { ChaynsFunctionsContext } from "../components/ChaynsContext";
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useFunctions = () => {
   const t = useContextSelector(ChaynsFunctionsContext, f => f || {});

package/dist/esm/hooks/useIsAdminMode.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useIsAdminMode = () => {
   var _useContextSelector;

package/dist/esm/hooks/useLanguage.js

@@ -1,6 +1,6 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useLanguage = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.language);

package/dist/esm/hooks/usePages.js

@@ -1,8 +1,8 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
 import { moduleWrapper } from "../components/ChaynsProvider";
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const usePages = function () {
   let {
@@ -16,8 +16,8 @@ export const usePages = function () {
   }
   return pages;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const usePage = _ref => {
   let {

package/dist/esm/hooks/useParameters.js

@@ -1,6 +1,6 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useParameters = () => useContextSelector(ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.parameters) || []);

package/dist/esm/hooks/useSite.js

@@ -1,6 +1,6 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useSite = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.site);

package/dist/esm/hooks/useUser.js

@@ -1,6 +1,6 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useUser = () => useContextSelector(ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.user) || {});

package/dist/esm/hooks/useValues.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useValues = () => {
   const t = useContextSelector(ChaynsContext, v => v || {});

package/dist/esm/hooks/windowMetricsListener.js

@@ -2,8 +2,8 @@ import { useContextSelector } from 'use-context-selector';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChaynsFunctionsContext } from '../components/ChaynsContext';
 import { ScreenSize } from '../types/IChaynsReact';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useWindowMetricsListener = () => {
   const addListener = useContextSelector(ChaynsFunctionsContext, v => v.addWindowMetricsListener);
@@ -18,8 +18,8 @@ export const useWindowMetricsListener = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useWindowMetrics = function () {
   let {

package/dist/esm/host/ChaynsHost.js

@@ -22,7 +22,8 @@ const ChaynsHost = _ref => {
     parameters,
     customData,
     environment,
-    preventStagingReplacement
+    preventStagingReplacement,
+    dialog
   } = _ref;
   switch (type) {
     case 'client-iframe':
@@ -41,7 +42,8 @@ const ChaynsHost = _ref => {
         parameters: parameters,
         environment: environment,
         customData: customData,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'client-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {
@@ -77,7 +79,8 @@ const ChaynsHost = _ref => {
         parameters: parameters,
         environment: environment,
         customData: customData,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'server-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {

package/dist/esm/host/iframe/HostIframe.js

@@ -22,7 +22,8 @@ const HostIframe = _ref => {
     parameters,
     environment,
     customData,
-    preventStagingReplacement
+    preventStagingReplacement,
+    dialog
   } = _ref;
   const eventTarget = useRef();
   const ref = useRef();
@@ -48,7 +49,8 @@ const HostIframe = _ref => {
     language,
     parameters,
     environment,
-    customData
+    customData,
+    dialog
   };
   // endregion
 
@@ -60,7 +62,7 @@ const HostIframe = _ref => {
       if (postForm) {
         var _await$functions$getA;
         const accessToken = (_await$functions$getA = await functions.getAccessToken()) !== null && _await$functions$getA !== void 0 ? _await$functions$getA : {};
-        void postIframeForm(replaceStagingUrl(preventStagingReplacement, src, environment.runtimeEnvironment), JSON.stringify({
+        void postIframeForm(replaceStagingUrl(preventStagingReplacement, src, environment.buildEnvironment), JSON.stringify({
           ...initialData,
           pages: undefined,
           ...accessToken
@@ -108,6 +110,7 @@ const HostIframe = _ref => {
   useUpdateData(eventTarget.current, 'parameters', parameters);
   useUpdateData(eventTarget.current, 'environment', environment);
   useUpdateData(eventTarget.current, 'customData', customData);
+  useUpdateData(eventTarget.current, 'dialog', dialog);
   // endregion
 
   return /*#__PURE__*/React.createElement("iframe", _extends({

package/dist/esm/types/IChaynsReact.js

@@ -1,3 +1,9 @@
+export let DialogButtonType;
+(function (DialogButtonType) {
+  DialogButtonType[DialogButtonType["OK"] = 1] = "OK";
+  DialogButtonType[DialogButtonType["CANCEL"] = -1] = "CANCEL";
+  DialogButtonType[DialogButtonType["NEGATIVE"] = 0] = "NEGATIVE";
+})(DialogButtonType || (DialogButtonType = {}));
 export let ScreenSize;
 (function (ScreenSize) {
   ScreenSize[ScreenSize["XS"] = 0] = "XS";
@@ -235,4 +241,16 @@ var selectType;
 (function (selectType) {
   selectType[selectType["DEFAULT"] = 0] = "DEFAULT";
   selectType[selectType["ICON"] = 1] = "ICON";
-})(selectType || (selectType = {}));
+})(selectType || (selectType = {}));
+export let DialogType;
+(function (DialogType) {
+  DialogType["ALERT"] = "alert";
+  DialogType["CONFIRM"] = "confirm";
+  DialogType["DATE"] = "date";
+  DialogType["FILE_SELECT"] = "fileSelect";
+  DialogType["IFRAME"] = "iframe";
+  DialogType["MODULE"] = "module";
+  DialogType["INPUT"] = "input";
+  DialogType["SELECT"] = "select";
+  DialogType["TOAST"] = "toast";
+})(DialogType || (DialogType = {}));

package/dist/esm/util/deviceHelper.js

@@ -29,7 +29,7 @@ const getDeviceInfo = (userAgent, acceptHeader) => {
   result.accessToken = undefined; // TODO
   result.os = parsedUA === null || parsedUA === void 0 ? void 0 : parsedUA.os;
   if (typeof window !== 'undefined') {
-    result.screenSize = getScreenSize(window.innerWidth);
+    result.screenSize = getScreenSize(window.innerWidth, window.innerHeight);
   } else {
     // estimate size over user agent, very inaccurate, could be improved by setting a cookie with the screensize
     const screenSizeByUA = /mobi/i.test(userAgent) ? ScreenSize.SM : ScreenSize.XL;
@@ -42,15 +42,16 @@ const getDeviceInfo = (userAgent, acceptHeader) => {
 export const getClientDeviceInfo = () => ({
   isTouch: navigator.maxTouchPoints > 0 && window.matchMedia('(pointer: coarse)')
 });
-export const getScreenSize = width => {
+export const getScreenSize = (width, height) => {
+  const size = Math.max(width, height);
   let value;
-  if (width > 1200) {
+  if (size > 1200) {
     value = ScreenSize.XL;
-  } else if (width > 993) {
+  } else if (size > 993) {
     value = ScreenSize.LG;
-  } else if (width > 769) {
+  } else if (size > 769) {
     value = ScreenSize.MD;
-  } else if (width > 556) {
+  } else if (size > 556) {
     value = ScreenSize.SM;
   } else {
     value = ScreenSize.XS;

package/dist/esm/wrapper/AppWrapper.js

@@ -1,14 +1,17 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /* eslint-disable */
 // @ts-nocheck
 
+import throttle from 'lodash.throttle';
 import { Environment, Font, Gender, IconType, RuntimeEnviroment, TappEvent } from '../types/IChaynsReact';
-import invokeAppCall from "../util/appCall";
-import getDeviceInfo, { getScreenSize } from "../util/deviceHelper";
-import { removeVisibilityChangeListener } from "../calls/visibilityChangeListener";
-import getUserInfo from "../calls/getUserInfo";
-import { sendMessageToGroup, sendMessageToPage, sendMessageToUser } from "../calls/sendMessage";
-import { addApiListener, dispatchApiEvent } from "../helper/apiListenerHelper";
+import invokeAppCall from '../util/appCall';
+import getDeviceInfo, { getScreenSize } from '../util/deviceHelper';
+import getUserInfo from '../calls/getUserInfo';
+import { sendMessageToGroup, sendMessageToPage, sendMessageToUser } from '../calls/sendMessage';
+import { addApiListener, dispatchApiEvent, removeApiListener } from '../helper/apiListenerHelper';
+let appWrapperDialogId = 0;
 export class AppWrapper {
   mapOldApiToNew(retVal) {
     var _window, _window2, _AppInfo$TappSelected;
@@ -85,57 +88,91 @@ export class AppWrapper {
     };
   }
   constructor() {
+    var _this = this;
     _defineProperty(this, "values", null);
-    _defineProperty(this, "accessToken", "");
+    _defineProperty(this, "accessToken", '');
     _defineProperty(this, "counter", 0);
     _defineProperty(this, "functions", {
       getAccessToken: async () => ({
         accessToken: this.accessToken
       }),
-      // addGeoLocationListener: async (value , callback) => {
-      //     return invokeAppCall({
-      //         'action': 14,
-      //         'value': {
-      //             'permanent': false,
-      //             callback: callback
-      //         }
-      //     });
-      // },
-      // addScrollListener: async (value, callback) => {
-      //
-      // },
+      addGeoLocationListener: async (value, callback) => {
+        const {
+          id,
+          shouldInitialize
+        } = addApiListener('geoLocationListener', callback);
+        if (shouldInitialize) {
+          this.appCall(14, {
+            permanent: true
+          }, {
+            callback: v => {
+              var _v$accuracy, _v$code;
+              dispatchApiEvent('geoLocationListener', {
+                latitude: v.latitude,
+                longitude: v.longitude,
+                accuracy: (_v$accuracy = v.accuracy) !== null && _v$accuracy !== void 0 ? _v$accuracy : null,
+                speed: v.speed,
+                code: (_v$code = v.code) !== null && _v$code !== void 0 ? _v$code : null
+              });
+            }
+          });
+        }
+        return id;
+      },
+      addScrollListener: async (value, callback) => {
+        let throttledCallback = callback;
+        if (value.throttle) {
+          throttledCallback = throttle(callback, value.throttle);
+        }
+        const {
+          id,
+          shouldInitialize
+        } = addApiListener('scrollListener', throttledCallback);
+        if (shouldInitialize) {
+          window.addEventListener('scroll', this.scrollListener = () => {
+            void (async () => {
+              dispatchApiEvent('scrollListener', {
+                scrollX: window.scrollX,
+                scrollY: window.scrollY
+              });
+            })();
+          });
+        }
+        return id;
+      },
       addVisibilityChangeListener: async callback => {
+        const {
+          id,
+          shouldInitialize
+        } = addApiListener('visibilityChangeListener', callback);
+        if (shouldInitialize) {
+          this.appCall(60, {}, {
+            callback: v => {
+              dispatchApiEvent('visibilityChangeListener', {
+                isVisible: v.tappEvent === TappEvent.OnShow,
+                tappEvent: v.tappEvent
+              });
+            }
+          });
+        }
+        return id;
+      },
+      addWindowMetricsListener: async callback => {
         const {
           id,
           shouldInitialize
         } = addApiListener('windowMetricsListener', callback);
-        this.appCall(60, {}, {
-          callback: v => {
-            console.log("v", v);
-            dispatchApiEvent("windowMetricsListener", {
-              isVisible: v.tappEvent === TappEvent.OnShow,
-              tappEvent: v.tappEvent
-            });
-          }
-        });
+        if (shouldInitialize) {
+          window.addEventListener('resize', this.resizeListener = () => {
+            void (async () => {
+              dispatchApiEvent('windowMetricsListener', await this.functions.getWindowMetrics());
+            })();
+          });
+        }
         return id;
       },
-      // addWindowMetricsListener: async (callback) => {
-      //     const { id, shouldInitialize } = addApiListener('windowMetricsListener', callback);
-      //
-      //     if (shouldInitialize) {
-      //         window.addEventListener('resize', this.resizeListener = () => {
-      //             void (async() => {
-      //                 dispatchApiEvent('windowMetricsListener', {
-      //
-      //                 });
-      //             })();
-      //         })
-      //     }
-      //     return id;
-      // },
       customCallbackFunction: async () => {
-        this.notImplemented("customCallbackFunction");
+        this.notImplemented('customCallbackFunction');
       },
       getAvailableSharingServices: async () => {
         const res = await this.appCall(79);
@@ -224,9 +261,9 @@ export class AppWrapper {
           awaitResult: false
         });
       },
-      // openUrl: async (value) => {
-      //
-      // },
+      openUrl: async value => {
+        window.open(value.url);
+      },
       openVideo: async value => {
         this.appCall(15, {
           url: value.url
@@ -240,19 +277,41 @@ export class AppWrapper {
         });
       },
       refreshData: async value => {
-        this.notImplemented("refreshData");
-      },
-      // removeGeoLocationListener: async (id) => {
-      // },
-      // removeScrollListener: async (id) => {
-      // },
-      removeVisibilityChangeListener(number) {
-        removeVisibilityChangeListener(number);
-        return Promise.resolve();
-      },
-      // removeWindowMetricsListener: async (id) => {
-      //
-      // },
+        this.notImplemented('refreshData');
+      },
+      removeGeoLocationListener: async id => {
+        const {
+          shouldRemove
+        } = removeApiListener('geoLocationListener', id);
+        if (shouldRemove) {
+          // App does not support removal of request geo location call with permanent true which makes this a no-op
+        }
+      },
+      removeScrollListener: async id => {
+        const {
+          shouldRemove
+        } = removeApiListener('scrollListener', id);
+        if (shouldRemove && this.scrollListener) {
+          window.removeEventListener('scroll', this.scrollListener);
+          this.scrollListener = null;
+        }
+      },
+      removeVisibilityChangeListener: async id => {
+        const {
+          shouldRemove
+        } = removeApiListener('visibilityChangeListener', id);
+        if (shouldRemove) {
+          // App does not support removal of onActivate callback which makes this a no-op
+        }
+      },
+      removeWindowMetricsListener: async id => {
+        const shouldRemove = removeApiListener('windowMetricsListener', id);
+        if (shouldRemove) {
+          void this.exposedFunctions.removeWindowMetricsListener(id);
+          if (this.resizeListener) window.removeEventListener('resize', this.resizeListener);
+          this.resizeListener = null;
+        }
+      },
       selectPage: async options => {
         void this.appCall(2, {
           id: options.id,
@@ -283,7 +342,7 @@ export class AppWrapper {
         return sendMessageToUser(this, message, userId);
       },
       setAdminMode: async () => {
-        this.notImplemented("setAdminMode");
+        this.notImplemented('setAdminMode');
       },
       setDisplayTimeout: async enabled => {
         this.appCall(94, {
@@ -308,10 +367,10 @@ export class AppWrapper {
         }, callback));
       },
       setHeight: async () => {
-        this.notImplemented("setOverlay");
+        this.notImplemented('setOverlay');
       },
       setOverlay: async () => {
-        this.notImplemented("setOverlay");
+        this.notImplemented('setOverlay');
       },
       setRefreshScrollEnabled: async isEnabled => {
         this.appCall(0, {
@@ -327,7 +386,7 @@ export class AppWrapper {
         return await this.appCall(34, value);
       },
       setTempDesignSettings: async () => {
-        this.notImplemented("setTempDesignSettings");
+        this.notImplemented('setTempDesignSettings');
       },
       setWaitCursor: async value => {
         void this.appCall(1, {
@@ -370,12 +429,44 @@ export class AppWrapper {
         void this.appCall(19, value, {
           awaitResult: false
         });
+      },
+      openDialog: async function () {
+        return _this.openDialog(...arguments);
+      },
+      createDialog: config => {
+        return {
+          close: async value => {
+            this.dialogs.find(x => x.dialogId === dialogId).eventTarget.dispatchEvent(new CustomEvent('close', {
+              detail: data
+            }));
+          },
+          open: async () => {
+            return await this.openDialog(config);
+          }
+        };
+      },
+      closeDialog: (dialogId, data) => {
+        try {
+          this.dialogs.find(x => x.dialogId === dialogId).eventTarget.dispatchEvent(new CustomEvent('requestClose', {
+            detail: data
+          }));
+        } catch (e) {
+          console.error(e);
+        }
       }
     });
+    _defineProperty(this, "dialogs", []);
+    _defineProperty(this, "dialogEventTarget", new EventTarget());
   }
   notImplemented(call) {
     console.warn(`call ${call} not implement in app`);
   }
+  dispatchDialogChange(detail) {
+    this.dialogs = detail;
+    this.dialogEventTarget.dispatchEvent(new CustomEvent('change', {
+      detail
+    }));
+  }
   appCall(action) {
     let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     let {
@@ -401,13 +492,30 @@ export class AppWrapper {
         }
         resolve((_v$retVal2 = v === null || v === void 0 ? void 0 : v.retVal) !== null && _v$retVal2 !== void 0 ? _v$retVal2 : v);
       };
-      value.callback = "window." + callbackName;
+      value.callback = 'window.' + callbackName;
       invokeAppCall({
         action,
         value
       });
     });
   }
+  async openDialog(config) {
+    const currentDialogId = appWrapperDialogId;
+    const res = await new Promise(resolve => {
+      const eventTarget = new EventTarget();
+      this.dispatchDialogChange([...(this.dialogs || []), {
+        config,
+        resolve,
+        dialogId: appWrapperDialogId++,
+        eventTarget
+      }]);
+    });
+    this.dispatchDialogChange(this.dialogs.filter(x => x.dialogId !== currentDialogId));
+    return res;
+  }
+  getDialogEventTarget() {
+    return this.dialogEventTarget;
+  }
   async init() {
     this.values = this.mapOldApiToNew(await this.appCall(18));
     return undefined;
@@ -425,4 +533,13 @@ export class AppWrapper {
   getInitialData() {
     return this.values;
   }
+  createDialog(config) {
+    return {
+      close: () => {},
+      open: async () => {
+        const dialog = await functions.openDialog(config);
+        return dialog;
+      }
+    };
+  }
 }