chayns-api 1.0.13 → 1.0.15

package/dist/cjs/calls/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.vibrate = exports.user = exports.storageSetItem = exports.storageRemoveItem = exports.storageGetItem = exports.site = exports.setWaitCursor = exports.setTempDesignSettings = exports.setScanQrCode = exports.setRefreshScrollEnabled = exports.setOverlay = exports.setHeight = exports.setFloatingButton = exports.setDisplayTimeout = exports.setAdminMode = exports.sendMessageToUser = exports.sendMessageToPage = exports.sendMessageToGroup = exports.selectPage = exports.scrollToY = exports.scrollByY = exports.removeWindowMetricsListener = exports.removeVisibilityChangeListener = exports.removeScrollListener = exports.removeGeoLocationListener = exports.refreshData = exports.refreshAccessToken = exports.parameters = exports.pages = exports.openVideo = exports.openUrl = exports.openImage = exports.navigateBack = exports.logout = exports.login = exports.language = exports.invokeDialogCall = exports.invokeCall = exports.getWindowMetrics = exports.getUserInfo = exports.getUser = exports.getSite = exports.getScrollPosition = exports.getParameters = exports.getPages = exports.getLanguage = exports.getGeoLocation = exports.getEnvironment = exports.getDevice = exports.getCurrentPage = exports.getAvailableSharingServices = exports.getAccessToken = exports.environment = exports.device = exports.customCallbackFunction = exports.addWindowMetricsListener = exports.addVisibilityChangeListener = exports.addScrollListener = exports.addGeoLocationListener = void 0;
+exports.vibrate = exports.user = exports.storageSetItem = exports.storageRemoveItem = exports.storageGetItem = exports.site = exports.setWaitCursor = exports.setTempDesignSettings = exports.setScanQrCode = exports.setRefreshScrollEnabled = exports.setOverlay = exports.setHeight = exports.setFloatingButton = exports.setDisplayTimeout = exports.setAdminMode = exports.sendMessageToUser = exports.sendMessageToPage = exports.sendMessageToGroup = exports.selectPage = exports.scrollToY = exports.scrollByY = exports.removeWindowMetricsListener = exports.removeVisibilityChangeListener = exports.removeScrollListener = exports.removeGeoLocationListener = exports.refreshData = exports.refreshAccessToken = exports.parameters = exports.pages = exports.openVideo = exports.openUrl = exports.openImage = exports.navigateBack = exports.logout = exports.login = exports.language = exports.invokeDialogCall = exports.invokeCall = exports.getWindowMetrics = exports.getUserInfo = exports.getUser = exports.getSite = exports.getScrollPosition = exports.getParameters = exports.getPages = exports.getLanguage = exports.getGeoLocation = exports.getEnvironment = exports.getDevice = exports.getCurrentPage = exports.getAvailableSharingServices = exports.getAccessToken = exports.environment = exports.device = exports.customCallbackFunction = exports.createDialog = exports.addWindowMetricsListener = exports.addVisibilityChangeListener = exports.addScrollListener = exports.addGeoLocationListener = void 0;
 var _ChaynsProvider = require("../components/ChaynsProvider");
 /**
  * This adds a listener to determine your location.
@@ -224,9 +224,14 @@ const storageSetItem = (...args) => _ChaynsProvider.moduleWrapper.current.functi
 exports.storageSetItem = storageSetItem;
 const vibrate = (...args) => _ChaynsProvider.moduleWrapper.current.functions.vibrate(...args);
 /**
- * Displays an overlay
+ * This method creates a dialog
  */
 exports.vibrate = vibrate;
+const createDialog = (...args) => _ChaynsProvider.moduleWrapper.current.functions.createDialog(...args);
+/**
+ * Displays an overlay
+ */
+exports.createDialog = createDialog;
 const setOverlay = (...args) => _ChaynsProvider.moduleWrapper.current.functions.setOverlay(...args);
 /**
  * Returns user information, only when user is logged in

package/dist/cjs/components/AppDialogWrapper.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ChaynsHost = _interopRequireDefault(require("../host/ChaynsHost"));
+var _hooks = require("../hooks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const AppDialogWrapper = ({
+  dialogEventTarget
+}) => {
+  const functions = (0, _hooks.useFunctions)();
+  const data = (0, _hooks.useValues)();
+  const [dialogData, setDialogData] = (0, _react.useState)({
+    dialogs: []
+  });
+  (0, _react.useEffect)(() => {
+    dialogEventTarget.addEventListener('change', e => {
+      setDialogData({
+        dialogs: e.detail
+      });
+    });
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_ChaynsHost.default, _extends({
+    type: "client-module",
+    system: {
+      module: './AppWrapper',
+      url: 'https://tapp-staging.chayns-static.space/api/dialog-v2/v1/remoteEntry.js',
+      scope: 'dialog_v2'
+    }
+  }, data, {
+    functions: functions,
+    customData: dialogData
+  }));
+};
+var _default = AppDialogWrapper;
+exports.default = _default;

package/dist/cjs/components/ChaynsProvider.js

@@ -13,6 +13,7 @@ var _FrameWrapper = require("../wrapper/FrameWrapper");
 var _ModuleFederationWrapper = require("../wrapper/ModuleFederationWrapper");
 var _SsrWrapper = require("../wrapper/SsrWrapper");
 var _ChaynsContext = require("./ChaynsContext");
+var _AppDialogWrapper = _interopRequireDefault(require("./AppDialogWrapper"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,7 +45,7 @@ const ChaynsProvider = ({
   renderedByServer,
   isModule
 }) => {
-  var _customWrapper$curren, _customWrapper$curren2, _customWrapper$curren3;
+  var _customWrapper$curren, _customWrapper$curren2, _customWrapper$curren3, _customWrapper$curren4;
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const customWrapper = (0, _react.useRef)(null);
   if (!customWrapper.current) {
@@ -107,7 +108,9 @@ const ChaynsProvider = ({
     value: state
   }, /*#__PURE__*/_react.default.createElement(_ChaynsContext.ChaynsFunctionsContext.Provider, {
     value: (_customWrapper$curren3 = customWrapper.current) === null || _customWrapper$curren3 === void 0 ? void 0 : _customWrapper$curren3.functions
-  }, children)), /*#__PURE__*/_react.default.createElement(InitialDataProvider, {
+  }, children, customWrapper.current instanceof _AppWrapper.AppWrapper ? /*#__PURE__*/_react.default.createElement(_AppDialogWrapper.default, {
+    dialogEventTarget: (_customWrapper$curren4 = customWrapper.current) === null || _customWrapper$curren4 === void 0 ? void 0 : _customWrapper$curren4.getDialogEventTarget()
+  }) : false)), /*#__PURE__*/_react.default.createElement(InitialDataProvider, {
     data: state,
     renderedByServer: renderedByServer
   }));

package/dist/cjs/handler/DialogHandler.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class DialogHandler {
+  isOpen = false;
+  result = undefined;
+  listeners = [];
+  constructor(config, open, close, dispatchEvent, addDataListener) {
+    this._open = open;
+    this._close = close;
+    this._config = config;
+    this._dispatchEvent = dispatchEvent;
+    this._addDataListener = addDataListener;
+  }
+  async open() {
+    if (this.isOpen) {
+      throw new Error('cannot open a dialog which is already open');
+    }
+    const res = await new Promise(async resolve => {
+      const callback = data => {
+        this.isOpen = false;
+        resolve(data);
+      };
+      this.isOpen = true;
+      this.dialogId = await this._open(this._config, callback);
+
+      // console.log('dialogId', this.dialogId);
+
+      this._addDataListener(this.dialogId, data => {
+        // console.log('[DialogHandler]dataListener', this.dialogId, data);
+        this.listeners.forEach(cb => cb(data));
+      });
+    });
+    return this.result = res;
+  }
+  close(buttonType, data) {
+    if (!this.isOpen) {
+      return;
+    }
+    this.isOpen = false;
+    this._close(this.dialogId, data);
+  }
+  dispatchEvent(data) {
+    if (!this.isOpen) {
+      return;
+    }
+    this._dispatchEvent(this.dialogId, data);
+  }
+  addDataListener(listener) {
+    this.listeners.push(listener);
+  }
+  removeDataListener(listener) {
+    const index = this.listeners.findIndex(l => l === listener);
+    if (index > -1) {
+      this.listeners.splice(index, 1);
+    }
+  }
+  getResult() {
+    return this.result;
+  }
+}
+exports.default = DialogHandler;

package/dist/cjs/hooks/index.js

@@ -33,6 +33,18 @@ Object.defineProperty(exports, "useDevice", {
     return _useDevice.useDevice;
   }
 });
+Object.defineProperty(exports, "useDialogData", {
+  enumerable: true,
+  get: function () {
+    return _useDialogState.useDialogData;
+  }
+});
+Object.defineProperty(exports, "useDialogState", {
+  enumerable: true,
+  get: function () {
+    return _useDialogState.useDialogState;
+  }
+});
 Object.defineProperty(exports, "useEnvironment", {
   enumerable: true,
   get: function () {
@@ -156,4 +168,5 @@ var _useLanguage = require("./useLanguage");
 var _useValues = require("./useValues");
 var _useFunctions = require("./useFunctions");
 var _useCurrentPage = require("./useCurrentPage");
-var _useCustomData = require("./useCustomData");
+var _useCustomData = require("./useCustomData");
+var _useDialogState = require("./useDialogState");

package/dist/cjs/hooks/useDialogState.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDialogState = exports.useDialogData = void 0;
+var _useContextSelector = require("use-context-selector");
+var _ChaynsContext = require("../components/ChaynsContext");
+/**
+ * @category Hooks
+ */
+const useDialogState = () => {
+  const setResult = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, v => v === null || v === void 0 ? void 0 : v.setDialogResult);
+  const sendData = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, v => v === null || v === void 0 ? void 0 : v.dispatchEventToDialogHost);
+  const addDataListener = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, v => v === null || v === void 0 ? void 0 : v.addDialogHostEventListener);
+  const isClosingRequested = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => {
+    var _v$dialog;
+    return v === null || v === void 0 ? void 0 : (_v$dialog = v.dialog) === null || _v$dialog === void 0 ? void 0 : _v$dialog.isClosingRequested;
+  });
+  return {
+    setResult,
+    sendData,
+    addDataListener,
+    isClosingRequested
+  };
+};
+
+/**
+ * @category Hooks
+ */
+exports.useDialogState = useDialogState;
+const useDialogData = () => {
+  const inputData = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => {
+    var _v$dialog2;
+    return v === null || v === void 0 ? void 0 : (_v$dialog2 = v.dialog) === null || _v$dialog2 === void 0 ? void 0 : _v$dialog2.dialogInput;
+  });
+  return inputData;
+};
+exports.useDialogData = useDialogData;

package/dist/cjs/host/ChaynsHost.js

@@ -28,7 +28,8 @@ const ChaynsHost = ({
   parameters,
   customData,
   environment,
-  preventStagingReplacement
+  preventStagingReplacement,
+  dialog
 }) => {
   switch (type) {
     case 'client-iframe':
@@ -47,7 +48,8 @@ const ChaynsHost = ({
         parameters: parameters,
         environment: environment,
         customData: customData,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'client-module':
       return /*#__PURE__*/_react.default.createElement(_ModuleHost.default, {
@@ -64,7 +66,8 @@ const ChaynsHost = ({
         parameters: parameters,
         customData: customData,
         environment: environment,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'server-iframe':
       return /*#__PURE__*/_react.default.createElement(_HostIframe.default, {
@@ -83,7 +86,8 @@ const ChaynsHost = ({
         parameters: parameters,
         environment: environment,
         customData: customData,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'server-module':
       return /*#__PURE__*/_react.default.createElement(_ModuleHost.default, {
@@ -99,7 +103,8 @@ const ChaynsHost = ({
         parameters: parameters,
         customData: customData,
         environment: environment,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       }, children);
     default:
       return null;

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

@@ -30,7 +30,8 @@ const HostIframe = ({
   parameters,
   environment,
   customData,
-  preventStagingReplacement
+  preventStagingReplacement,
+  dialog
 }) => {
   const eventTarget = (0, _react.useRef)();
   const ref = (0, _react.useRef)();
@@ -56,7 +57,8 @@ const HostIframe = ({
     language,
     parameters,
     environment,
-    customData
+    customData,
+    dialog
   };
   // endregion
 
@@ -116,6 +118,7 @@ const HostIframe = ({
   (0, _useUpdateData.default)(eventTarget.current, 'parameters', parameters);
   (0, _useUpdateData.default)(eventTarget.current, 'environment', environment);
   (0, _useUpdateData.default)(eventTarget.current, 'customData', customData);
+  (0, _useUpdateData.default)(eventTarget.current, 'dialog', dialog);
   // endregion
 
   return /*#__PURE__*/_react.default.createElement("iframe", _extends({

package/dist/cjs/host/module/ModuleHost.js

@@ -50,6 +50,7 @@ const ModuleHost = ({
   language,
   parameters,
   customData,
+  dialog,
   environment,
   preventStagingReplacement
 }) => {
@@ -68,6 +69,9 @@ const ModuleHost = ({
   if (user) {
     initialData.user = user;
   }
+  if (dialog) {
+    initialData.dialog = dialog;
+  }
   // endregion
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/types/IChaynsReact.js

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TappEvent = exports.SharingApp = exports.ScreenSize = exports.ScanQrCodeCodeType = exports.ScanQrCodeCameraTypes = exports.RuntimeEnviroment = exports.Language = exports.IconType = exports.Gender = exports.Font = exports.FloatingButtonPosition = exports.Environment = exports.DeviceOs = exports.ColorMode = exports.BrowserName = exports.AppName = exports.AccessMode = void 0;
+exports.TappEvent = exports.SharingApp = exports.ScreenSize = exports.ScanQrCodeCodeType = exports.ScanQrCodeCameraTypes = exports.RuntimeEnviroment = exports.Language = exports.IconType = exports.Gender = exports.Font = exports.FloatingButtonPosition = exports.Environment = exports.DialogType = exports.DialogButtonType = exports.DeviceOs = exports.ColorMode = exports.BrowserName = exports.AppName = exports.AccessMode = void 0;
+let DialogButtonType;
+exports.DialogButtonType = DialogButtonType;
+(function (DialogButtonType) {
+  DialogButtonType[DialogButtonType["OK"] = 1] = "OK";
+  DialogButtonType[DialogButtonType["CANCEL"] = -1] = "CANCEL";
+  DialogButtonType[DialogButtonType["NEGATIVE"] = 0] = "NEGATIVE";
+})(DialogButtonType || (exports.DialogButtonType = DialogButtonType = {}));
 let ScreenSize;
 exports.ScreenSize = ScreenSize;
 (function (ScreenSize) {
@@ -258,4 +265,17 @@ var selectType;
 (function (selectType) {
   selectType[selectType["DEFAULT"] = 0] = "DEFAULT";
   selectType[selectType["ICON"] = 1] = "ICON";
-})(selectType || (selectType = {}));
+})(selectType || (selectType = {}));
+let DialogType;
+exports.DialogType = 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 || (exports.DialogType = DialogType = {}));

package/dist/cjs/wrapper/AppWrapper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AppWrapper = void 0;
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _DialogHandler = _interopRequireDefault(require("../handler/DialogHandler"));
 var _IChaynsReact = require("../types/IChaynsReact");
 var _appCall = _interopRequireDefault(require("../util/appCall"));
 var _deviceHelper = _interopRequireWildcard(require("../util/deviceHelper"));
@@ -17,6 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable */
 // @ts-nocheck
 
+let appWrapperDialogId = 0;
 class AppWrapper {
   values = null;
   accessToken = '';
@@ -98,6 +100,12 @@ class AppWrapper {
   notImplemented(call) {
     console.warn(`call ${call} not implement in app`);
   }
+  dispatchDialogChange(detail) {
+    this.dialogs = detail;
+    this.dialogEventTarget.dispatchEvent(new CustomEvent('change', {
+      detail
+    }));
+  }
   counter = 0;
   appCall(action, value = {}, {
     callback,
@@ -468,8 +476,39 @@ class AppWrapper {
       void this.appCall(19, value, {
         awaitResult: false
       });
+    },
+    createDialog: config => {
+      return new _DialogHandler.default(config, this.functions.openDialog, this.functions.closeDialog);
+    },
+    openDialog: async (config, callback) => {
+      const currentDialogId = appWrapperDialogId++;
+      const eventTarget = new EventTarget();
+      const resolve = result => {
+        callback(result);
+        this.dispatchDialogChange(this.dialogs.filter(x => x.dialogId !== currentDialogId));
+      };
+      this.dispatchDialogChange([...this.dialogs, {
+        config,
+        resolve,
+        dialogId: currentDialogId,
+        eventTarget
+      }]);
+      return currentDialogId;
+    },
+    closeDialog: dialogId => {
+      const dialog = this.dialogs.find(x => x.dialogId === dialogId);
+      if (dialog) {
+        dialog.resolve({
+          buttonType: -1
+        });
+      }
     }
   };
+  dialogs = [];
+  dialogEventTarget = new EventTarget();
+  getDialogEventTarget() {
+    return this.dialogEventTarget;
+  }
   async init() {
     this.values = this.mapOldApiToNew(await this.appCall(18));
     return undefined;

package/dist/cjs/wrapper/FrameWrapper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FrameWrapper = void 0;
 var comlink = _interopRequireWildcard(require("comlink"));
+var _DialogHandler = _interopRequireDefault(require("../handler/DialogHandler"));
 var _visibilityChangeListener = require("../calls/visibilityChangeListener");
 var _apiListenerHelper = require("../helper/apiListenerHelper");
 var _getUserInfo = _interopRequireDefault(require("../calls/getUserInfo"));
@@ -233,7 +234,57 @@ class FrameWrapper {
     scrollByY: async (value, duration) => {
       if (!this.initialized) await this.ready;
       return this.exposedFunctions.scrollByY(value, duration);
-    }
+    },
+    createDialog: config => {
+      return new _DialogHandler.default(config, this.functions.openDialog, this.exposedFunctions.closeDialog, this.functions.dispatchEventToDialogClient, this.functions.addDialogClientEventListener);
+    },
+    closeDialog: async dialogId => {
+      if (!this.initialized) await this.ready;
+      return this.exposedFunctions.closeDialog(dialogId);
+    },
+    openDialog: async (config, callback) => {
+      if (!this.initialized) await this.ready;
+      return this.exposedFunctions.openDialog(config, comlink.proxy(callback));
+    },
+    setDialogResult: async (buttonType, result) => {
+      if (!this.initialized) await this.ready;
+      return this.exposedFunctions.setDialogResult(buttonType, result);
+    },
+    dispatchEventToDialogClient: async (dialogId, data) => {
+      if (!this.initialized) await this.ready;
+      return this.exposedFunctions.dispatchEventToDialogClient(dialogId, data);
+    },
+    addDialogClientEventListener: async (dialogId, callback) => {
+      if (!this.initialized) await this.ready;
+      return this.exposedFunctions.addDialogClientEventListener(dialogId, comlink.proxy(callback));
+    },
+    dispatchEventToDialogHost: async data => {
+      if (!this.initialized) await this.ready;
+      return this.exposedFunctions.dispatchEventToDialogHost(data);
+    },
+    addDialogHostEventListener: async callback => {
+      if (!this.initialized) await this.ready;
+      const listenerKey = `dialogHostEventListener`;
+      const {
+        id,
+        shouldInitialize
+      } = (0, _apiListenerHelper.addApiListener)(listenerKey, callback);
+      if (shouldInitialize) {
+        this.exposedFunctions.addDialogHostEventListener(comlink.proxy(data => {
+          (0, _apiListenerHelper.dispatchApiEvent)(listenerKey, data);
+        }));
+      }
+      return id;
+    },
+    removeDialogHostEventListener: async id => {
+      if (!this.initialized) await this.ready;
+      const listenerKey = `dialogHostEventListener`;
+      const shouldRemove = (0, _apiListenerHelper.removeApiListener)(listenerKey, id);
+      if (shouldRemove) {
+        // this.exposedFunctions.removeDialogHostEventListener(0);
+      }
+    },
+    removeDialogClientEventListener: async () => {}
   };
   initialized = false;
   constructor() {

package/dist/cjs/wrapper/ModuleFederationWrapper.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModuleFederationWrapper = void 0;
+var _DialogHandler = _interopRequireDefault(require("../handler/DialogHandler"));
 var _visibilityChangeListener = require("../calls/visibilityChangeListener");
 var _apiListenerHelper = require("../helper/apiListenerHelper");
 var _getUserInfo = _interopRequireDefault(require("../calls/getUserInfo"));
@@ -24,6 +25,9 @@ class ModuleFederationWrapper {
       // eslint-disable-next-line
       this.functions[k] = async (...args) => fn(...args);
     });
+    this.functions.createDialog = config => {
+      return new _DialogHandler.default(config, functions.openDialog, functions.closeDialog, functions.dispatchEventToDialogClient, functions.addDialogClientEventListener);
+    };
     this.functions.addWindowMetricsListener = async callback => {
       const {
         id,

package/dist/esm/calls/index.js

@@ -261,6 +261,12 @@ export const storageSetItem = function () {
 export const vibrate = function () {
   return moduleWrapper.current.functions.vibrate(...arguments);
 };
+/**
+ * This method creates a dialog
+ */
+export const createDialog = function () {
+  return moduleWrapper.current.functions.createDialog(...arguments);
+};
 /**
  * Displays an overlay
  */

package/dist/esm/components/AppDialogWrapper.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useEffect, useState } from 'react';
+import ChaynsHost from '../host/ChaynsHost';
+import { useFunctions, useValues } from '../hooks';
+const AppDialogWrapper = _ref => {
+  let {
+    dialogEventTarget
+  } = _ref;
+  const functions = useFunctions();
+  const data = useValues();
+  const [dialogData, setDialogData] = useState({
+    dialogs: []
+  });
+  useEffect(() => {
+    dialogEventTarget.addEventListener('change', e => {
+      setDialogData({
+        dialogs: e.detail
+      });
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(ChaynsHost, _extends({
+    type: "client-module",
+    system: {
+      module: './AppWrapper',
+      url: 'https://tapp-staging.chayns-static.space/api/dialog-v2/v1/remoteEntry.js',
+      scope: 'dialog_v2'
+    }
+  }, data, {
+    functions: functions,
+    customData: dialogData
+  }));
+};
+export default AppDialogWrapper;

package/dist/esm/components/ChaynsProvider.js

@@ -7,6 +7,7 @@ import { FrameWrapper } from '../wrapper/FrameWrapper';
 import { ModuleFederationWrapper } from '../wrapper/ModuleFederationWrapper';
 import { SsrWrapper } from '../wrapper/SsrWrapper';
 import { ChaynsContext, ChaynsFunctionsContext } from './ChaynsContext';
+import AppDialogWrapper from "./AppDialogWrapper";
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 export const moduleWrapper = {
@@ -30,7 +31,7 @@ const InitialDataProvider = /*#__PURE__*/React.memo(_ref => {
   });
 }, () => true);
 const ChaynsProvider = _ref2 => {
-  var _customWrapper$curren, _customWrapper$curren2, _customWrapper$curren3;
+  var _customWrapper$curren, _customWrapper$curren2, _customWrapper$curren3, _customWrapper$curren4;
   let {
     children,
     data,
@@ -101,7 +102,9 @@ const ChaynsProvider = _ref2 => {
     value: state
   }, /*#__PURE__*/React.createElement(ChaynsFunctionsContext.Provider, {
     value: (_customWrapper$curren3 = customWrapper.current) === null || _customWrapper$curren3 === void 0 ? void 0 : _customWrapper$curren3.functions
-  }, children)), /*#__PURE__*/React.createElement(InitialDataProvider, {
+  }, children, customWrapper.current instanceof AppWrapper ? /*#__PURE__*/React.createElement(AppDialogWrapper, {
+    dialogEventTarget: (_customWrapper$curren4 = customWrapper.current) === null || _customWrapper$curren4 === void 0 ? void 0 : _customWrapper$curren4.getDialogEventTarget()
+  }) : false)), /*#__PURE__*/React.createElement(InitialDataProvider, {
     data: state,
     renderedByServer: renderedByServer
   }));

package/dist/esm/handler/DialogHandler.js

@@ -0,0 +1,61 @@
+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); }
+export default class DialogHandler {
+  constructor(config, open, close, dispatchEvent, addDataListener) {
+    _defineProperty(this, "isOpen", false);
+    _defineProperty(this, "result", undefined);
+    _defineProperty(this, "listeners", []);
+    this._open = open;
+    this._close = close;
+    this._config = config;
+    this._dispatchEvent = dispatchEvent;
+    this._addDataListener = addDataListener;
+  }
+  async open() {
+    if (this.isOpen) {
+      throw new Error('cannot open a dialog which is already open');
+    }
+    const res = await new Promise(async resolve => {
+      const callback = data => {
+        this.isOpen = false;
+        resolve(data);
+      };
+      this.isOpen = true;
+      this.dialogId = await this._open(this._config, callback);
+
+      // console.log('dialogId', this.dialogId);
+
+      this._addDataListener(this.dialogId, data => {
+        // console.log('[DialogHandler]dataListener', this.dialogId, data);
+        this.listeners.forEach(cb => cb(data));
+      });
+    });
+    return this.result = res;
+  }
+  close(buttonType, data) {
+    if (!this.isOpen) {
+      return;
+    }
+    this.isOpen = false;
+    this._close(this.dialogId, data);
+  }
+  dispatchEvent(data) {
+    if (!this.isOpen) {
+      return;
+    }
+    this._dispatchEvent(this.dialogId, data);
+  }
+  addDataListener(listener) {
+    this.listeners.push(listener);
+  }
+  removeDataListener(listener) {
+    const index = this.listeners.findIndex(l => l === listener);
+    if (index > -1) {
+      this.listeners.splice(index, 1);
+    }
+  }
+  getResult() {
+    return this.result;
+  }
+}

package/dist/esm/hooks/index.js

@@ -13,4 +13,5 @@ export { useLanguage } from './useLanguage';
 export { useValues } from './useValues';
 export { useFunctions } from './useFunctions';
 export { useCurrentPage } from './useCurrentPage';
-export { useCustomData } from './useCustomData';
+export { useCustomData } from './useCustomData';
+export { useDialogState, useDialogData } from './useDialogState';